I have not seen a lot of good examples of clocks made with LVGL in ESPHome but there are some good clocks made with other programing languages. It would be cool to have a collection of clocks that could be used in different ESPHome screen designs.
This is the default clock on a screen made by Guition that I like so I started by copying it.
They obviously used images files for the hands. I started by implementing this one using only LVGL built in widgets. So mine is a bit more simple.
This is the code for it.
pages:
- id: main_page
width: 100%
bg_color: Black
widgets:
# Outer Clock Container
- obj:
height: 470
width: 470
align: center
pad_all: 4
bg_color: Black
border_width: 0
widgets:
- meter:
height: 100%
width: 100%
align: center
bg_color: White
scales:
# Minor ticks
- ticks:
width: 2
count: 61
length: 10
color: Black
range_from: 0
range_to: 60
angle_range: 360
rotation: 270
# Minuite hand
indicators:
- line:
id: minute_hand
width: 3
color: Black
r_mod: -1
# Major ticks
- angle_range: 330
rotation: 300
range_from: 1
range_to: 12
ticks:
width: 3
count: 12
length: 20
color: Black
# Hour hand
- angle_range: 360
rotation: 270
range_from: 0
range_to: 720
indicators:
- line:
id: hour_hand
width: 4
color: Black
r_mod: -40
# Second hand
- angle_range: 360
rotation: 270
range_from: 0
range_to: 60
indicators:
- line:
id: second_hand
width: 2
color: Red
r_mod: -10
I’m interested in any improvements that anybody has on this one or other clock faces!
My complete code including the code that updates the hands is here.
“sdl-lvgl_elegant_clock.yaml”