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_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" - 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; 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