mirror of
https://github.com/esphome/esphome.git
synced 2024-12-26 15:34:53 +01:00
462 lines
13 KiB
YAML
462 lines
13 KiB
YAML
lvgl:
|
|
log_level: TRACE
|
|
bg_color: light_blue
|
|
theme:
|
|
obj:
|
|
border_width: 1
|
|
|
|
style_definitions:
|
|
- id: style_test
|
|
bg_color: 0x2F8CD8
|
|
- id: header_footer
|
|
bg_color: 0x20214F
|
|
bg_grad_color: 0x005782
|
|
bg_grad_dir: VER
|
|
bg_opa: cover
|
|
border_width: 0
|
|
radius: 0
|
|
pad_all: 0
|
|
pad_row: 0
|
|
pad_column: 0
|
|
border_color: 0x0077b3
|
|
text_color: 0xFFFFFF
|
|
width: 100%
|
|
height: 30
|
|
border_side: [left, top]
|
|
text_decor: [underline, strikethrough]
|
|
- id: style_line
|
|
line_color: light_blue
|
|
line_width: 8
|
|
line_rounded: true
|
|
- id: date_style
|
|
text_font: roboto10
|
|
align: center
|
|
text_color: 0x000000
|
|
bg_opa: cover
|
|
radius: 4
|
|
pad_all: 2
|
|
- id: spin_button
|
|
height: 40
|
|
width: 40
|
|
- id: spin_label
|
|
align: center
|
|
text_align: center
|
|
text_font: space16
|
|
- id: bdr_style
|
|
border_color: 0x808080
|
|
border_width: 2
|
|
pad_all: 4
|
|
align: center
|
|
|
|
touchscreens:
|
|
- touchscreen_id: tft_touch
|
|
long_press_repeat_time: 200ms
|
|
long_press_time: 500ms
|
|
pages:
|
|
- id: page1
|
|
skip: true
|
|
widgets:
|
|
- animimg:
|
|
height: 60
|
|
id: anim_img
|
|
src: [cat_image, dog_image]
|
|
repeat_count: 10
|
|
duration: 1s
|
|
auto_start: true
|
|
- label:
|
|
id: hello_label
|
|
text: Hello world
|
|
text_color: 0xFF8000
|
|
align: center
|
|
text_font: montserrat_40
|
|
border_post: true
|
|
on_click:
|
|
then:
|
|
- lvgl.animimg.stop: anim_img
|
|
- label:
|
|
text: "Hello shiny day"
|
|
text_color: 0xFFFFFF
|
|
align: bottom_mid
|
|
text_font: space16
|
|
- obj:
|
|
align: center
|
|
arc_opa: COVER
|
|
arc_color: 0xFF0000
|
|
arc_rounded: false
|
|
arc_width: 3
|
|
anim_time: 1s
|
|
bg_color: light_blue
|
|
bg_grad_color: light_blue
|
|
bg_dither_mode: ordered
|
|
bg_grad_dir: hor
|
|
bg_grad_stop: 128
|
|
bg_image_opa: transp
|
|
bg_image_recolor: light_blue
|
|
bg_image_recolor_opa: 50%
|
|
bg_main_stop: 0
|
|
bg_opa: 20%
|
|
border_color: 0x00FF00
|
|
border_opa: cover
|
|
border_post: true
|
|
border_side: [bottom, left]
|
|
border_width: 4
|
|
clip_corner: false
|
|
height: 50%
|
|
image_recolor: light_blue
|
|
image_recolor_opa: cover
|
|
line_width: 10
|
|
line_dash_width: 10
|
|
line_dash_gap: 10
|
|
line_rounded: false
|
|
line_color: light_blue
|
|
opa: cover
|
|
opa_layered: cover
|
|
outline_color: light_blue
|
|
outline_opa: cover
|
|
outline_pad: 10px
|
|
outline_width: 10px
|
|
pad_all: 10px
|
|
pad_bottom: 10px
|
|
pad_column: 10px
|
|
pad_left: 10px
|
|
pad_right: 10px
|
|
pad_row: 10px
|
|
pad_top: 10px
|
|
shadow_color: light_blue
|
|
shadow_ofs_x: 5
|
|
shadow_ofs_y: 5
|
|
shadow_opa: cover
|
|
shadow_spread: 5
|
|
shadow_width: 10
|
|
text_align: auto
|
|
text_color: light_blue
|
|
text_decor: [underline, strikethrough]
|
|
text_font: montserrat_18
|
|
text_letter_space: 4
|
|
text_line_space: 4
|
|
text_opa: cover
|
|
transform_angle: 180
|
|
transform_height: 100
|
|
transform_pivot_x: 50%
|
|
transform_pivot_y: 50%
|
|
transform_zoom: 0.5
|
|
translate_x: 10
|
|
translate_y: 10
|
|
max_height: 100
|
|
max_width: 200
|
|
min_height: 20%
|
|
min_width: 20%
|
|
radius: circle
|
|
width: 10px
|
|
x: 100
|
|
y: 120
|
|
- buttonmatrix:
|
|
on_press:
|
|
logger.log:
|
|
format: "matrix button pressed: %d"
|
|
args: ["x"]
|
|
on_long_press:
|
|
lvgl.matrix.button.update:
|
|
id: [button_a, button_e, button_c]
|
|
control:
|
|
disabled: true
|
|
on_click:
|
|
logger.log:
|
|
format: "matrix button clicked: %d, is button_a = %u"
|
|
args: ["x", "id(button_a) == x"]
|
|
items:
|
|
checked:
|
|
bg_color: 0xFFFF00
|
|
id: b_matrix
|
|
|
|
rows:
|
|
- buttons:
|
|
- id: button_a
|
|
text: home icon
|
|
width: 2
|
|
control:
|
|
checkable: true
|
|
on_value:
|
|
logger.log:
|
|
format: "button_a value %d"
|
|
args: [x]
|
|
- id: button_b
|
|
text: B
|
|
width: 1
|
|
on_value:
|
|
logger.log:
|
|
format: "button_b value %d"
|
|
args: [x]
|
|
on_click:
|
|
then:
|
|
- lvgl.page.previous:
|
|
control:
|
|
hidden: false
|
|
- buttons:
|
|
- id: button_c
|
|
text: C
|
|
control:
|
|
checkable: false
|
|
- id: button_d
|
|
text: menu left
|
|
on_long_press:
|
|
then:
|
|
logger.log: Long pressed
|
|
on_long_press_repeat:
|
|
then:
|
|
logger.log: Long pressed repeated
|
|
- buttons:
|
|
- id: button_e
|
|
- button:
|
|
id: button_button
|
|
width: 20%
|
|
height: 10%
|
|
pressed:
|
|
bg_color: light_blue
|
|
checkable: true
|
|
checked:
|
|
bg_color: 0x000000
|
|
widgets:
|
|
- label:
|
|
text: Button
|
|
on_click:
|
|
lvgl.label.update:
|
|
id: hello_label
|
|
bg_color: 0x123456
|
|
text: clicked
|
|
on_value:
|
|
logger.log:
|
|
format: "state now %d"
|
|
args: [x]
|
|
on_short_click:
|
|
lvgl.widget.hide: hello_label
|
|
on_long_press:
|
|
lvgl.widget.show: hello_label
|
|
on_cancel:
|
|
lvgl.widget.enable: hello_label
|
|
on_ready:
|
|
lvgl.widget.disable: hello_label
|
|
on_defocus:
|
|
lvgl.widget.hide: hello_label
|
|
on_focus:
|
|
logger.log: Button clicked
|
|
on_scroll:
|
|
logger.log: Button clicked
|
|
on_scroll_end:
|
|
logger.log: Button clicked
|
|
on_scroll_begin:
|
|
logger.log: Button clicked
|
|
on_release:
|
|
logger.log: Button clicked
|
|
on_long_press_repeat:
|
|
logger.log: Button clicked
|
|
- led:
|
|
id: lv_led
|
|
color: 0x00FF00
|
|
brightness: 50%
|
|
align: right_mid
|
|
- spinner:
|
|
arc_length: 120
|
|
spin_time: 2s
|
|
align: left_mid
|
|
- image:
|
|
src: cat_image
|
|
align: top_left
|
|
y: 50
|
|
|
|
- id: page2
|
|
widgets:
|
|
- button:
|
|
styles: spin_button
|
|
id: spin_up
|
|
on_click:
|
|
- lvgl.spinbox.increment: spinbox_id
|
|
widgets:
|
|
- label:
|
|
styles: spin_label
|
|
text: "+"
|
|
- spinbox:
|
|
text_font: space16
|
|
id: spinbox_id
|
|
align: center
|
|
width: 120
|
|
range_from: -10
|
|
range_to: 1000
|
|
step: 5.0
|
|
rollover: false
|
|
digits: 6
|
|
decimal_places: 2
|
|
value: 15
|
|
on_value:
|
|
then:
|
|
- logger.log:
|
|
format: "Spinbox value is %f"
|
|
args: [x]
|
|
- button:
|
|
styles: spin_button
|
|
id: spin_down
|
|
on_click:
|
|
- lvgl.spinbox.decrement: spinbox_id
|
|
widgets:
|
|
- label:
|
|
styles: spin_label
|
|
text: "-"
|
|
- arc:
|
|
align: left_mid
|
|
id: lv_arc
|
|
adjustable: true
|
|
on_value:
|
|
then:
|
|
- logger.log:
|
|
format: "Arc value is %f"
|
|
args: [x]
|
|
scroll_on_focus: true
|
|
value: 75
|
|
min_value: 1
|
|
max_value: 100
|
|
arc_color: 0xFF0000
|
|
indicator:
|
|
arc_color: 0xF000FF
|
|
pressed:
|
|
arc_color: 0xFFFF00
|
|
focused:
|
|
arc_color: 0x808080
|
|
- bar:
|
|
id: bar_id
|
|
align: top_mid
|
|
y: 20
|
|
value: 30
|
|
max_value: 100
|
|
min_value: 10
|
|
mode: range
|
|
on_click:
|
|
then:
|
|
- lvgl.bar.update:
|
|
id: bar_id
|
|
value: !lambda return (int)((float)rand() / RAND_MAX * 100);
|
|
- logger.log:
|
|
format: "bar value %f"
|
|
args: [x]
|
|
- line:
|
|
align: center
|
|
points:
|
|
- 5, 5
|
|
- 70, 70
|
|
- 120, 10
|
|
- 180, 60
|
|
- 240, 10
|
|
on_click:
|
|
lvgl.page.next:
|
|
- switch:
|
|
align: right_mid
|
|
- checkbox:
|
|
id: checkbox_id
|
|
text: Checkbox
|
|
align: bottom_right
|
|
- slider:
|
|
id: slider_id
|
|
align: top_mid
|
|
y: 40
|
|
value: 30
|
|
max_value: 100
|
|
min_value: 10
|
|
mode: normal
|
|
on_value:
|
|
then:
|
|
- logger.log:
|
|
format: "slider value %f"
|
|
args: [x]
|
|
on_click:
|
|
then:
|
|
- lvgl.slider.update:
|
|
id: slider_id
|
|
value: !lambda return (int)((float)rand() / RAND_MAX * 100);
|
|
- tabview:
|
|
id: tabview_id
|
|
width: 100%
|
|
height: 80%
|
|
position: top
|
|
on_value:
|
|
then:
|
|
- if:
|
|
condition:
|
|
lambda: return tab == id(tabview_tab_1);
|
|
then:
|
|
- logger.log: "Dog tab is now showing"
|
|
tabs:
|
|
- name: Dog
|
|
id: tabview_tab_1
|
|
border_width: 2
|
|
border_color: 0xff0000
|
|
width: 100%
|
|
pad_all: 8
|
|
layout:
|
|
type: grid
|
|
grid_row_align: end
|
|
grid_rows: [25px, fr(1), content]
|
|
grid_columns: [40, fr(1), fr(1)]
|
|
widgets:
|
|
- image:
|
|
grid_cell_row_pos: 0
|
|
grid_cell_column_pos: 0
|
|
src: dog_image
|
|
on_click:
|
|
then:
|
|
- lvgl.tabview.select:
|
|
id: tabview_id
|
|
index: 1
|
|
animated: true
|
|
- label:
|
|
styles: bdr_style
|
|
grid_cell_x_align: center
|
|
grid_cell_y_align: stretch
|
|
grid_cell_row_pos: 0
|
|
grid_cell_column_pos: 1
|
|
grid_cell_column_span: 1
|
|
text: "Grid cell 0/1"
|
|
- label:
|
|
grid_cell_x_align: end
|
|
styles: bdr_style
|
|
grid_cell_row_pos: 1
|
|
grid_cell_column_pos: 0
|
|
text: "Grid cell 1/0"
|
|
- label:
|
|
styles: bdr_style
|
|
grid_cell_row_pos: 1
|
|
grid_cell_column_pos: 1
|
|
text: "Grid cell 1/1"
|
|
- label:
|
|
id: cell_1_3
|
|
styles: bdr_style
|
|
grid_cell_row_pos: 1
|
|
grid_cell_column_pos: 2
|
|
text: "Grid cell 1/2"
|
|
- name: Cat
|
|
id: tabview_tab_2
|
|
widgets:
|
|
- image:
|
|
src: cat_image
|
|
on_click:
|
|
then:
|
|
- logger.log: Cat image clicked
|
|
- lvgl.tabview.select:
|
|
id: tabview_id
|
|
index: 0
|
|
animated: true
|
|
font:
|
|
- file: "gfonts://Roboto"
|
|
id: space16
|
|
bpp: 4
|
|
|
|
image:
|
|
- id: cat_image
|
|
resize: 256x48
|
|
file: $component_dir/logo-text.svg
|
|
- id: dog_image
|
|
file: $component_dir/logo-text.svg
|
|
resize: 256x48
|
|
type: TRANSPARENT_BINARY
|
|
|
|
color:
|
|
- id: light_blue
|
|
hex: "3340FF"
|