Numeric Button Matrix in SLS

How to
1

What do you want to achieve?

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

What have you tried so far?

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

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

Others

  • SquareLine Studio version:
    8.3.3
  • Operating system:
  • Target hardware:
2 Likes
2

Hi,

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
3

Hello,
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
4

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

Reagrds,
Keshav Aggarwal

5

You can control it with LV_BTNMATRIX_CTRL_CLICK_TRIG control flag.

6

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

7

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

8

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

9

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

10

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.

12

I wonder why this wasnt added as a default keyboard.

Its a pretty standard feature for machine GUI to have number input, without the advanced buttons. Like the keyboard icon, what is that even for. Dont want to enter text in , say, a temperature value box.

2 Likes
13

You should first create a ‘button’ component which you can reuse more times. Then you can create a ‘keypad’ component with a matrix of those buttons in a flex-layout.