I need help to make a menu/submenu with LVGL in esphome

ESPHome
1

I bought few weeks ago a push knob switch with a screen which includes an esp32. I attach a link to this item. The display uses ili9xxx platform in ESPHome.

I would like to make a menu with several submenus options selected thanks to push this knob switch. I was thinking to make something like (it’s just an example):

Menu option 1: Light 1 (a label or image widget)
Submenu option 1.1.: Light intensity. (an arc widget)
Submenu option 1.2.: Color temperature (another arc widget)
Menu option 2: Light 2
Submenu option 2.1.: Light intensity
Submenu option 2.2.: Color temperature.
Menu option 3: show temperature and humidity inside the house.
Menu option 4: show weather forecast.
Menu option 5: select scenes (a label or image widget)
Submenu option 5.1.: scene 1.
Submenu option 5.2.: scene 2.
Submenu option 5.3.: scene 3.
Submenu option 5.4.: scene 4.

I have tried to understand LVGL information in ESPHome web, but I couldn’t find out how make a menu and submenu structure.

Any help will be welcomed, thanks in advance.
Sergio

2

LVGL supports menu structure via a menu widget, but looking at the ESPHome docs maybe it wasn’t implemented.

You might be able to do something with the dropdown widget.

3

As you say, menu widget seems to haven´t been implemented in ESPHome. I’m going to try dropdown widget. Thanks for your help.

4

I created a project called esphome-modular-lvgl-buttons. It can be used to create complex button panels with only a few lines of code. You can add a button that goes to another LVGL “page” so a button called “weather” can be used to switch to weather page.

esphome-modular-lvgl-buttons

This is an example of what it looks like on a 480px touch screen