esp32-weatherstation/common/display.yaml

# display #250x122 pixels (250x128)
font:
  - file: 'fonts/Vera.ttf'
    id: font1
    size: 10
    glyphs: '!"%()+=,-_.:°0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz/²³µΩ'
  - file: 'fonts/Vera.ttf'
    id: font2
    size: 20
#  - file: 'fonts/VeraMono.ttf'
#    id: font3
#    size: 10
  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: icon_font
    size: 48
    glyphs:
      - "\U000F0590" # weather-cloudy
      - "\U000F0F2F" # weather-cloudy-alert
      - "\U000F0E6E" # weather-cloudy-arrow-right
      - "\U000F0591" # weather-fog
      - "\U000F0592" # weather-hail
      - "\U000F0F30" # weather-hazy
      - "\U000F0898" # weather-hurricane
      - "\U000F0593" # weather-lightning
      - "\U000F067E" # weather-lightning-rainy
      - "\U000F0594" # weather-night
      - "\U000F0F31" # weather-night-partly-cloudy
      - "\U000F0595" # weather-partly-cloudy
      - "\U000F0F32" # weather-partly-lightning
      - "\U000F0F33" # weather-partly-rainy
      - "\U000F0F34" # weather-partly-snowy
      - "\U000F0F35" # weather-partly-snowy-rainy
      - "\U000F0596" # weather-pouring
      - "\U000F0597" # weather-rainy
      - "\U000F0598" # weather-snowy
      - "\U000F0F36" # weather-snowy-heavy
      - "\U000F067F" # weather-snowy-rainy
      - "\U000F0599" # weather-sunny
      - "\U000F0F37" # weather-sunny-alert
      - "\U000F14E4" # weather-sunny-off
      - "\U000F059A" # weather-sunset
      - "\U000F059B" # weather-sunset-down
      - "\U000F059C" # weather-sunset-up
      - "\U000F0F38" # weather-tornado
      - "\U000F059D" # weather-windy
      - "\U000F059E" # weather-windy-variant

display:
  - platform: waveshare_epaper
    cs_pin: 14
    dc_pin: 27
    reset_pin: 33
    model: 2.13in-ttgo
    rotation: 90
    update_interval: 60s
    full_update_every: 1
    id: my_display
    pages:
      - id: page1
        lambda: |-
          it.print(10, 50, id(font2), "esp32weatherstation2");
      - id: page2
        lambda: |-
          it.print(5, 6, id(font1), "${node_name}");
          it.strftime(150, 6, id(font1), "%Y-%m-%d %H:%M", id(sntp_time).now());
          it.line(0, 20, 250, 20);
          it.filled_rectangle(0, 20, 70, 122, COLOR_ON);
          it.line(0, 56, 70, 56, COLOR_OFF);
          it.line(0, 92, 70, 92, COLOR_OFF);
          if (id(temperature).state) {
            it.printf(2, 21+4, id(font2), COLOR_OFF, "%.1f", id(temperature).state); it.printf(55, 21+4, id(font1), COLOR_OFF, "°C");
            it.printf(2, 57+4, id(font2), COLOR_OFF, "%.1f", id(humidity).state);  it.printf(55, 57+4, id(font1), COLOR_OFF, "%%");
            if (id(humidity).state < 30) {
              it.printf(30, 80, id(font1), COLOR_OFF, "low");
            } else if (id(humidity).state < 60) {
              it.printf(30, 80, id(font1), COLOR_OFF, "comfort");
            } else {
              it.printf(30, 80, id(font1), COLOR_OFF, "high");
            }
            it.printf(2, 93+4, id(font2), COLOR_OFF, "%.0f", id(pressure_sealevel).state); it.printf(55, 93+4, id(font1), COLOR_OFF, "hPa");
            it.graph(70, 21, id(temperature_graph));
            it.graph(70, 57, id(humidity_graph));
            it.graph(70, 93, id(pressure_graph));
          }
          if (id(weather_icon).has_state()) {
              it.printf(133, 51, id(icon_font), weather_icon_map[id(weather_icon).state.c_str()].c_str());
          }
          it.printf(133, 21, id(font1), "Temp Out: %.1f°C", id(temperature_outside).state);
          if (id(iaq_accuracy).state == 3) {
            it.printf(133, 31, id(font1), "IAQ  : %.0f ", id(iaq).state);
            if (id(iaq).state < 50) {
              it.printf(133, 41, id(font1), "excellent");
            } else if (id(iaq).state < 100) {
              it.printf(133, 41, id(font1), "fine");
            } else if (id(iaq).state < 150) {
              it.printf(133, 41, id(font1), "moderate");
            } else if (id(iaq).state < 200) {
              it.printf(133, 41, id(font1), "poor");
            } else if (id(iaq).state < 300) {
              it.printf(133, 41, id(font1), "very poor");
            } else if (id(iaq).state < 500) {
              it.printf(133, 41, id(font1), "severe");
            }
          } else {
            it.printf(133, 31, id(font1), "VOC  : %.1f k\u03A9", id(voc).state);
          }
#          it.printf(133, 21, id(font1), "PM2.5: %.1f", id(pm2).state);
#          it.printf(133, 31, id(font1), "PM10 : %.1f", id(pm10).state);
#          it.printf(133, 51, id(font1), "Lux  : %.1f lx", id(lux).state);          
#          it.printf(133, 61, id(font1), "UVI  : %.1f", id(uva).state);
#          it.printf(133, 71, id(font1), "UVA  : %.1f", id(uva).state);
#          it.printf(133, 81, id(font1), "UVB  : %.1f", id(uvb).state);

interval:
  - interval: 30s
    then:
      - if:
          condition:
            - display.is_displaying_page: page1
          then:
            - display.page.show: page2
            - component.update: my_display

graph:
  # Show bare-minimum auto-ranged graph
  - id: temperature_graph
    duration: 1h
    width: 60
    height: 35
    traces:
      - sensor: temperature
        line_type: SOLID
        line_thickness: 2
      - sensor: temperature_outside
        line_type: DASHED
        line_thickness: 1
  - id: humidity_graph
    sensor: humidity
    duration: 1h
    width: 60
    height: 35
  - id: pressure_graph
    sensor: pressure
    duration: 1h
    width: 60
    height: 35

# Example configuration entry
sensor:
  - platform: homeassistant
    name: "Temperature OpenWeatherMap"
    internal: true
    entity_id: sensor.openweathermap_temperature
    id: temperature_outside

text_sensor:
  - platform: homeassistant
    id: weather_icon
    internal: true
    entity_id:  weather.openweathermap