LVGL: Tips and Tricks

Here are a couple recipes for various interesting things you can do with Lvgl in ESPHome.

NOTE

Many of the examples below call service actions in Home Assistant; however, Home Assistant does not allow such action calls by default. For each ESPHome device which will call actions, you must explicitly enable this setting in Home Assistant. This may be done when the device is initially adopted or by using the Configure option in the “devices” list of the ESPHome integration.

NOTE

The examples below assume you’ve set up LVGL correctly with your display and its input device, and you have the knowledge to set up various components in ESPHome. Some examples use absolute positioning for a screen with dimensions of 240x320px ; if your display’s dimensions differ, you’ll need to adjust them in order to obtain the expected results.

Local light switch

The easiest way to integrate an LVGL switch widget and a switch or light is with automations:

light:
  - platform: ...
    id: local_light
    name: 'Local light'
    on_state:
      - lvgl.widget.update:
          id: light_switch
          state:
            checked: !lambda return id(local_light).current_values.is_on();

lvgl:
    ...
    pages:
      - id: main_page
        widgets:
          - switch:
              align: CENTER
              id: light_switch
              on_click:
                light.toggle: local_light

Remote light button

If you’d like to control a remote light which appears as an entity in Home Assistant from a checkable (toggle) button, first you need to import the light state into ESPHome, and then control it using a action call:

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

lvgl:
    ...
    pages:
      - id: room_page
        widgets:
          - button:
              id: light_btn
              align: CENTER
              width: 100
              height: 70
              checkable: true
              widgets:
                - label:
                    align: CENTER
                    text: 'Remote light'
              on_click:
                - homeassistant.action:
                    action: light.toggle
                    data:
                      entity_id: light.remote_light

Light brightness slider

You can use a slider or an arc to control the brightness of a dimmable light.

We can use a sensor to retrieve the current brightness of a light, which is stored in Home Assistant as an attribute of the entity, as an integer value between 0 (min) and 255 (max). It’s convenient to set the slider’s min_value and max_value accordingly.

sensor:
  - platform: homeassistant
    id: light_brightness
    entity_id: light.your_dimmer
    attribute: brightness
    on_value:
      - lvgl.slider.update:
          id: dimmer_slider
          value: !lambda return x;

lvgl:
    ...
    pages:
      - id: room_page
        widgets:
          - slider:
              id: dimmer_slider
              x: 20
              y: 50
              width: 20
              height: 220
              pad_all: 8
              min_value: 0
              max_value: 255
              ext_click_area: 20
              on_release:
                - homeassistant.action: