mirror of
https://github.com/esphome/esphome.git
synced 2024-12-29 17:47:51 +01:00
819 lines
24 KiB
YAML
819 lines
24 KiB
YAML
substitutions:
|
|
light_recessed: "\U000F179B"
|
|
wall_sconce_round: "\U000F0748"
|
|
gas_burner: "\U000F1A1B"
|
|
home_icon: "\U000F02DC"
|
|
menu_left: "\U000F0A02"
|
|
menu_right: "\U000F035F"
|
|
close: "\U000F0156"
|
|
delete: "\U000F01B4"
|
|
backspace: "\U000F006E"
|
|
check: "\U000F012C"
|
|
arrow_down: "\U000F004B"
|
|
|
|
binary_sensor:
|
|
- id: enter_sensor
|
|
platform: template
|
|
- id: left_sensor
|
|
platform: template
|
|
|
|
lvgl:
|
|
log_level: debug
|
|
resume_on_input: true
|
|
on_pause:
|
|
logger.log: LVGL is Paused
|
|
on_resume:
|
|
logger.log: LVGL has resumed
|
|
bg_color: light_blue
|
|
disp_bg_color: color_id
|
|
disp_bg_image: cat_image
|
|
theme:
|
|
obj:
|
|
border_width: 1
|
|
|
|
gradients:
|
|
- id: color_bar
|
|
direction: hor
|
|
dither: err_diff
|
|
stops:
|
|
- color: 0xFF0000
|
|
position: 0
|
|
- color: 0xFFFF00
|
|
position: 42
|
|
- color: 0x00FF00
|
|
position: 84
|
|
- color: 0x00FFFF
|
|
position: 127
|
|
- color: 0x0000FF
|
|
position: 169
|
|
- color: 0xFF00FF
|
|
position: 212
|
|
- color: 0xFF0000
|
|
position: 255
|
|
|
|
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
|
|
border_color: tomato
|
|
text_color: springgreen
|
|
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: color_id2
|
|
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
|
|
- id: image_recolor
|
|
image_recolor: 0x10ca1e
|
|
image_recolor_opa: cover
|
|
|
|
touchscreens:
|
|
- touchscreen_id: tft_touch
|
|
long_press_repeat_time: 200ms
|
|
long_press_time: 500ms
|
|
keypads:
|
|
- initial_focus: button_button
|
|
enter: enter_sensor
|
|
next: left_sensor
|
|
|
|
msgboxes:
|
|
- id: message_box
|
|
close_button: true
|
|
title: Messagebox
|
|
bg_color: 0xffff
|
|
widgets:
|
|
- label:
|
|
text: Hello Msgbox
|
|
id: msgbox_label
|
|
body:
|
|
text: This is a sample messagebox
|
|
bg_color: 0x808080
|
|
button_style:
|
|
bg_color: 0xff00
|
|
border_width: 4
|
|
buttons:
|
|
- id: msgbox_button
|
|
text: Button
|
|
- id: msgbox_apply
|
|
text: "Close"
|
|
on_click:
|
|
then:
|
|
- lvgl.widget.hide: message_box
|
|
- id: simple_msgbox
|
|
title: Simple
|
|
|
|
pages:
|
|
- id: page1
|
|
on_load:
|
|
- logger.log: page loaded
|
|
- lvgl.widget.focus:
|
|
action: restore
|
|
on_unload:
|
|
- logger.log: page unloaded
|
|
- lvgl.widget.focus: mark
|
|
- lvgl.widget.redraw: hello_label
|
|
- lvgl.widget.redraw:
|
|
- lvgl.label.update:
|
|
id: msgbox_label
|
|
text: Unloaded
|
|
on_all_events:
|
|
logger.log:
|
|
format: "Event %s"
|
|
args: ['lv_event_code_name_for(event->code).c_str()']
|
|
skip: true
|
|
layout:
|
|
type: flex
|
|
pad_row: 4
|
|
pad_column: 4px
|
|
flex_align_main: center
|
|
flex_align_cross: start
|
|
flex_align_track: end
|
|
widgets:
|
|
- roller:
|
|
id: lv_roller
|
|
visible_row_count: 2
|
|
anim_time: 500ms
|
|
options:
|
|
- Nov
|
|
- Dec
|
|
selected_index: 1
|
|
on_change:
|
|
then:
|
|
- logger.log:
|
|
format: "Roller changed = %d: %s"
|
|
args: [x, text.c_str()]
|
|
on_value:
|
|
then:
|
|
- logger.log:
|
|
format: "Roller changed = %d: %s"
|
|
args: [x, text.c_str()]
|
|
- animimg:
|
|
height: 60
|
|
id: anim_img
|
|
src: [cat_image, dog_image]
|
|
repeat_count: 10
|
|
duration: 1s
|
|
auto_start: true
|
|
on_all_events:
|
|
- logger.log:
|
|
format: "Event %s"
|
|
args: ['lv_event_code_name_for(event->code).c_str()']
|
|
- lvgl.animimg.update:
|
|
id: anim_img
|
|
src: !lambda "return {dog_image, cat_image};"
|
|
duration: 2s
|
|
- label:
|
|
id: hello_label
|
|
text: Hello world
|
|
text_color: 0xFF8000
|
|
align: center
|
|
text_font: montserrat_40
|
|
border_post: true
|
|
on_press:
|
|
lvgl.label.update:
|
|
id: hello_label
|
|
text: Goodbye
|
|
on_click:
|
|
then:
|
|
- lvgl.animimg.stop: anim_img
|
|
- lvgl.update:
|
|
disp_bg_color: 0xffff00
|
|
disp_bg_image: cat_image
|
|
- lvgl.widget.show: message_box
|
|
- 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
|
|
color_filter_opa: transp
|
|
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_left: 10px
|
|
pad_right: 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:
|
|
then:
|
|
- logger.log:
|
|
format: "matrix button pressed: %d"
|
|
args: ["x"]
|
|
- lvgl.widget.show: b_matrix
|
|
- lvgl.widget.redraw:
|
|
|
|
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%
|
|
transform_angle: !lambda return(180*100);
|
|
arc_width: !lambda return 4;
|
|
border_width: !lambda return 6;
|
|
shadow_ofs_x: !lambda return 6;
|
|
shadow_ofs_y: !lambda return 6;
|
|
shadow_spread: !lambda return 6;
|
|
shadow_width: !lambda return 6;
|
|
pressed:
|
|
bg_color: light_blue
|
|
checkable: true
|
|
checked:
|
|
bg_color: 0x000000
|
|
widgets:
|
|
- label:
|
|
text: Button
|
|
on_click:
|
|
- lvgl.widget.focus: spin_up
|
|
- lvgl.widget.focus: next
|
|
- lvgl.widget.focus: previous
|
|
- lvgl.widget.focus:
|
|
action: previous
|
|
freeze: true
|
|
- lvgl.widget.focus:
|
|
id: spin_up
|
|
freeze: true
|
|
editing: true
|
|
- lvgl.label.update:
|
|
id: hello_label
|
|
bg_color: 0x123456
|
|
text: clicked
|
|
- lvgl.label.update:
|
|
id: hello_label
|
|
text: !lambda return "hello world";
|
|
- lvgl.label.update:
|
|
id: hello_label
|
|
text: !lambda |-
|
|
ESP_LOGD("label", "multi-line lambda");
|
|
return "hello world";
|
|
- lvgl.label.update:
|
|
id: hello_label
|
|
text: !lambda 'return str_sprintf("Hello space");'
|
|
- lvgl.label.update:
|
|
id: hello_label
|
|
text:
|
|
format: "sprintf format %s"
|
|
args: ['x ? "checked" : "unchecked"']
|
|
- lvgl.label.update:
|
|
id: hello_label
|
|
text:
|
|
time_format: "%c"
|
|
- lvgl.label.update:
|
|
id: hello_label
|
|
text:
|
|
time_format: "%c"
|
|
time: time_id
|
|
- lvgl.label.update:
|
|
id: hello_label
|
|
text:
|
|
time_format: "%c"
|
|
time: !lambda return id(time_id).now();
|
|
- lvgl.label.update:
|
|
id: hello_label
|
|
text:
|
|
time_format: "%c"
|
|
time: !lambda |-
|
|
ESP_LOGD("label", "multi-line lambda");
|
|
return id(time_id).now();
|
|
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:
|
|
id: lv_image
|
|
src: cat_image
|
|
align: top_left
|
|
y: "50"
|
|
mode: real
|
|
- tileview:
|
|
id: tileview_id
|
|
scrollbar_mode: active
|
|
on_value:
|
|
then:
|
|
- if:
|
|
condition:
|
|
lambda: return tile == id(tile_1);
|
|
then:
|
|
- logger.log: "tile 1 is now showing"
|
|
tiles:
|
|
- id: tile_1
|
|
row: 0
|
|
column: 0
|
|
dir: ALL
|
|
widgets:
|
|
- obj:
|
|
bg_color: 0x000000
|
|
- id: tile_2
|
|
row: 1
|
|
column: 0
|
|
dir: [VER, HOR]
|
|
widgets:
|
|
- obj:
|
|
bg_color: 0x000000
|
|
|
|
- id: page2
|
|
widgets:
|
|
- qrcode:
|
|
id: lv_qr
|
|
align: left_mid
|
|
size: 100
|
|
light_color: whitesmoke
|
|
dark_color: steelblue
|
|
text: esphome.io
|
|
on_click:
|
|
lvgl.qrcode.update:
|
|
id: lv_qr
|
|
text: homeassistant.io
|
|
|
|
- slider:
|
|
min_value: 0
|
|
max_value: 255
|
|
bg_opa: cover
|
|
bg_grad: color_bar
|
|
radius: 0
|
|
indicator:
|
|
bg_opa: transp
|
|
knob:
|
|
radius: 1
|
|
width: "4"
|
|
height: 10%
|
|
bg_color: 0x000000
|
|
width: 100%
|
|
height: 10%
|
|
align: top_mid
|
|
- 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:
|
|
id: lv_line_id
|
|
align: center
|
|
points:
|
|
- 5, 5
|
|
- 70, 70
|
|
- 120, 10
|
|
- 180, 60
|
|
- 240, 10
|
|
on_click:
|
|
- lvgl.line.update:
|
|
id: lv_line_id
|
|
line_color: 0xFFFF
|
|
- 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)]
|
|
pad_row: 6px
|
|
pad_column: 0
|
|
widgets:
|
|
- image:
|
|
grid_cell_row_pos: 0
|
|
grid_cell_column_pos: 0
|
|
src: !lambda return dog_image;
|
|
mode: virtual
|
|
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:
|
|
- dropdown:
|
|
indicator:
|
|
text_font: helvetica20
|
|
id: lv_dropdown
|
|
options:
|
|
- First
|
|
- Second
|
|
- Third
|
|
- 6th
|
|
- 7th
|
|
- 8th
|
|
- 9th
|
|
selected_index: 2
|
|
dir: top
|
|
symbol: ${arrow_down}
|
|
dropdown_list:
|
|
max_height: 100px
|
|
bg_color: 0x000080
|
|
text_color: 0xFF00
|
|
selected:
|
|
bg_color: 0xFFFF00
|
|
checked:
|
|
bg_color: 0x00
|
|
text_color: 0xFF0000
|
|
scrollbar:
|
|
bg_color: 0xFF
|
|
on_value:
|
|
logger.log:
|
|
format: "Dropdown changed = %d: %s"
|
|
args: [x, text.c_str()]
|
|
on_cancel:
|
|
logger.log:
|
|
format: "Dropdown closed = %d"
|
|
args: [x]
|
|
- image:
|
|
src: cat_image
|
|
on_click:
|
|
then:
|
|
- lvgl.dropdown.update:
|
|
id: lv_dropdown
|
|
options:
|
|
["First", "Second", "Third", "4th", "5th", "6th", "7th", "8th", "9th", "10th", "11th"]
|
|
selected_index: 3
|
|
- logger.log: Cat image clicked
|
|
- lvgl.tabview.select:
|
|
id: tabview_id
|
|
index: 0
|
|
animated: true
|
|
- meter:
|
|
height: 200px
|
|
width: 200px
|
|
indicator:
|
|
bg_color: 0xFF
|
|
radius: 0
|
|
bg_opa: TRANSP
|
|
text_color: 0xFFFFFF
|
|
scales:
|
|
- ticks:
|
|
width: 1
|
|
count: 61
|
|
length: 20
|
|
color: 0xFFFFFF
|
|
range_from: 0
|
|
range_to: 60
|
|
angle_range: 360
|
|
rotation: 270
|
|
indicators:
|
|
- line:
|
|
opa: 50%
|
|
id: minute_hand
|
|
color: 0xFF0000
|
|
r_mod: -1
|
|
width: 3
|
|
-
|
|
angle_range: 330
|
|
rotation: 300
|
|
range_from: 1
|
|
range_to: 12
|
|
ticks:
|
|
width: 1
|
|
count: 12
|
|
length: 1
|
|
major:
|
|
stride: 1
|
|
width: 4
|
|
length: 8
|
|
color: 0xC0C0C0
|
|
label_gap: 6
|
|
- angle_range: 360
|
|
rotation: 270
|
|
range_from: 0
|
|
range_to: 720
|
|
indicators:
|
|
- line:
|
|
id: hour_hand
|
|
value: 180
|
|
width: 4
|
|
color: 0xA0A0A0
|
|
r_mod: -20
|
|
opa: 0%
|
|
|
|
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"
|
|
- id: color_id
|
|
red: 0.5
|
|
green: 0.5
|
|
blue: 0.5
|
|
white: 0.5
|
|
- id: color_id2
|
|
red_int: 0xFF
|
|
green_int: 123
|
|
blue_int: 64
|
|
white_int: 255
|