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