example.yaml

external_components:
  - source: github://renggli/esphome-clock
  - source:
      type: local
      path: components

packages:
  matrix_fonts: !include assets/fonts/matrix.yaml
  spleen_fonts: !include assets/fonts/spleen.yaml
  material_colors: !include assets/colors/material.yaml
  weather_images: !include assets/weather/weather.yaml
  hardware_config: !include common/hardware.yaml
  display_config: !include common/display.yaml

# Homeassistant
time:
  - platform: homeassistant
    id: current_time

# Text
text:
  - platform: template
    id: message
    name: "Message"
    mode: text
    restore_value: true
    initial_value: ""
    set_action:
      - lambda: id(message_text_element).set_text(x);
esphome:
  on_boot:
    priority: -100
    then:
      - lambda: |-
          auto text = id(message)->state;
          id(message)->publish_state(text);
          id(message_text_element).set_text(text);
  includes:
    - assets/weather/weather.h

# Sensors
sensor:
  # External Sensors
  - id: outside_temperature
    platform: homeassistant
    entity_id: sensor.zurich_wiedikon_air_temperature
    on_value:
      then:
        - lambda: |-
            const float min = 0, max = 40;
            uint8_t hue = remap<int, float>(clamp(x, min, max), min, max, 0x80, 0xff);
            id(outside_temperature_text_element).set_color(ESPHSVColor(hue, 0xff, 0xff).to_rgb());
            id(outside_temperature_text_element).set_text(str_snprintf("%.1f °C", 12, x));
  - id: inside_temperature
    platform: homeassistant
    entity_id: sensor.average_home_temperature
    on_value:
      then:
        - lambda: |-
            const float min = 20, max = 30;
            uint8_t hue = remap<int, float>(clamp(x, min, max), min, max, 0x80, 0xff);
            id(inside_temperature_text_element).set_color(ESPHSVColor(hue, 0xff, 0xff).to_rgb());
            id(inside_temperature_text_element).set_text(str_snprintf("%.1f °C", 12, x));
  - id: outside_particles
    platform: homeassistant
    entity_id: sensor.zurich_wiedikon_pm2_5_to_10
    on_value:
      then:
        - lambda: |-
            if (x >= 0) {
              const float min = 2, max = 20;
              uint8_t hue = remap<int, float>(clamp(x, min, max), min, max, 0x2f, 0x00);
              id(outside_particles_text_element).set_color(ESPHSVColor(hue, 0xff, 0xff).to_rgb());
              id(outside_particles_text_element).set_text(str_snprintf("%.1f", 12, x));
            } else {
              id(outside_particles_text_element).set_color(id(blue_gray_500));
              id(outside_particles_text_element).set_text("n/a");
            }
  - id: inside_particles
    platform: homeassistant
    entity_id: sensor.apollo_air_1_pm_10_m_weight_concentration
    on_value:
      then:
        - lambda: |-
            if (x >= 0) {
              const float min = 2, max = 20;
              uint8_t hue = remap<int, float>(clamp(x, min, max), min, max, 0x2f, 0x00);
              id(inside_particles_text_element).set_color(ESPHSVColor(hue, 0xff, 0xff).to_rgb());
              id(inside_particles_text_element).set_text(str_snprintf("%.1f", 12, x));
            } else {
              id(inside_particles_text_element).set_color(id(blue_gray_500));
              id(inside_particles_text_element).set_text("n/a");
            }
  - id: sun_azimuth
    platform: homeassistant
    entity_id: sensor.sun_solar_azimuth
  - id: sun_elevation
    platform: homeassistant
    entity_id: sensor.sun_solar_elevation
  - id: moon_azimuth
    platform: homeassistant
    entity_id: sensor.zurich_moon_azimuth
  - id: moon_elevation
    platform: homeassistant
    entity_id: sensor.zurich_moon_altitude
  - id: moon_illumination
    platform: homeassistant
    entity_id: sensor.zurich_moon_illumination_fraction
  - id: wind_direction
    platform: homeassistant
    entity_id: sensor.zurich_wiedikon_wind_direction
  - id: wind_speed
    platform: homeassistant
    entity_id: sensor.zurich_wiedikon_wind_speed_scalar
