Works fine for me. How do you want to control it?
From HA dashboard card and from second page on the display with slider
My code:
###############Backlight Dimmer##################
sensor:
- platform: homeassistant
id: light_brightness
entity_id: light.touch_panel_intim_lights
attribute: brightness
on_value:
- lvgl.slider.update:
id: backlight_dimmer
value: !lambda return x;
#####################
######################Backlight Dimmer####################
- slider:
id: backlight_dimmer
x: 20
y: 50
width: 30
height: 220
pad_all: 8
min_value: 0
max_value: 255
on_release:
- homeassistant.service:
service: light.turn_on
data:
entity_id: light.touch_panel_intim_lights
brightness: !lambda return int(x);
I have a slider , but itâs doing nothing
Please help me with that issue. Thank you.
I just added a link to my git repo to my original post. This has an updated version of my code that uses the latest LVGL stuff.
1 Like
Hello everyone! Please tell me how to implement a screen lock (for example, from children), a long press for 5 seconds is required. The binary sensor has such functions, but I do not understand how to tie it to a button on the display. Maybe there is an easier way like a long press to which you can set the time?
I have a slider , but itâs doing nothing
Please help me with that issue. Thank you.
@Zenia : This is how I got it to work. the brightness has to be between 0 and 1 for the âlocalâ light.
- slider:
id: slider_all
align: bottom_mid
height: 20
width: 260
min_value: 30 #anything below is too dark for me
max_value: 100
on_release:
then:
- light.turn_on:
id: backlight
brightness: !lambda return int(x)/ 100.0;
- lvgl.widget.hide: slider_pop
## Light
light:
- platform: monochromatic
output: GPIO38
name: Backlight
id: backlight
restore_mode: ALWAYS_ON
2 Likes
Can you give a link to the discord? Thanks)
Thank you. Itâs working now, and I found why mine was not working. I use different entity 
. Should check everything twice. Thank you again
where did the cookbook end up 
page is not available anymore.
Nor link from docs there.
I understand it is not stable so copying examples could lead to confusion not being aligned, but we know it is so and the examples were useful
What url are you trying?
Canât work it out, but it is clearly in a state of flux. If believe it is presently being merged.
1 Like
1 Like
lvgl:
displays:
- my_display
touchscreens:
- my_touchscreen
#-------------------------------------------
theme:
#label:
# text_font: roboto24 # set all your labels to use your custom defined font
button:
bg_color: 0x333333
#bg_grad_color: 0x333333
#bg_grad_dir: VER
bg_opa: 85%
border_color: 0x333333
border_width: 0
text_color: 0xFFFFFF
pressed: # set some btn colors to be different in pressed state
bg_color: 0x111111
bg_grad_color: 0x111111
checked: # set some btn colors to be different in checked state
bg_color: 0x111111
bg_grad_color: 0x111111
text_color: 0xf6ff00
buttonmatrix:
bg_opa: TRANSP
border_color: 0x333333
border_width: 0
text_color: 0xFFFFFF
pad_all: 0
items: # set all your btnmatrix buttons to use your custom defined styles and font
bg_color: 0x333333
bg_grad_color: 0x333333
bg_grad_dir: VER
bg_opa: COVER
border_color: 0x333333
border_width: 1
text_color: 0xFFFFFF
#text_font: roboto10
pressed:
bg_color: 0x111111
bg_grad_color: 0x111111
checked:
bg_color: 0x111111
bg_grad_color: 0x111111
text_color: 0xEEEEEE
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: 30%
bg_color: 0x9c9c9c
bg_opa: 15%
indicator:
bg_color: 0x333333
bg_grad_color: 0x333333
bg_opa: COVER
knob:
bg_color: 0x444444
bg_grad_color: 0x444444
bg_opa: COVER
border_color: 0x444444
border_width: 1
text_color: 0xFFFFFF
#-------------------------------------------
style_definitions:
- id: header_footer
bg_color: 0x444444
bg_grad_color: 0x444444
bg_grad_dir: VER
bg_opa: COVER
border_width: 0
radius: 0
pad_all: 0
pad_row: 0
pad_column: 0
border_color: 0x333333
text_color: 0xFFFFFF
width: 100%
height: 40
#-------------------------------------------
top_layer:
widgets:
- label:
text: "\uF1EB"
id: lbl_hastatus
hidden: true
align: top_right
x: -2
y: 2
text_align: right
text_color: 0xFFFFFF
- buttonmatrix:
align: bottom_mid
styles: header_footer
pad_all: 0
outline_width: 0
id: top_layer
items:
styles: header_footer
rows:
- buttons:
- id: page_prev
text: "\uF053"
on_press:
then:
lvgl.page.previous:
- id: page_home
text: "\uF015"
on_press:
then:
lvgl.page.show: clock_page
- id: page_next
text: "\uF054"
on_press:
then:
lvgl.page.next:
- obj:
id: boot_screen
x: 0
y: 0
width: 100%
height: 100%
bg_color: 0x000000
bg_opa: COVER
radius: 0
pad_all: 0
border_width: 0
widgets:
- image:
align: CENTER
src: boot_logo
y: -40
- spinner:
align: CENTER
y: 95
height: 50
width: 50
spin_time: 1s
arc_length: 60deg
arc_width: 8
indicator:
arc_color: 0x18bcf2
arc_width: 8
on_press:
- lvgl.widget.hide: boot_screen
page_wrap: true
pages:
- id: clock_page
widgets:
- image:
align: CENTER
src: back7
- label:
align: CENTER
id: display_weather_icon
text: $happyface
text_color: 0xFFFFFF
bg_opa: TRANSP
text_font: weather_icons
y: -160
x: -75
- label:
align: CENTER
id: display_date
text: date
text_font: roboto40
text_color: 0xFFFFFF
y: -80
x: -75
- label:
align: CENTER
id: display_time
text: clock
text_font: roboto90
text_color: 0xFFFFFF
y: -15
x: -75
- label:
align: CENTER
id: display_weather
text: weather
text_font: roboto24
text_color: 0xFFFFFF
y: 70
x: -75
- label:
align: CENTER
id: display_temp
text: temp
text_font: roboto24
text_color: 0xFFFFFF
y: 115
x: -75
- label:
align: CENTER
id: display_house_temp
text: house temp
text_font: roboto24
text_color: 0xFFFFFF
y: 150
x: -75
- obj: # a properly placed coontainer object for all these controls
align: CENTER
width: 150
height: 480
bg_opa: 30%
border_opa: TRANSP
pad_all: 5
x: 164
y: 0
widgets:
- slider:
id: living_room_dimmer
width: 30
height: 220
x: 55
y: 60
min_value: 30
max_value: 160
value: 160
on_release:
- number.set:
id: dimmer_val
value: !lambda "return int(x);"
- button:
id: living_room_light_l1_btn
align: CENTER
width: 80
height: 80
#x: 0
y: 120
checkable: true
widgets:
- label:
text_font: btn_icons_font2
text: $lightbulb
align: CENTER
on_click:
- homeassistant.service:
service: light.toggle
data_template:
entity_id: light.living_room_light_l1
brightness: !lambda "return id(dimmer_level);"
- id: heating_page
widgets:
- image:
align: CENTER
src: back6
- obj: # a properly placed coontainer object for all these controls
layout: # enable the GRID layout for the children widgets
type: GRID # split the rows and the columns proportionally
grid_columns: [FR(1), FR(1), FR(1)] # equal
grid_rows: [FR(50), FR(50)] # like percents
width: 100%
height: 90%
#align: CENTER
pad_all: 15
pad_top: 22
#pad_row: 6
#pad_column: 2
bg_opa: TRANSP
border_opa: TRANSP
widgets:
- button:
id: boiler_heating_btn
checkable: true
grid_cell_column_pos: 0 # place the widget in
grid_cell_row_pos: 0 # the corresponding cell
grid_cell_x_align: STRETCH
grid_cell_y_align: STRETCH
widgets:
- label:
text_font: btn_icons_font
text: $boiler_on
align: CENTER
y: -20
- label:
text: "Boiler"
long_mode: dot
align: CENTER
y: 30
on_click:
- homeassistant.service:
service: automation.trigger
data:
entity_id: !lambda "return id(aut_boiler);"
- obj:
id: info_btn
#checkable: false
grid_cell_column_pos: 0 # place the widget in
grid_cell_row_pos: 1 # the corresponding cell
grid_cell_x_align: STRETCH
grid_cell_y_align: STRETCH
bg_color: 0x333333
bg_opa: 85%
border_color: 0x333333
border_width: 0
text_color: 0xFFFFFF
widgets:
- button:
align: CENTER
width: 110
height: 35
#x: 0
y: -60
checkable: false
widgets:
- label:
text_font: roboto24
text: "+"
align: CENTER
on_click:
- homeassistant.service:
service: input_number.increment
data:
entity_id: input_number.house_temperature_setpoint
- label:
text_font: btn_icons_font2
text: $house_temp
align: CENTER
y: -5
- label:
id: house_setpoint_display
text_font: roboto24
text: "--- °C"
align: CENTER
y: 25
- button:
align: CENTER
width: 110
height: 35
#x: 0
y: 60
checkable: false
widgets:
- label:
text_font: roboto24
text: "-"
align: CENTER
on_click:
- homeassistant.service:
service: input_number.decrement
data:
entity_id: input_number.house_temperature_setpoint
- button:
id: bedroom_heating_btn
checkable: true
grid_cell_column_pos: 1 # place the widget in
grid_cell_row_pos: 0 # the corresponding cell
grid_cell_x_align: STRETCH
grid_cell_y_align: STRETCH
widgets:
- label:
text_font: btn_icons_font
text: $radiator
align: CENTER
y: -20
- label:
text: "Bedroom"
long_mode: dot
align: CENTER
y: 30
on_click:
- homeassistant.service:
service: automation.trigger
data:
entity_id: !lambda "return id(aut_bedroom);"
- button:
id: living_room_heating_btn
checkable: true
grid_cell_column_pos: 1 # place the widget in
grid_cell_row_pos: 1 # the corresponding cell
grid_cell_x_align: STRETCH
grid_cell_y_align: STRETCH
widgets:
- label:
text_font: btn_icons_font
text: $radiator
align: CENTER
y: -20
- label:
text: "Living room"
long_mode: dot
align: CENTER
y: 30
on_click:
- homeassistant.service:
service: automation.trigger
data:
entity_id: !lambda "return id(aut_living_room);"
- button:
id: office_heating_btn
checkable: true
grid_cell_column_pos: 2 # place the widget in
grid_cell_row_pos: 0 # the corresponding cell
grid_cell_x_align: STRETCH
grid_cell_y_align: STRETCH
widgets:
- label:
text_font: btn_icons_font
text: $radiator
align: CENTER
y: -20
- label:
text: "Office"
long_mode: dot
align: CENTER
y: 30
on_click:
- homeassistant.service:
service: automation.trigger
data:
entity_id: !lambda "return id(aut_office);"
- button:
id: kids_heating_btn
checkable: true
grid_cell_column_pos: 2 # place the widget in
grid_cell_row_pos: 1 # the corresponding cell
grid_cell_x_align: STRETCH
grid_cell_y_align: STRETCH
widgets:
- label:
text_font: btn_icons_font
text: $radiator
align: CENTER
y: -20
- label:
text: "Kids"
long_mode: dot
align: CENTER
y: 30
on_click:
- homeassistant.service:
service: automation.trigger
data:
entity_id: !lambda "return id(aut_kids);"
6 Likes
Can you share full code ?
Images & YAML
5 Likes
I need some help.
I have a 3D floor plan of my house with all the lights off in the background and I want to overlay this image with separate images of each room with the lights on. My problem is, how do I make the top image transparent but clickable?
- id: page_floorplan
widgets:
- image:
align: TOP_LEFT
src: floorplan_base
id: page_floorplan_widgets
widgets:
- image:
align_to:
id: page_floorplan_widgets
align: OUT_TOP_LEFT
x: 153
y: 397
src: floorplan_bedroom
id: floorplan_bedroom_widgets
clickable: true
on_click:
- http_request.post: "http://192.168.0.30/cm?cmnd=Power%20TOGGLE"
If instead of a whole image, I use separate images with the lights off, I could use vgl.widget.hide to hide the lights on, but I would like to avoid doing it this way.
@clydebarrow Good Day! There is a widget called roller. When selecting it, I can get the index, but not the value itself. Maybe I donât understand something, I need to either pull the value out of the array by index, or how else can this be implemented? I have a list with numbers for selecting the screen off time, but when selecting it, the index of the value is returned to me, but not the value itself.
P.S. Please tell me how to implement a screen lock (for example, from children), a long press for 5 seconds is required. The binary sensor has such functions, but I do not understand how to tie it to a button on the display. Maybe there is an easier way like a long press to which you can set the time?
Youâll need some other logic to convert the index to a value.
Thereâs a Discord channel for support questions like this.