ESPHome GUI component using LVGL

ESPHome
30

just spent the weekend getting exactly this going!

here is my esphome config and it includes a display timeout and a clickable button that turns a homeassistant light entity on and off

spi:
  clk_pin: GPIO19  
  mosi_pin: GPIO23 
  miso_pin: GPIO25 

i2c:
  sda: GPIO4
  scl: GPIO0

display:
  - platform: ili9xxx
    model: ST7789V
    cs_pin: GPIO22
    dc_pin: GPIO21
    reset_pin: GPIO18
    invert_colors: false
    auto_clear_enabled: false
    update_interval: never
    show_test_card: true 
    id: disp
    rotation: 180

output:
  - platform: ledc
    pin: GPIO5
    id: backlight_pwm
  - platform: ledc
    id: mood_red
    pin: GPIO26
  - platform: ledc
    id: mood_green
    pin: GPIO32
  - platform: ledc
    id: mood_blue
    pin: GPIO33        

light:
  - platform: monochromatic
    output: backlight_pwm
    name: "Display Backlight"
    id: backlight
    restore_mode: ALWAYS_ON
  - platform: rgb
    name: "Moodlight"
    red: mood_red
    green: mood_green
    blue: mood_blue

touchscreen:
  platform: ft63x6
  id: touch
  display: disp
  calibration:
    x_min: 0
    y_min: 0
    x_max: 230
    y_max: 312

  on_touch:
    - lambda: |-
          ESP_LOGI("cal", "x=%d, y=%d, x_raw=%d, y_raw=%0d",
              touch.x,
              touch.y,
              touch.x_raw,
              touch.y_raw
              );
  on_release:
    - if:
        condition: lvgl.is_paused
        then:
          - logger.log: "LVGL resuming"
          - lvgl.resume:
          - lvgl.widget.redraw:
          - light.turn_on: backlight
lvgl:
  displays:
    - disp
  on_idle:
    timeout: !lambda "return (id(display_timeout).state * 1000);"
    then:
      - logger.log: "LVGL is idle"
      - light.turn_off: backlight
      - lvgl.pause:
  pages:
    - id: main_page
      widgets:
        - button:
            id: light_btn
            align: CENTER
            width: 140
            height: 70
            checkable: true
            widgets:
              - label:
                  align: CENTER
                  text: 'Lights'
            on_click:
              - homeassistant.action:
                  action: light.toggle
                  data:
                    entity_id: light.bedroom_lights
              - logger.log:
                  format: "Button checked"
                  



switch:
  - platform: gpio
    pin: GPIO12
    name: relay1
  - platform: gpio
    pin: GPIO14
    name: relay2
  - platform: gpio
    pin: GPIO27
    name: relay3

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

number:
  - platform: template
    name: LVGL Screen timeout
    optimistic: true
    id: display_timeout
    unit_of_measurement: "s"
    initial_value: 45
    restore_value: true
    min_value: 10
    max_value: 180
    step: 5
    mode: box

captive_portal:
2 Likes