esphome/tests/components/lvgl/lvgl-package.yaml

805 lines
24 KiB
YAML
Raw Normal View History

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"
2024-11-11 04:07:48 +01:00
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
2024-09-10 03:24:18 +02:00
disp_bg_color: color_id
2024-08-26 00:08:30 +02:00
disp_bg_image: cat_image
theme:
obj:
border_width: 1
2024-09-10 03:24:18 +02:00
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
2024-09-19 06:17:04 +02:00
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
2024-09-10 03:24:18 +02:00
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
2024-11-11 04:07:48 +01:00
keypads:
- initial_focus: button_button
enter: enter_sensor
next: left_sensor
msgboxes:
- id: message_box
close_button: true
title: Messagebox
bg_color: 0xffff
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
2024-08-05 07:07:05 +02:00
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:
on_all_events:
logger.log:
format: "Event %s"
args: ['lv_event_code_name_for(event->code).c_str()']
2024-08-05 07:07:05 +02:00
skip: true
2024-08-19 00:43:23 +02:00
layout:
type: flex
pad_row: 4
pad_column: 4px
flex_align_main: center
flex_align_cross: start
flex_align_track: end
2024-08-05 07:07:05 +02:00
widgets:
- roller:
id: lv_roller
visible_row_count: 2
anim_time: 500ms
options:
- Nov
- Dec
selected_index: 1
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
2024-08-05 07:07:05 +02:00
- label:
id: hello_label
2024-08-05 07:07:05 +02:00
text: Hello world
text_color: 0xFF8000
align: center
text_font: montserrat_40
border_post: true
2024-10-09 03:43:28 +02:00
on_press:
lvgl.label.update:
id: hello_label
text: Goodbye
on_click:
then:
- lvgl.animimg.stop: anim_img
2024-08-26 00:08:30 +02:00
- lvgl.update:
disp_bg_color: 0xffff00
disp_bg_image: cat_image
- lvgl.widget.show: message_box
2024-08-05 07:07:05 +02:00
- 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
2024-08-05 07:07:05 +02:00
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
2024-08-05 07:07:05 +02:00
- button:
id: button_button
2024-08-05 07:07:05 +02:00
width: 20%
height: 10%
2024-12-03 07:50:11 +01:00
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;
2024-08-05 07:07:05 +02:00
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
2024-08-19 00:43:23 +02:00
- 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();
2024-08-05 07:07:05 +02:00
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
2024-08-05 07:07:05 +02:00
color: 0x00FF00
brightness: 50%
align: right_mid
- spinner:
arc_length: 120
spin_time: 2s
align: left_mid
- image:
id: lv_image
2024-08-05 07:07:05 +02:00
src: cat_image
align: top_left
y: "50"
2024-08-26 00:08:30 +02:00
- tileview:
id: tileview_id
scrollbar_mode: active
2024-08-29 03:34:41 +02:00
on_value:
then:
- if:
condition:
lambda: return tile == id(tile_1);
then:
- logger.log: "tile 1 is now showing"
2024-08-26 00:08:30 +02:00
tiles:
2024-08-29 03:34:41 +02:00
- id: tile_1
2024-08-26 00:08:30 +02:00
row: 0
column: 0
2024-08-29 03:34:41 +02:00
dir: ALL
widgets:
- obj:
bg_color: 0x000000
- id: tile_2
row: 1
column: 0
dir: [VER, HOR]
2024-08-26 00:08:30 +02:00
widgets:
- obj:
bg_color: 0x000000
2024-08-05 07:07:05 +02:00
- id: page2
widgets:
2024-10-28 23:05:51 +01:00
- 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
2024-09-10 03:24:18 +02:00
- 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"
2024-09-10 03:24:18 +02:00
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: "-"
2024-08-05 07:07:05 +02:00
- 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:
2024-08-22 20:56:53 +02:00
id: lv_line_id
2024-08-05 07:07:05 +02:00
align: center
points:
- 5, 5
- 70, 70
- 120, 10
- 180, 60
- 240, 10
on_click:
2024-12-03 07:50:11 +01:00
- lvgl.line.update:
2024-08-22 20:56:53 +02:00
id: lv_line_id
line_color: 0xFFFF
- lvgl.page.next:
2024-08-05 07:07:05 +02:00
- switch:
align: right_mid
- checkbox:
id: checkbox_id
2024-08-05 07:07:05 +02:00
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)]
2024-08-19 00:43:23 +02:00
pad_row: 6px
pad_column: 0
widgets:
- image:
grid_cell_row_pos: 0
grid_cell_column_pos: 0
src: !lambda return 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:
- 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
2024-10-07 02:27:08 +02:00
- 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%
2024-10-07 02:27:08 +02:00
font:
- file: "gfonts://Roboto"
id: space16
bpp: 4
image:
2024-08-05 07:07:05 +02:00
- 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"
2024-09-10 03:24:18 +02:00
- 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