LVGL and buttonmatrix

ESPHome
1

I have a bit of a problem here. I want to have a buttonmatrix with lights in it.
And then I want to change

checked

disabled

recolor

But when I try to do this with a lambda, it does not work.
This is what I do:

  - platform: homeassistant
    id: ts_taklampe_stua
    entity_id: light.taklampe_2_gang
    on_value:
      then:
        - lvgl.matrix.button.update:
            id: ceiling_light_symbol
            control:
              checked: !lambda return (0 == x.compare(std::string{"on"}));
              disabled: !lambda return ((0 == x.compare(std::string{"unavailable"})) or (0 == x.compare(std::string{"unknown"})));

and

              - buttonmatrix:
                  align: CENTER
                  pad_all: 0
                  outline_width: 0
                  border_color: black
                  border_width: 0
                  border_opa: TRANSP
                  x: 0
                  y: 40
                  width: 300
                  height: 50
                  bg_color: black
                  text_color: 0xD3D3D3
                  id: btnmtx_lights
                  text_font: mdi_42
                  items:
                    shadow_opa: TRANSP
                    bg_color: black
                    text_color: 0xD3D3D3
                    border_color: black
                    border_width: 0
                    border_opa: TRANSP
                  rows:
                    - buttons:
                      - id: ceiling_light_symbol
                        text: "\U000F17C7"

Leads to:

Failed config

text_sensor.homeassistant: [source /config/esphome/esp-screen-kitchen.yaml:620]
  platform: homeassistant
  id: ts_taklampe_stua
  entity_id: light.taklampe_2_gang
  on_value: 
    then: 
      - lvgl.matrix.button.update: 
          id: ceiling_light_symbol
          control: 
            
            This option is not templatable!.
            checked: !lambda |-
              return (0 == x.compare(std::string{"on"}));
            
            This option is not templatable!.
            disabled: !lambda |-
              return ((0 == x.compare(std::string{"unavailable"})) or (0 == x.compare(std::string{"unknown"})));

Is there another way to do this?

2

I like using a flex grid of individual buttons instated of a button matrix for this type of application. It’s much more flexible and works better.

I just finished building a library that you can use. You can add a button with just one line of code!

Here is a picture of what it looks like on an LCD screen.

This example should get you up and running quickly.

3

The control options are not templatable, but you can just use something like:

        on_press:
          - lvgl.widget.update:
              id: button_c
              state:
                checked: true

Where button_c is a matrix button, This will be translated into the correct code for a matrix button, and the checked value is templatable.

1 Like
4

Thank you! Literally just got up to a part in my project that required this workaround… works perfectly!

5

I did something like that to set the color of my buttons. And used a theme for making the text (mdi:icon) yellow when the light is on, and white when it’s off:

  - platform: homeassistant
    id: ts_taklampe_stua
    entity_id: light.taklampe_1_stue
    on_value:
      - if:
          condition:
            text_sensor.state: 
              id: ts_taklampe_stua
              state: "on"
          then:
            - delay: 500ms
            - lvgl.matrix.button.update:
                id: ceiling_light_symbol
                control:
                  checked: true
          else:
            - delay: 500ms
            - lvgl.matrix.button.update:
                id: ceiling_light_symbol
                control:
                  checked: false

The delay is for the lights to catch up before changing state on checked. If I didn’t have it, sometime the light and the button got out of sync.