Iemand ervaring met de combo Home Assistant + ESPHome + LVGL?

Big_fellow · 27 mei 2025 om 00:00

Ik heb hier een mooi display van Waveshare liggen, 7" 800x480 resolutie, waar ik met de hulp van de online documentatie ESPHome + LVGL aan de gang heb gekregen.

Nu heb ik op mijn display een paar buttons gecreëerd, maar ik krijg het niet voor elkaar aan de aanraking van de button een actie te knopen.

Als ik op de button “klik” (met mijn vingers) dan zie ik dat het geregistreerd wordt (button reageerd), zie ik in de log files dat er een “touch” actie is gedetecteerd, maar ik wat ik ook probeer, ik krijg het niet voor elkaar om een actie aan de button te hangen.

Dit is een deel van de yaml:

 widgets: - label: text: "Living" - button: id: but\_living\_lights width: 150 # choose the button dimensions so height: 150 # they fill the columns nincely as they flow widgets: - label: id: living\_lights align: CENTER text\_font: mdi\_64 text: "\U000F0336" # mdi-lightbulb-outline on\_press: - homeassistant.action: action: group.toggle data: entity\_id: group.living

De indentatie is vanwege de yaml structuur.

In plaats van “on_press” heb ik ook “on_release” geprobeerd, geen geluk . Vreemd genoeg is “on_touch” geen optie hier…

Mijn vraag is dus wat ik mis / fout doe… Tot nu toe pas een halve dag gekost… (OK, dat was inclusief het werkend krijgen van het display… )

Con · 27 mei 2025 om 06:58

Wat zegt de logfile hierover?

tap_action wellicht?

Wellicht moet je een boolean button aanmaken in “Helpers”.

Kun je bij statussen de entity vinden en hier de status aanpassen?

Big_fellow · 28 mei 2025 om 01:29

Log file van een touch event

21:02:43[I][Touch points:28]: id=0 x=677, y=332 x.raw=678, y.raw=333 21:02:43[I][Touch:415]Touch detected at x=677, y=332 21:02:43[D][main:228] LVGL resuming 21:02:43[D][switch:012]'lcdbacklight' Turning ON. 21:02:43[D][switch:055]'lcdbacklight': Sending state ON 21:02:46[D][text\_sensor:064]'Uptime Human Readable': Sending state '1d 1h 2m 44s' 21:02:46[D][sensor:093]'Uptime Sensor': Sending state 90163.87500 s with 0 decimals of accuracy

Als ik de yaml aanpas naar:

 widgets: - label: text: "Living" - button: id: but\_living\_lights width: 150 # choose the button dimensions so height: 150 # they fill the columns nincely as they flow widgets: - label: id: living\_lights align: CENTER text\_font: mdi\_64 text: "\U000F0336" # mdi-lightbulb-outline on\_press: then: switch.toggle: living\_touch

De “switch” is als volgt geconfigureerd:

switch: - platform: homeassistant id: living\_touch entity\_id: switch.living\_touched name: living\_lights\_button

Krijg ik dit resultaat:

Compiling .pioenvs/frontdoordisplay/src/main.cpp.o Linking .pioenvs/frontdoordisplay/firmware.elf /data/cache/platformio/packages/toolchain-xtensa-esp-elf/bin/../lib/gcc/xtensa-esp-elf/13.2.0/../../../../xtensa-esp-elf/bin/ld: .pioenvs/frontdoordisplay/src/main.cpp.o:(.literal.\_Z5setupv+0x124): undefined reference to `\_ZTVN7esphome13homeassistant19HomeassistantSwitchE' /data/cache/platformio/packages/toolchain-xtensa-esp-elf/bin/../lib/gcc/xtensa-esp-elf/13.2.0/../../../../xtensa-esp-elf/bin/ld: .pioenvs/frontdoordisplay/src/main.cpp.o:(.literal.\_Z5setupv+0x128): undefined reference to `\_ZTVN7esphome13homeassistant19HomeassistantSwitchE' collect2: error: ld returned 1 exit status \*\*\* [.pioenvs/frontdoordisplay/firmware.elf] Error 1

Zoeken gaat voort…

Big_fellow · 28 mei 2025 om 01:57

Voor het geval dat iemand zich afvraagt welk display het is: Waveshare ESP32-S3-Touch-LCD7 . Als ik dit eenmaal goed werkend heb, dan is het zeker een zeer mooie optie voor mensen die een groter touch display willen hebben voor hun home assistant installatie

