Colorize LV_SYMBOL_CLOSE in keyboard map

How-to
1

After colorizing the keyboard button text mapped to a keyword such as “LV_SYMBOL_CLOSE” no longer performs the close action, but instead inserts the button text to the text area.

Code to reproduce

This is my button map:

const char* map_querty[] =
{
  "0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "\n",
  "Q", "W", "E", "R", "T", "Y", "U", "I", "O", "P", "\n",
  "-", "A", "S", "D", "F", "G", "H", "J", "K", "L", "\n",
  "_", "Z", "X", "C", "V", "B", "N", "M", "Bksp", "\n",
  " #f73e3e "LV_SYMBOL_CLOSE"#", " #339966 "LV_SYMBOL_OK"#", "",
};

This is the definition of the keyboard:

  sampleIdState.kb = lv_kb_create(sampleIdState.scr, NULL);
  lv_kb_set_mode(sampleIdState.kb, LV_KB_MODE_TEXT);
  lv_kb_set_map(sampleIdState.kb, map_querty);
  lv_btnm_set_btn_width(sampleIdState.kb, 38, 2);
  lv_btnm_set_recolor(sampleIdState.kb, true);

When I press LV_SYMBOL_OK, here is the result

image
image.jpg2784×2106 1.09 MB

2

It’s a limitation of how recoloring works. The keyboard logic checks for the UTF-8 LV_SYMBOL_CLOSE character, but instead finds the recoloring information. As such, it treats the button as though it were any other letter.

A workaround is to use a custom event handler on the keyboard that reimplements this logic but checks for the recoloring string as well. You can call through to lv_kb_def_event_cb so other keys are still processed normally.

2 Likes