Use ESPHome with e-ink Displays to blend in with your home decor!

rcblackwell · October 20, 2023, 12:28pm

Thanks for the assistance @sloma. Unfortunately that didn’t resolve the issue;

Binary Sensor Error

Despite the error I tried reloading Templates but an error occurs;

Logger: homeassistant.config
Source: config.py:501
First occurred: 8:18:46 AM (1 occurrences)
Last logged: 8:18:46 AM

Invalid config for [template]: [platform] is an invalid option for [template]. Check: template->binary_sensor->0->platform. (See /config/templates.yaml, line 111).

Here’s my full templates.yaml file;

###################################################
# "Outdoor Temperature Feels Like" Configuration  #
###################################################
- sensor:
    - name: "Feels Like"
      device_class: temperature
      unit_of_measurement: "°C"
      state: >
        {% if not is_state('sensor.stratford_humidex', 'unknown') %}
          {{ states('sensor.stratford_humidex') }}
        {% elif not is_state('sensor.stratford_wind_chill', 'unknown') %}
          {{ states('sensor.stratford_wind_chill') }}
        {% else %}
          {{ states('sensor.stratford_temperature') | round(0) }}
        {% endif %}

#####################################
# "Rain in 48 Hours" Configuration  #
#####################################
- binary_sensor:
    - name: "Percipitation"
      device_class: moisture
      state: "{{ 'rainy' in (state_attr('weather.stratford','forecast')|map(attribute='condition')|list)[:2] }}"
      icon: mdi:weather-rainy

###############################
# "Weatherman" Configuration  #
###############################
- trigger:
    platform: time_pattern
    minutes: "/1"
  sensor:
    - name: Weatherman Data
      state: "OK"
      attributes:
        weather_condition_now: >
          {% set cond_now = states('weather.stratford_hourly') %}
          {% if states('sun.sun') == 'below_horizon' %}
              {% if cond_now == 'sunny' %} night {% elif cond_now == 'partlycloudy' %} night-partly-cloudy {% else %} {{ cond_now }} {% endif %}
          {% else %}
              {{ cond_now }}
          {% endif %}

        weather_condition_0: >
          {% set cond0 = state_attr('weather.stratford_hourly', 'forecast')[0].condition %}
          {% set next_setting = as_timestamp(state_attr('sun.sun', 'next_setting')) %}
          {% set next_rising = as_timestamp(state_attr('sun.sun', 'next_rising')) %}
          {% set cond0_time = as_timestamp(state_attr('weather.stratford_hourly', 'forecast')[0].datetime) %}
          {% if cond0_time < next_rising and next_rising < next_setting %}
              {% if cond0 == 'sunny' %} night {% elif cond0 == 'partlycloudy' %} night-partly-cloudy {% else %} {{ cond0 }} {% endif %}
          {% else %}
              {{ cond0 }}
          {% endif %}
        weather_temperature_0: >
          {{ state_attr('weather.stratford_hourly', 'forecast')[0].temperature | round }}
        weather_timestamp_0: >
          {{ as_timestamp(state_attr('weather.stratford_hourly', 'forecast')[0].datetime) | timestamp_custom('%I') | int }} {{ as_timestamp(state_attr('weather.stratford_hourly', 'forecast')[0].datetime) | timestamp_custom('%p') }}

        weather_condition_1: >
          {% set cond1 = state_attr('weather.stratford_hourly', 'forecast')[1].condition %}
          {% set next_setting = as_timestamp(state_attr('sun.sun', 'next_setting')) %}
          {% set next_rising = as_timestamp(state_attr('sun.sun', 'next_rising')) %}
          {% set cond1_time = as_timestamp(state_attr('weather.stratford_hourly', 'forecast')[1].datetime) %}
          {% if cond1_time < next_rising and next_rising < next_setting %}
              {% if cond1 == 'sunny' %} night {% elif cond1 == 'partlycloudy' %} night-partly-cloudy {% else %} {{ cond1 }} {% endif %}
          {% else %}
              {{ cond1 }}
          {% endif %}
        weather_temperature_1: >
          {{ state_attr('weather.stratford_hourly', 'forecast')[1].temperature | round }}
        weather_timestamp_1: >
          {{ as_timestamp(state_attr('weather.stratford_hourly', 'forecast')[1].datetime) | timestamp_custom('%I') | int }} {{ as_timestamp(state_attr('weather.stratford_hourly', 'forecast')[1].datetime) | timestamp_custom('%p') }}

        weather_condition_2: >
          {% set cond2 = state_attr('weather.stratford_hourly', 'forecast')[2].condition %}
          {% set next_setting = as_timestamp(state_attr('sun.sun', 'next_setting')) %}
          {% set next_rising = as_timestamp(state_attr('sun.sun', 'next_rising')) %}
          {% set cond2_time = as_timestamp(state_attr('weather.stratford_hourly', 'forecast')[2].datetime) %}
          {% if cond2_time < next_rising and next_rising < next_setting %}
              {% if cond2 == 'sunny' %} night {% elif cond2 == 'partlycloudy' %} night-partly-cloudy {% else %} {{ cond2 }} {% endif %}
          {% else %}
              {{ cond2 }}
          {% endif %}
        weather_temperature_2: >
          {{ state_attr('weather.stratford_hourly', 'forecast')[2].temperature | round }}
        weather_timestamp_2: >
          {{ as_timestamp(state_attr('weather.stratford_hourly', 'forecast')[2].datetime) | timestamp_custom('%I') | int }} {{ as_timestamp(state_attr('weather.stratford_hourly', 'forecast')[2].datetime) | timestamp_custom('%p') }}

        weather_condition_3: >
          {% set cond3 = state_attr('weather.stratford_hourly', 'forecast')[3].condition %}
          {% set next_setting = as_timestamp(state_attr('sun.sun', 'next_setting')) %}
          {% set next_rising = as_timestamp(state_attr('sun.sun', 'next_rising')) %}
          {% set cond3_time = as_timestamp(state_attr('weather.stratford_hourly', 'forecast')[3].datetime) %}
          {% if cond3_time < next_rising and next_rising < next_setting %}
              {% if cond3 == 'sunny' %} night {% elif cond3 == 'partlycloudy' %} night-partly-cloudy {% else %} {{ cond3 }} {% endif %}
          {% else %}
              {{ cond3 }}
          {% endif %}
        weather_temperature_3: >
          {{ state_attr('weather.stratford_hourly', 'forecast')[3].temperature | round }}
        weather_timestamp_3: >
          {{ as_timestamp(state_attr('weather.stratford_hourly', 'forecast')[3].datetime) | timestamp_custom('%I') | int }} {{ as_timestamp(state_attr('weather.stratford_hourly', 'forecast')[3].datetime) | timestamp_custom('%p') }}

