How to remove padding from buttons in keyboard/buttonmatrix

How-to
1

Description

What MCU/Processor/Board and compiler are you using?

Ubuntu 24.04, SDL2 with vscode

What LVGL version are you using?

V9.3-dev

What do you want to achieve?

I want to remove the spacing between all buttons in this keyboard:
image

What have you tried so far?

Setting the pad to 0 of the LV_ITEMS of the keyboard, yet It doesn’t seem to affect the aspect of anything, I also tried to change the padding of the parent container, but it also didn’t seem to change anything…

Code to reproduce

I have created a style like this:

lv_style_t style_keyboard_cnt;          // Container for keyboard
lv_style_t style_keyboard_btn;          // Button style

static init_keyboard_style(void){
     lv_style_init(&style_keyboard_cnt);
     lv_style_set_pad_all(&style_keyboard_cnt, 0);
     lv_style_set_pad_gap(&style_keyboard_cnt, 0);
     lv_style_set_margin_all(&style_keyboard_cnt, 20);
     lv_style_set_clip_corner(&style_keyboard_cnt, true);
     lv_style_set_radius(&style_keyboard_cnt, LV_RADIUS_CIRCLE);
     lv_style_set_border_width(&style_keyboard_cnt, 0);

     lv_style_init(&style_keyboard_btn);
     lv_style_set_radius(&style_keyboard_btn, 0);
     lv_style_set_pad_all(&style_keyboard_btn, 1);
     lv_style_set_pad_gap(&style_keyboard_btn, 0);
     lv_style_set_margin_all(&style_keyboard_btn, 0);
     lv_style_set_border_width(&style_keyboard_btn, 1);
     lv_style_set_border_opa(&style_keyboard_btn, LV_OPA_50);
     lv_style_set_border_color(&style_keyboard_btn, lv_palette_main(LV_PALETTE_GREY));
     lv_style_set_border_side(&style_keyboard_btn, LV_BORDER_SIDE_FULL);
     lv_style_set_radius(&style_keyboard_btn, 0);
     //lv_style_set_text_color(&style_keyboard_btn, lv_palette_main(LV_PALETTE_RED));
}

And created a numpad:

static const char * numpad_map[] = {
                    "D",   "E", "F", "AC", "\n",
                    "A",   "B", "C", LV_SYMBOL_BACKSPACE, "\n",
                    "7",   "8", "9", LV_SYMBOL_OK, "\n",
                    "4",   "5", "6", LV_SYMBOL_CLOSE, "\n",
                    "1",   "2", "3", "HEX","\n",
                    "+/-", "0", ",", "BIN", NULL
};

static const lv_buttonmatrix_ctrl_t numpad_ctrl[] = {
     LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_6,
     LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_6, 
     LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_6, 
     LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_6, 
     LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_6,  
     LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_4, LV_BUTTONMATRIX_CTRL_WIDTH_6
};
void numpad_init(void){

     lv_obj_t *numpad_window = lv_obj_create(lv_screen_active());
     //lv_obj_add_style(numpad_window, &style_keyboard_cnt, LV_PART_ITEMS);
     lv_obj_t *numpad = lv_keyboard_create(numpad_window);

     lv_obj_set_size(numpad_window, lv_pct(100), lv_pct(100));
     lv_obj_set_size(numpad, lv_pct(50), lv_pct(50));

     lv_obj_set_align(numpad, LV_ALIGN_BOTTOM_RIGHT);

     lv_keyboard_set_map(numpad, LV_KEYBOARD_MODE_USER_1, numpad_map, numpad_hexadecimal_state_map);
     lv_keyboard_set_mode(numpad, LV_KEYBOARD_MODE_USER_1);
     lv_obj_add_style(numpad, &style_keyboard_btn, LV_PART_ITEMS);
}

Screenshot and/or video

Left LVGL Numpad, right the desired result, with a smaller spacing / padding between buttons

image
image997×366 19.5 KB

2

u can try: lv_obj_set_style_pad_all(numpad, 0, LV_PART_MAIN);

3

nope, doesn’t change anything

4

i think you put the style for it’s children not it, try with:

     lv_obj_add_style(numpad, &style_keyboard_btn, LV_PART_MAIN);

and you forgot the void in here:

static init_keyboard_style(void){
5

This was it, I had tried something similar with

lv_obj_add_style(numpad, &style_keyboard_btn, LV_PART_ANY);

But the keyboard didn’t use the style I was telling it to use.
I had to add so that the style would go to the parent (keyboard) and its childs (buttons)

     lv_obj_add_style(numpad, &style_keyboard_btn, LV_PART_ITEMS);
     lv_obj_add_style(numpad, &style_keyboard_btn, LV_PART_MAIN);

Thanks OWIchanMagican!

1 Like