text_sensor:
  # External Sensors
  - platform: homeassistant
    entity_id: sensor.weather_condition_0h
    id: weather_condition_0h
    on_value:
      then:
        lambda: set_weather_image(id(weather_condition_0h_image), x);
  - platform: homeassistant
    entity_id: sensor.weather_condition_1h
    id: weather_condition_1h
    on_value:
      then:
        lambda: set_weather_image(id(weather_condition_1h_image), x);
  - platform: homeassistant
    entity_id: sensor.weather_condition_2h
    id: weather_condition_2h
    on_value:
      then:
        lambda: set_weather_image(id(weather_condition_2h_image), x);
  - platform: homeassistant
    entity_id: sensor.weather_condition_3h
    id: weather_condition_3h
    on_value:
      then:
        lambda: set_weather_image(id(weather_condition_3h_image), x);
  - platform: homeassistant
    entity_id: sensor.weather_condition_4h
    id: weather_condition_4h
    on_value:
      then:
        lambda: set_weather_image(id(weather_condition_4h_image), x);
  - platform: homeassistant
    entity_id: sensor.weather_condition_5h
    id: weather_condition_5h
    on_value:
      then:
        lambda: set_weather_image(id(weather_condition_5h_image), x);
  - platform: homeassistant
    entity_id: sensor.weather_condition_6h
    id: weather_condition_6h
    on_value:
      then:
        lambda: set_weather_image(id(weather_condition_6h_image), x);
  - platform: homeassistant
    entity_id: sensor.weather_condition_1d
    id: weather_condition_1d
    on_value:
      then:
        lambda: set_weather_image(id(weather_condition_1d_image), x);
  - platform: homeassistant
    entity_id: sensor.weather_condition_2d
    id: weather_condition_2d
    on_value:
      then:
        lambda: set_weather_image(id(weather_condition_2d_image), x);
  - platform: homeassistant
    entity_id: sensor.weather_condition_3d
    id: weather_condition_3d
    on_value:
      then:
        lambda: set_weather_image(id(weather_condition_3d_image), x);
  - platform: homeassistant
    entity_id: sensor.weather_condition_4d
    id: weather_condition_4d
    on_value:
      then:
        lambda: set_weather_image(id(weather_condition_4d_image), x);
  - platform: homeassistant
    id: calendar_current_event
    entity_id: sensor.current_event
    on_value:
      then:
        - lambda: id(calendar_current_event_text_element).set_text(x);
  - platform: homeassistant
    id: calendar_upcoming_event
    entity_id: sensor.upcoming_event
    on_value:
      then:
        - lambda: id(calendar_next_event_text_element).set_text(x);
  - platform: homeassistant
    id: dishwasher_status
    entity_id: sensor.dishwasher_status
    on_value:
      then:
        - lambda: |-
            id(dishwasher_status_text_element).set_text(x == "standby" ? "" : x);
  - platform: homeassistant
    id: dishwasher_notification
    entity_id: sensor.dishwasher_notification
    on_value:
      then:
        - lambda: id(dishwasher_notification_text_element).set_text(x);

# Timer
timer:
  id: default_timer
  duration:
    name: Timer Duration
  start:
    name: Timer Start
  pause:
    name: Timer Pause
  stop:
    name: Timer Stop
  state:
    name: Timer State
  remaining:
    name: Timer Remaining

