Idee

Als ich auf der Suche nach einem E-Ink Display für mein Smart Home war, bin ich auf GitHub über das Weatherman Dashboard von Madelena gestossen. Aufgrund des simplen Aufbaus, bestehend aus E-Ink Display, zugehörigem Displaycontroller und einem Bilderrahmen von IKEA, war schnell klar, dass dies eine mögliche Lösung sein könnte. Nach einige Tagen habe ich mich dann entschieden, die nötigen Komponenten zu bestellen und das Ganze einmal auszuprobieren.

Benötige Hardware-Komponenten

*Affiliate-Link

Zusammenbau

1. Alle Komponenten auspacken

2. Display mit dem ESP32-Displaycontroller verbinden (zum Verbinden der Flachbandkabel muss der Connector aufgeklappt werden)
3. ESP32 mit Computer verbinden (Windows empfohlen, macOS hat bei mir nicht funktioniert. Zudem sollte ein USB-C auf USB-A Kabel verwendet werden)
4. Im Browser web.esphome.io öffnen und auf "Connect" klicken. Gerät aus der Liste auswählen.

5. ESPHome Firmware installieren (noch keine Konfiguration nötig) + mit WLAN verbinden
6. Display in den Bilderrahmen einlegen & befestigen (etwas Klebeband sollte reichen)

7. Eine Schutzschicht über dem Display platzieren. Ich habe hierzu etwas Schaumstoff aus der Verpackung genommen und entsprechend zugeschnitten.
8. ESP32-Displaycontroller platzieren & Kabel befestigen

9. Loch in der Rückseite/Platte machen, für das USB-Kabel zur Stromversorgung

10. Alles verschliessen & mit Strom verbinden

Konfiguration

Zur Konfiguration des Displays benötigst du eine Installation von ESPHome. Eine lokale Installation auf deinem Computer reicht hierfür aus. Zudem ist eine Installation von Home Assistant empfehlenswert bzw. wenn du meine Konfiguration verwenden möchtest vorausgesetzt.

Weitere Details zu Home Assistant findest du in meinem Home Assistant Guide. Dort habe ich auch die Installation beschrieben.

Home Assistant Guide

Der Guide rund um Home Assistant. Dieser Artikel soll als Nachschlagewerk und Hilfestellung für diverse Themen und Erkenntnisse rund um Home Assistant dienen.

Michi's BlogMichi von Ah

Wenn du Home Assistant OS verwendest, kannst du ESPHome auch direkt als Add-On installieren und musst dies nicht auf deinem Computer installieren.

ESPHome installieren

Damit du ESPHome auf deinem Computer verwendet kannst, benötigst du Python. Auf macOS & Linux ist dies bereits vorinstalliert. Unter Windows kannst du Python im Microsoft Store installieren. Klicke dazu auf diesen Link und starte die Installation mit dem entsprechenden Knopf im Microsoft Store.

Wenn du Python auf deinem Gerät installiert hast, kannst du folgendermassen fortfahren:

1. Navigieren in das Verzeichnis, in dem deine ESPHome-Konfigurationen gespeichert werden sollen. Hierfür kannst du auch ein Git Repository verwenden.
   Befehl neuer Ordner erstellen: mkdir esphome
   Befehl Ordner öffnen: cd esphome
2. Virtuelle Python Umgebung erstellen
   Befehl Windows: py -m venv venv\
   Befehl macOS: python3 -m venv venv
3. Virtuelle Python Umgebung aktivieren
   Befehl Windows: venv\Scripts\activate
   Befehl macOS/Linux: source venv/bin/activate
4. Wheel installieren (nur auf Windows)
   Befehl: pip3 install wheel
5. ESPHome installieren
   Befehl: pip3 install esphome
6. Verzeichnis für Konfigurationen erstellen
   Befehl: mkdir config
7. Nun kannst du prüfen ob die Installation erfolgreich war, in dem du die aktuelle Version ausgibst.
   Befehl: esphome version

8. Nun kann das Dashboard gestartet werden, welches wir für die nächsten Schritte verwenden. Es wäre auch möglich, alles per CLI (Terminal) zu machen.
   Befehl Dashboard starten: esphome dashboard --port 3000 config

