Keyboard - rockcastle/lvgl GitHub Wiki

Written for v5.1

Overview

As it names shows the Keyboard object provides a keyboard to write text. You can assign a Text area to the Keyboard to put the clicked characters there. To assign the Text area use lv_kb_set_ta(kb, ta).

The keyboard contains an Ok and a Hide button. An ok and a hide action can be specified by lv_kb_set_ok_action(kb, action) and lv_kb_set_hide_action(kb, action) to add callbacks to Ok/Hide clicks. If no action is specified then the buttons will delete the Keyboard.

The assigned Text area's cursor can be managed by the keyboard: when the keyboard is assigned the previous Text area's cursor will be hidden an the new's will be shown. Clicking on Ok or Hide will also hide the cursor. The cursor manager feature is enabled by lv_kb_set_cursor_manage(kb, true). The default is not manage.

The Keyboards have two modes:

  • LV_KB_MODE_TEXT: display letters, number and special characters
  • LV_KB_MODE_NUM: display numbers, +/- sign and dot

To set the mode use lv_kb_set_mode(kb, mode). The default is LV_KB_MODE_TEXT

You can specify a new map (layout) for the keyboard with lv_kb_set_map(kb, map). It works like a the Button matrix so control character can be added to the layout the set button width and other attributes. Keep in mind using following keywords will have the same effect as with the original map: SYMBOL_OK, SYMBOL_CLOSE, SYMBOL_LEFT, SYMBOL_RIGHT, ABC, abc, Enter, Del, #1, +/- .

Style usage

The Keyboard works with 6 styles: a background and 5 button styles for each states. You can set the styles with lv_kb_set_style(btn, LV_KB_STYLE_..., &style). The background and the buttons use the style.body properties. The labels use the style.text properties of the button styles.

  • LV_KB_STYLE_BG Background style. Uses all style.body properties including padding Default: lv_style_pretty
  • LV_KB_STYLE_BTN_REL style of the released buttons. Default: lv_style_btn_rel
  • LV_KB_STYLE_BTN_PR style of the pressed buttons. Default: lv_style_btn_pr
  • LV_KB_STYLE_BTN_TGL_REL style of the toggled released buttons. Default: lv_style_btn_tgl_rel
  • LV_KB_STYLE_BTN_TGL_PR style of the toggled pressed buttons. Default: lv_style_btn_tgl_pr
  • LV_KB_STYLE_BTN_INA style of the inactive buttons. Default: lv_style_btn_ina

Example

Keyboard image

/*Create styles for the keyboard*/
static lv_style_t rel_style, pr_style;

lv_style_copy(&rel_style, &lv_style_btn_rel);
rel_style.body.radius = 0;

lv_style_copy(&pr_style, &lv_style_btn_pr);
pr_style.body.radius = 0;

/*Create a keyboard and apply the styles*/
lv_obj_t *kb = lv_kb_create(lv_scr_act(), NULL);
lv_kb_set_cursor_manage(kb, true);
lv_kb_set_style(kb, LV_KB_STYLE_BG, &lv_style_transp_tight);
lv_kb_set_style(kb, LV_KB_STYLE_BTN_REL, &rel_style);
lv_kb_set_style(kb, LV_KB_STYLE_BTN_PR, &pr_style);

/*Create a text area. The keyboard will write here*/
lv_obj_t *ta = lv_ta_create(lv_scr_act(), NULL);
lv_obj_align(ta, NULL, LV_ALIGN_IN_TOP_MID, 0, 10);
lv_ta_set_text(ta, "");

/*Assign the text area to the keyboard*/
lv_kb_set_ta(kb, ta);