This is working now
1 Like
thanks ill try it
i might be a idiot, but i have no clue on how to ad a button or link it to a entity in Home Assistant
substitutions:
name: "esp32-480"
friendly_name: "esp32-480"
device_description: "esp32-480"
project_name: "esp32-480"
project_version: "0.9.1"
lightbulb: "\U000F0335"
ceiling_light: "\U000F0769"
lamp: "\U000F06B5"
floor_lamp: "\U000F08DD"
string_lights: "\U000F12BA"
icon_font: light40
text_font: roboto24
button_on_color: "burnt_sienna"
icon_on_color: "yellow"
button_off_color: "very_dark_gray"
icon_off_color: "white"
button_text_color: "white"
button_height_single: '109px'
button_height_double: '228px'
button_width: '150px'
#First button
button_1_name: "Local Light"
button_1_id: local_light
button_1_icon: $lightbulb
button_1_HAdevice: $button_1_id
#Second button
button_2_name: "Keuken"
button_2_id: keuken
button_2_icon: $ceiling_light
button_2_HAdevice: $button_2_id
#3th button
button_3_name: "Woonkamer"
button_3_id: woonkamer
button_3_icon: $ceiling_light
button_3_HAdevice: $button_3_id
#4th button
button_4_name: "Slaapkamer"
button_4_id: slaapkamer
button_4_icon: $ceiling_light
button_4_HAdevice: $button_4_id
#5th button
button_5_name: "Eetkamer"
button_5_id: eetkamer
button_5_icon: $ceiling_light
button_5_HAdevice: $button_5_id
logger:
level: info
logs:
i2c.idf: info
touchscreen: info
scheduler: none
api:
encryption:
key: "5X5zlkSGBxaE0Wevdj8zGlYfkO8cUkEFJAGleRaw3os="
ota:
- platform: esphome
password: "5X5zlkSGBxaE0Wevdj8zGlYfkO8cUkEFJAGleRaw3os="
web_server:
port: 80
version: 3
wifi:
ssid: !secret wifi_ssid
password: !secret wifi_password
packages:
common_files:
url: https://github.com/agillis/esphome-configs
files: [modules/common/color.yaml,
modules/common/fonts.yaml,
modules/hardware/guition-esp32-s3-4848s040.yaml
]
time:
- platform: sntp
id: sntp_time
update_interval: 360min # Change sync interval from default 5min to 6 hours
on_time_sync:
- if:
condition:
lambda: 'return id(device_last_restart).state == "";'
then:
- text_sensor.template.publish:
id: device_last_restart
state: !lambda 'return id(sntp_time).now().strftime("%a %d %b %Y - %I:%M:%S %p");'
sensor:
- platform: wifi_signal
name: "WiFi Signal"
id: wifi_signal_db
update_interval: 60s
entity_category: diagnostic
internal: true
# Reports the WiFi signal strength in %
- platform: copy
source_id: wifi_signal_db
name: "WiFi Strength"
filters:
- lambda: return min(max(2 * (x + 100.0), 0.0), 100.0);
unit_of_measurement: "%"
entity_category: diagnostic
text_sensor:
- platform: wifi_info
ip_address:
name: "IP Address"
entity_category: diagnostic
ssid:
name: "Connected SSID"
entity_category: diagnostic
mac_address:
name: "Mac Address"
entity_category: diagnostic
- platform: template
name: 'Last Restart'
id: device_last_restart
icon: mdi:clock
entity_category: diagnostic
binary_sensor:
- platform: status
name: "Status"
entity_category: diagnostic
- platform: homeassistant
entity_id: light.woonkamer_hue
id: woonkamer_hue_state
- platform: homeassistant
entity_id: light.slaapkamer_hue
id: slaapkamer_hue_state
#-------------------------------------------
# LVGL Buttons
#-------------------------------------------
lvgl:
displays:
- my_display
touchscreens:
- my_touchscreen
style_definitions:
- id: style_line
line_color: Blue
line_width: 8
line_rounded: true
- id: date_style
text_font: roboto24
align: center
text_color: 0x333333
bg_opa: cover
radius: 4
pad_all: 2
theme:
button:
text_font: roboto24
scroll_on_focus: true
radius: 25
width: $button_width
height: $button_height_single
pad_left: 10px
pad_top: 10px
pad_bottom: 10px
pad_right: 10px
shadow_width: 0
bg_color: $button_off_color
text_color: $button_text_color
checked:
bg_color: $button_on_color
text_color: $button_text_color
pages:
- id: main_page
layout:
type: flex
flex_flow: column_wrap
width: 100%
bg_color: Grey
bg_opa: cover
pad_all: 5
widgets:
# First button
- button:
height: $button_height_double
checkable: true
id: lv_button_1
widgets:
- label:
text_font: $icon_font
align: top_left
text: $button_1_icon
id: lv_button_1_icon
- label:
align: bottom_left
text: $button_1_name
on_click:
light.toggle: $button_1_HAdevice
- button: # Button 2
height: $button_height_double
checkable: true
id: lv_button_2
widgets:
- label:
text_font: $icon_font
align: top_left
text: $button_2_icon
id: lv_button_2_icon
- label:
align: bottom_left
text: $button_2_name
on_click:
light.toggle: $button_2_HAdevice
#Button 3
- button:
height: $button_height_double
checkable: true
id: lv_button_3
widgets:
- label:
text_font: $icon_font
align: top_left
text: $button_3_icon
id: lv_button_3_icon
- label:
align: bottom_left
text: $button_3_name
on_click:
- homeassistant.service:
service: light.toggle
data:
entity_id: light.woonkamer_hue
#button 4
- button:
height: $button_height_double
checkable: true
id: lv_button_4
widgets:
- label:
text_font: $icon_font
align: top_left
text: $button_4_icon
id: lv_button_4_icon
- label:
align: bottom_left
text: $button_4_name
on_click:
- homeassistant.service:
service: light.toggle
data:
entity_id: light.slaapkamer_hue
#button 5
- button:
height: $button_height_double
checkable: true
id: lv_button_5
widgets:
- label:
text_font: $icon_font
align: top_left
text: $button_5_icon
id: lv_button_5_icon
- label:
align: bottom_left
text: $button_5_name
on_click:
- logger.log: "Button pressed, toggling eetkamer_hue"
- homeassistant.service:
service: light.toggle
data:
entity_id: light.eetkamer_hue
#-------------------------------------------
# Internal backlight + light attaced to internal relay
#-------------------------------------------
light:
- platform: binary
output: internal_relay_1
name: $button_1_name
id: $button_1_id
on_turn_on:
then:
- lvgl.widget.update:
id: lv_button_1_icon
text_color: $icon_on_color
- lvgl.widget.update:
id: lv_button_1
state:
checked: true
on_turn_off:
then:
- lvgl.widget.update:
id: lv_button_1_icon
text_color: $icon_off_color
- lvgl.widget.update:
id: lv_button_1
state:
checked: false
- platform: binary
output: internal_relay_1
name: $button_2_name
id: $button_2_id
on_turn_on:
then:
- lvgl.widget.update:
id: lv_button_2_icon
text_color: $icon_on_color
- lvgl.widget.update:
id: lv_button_2
state:
checked: true
on_turn_off:
then:
- lvgl.widget.update:
id: lv_button_2_icon
text_color: $icon_off_color
- lvgl.widget.update:
id: lv_button_2
state:
checked: false
- platform: binary
output: internal_relay_1
name: $button_3_name
id: $button_3_id
on_turn_on:
then:
- lvgl.widget.update:
id: lv_button_3_icon
text_color: $icon_on_color
- lvgl.widget.update:
id: lv_button_3
state:
checked: true
on_turn_off:
then:
- lvgl.widget.update:
id: lv_button_3_icon
text_color: $icon_off_color
- lvgl.widget.update:
id: lv_button_3
state:
checked: false
- platform: binary
output: internal_relay_1
name: $button_4_name
id: $button_4_id
on_turn_on:
then:
- lvgl.widget.update:
id: lv_button_4_icon
text_color: $icon_on_color
- lvgl.widget.update:
id: lv_button_4
state:
checked: true
on_turn_off:
then:
- lvgl.widget.update:
id: lv_button_4_icon
text_color: $icon_off_color
- lvgl.widget.update:
id: lv_button_4
state:
checked: false
- platform: binary
output: internal_relay_1
name: $button_5_name
id: $button_5_id
on_turn_on:
then:
- lvgl.widget.update:
id: lv_button_5_icon
text_color: $icon_on_color
- lvgl.widget.update:
id: lv_button_5
state:
checked: true
on_turn_off:
then:
- lvgl.widget.update:
id: lv_button_5_icon
text_color: $icon_off_color
- lvgl.widget.update:
id: lv_button_5
state:
checked: false
#-------------------------------------------
# Graphics and Fonts
#-------------------------------------------
1 Like
Start by using guition-esp32-s3-4848s040-display_modular.yaml as a base.
See this on line 49?
button_2_device: “switch.athom_smart_plug_v3_50ebc0_switch”
That is the home assistant device button 2 is controlling.
2 Likes
You’re lucky to get a response when you post your code like that, read this, implement it.
https://community.home-assistant.io/t/how-to-help-us-help-you-or-how-to-ask-a-good-question/114371/
3 Likes
i’m not sure what went wrong when posting the code, it looks like garbage
fixed the code in the message thanks for keeping me sharp.
1 Like
Thanks i will try the other code
i tried the code and it gives me a error:
Error reading file /config/esphome/modules/common/fonts.yaml: [Errno 2] No such file or directory: ‘/config/esphome/modules/common/fonts.yaml’
i checked the “modules” folder and indeed it doesn’t have a font.yaml
i checked online on what it should contain, i found this should it be like that but than just with the fonts i need/want?
Edit: i’m sorry i just realized it was in the newly added “modules” file you uploaded
next i get this error
project name needs to have a namespace.
Fixed it just needed the updated code
i changed the code to my own light entity but it won’t control it
button_2_name: "Button 2"
button_2_id: couch_lamp
button_2_icon: $lightbulb
button_2_device: "light.woonkamer_hue"
Great. Sounds like you resolved all your own issues but updating to the latest version of my software. This is always the first thing to try if you have issues.
Does it work now?
Yeah exactly,
unfortunately i still can’t control any home assistant devices
substitutions:
name: "guition-esp32-s3-4848s040"
friendly_name: "Guition480"
device_description: "Guition ESP32-S3-4848S040 480*480 Smart Screen"
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"
icon_font: light40
text_font: roboto24
screen_height: '480px'
screen_width: '480px'
button_on_color: "burnt_sienna"
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: "120s"
touchscreen_daytime_brightness: "100%"
touchscreen_nighttime_brightness: "50%"
# Screen goes to sleep at Mightnight
screen_sleep_hour: '0'
screen_sleep_minute: '0'
# Screen wakes up at 5:30am
screen_wake_hour: '5'
screen_wake_minute: '30'
button_1_name: "Local Light"
button_1_id: local_light
button_1_icon: $lightbulb
button_1_device: "internal_relay_1"
button_2_name: "Button 2"
button_2_id: couch_lamp
button_2_icon: $lightbulb
button_2_device: "light.woonkamer_hue"
# Button 3 is an empty object that requires no settings. It just pushes everything down one button
button_4_name: "RGB light"
button_4_id: rgb_light
button_4_icon: $string_lights
button_4_device: light.bar_filament_1
globals:
# Keeps track of late night mode for turning off the backlight
- id: late_night_mode
type: bool
restore_value: false
initial_value: 'false'
packages:
base: !include modules/common_base.yaml
webserver: !include modules/wifi_base.yaml
hardware: !include modules/hardware/guition-esp32-s3-4848s040.yaml
colors: !include modules/common/color.yaml
fonts: !include modules/common/fonts.yaml
time: !include modules/lvgl/lvgl_time_sntp.yaml
sensors: !include modules/lvgl/lvgl_sensors_base.yaml
esphome:
on_boot:
priority: -100
then:
- delay: 60s
- lvgl.widget.hide: boot_screen
# -------------------------------------------------------------------------
# Button state - Update state for Homeassistant objects and internal relays
# -------------------------------------------------------------------------
# Internal Relays defined as lights go here
light:
- !include { file: modules/lvgl/basic_local_relay_button_state.yaml, vars: { id: 1 } }
# Update button state from Home Assistant
text_sensor:
- !include { file: modules/lvgl/basic_switch_button_state.yaml, vars: { id: 2 } }
- !include { file: modules/lvgl/basic_switch_button_state.yaml, vars: { id: 4 } }
sensor:
- !include { file: modules/lvgl/dimmer_light_state.yaml, vars: { id: 4 } }
#-------------------------------------------
# LVGL pages and Buttons
#-------------------------------------------
# Wake screen on touch
touchscreen:
on_touch:
then:
- logger.log: "LVGL is active"
- lvgl.resume:
- if:
# Only turn on baclight and set to 50% if late_night_mode is on
condition:
- lambda: |-
return id(late_night_mode);
then:
- light.turn_on:
id: display_backlight
brightness: 50%
# Main LVGL section
lvgl:
displays:
- my_display
touchscreens:
- my_touchscreen
on_idle: !include { file: modules/lvgl/lvgl_touchscreen_idle.yaml }
theme: !include { file: modules/lvgl/lvgl_theme.yaml }
page_wrap: true
# Boot Screen
top_layer: !include { file: modules/lvgl/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: # Include all the buttons
- button: !include { file: modules/lvgl/basic_local_relay_button.yaml, vars: { id: 1, height: $button_height_double } }
- button: !include { file: modules/lvgl/basic_switch_button.yaml, vars: { id: 2, height: $button_height_single } }
- button: !include { file: modules/lvgl/transparent_empty_button.yaml, vars: { id: 3, height: $button_height_single } }
- button: !include { file: modules/lvgl/dimmer_light_button.yaml, vars: { id: 4, height: $button_height_double } }
#-------------------------------------------
# Graphics and Fonts
#-------------------------------------------
image:
- file: https://esphome.io/_static/logo-text-on-light.svg
id: boot_logo
resize: 460x90
type: RGB565
use_transparency: true
Make sure you have enabled “Allow the device to perform Home Assistant actions” in Home assistant. Otherwise it can’t control anything.
Also if you have lights you need to use basic_light_button.yaml you are using basic_switch_button.yaml. That is for switches not lights.
2 Likes
Good steps here to setup Allow the device to perform Home Assistant actions
thanks i forgot the “Allow the device to perform Home Assistant actions” i do now have lights working
only things is that it won’t update the state if i trigger the lights using something else than the display
substitutions:
name: "guition-esp32-s3-4848s040"
friendly_name: "Guition480"
device_description: "Guition ESP32-S3-4848S040 480*480 Smart Screen"
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"
icon_font: light40
text_font: roboto24
screen_height: '480px'
screen_width: '480px'
button_on_color: "burnt_sienna"
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: "120s"
touchscreen_daytime_brightness: "100%"
touchscreen_nighttime_brightness: "50%"
# Screen goes to sleep at Mightnight
screen_sleep_hour: '0'
screen_sleep_minute: '0'
# Screen wakes up at 5:30am
screen_wake_hour: '5'
screen_wake_minute: '30'
# Button 4-9 is dimmable light
button_4_name: "Woonkamer"
button_4_id: woonkamer
button_4_icon: $string_lights
button_4_device: light.woonkamer_hue
button_5_name: "Keuken"
button_5_id: keuken
button_5_icon: $string_lights
button_5_device: light.keuken_hue
button_6_name: "Eetkamer"
button_6_id: eetkamer
button_6_icon: $string_lights
button_6_device: light.eetkamer_hue
button_7_name: "Gang"
button_7_id: gang
button_7_icon: $string_lights
button_7_device: light.gang_hue
button_8_name: "Tuin"
button_8_id: tuin
button_8_icon: $string_lights
button_8_device: light.tuin_hue
button_9_name: "Slaapkamer"
button_9_id: slaapkamer
button_9_icon: $string_lights
button_9_device: light.slaapkamer_hue
button_10_name: "Toilet"
button_10_id: toilet
button_10_icon: $string_lights
button_10_device: light.toilet_hue
globals:
# Keeps track of late night mode for turning off the backlight
- id: late_night_mode
type: bool
restore_value: false
initial_value: 'false'
packages:
base: !include modules/common_base.yaml
webserver: !include modules/wifi_base.yaml
hardware: !include modules/hardware/guition-esp32-s3-4848s040.yaml
colors: !include modules/common/color.yaml
fonts: !include modules/common/fonts.yaml
time: !include modules/lvgl/lvgl_time_sntp.yaml
sensors: !include modules/lvgl/lvgl_sensors_base.yaml
esphome:
on_boot:
priority: -100
then:
- delay: 60s
- lvgl.widget.hide: boot_screen
# -------------------------------------------------------------------------
# Button state - Update state for Homeassistant objects and internal relays
# -------------------------------------------------------------------------
# Internal Relays defined as lights go here
light:
# Update button state from Home Assistant
text_sensor:
sensor:
- !include { file: modules/lvgl/dimmer_light_state.yaml, vars: { id: 4 } }
- !include { file: modules/lvgl/dimmer_light_state.yaml, vars: { id: 5 } }
- !include { file: modules/lvgl/dimmer_light_state.yaml, vars: { id: 6 } }
- !include { file: modules/lvgl/dimmer_light_state.yaml, vars: { id: 7 } }
- !include { file: modules/lvgl/dimmer_light_state.yaml, vars: { id: 8 } }
- !include { file: modules/lvgl/dimmer_light_state.yaml, vars: { id: 9 } }
- !include { file: modules/lvgl/dimmer_light_state.yaml, vars: { id: 10 } }
# -------------------------------------------------------------------------
# LVGL pages and Buttons
# -------------------------------------------------------------------------
# Wake screen on touch
touchscreen:
on_touch:
then:
- logger.log: "LVGL is active"
- lvgl.resume:
- if:
# Only turn on baclight and set to 50% if late_night_mode is on
condition:
- lambda: |-
return id(late_night_mode);
then:
- light.turn_on:
id: display_backlight
brightness: 50%
# Main LVGL section
lvgl:
displays:
- my_display
touchscreens:
- my_touchscreen
on_idle: !include { file: modules/lvgl/lvgl_touchscreen_idle.yaml }
theme: !include { file: modules/lvgl/lvgl_theme.yaml }
page_wrap: true
# Boot Screen
top_layer: !include { file: modules/lvgl/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: # Include all the buttons
- button: !include { file: modules/lvgl/dimmer_light_button.yaml, vars: { id: 4, height: $button_height_double } }
- button: !include { file: modules/lvgl/dimmer_light_button.yaml, vars: { id: 5, height: $button_height_double } }
- button: !include { file: modules/lvgl/dimmer_light_button.yaml, vars: { id: 6, height: $button_height_double } }
- button: !include { file: modules/lvgl/dimmer_light_button.yaml, vars: { id: 7, height: $button_height_double } }
- button: !include { file: modules/lvgl/dimmer_light_button.yaml, vars: { id: 8, height: $button_height_double } }
- button: !include { file: modules/lvgl/dimmer_light_button.yaml, vars: { id: 9, height: $button_height_double } }
- button: !include { file: modules/lvgl/dimmer_light_button.yaml, vars: { id: 10, height: $button_height_double } }
# -------------------------------------------------------------------------
# Graphic assets
# -------------------------------------------------------------------------
image:
- file: https://esphome.io/_static/logo-text-on-light.svg
id: boot_logo
resize: 460x90
type: RGB565
use_transparency: true
No sure on that one. I have not seen an issue with state before. Maybe check your logs.
I think I found a better way to pull in the button states. This should resolve your issues.
I changed the states an pull them in a packages now. Check out the new code on my git repo.
1 Like
Thanks i will try this
edit: awesome it works!
I spun this off info a new project. It supports lots of other screens. Not just this one.
3 Likes
Andrew, that first ALI link of the device in the GH list doesn’t work.
I don’t understand your abbreviations. Can you be more specific?