andrew_NH
October 28, 2024, 4:21pm
387
Fox49:
Iâm trying to setup a button that controls a light (yeelight led bulb), but I would like that when I long press the button, it opens a rainbow circle that I could pick color from (like the lovelace card more or less).
There is an LVGL object to do this. But for ESPHome to to use the color picker object it would need to be added to ESPhome. There are a few LVGL objects that do not exist in the ESPHome world yes. The color picker, graphing object, and canvas (free draw) are not available yet.
LVGL is very new to ESPHome and these other object will probably be integrated at some point.
In the mean time you should be a able to make a bunch of buttons that turn the LED a specific color. Like the favorites button in lovelace
1 Like
domain_int
November 3, 2024, 4:35am
391
Does anyone know what the style property for getting the last digit of a spinbox to NOT be blue???
plplaaa2
November 6, 2024, 4:03am
392
I was able to make this because of you guys. Thank you.
idle screen
menu
light switch
climate
setting
If you still want, go to the link below.plplaaa2/esphome-lvgl-480: For Esphome-lvgl-480x480
8 Likes
Would it be possible to use swipe to go to the next page instead of the navigation bar?
This one is amazing
How can I display the value set by the slider?
âŚ
platform: lvgl
it doesnât work:
- label:
id: slider_id
text_font: roboto24
text_color: 0xFFFFFF
any other ideas?
Awesome design. i just get this one error
Font materialdesignicons-webfont.ttf is missing 1 glyph:
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
andrew_NH
November 26, 2024, 10:33pm
403
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
nickrout
November 27, 2024, 7:26am
404
3 Likes
iâm not sure what went wrong when posting the code, it looks like garbage
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.yamlthis 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"
andrew_NH
November 27, 2024, 5:15pm
407
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?
