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
  on_boot:
    logger.log: LVGL has started
  bg_color: light_blue
  disp_bg_color: color_id
  disp_bg_image: cat_image
  disp_bg_opa: cover
  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
              - lvgl.style.update:
                  id: style_test
                  bg_color: blue
                  bg_opa: !lambda return 0.5;
              - lvgl.image.update:
                  id: lv_image
                  zoom: !lambda return 512;
                  angle: !lambda return 100;
                  pivot_x: !lambda return 20;
                  pivot_y: !lambda return 20;
                  offset_x: !lambda return 20;
                  offset_y: !lambda return 20;
                  antialias: !lambda return true;
    - id: simple_msgbox
      title: Simple

  pages:
    - id: page1
      on_swipe_top:
        logger.log: "swiped up"
      on_swipe_bottom:
        logger.log: "swiped down"
      on_swipe_up:
        logger.log: "swiped up"
      on_swipe_down:
        logger.log: "swiped down"
      on_swipe_left:
        logger.log: "swiped left"
      on_swipe_right:
        logger.log: "swiped right"
      bg_image_src: cat_image
      on_load:
        - logger.log: page loaded
        - lvgl.widget.focus:
            action: restore
        - if:
            condition:
              lvgl.page.is_showing: page1
            then:
              logger.log: "Yes, page1 showing"
      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: !lambda "return {dog_image, cat_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
              - lvgl.widget.refresh: anim_img
        - label:
            on_boot:
              lvgl.label.update:
                id: hello_label
                text: Goodbye Cruel World
            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: none
                - 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
            zoom: 2.0
            angle: 45
        - 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:
        - canvas:
            id: canvas_id
            align: center
            width: 400
            height: 400
            transparent: true
            on_boot:
              - lvgl.canvas.fill:
                  color: blue
                  opa: 50%
              - lvgl.canvas.draw_rectangle:
                  x: 20
                  y: 20
                  width: 150
                  height: 150
                  bg_color: green
                  bg_opa: cover
                  radius: 5
                  border_color: black
                  border_width: 4
                  border_opa: 80%
                  shadow_color: black
                  shadow_width: 10
                  shadow_ofs_x: 5
                  shadow_ofs_y: 5
                  shadow_spread: 4
                  shadow_opa: cover
                  outline_color: red
                  outline_width: 4
                  outline_pad: 4
                  outline_opa: cover
              - lvgl.canvas.set_pixels:
                  color: red
                  points:
                    - x: 100
                      y: 100
                    - 100,101
                    - 100,102
                    - 100,103
                    - 100,104
              - lvgl.canvas.set_pixels:
                  opa: 50%
                  color: !lambda return lv_color_make(255,255,255);
                  points:
                    - x: !lambda return random_uint32() % 200;
                      y: !lambda return random_uint32() % 200;
                    - 121,120
                    - 122,120
                    - 123,120
                    - 124,120
                    - 125,120

              - lvgl.canvas.draw_text:
                  x: 100
                  y: 100
                  font: montserrat_18
                  color: white
                  opa: cover
                  decor: underline
                  letter_space: 1
                  line_space: 2
                  text: Canvas Text
                  align: center
                  max_width: 150
              - lvgl.canvas.draw_image:
                  src: cat_image
                  x: 100
                  y: 100
                  angle: 90
                  zoom: 2.0
                  pivot_x: 25
                  pivot_y: 25
              - lvgl.canvas.draw_line:
                  color: blue
                  width: 4
                  round_end: true
                  round_start: false
                  points:
                    - 50,50
                    - 50, 200
                    - 200, 200
                    - 200, 50
                    - 50,50
              - lvgl.canvas.draw_polygon:
                  bg_color: teal
                  border_color: white
                  border_width: 2
                  border_opa: cover
                  points:
                    - 150,150
                    - 150, 300
                    - 300, 300
                    - 350, 250
              - lvgl.canvas.draw_arc:
                  x: 200
                  y: 200
                  radius: 40
                  opa: 50%
                  color: purple
                  width: 6
                  rounded: true
                  start_angle: 10
                  end_angle: !lambda return 900;

        - 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"
              pad_left: -5
              pad_top: 5
              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
              - x: !lambda return random_uint32() % 100;
                y: !lambda return random_uint32() % 100;
              - 70, 70
              - 120, 10
              - 180, 60
              - 240, 10
            on_click:
              - lvgl.line.update:
                  id: lv_line_id
                  line_color: 0xFFFF
                  points:
                    - 5, 5
                    - x: !lambda return random_uint32() % 100;
                      y: !lambda return random_uint32() % 100;
                    - 70, 70
                    - 120, 10
                    - 180, 60
                    - 240, 10
              - 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
            tab_style:
              border_color: 0x00FF00
              border_width: 6
              items:
                text_color: 0x0000FF
            content_style:
              scrollable: false
            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%
    - id: page3
      widgets:
        - keyboard:
            id: lv_keyboard
            align: bottom_mid
            on_value:
              then:
                - logger.log:
                    format: "keyboard value %s"
                    args: [text.c_str()]
                - lvgl.keyboard.update:
                    id: lv_keyboard
                    hidden: true
            on_ready:
              - lvgl.widget.update:
                  id: lv_keyboard
              - lvgl.keyboard.update:
                  id: lv_keyboard
                  hidden: true

        - keyboard:
            id: lv_keyboard1
            mode: special
            on_ready:
              lvgl.keyboard.update:
                id: lv_keyboard1
                hidden: true
                mode: text_lower

font:
  - file: "gfonts://Roboto"
    id: space16
    bpp: 4

image:
  - id: cat_image
    resize: 256x48
    file: $component_dir/logo-text.svg
    type: RGB565
    transparency: alpha_channel
  - id: dog_image
    file: $component_dir/logo-text.svg
    resize: 256x48
    type: BINARY
    transparency: chroma_key

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

select:
  - platform: lvgl
    id: lv_roller_select
    widget: lv_roller
    restore_value: true
  - platform: lvgl
    id: lv_dropdown_select
    widget: lv_dropdown
    restore_value: false
