# lvgl_clock - style: analog, exercising every shared and analog-specific
# option (see README.md for the full reference).
# Compile:  esphome compile examples/example_analog.yaml

esphome:
  name: lvgl-clock-analog

packages:
  base: !include common_base_esp32_s3_devkit.yaml
  display: !include common_tft_1_69_spi_st7789v2_240_280.yaml

# extra colours beyond the base package's cc_hands/cc_bg/cc_faces, just to
# make the per-hand/per-ring colour overrides visually distinct below.
color:
  - id: cc_minute
    red: 60%
    green: 80%
    blue: 100%
  - id: cc_second
    red: 100%
    green: 20%
    blue: 20%
  - id: cc_ticks_minor
    red: 40%
    green: 40%
    blue: 40%
  - id: cc_ticks_major
    red: 60%
    green: 60%
    blue: 60%
lvgl:
  widgets:
    # A plain LVGL label for the date - nothing to do with lvgl_clock, just
    # another widget. Listed BEFORE the lvgl_clock widget so it draws behind
    # it; with the clock's `transparent: true` the date shows through the gaps
    # between the hands/ticks. Updated from the time component by interval:.
    - label:
        id: date_label
        align: CENTER
        y: 50                        # px below the clock centre
        text_font: montserrat_24
        text_color: cc_hands
        text: ""

    - lvgl_clock:
        id: dc
        time_id: clock_time
        width: ${clock_height}
        height: ${clock_height}
        align: CENTER
        style: analog
        twenty_four_hour: true        # false = 1-12
        foreground: cc_hands          # default "ink" - hour/minute hands, hub
        transparent: true             # clear canvas to transparent (ARGB8888,
                                      # 4 bytes/px) so the date behind shows through
        show_seconds: true            # sweeping second hand
#        render_interval: 33ms         # how often the widget redraws itself
        analog:
          show_face: false
          face_color: cc_faces               # dial fill (needs show_face)
          border_color: cc_hands             # dial rim + default tick colour (needs show_face)
          minute_ticks:                      # 60 small 1-min ticks
            enabled: true
            color: cc_ticks_minor              # defaults to border_color
            rounded: false                       # rounded vs flat/square tick ends
            width: s                             # s | m | l
            length: s                             # s | m | l
          hour_ticks:                        # 12 bold 5-min/hour ticks
            enabled: true
            color: cc_ticks_major                     # defaults to border_color
            rounded: false
            width: l
            length: m
          hour_hand:
            style: baton     # baton | line | lollipop | sbb 
            color: cc_hands   # defaults to foreground
            center_style: circle # circle | round | none
            extend: 0% # extend hand to other side, max 50%
          minute_hand:
            style: baton
            color: cc_hands   # defaults to foreground
            center_style: circle # circle | round | none
            extend: 0% # extend hand to other side, max 50%
          second_hand:
            style: line     # thin line + round "blob" partway along it
            color: cc_second     # defaults to red
            center_style: circle # circle | round | none
            extend: 20% # extend hand to other side, max 50%

# Refresh the date text. It only changes once a day, so a slow interval is
# plenty; the first tick fills it in shortly after boot / time sync.
interval:
  - interval: 30s
    then:
      - lvgl.label.update:
          id: date_label
          text: !lambda |-
            auto t = id(clock_time).now();
            if (!t.is_valid())
              return std::string("");
            return t.strftime("%d %b");