Rufe nun in deinem Browser http://localhost:3000 auf. Du solltest ein leeres Dashboard von ESPHome sehen.

Hiermit kannst du nun die nächsten Schritte ausführen. Damit jedoch nicht jeder in deinem Netzwerk auf das Dashboard zugreifen kann, kannst du es zusätzlich mit einem Benutzernamen und Passwort absichern. Stoppe dazu die aktuelle Ausführung im Terminal mit Ctrl + C. Füge die beiden Parameter --username sowie --password zu deinem Befehl hinzu.

Beispiel: esphome dashboard --port 3000 config --username <BENUTZERNAME> --password <PASSWORT>

Nun wird du zur Eingabe der Zugangsdaten aufgefordert, bevor du auf das Dashboard zugreifen kannst.

Die offizielle Installationsanleitung von ESPHome, für alle Betriebssysteme, findest du hier. Dort findest du auch weitere Informationen, wenn die Installation nicht funktioniert oder du eine andere Art der Installation (Container) bevorzugst.

Firmware kopieren & anpassen

1. Stoppe das ESPHome Dashboard mit Ctrl + C.
2. Klone das GitHub Repository meiner Konfiguration*
   Befehl: git clone https://github.com/michivonah/esphome-eink-dashboard.git config
3. Damit du in deiner Konfiguration keine Passwörter angeben musst, sollte eine Secrets-Datei verwendet werden. Dadurch werden keine Passwörter in deiner Konfiguration verwendet und du kannst Secrets in mehreren Konfigurationen verwenden. Das ermöglicht auch ein leichteres Teilen deiner Konfiguration, ohne dass du dir Gedanken über sensitive Inhalte darin machen muss.

Füge zuerst deine WLAN-Zugangsdaten zu dieser Datei hinzu. Die Datei muss hierzu noch nicht vorhanden sein, da sie bei der Ausführung des Befehls automatisch angelegt wird.

Führe folgende beiden Befehle aus und ersetze <DEINE-SSID> sowie <DEIN-WLAN-PASSWORT> durch deine WLAN Zugangsdaten.

echo 'wifi_ssid: "<DEINE-SSID>"' >> config/secrets.yaml
echo 'wifi_password: "<DEIN-WLAN-PASSWORT>"' >> config/secrets.yaml

Als nächstes wird ein API Key für die Kommunikation mit Home Assistant sowie ein OTA Key für die Installation von Updates über ESPHome benötigt. Der API Key muss hierbei ein 32-Bit-Base64-String sein. Diesen kannst du unter macOS oder Linux mit diesem Befehl generieren: openssl rand --base64 32

Unter Windows kannst du diese Dokumentation von ESPHome in deinem Browser öffnen. Dort wird lokal in deinem Browser ein 32-Bit-Base64-String generiert, welchen du für deine Konfiguration verwenden kannst.

Füge diesen String nun ebenfalls zu deiner Secrets-Datei hinzu.

echo 'api_key_e-ink-frame: "<BASE64-STRING>"' >> config/secrets.yaml

Als OTA Key kannst du eine beliebige Zeichenfolge verwenden. Aus Sicherheitsgründen ist es jedoch sinnvoll, ebenfalls einen Base64 oder einen anderweitig, zufälligen String zu verwenden. Füge den OTA Key ebenfalls zu deiner Secrets-Datei hinzu.

echo 'ota_key_e-ink-frame: "<ZUFÄLLIGER-STRING>"' >> config/secrets.yaml

Mit diesem Befehl kannst du auch weitere Secrets nach Bedarf zu deiner Secrets-Datei hinzufügen.

4. Starte nun das ESPHome Dashboard erneut.
   Befehl: esphome dashboard --port 3000 config --username <BENUTZERNAME> --password <PASSWORT>
5. Wenn du dich nun erneut im Browser anmeldest, solltest du nun eine Konfiguration mit dem Namen e-ink-frame sehen.

6. Klicke auf "Edit"

7. Du siehst nun einen Editor, um die YAML-Konfiguration zu bearbeiten. Mache hier deine gewünschten Änderungen. Den Aufbau der Konfiguration und was die einzelnen Werte bedeuten, erkläre ich im nächsten Kapitel.