elements:
  id: elements_display
  display: led_display
  element:
    type: random
    id: primary_elements
    elements:
      # Message
      - type: static_text
        id: message_text_element
        font: font_spleen_5x8
        scroll_mode: LEFT_TO_RIGHT
        scroll_speed: 24 # pixel per second
        color: purple_500
        on_complete:
          - then:
              - elements.next: primary_elements
      # Time and Date
      - type: timeout
        duration: 10s
        on_complete:
          - then:
              - elements.next: primary_elements
        element:
          type: vertical
          elements:
            - type: time_text
              time: current_time
              font: font_matrix_chunky_6
              color: light_blue_900
              format: "%a %e" # abbr weekday name, day of month
            - type: time_text
              time: current_time
              font: font_matrix_chunky_6
              color: cyan_700
              format: "%b %Y" # abbr month name, year
            - type: time_text
              time: current_time
              font: font_matrix_chunky_6
              color: teal_500
              format: "%H:%M:%S"
      # Weather
      - type: timeout
        duration: 10s
        on_complete:
          - then:
              - elements.next: primary_elements
              - elements.next: weather_sequence
        element:
          type: sequence
          id: weather_sequence
          elements:
            - type: image
              id: weather_condition_0h_image
            - type: vertical
              elements:
                - type: horizontal
                  elements:
                    - type: image
                      id: weather_condition_1h_image
                      scale: 0.3
                    - type: image
                      id: weather_condition_2h_image
                      scale: 0.3
                    - type: image
                      id: weather_condition_3h_image
                      scale: 0.3
                - type: horizontal
                  elements:
                    - type: image
                      id: weather_condition_4h_image
                      scale: 0.3
                    - type: image
                      id: weather_condition_5h_image
                      scale: 0.3
                    - type: image
                      id: weather_condition_6h_image
                      scale: 0.3
            - type: vertical
              elements:
                - type: horizontal
                  elements:
                    - type: image
                      id: weather_condition_1d_image
                      scale: 0.5
                    - type: image
                      id: weather_condition_2d_image
                      scale: 0.5
                - type: horizontal
                  elements:
                    - type: image
                      id: weather_condition_3d_image
                      scale: 0.5
                    - type: image
                      id: weather_condition_4d_image
                      scale: 0.5
      # Calendar
      - type: timeout
        duration: 10s
        on_complete:
          - then:
              - elements.next: primary_elements
        element:
          type: vertical
          active_mode: any
          elements:
            - type: static_text
              id: calendar_current_event_text_element
              font: font_spleen_5x8
              color: lime_800
              scroll_mode: LEFT_TO_RIGHT
            - type: static_text
              id: calendar_next_event_text_element
              font: font_spleen_5x8
              color: green_800
              scroll_mode: LEFT_TO_RIGHT
      # Dishwasher
      - type: timeout
        duration: 10s
        on_complete:
          - then:
              - elements.next: primary_elements
        element:
          type: vertical
          active_mode: any
          elements:
            - type: static_text
              id: dishwasher_status_text_element
              font: font_spleen_5x8
              color: indigo_800
              scroll_mode: LEFT_TO_RIGHT
            - type: static_text
              id: dishwasher_notification_text_element
              font: font_spleen_5x8
              color: indigo_800
              scroll_mode: LEFT_TO_RIGHT
      # Timer
      - type: timeout
        duration: 10s
        on_complete:
          - then:
              - elements.next: primary_elements
        element:
          type: dynamic_text
          font: font_matrix_chunky_6
          lambda: |-
            auto state = id(default_timer).get_state();
            if (state == "Stopped") return "";
            element.set_color(
              state == "Expired" ? id(red_500) :
              state == "Paused" ? id(blue_500) :
              id(blue_gray_500));
            int remaining = id(default_timer).get_remaining() / 1000;
            int seconds = remaining % 60;
            int minutes = (remaining - seconds) / 60;
            const char* sign = remaining >= 0 ? "" : "-";
            return str_snprintf("%s%d:%02d", 12, sign, abs(minutes), abs(seconds));
      # Temperature
      - type: timeout
        duration: 10s
        on_complete:
          - then:
              - elements.next: primary_elements
        element:
          type: vertical
          elements:
            - id: outside_temperature_text_element
              type: static_text
              font: font_matrix_chunky_8
            - id: inside_temperature_text_element
              type: static_text
              font: font_matrix_chunky_8
      # Particles
      - type: timeout
        duration: 10s
        on_complete:
          - then:
              - elements.next: primary_elements
        element:
          type: vertical
          elements:
            - id: outside_particles_text_element
              type: static_text
              font: font_matrix_chunky_8
            - id: inside_particles_text_element
              type: static_text
              font: font_matrix_chunky_8
      # Sun, Moon, and Wind
      - type: timeout
        duration: 10s
        on_complete:
          - then:
              - elements.next: primary_elements
        element:
          type: custom
          is_active: |-
            return (id(sun_azimuth).has_state() && id(sun_elevation).has_state() && id(sun_elevation).state > 0)
                || (id(moon_azimuth).has_state() && id(moon_elevation).has_state() && id(moon_elevation).state > 0)
                || (id(wind_direction).has_state() && id(wind_speed).has_state());
          draw: |-
            const float offset = 3;
            int center_x = display.get_width() / 2;
            int center_y = display.get_height() / 2;
            int radius = std::min(center_x, center_y) - offset;
            bool has_sun = id(sun_azimuth).has_state()
                        && id(sun_elevation).has_state()
                        && id(sun_elevation).state > 0;
            bool has_moon = id(moon_azimuth).has_state()
                        && id(moon_elevation).has_state()
                        && id(moon_elevation).state > 0;
            bool has_wind = id(wind_direction).has_state()
                        && id(wind_speed).has_state();
            // draw sun
            if (has_sun) {
              float azimuth = id(sun_azimuth).state - 90;
              float elevation = id(sun_elevation).state;
              float pos_r = radius * remap(cos(radians(elevation)), 0.0, 1.0, 0.5, 1.0);
              int pos_x = (pos_r * cos(radians(azimuth))) + center_x;
              int pos_y = (pos_r * sin(radians(azimuth))) + center_y;
              display.filled_circle(pos_x, pos_y, offset, id(yellow_500));
              display.printf(center_x, center_y + 1, id(font_matrix_chunky_6),
                id(yellow_500), TextAlign::TOP_CENTER, "%.0f°", elevation);
            }
            // draw moon
            if (has_moon) {
              float azimuth = id(moon_azimuth).state - 90;
              float elevation = id(moon_elevation).state;
              float pos_r = radius * remap(cos(radians(elevation)), 0.0, 1.0, 0.5, 1.0);
              int pos_x = (pos_r * cos(radians(azimuth))) + center_x;
              int pos_y = (pos_r * sin(radians(azimuth))) + center_y;
              if (id(moon_illumination).has_state()) {
                uint8_t value = remap<int, float>(id(moon_illumination).state, 0.0, 100.0, 0x00, 0xff);
                display.filled_circle(pos_x, pos_y, offset, ESPHSVColor(0x00, 0x00, value).to_rgb());
              }
              display.circle(pos_x, pos_y, offset, id(gray_500));
              if (!has_sun) {
                display.printf(center_x, center_y - 1, id(font_matrix_chunky_6),
                  id(gray_500), TextAlign::TOP_CENTER, "%.0f°", elevation);
              }
            }
            // draw wind
            if (id(wind_direction).has_state() && id(wind_speed).has_state()) {
              for (int i = -1; i <= 1; i++) {
                float angle = id(wind_direction).state + 10 * i - 90;
                display.line_at_angle(center_x, center_y, angle,
                    radius - offset, radius + offset, id(light_blue_500));
              }
              display.printf(center_x, center_y - offset, id(font_matrix_chunky_6),
                  id(light_blue_500), TextAlign::BOTTOM_CENTER, "%.0f", id(wind_speed).state);
            }
      # Analog Clock
      - type: timeout
        duration: 10s
        on_complete:
          - then:
              - elements.next: primary_elements
        element:
          type: clock
          time: current_time
          minute_markers:
            color: blue_800
          hour_markers:
            color: blue_800
          quarter_markers:
            color: blue_800
          second_hand:
            color: red_800
          minute_hand:
            color: gray_300
          hour_hand:
            color: gray_300
      # Animations
      - type: timeout
        duration: 20s
        on_complete:
          - then:
              - elements.next: primary_elements
              - elements.next: animation_sequence
        element:
          type: random
          id: animation_sequence
          elements: !include common/animations.yaml