Have a problem on LVGL and HASS

ESPHome
1

Hi I have started a small lvgl project using ESP32 2.8 inch 240*320 TFT with Touch. When i run the program, all okay but cannot toggle entity switch.
My yaml:

i2c:
  sda: GPIO21  # Orig gpio 27 for 2.8" LCD but for 2.4" gpio 21
  scl: GPIO22   # Orig gpio 22 for 2.8" LCD but for 2.4" gpio 22
  scan: true
#  id: bus_a

spi:
  - id: lcd
    clk_pin: GPIO14     # Orig gpio 14 for 2.8" LCD but for 2.4" gpio 14
    mosi_pin: GPIO13  # Orig gpio 13 for 2.8" LCD but for 2.4" gpio 13
    miso_pin: GPIO12  # Orig gpio 12 for 2.8" LCD but for 2.4" gpio 12
#  - id: touch
#    clk_pin: GPIO25     # Orig gpio 25 for 2.8" LCD but for 2.4" no
#    mosi_pin: GPIO32  # Orig gpio 32 for 2.8" LCD but for 2.4" no
#    miso_pin: GPIO39  # Orig gpio 39 for 2.8" LCD but for 2.4" no

display:
  - platform: ili9xxx
    model: ILI9341
    spi_id: lcd
    id: my_display
    cs_pin: 15       # Orig gpio 15 for 2.8" LCD but for 2.4" gpio 15
    dc_pin: 2         # Orig gpio 2 for 2.8" LCD but for 2.4" gpio 15
#    reset_pin: 3
    rotation: 180
    invert_colors: false
    update_interval: 5s  
    dimensions:
       height: 240
       width: 320

touchscreen:
  platform: xpt2046
  spi_id: lcd
  id: my_touchscreen
  cs_pin: 33                # Orig gpio 33 for 2.8" LCD but for 2.4" gpio 33
#  interrupt_pin: 36      # Orig gpio 36 for 2.8" LCD but for 2.4" gpio no
  update_interval: 150ms  
  threshold: 400
  calibration:              # Setting about for 2.4 " ???
    x_min: 200
    x_max: 3900
    y_min: 200
    y_max: 3900
#  transform:
#    mirror_x: true
#   mirror_y: false
#    swap_xy: false

output:
  - platform: ledc
    pin: GPIO27            #  Orig gpio 21 for 2.8" LCD but for 2.4" is ok 27 
    id: former_led_pin
  - platform: ledc
    id: output_red
    pin: GPIO4             # Orig gpio 33 for 2.8" LCD but for 2.4" gpio 4 is ok
    inverted: true
  - platform: ledc
    id: output_green
    pin: GPIO16         # Orig gpio 16 for 2.8" LCD but for 2.4" gpio 16 is ok
    inverted: true
  - platform: ledc
    id: output_blue
    pin: GPIO17        # Orig gpio 17 for 2.8" LCD but for 2.4" gpio 17 is ok
    inverted: true

  
    
light:
  - platform: monochromatic
    output: former_led_pin
    name: "Display Backlight"
    id: back_light
    restore_mode: ALWAYS_ON
  - platform: rgb
    name: LED
    id: led
    red: output_red
    green: output_green
    blue: output_blue
    restore_mode: ALWAYS_OFF

font:
  - file: "gfonts://Roboto"
    id: my_font
    size: 18

  - file: "gfonts://Roboto"
    id: my_font_with_icons
    size: 20
    bpp: 4
    extras:
      - file: "fonts/materialdesignicons-webfont.ttf"
        glyphs: [
          "\U000F09AC", # mdi-tool
          "\U000F1A4E", # mdi-lightbuld-on-10
          "\U000F02E3", # mdi:bed
          "\U000F0A00", # mdi:lighthouse-on
          "\U000F06E9", # mdi:lightbulb-on-outline
          "\U000F0290" # mdi:fridge


        ]