8. Wenn du mit der Konfiguration fertig bist und diese auf dem Bilderrahmen bzw. dessen ESP32 installieren möchtest, klicke oben rechts auf "Install".

9. Wähle nun aus, wie deine Konfiguration installiert werden soll. Wenn dein ESP32 mit demselben WLAN wie dein Computer verbunden ist, kannst du "Wirelessly" auswählen. Ansonsten kannst du deinen ESP32 per USB an deinem Computer anschliessen und die dritte Option "Plug into the computer running ESPHome Device Builder" auswählen.

Wenn ESPHome nicht auf deinem Computer, sondern auf einem separaten Gerät, beispielsweise deinem Home Assistant Server, läuft, kannst du die vierte Option verwenden und die Konfiguration herunterladen und dann über web.esphome.io installieren. Wenn dein ESPHome über eine verschlüsselte Verbindung mit HTTPS erreichbar ist, kannst du auch die zweite Option "Plug into this computer" verwenden.

Nach dem du die gewünschte Installationsart ausgewählt hast, starte der Kompiliervorgang der Firmware und je nach Option auch gleich die Installation auf dem ESP.

Wenn du dich für eine manuelle Installation entschieden hast, wird nach Abschluss der Kompilierung eine Firmware-Datei heruntergeladen.

*Hierfür ist eine Installation von Git vorausgesetzt. Auf macOS & Linux ist dies bereits vorinstalliert. Unter Windows kann Git mit folgendem Befehl installiert werden: winget install --id Git.Git -e --source winget

Aufbau der Konfiguration

Die Konfiguration deines Bilderrahmens erfolgt vollständig über die YAML-Datei in ESPHome. Damit du eine Chance hast, zu verstehen, was wofür ist, erkläre ich dir in diesem Kapitel die wichtigsten Bestandteile der YAML-Konfiguration.

Die ersten Zeilen der YAML-Konfiguration legen grundlegende Einstellungen wie den Namen deines Geräts (1) sowie das Modell deiner Hardware (2) fest.

Der Abschnitt on_boot legt fest, was beim Starten von ESPHome ausgeführt werden soll. In meinem Fall wird der Inhalt des Displays nach einer Wartezeit von fünf Sekunden aktualisiert, damit zuerst Daten von Home Assistant abgerufen werden können.

Einige Zeilen weiter unten folgt die Konfiguration der WLAN-Verbindung sowie der Keys, welche wir zuvor mittels der Secrets definiert haben.

Mit den folgenden Zeilen 47-117 werden die Schriftarten für die Anzeige von Text und Icons konfiguriert. Wenn du auf deinem Display eine andere Schriftart als Roboto oder eine andere Schriftgrösse verwenden möchtest, musst du dies hier anpassen.

Pro Variation (Grösse, Schriftstil, Schriftart, Zeichensatz) muss eine separate Konfiguration der Schriftart erstellt werden.

Es folgt die Definition der Knöpfe zur Steuern in Home Assistant. Diese ermöglichen es, den ESP32 via Home Assistant herunterzufahren oder neu zu starten. Hierzu werden die integrierten Funktionen shutdown und restart verwendet. Zudem gibt es einen Knopf, welcher durch die Ausführung des Skripts auf Zeile 148, den Inhalt des Displays auf Verlangen aktualisiert.

Auf den Zeilen 133-145 findet sich die Definition von globalen Variablen, welche unteranderem dafür benötigt werden, um zu prüfen, ob sich die angezeigten Daten verändert haben.

Anschliessend wird die Zeit des ESP32 konfiguriert. Hier musst du ggf. deine Zeitzone (1) anpassen. Meine Konfiguration aktualisiert den Inhalt des Displays einmal pro Minute, falls sich die Daten verändert haben. Wenn du die Zeit anpassen möchtest, nach welcher das Display aktualisiert wird, kannst du dies auf Zeile 163 (Punkt 2 auf dem Bild) tun.

Nun kommen wir zur persönlicheren Konfiguration, in welcher du einige Dinge anpassen musst.

Damit das Display nur aktualisiert wird, wenn auch tatsächlich jemand im Raum ist, wird die Entität eines Anwesenheitssensors aus Home Assistant verwendet. Du kannst an dieser Stelle eine beliebige Entität aus Home Assistant verwenden, welche die Anwesenheit in einem Raum repräsentiert.