- sensor:
    - name: "Sunrise time"
      unique_id: sunrise_time
      state: "{{ as_timestamp(state_attr('sun.sun', 'next_rising')) | timestamp_custom('%I:%M') }}"
    - name: "Sunset time"
      unique_id: sunset_time
      state: "{{ as_timestamp(state_attr('sun.sun', 'next_setting')) | timestamp_custom('%I:%M') }}"

- binary_sensor:
    - platform: trend
      sensors:
        outside_temperature:
          entity_id: sensor.stratford_temperature
          friendly_name: "Temperature Trend"
          max_samples: 60
          sample_duration: 10800

        atmospheric_pressure:
          entity_id: sensor.stratford_pressure
          friendly_name: "Pressure Trend"
          max_samples: 60
          sample_duration: 21600

Is there anything within the file that might be causing the error?

rcblackwell · October 20, 2023, 2:40pm

@sloma , I figured out another way to create the binary_sensors; adding a “binary_sensor: !include” statement in the configuration.yaml file and creating the binary_sensors in a binary_sensors.yaml file.

skybarberom · November 28, 2023, 2:03pm

I have a setup running for several months that refreshes every 20 minutes. Lately, after some days of running, the blacks look faded. If I unplug the power for some hours and I reconnect it, the blacks return to be real blacks for some days. Any idea on how to avoid that behavior?

Zinken · November 28, 2023, 7:30pm

I had the same problem, I believe they made some changes to 7.50inV2alt
So try that one if you haven’t already

Edwin_D · November 28, 2023, 7:37pm

There’s also a thing in the docs that the busy pin should be set to inverted in the yaml for some screens. It determines if the screen is powered down when inactive. If it isn’t the display may be damaged.

I have a problem with that though because I do not know if that is true for all driver boards. For me it looks like the power consumption is increased if I do set the inverted flag.

skybarberom · November 28, 2023, 8:59pm

Do you mean change the model to 7.50inV2alt in this section?

