Home Assistant – 7,5″ E-Paper Display (Waveshare) mit ESPHome ansteuern – Wetterstation

In diesem Tutorial beschreibe ich wie ein Waveshare e-Paper Display über ESPHome mit Home Assistant verbunden wird und als Wetterstation und zum Anzeigen weiterer Sensor Daten verwendet werden kann.

Hardware

  • E-Paper Display: Waveshare 7.5 Inch E-Paper Display HAT Module V2 Kit 800×480 Resolution. Das Display führt einen SPI Anschluss über ein Flachbandkabel heraus und kann ohne Lötarbeiten mit dem unten genannten ESP32 Driver Board verbunden werden.

  • ESP32 Driver Board: Waveshare Universal e-Paper Driver Board mit Wifi und Bluetooth. Das Board erlaubt den direkten Anschluss des Display über SPI. Wichtig ist hier die ESP32 Version zu kaufen. Es gibt auch ein ESP8266 Driver Board das ich zuerst gekauft habe. Dieses hat aber für das 7,5″ E-Paper Display nicht genug Leistung.
  • Gehäuse: Waveshare 7.5inch e-Paper Raw Panel Case. Das Gehäuse ist perfekt auf das Display abgestimmt.

  • Es wird mit Magneten zusammengehalten, so das das Display sehr schnell ein- und ausgebaut werden kann. Ich habe den ESP32 einfach auf der Rückseite montiert und mit Holz und etwas Farbe einen Ständer dran gebaut. Siehe obige Bilder. Sehr Flache Kontroller finden ggf. auch im Gehäuse Platz.

Software Konfiguration

Datenquelle – Home Assistant Weather Integration

Als Datenquelle für die Wetterinformationen nutze ich die Home Assistant Weather Integration. Diese ist in der Regel standardmäßig in Home Assitant integriert. Dabei handelt es sich um folgende Kachel im UI:

Gespeist wird die Kachel über den Sensor „weather.home“ den du in den „Entwicklerwerkzeuge -> Zustände“ finden solltest:

Um die Wetterdaten an das Display zu senden habe ich zwei neue Template Sensoren angelegt die die Werte als CSV (Comma Separated Values) dem Display zu Verfügung stellen. Die Sensoren müssen in der „config/configuration.yaml“ Datei eingetragen werden.

sensor:
  - platform: template
    sensors:
      epaper_weather_actual:
        #weahtericon;temperature;humidity,pressure;wind_speed
        value_template: "{{states('weather.home')}};{{state_attr('weather.home', 'temperature') | replace('.',',') }};{{state_attr('weather.home', 'humidity') | replace('.',',') }};{{state_attr('weather.home', 'pressure') | replace('.',',') }};{{state_attr('weather.home', 'wind_speed') | replace('.',',') }}"
      epaper_weather_forecast:
        value_template: "{{as_timestamp(strptime(state_attr('weather.home', 'forecast')[0]['datetime'], '%Y-%m-%dT%H:%M')) | timestamp_custom('%a') }};{{state_attr('weather.home', 'forecast')[0]['condition']}};{{state_attr('weather.home', 'forecast')[0]['temperature']| replace('.',',') }};{{state_attr('weather.home', 'forecast')[0]['templow']| replace('.',',') }};{{as_timestamp(strptime(state_attr('weather.home', 'forecast')[1]['datetime'], '%Y-%m-%dT%H:%M')) | timestamp_custom('%a') }};{{state_attr('weather.home', 'forecast')[1]['condition']}};{{state_attr('weather.home', 'forecast')[1]['temperature']| replace('.',',') }};{{state_attr('weather.home', 'forecast')[1]['templow']| replace('.',',') }};{{as_timestamp(strptime(state_attr('weather.home', 'forecast')[2]['datetime'], '%Y-%m-%dT%H:%M')) | timestamp_custom('%a') }};{{state_attr('weather.home', 'forecast')[2]['condition']}};{{state_attr('weather.home', 'forecast')[2]['temperature']| replace('.',',') }};{{state_attr('weather.home', 'forecast')[2]['templow']| replace('.',',') }};{{as_timestamp(strptime(state_attr('weather.home', 'forecast')[3]['datetime'], '%Y-%m-%dT%H:%M')) | timestamp_custom('%a') }};{{state_attr('weather.home', 'forecast')[3]['condition']}};{{state_attr('weather.home', 'forecast')[3]['temperature']| replace('.',',') }};{{state_attr('weather.home', 'forecast')[3]['templow']| replace('.',',') }};{{as_timestamp(strptime(state_attr('weather.home', 'forecast')[4]['datetime'], '%Y-%m-%dT%H:%M')) | timestamp_custom('%a') }};{{state_attr('weather.home', 'forecast')[4]['condition']}};{{state_attr('weather.home', 'forecast')[4]['temperature']| replace('.',',') }};{{state_attr('weather.home', 'forecast')[4]['templow']| replace('.',',') }}"
      epaper_sunrise:
        value_template: "{{ as_timestamp(strptime(state_attr('sun.sun', 'next_dawn'), '%Y-%m-%dT%H:%M')) | timestamp_custom('%H:%M') }}"
      epaper_sunset:
        value_template: "{{ as_timestamp(strptime(state_attr('sun.sun', 'next_dusk'), '%Y-%m-%dT%H:%M')) | timestamp_custom('%H:%M') }}"

ESP32 mit ESPHome einrichten

Das Display habe ich mit ESPHome eingerichtet. D.h. du must die ESPHome Integration in Home Assistant installieren und den ESP32 Mikrokontroller hinzufügen. Dazu verbindest du diesen mittels USB mit Home Assistant und gehst in die ESPHome Oberfläche:

Einstellungen -> Add-ons, Backups & Supervisor -> ESPHome -> Benutzeroberfläche öffnen

Hier kannst du dann mit mit „New Device“ den Mikrokontroller als ESP32 hinzufügen und diesem einen Namen geben. Siehe nachfolgende Screenshots:



Sobald der ESP32 in ESPHome integriert ist, sollte Home Assistant diesen als neue Integration finden. „Einstellungen -> Geräte & Dienste -> Integrationen“. Hier muss die Integration hinzugefügt werden, damit das Display auf die Wetterdaten von Home Assistant zugreifen kann.

ESPHome Display Konfiguration

Das Display nutzt Google Open Sans Font für die Schriften und Material Design Icon Font um z.B. die Wetter Bilder zu zeigen. Diese müsst ihr herunterladen und in den Order „config\esphome\fonts“ legen. Am einfachsten geht dies wenn ihr Samba auf dem Home Assistant einrichtet und dann über das Netzwerk auf die Verzeichnisse zugreift.
\\HOMEASSISTANT_IP\config\esphome\fonts

In der Konfiguration nutze ich die UniCodes der Bilder. Dies ist etwas robuster ein falsch eingestelltes Encoding der Konfigurationsdatei so keine Probleme bereitet. Die Unicodes der Material Design Icons kannst du hier finden.
Nachfolgend findest du meine ESPHome Konfiguration die eine Uhrzeit, Sonnen Auf- und Untergangzeiten, UpTime, WLAN Signalstärke und natürlich die Wetterdaten anzeigt:

esphome:
  name: epaper75

esp32:
  board: esp32dev
  framework:
    type: arduino

# Enable logging
logger:

# Enable Home Assistant API
api:

ota:
  password: "OTAPW"

wifi:
  ssid: !secret wifi_ssid
  password: !secret wifi_password

  # Enable fallback hotspot (captive portal) in case wifi connection fails
  ap:
    ssid: "Epaper75 Fallback Hotspot"
    password: "FALLBACKPW"

captive_portal:


# Example configuration entry
spi:
  clk_pin: 13
  mosi_pin: 14

# --- Fonts --------------------------------------------------------------------  
font:
  - file: 'fonts/OpenSans-Bold.ttf'
    id: openSansBold_font
    size: 20
    glyphs:
      ['&', '@', '!', '?', ',', '.', '"', '%', '(', ')', '+', '-', '_', ':', '°', '0',
       '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E',
       'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S',
       'T', 'U', 'V', 'W', 'X', 'Y', 'Z', ' ', 'a', 'b', 'c', 'd', 'e', 'f',
       'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't',
       'u', 'v', 'w', 'x', 'y', 'z', 'å', 'ä', 'ö', 'ü', 'Ä', 'Ö', 'Ü', '/', '€', '’', 'ß']

  - file: 'fonts/OpenSans-Bold.ttf'
    id: watch_font
    size: 90
    glyphs:
      [':', ".", '0', '1', '2', '3', '4', '5', '6', '7', '8', '9']
      
  # https://pictogrammers.github.io/@mdi/font/6.5.95/    Unicodes
  - file: 'fonts/materialdesignicons-webfont.ttf'
    id: materialdesign_icons_25
    size: 25
    glyphs: [
      "\U000F050F", # mdi-thermometer
      "\U000F0F55", # mdi-home-thermometer-outline
      "\U000F0F54", # mdi-home-thermometer
      "\U000F058E", # mdi-water-percent
      "\U000F029A", # mdi-gauge
      "\U000F059B", # mdi-weather-sunset
      "\U000F059C", # mdi-weather-sunrise
      "\U000F10C2", # mdi-thermometer-high
      "\U000F10C3"  # mdi-thermometer-low
      ]
      
  - file: 'fonts/materialdesignicons-webfont.ttf' 
    id: materialdesign_icons_32
    size: 32
    glyphs: [
      "\U000F091F", # mdi-wifi-strength-1
      "\U000F0922", # mdi-wifi-strength-2
      "\U000F0925", # mdi-wifi-strength-3
      "\U000F0928", # mdi-wifi-strength-4
      "\U000F092B", # mdi-wifi-strength-alert-outline
      
      "\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
      ]
      
  - file: 'fonts/materialdesignicons-webfont.ttf' 
    id: materialdesign_icons_50
    size: 80
    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 Layout -----------------------------------------------------------
display:
  - platform: waveshare_epaper
    cs_pin: 15
    dc_pin: 27
    busy_pin: 25
    reset_pin: 26
    model: 7.50inv2
    update_interval: 60s
    lambda: |
     int x, y;
     
     // Grid
     it.line(0, 108, 800, 108); // Horizontal header
     it.line(0, 440, 800, 440); // Horizontal footer
     it.line(266, 108, 266, 440); // Vertical first line
     it.line(532, 108, 532, 440); // Vertical second line
     
    
     // Sunrise / Sunset
     it.printf(5, 40, id(materialdesign_icons_25), TextAlign::BASELINE_LEFT, "\U000F059C");
     it.printf(35, 40, id(openSansBold_font), TextAlign::BOTTOM_LEFT, id(epaper_sunrise).state.c_str());
      
     it.printf(5, 70, id(materialdesign_icons_25), TextAlign::BASELINE_LEFT, "\U000F059B");
     it.printf(35, 70, id(openSansBold_font), TextAlign::BOTTOM_LEFT, id(epaper_sunset).state.c_str());
     
     // Temperature inside / outside
     it.printf(100, 35, id(materialdesign_icons_25), TextAlign::BASELINE_LEFT, "\U000F0F54"); 
     //it.printf(130, 40, id(openSansBold_font), TextAlign::BOTTOM_LEFT, "%s °C", id(temperature_inside).state.c_str()); // use your own temp sensor
     
     it.printf(100, 65, id(materialdesign_icons_25), TextAlign::BASELINE_LEFT, "\U000F0F55"); 
     //it.printf(130, 70, id(openSansBold_font), TextAlign::BOTTOM_LEFT, "%s °C", id(temperature_outside).state.c_str());// use your own temp sensor
     
     //Time
     it.strftime(540, 100, id(watch_font),TextAlign::BOTTOM_LEFT, "%H:%M", id(time_homeassistant).now());
     it.strftime(540, 110, id(openSansBold_font),TextAlign::BOTTOM_LEFT, "%A, %d.%m.%y, KW %W", id(time_homeassistant).now());
      
     // Current weather 
     // https://www.home-assistant.io/integrations/weather/
     // weahtericon;temperature;humidity,pressure;wind_speed
     // ex. data:   cloudy;5,9;50;1025,6;16,9

     std::map <std::string, std::string> weatherMap =  { 
      std::make_pair("exceptional","\U000F0F2F"),
      std::make_pair("cloudy","\U000F0590"),
      std::make_pair("cloudy-alert","\U000F0F2F"),
      std::make_pair("fog","\U000F0591"),
      std::make_pair( "hail","\U000F0592"),
      std::make_pair( "hazy","\U000F0F30"),
      std::make_pair( "hurricane","\U000F0898"),
      std::make_pair( "lightning","\U000F0593"),
      std::make_pair( "lightning-rainy","\U000F067E"),
      std::make_pair( "night","\U000F0594"),
      std::make_pair( "clear-night","\U000F0594"),
      std::make_pair( "night-partly-cloudy","\U000F0F31"),
      std::make_pair( "partly-cloudy","\U000F0595"),
      std::make_pair( "partlycloudy","\U000F0595"),
      std::make_pair( "partly-lightning","\U000F0F32"),
      std::make_pair( "partly-rainy","\U000F0F33"),
      std::make_pair( "partly-snowy","\U000F0F34"),
      std::make_pair( "partly-snowy-rainy","\U000F0F35"),
      std::make_pair( "pouring","\U000F0596"),
      std::make_pair( "rainy","\U000F0597"),
      std::make_pair( "snowy","\U000F0598"),
      std::make_pair( "snowy-heavy","\U000F0F36"),
      std::make_pair( "snowy-rainy","\U000F067F"),
      std::make_pair( "sunny","\U000F0599"),
      std::make_pair( "sunny-alert","\U000F0F37"),
      std::make_pair( "sunny-off","\U000F14E4"),
      std::make_pair( "tornado","\U000F0F38"),
      std::make_pair( "windy","\U000F059D"),
      std::make_pair( "windy-variant","\U000F059E")};
      
     if(id(epaper_weather_actual).has_state()) {
       std::string actualWeatherCSV = id(epaper_weather_actual).state; //("cloudy;5,9;50;1025,6;16,9");
       ESP_LOGI("Weather today", "%s", actualWeatherCSV.c_str());
       std::size_t current, previous = 0;
       char delim = ';';
       current = actualWeatherCSV.find(delim);
       x = 5; y = 200;
       for (int i=0; i<5; i++) {
           const char * value = actualWeatherCSV.substr(previous, current - previous).c_str();
           if(i == 0) { // icon
             std::string unicodeWeatherIcon = weatherMap.at(value);
             it.printf(x , y, id(materialdesign_icons_50), TextAlign::BASELINE_LEFT, unicodeWeatherIcon.c_str()); 
             y = 120;
             x = x + 90;
           } else if (i == 1) { // temperature
              it.printf(x, y, id(openSansBold_font), TextAlign::BASELINE_LEFT,"%s  °C", value);
           } else if (i == 2) { // humidity
              it.printf(x, y, id(openSansBold_font), TextAlign::BASELINE_LEFT,"%s %s", value, "%");
           } else if (i == 3) { // pressure
              it.printf(x, y, id(openSansBold_font), TextAlign::BASELINE_LEFT,"%s PA", value);
           } else if (i == 4) { // windpeed
              it.printf(x, y, id(openSansBold_font), TextAlign::BASELINE_LEFT,"%s m/s", value);
           }
           y += 25;
           previous = current + 1;
           current = actualWeatherCSV.find(delim, previous);
       }
     }
     
     // Weather Forecast
     if(id(epaper_weather_forecast).has_state()) {
       std::string forecastWeatherCSV = id(epaper_weather_forecast).state; // Mon;sunny;16,5;5,1;Tue;sunny;17,2;6,8;Wed;sunny;15,4;2,7;Thu;sunny;15,3;4,6;Fri;partlycloudy;16,0;3,5
       ESP_LOGI("Weather forecast", "%s", forecastWeatherCSV.c_str());
       std::size_t current, previous = 0;
       char delim = ';';
       current = forecastWeatherCSV.find(delim);
       x = 5; y = 270;
       int nextRow =0;
       for (int i=0; i<20; i++) {
           const char * value = forecastWeatherCSV.substr(previous, current - previous).c_str();
           if(i == 0 || i == 4 || i == 8 || i == 12 || i == 16) { // Weekday
              it.printf(x, y, id(openSansBold_font), TextAlign::BASELINE_LEFT,"%s", value);
           } else if (i == 1 || i == 5 || i == 9 || i == 13 || i == 17) { // icon
             it.printf(x + 50  , y, id(materialdesign_icons_32), TextAlign::BASELINE_LEFT, weatherMap.at(value).c_str()); 
           } else if (i == 2 || i == 6 || i == 10 || i == 14 || i == 18) { // Temp high
              it.printf(x + 100 , y, id(openSansBold_font), TextAlign::BASELINE_LEFT,"%s°C", value);
           } else if (i == 3 || i == 7 || i == 11 || i == 15 || i == 19) { // Temp low
              it.printf(x + 170, y, id(openSansBold_font), TextAlign::BASELINE_LEFT,"%s °C", value);
           }
           nextRow = nextRow + 1;
           if (nextRow == 4) {
             y += 28;
             nextRow = 0;
           }
           previous = current + 1;
           current = forecastWeatherCSV.find(delim, previous);
       }
     }
      
     // -- Footer ---
     //IP Adress
     if (id(ip_address).has_state()) {
         it.printf(5, 470, id(openSansBold_font), TextAlign::BASELINE_LEFT, "IP: %s", id(ip_address).state.c_str());
     }
      
     // WiFi Signal Strength
     if(id(wifisignal).has_state()) {
       x = 210, y = 475;
       if (id(wifisignal).state >= -50) {
           it.print(x, y, id(materialdesign_icons_32), TextAlign::BOTTOM_RIGHT, "\U000F0928");
           ESP_LOGI("WiFi", "Exellent");
       } else if (id(wifisignal).state  >= -60) {
           it.print(x, y, id(materialdesign_icons_32), TextAlign::BOTTOM_RIGHT, "\U000F0925");
           ESP_LOGI("WiFi", "Good");
       } else if (id(wifisignal).state  >= -67) {
           it.print(x, y, id(materialdesign_icons_32), TextAlign::BOTTOM_RIGHT, "\U000F0922");
           ESP_LOGI("WiFi", "Fair");
       } else if (id(wifisignal).state  >= -70) {
           it.print(x, y, id(materialdesign_icons_32), TextAlign::BOTTOM_RIGHT, "\U000F091F");
           ESP_LOGI("WiFi", "Weak");
       } else {
           it.print(x, y, id(materialdesign_icons_32), TextAlign::BOTTOM_RIGHT, "\U000F092B");
           ESP_LOGI("WiFi", "Unlikely");
       }
     }
     
     // ESP Home UpTime
     if (id(uptime_human).has_state()) {
         it.printf(520, 470, id(openSansBold_font), TextAlign::BASELINE_LEFT, "UpTime: %s", id(uptime_human).state.c_str());
     }
     
     
     
    

# --- Sensors ------------------------------------------------------------------
sensor:

    # ESP Home UpTime
  - platform: uptime
    id: uptime_sensor
    update_interval: 60s
    on_raw_value:
      then:
        - text_sensor.template.publish:
            id: uptime_human
            state: !lambda |-
              int seconds = round(id(uptime_sensor).raw_state);
              int days = seconds / (24 * 3600);
              seconds = seconds % (24 * 3600);
              int hours = seconds / 3600;
              seconds = seconds % 3600;
              int minutes = seconds /  60;
              seconds = seconds % 60;
              return (
                (days ? String(days) + ":" : "000:") +
                (hours ? String(hours) + ":" : "00:") +
                (minutes ? String(minutes) + ":" : "00:") +
                (String(seconds) + "")
              ).c_str();  
  - platform: wifi_signal
    id: wifisignal
    update_interval: 60s

text_sensor:
  # ESP WLAN IP Address
  - platform: wifi_info
    ip_address:
      name: "${name} IP Address"
      id: ip_address
  # ESP Home UpTime
  - platform: template
    id: uptime_human
    icon: mdi:clock-start
  # Weather forecast 
  - platform: homeassistant
    id: epaper_weather_actual
    entity_id: sensor.epaper_weather_actual
    internal: true
  - platform: homeassistant
    id: epaper_weather_forecast
    entity_id: sensor.epaper_weather_forecast
    internal: true
  - platform: homeassistant
    id: epaper_sunrise
    entity_id: sensor.epaper_sunrise
    internal: true
  - platform: homeassistant
    id: epaper_sunset
    entity_id: sensor.epaper_sunset   
    internal: true

time:
  - platform: homeassistant
    id: time_homeassistant
Veröffentlicht in Home Assistant, Smarthome.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert