Thanks for this, for me, I’d like CURRENT live info and some totals. So current info would be solar generation, grid import/export, battery draw/charge and battery SOC. And then for the running totals just: grid import and solar generation.
I get an error that mapping values are not allowed here for the page_button yaml when I try and compile it.
ERROR Error while reading config: Invalid YAML syntax:
mapping values are not allowed here
in "/config/esphome/modules/lvgl/buttons/page_button.yaml", line 208, column 74
When I open that page up in notepad++ this is what’s on line 208:
I cloned the repository by downloading the zip and copying the files over to my home assistant just now so think it’s all correct. The only tweak i made was putting my own esphome api and ota info, the rest was as in your guition-esp32-s3-4848s040-solar.yaml file.
I asked for help from ChatGPT but thought I’d just ask on here too as chatgpt must have some old code it keeps wanting me to use and takes me down a bit of a rabbit hole.
If I can get past the error I’ll spend some time on which enitities to try and show and how they look.
Yeah sorry, 2025.2.0 has some breaking changes in it and I needed to fix a few things in the code base. While I was at it I made button creation more simple. You can now define the button right on the include line and you don’t need to have a substitutions section for it.
I also added swipe navigation! You can swipe left or right on each page to go to the next or previous page.
Check out the latest code a compile and it should work.
Yeah I have tried ChatGPT a few times with ESPHome and I don’t think it has a large enough sample to work on it efficiently. I does help with a few basic ideas but good old fashioned Googling works better.
This device has it’s own ESP microcontroller already so it’s suitable to work on it’s own.
The ‘only’ thing you have to do is to configure it to use with HA.
All the info is in this thread.
eror:
- lvgl.label.update:
id:
-
ID ‘dormitor_lightlvgl’ of type lv_btn_t doesn’t inherit from lv_label_t. Please double check your ID is pointing to the correct value.
id: dormitor_lightlvgl
bg_color: 0
Is it possible that I add an input_number as a slider?
I have made a slider that mixed the (balance) to brightness and temp_color. Left is maximum dimmed and red glow, right is bright white light.
If I move the slider all the way to the left (0), the light goes into auto mode, where it switches on and off based on a PIR. That is why the standard light.* is not sufficient
Hi,
Can anyone help, this is just about working except the buttons don’t actually work as buttons, they show the status correctly though, so if I turn on one of the things via my home assistant dashboard the relevant button illuminates correctly on the panel but it doesn’t activate the thing when I tap the button on the panel. I have enabled the device to be able to control home assistant actions from the configure menu. I’m sure I’m being thick!!
TIA.
captive_portal:
# Substitution variables used through the codebase
substitutions:
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"
bed: "\U000F02E3"
icon_font: light40
text_font: roboto24
button_on_color: "ep_orange"
button_off_color: "very_dark_gray"
icon_on_color: "yellow"
icon_off_color: "gray"
label_on_color: "white"
label_off_color: "gray"
button_text_color: "white"
button_height_single: '109px'
button_height_double: '228px'
button_width: '150px'
touchscreen_idle_timeout: "30s"
touchscreen_daytime_brightness: "100%"
touchscreen_nighttime_brightness: "50%"
# Boot screen configuration
boot_screen_delay: 30s
# Set Night mode at Mightnight
screen_night_hour: '0'
screen_night_minute: '0'
# Set Day mode at 5:30am
screen_day_hour: '5'
screen_day_minute: '30'
# Screen Size
screen_height: '480px'
screen_width: '480px'
time:
- platform: homeassistant
id: hatime
# Time update script - This is run once per second. Use it to update any time related labels.
script:
- id: time_update
mode: queued
then:
- lambda: |-
auto time = id(hatime).now();
char buffer[6];
snprintf(buffer, sizeof(buffer), "%02d:%02d", time.hour, time.minute);
lv_label_set_text(id(clock_label), buffer);
lv_obj_align(id(clock_label), LV_ALIGN_CENTER, 0, 0); // ✅ Fully centers horizontally & vertically
- delay: 60s
- script.execute: time_update
packages:
# Generic configuration for ESP32 screens
wifi: !include modules/base/wifi.yaml
base: !include modules/base/base.yaml
colors: !include modules/base/color.yaml
fonts: !include modules/base/fonts.yaml
images: !include modules/base/images.yaml
time: !include modules/base/time_sntp.yaml
sensors: !include modules/sensors/sensors_base.yaml
# Harware description file
hardware: !include modules/hardware/guition-esp32-s3-4848s040.yaml
# This section will Update button and relay state from Home Assistant
# Any button that has real time updates needs a section here
# Button 1 - Local relay button with state updates
button_1_state: !include
file: modules/sensors/switch_or_light_button_state.yaml
vars:
uid: button_1
entity_id: "switch.alan_ensuite_lights"
# Button 2 - Standard light button with state updates
button_2_state: !include
file: modules/sensors/switch_or_light_button_state.yaml
vars:
uid: button_2
entity_id: "switch.alan_towel_rail"
# Button 3 - Standard light button with state updates including dimming
button_3_state: !include
file: modules/sensors/switch_or_light_button_state.yaml
vars:
uid: button_3
entity_id: "switch.alan_extract_fan"
# Button 4 - Standard light button with state updates including dimming
button_4_state: !include
file: modules/sensors/switch_or_light_button_state.yaml
vars:
uid: button_4
entity_id: "switch.alan_mirror"
# -------------------------------------------------------------------------
# LVGL pages and buttons
# -------------------------------------------------------------------------
lvgl:
theme: !include { file: modules/base/theme.yaml }
page_wrap: true
on_idle:
- timeout: 6s
then:
- lvgl.page.show: clock_page
# Boot screen
top_layer: !include
file: modules/screens/boot_screen.yaml
vars:
height: $screen_height
width: $screen_width
# Main Page
pages:
- id: main_page
layout:
type: flex
flex_flow: COLUMN_WRAP
width: 100%
bg_color: black
bg_opa: cover
pad_all: 5
widgets:
# Button 1 - Standard (double hight) internal relay button with state updates
- button: !include
file: modules/buttons/light_button.yaml
vars:
uid: button_1
height: $button_height_double
text: Light
icon: $lightbulb
# Button 2 - Standard (double hight) internal relay button with state updates
- button: !include
file: modules/buttons/light_button.yaml
vars:
uid: button_2
height: $button_height_double
text: Towel Rail
icon: $lightbulb
# Button 3 - Standard (double hight) internal relay button with state updates
- button: !include
file: modules/buttons/light_button.yaml
vars:
uid: button_3
height: $button_height_double
text: Extractor
icon: $lightbulb
# Button 4 - Standard (double hight) internal relay button with state updates
- button: !include
file: modules/buttons/light_button.yaml
vars:
uid: button_4
height: $button_height_double
text: Mirror Light
icon: $lightbulb
- id: clock_page
layout:
type: flex
flex_flow: COLUMN
width: 100%
height: 100%
bg_color: black
bg_opa: cover
widgets:
- label:
id: clock_label
text: "00:00"
text_font: roboto190
text_color: white
align: CENTER # ✅ Align the text inside the label
width: 100%
height: 100%
on_click:
then:
- lvgl.page.show: main_page # ✅ Go back to the main page on touch
My word! Can’t believe I didn’t see that!!! Thanks so much. I know how it happened, i copied and pasted the first button for the other 3 buttons and incremented the numbers and that didn’t have an entity as it was a local button, I did of course have the entity IDs on the state updates higher up but somehow hadn’t noticed that!!
Thanks again.
For another one of these switches I’d love to have some pretty gauges like the korean one looks like but in English of course. It took me ages to make the clock work as a screensaver in this code… I’ll keep playing.
I have no idea. that doesn’t appear anywhere in my code. my code is as I pasted above except for the addition of the entitities on the buttons that i ommitted. i wonder if its when it pulls down the things it needs from the internet at compilation time, perhaps one of those dependencies has changed or something. Blindness aside (from how you helped me) I can’t see where my code would cause this.