Big_fellow · 11 november 2025 om 05:36

Ok, het heeft even geduurd, want het kwam een beetje op de achtergrond, maar vandaag toch weer eens opgepakt.

Met wat hulp van chatgpt, wat voor programmeren echt veel helpt!, ben ik tot dit gekomen:

################################################################################ # Substitution Variables ################################################################################ substitutions: device\_internal\_name: frontdoordisplay device\_wifi\_name: frontdoordisplay device\_friendly\_name: Front Door Display device\_sampling\_time: 30s # glyphs lightbulb: "\U000F0335" ceiling\_light: "\U000F0769" lamp: "\U000F06B5" floor\_lamp: "\U000F08DD" string\_lights: "\U000F12BA" track\_light: "\U000F0914" bulkhead\_light: "\U000F1A2F" led\_strip: "\U000F07D6" coach\_lamp: "\U000F1020" ceiling\_fan\_light: "\U000F1798" previous: "\U0000F053" next: "\U0000F054" home: "\U0000F015" ################################################################################ # Globals ################################################################################ globals: - id: wifi\_connection type: bool restore\_value: no initial\_value: "false" - id: is\_dark\_theme type: bool restore\_value: yes initial\_value: "false" ################################################################################ # Board Configuration ################################################################################ esphome: name: ${device\_internal\_name} friendly\_name: ${device\_friendly\_name} platformio\_options: build\_flags: "-DBOARD\_HAS\_PSRAM" board\_build.arduino.memory\_type: qio\_opi board\_build.flash\_mode: dio board\_upload.maximum\_ram\_size: 524288 on\_boot: priority: -10 then: - if: condition: lambda: |- auto \*ts = id(ha\_sun\_state).state.c\_str(); return strcmp(ts, "below\_horizon") == 0; then: - script.execute: set\_dark\_theme else: - script.execute: set\_light\_theme psram: mode: octal speed: 80MHz esp32: board: esp32s3box variant: ESP32S3 flash\_size: 8MB framework: type: esp-idf # Let ESPHome choose a compatible IDF (\>=5.4.2) ################################################################################ # Enable logging ################################################################################ logger: logs: component: ERROR ################################################################################ # Enable Home Assistant API ################################################################################ api: reboot\_timeout: 0s encryption: key: "uRtk1Gt/EJAZAaGiulQcblYx19oXbVXx3vDe40brfeY=" on\_client\_connected: - if: condition: lambda: 'return (0 == client\_info.find("Home Assistant "));' then: - lvgl.widget.show: lbl\_hastatus on\_client\_disconnected: - if: condition: lambda: 'return (0 == client\_info.find("Home Assistant "));' then: - lvgl.widget.hide: lbl\_hastatus ################################################################################ # OTA ################################################################################ ota: - platform: esphome password: "13a4051e6dc69ddf343f55949738fdb8" ################################################################################ # WiFi ################################################################################ wifi: networks: - ssid: !secret wifi\_ssid password: !secret wifi\_password ap: password: SuperSecret! captive\_portal: ################################################################################ # Web Server ################################################################################ web\_server: port: 80 version: 2 include\_internal: true local: true ################################################################################ # I2C Bus ################################################################################ i2c: sda: GPIO08 scl: GPIO09 scan: True id: bus\_a ################################################################################ # IO Extender ################################################################################ ch422g: - id: ch422g\_hub ################################################################################ # Switch ################################################################################ switch: - platform: restart name: "Restart" id: device\_restart - platform: safe\_mode name: Use Safe Mode id: device\_safe\_mode - platform: gpio id: lcdbacklight name: lcdbacklight pin: ch422g: ch422g\_hub number: 2 mode: output: true inverted: false restore\_mode: ALWAYS\_ON ################################################################################ # Interval ################################################################################ interval: - interval: 10s then: - if: condition: wifi.connected: then: - lambda: |- id(wifi\_connection) = true; else: - lambda: |- id(wifi\_connection) = false; ################################################################################ # Sensors ################################################################################ sensor: - platform: wifi\_signal name: "WiFi Signal Sensor" id: ${device\_internal\_name}\_wifi\_signal\_sensor update\_interval: ${device\_sampling\_time} - platform: uptime name: "Uptime Sensor" id: ${device\_internal\_name}\_uptime\_sensor update\_interval: ${device\_sampling\_time} internal: true on\_raw\_value: then: - text\_sensor.template.publish: id: ${device\_internal\_name}\_uptime\_human state: !lambda |- int seconds = round(id(${device\_internal\_name}\_uptime\_sensor).raw\_state); int days = seconds / (24 \* 3600); seconds = seconds % (24 \* 3600); int hours = seconds / 3600; seconds = seconds % 3600; int minutes = seconds / 60; seconds = seconds % 60; return ( (days ? to\_string(days) + "d " : "") + (hours ? to\_string(hours) + "h " : "") + (minutes ? to\_string(minutes) + "m " : "") + (to\_string(seconds) + "s") ).c\_str(); - platform: homeassistant id: battery\_charging entity\_id: sensor.1be6e4\_Battery\_Power internal: true - platform: homeassistant id: grid\_output entity\_id: sensor.grid\_output internal: true - platform: homeassistant id: grid\_input entity\_id: sensor.grid\_input internal: true - platform: homeassistant id: solar\_gen entity\_id: sensor.1be6e4\_ac\_output\_total\_power internal: true - platform: homeassistant id: home\_use entity\_id: sensor.1be6e4\_total\_consumption\_power internal: true - platform: homeassistant id: battery\_soc entity\_id: sensor.1be6e4\_remaining\_battery\_capacity internal: true - platform: template name: "Living lights" id: living\_touch ################################################################################ # Text Sensors ################################################################################ text\_sensor: - platform: wifi\_info ip\_address: name: IP Address id: ${device\_internal\_name}\_ip\_address ssid: name: Connected SSID id: ${device\_internal\_name}\_connected\_ssid mac\_address: name: Mac Wifi Address id: ${device\_internal\_name}\_mac\_address - platform: template name: Uptime Human Readable id: ${device\_internal\_name}\_uptime\_human icon: mdi:clock-start - platform: template name: RTC id: label\_clock # Sun state from HA for theme switching - platform: homeassistant id: ha\_sun\_state entity\_id: sun.sun internal: true on\_value: then: - if: condition: lambda: 'return x == "below\_horizon";' then: - script.execute: set\_dark\_theme else: - script.execute: set\_light\_theme ################################################################################ # Home Assistant Button Entities (16 total) ################################################################################ button: # Page 1 (11..18) - platform: template name: "button-11" id: ha\_button\_11 - platform: template name: "button-12" id: ha\_button\_12 - platform: template name: "button-13" id: ha\_button\_13 - platform: template name: "button-14" id: ha\_button\_14 - platform: template name: "button-15" id: ha\_button\_15 - platform: template name: "button-16" id: ha\_button\_16 - platform: template name: "button-17" id: ha\_button\_17 - platform: template name: "button-18" id: ha\_button\_18 # Page 2 (21..28) - platform: template name: "button-21" id: ha\_button\_21 - platform: template name: "button-22" id: ha\_button\_22 - platform: template name: "button-23" id: ha\_button\_23 - platform: template name: "button-24" id: ha\_button\_24 - platform: template name: "button-25" id: ha\_button\_25 - platform: template name: "button-26" id: ha\_button\_26 - platform: template name: "button-27" id: ha\_button\_27 - platform: template name: "button-28" id: ha\_button\_28 ################################################################################ # Colors ################################################################################ color: - id: my\_red red: 100% green: 0% blue: 0% - id: my\_pink red: 100% green: 10% blue: 40% - id: my\_yellow red: 100% green: 100% blue: 0% - id: my\_green red: 0% green: 100% blue: 0% - id: my\_blue red: 0% green: 0% blue: 100% - id: my\_gray red: 50% green: 50% blue: 50% - id: my\_white red: 100% green: 100% blue: 100% - id: my\_black red: 0% green: 0% blue: 0% ################################################################################ # Fonts ################################################################################ font: - file: "fonts/arial.ttf" id: arial\_48 size: 48 - file: "fonts/arial.ttf" id: arial\_36 size: 36 - file: "fonts/arial.ttf" id: arial\_24 size: 24 - file: "gfonts://Roboto" id: roboto10 size: 10 bpp: 4 - file: "fonts/materialdesignicons-webfont.ttf" id: mdi\_64 size: 64 bpp: 4 glyphs: ["\U000F0335", # mdi-lightbulb "\U000F0336", # mdi-lightbulb-outline] ################################################################################ # Display ################################################################################ display: - platform: rpi\_dpi\_rgb id: my\_display update\_interval: never auto\_clear\_enabled: false color\_order: RGB pclk\_frequency: 16MHZ dimensions: width: 800 height: 480 de\_pin: number: 5 hsync\_pin: number: 46 ignore\_strapping\_warning: true vsync\_pin: number: 3 ignore\_strapping\_warning: true pclk\_pin: 7 pclk\_inverted: true reset\_pin: ch422g: ch422g\_hub number: 3 hsync\_back\_porch: 8 hsync\_front\_porch: 8 hsync\_pulse\_width: 4 vsync\_back\_porch: 16 vsync\_front\_porch: 16 vsync\_pulse\_width: 4 data\_pins: red: - 1 - 2 - 42 - 41 - 40 blue: - 14 - 38 - 18 - 17 - 10 green: - 39 - 0 - 45 - 48 - 47 - 21 ################################################################################ # Touchscreen ################################################################################ touchscreen: platform: gt911 id: my\_touch interrupt\_pin: GPIO4 reset\_pin: ch422g: ch422g\_hub number: 1 mode: OUTPUT on\_touch: - lambda: |- ESP\_LOGI("Touch", "Touch detected at x=%d, y=%d", touch.x, touch.y); on\_release: - if: condition: lvgl.is\_paused then: - logger.log: "LVGL resuming" - lvgl.resume: - lvgl.widget.redraw: - switch.turn\_on: lcdbacklight on\_update: - lambda: |- for (auto touch: touches) { if (touch.state \<= 2) { ESP\_LOGI("Touch points:", "id=%d x=%d, y=%d x.raw=%d, y.raw=%d", touch.id, touch.x, touch.y, touch.x\_raw, touch.y\_raw); } } ################################################################################ # Number ################################################################################ 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 ################################################################################ # Scripts (theme switching) ################################################################################ script: - id: set\_dark\_theme mode: queued then: - lambda: 'id(is\_dark\_theme) = true;' # Bottom nav + page headers - lvgl.widget.update: { id: top\_layer, styles: header\_footer\_dark } - lvgl.widget.update: { id: [header\_page1, header\_page2], styles: header\_footer\_dark } # Buttons (resting state for dark theme) - lvgl.widget.update: id: - button\_11 - button\_12 - button\_13 - button\_14 - button\_15 - button\_16 - button\_17 - button\_18 - button\_21 - button\_22 - button\_23 - button\_24 - button\_25 - button\_26 - button\_27 - button\_28 styles: btn\_dark - id: set\_light\_theme mode: queued then: - lambda: 'id(is\_dark\_theme) = false;' - lvgl.widget.update: { id: top\_layer, styles: header\_footer\_light } - lvgl.widget.update: { id: [header\_page1, header\_page2], styles: header\_footer\_light } - lvgl.widget.update: id: - button\_11 - button\_12 - button\_13 - button\_14 - button\_15 - button\_16 - button\_17 - button\_18 - button\_21 - button\_22 - button\_23 - button\_24 - button\_25 - button\_26 - button\_27 - button\_28 styles: btn\_light ############################################ START OF LVGL lvgl: on\_idle: timeout: !lambda "return (id(display\_timeout).state \* 1000);" then: - logger.log: "LVGL is idle" - switch.turn\_off: lcdbacklight - lvgl.pause: theme: label: text\_font: montserrat\_24 button: bg\_color: 0x2F8CD8 bg\_grad\_color: 0x005782 bg\_grad\_dir: VER bg\_opa: COVER border\_color: 0x0077b3 border\_width: 1 text\_color: 0xFFFFFF pressed: bg\_color: 0x006699 bg\_grad\_color: 0x00334d checked: bg\_color: 0x1d5f96 bg\_grad\_color: 0x03324A text\_color: 0xfff300 buttonmatrix: bg\_opa: TRANSP border\_color: 0x0077b3 border\_width: 0 text\_color: 0xFFFFFF pad\_all: 0 items: bg\_color: 0x2F8CD8 bg\_grad\_color: 0x005782 bg\_grad\_dir: VER bg\_opa: COVER border\_color: 0x0077b3 border\_width: 1 text\_color: 0xFFFFFF text\_font: montserrat\_24 pressed: bg\_color: 0x006699 bg\_grad\_color: 0x00334d checked: bg\_color: 0x1d5f96 bg\_grad\_color: 0x03324A text\_color: 0x005580 switch: bg\_color: 0xC0C0C0 bg\_grad\_color: 0xb0b0b0 bg\_grad\_dir: VER bg\_opa: COVER checked: bg\_color: 0x1d5f96 bg\_grad\_color: 0x03324A bg\_grad\_dir: VER bg\_opa: COVER knob: bg\_color: 0xFFFFFF bg\_grad\_color: 0xC0C0C0 bg\_grad\_dir: VER bg\_opa: COVER slider: border\_width: 1 border\_opa: 15% bg\_color: 0xcccaca bg\_opa: 15% indicator: bg\_color: 0x1d5f96 bg\_grad\_color: 0x03324A bg\_grad\_dir: VER bg\_opa: COVER knob: bg\_color: 0x2F8CD8 bg\_grad\_color: 0x005782 bg\_grad\_dir: VER bg\_opa: COVER border\_color: 0x0077b3 border\_width: 1 text\_color: 0xFFFFFF style\_definitions: - id: header\_footer bg\_color: 0x2F8CD8 bg\_grad\_color: 0x005782 bg\_grad\_dir: VER bg\_opa: COVER border\_opa: TRANSP radius: 0 pad\_all: 0 pad\_row: 0 pad\_column: 0 border\_color: 0x0077b3 text\_color: 0xFFFFFF width: 100% height: 30 - id: header\_footer\_light bg\_color: 0x2F8CD8 bg\_grad\_color: 0x005782 bg\_grad\_dir: VER bg\_opa: COVER border\_opa: TRANSP radius: 0 pad\_all: 0 text\_color: 0xFFFFFF width: 100% height: 30 - id: header\_footer\_dark bg\_color: 0x111418 bg\_grad\_color: 0x0A0C0F bg\_grad\_dir: VER bg\_opa: COVER border\_opa: TRANSP radius: 0 pad\_all: 0 text\_color: 0xE0E0E0 width: 100% height: 30 # Resting styles - id: btn\_light bg\_color: 0x2F8CD8 bg\_grad\_color: 0x005782 bg\_grad\_dir: VER bg\_opa: COVER border\_color: 0x0077b3 border\_width: 1 text\_color: 0xFFFFFF - id: btn\_dark bg\_color: 0x1A1F24 bg\_grad\_color: 0x111418 bg\_grad\_dir: VER bg\_opa: COVER border\_color: 0x2A3036 border\_width: 1 text\_color: 0xE0E0E0 # Temporary "pressed" darker style for dark theme - id: btn\_darker bg\_color: 0x0F1216 bg\_grad\_color: 0x0A0C0F bg\_grad\_dir: VER bg\_opa: COVER border\_color: 0x1C2228 border\_width: 1 text\_color: 0xD0D0D0 # Bottom navigation bar top\_layer: widgets: - label: text\_font: montserrat\_12 text: "\uF1EB" id: lbl\_hastatus hidden: true align: top\_right x: -2 y: 7 text\_align: right text\_color: 0xFFFFFF - buttonmatrix: align: bottom\_mid styles: header\_footer\_light pad\_all: 0 outline\_width: 0 id: top\_layer items: styles: header\_footer\_light text\_font: montserrat\_12 rows: - buttons: - id: page\_prev text: "\uF053" on\_press: then: lvgl.page.previous: - id: page\_home text: "\uF015" on\_press: then: lvgl.page.show: main\_page - id: page\_next text: "\uF054" on\_press: then: lvgl.page.next: # Pages (2 × 8 buttons) pages: - id: main\_page widgets: - obj: id: header\_page1 align: TOP\_MID styles: header\_footer\_light widgets: - label: text: "Page 1" align: CENTER text\_align: CENTER text\_color: 0xFFFFFF - obj: align: CENTER width: 720 height: 400 pad\_all: 6 bg\_opa: TRANSP border\_opa: TRANSP layout: type: FLEX flex\_flow: ROW\_WRAP flex\_align\_main: SPACE\_EVENLY flex\_align\_cross: CENTER widgets: # Buttons 11..18 - button: id: button\_11 styles: btn\_light width: 170 height: 150 widgets: [{ label: { text\_font: mdi\_64, x: 40, y: 5, text\_align: CENTER, text: "${lightbulb}" } }, { label: { text\_align: CENTER, y: 75, text\_color: 0xFFFFFF, text: "Living Room" } }] on\_press: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_11, styles: btn\_darker } }, else: { lvgl.widget.update: { id: button\_11, styles: btn\_dark } } } - button.press: ha\_button\_11 - homeassistant.event: { event: esphome.button\_pressed, data: { button: "button-11" } } on\_release: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_11, styles: btn\_dark } }, else: { lvgl.widget.update: { id: button\_11, styles: btn\_light } } } - button: id: button\_12 styles: btn\_light width: 170 height: 150 widgets: [{ label: { text\_font: mdi\_64, x: 20, y: 5, text\_align: CENTER, text: "${lightbulb}" } }, { label: { text\_align: CENTER, x: 20, y: 75, text\_color: 0xFFFFFF, text: "Bed Room" } }] on\_press: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_12, styles: btn\_darker } }, else: { lvgl.widget.update: { id: button\_12, styles: btn\_dark } } } - button.press: ha\_button\_12 - homeassistant.event: { event: esphome.button\_pressed, data: { button: "button-12" } } on\_release: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_12, styles: btn\_dark } }, else: { lvgl.widget.update: { id: button\_12, styles: btn\_light } } } - button: id: button\_13 styles: btn\_light width: 170 height: 150 widgets: [{ label: { text\_font: mdi\_64, x: 40, y: 5, text\_align: CENTER, text: "${lightbulb}" } }, { label: { text\_align: CENTER, x: 35, y: 75, text\_color: 0xFFFFFF, text: "Office" } }] on\_press: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_13, styles: btn\_darker } }, else: { lvgl.widget.update: { id: button\_13, styles: btn\_dark } } } - button.press: ha\_button\_13 - homeassistant.event: { event: esphome.button\_pressed, data: { button: "button-13" } } on\_release: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_13, styles: btn\_dark } }, else: { lvgl.widget.update: { id: button\_13, styles: btn\_light } } } - button: id: button\_14 styles: btn\_light width: 170 height: 150 widgets: [{ label: { align: CENTER, text: "button-14" } }] on\_press: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_14, styles: btn\_darker } }, else: { lvgl.widget.update: { id: button\_14, styles: btn\_dark } } } - button.press: ha\_button\_14 - homeassistant.event: { event: esphome.button\_pressed, data: { button: "button-14" } } on\_release: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_14, styles: btn\_dark } }, else: { lvgl.widget.update: { id: button\_14, styles: btn\_light } } } - button: id: button\_15 styles: btn\_light width: 170 height: 150 widgets: [{ label: { align: CENTER, text: "button-15" } }] on\_press: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_15, styles: btn\_darker } }, else: { lvgl.widget.update: { id: button\_15, styles: btn\_dark } } } - button.press: ha\_button\_15 - homeassistant.event: { event: esphome.button\_pressed, data: { button: "button-15" } } on\_release: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_15, styles: btn\_dark } }, else: { lvgl.widget.update: { id: button\_15, styles: btn\_light } } } - button: id: button\_16 styles: btn\_light width: 170 height: 150 widgets: [{ label: { align: CENTER, text: "button-16" } }] on\_press: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_16, styles: btn\_darker } }, else: { lvgl.widget.update: { id: button\_16, styles: btn\_dark } } } - button.press: ha\_button\_16 - homeassistant.event: { event: esphome.button\_pressed, data: { button: "button-16" } } on\_release: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_16, styles: btn\_dark } }, else: { lvgl.widget.update: { id: button\_16, styles: btn\_light } } } - button: id: button\_17 styles: btn\_light width: 170 height: 150 widgets: [{ label: { align: CENTER, text: "button-17" } }] on\_press: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_17, styles: btn\_darker } }, else: { lvgl.widget.update: { id: button\_17, styles: btn\_dark } } } - button.press: ha\_button\_17 - homeassistant.event: { event: esphome.button\_pressed, data: { button: "button-17" } } on\_release: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_17, styles: btn\_dark } }, else: { lvgl.widget.update: { id: button\_17, styles: btn\_light } } } - button: id: button\_18 styles: btn\_light width: 170 height: 150 widgets: [{ label: { align: CENTER, text: "button-18" } }] on\_press: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_18, styles: btn\_darker } }, else: { lvgl.widget.update: { id: button\_18, styles: btn\_dark } } } - button.press: ha\_button\_18 - homeassistant.event: { event: esphome.button\_pressed, data: { button: "button-18" } } on\_release: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_18, styles: btn\_dark } }, else: { lvgl.widget.update: { id: button\_18, styles: btn\_light } } } - id: page\_2 widgets: - obj: id: header\_page2 align: TOP\_MID styles: header\_footer\_light widgets: - label: text: "Page 2" align: CENTER text\_align: CENTER text\_color: 0xFFFFFF - obj: align: CENTER width: 720 height: 400 pad\_all: 6 bg\_opa: TRANSP border\_opa: TRANSP layout: type: FLEX flex\_flow: ROW\_WRAP flex\_align\_main: SPACE\_EVENLY flex\_align\_cross: CENTER widgets: # Buttons 21..28 - button: id: button\_21 styles: btn\_light width: 170 height: 150 widgets: [{ label: { align: CENTER, text: "button-21" } }] on\_press: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_21, styles: btn\_darker } }, else: { lvgl.widget.update: { id: button\_21, styles: btn\_dark } } } - button.press: ha\_button\_21 - homeassistant.event: { event: esphome.button\_pressed, data: { button: "button-21" } } on\_release: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_21, styles: btn\_dark } }, else: { lvgl.widget.update: { id: button\_21, styles: btn\_light } } } - button: id: button\_22 styles: btn\_light width: 170 height: 150 widgets: [{ label: { align: CENTER, text: "button-22" } }] on\_press: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_22, styles: btn\_darker } }, else: { lvgl.widget.update: { id: button\_22, styles: btn\_dark } } } - button.press: ha\_button\_22 - homeassistant.event: { event: esphome.button\_pressed, data: { button: "button-22" } } on\_release: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_22, styles: btn\_dark } }, else: { lvgl.widget.update: { id: button\_22, styles: btn\_light } } } - button: id: button\_23 styles: btn\_light width: 170 height: 150 widgets: [{ label: { align: CENTER, text: "button-23" } }] on\_press: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_23, styles: btn\_darker } }, else: { lvgl.widget.update: { id: button\_23, styles: btn\_dark } } } - button.press: ha\_button\_23 - homeassistant.event: { event: esphome.button\_pressed, data: { button: "button-23" } } on\_release: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_23, styles: btn\_dark } }, else: { lvgl.widget.update: { id: button\_23, styles: btn\_light } } } - button: id: button\_24 styles: btn\_light width: 170 height: 150 widgets: [{ label: { align: CENTER, text: "button-24" } }] on\_press: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_24, styles: btn\_darker } }, else: { lvgl.widget.update: { id: button\_24, styles: btn\_dark } } } - button.press: ha\_button\_24 - homeassistant.event: { event: esphome.button\_pressed, data: { button: "button-24" } } on\_release: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_24, styles: btn\_dark } }, else: { lvgl.widget.update: { id: button\_24, styles: btn\_light } } } - button: id: button\_25 styles: btn\_light width: 170 height: 150 widgets: [{ label: { align: CENTER, text: "button-25" } }] on\_press: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_25, styles: btn\_darker } }, else: { lvgl.widget.update: { id: button\_25, styles: btn\_dark } } } - button.press: ha\_button\_25 - homeassistant.event: { event: esphome.button\_pressed, data: { button: "button-25" } } on\_release: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_25, styles: btn\_dark } }, else: { lvgl.widget.update: { id: button\_25, styles: btn\_light } } } - button: id: button\_26 styles: btn\_light width: 170 height: 150 widgets: [{ label: { align: CENTER, text: "button-26" } }] on\_press: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_26, styles: btn\_darker } }, else: { lvgl.widget.update: { id: button\_26, styles: btn\_dark } } } - button.press: ha\_button\_26 - homeassistant.event: { event: esphome.button\_pressed, data: { button: "button-26" } } on\_release: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_26, styles: btn\_dark } }, else: { lvgl.widget.update: { id: button\_26, styles: btn\_light } } } - button: id: button\_27 styles: btn\_light width: 170 height: 150 widgets: [{ label: { align: CENTER, text: "button-27" } }] on\_press: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_27, styles: btn\_darker } }, else: { lvgl.widget.update: { id: button\_27, styles: btn\_dark } } } - button.press: ha\_button\_27 - homeassistant.event: { event: esphome.button\_pressed, data: { button: "button-27" } } on\_release: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_27, styles: btn\_dark } }, else: { lvgl.widget.update: { id: button\_27, styles: btn\_light } } } - button: id: button\_28 styles: btn\_light width: 170 height: 150 widgets: [{ label: { align: CENTER, text: "button-28" } }] on\_press: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_28, styles: btn\_darker } }, else: { lvgl.widget.update: { id: button\_28, styles: btn\_dark } } } - button.press: ha\_button\_28 - homeassistant.event: { event: esphome.button\_pressed, data: { button: "button-28" } } on\_release: then: - if: { condition: { lambda: 'return id(is\_dark\_theme);' }, then: { lvgl.widget.update: { id: button\_28, styles: btn\_dark } }, else: { lvgl.widget.update: { id: button\_28, styles: btn\_light } } } ############################################# END OF LVGL

