Numeric Button Matrix in SLS

What do you want to achieve?

I want a simple numeric button matrix like this in SLS.

What have you tried so far?

I have tried this. But need only few options like above.

I can also see USER modes of Keyboard. Can it help? If yes, how to use it.


  • SquareLine Studio version:
  • Operating system:
  • Target hardware:


Using a USER mode is a good idea. You can customize the keyboard layout from code (after calling ui_init()).
See Keyboard (lv_keyboard) — LVGL documentation

1 Like

Its working fine now. I used this

/*Create a keyboard map*/
static const char * kb_map[] = {"1", "2", "3", "\n", "4", "5", "6", "\n", "7", "8", "9", "\n", LV_SYMBOL_BACKSPACE, "0", LV_SYMBOL_OK, NULL };

/*Set the relative width of the buttons and other controls*/
static const lv_btnmatrix_ctrl_t kb_ctrl[] = {20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20, 20};

lv_keyboard_set_map(ui_keyboard, LV_KEYBOARD_MODE_USER_1, kb_map, kb_ctrl);

Well it would be good if this functionality can be added in SLS too.

1 Like

Hello @kisvegabor,
There is a bug with the keyboard touch. The keyboard can take unwanted inputs if the any of the button is just touched. Rather it should only take the input after the touch is released. See the video here

Keshav Aggarwal

You can control it with LV_BTNMATRIX_CTRL_CLICK_TRIG control flag.

sorry to hijack an old thread, but how would i add this to my project?

You can call any LVGL related function after calling ui_init().

Where did you put this and does it show in SLS or just on screen

I put this after ui_init(). So, you won’t be able to see in SLS.

YES but it would be really cool if there was an asset available especially the common ones requested multiple times. Everything in SLS can be added via code but that’s the appeal and commercial viability of SLS. Including adding a few custom created components.