display:
  - platform: waveshare_epaper
    cs_pin: GPIO15
    dc_pin: GPIO27
    busy_pin: GPIO25
    reset_pin: GPIO26
    model: 7.50inV2
    update_interval: 1200s
    rotation: 90°
    auto_clear_enabled: True
    lambda: |-```

Zinken · November 28, 2023, 9:41pm

Yeah, precisely

Edwin_D · November 28, 2023, 9:45pm

And I was talking about the red warning on this page, which is not followed in your config:

Warning
The BUSY pin on the gdew0154m09 and Waveshare 7.50in V2 models must be inverted to prevent permanent display damage. Set the pin to inverted: true in the config.

But to make matters worse: as far as I can tell this is contradicted by the table in the following page:

skybarberom · November 30, 2023, 8:49am

Are you connecting the screen with the driver board?

When I did the project several months ago I haven’t seen the warning, but with the alt version seems better so far. Waiting some more days to confirm

Edwin_D · November 30, 2023, 1:39pm

Yes I am using the official waveshare driver board. But I use a V3 version screen with 3 colors. Color isn’t supported by the official version, so I use a modified version. It has problems with fading contrast on the left side after some time too. I need to check if the modified version has an alt implementation with red.

github.com/esphome/feature-requests

Support for Waveshare Three-color E-Ink Displays

opened 11:05AM - 21 May 19 UTC

ASMfreaK

integration: waveshare_epaper alternative-offered

**Describe the problem you have/What new integration you would like** References #77. I've got Waveshare's 3-color e-ink display and it would be nice to have some support for them. [7.50in B-type (red-black-white)](https://ru.aliexpress.com/item/32833394373.html?spm=a2g0o.detail.1000060.2.2d6d1d21V2XsDy&gps-id=pcDetailBottomMoreThisSeller&scm=1007.13339.90158.0&scm_id=1007.13339.90158.0&scm-url=1007.13339.90158.0&pvid=aa7eec38-bdc7-404c-9f1a-b868ff81eb96) [7.50in C-type (yellow-black-white)](https://ru.aliexpress.com/item/32853240062.html?spm=a2g0o.detail.1000060.3.202231e9uDDrFP&gps-id=pcDetailBottomMoreThisSeller&scm=1007.13339.90158.0&scm_id=1007.13339.90158.0&scm-url=1007.13339.90158.0&pvid=035911c4-2516-43b8-b02c-7fe7b2b987a3) **Please describe your use case for this integration and alternatives you've tried:** **Additional context**

If the alt version has the faster refresh of the official v3 implementation then red won’t work, as it seems to skip the refresh bits associated with the black/red combination (as wel as worse contrast).

skybarberom · November 30, 2023, 4:59pm

I have a colleague with the 3 color version. I will try to ask him if he has problems with the fading.
Mine (B&W) seems doing better with the alt version. The refresh seems a bit slower but so far black is consistent.

rodgers86 · December 3, 2023, 10:52pm

I’ve got mine working. 7.5v2alt

However just noticed that in the documents about setting the busy pin as inverted: true

I’ve not set that currently and I’m unsure if I should or not!!

Edwin_D · December 4, 2023, 7:08am

Me too. Haven’t had time to do a proper check. Only thing I could think of is measure power use over time with inverted on and off, and try to spot the difference. But that is also flawed, because if the number of refreshes in that period is different, there’s no way to tell, uless the more power hungry has less refreshes. And I don’t know enough about the hardware to fully understand the documentation.

Johan71 · December 5, 2023, 9:29am

Does anyone have an example xx.yaml when using local sensors from a weather station or similar.

Johan71 · December 5, 2023, 7:53pm

what am I missing, most sensors have a value?

skybarberom · December 6, 2023, 10:47am

can you post your yaml? Have you inserted the sensor you want to use in the code?
I’ve never seen that screen

Johan71 · December 6, 2023, 11:34am

Consider this a first attempt.

# WEATHERMAN DASHBOARD
# For Home Assistant and ESPHome
# Designed by Madelena Mak 2022 - https://mmak.es

# Cue "Blame it on the Weatherman" by B*Witched!
esphome:
  name: "weatherman"

esp32:
  board: esp32dev
  framework:
    type: arduino

# Enable logging
logger:

# Enable Home Assistant API
api:
  encryption:
    key: "eu4AYx/ULTbnLJsqxYGkHXd348qto5PYYLgFFU4yBxk="

ota:
  password: "123a445cc19374af1bcb407ff6720ab9"

# Wifi information
wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "Esphome-Web-e-ink"
    password: !secret fallback_password

web_server:
  port: 80
  include_internal: True

# Include time
time:
  - platform: homeassistant
    id: esptime

#Include sun
sun:
  latitude: XXXX
  longitude: XXXX

# Include custom fonts
font:
  - file: 'fonts/GothamRnd-Book.ttf'
    id: font_small_book
    size: 18
  - file: 'fonts/GothamRnd-Bold.ttf'
    id: font_large_bold
    size: 108
    glyphs: [' ', '°', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'C',]
  - file: 'fonts/GothamRnd-Bold.ttf'
    id: font_time
    size: 90
    glyphs: [' ', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', ':']
  - file: 'fonts/GothamRnd-Book.ttf'
    id: font_weekday
    size: 30
  - file: 'fonts/GothamRnd-Book.ttf'
    id: font_day
    size: 65
    glyphs: [' ', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
  - file: 'fonts/GothamRnd-Bold.ttf'
    id: font_month
    size: 40
  - file: 'fonts/GothamRnd-Bold.ttf'
    id: font_medium_bold
    size: 40
    #glyphs: [' ', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'M', 'I', 'N']
  - file: 'fonts/GothamRnd-Bold.ttf'
    id: font_small_bold
    size: 18
    # glyphs: ['°', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'C', 'M', 'I', 'N']

  # Include Material Design Icons font
  # Thanks to https://community.home-assistant.io/t/display-materialdesign-icons-on-esphome-attached-to-screen/199790/16
  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: font_mdi_large
    size: 96
    glyphs: &mdi-weather-glyphs
      - "\U000F0590" # mdi-weather-cloudy
      - "\U000F0F2F" # mdi-weather-cloudy-alert
      - "\U000F0E6E" # mdi-weather-cloudy-arrow-right
      - "\U000F0591" # mdi-weather-fog
      - "\U000F0592" # mdi-weather-hail
      - "\U000F0F30" # mdi-weather-hazy
      - "\U000F0898" # mdi-weather-hurricane
      - "\U000F0593" # mdi-weather-lightning
      - "\U000F067E" # mdi-weather-lightning-rainy
      - "\U000F0594" # mdi-weather-night
      - "\U000F0F31" # mdi-weather-night-partly-cloudy
      - "\U000F0595" # mdi-weather-partly-cloudy
      - "\U000F0F32" # mdi-weather-partly-lightning
      - "\U000F0F33" # mdi-weather-partly-rainy
      - "\U000F0F34" # mdi-weather-partly-snowy
      - "\U000F0F35" # mdi-weather-partly-snowy-rainy
      - "\U000F0596" # mdi-weather-pouring
      - "\U000F0597" # mdi-weather-rainy
      - "\U000F0598" # mdi-weather-snowy
      - "\U000F0F36" # mdi-weather-snowy-heavy
      - "\U000F067F" # mdi-weather-snowy-rainy
      - "\U000F0599" # mdi-weather-sunny
      - "\U000F0F37" # mdi-weather-sunny-alert
      - "\U000F14E4" # mdi-weather-sunny-off
      - "\U000F059A" # mdi-weather-sunset
      - "\U000F059B" # mdi-weather-sunset-down
      - "\U000F059C" # mdi-weather-sunset-up
      - "\U000F0F38" # mdi-weather-tornado
      - "\U000F059D" # mdi-weather-windy
      - "\U000F059E" # mdi-weather-windy-variant
      - "\U000F058E" # mdi-water-percent
      - "\U000F04C5" # mdi-spedometer
      - "\U000F0F29" # mdi-snowflake-alert
      - "\U000F15FA" # mdi-windsock
      - "\U000F19B3" # mdi-arrow-down-thin
      - "\U000F19B2" # mdi-arrow-up-thin
      - "\U000F19B4" # mdi-arrow-top-right-thin
      - "\U000F19B7" # mdi-arrow-bottom-right-thin
      - "\U000F00A5" # mdi-binoculars
      - "\U000F018C" # mdi-compass-outline
      - "\U000F05A9" # mdi-wifi
      - "\U000F0928" # mdi-wifi-strength-4
      - "\U000F0925" # mdi-wifi-strength-3 
      - "\U000F0922" # mdi-wifi-strength-2
      - "\U000F091F" # mdi-wifi-strength-1
      - "\U000F092B" # mdi-wifi-strength-alert-outline
      - "\U000F0079" # mdi-battery
      - "\U000F0082" # mdi-battery-90
      - "\U000F0081" # mdi-battery-80
      - "\U000F0080" # mdi-battery-70
      - "\U000F007F" # mdi-battery-60
      - "\U000F007E" # mdi-battery-50
      - "\U000F007D" # mdi-battery-40
      - "\U000F007C" # mdi-battery-30
      - "\U000F007B" # mdi-battery-20
      - "\U000F007A" # mdi-battery-10
      - "\U000F10CD" # mdi-battery-alert-variant-outline
      - "\U000F0E03" # mdi-thermometer-chevron-up
      - "\U000F0E02" # mdi-thermometer-chevron-down
      - "\U000F1A09" # mdi-triangle-small-down
      - "\U000F1A0A" # mdi-triangle-small-up
  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: font_mdi_medlarge
    size: 60
    glyphs:
      - "\U000F058E" # mdi-water-percent
      - "\U000F04C5" # mdi-spedometer
      - "\U000F0F29" # mdi-snowflake-alert
      - "\U000F15FA" # mdi-windsock
      - "\U000F0F61" # mdi-moon-first-quarter
      - "\U000F0F62" # mdi-moon-full
      - "\U000F0F63" # mdi-moon-last-quarter
      - "\U000F0F64" # mdi-moon-new
      - "\U000F0F65" # mdi-moon-waning-crescent
      - "\U000F0F66" # mdi-moon-waning-gibbous
      - "\U000F0F67" # mdi-moon-waxing-crescent
      - "\U000F0F68" # mdi-moon-waxing-gibbous
  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: font_mdi_medium
    size: 36
    glyphs: *mdi-weather-glyphs


# Include Custom Titles
image:
  - file: "images/weatherman-title-weather.png"
    id: title_weather
    type: BINARY


# Call Weather sensors from HA
sensor:
  # Temperature - My Weather station
  - platform: homeassistant
    entity_id: sensor.gw2000a_outdoor_temperature
    attribute: temperature
    id: weather_temperature
    
  # Humidity - My Weather station
  - platform: homeassistant
    entity_id: sensor.gw2000a_humidity
    attribute: humidity
    id: weather_humidity

  # Air pressure - My Weather station
  - platform: homeassistant
    entity_id: weather.smhi_home
    attribute: pressure
    id: weather_pressure

  # Wind Bearing - from Yr.no (built-in HA weather privider)
  - platform: homeassistant
    entity_id: weather.smhi_home
    attribute: wind_bearing
    id: wind_bearing

  # Battery % for Aqara sensor
  - platform: homeassistant
    entity_id: sensor.zigbeeweather_battery
    id: battery_percent
  # Battery Voltage for Aqara sensor
  - platform: homeassistant
    entity_id: sensor.zigbeeweather_battery
    attribute: voltage
    id: battery_voltage

  # Weatherman entities
  - platform: homeassistant
    entity_id: sensor.weather_temperature_0
    attribute: weather_temperature_0
    id: weather_temperature_0
  - platform: homeassistant
    entity_id: sensor.weatherman_data
#    attribute: weather_temperature_1
    id: weather_temperature_1
  - platform: homeassistant
    entity_id: sensor.weatherman_data
 #   attribute: weather_temperature_2
    id: weather_temperature_2
  - platform: homeassistant
    entity_id: sensor.weatherman_data
#    attribute: weather_temperature_3
    id: weather_temperature_3

  # Strong Wind
  - platform: homeassistant
    entity_id: sensor.smhi_home
    id: wind_warning
  # Wind Speed 
  - platform: homeassistant
    entity_id: sensor.smhi_home
    attribute: wind_speed
    id: wind_speed
  # UV Index
  - platform: homeassistant
    entity_id: sensor.gw2000a_uv_index
    id: uv_index
  # WiFi Signal     
  - platform: wifi_signal
    name: "WiFi Signal Sensor"
    id: wifisignal
    update_interval: 360s


text_sensor:
  # Pressure Trend
  - platform: homeassistant
    entity_id: binary_sensor.atmospheric_pressure
    id: pressure_trend
  # Temp Trend
  - platform: homeassistant
    entity_id: binary_sensor.outside_temperature
    id: temp_trend
  # Weather State
  - platform: homeassistant
    entity_id: weather.my_weather_station
    id: weather_state
  # Frost Risk
  - platform: homeassistant
    entity_id: sensor.weather_frostrisk
    id: frost_risk
  # # Weatherman entities
  - platform: homeassistant
    entity_id: sensor.weatherman_data
    attribute: weather_condition_now
    id: weather_condition_now
  - platform: homeassistant
    entity_id: sensor.weatherman_data
    attribute: weather_condition_0
    id: weather_condition_0
  - platform: homeassistant
    entity_id: sensor.weatherman_data
    attribute: weather_timestamp_0
    id: weather_timestamp_0
  - platform: homeassistant
    entity_id: sensor.weatherman_data
    attribute: weather_condition_1
    id: weather_condition_1
  - platform: homeassistant
    entity_id: sensor.weatherman_data
    attribute: weather_timestamp_1
    id: weather_timestamp_1
  - platform: homeassistant
    entity_id: sensor.weatherman_data
    attribute: weather_condition_2
    id: weather_condition_2
  - platform: homeassistant
    entity_id: sensor.weatherman_data
    attribute: weather_timestamp_2
    id: weather_timestamp_2
  - platform: homeassistant
    entity_id: sensor.weatherman_data
    attribute: weather_condition_3
    id: weather_condition_3
  - platform: homeassistant
    entity_id: sensor.weatherman_data
    attribute: weather_timestamp_3
    id: weather_timestamp_3
  # Sunrise
  - platform: sun
    type: sunrise
    id: sun_sunrise
    format: "%H:%M"
  # Sunset
  - platform: sun
    type: sunset
    id: sun_sunset
    format: "%H:%M"
  # Visibility range from Met Office
  - platform: homeassistant
    entity_id: sensor.dundonald_visibility_distance_daily
    id: visibility_range
  # Moon phase
  - platform: homeassistant
    entity_id: sensor.moon
    id: moon_phase
  - platform: homeassistant
    entity_id: sensor.moon_rise
    id: moon_rise
  - platform: homeassistant
    entity_id: sensor.moon_set
    id: moon_set


# Define colors
# This design is white on black so this is necessary.
color:
  - id: color_black
    red: 0%
    green: 0%
    blue: 0%
    white: 50%
  - id: color_white
    red: 0%
    green: 0%
    blue: 0%
    white: 0%


# Pins for Waveshare ePaper ESP Board
spi:
  clk_pin: GPIO13
  mosi_pin: GPIO14


# Now render everything on the ePaper screen.
display:
  - platform: waveshare_epaper
    cs_pin: GPIO15
    dc_pin: GPIO27
    busy_pin: GPIO25
    reset_pin: GPIO26
    model: 7.50inV2
    update_interval: 60min
    rotation: 90°
    auto_clear_enabled: false
    lambda: |-
      // Map weather states to MDI characters.
      std::map<std::string, std::string> visibility_short
        {
          {"20-40", "30"},
          {"20-30", "25"},
          {"10-20", "15"},
        };
      std::map<std::string, std::string> moon_icon_map
        {
          {"first_quarter", "\U000F0F61"},
          {"full_moon", "\U000F0F62"},
          {"last_quarter", "\U000F0F63"},
          {"new_moon", "\U000F0F64"},
          {"waning_crescent", "\U000F0F65"},
          {"waning_gibbous", "\U000F0F66"},
          {"waning_crescent", "\U000F0F67"},
          {"waxing_gibbous", "\U000F0F68"},
          
        };
      std::map<std::string, std::string> weather_icon_map
        {
          {"cloudy", "\U000F0590"},
          {"cloudy-alert", "\U000F0F2F"},
          {"cloudy-arrow-right", "\U000F0E6E"},
          {"fog", "\U000F0591"},
          {"hail", "\U000F0592"},
          {"hazy", "\U000F0F30"},
          {"hurricane", "\U000F0898"},
          {"lightning", "\U000F0593"},
          {"lightning-rainy", "\U000F067E"},
          {"night", "\U000F0594"},
          {"night-partly-cloudy", "\U000F0F31"},
          {"partlycloudy", "\U000F0595"},
          {"partly-lightning", "\U000F0F32"},
          {"partly-rainy", "\U000F0F33"},
          {"partly-snowy", "\U000F0F34"},
          {"partly-snowy-rainy", "\U000F0F35"},
          {"pouring", "\U000F0596"},
          {"rainy", "\U000F0597"},
          {"snowy", "\U000F0598"},
          {"snowy-heavy", "\U000F0F36"},
          {"snowy-rainy", "\U000F067F"},
          {"sunny", "\U000F0599"},
          {"sunny-alert", "\U000F0F37"},
          {"sunny-off", "\U000F14E4"},
          {"sunset", "\U000F059A"},
          {"sunset-down", "\U000F059B"},
          {"sunset-up", "\U000F059C"},
          {"tornado", "\U000F0F38"},
          {"windy", "\U000F059D"},
          {"windy-variant", "\U000F059E"},
        };

      // Fill background in black.
      it.fill(color_white);

      // ----------------------------------------------------------------------------------- Print full weekday name
      it.strftime(340, 95, id(font_weekday), TextAlign::TOP_RIGHT, "%A", id(esptime).now());
      // ----------------------------------------------------------------------------------- Print time in HH:MM format 335
      it.strftime(340, 200, id(font_time), TextAlign::BASELINE_RIGHT, "%H:%M", id(esptime).now());
      // TEST it.printf(315, 200, id(font_time), TextAlign::BASELINE_RIGHT, "88:88");
      
      // ----------------------------------------------------------------------------------- Print day of the month
      it.strftime(440, 95, id(font_day), TextAlign::TOP_RIGHT, "%d", id(esptime).now());
      // ----------------------------------------------------------------------------------- Print abbreviated month name
      it.strftime(440, 200, id(font_month), TextAlign::BASELINE_RIGHT, "%b", id(esptime).now());
      // TEST it.printf(440, 200, id(font_month), TextAlign::BASELINE_RIGHT, "AAA");

      // ----------------------------------------------------------------------------------- WiFi
      if(id(wifisignal).has_state ()) {
        if (id(wifisignal).state >= -50) {
            // Excellent # mdi-wifi-strength-4 "\U000F0928" 255, 230
            it.printf(85, 487, id(font_mdi_medium), color_black, TextAlign::TOP_CENTER, "\U000F0928");
        } else if (id(wifisignal).state  >= -60) {
            //Good # mdi-wifi-strength-3 "\U000F0925"
            it.printf(85, 487, id(font_mdi_medium), color_black, TextAlign::TOP_CENTER, "\U000F0925");
        } else if (id(wifisignal).state  >= -67) {
            //Fair # mdi-wifi-strength-2 "\U000F0922"
            it.printf(85, 487, id(font_mdi_medium), color_black, TextAlign::TOP_CENTER, "\U000F0922");
        } else if (id(wifisignal).state  >= -70) {
            //Weak # mdi-wifi-strength-1 "\U000F091F"
            it.printf(85, 487, id(font_mdi_medium), color_black, TextAlign::TOP_CENTER, "\U000F091F");
        } else {
            //Unlikely working signal # mdi-wifi-strength-alert-outline "\U000F092B"
            it.printf(85, 487, id(font_mdi_medium), color_black, TextAlign::TOP_CENTER, "\U000F092B");
        }
      }
      // ----------------------------------------------------------------------------------- LOW BATTERY
        if(id(battery_voltage).has_state ()) {
            if(id(battery_voltage).state <= 2700) {
                // Replace battery, less than 10% 420, 558 / 87
                it.printf(85, 567, id(font_mdi_medium), color_black, TextAlign::BASELINE_CENTER, "\U000F10CD");
            } else if (id(battery_percent).state == 100) {
                // "\U000F0079" # mdi-battery
                it.printf(85, 567, id(font_mdi_medium), color_black, TextAlign::BASELINE_CENTER, "\U000F0079");
            } else if (id(battery_percent).state >= 90) {
                // "\U000F0082" # mdi-battery-90
                it.printf(85, 567, id(font_mdi_medium), color_black, TextAlign::BASELINE_CENTER, "\U000F0082");
            } else if (id(battery_percent).state >= 80) {
                // "\U000F0081" # mdi-battery-80
                it.printf(85, 567, id(font_mdi_medium), color_black, TextAlign::BASELINE_CENTER, "\U000F0081");
            } else if (id(battery_percent).state >= 70) {
                // "\U000F0080" # mdi-battery-70
                it.printf(85, 567, id(font_mdi_medium), color_black, TextAlign::BASELINE_CENTER, "\U000F0080");
            } else if (id(battery_percent).state >= 60) {
                // "\U000F007F" # mdi-battery-60
                it.printf(85, 567, id(font_mdi_medium), color_black, TextAlign::BASELINE_CENTER, "\U000F007F");
            } else if (id(battery_percent).state >= 50) {
                // "\U000F007E" # mdi-battery-50
                it.printf(85, 567, id(font_mdi_medium), color_black, TextAlign::BASELINE_CENTER, "\U000F007E");
            } else if (id(battery_percent).state >= 40) {
                // "\U000F007D" # mdi-battery-40
                it.printf(85, 567, id(font_mdi_medium), color_black, TextAlign::BASELINE_CENTER, "\U000F007D");
            } else if (id(battery_percent).state >= 30) {
                // "\U000F007C" # mdi-battery-30
                it.printf(85, 567, id(font_mdi_medium), color_black, TextAlign::BASELINE_CENTER, "\U000F007C");
            } else if (id(battery_percent).state >= 20) {
                // "\U000F007B" # mdi-battery-20
                it.printf(85, 567, id(font_mdi_medium), color_black, TextAlign::BASELINE_CENTER, "\U000F007B");
            } else if (id(battery_percent).state >= 10) {
                // "\U000F007A" # mdi-battery-10
                it.printf(85, 567, id(font_mdi_medium), color_black, TextAlign::BASELINE_CENTER, "\U000F007A");
            }
        }
      // ----------------------------------------------------------------------------------- Print sunrise
        if(id(sun_sunrise).has_state ()) {
            it.printf(100, 235, id(font_mdi_medium), color_black, TextAlign::CENTER_RIGHT, "\U000F059C");
            it.printf(105, 235, id(font_small_bold), color_black, TextAlign::CENTER_LEFT, "%s", id(sun_sunrise).state.c_str());
        }      
      // ----------------------------------------------------------------------------------- Print sunset
        if(id(sun_sunset).has_state ()) {
            it.printf(455, 235, id(font_mdi_medium), color_black, TextAlign::CENTER_RIGHT, "\U000F059B");
            it.printf(415, 235, id(font_small_bold), color_black, TextAlign::CENTER_RIGHT, "%s", id(sun_sunset).state.c_str());
        }
      // ----------------------------------------------------------------------------------- Print moonrise
        if(id(moon_rise).has_state ()) {
            it.printf(155, 260, id(font_mdi_medium), color_black, TextAlign::CENTER_RIGHT, "\U000F1A0A");
            it.printf(155, 260, id(font_small_bold), color_black, TextAlign::CENTER_LEFT, "%s", id(moon_rise).state.c_str());
        }      
      // ----------------------------------------------------------------------------------- Print moonset
        if(id(moon_set).has_state ()) {
            it.printf(400, 260, id(font_mdi_medium), color_black, TextAlign::CENTER_RIGHT, "\U000F1A09");
            it.printf(365, 260, id(font_small_bold), color_black, TextAlign::CENTER_RIGHT, "%s", id(moon_set).state.c_str());
        }
      // Weather Section ------------------------------------------------------------------- PLACE NAME
        // TEST it.image(20, 338, id(title_weather));
        it.print(265, 280, id(font_weekday), color_black, TextAlign::TOP_CENTER, "DUNDONALD");

      // ----------------------------------------------------------------------------------- WEATHER STATE ICON --------------- (110, 358)
        it.printf(245, 335, id(font_mdi_large), color_black, TextAlign::TOP_CENTER, "%s", weather_icon_map[id(weather_condition_now).state.c_str()].c_str());
      // TEST it.printf(245, 340, id(font_mdi_large), color_black, TextAlign::TOP_CENTER, "\U000F0F35");
      
      // ----------------------------------------------------------------------------------- MOON PHASE ICON ------------------
        if(id(moon_phase).has_state ()) {
            it.printf(265, 243, id(font_mdi_medlarge), color_black, TextAlign::CENTER, "%s", moon_icon_map[id(moon_phase).state.c_str()].c_str());
        }     
      // ----------------------------------------------------------------------------------- HUMIDITY
        if(id(weather_humidity).has_state ()) {
            it.printf(100, 352, id(font_mdi_medium), color_black, TextAlign::BASELINE_RIGHT, "\U000F058E");
            it.printf(145, 350, id(font_small_bold), color_black, TextAlign::BASELINE_LEFT, "%s", "%");
            it.printf(140, 350, id(font_weekday), color_black, TextAlign::BASELINE_RIGHT, "%2.0f", id(weather_humidity).state);
        }      
      // ----------------------------------------------------------------------------------- VISIBILITY
        if(id(visibility_range).has_state ()) {
            it.printf(100, 400, id(font_mdi_medium), color_black, TextAlign::BASELINE_RIGHT, "\U000F00A5");
            it.printf(140, 400, id(font_weekday), color_black, TextAlign::BASELINE_RIGHT, "%s", visibility_short[id(visibility_range).state.c_str()].c_str());
            it.printf(145, 400, id(font_small_bold), color_black, TextAlign::BASELINE_LEFT, "km");
        }
      // ----------------------------------------------------------------------------------- UV INDEX
        if(id(uv_index).has_state ()) {
            it.printf(100, 454, id(font_mdi_medium), color_black, TextAlign::BASELINE_RIGHT, "\U000F0F37");
            it.printf(140, 450, id(font_weekday), color_black, TextAlign::BASELINE_RIGHT, "%2.0f", id(uv_index).state);
            it.printf(145, 450, id(font_small_bold), color_black, TextAlign::BASELINE_LEFT, "UVI");
        }
      // ----------------------------------------------------------------------------------- PRESSURE
        if(id(weather_pressure).has_state ()) {
            // pressure trend
            if(id(pressure_trend).state == "on") {
                it.printf(325, 353, id(font_mdi_medium), color_black, TextAlign::BASELINE_CENTER, "\U000F19B4");
            } else if(id(pressure_trend).state == "off") {
                it.printf(325, 352, id(font_mdi_medium), color_black, TextAlign::BASELINE_CENTER, "\U000F19B7");
            }
            it.printf(410, 350, id(font_weekday), color_black, TextAlign::BASELINE_RIGHT, "%2.0f", id(weather_pressure).state);
            it.printf(415, 350, id(font_small_bold), color_black, TextAlign::BASELINE_LEFT, "hPa");
        }
        // TEST it.printf(410, 340, id(font_weekday), color_black, TextAlign::BASELINE_RIGHT, "1888");
      // ----------------------------------------------------------------------------------- WIND
        if(id(wind_speed).has_state ()) {
            it.printf(330, 400, id(font_mdi_medium), color_black, TextAlign::BASELINE_CENTER, "\U000F15FA");
            it.printf(410, 400, id(font_weekday), color_black, TextAlign::BASELINE_RIGHT, "%2.0f", id(wind_speed).state);
            it.printf(415, 400, id(font_small_bold), color_black, TextAlign::BASELINE_LEFT, "kmh");
            if(id(wind_warning).state > 20) {
                it.printf(415, 485, id(font_mdi_medium), color_black, TextAlign::TOP_LEFT, "\U000F15FA");
            }
        }
        // TEST it.printf(420, 390, id(font_weekday), color_black, TextAlign::BASELINE_RIGHT, "188");
      // ----------------------------------------------------------------------------------- WIND DIRECTION & BEARING
        if(id(wind_bearing).has_state ()) {
            it.printf(330, 454, id(font_mdi_medium), color_black, TextAlign::BASELINE_CENTER, "\U000F018C");
            it.printf(410, 450, id(font_weekday), color_black, TextAlign::BASELINE_RIGHT, "%2.0f", id(wind_bearing).state);
            if (id(wind_bearing).state > 337.5) {
                it.printf(415, 450, id(font_small_bold), color_black, TextAlign::BASELINE_LEFT, "N");
            } else if(id(wind_bearing). state > 292.5) {
                it.printf(415, 450, id(font_small_bold), color_black, TextAlign::BASELINE_LEFT, "NW");
            } else if(id(wind_bearing). state > 247.5) {
                it.printf(415, 450, id(font_small_bold), color_black, TextAlign::BASELINE_LEFT, "W");
            } else if(id(wind_bearing). state > 202.5) {
                it.printf(415, 450, id(font_small_bold), color_black, TextAlign::BASELINE_LEFT, "SW");
            } else if(id(wind_bearing). state > 157.5) {
                it.printf(415, 450, id(font_small_bold), color_black, TextAlign::BASELINE_LEFT, "S");
            } else if(id(wind_bearing). state > 112.5) {
                it.printf(415, 450, id(font_small_bold), color_black, TextAlign::BASELINE_LEFT, "SE");
            } else if(id(wind_bearing). state > 67.5) {
                it.printf(415, 450, id(font_small_bold), color_black, TextAlign::BASELINE_LEFT, "E");
            } else if(id(wind_bearing). state > 22.5) {
                it.printf(415, 450, id(font_small_bold), color_black, TextAlign::BASELINE_LEFT, "NE");
            } else if(id(wind_bearing). state >= 0) {
                it.printf(415, 450, id(font_small_bold), color_black, TextAlign::BASELINE_LEFT, "N");
            }
        }
      // ----------------------------------------------------------------------------------- Frost Warning
        if(id(frost_risk).has_state ()) {
            if(id(frost_risk).state != "no_risk") {
                it.printf(415, 565, id(font_mdi_medium), color_black, TextAlign::BASELINE_LEFT, "\U000F0F29");
            }
        }
      // ----------------------------------------------------------------------------------- TEMPERATURE ---------------------- (310, 458)
        if(id(weather_temperature).has_state ()) {
            it.printf(410, 480, id(font_large_bold), color_black, TextAlign::TOP_RIGHT, "%2.0f°C", id(weather_temperature).state);
            // TEST it.printf(410, 480, id(font_large_bold), color_black, TextAlign::TOP_RIGHT, "%s", "88°C");
        }
        if(id(temp_trend).has_state ()) {
            if(id(temp_trend).state == "on") {
                it.printf(123, 527, id(font_mdi_medium), color_black, TextAlign::CENTER, "\U000F0E03");
            } else if(id(temp_trend).state == "off") {
                it.printf(123, 527, id(font_mdi_medium), color_black, TextAlign::CENTER, "\U000F0E02");
            }
        }
      
        if(id(weather_temperature_0).has_state ()) {
            it.printf(90, 602, id(font_small_bold), color_black, TextAlign::TOP_CENTER, "%s", id(weather_timestamp_0).state.c_str());
            it.printf(90, 626, id(font_mdi_medium), color_black, TextAlign::TOP_CENTER, "%s", weather_icon_map[id(weather_condition_0).state.c_str()].c_str());
            it.printf(90, 674, id(font_small_bold), color_black, TextAlign::TOP_CENTER, "%2.0f°C", id(weather_temperature_0).state);
        }
        
        if(id(weather_temperature_1).has_state ()) {
            it.printf(200, 602, id(font_small_bold), color_black, TextAlign::TOP_CENTER, "%s", id(weather_timestamp_1).state.c_str());
            it.printf(200, 626, id(font_mdi_medium), color_black, TextAlign::TOP_CENTER, "%s", weather_icon_map[id(weather_condition_1).state.c_str()].c_str());
            it.printf(200, 674, id(font_small_bold), color_black, TextAlign::TOP_CENTER, "%2.0f°C", id(weather_temperature_1).state);
        }
        
        if(id(weather_temperature_2).has_state ()) {
            it.printf(315, 602, id(font_small_bold), color_black, TextAlign::TOP_CENTER, "%s", id(weather_timestamp_2).state.c_str());
            it.printf(315, 626, id(font_mdi_medium), color_black, TextAlign::TOP_CENTER, "%s", weather_icon_map[id(weather_condition_2).state.c_str()].c_str());
            it.printf(315, 674, id(font_small_bold), color_black, TextAlign::TOP_CENTER, "%2.0f°C", id(weather_temperature_2).state);
        }
        
        if(id(weather_temperature_3).has_state ()) {
            it.printf(425, 602, id(font_small_bold), color_black, TextAlign::TOP_CENTER, "%s", id(weather_timestamp_3).state.c_str());
            it.printf(425, 626, id(font_mdi_medium), color_black, TextAlign::TOP_CENTER, "%s", weather_icon_map[id(weather_condition_3).state.c_str()].c_str());
            it.printf(425, 674, id(font_small_bold), color_black, TextAlign::TOP_CENTER, "%2.0f°C", id(weather_temperature_3).state);
        }
      
captive_portal:

skybarberom · December 6, 2023, 11:38am

one stupid question: have you tried to lower refresh to 1 or 2 mins to make a test? In your case, I think you need to wait 1 hour before you can see something.

Another thing: on esphome logs do you see the data being passed?

Johan71 · December 7, 2023, 6:19am

Yes, I have tried and it works on some values, and not on others. I’ll have a look and see if I can figure out how it works. Is there an easier example to start with?

ajakubek · December 7, 2023, 10:25am

Most variables are displayed with “if” or “else if” conditions. Remove them, then the data will be permanently displayed, not conditionally. However, this indicates that you don’t have these data, so they are not displayed.