binary_sensor:
  - platform: homeassistant
    id: den_phong_ngu_state
    entity_id: switch.den_phong_ngu
    publish_initial_state: true
    on_state:
      then:
        lvgl.widget.update:
          id: bedroom_light
          state:
            checked: !lambda return x;
  - platform: lvgl
    name: button2
    widget: bedroom_light
    publish_initial_state: true

lvgl:
  buffer_size: 25%
  displays:
    - my_display
  touchscreens:
    - my_touchscreen
  pages:
      - id: room_page
        widgets:
          - obj: # a properly placed coontainer object for all these controls
              align: CENTER
              width: 300
              height: 256
              x: 4
              y: 4
              pad_all: 3
              bg_opa: TRANSP
              border_opa: TRANSP
              layout: # enable the FLEX layout for the children widgets
                type: FLEX
                flex_flow: COLUMN_WRAP # the order of the widgets starts top left
                flex_align_cross: CENTER # they sould be centered
              widgets:
                - label:
                    text: "Home"
                - button:
                    id: bedroom_light
                    width: 85 # choose the button dimensions so
                    height: 64 # they fill the columns nincely as they flow
                    checkable: true
                    widgets:
                      - label:
                          id: cov_up_east
                          align: CENTER
                          text_font: my_font_with_icons
                          text: "\U000F02E3" # mdi:arrow-up
                    on_click:
                      - homeassistant.service:
                         service: switch.toggle
                         data:
                           entity_id: switch.den_phong_ngu
                      - logger.log:
                          format: "Button checked"

                - button:
                    id: but_cov_stop_east
                    width: 85
                    height: 64
                    checkable: true
                    widgets:
                      - label:
                          id: cov_stop_east
                          align: CENTER
                          text_font: my_font_with_icons
                          text: "\U000F1A4E" # mdi:stop
                - button:
                    id: but_cov_down_east
                    width: 85
                    height: 64
                    checkable: true
                    widgets:
                      - label:
                          id: cov_down_east
                          align: CENTER
                          text_font: my_font_with_icons
                          text: "\U000F06E9" # mdi:arrow-down

                - label:
                    text: "South"
                - button:
                    id: but_cov_up_south
                    width: 85
                    height: 64
                    checkable: true
                    widgets:
                      - label:
                          id: cov_up_south
                          align: CENTER
                          text_font: my_font_with_icons
                          text: "\U000F005D"
                - button:
                    id: but_cov_stop_south
                    width: 85
                    height: 64
                    checkable: true
                    widgets:
                      - label:
                          id: cov_stop_south
                          align: CENTER
                          text_font: my_font_with_icons
                          text:  "\U000F04DB"
                - button:
                    id: but_cov_down_south
                    width: 85
                    height: 64
                    checkable: true
                    widgets:
                      - label:
                          id: cov_down_south
                          align: CENTER
                          text_font: my_font_with_icons
                          text:  "\U000F0045"

                - label:
                    text: "West"
                - button:
                    id: but_cov_up_west
                    width: 85
                    height: 64
                    checkable: true
                    widgets:
                      - label:
                          id: cov_up_west
                          align: CENTER
                          text_font: my_font_with_icons
                          text: "\U000F005D"
                - button:
                    id: but_cov_stop_west
                    width: 85
                    height: 64
                    checkable: true
                    widgets:
                      - label:
                          id: cov_stop_west
                          align: CENTER
                          text_font: my_font_with_icons
                          text: "\U000F04DB"
                - button:
                    id: but_cov_down_west
                    width: 85
                    height: 64
                    checkable: true
                    widgets:
                      - label:
                          id: cov_down_west
                          align: CENTER
                          text_font: my_font_with_icons
                          text:  "\U000F0045"

Logs:

[21:23:17.291][D][xpt2046:055]: Touchscreen Update [906, 877], z = 2377
[21:23:17.315][D][binary_sensor:039]: 'button2': New state is ON
[21:23:17.330][W][lvgl:000]: lv_draw_sw_letter: lv_draw_letter: glyph dsc. not found for U+F005D 	(in lv_draw_sw_letter.c line #105)
[21:23:17.470][D][binary_sensor:039]: 'button2': New state is OFF
[21:23:17.477][D][main:305]: Button checked
[21:23:24.553][D][xpt2046:055]: Touchscreen Update [887, 1056], z = 1882
[21:23:24.578][D][binary_sensor:039]: 'button2': New state is ON
[21:23:24.719][D][binary_sensor:039]: 'button2': New state is OFF
[21:23:24.729][D][main:305]: Button checked
[21:23:28.782][D][xpt2046:055]: Touchscreen Update [894, 1184], z = 1665
[21:23:28.822][D][binary_sensor:039]: 'button2': New state is ON
[21:23:28.969][D][binary_sensor:039]: 'button2': New state is OFF
[21:23:28.982][D][main:305]: Button checked

Anyone can help?

2

You’ll need to provide more information. What entity switch, how are you trying to toggle it, what are you expecting to happen, and what actually happens?

3

Thank you for your reply. My code includes a declaration for switch.den_phong_ngu

binary_sensor:
  - platform: homeassistant
    id: den_phong_ngu_state
    entity_id: switch.den_phong_ngu
    publish_initial_state: true
    on_state:
      then:
        lvgl.widget.update:
          id: bedroom_light
          state:
            checked: !lambda return x;

and i want toggle it when click on the lvgl button:

on_click:
                      - homeassistant.service:
                         service: switch.toggle
                         data:
                           entity_id: switch.den_phong_ngu
                      - logger.log:
                          format: "Button checked"
4

I have no idea how a light in HA is mapped to a binary sensor in ESPHome, but the following works, using a text_sensor. Your code to use a service call to toggle the switch looks correct.

This is a module that updates a button from HA:

# Basic switch or light state - Define its settings in substitutions
text_sensor:
  - platform: homeassistant
    id: button_${id}_sensor_id
    entity_id: ${entity}
    on_value:
      then:
        - logger.log:
            format: "New state is %s"
            args: [x.c_str()]
        - lvgl.widget.update:
            id:
              - lv_button_${id}
              - lv_button_${id}_label
              - lv_button_${id}_icon
              - lv_button_${id}_image
            state:
              checked: !lambda return x == "on";
              disabled: !lambda return x == "unknown" || x == "unavailable";

And this is a module that creates a button and handles on_click:

---
# Basic light switch button - define its setting in substitutions
            checkable: true
            flex_grow: 1
            width: ${ width | d("size_content") }
            height: ${ height | d("size_content") }
            pad_all: 4px
            id: lv_button_${id}
            widgets:
              - label:
                  hidden: ${ icon is not defined }
                  text: ${ icon | d("") }
                  image_recolor: $icon_on_color
                  text_font: $icon_font
                  image_recolor_opa: transp
                  align: top_left
                  id: lv_button_${id}_icon
                  text_color: $icon_off_color
                  checked:
                    text_color: $icon_on_color
              - image:
                  hidden: ${ image is not defined }
                  src: ${ image | d("empty_image") }
                  image_recolor: $icon_off_color
                  image_recolor_opa: cover
                  align: top_left
                  id: lv_button_${id}_image
                  checked:
                    image_recolor: $icon_on_color
              - label:
                  align: bottom_mid
                  id: lv_button_${id}_label
                  text: ${name}
                  text_color: $label_off_color
                  checked:
                    text_color: $label_on_color
            on_click:
                - homeassistant.service:
                    service: switch.toggle
                    data:
                      entity_id: ${entity}

Used like this:

packages:
  # Update button and relay state from Home Assistant
  - !include { file: modules/sensors/basic_switch_or_light_button_state.yaml, vars: { id: 4, entity: "switch.rangehood_power" } }

lvgl:
   ... # Other config here

              widgets:
              - button: !include {
                 file: modules/lvgl/buttons/basic_light_button.yaml,
                 vars: { id: 4, width: "100%", name: "Rangehood", image: rangehood_30px, entity: switch.rangehood_power }
               }

The basic ideas here come from GitHub - agillis/esphome-modular-lvgl-buttons: A modular LVGL button platform for ESPHome