# lvgl_clock - style: seg_matrix. Big HH:MM digits drawn on a fixed 6x24 grid
# of small 7-segment displays, using the hand-crafted segment font from the
# hackaday "7-segment display array clock". Best on a WIDE panel (the grid is
# 24x6 = 4:1); on a squarer display the small displays get large and spaced out.
# Compile:  esphome compile examples/example_seg_matrix.yaml

esphome:
  name: lvgl-clock-seg-matrix

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

color:
  - id: cc_seg_off
    red: 17%
    green: 4%
    blue: 3%

lvgl:
  widgets:
    - lvgl_clock:
        id: dc
        time_id: clock_time
        width: ${clock_width}
        height: ${clock_height}
        align: CENTER
        style: seg_matrix
        foreground: cc_hands          # lit small segments
        background: cc_bg
        seg_matrix:
          segment_style: classic      # classic | rounded - shape of each small segment
          off_color: cc_seg_off       # the unlit "ghost" grid