How to change ButtonMatrix- background's color to transparent color?

How-to
1

Description

I wish to change ButtonMatrix- background’s color to transparent color ,
but when config by LV_COLOR_TRANSP , it shows green instead.

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

  • ESP32

What do you want to achieve?

ButtonMatrix- background’s color to transparent color.

What have you tried so far?

Code to reproduce

static const char * btnm_map[] = {"1", "2", "3", "4", "5", "\n",
                                  "6", "7", "8", "9", "10", "\n",
                                  "11", "12", "13", "14", "15", "\n",
                                  "16", "17", "18", "19", "20", ""
                                 };

void create_ButtonMatrix() {
  lv_obj_t * btnm1 = lv_btnm_create(lv_scr_act(), NULL);
  lv_obj_set_size(btnm1, 320,240);

  /* style should set before map */
  static lv_style_t style_bg;
  lv_style_copy(&style_bg  , lv_btnm_get_style(btnm1, LV_BTNM_STYLE_BG));
  lv_btnm_set_style(btnm1, LV_BTNM_STYLE_BG, &style_bg);

  uint8_t padding = 10;
  style_bg.body.padding.inner   = padding;
  style_bg.body.padding.bottom  = padding;
  style_bg.body.padding.left    = padding;
  style_bg.body.padding.right   = padding;
  style_bg.body.padding.top     = padding;

  style_bg.body.main_color      = LV_COLOR_TRANSP;   //LV_COLOR_RED;
  style_bg.body.grad_color      = LV_COLOR_TRANSP;   //LV_COLOR_RED;

  /* mapping */
  lv_btnm_set_map(btnm1, btnm_map);
  lv_obj_align(btnm1, NULL, LV_ALIGN_CENTER, 0,0);

  lv_obj_set_event_cb(btnm1, [](lv_obj_t *obj, lv_event_t event) {
    if (event == LV_EVENT_VALUE_CHANGED) {
      const char* txt = lv_btnm_get_active_btn_text(obj);
      if(txt != NULL) Serial.printf("%s was pressed\n",txt );
    }
  });
}

Screenshot and/or video

2

Just set the background style to &lv_style_transp.

1 Like
3

Thank you.

Another issue is when changing padding-value

  uint8_t padding = 10;
  style_bg.body.padding.inner   = padding;
  style_bg.body.padding.top     =  0;
  style_bg.body.padding.bottom  = 0;
  style_bg.body.padding.left    = 0;
  style_bg.body.padding.right   = 0;

The last row of the ButtonMatrix 's height seems taller than other rows.

image

And when changing padding-value

  uint8_t padding = 10;
  style_bg.body.padding.inner   = padding;
  style_bg.body.padding.top     =  30;
  style_bg.body.padding.bottom  = 0;
  style_bg.body.padding.left    = 0;
  style_bg.body.padding.right   = 0;

The bottom padding result seems not to be 0.

image

4

It’s because of the accumulated rounding errors. E.g. full height is 98 px and there are 4 rows.Then one row should have 24 px height but then 4 rows has 96 px height. As a workaround I align the last row as it should be. If you have better ide I’m open to it.

It was really a bug. I’ve fixed it in master.

2 Likes
5

How about API adjust the entire size to be ok, then draw the entire object? or the user shall use align size before display object ?

6

You can use lv_obj_set_height or lv_obj_set_height to find a height which fits perfectly. It can be called any time, the Button matrix will be realigned automatically on size change.