Ik heb nu twee paginas met 8 knoppen elk, wat zeker nog gaat veranderen naar een paar knoppen en een informatie widget, zoals het weer oid, op de home pagina, en dan misschien op de 2e pagina wat andere info / knoppen…

Dit is het display wat ik in gebruik heb:

Dit display heeft standaard heel veel interfaces beschikbaar:

Dus als je op zoek bent naar een mooi, bruikbaar display voor Home Assistant, welke ook nog een aantal goed bruikbare interfaces heeft, dan is dit misschien een goede optie. En aangezien het nu 11.11 is in China, krijg je ook nog eens een mooie korting

Big_fellow · 12 november 2025 om 04:04

Ik zie dat ik de quote optie heb gebruikt, niet de code optie. Ik zal dat morgen aanpassen…

Con · 14 november 2025 om 11:32

Fraaie UI en leuke muziek…

Matchless · 7 mei 2026 om 09:46

Omdat ik genoeg had van het kleine display van me nspanel pro wilde ik ook een ander display en vond het display van big fellow erg mooi.

Dus 1 besteld maar dit was toch een ander type en in het begin vond ik geen info maarrr.. nu dus wel

Het display wat ik werkend heb is ook een wavestar maar dan een esp32-p4-wifi6-touch-LCD-7B. Hier zit o.a ook een camera,microfoon en luidspreker op.