Wenn du keinen solchen Sensor in deinem Home Assistant hast, kannst du diesen Sensor entweder aus deiner Konfiguration entfernen oder du erstellst dir in Home Assistant einen Helfer vom Typ "Zeitplan", in welchem du Zeitfenster definierst, wann das Display aktualisiert werden soll. Wenn du dich dafür entscheidest, den Sensor zu entfernen, muss dieser auch aus der Bedingung (Zeile 161-180) bei der Zeitkonfiguration entfernt werden.

Es folgt die Definition diverser Sensoren, welche einen Zahlenwert anstelle eines booleschen Wert (An/aus) zurückgeben. Die ersten drei Sensoren zeigen dabei lediglich Werte zum Display in Home Assistant an. Die Sensoren mit der Plattform "homeassistant" rufen Daten aus Home Assistant ab, welche auf deinem Display dargestellt werden können. Setze hier bei den Sensoren ab Zeile 213 die Namen der Entitäten aus deinem Home Assistant ein.

Du kannst die Sensoren auch ersetzen oder weitere nach Bedarf hinzufügen. Der Sensor mit der Id presence_lux ist ein weiterer Teil, der Überprüfung, ob das Display überhaupt aktualisiert werden soll. Ich verwende hier einen Sensor, welcher mir die Helligkeit im Raum angibt, um zu erkennen, ob der Text auf dem Display bei der aktuellen Helligkeit überhaupt gelesen werden kann. Wenn du diesen Sensor nicht verwenden möchtest, musst du diesen ebenfalls aus der Bedingung bei den Zeilen 161-180 entfernen.

Die restlichen Sensoren sind Angaben zum Wetter oder zur Luftqualität im Schlafzimmer.

Zusätzlich zu diesen Sensoren, gibt es auch eine Definition von Text-Sensoren. Diese verwende ich, um Inhalte wie den aktuell abgespielten Song von Spotify anzuzeigen. Ersetze hierfür ebenfalls die entsprechenden Entitäten und entferne den Rest, welchen du nicht brauchst.

Nach den Sensoren folgt die Definition der Farben für die Anzeige auf dem Display. Da das Display nur Graustufen anzeigen kann, bleiben hier nicht viele Möglichkeiten zur Individualisierung. Wenn du die Einstellungen wie auf dem Beispiel belässt, ist der Hintergrund schwarz und die Schrift weiss. Wenn du das umgekehrt möchtest, kannst du den entsprechenden Abschnitt der Konfiguration löschen oder die Werte bei white austauschen.

Die Treiberplatine für das E-Ink-Display wird per SPI-Bus am ESP32 angeschlossen. Die Konfiguration der Pins, kannst du belassen, wenn du die Hardware gemäss meiner Anleitung verbunden hast.

Nun kommt der spannende Teil: Die Konfiguration des Displays und dessen Inhalt. Dieser beginnt ab Zeile 314. Zuerst werden einige Einstellungen zum Display getroffen (1) und das Modell definiert. Wenn du ein anderes Display verwendest, musst du hier das Modul anpassen. Die Liste mit den verfügbaren Modellen findest du hier. Die Option full_update_every definiert, nach wie vielen teilweisen Aktualisierung des Displays, das gesamte Display aktualisiert wird. Nur bei einer vollständigen Aktualisierung wird der ganze Bereich des Displays neugeladen. Mit meiner Konfiguration wird also maximal alle 30 Minuten das Display einmal vollständig erneuert.

Wenn du nach dem Installieren der Firmware merkst, dass dein Bild verkehrt herum angezeigt wird, kannst du die Rotation auf Zeile 328 anpassen.

Ab lambda beginnt die Konfiguration des Inhalts auf dem Display (2). Die Konfiguration erfolgt als C++ Code.

Damit etwas auf dem Display angezeigt wird, muss immer eine Methode des Objektes it verwendet werden. Diese erkennst du daran, dass die Befehle mit it. beginnen. Um Text oder Icons anzuzeigen, wird die Methode it.printf(); verwendet. Folgende Zeile zeigt den Text "WEATHER" an.

it.printf(240, 84, id(font_title), color_text, TextAlign::TOP_CENTER, "WEATHER");

Dabei sind die ersten beiden Werte in der Klammer jeweils die X & Y-Position auf dem Display. Es folgt die Definition der zu verwendeten Schriftart. Diese muss unter font in der Konfiguration vorhanden sein. Es folgt die Definition der Farbe. Mit TextAlign ist es zudem möglich, zu definieren dass der Text zentriert anstelle linksbündig ausgerichtet werden soll. Als letztes folgt der darzustellende Text. Es können auch Variablen, anstelle fixem Text verwendet werden. Das ist nützlich, wenn du beispielsweise auf den Wert eines Sensors zugreifen möchtest. Folgendes Beispiel stellt die Temperatur-Messwerte eines Sensors dar:

it.printf(78, 400, id(font_medium_bold), color_text, "%.1f°C", id(indoor_temperature).state);

Es ist auch möglich Bedingungen, Schleifen und eigene Variablen zu erstellen, um den eigenen Bedürfnissen gerecht zu werden. In meiner Konfiguration verwende ich beispielsweise Variablen, zur Berechnung der Koordinaten von Text und Icons.

uint multi_info_base_x = 78;
uint text_offset_x = 48;
uint tab_offset_x = 172;
uint multi_info_base_y = music_base_y + 220;
uint text_offset_y = 4;
uint linebreak_offset_y = 60;

  String sonos_state = id(media_player_sonos_state).state.c_str();
  String spotify_state = id(media_player_spotify_state).state.c_str();
  String song = "";
  String artist = "";
  bool isPlaying = false;

  if (sonos_state == "playing") {
    isPlaying = true;
    song = id(media_player_sonos_song).state.c_str();
    artist = id(media_player_sonos_artist).state.c_str();
  }
  else if (spotify_state == "playing"){
    isPlaying = true;
    song = id(media_player_spotify_song).state.c_str();
    artist = id(media_player_spotify_artist).state.c_str();
  }
  else{
    isPlaying = false;
  }

Die Reihenfolge der einzelnen Bestandteile der Konfiguration kann zudem nach Belieben angepasst und mit Kommentaren (Zeile beginnend mit #) ergänzt werden. Im C++ Code (lambda) beginnen Kommentare mit // anstelle von #.

Den vollständigen Quellcode meiner Konfiguration findest du auf GitHub.

GitHub - michivonah/esphome-eink-dashboard: A simple dashboard with weather data, current playing music & data from Home Assistant for ESPHome.

A simple dashboard with weather data, current playing music & data from Home Assistant for ESPHome. - michivonah/esphome-eink-dashboard

GitHubmichivonah

Updates installieren

Üblicherweise erscheint einmal pro Monat eine neue Version von ESPHome. Aus Sicherheitsgründen und um von neuen Features sowie Unterstützung neuer Geräte zu profitieren, empfiehlt es sich, die Firmware deiner ESPHome-Geräte regelmässig zu aktualisieren.

Öffne dazu zuerst dein ESPHome Dashboard im Browser. Du solltest anschliessend alle deine Geräte sehen. Bei allen Geräten, für welche ein Update verfügbar ist, erscheint ein Knopf "Update".

Nach einem Klick auf den Knopf, musst du, wie bei der ursprünglichen Installation der Firmware, auswählen wie du das Update installieren möchtest. Wenn dein Gerät im Dashboard als "Online" angezeigt ist, empfehle ich dir die Option "Wirelessly" zu verwenden.

Nach der erfolgreichen Installation werden dir die Logs des Bilderrahmens angezeigt. Zudem sollte nun der "Update"-Knopf im Dashboard verschwunden sein.

Endergebnis

Ich bin mit dem Endergebnis zufrieden. Das Projekt erfüllt meine Erwartungen und der Bilderrahmen konnte sich im Alltag bereits als nützlich beweisen. Der Bilderrahmen läuft nun seit knapp einem Monat und mein Display weist momentan ca. 12'300 Aktualisierungen auf.

Links

• Madelena/esphome-weatherman-dashboard - GitHub
• michivonah/esphome-eink-dashboard - GitHub
• ESPHome Docs
• ESPHome Web (Firmware flashen)