The thermostat itself does not need to be changed at all, it is a built-in entity (created by the device) climate that controls the relay device, but you must enter your temperature sensor from home assistant so that it understands when to turn on and when to turn off the relay. And in home assistant you should see this! These are all entities created by the device
Better via vscode, but you can also download it to the esphome folder, the main thing is that the structure is such that the main.yaml file is in the root of the esphome folder, then edit it for your entities and compile! Don’t forget to install the custom component in the home assistant and run it (make sure that new services are visible in HA). Well, enter your data in secrets.yaml
1 Like
Sorry I was looking at other example yaml that points to this ‘button.ac_temp_increase_master_bedroom’ that I couldn’t find. I assumed I needed to use helper and create a button but that just adds ‘input_button.’ line instead
Also, i don’t quite understand what’s the cooling and heating relay are for
Thanks, not too familiar using esphome with vscode. So I’ll just stick to using the esphome addon
In another example, buttons are made apparently to control the increase and decrease of temperature. I have made a full-fledged climate component. For example, a thermostat. You connect, for example, a thermostatic head of a warm floor to the screen (one of the relays), then simply set the desired comfortable temperature for you, and if the set temperature is higher than the current one in the room, the relay will automatically turn on (the thermostatic head will open) and the water in the warm field will heat up or the electric warm floor will turn on and as soon as the current temperature equals the set one, the relay will automatically turn off the thermostatic head/electric floor. But if you want to control another thermostat that you have in HA through the screen, this can also be done, but you will have to change the logic in the widget.
My button is a node red function which then calls a service to decrease the temp. The reason for this is so that it goes from 5 all the way down to 0 and then goes into Silent and then Auto
I’d picked up the WareShare display project again. And apparently, the previous code in ESPHOME no longer worked…
So I downloaded a new one from your git (GitHub - agillis/esphome-modular-lvgl-buttons: A modular LVGL button platform for ESPHome).
I couldn’t use the buttons myself either, but I did get the status. With this adjustment in switch_button.yaml, it worked.
from:
on_short_click:
- homeassistant.action:
action: switch.toggle
data:
entity_id: ${entity_id}
to:
on_short_click:
- homeassistant.service:
service: light.toggle
data:
entity_id: ${entity_id}
I don’t know if this applies to everyone or it’s only in my HA, but you might be able to adjust it.
[edit]
How can I change the width of the buttons?
Like this add?
button_height_single: '109px'
button_height_double: '228px''
button_width_single: '104px'
button_width_double: '150px'
- button: !include
file: modules/buttons/switch_button.yaml
vars:
uid: button_2
height: $button_height_single
width: $button_width_single
- button: !include
file: modules/buttons/dimmer_light_button.yaml
vars:
uid: button_4
height: $button_height_double
width: $button_width_single
text: RGB light
icon: $string_lights
entity_id: light.athom_rgb_light_d93662_rgb_light_strip
in buttons/dimmer_light_button.yaml
After:
height: ${height}
Add:
width: ${width}
After:
# height:
Add:
# width:
in buttons/switch_button.yaml
After:
height: ${height}
Add:
width: ${width}
After:
# height:
Add:
# width:
in base/theme.yaml
After:
height: $button_height_single
Add:
width: $button_width_single
[/edit]
I have different buttons for switches and lights
So I didn´t have to change this?
on_short_click:
- homeassistant.action:
action: switch.toggle
data:
entity_id: ${entity_id}
Where can I find which button I need? And how to configure a Sensor with text lable?
All the button files have names to help you figure out what they are for.
switch_button.yaml
is what you want.
I really like your layout! Your latest update seems to have an issue with the navigation specifically in lights button. The lights seem to combine both a shutter and light that doesn’t seem to make sense. I can’t seem to be able to debug where this is pulling information from.
no, I just forgot to change the name )))
Where do I change the name?
Oh, I figured out the problem, I’ll fix it tomorrow evening. I won’t have time today.
Update: @PrayerfulDrop I fixed it, the thing is that substitutions have a single scope and shutter had exactly the same variable names as light and they overwrote them. Now I gave them names with a domain. So you can download it again with the latest commit.
3 Likes
Did you get the connectors you needed to power the device from the board? If so, do you have a link to what you bought?
Everything is looking much better! One last question about the lights. The pendant lamp shows the status of the lights color on/off but the others will not. See picture for reference (all lights are currently on):
My edited version of lights_panel.yaml
substitutions:
exit_icon: "\U0000e902"
settings_icon: "\U0000e903"
info_icon: "\U0000e904"
devices_icon: "\U0000e905"
home_icon: "\U0000e906"
ceiling_icon: "\U0000e907"
lightbulb_icon: "\U0000e908"
spotlight_group_icon: "\U0000e915"
desk_lamp_icon: "\U0000e916"
pendant_lamp_icon: "\U0000e917"
ceiling_lamp_icon: "\U0000e918"
ceiling_lamp_variant_icon: "\U0000e921"
night_lamp_icon: "\U0000e919"
swipe_icon: "\U0000e91a"
bedtime_icon: "\U000F02E3"
lvgl:
pages:
- id: lights_group_page
bg_color: color_slate_blue_gray
widgets:
- button:
id: ${light_widget_name_1}_btn
x: 20
y: 20
width: 210
height: 160
align: TOP_LEFT
bg_color: color_steel_blue
bg_opa: 20%
shadow_opa: TRANSP
radius: 10
widgets:
- label:
id: ${light_widget_name_1}_light_on
align: CENTER
text_color: color_steel_blue
text_font: icons_90
text: "${ceiling_lamp_variant_icon}"
- label:
id: ${light_widget_name_1}_lable_name
align: TOP_MID
text_font: nunito_16
text_color: color_misty_blue
text: "${light_label_name_1}"
- button:
id: ${light_widget_name_2}_btn
x: 250
y: 20
width: 210
height: 160
align: TOP_LEFT
bg_color: color_steel_blue
bg_opa: 20%
shadow_opa: TRANSP
radius: 10
widgets:
- label:
id: ${light_widget_name_2}_light_on
align: CENTER
text_color: color_steel_blue
text_font: icons_90
text: "${night_lamp_icon}"
- label:
id: ${light_widget_name_2}_lable_name
align: TOP_MID
text_font: nunito_16
text_color: color_misty_blue
text: "${light_label_name_2}"
- button:
id: ${light_widget_name_3}_btn
x: 20
y: 200
width: 210
height: 160
align: TOP_LEFT
bg_color: color_steel_blue
bg_opa: 20%
shadow_opa: TRANSP
radius: 10
widgets:
- label:
id: ${light_widget_name_3}_light_on
align: CENTER
text_color: color_steel_blue
text_font: icons_90
text: "${ceiling_lamp_variant_icon}"
- label:
id: ${light_widget_name_3}_lable_name
align: TOP_MID
text_font: nunito_16
text_color: color_misty_blue
text: "${light_label_name_3}"
- button:
id: ${light_widget_name_4}_btn
x: 250
y: 200
width: 210
height: 160
align: TOP_LEFT
bg_color: color_steel_blue
bg_opa: 20%
shadow_opa: TRANSP
radius: 10
widgets:
- label:
id: ${light_widget_name_4}_light_on
align: CENTER
text_color: color_steel_blue
text_font: mdi_90
text: "${bedtime_icon}"
- label:
id: ${light_widget_name_4}_lable_name
align: TOP_MID
text_font: nunito_16
text_color: color_misty_blue
text: "${light_label_name_4}"
binary_sensor:
- platform: lvgl
id: ${light_widget_name_1}_btn_long_sensor
widget: ${light_widget_name_1}_btn
on_click:
- min_length: 50ms
max_length: 500ms
then:
- homeassistant.service:
service: light.toggle
data:
entity_id: "${light_entity_1}"
- min_length: 800ms
max_length: 3000ms
then:
- lvgl.widget.hide: menu_controls_main
- lvgl.page.show:
id: ${light_widget_name_1}_light_rgb_page
animation: OUT_RIGHT
time: 300ms
- platform: lvgl
id: ${light_widget_name_2}_btn_long_sensor
widget: ${light_widget_name_2}_btn
on_click:
- min_length: 50ms
max_length: 500ms
then:
- homeassistant.service:
service: light.toggle
data:
entity_id: "${light_entity_2}"
- min_length: 800ms
max_length: 3000ms
then:
- lvgl.widget.hide: menu_controls_main
- lvgl.page.show:
id: ${light_widget_name_2}_light_rgb_page
animation: OUT_RIGHT
time: 300ms
- platform: lvgl
id: ${light_widget_name_3}_btn_long_sensor
widget: ${light_widget_name_3}_btn
on_click:
- min_length: 50ms
max_length: 500ms
then:
- homeassistant.service:
service: light.toggle
data:
entity_id: "${light_entity_3}"
- min_length: 800ms
max_length: 3000ms
then:
- lvgl.widget.hide: menu_controls_main
- lvgl.page.show:
id: ${light_widget_name_3}_light_rgb_page
animation: OUT_RIGHT
time: 300ms
- platform: lvgl
id: ${light_widget_name_4}_btn_long_sensor
widget: ${light_widget_name_4}_btn
on_click:
- min_length: 50ms
max_length: 500ms
then:
- homeassistant.service:
service: light.toggle
data:
entity_id: "${light_entity_4}"
- min_length: 800ms
max_length: 3000ms
then:
- lvgl.widget.hide: menu_controls_main
- lvgl.page.show:
id: ${light_widget_name_4}_light_rgb_page
animation: OUT_RIGHT
time: 300ms
Because these are widgets for lamps with support for rgb light or temperature! If you hold your finger for 4 seconds on the button, you will open an additional control widget! And if your lamps only work on/off, then you need to use the usual state or brightness widgets. And connect the desired file as shown in the pictures.
2 Likes
Alrighty I have it figured out and it is working like a charm! Much appreciated btw!
Anyone ever got stuck in a boot loop? My device just shows the “Connecting to API screen” for about 3-5 seconds then reboots and does the same again.
Logs are not showing anything meaningful
[16:51:13]ESP-ROM:esp32s3-20210327
[16:51:13]Build:Mar 27 2021
[16:51:13]rst:0xc (RTC_SW_CPU_RST),boot:0x18 (SPI_FAST_FLASH_BOOT)
[16:51:13]Saved PC:0x403780c5
[16:51:13]SPIWP:0xee
[16:51:13]mode:DIO, clock div:1
[16:51:13]load:0x3fce2810,len:0x1870
[16:51:13]load:0x403c8700,len:0x4
[16:51:13]load:0x403c8704,len:0xc40
[16:51:13]load:0x403cb700,len:0x2ee8
[16:51:13]entry 0x403c8900
I more or less have the vanilla version of GitHub - alaltitov/Guition-ESP32-S3-4848S040: LVGL ESP32-S3-4848s040 firmware
only did very minimal adjustments just to try out how the stuff looks.
What version of ESPHome?
Currently on 2025.7.1
2025.7.0 had some weird coroutines failure that vanished with 2025.7.1
Edit: excuse my dumb question… Just looked at the readme 
Will try with 2025.5.x