Deze heeft een 1024x600 resolutie en de andere specs zijn ook niet mis

Quote

ESP32-P4-WIFI6-Touch-LCD-7B is a high-performance development board based on ESP32-P4 chip, with integrated RISC-V 32-bit dual-core and single-core processors. Equipped with 7inch 1024 × 600 touch display, features rich human-machine interfaces including MIPI-CSI (with integrated Image Signal Processor), it also supports USB OTG 2.0 HS for high-speed communication.
The ESP32-P4 chip integrates the Digital Signature Peripheral and a dedicated Key Management Unit, ensuring secure data and operations. Specifically designed for high-performance and high-security applications, to meet the higher requirements of embedded applications such as Human-Machine interaction, efficient edge computing, and IO expansion.

High-performance MCU with RISC-V 32-bit dual-core and single-core processors

128 KB HP ROM, 16 KB LP ROM, 768 KB HP L2MEM, 32 KB LP SRAM, 8 KB TCM

Powerful image and voice processing capability. Provides image and voice processing interfaces including JPEG Codec, Pixel Processing Accelerator, Image Signal Processor, H264 encoder

32MB PSRAM in the chip’s package, with onboard 32MB Nor Flash

Commonly used peripherals such as MIPI-CSI, MIPI-DSI, USB 2.0 OTG HS, SDIO 3.0 TF card slot, dual microphones (supports echo cancellation), speaker header and RTC battery holder, etc.

Adapting 2*12 GPIO header with 17 x remaining programmable GPIOs

Onboard RS485, CAN, I2C, and UART headers for easy communication with industrial equipments

Security features: Secure Boot, Flash Encryption, cryptographic accelerators, and TRNG. Additionally, hardware access protection mechanisms help to enable Access Permission Management and Privilege Separation

En de info met code is hierte vinden. Die code werkt ook met andere displays zoals de s3. Als ik dit aan de praat krijg is dat voor iedereen mogelijk

Enkele foto’s van mijn beginnende programmeerkunst: