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"

lvgl:
  log_level: TRACE
  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

  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

  pages:
    - id: page1
      on_load:
        - logger.log: page loaded
        - lvgl.widget.focus:
            action: restore
      on_unload:
        - logger.log: page unloaded
        - lvgl.widget.focus: mark
      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:
        - 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()']
        - 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
                - 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:
              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.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:
            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:
        - 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.widget.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: 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
                        - 4th
                        - 5th
                        - 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"
                          args: [x]
                      on_cancel:
                        logger.log:
                          format: "Dropdown closed = %d"
                          args: [x]
                  - image:
                      src: cat_image
                      on_click:
                        then:
                          - 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