Touchscreen slider for dimmable light

ESPHome
1

Despite having decades of experience in programming I really struggle creating a simple setup:

  • Home Assistant with the ESPhome integration
  • A CCT smart bulb that works over Zigbee2MQTT
  • A Cheap Yellow Display (ESP32-2432S028R) flashed with ESPhome and connected to Home Assistant over WiFi.

I now want to display a slider using lvgl that can control the brightness (and ideally another for color temperature) and that gets updated every time the brightness is changed, e.g. via a Home Assistant dashboard or a dimmer switch. At this point I have read documentation and tried examples for days but most documentation is confusing, outdated or simply wrong. I managed to get lvgl on/off buttons working but still have many unanswered questions for sliders. Instead of asking those I would be grateful for a simple working example of an lvgl slider connected to a lamp. Does anyone have such an ESPhome config?

2

Ok, I think I figured out most of what I wanted to achieve. I write my findings for anyone who might encounter the same problem.

Let’s start with the direction from the Cheap Yellow Display to HA. This is done as an action in the widget description.

    - slider:
        id: test_lamp_dimmer
        height: 60px
        width: 100%
        min_value: 0
        max_value: 255
        on_release:
          - homeassistant.action:
              action: light.turn_on
              data:
                entity_id: light.my_test_light
                brightness: !lambda return int(x);

No need for a “platform” entry, the action is called “homeassistant.action” and brightness (and color tempreature) is confusingly controlled with the “turn_on” action. The actual value for the slider sits in a variable “x” that you have to send by using a lambda. Set the min_value and max_value to the range your device expects. Note that HA expects integer values and the slider value is a float, so we need to cast it into an int.

Now to the opposite direction: Updating the slider whenever the value changes in HA. From ESPhome’s perspective this is a “sensor” and the trigger description needs to be on the top level of the YAML, not within any other section like “lvgl”.

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

The “platform” is “homeassistant”, the id refers to the slider id, the entity provides on/off and possibly brightness, color temperature and color information. Which one you want to use is defined by the “attribute”.

This works more or less as intended. Two things are still not perfect:

  1. When the lamp is switched off, the brightness slider is set to maximum.
  2. When the lamp is switched on it is always on full brightness. The settings “Execute if off” and “Current level startup” in Zigbee2MQTT did nothing.

I will now try to emulate the controls of the home assistant dashboard “light” card where you can switch the slider function between brightness and color temperature by using lvgl pages. Hope that helps someone and I’m happy for any comments.