Reusing Hardware Buttons with ESPHome and LVGL

ESPHome
1

I’ve a nice device with a round display and a “spinner” that is configured as two hardware buttons.

I’m struggling to understand how to map the spinner to different functions on different pages. For example, change the temperature (also shown on an arc) on one page, but change an LED’s brightness (another arc) on a different page.

There doesn’t appear to be the concept of page-dependant mapping in LVGL, or am I missing something?

2

not sure what you mean by a spinner with two buttons - are you referring to a rotary encoder?

3

It’s actually this:

For some odd design reason the rotating red ring isn’t a rotary encoder, I’ve only managed to read the input using the simple binary inputs:
binary_sensor:

  • platform: gpio
    pin:
    number: GPIO8
    inverted: true
    id: PinA

Digging into the schematics suggest the physical device is:

4

So what do the binary sensors show in the log as you twist the knob?

5

YAML:
binary_sensor:

  • platform: gpio
    pin:
    number: GPIO8
    inverted: true
    id: PinA
    on_press:
    then:
    - logger.log: “PinA changed - clockwise”
  • platform: gpio
    pin:
    number: GPIO7
    inverted: True
    id: PinB
    on_press:
    then:
    - logger.log: “PinB changed - anticlockwise”

From the log:
[09:19:17.656][D][main:1513]: PinA changed - clockwise
[09:19:17.656][D][binary_sensor:049]: ‘PinA’: ON
[09:19:17.675][D][binary_sensor:049]: ‘PinA’: OFF
[09:19:17.732][D][main:1513]: PinA changed - clockwise
[09:19:17.734][D][binary_sensor:049]: ‘PinA’: ON
[09:19:17.747][D][binary_sensor:049]: ‘PinA’: OFF
[09:19:22.315][D][main:1566]: PinB changed - anticlockwise
[09:19:22.316][D][binary_sensor:049]: ‘PinB’: ON
[09:19:22.572][D][binary_sensor:049]: ‘PinB’: OFF
[09:19:22.978][D][main:1566]: PinB changed - anticlockwise
[09:19:22.978][D][binary_sensor:049]: ‘PinB’: ON
[09:19:23.091][D][binary_sensor:049]: ‘PinB’: OFF
[09:19:24.062][D][main:1513]: PinA changed - clockwise
[09:19:24.063][D][binary_sensor:049]: ‘PinA’: ON
[09:19:24.195][D][binary_sensor:049]: ‘PinA’: OFF

Direction is correct, one click of the wheel results in a pair of on then off.

6

Ok, that makes more sense. Configure an encoder in LVGL with left and right buttons rather than the encoder sensor. You won’t have an enter button so you probably will have to focus a specific widget on page load so the encoder rotation affects the desired widget.

1 Like
7

I also have this model of device, and its design isn’t very reasonable. Inside, there are two ESP32s. It doesn’t have a rotary encoder, only two toggle switches. However, you can simulate a rotary encoder by using two free pins. When a toggle switch is triggered to a low level, use the sensor.rotary_encoder.set_value action with a value of “-1”. This way, you can have a rotary encoder, but note that, as Clyde mentioned, you don’t have an enter button. You’ll need to use your finger to confirm the entry.

8

Ah, the penny’s dropped. I shouldn’t be trying to map the input to the widget, use the page load event to focus the keypad left/right onto the appropriate widget.

Just need to figure out the nuts and bolts now of actually implementing it.

9

What’s the advantage of setting it up as an encoder vs a keypad?

keypads:
- id: keypad1
group: controls
up: PinA
down: PinB

10

I don’t think there is any difference.