Terminanzeige mit e-Paper am ESP32, MQTT, Node-Red und ESPHome - Teil 1

Der folgende Beitrag wurde uns von unserem Leser Eberhard Werminghoff zugesandt. Viel Spaß beim Lesen und Nachbasteln.

Einleitung

In Wohnungsgemeinschaften kommt es schon mal vor, dass gewisse Aufgaben - wie z.B. Mülltonnen vor die Tür stellen - vergessen werden. Es gibt in vielen Familien auch Aufgaben, die in einem rollierenden Verfahren von unterschiedlichen Familienmitgliedern zu erledigen sind. Die Diskussionen: „Ich bin nicht dran - ich war gestern dran!“. Antwort: „Das stimmt nicht, Du bist heute dran!“ sind nicht neu. Wir alle, die mit Geschwistern oder mehreren Kindern groß geworden sind, kennen diese Diskussion. 

Wenn eine Anzeige vorgibt, wer wann was machen soll oder muss, dann ist ab heute mit dieser Diskussion Schluss. Oder wie wäre es mit einem elektronischen Geburtstagskalender? Dieser Beitrag erläutert die Vorgehensweise, eine Anzeige für Abfalltermine auf Basis eines ESP32 und einem e-Paper Displays zu bauen, mit ESPHome zu konfigurieren, zu kompilieren und schließlich in Betrieb zu nehmen.

Dieses Projekt soll Lust auf mehr machen, sich mit ESPHome zu beschäftigen.

Warum dieses Projekt?

Ich lebe in einer Eigentümergemeinschaft, in der sich drei Eigentümer um verschiedene Leistungen abwechselnd kümmern. Der aktuelle Papierplan auf DIN A4 ist sehr unübersichtlich. Ich habe mir deshalb eine Anzeige vorgestellt, die einerseits tagesaktuell bzw. wochenweise die zu erledigenden Arbeiten (Flur putzen, diverse Müllgefäße vor die Tür stellen) und andererseits die dafür zuständige Wohneinheit anzeigt. Dieser soll zu einem späteren Zeitpunkt mal im Hausflur hängen. Er zeigt folgende Daten an:

In der Kopfzeile: Anzeige von aktuellem Datum, Wochentag, Kalenderwoche und Tag des laufenden Jahres 

In der Überschriftzeile: Datum des ersten und letzten Tages der aktuellen Woche und in der zweiten Zeile, welche Wohneinheit aktuell für die Flurreinigung zuständig ist

Im Tabellenbereich: Die nächsten vier Abholtermine mit den vier Spalten Wochentag, Datum, was wird abgeholt und wer ist dafür zuständig.

In der Fußzeile: Betriebsparameter (Empfangsfeldstärke, Versionsnummer und die Uhrzeit, wann die angezeigten Daten abgeholt wurden).

Um es vorwegzunehmen, so sieht die Anzeige später aus. Sie kann aber problemlos den eigenen Bedürfnissen angepasst und zu einem Geburtstagskalender modifiziert werden.

Auswahl der Bauteile

Ich hatte bisher nur Erfahrungen mit der kleinen 1.54inch e-Paper Anzeigen von Waveshare und wollte dieses Mal eine vernünftige Schriftgröße realisieren. Die Wahl fiel auf das 4.2inch Display von Waveshare. Dieses gibt es in zwei Versionen: Zum ersten als RAW-Version und zum anderen als Board Version.

Das RAW-Display

Die RAW- Version besteht aus dem nackten e-Paper Display, bei dem lediglich die Flachbandleitungen herausgeführt werden. Die flexible Flachbandleitung passt in eine Spezialbuchse. Diese Buchse ist auf dem zugehörigen e-Paper ESP32 Driver Board vorhanden. Es ist keinerlei zusätzliche Verdrahtung erforderlich.

Hinweis: Das e-Paper Driver Board gibt es auch in einer ESP8266 Variante.

Die Modul-Variante

Die zweite - bekanntere Version - ist das Display, welches eine Anpassung an den ESP32 auf einem Trägerboard bereits mitbringt (Modul-Version).

Das Bild zeigt links die RAW-Variante und rechts die Modul-Variante. Ich hatte mich für die Board-Variante entschieden, weil das Driver-Board der RAW-Variante ohnehin nicht in das Gehäuse passt - es ist zu flach. Ob das Driver Board nach dem Ablöten der Kontaktstifte ins Gehäuse passen würde kann ich nicht sagen. 

Zu erwähnen ist auch der unterschiedliche Kontrast der beiden Anzeigen. Die kontrastärmere Darstellung des RAW-Displays hängt nicht von der Glasscheibe des Gehäuses ab. Ein Grund mehr für mich,  die Variante „Board“ (rechts) zu verwenden.

Die Verdrahtung der Displays mit dem ESP32

Die vom Driver Board der ESP32 Variante verwendeten PINs der SPI-Schnittstelle können dem nachfolgenden Bild entnommen werden. Dort ist die Verkabelung zwischen ESP32 und dem e-Paper Module dargestellt:

Die Verkabelung zwischen RAW-Display und dem e-Paper ESP32 Driverboard der anderen Variante ist durch die Verdrahtung mit dem Flachband vorgegeben. Deshalb habe ich die hier verwendeten GPIOs auch bei der oben beschriebenen Variante gewählt.

Hinweis: Dadurch ist die später vorgestellte Software ohne Änderungen auf beiden Boards lauffähig.

Bei dieser RAW-Variante muss lediglich das Mäuseklavier (unten rechts) eingestellt werden: Der Schalter 1 (A/B) muss für unser Display in Stellung „B“ sein. Mit Schalter 2 (ON/OFF) ist die verbaute USB-Schnittstelle deaktivierbar. Wer sie braucht: Stellung „ON“, wer nicht: Stellung „OFF“. Ich habe USB ausgeschaltet, als ich die Aktualisierung über WLAN getestet hatte. Jetzt ist sie immer „ON“.

Die Verdrahtung zwischen dem e-Paper Modul und dem ESP32 habe ich im ersten Schritt natürlich mit einem Breadboard vorgenommen. Die Verkabelei ist mir nach kurzer Zeit auf den Senkel gegangen und ich habe deshalb über eine Huckepack-Platine nachgedacht und auch umgesetzt.

Dafür habe ich in die Lötaugen des Moduls eine 8-pol. Stiftleiste (siehe Abb. gelber Kasten) und in einer Lochrasterplatte eine 8-pol. Buchsenleiste eingelötet. Danach wurde der Abstand der Bolzen nachgemessen und gebohrt. Das war nicht optimal, weil Stift-und Buchsenleiste nicht exakt übereinstimmten. Ich musste die Löcher vergrößern, damit es passt. Wegen der U-Scheiben fallen die größeren Löcher nicht auf. 

Deshalb die von mir empfohlene Vorgehensweise:

1. 8-pol. Stiftleiste in Modul einlöten. 
2. In eine Lochrasterplatine, die größer als die Modulplatine ist, eine 8-pol Buchsenleiste einlöten (siehe Abb).
3. Die Bolzen aus der Modulplatine entfernen
4. Modulplatine und zukünftige Huckepackplatine zusammenstecken und die Bohrlöcher durch die Modullöcher auf der Huckepackplatine anzeichnen und dort die Löcher bohren.
5. Dann erst sollten Sie die Lochrasterplatine auf das Maß des Display-Moduls anpassen.

Hinweis: Der Abstand zwischen der Stiftleiste und den Bolzenlöchern rechts und links ist nicht im 2,5mm Raster eingepasst worden. Warum, weiß ich nicht. Die Höhe zwischen den Platinen habe ich mit zwei Unterlegscheiben angepasst. Die Bolzenlänge beträgt 10 mm.

Der ESP wurde direkt in die Lochrasterplatine eingelötet, weil damit keine Fassung notwendig war. Der Grund: die Bauhöhe sollte so gering wie möglich sein. Verlötet wurden nur die Pins, die auch wirklich verwendet worden sind. 

Aber passen Sie bei der Wahl der Position auf! Die von mir gewählte Position lässt es zu, den USB-Stecker einzustecken und mit einem Holzspatel (Stiel vom Eis) den Reset-Knopf zu betätigen. Da werde ich mir noch einen externen Resetknopf nachrüsten.

Die Verbindungen zwischen Buchsenleiste und ESP stellen Sie gemäß der oben angegebenen Tabelle her.

Alles zusammenschrauben und fertig ist der Zusammenbau.

Jetzt sieht das „Paket“ genau wie eingangs bereits abgebildet aus - kompakt und fast handlich. Jetzt können Sie die Anzeige beiseitelegen. Die brauchen Sie erst später wieder.

Der Hilfsrechner

In diesem Projekt gibt es Software, die auf einem Raspberry Pi läuft. Das sind im Einzelnen die Software Node-Red und MQTT. Ich habe einen RasPi 3 verwendet und keinerlei Probleme. Wer sich an diesem Punkt entschlossen hat, einen RasPi einzusetzen, dem sei gesagt, dass Node-Red bereits in den neueren Versionen des Betriebssystems Raspberry Pi OS (früher Raspbian) enthalten ist.

Die Software für den ESP32

Hier betreten wir den Teil, der für mich in diesem Projekt am schwierigsten war. Begonnen habe ich mit der Arduino-IDE. Nach etlichen Fehlschlägen, weil unendliche „include“-Ketten die Arbeitsweise eines eventuellen Musterprogrammes für mich unlesbar machten. Da ein Programm, welches unlesbar für mich erscheint, auch nicht modifiziert werden kann, war ich kurz davor, das Projekt aufzugeben. Die Arduino-IDE hatte ich zwar schon häufiger benutzt, aber nicht im Rahmen einer derartigen Komplexität. 

Welche Software nehmen? Vor dem gleichen Problem stand wohl Otto Winter, der 2019 die Plattform ESPHome erschuf. Auch er war kein Freund von Sketchen, die mehrere hundert Zeilen lang waren. Er kannte die bekannten alternativen Firmwares, wie z.B. ESPEasy oder ESPuma. Diese waren ihm zu unflexibel und bei mehr als 10 angeschlossenen Geräten nicht mehr benutzerfreundlich einzusetzen. So schuf er ESPHome. Ich empfehle Ihnen das Video von Otto Winter, in dem er ESPHome erläutert.

Bei ESPHome schreibt der Nutzer Konfigurationsdateien, die von ESPHome in C++ Code  konvertiert werden. Das System ist zu 100% Open-Source und kostenlos. Der Nutzer programmiert nicht - er konfiguriert! Zusätzlich ist es möglich, eigenen Code in C++ einzuschleusen. Die Konfiguration wird im Format YAML geschrieben

(Sinngemäß aus einer Folie des Videos von Otto Winter entnommen).

Durch Zufall stieß ich auf ESPHome. Ich habe vor diesem Projekt zwar schon mal von YAML in einem anderen Zusammenhang gehört, aber in YAML Konfigurationsdateien schreiben - absolutes Neuland. 

Was ich kapiere, sollte auch für den interessierten Leser gelten. Nur Mut, auf geht‘s! Ich habe als Betriebssystem Windows 10. Dann auf der Internetseite:

https://esphome.io/guides/installing_esphome.html 

den einzelnen Schritten genau folgen und relativ schnell ist dann sowohl das erforderliche Python als auch wheel und esphome installiert. Leider ist die Anweisung nur in englischer Sprache verfügbar, dafür ist sie aber für weitere Plattformen wie Mac und Linux verfügbar. 

Wir kommen zu einem späteren Zeitpunkt noch einmal auf ESPHome zurück

Funktionsweise

Auch hier gilt: Die Beschreibung hört sich komplizierter an, als es in Wirklichkeit ist. Ich werde alle Elemente auf der nachfolgenden Grafik Schritt für Schritt beschreiben: beginnend bei der Datenbasis über die Signalwege bis zur (Teil-)Beschreibung der Software.

Die Begriffe „publish“ und „subscribe“ werden im Kapitel 6.1 kurz erläutert.

Der Abfallkalender

Die ICS-Datei des Entsorgers

Die lokalen Entsorgungsunternehmen geben jährlich ihren Abfallkalender an ihre Kunden aus. Früher wünschte der „Müllmann“ gleichzeitig ein „Frohes Neues Jahr“ und freute sich über einen kleinen Obolus. Heute wird der Abfallkalender im Internet veröffentlicht ohne Wünsche, ganz sachlich. 

Darüber hinaus kennen kundenfreundliche Entsorgungsunternehmen die Wünsche ihrer technikbegeisterten Kunden und stellen eine ICS-Datei (iCal Kalenderformat) mit den Abfuhrterminen im Internet zur Verfügung. Als Beispiel leite ich mit diesem Link zur ICS-Datei meines Entsorgers weiter. Es öffnet sich die Eingabeseite des Online-Abfuhrkalenders. Geben Sie doch einmal „Am Borussiapark 15“ ein und wählen danach „Termine anzeigen“. Sie kommen auf eine Seite, von der der aktuelle Jahreskalender entweder als PDF oder als ICS-Datei heruntergeladen werden kann. Bitte wählen Sie das ICS-Format aus. Dateien im ICS-Format können leicht in einen Google-Kalender importiert werden. Diese Datei besteht aus knappen 900 Zeilen und diese sind im ersten Augenblick verwirrend. Durch Hinzufügen von einigen Leerzeilen wird das Ganze verständlich. Hier mal ein Auszug von zwei Abfuhrterminen:

Wenn es einen Dateiheader gibt, ist auch ein Dateifooter vorhanden. Der ist in der letzten Zeile zu finden und hier nicht aufgeführt. Der Header und die einzelnen Datensätze können schon mal von dem hier gezeigten abweichen; wichtig ist, dass es eine ICS-Datei ist. Fragen Sie mal bei Ihrem Entsorger nach, ob und wenn ja, wo Sie die ICS-Datei finden.

Sind die Inhalte des Feldes SUMMARY: zu lang für eine Anzeige im Display, kommen Sie nicht umhin die ICS-Datei über einen Editor in diesem Punkt zu bearbeiten.

Ist die Datei bearbeitet, muss sie in den Google-Kalender eingefügt werden. Da ich die zuständigen Wohnungen als Bemerkung hinzufügen musste, ergänzte ich hinter der Zeile „DTSTASMP:…“ die Zeile „DESCRIPTION: Whg(n)“. Das „n“ steht für die jeweilige Wohnungsnummer. Das musste ich aber manuell machen.

Wie eine ISC-Datei in einen Google-Kalender eingefügt wird, zeigen etliche gute Tutorials in Video- oder Textformat. Einfach nach „ICS-Datei in Google-Kalender importieren“ suchen.

Zum jetzigen Zeitpunkt haben wir einen Kalender, der alle relevanten Termine enthält. Damit sind die Vorarbeiten bereits geleistet.

Manuelle Eingabe

Wird vom zuständigen Entsorger keine geeignete Datei zur Verfügung gestellt, bleibt nur die Möglichkeit die Daten aus dem Abfuhrkalender händisch direkt in den Google-Kalender einzufügen. Ein wenig Arbeit - habe ich aber auch schon hinter mir. Ich kann versichern: Es geht! 

Hinweis: Einträge in dem Google-Kalenderfeld „Beschreibung hinzufügen“ tauchen später in der letzten Spalte rechts im Display auf. Sie dürfen also nicht zu lang werden. Es sei denn, die Größe der Tabellenfelder wird verändert. Bei zeitlich gebundenen Terminen (wie Besuche, Verabredungen u.ä.) würde ich in dieses Feld die Uhrzeit einsetzen.

Nun liegt in Google ein Kalender, aus dem wir Daten abrufen und weiterverwenden können. Dafür benötigen wir dann Node-Red.

Die Felder der Tabelle im Display

Der eigentliche Abfallkalender besteht aus einer 4-zeiligen Tabelle. Die Bezeichnung der einzelnen Tabellenfelder geschieht nach dem Vorbild einer Excel-Tabelle: Die Zeilen werden durchnummeriert und die Spalten erhalten Buchstaben. 

Spalte „A“ enthält die Kurzform des Wochentages der Abholung. Diese wird aus der Datenzeile 

 DTEND;TZID=Europe/Berlin:20220327T180000 

der ICS-Datei dem Gesamtsystem zur Verfügung gestellt. Spalte „B“ wird aus der gleichen Datenzeile gebildet. Spalte „C“ wird aus der Datenzeile 

 SUMMARY:Restmüll

gebildet. Die Spalte „D“ kann durch eigene Angaben (wie bei mir) beliebig gewählt werden. Der Inhalt hat seinen Ursprung in der Datenzeile 

 DESCRIPTION:Whg 2

Bei allen Datenfeldern sollte man bedenken, dass die Länge des Inhaltes durch die Spaltenbreite begrenzt ist. Durch Veränderung der Schriftgröße lässt sich die Länge des Inhaltes vergrößern. Wie und wo sehen wir später.

Die Datenfelder im Google-Kalender

Der Google Kalender dient später als Zwischenstation, um die Daten für Node-Red zur Verfügung zu stellen. 

Node-Red und MQTT

Es gibt viele Tutorials, in denen die Installation und Wirkungsweise beschrieben werden. Ich kann nur jedem, der Node-Red und MQTT installieren möchte, empfehlen, dem hier auf AZ-Delivery beschriebenen Blog von Jürgen Grzesina zu folgen. Ich setze ab hier die Installation und Grundkenntnisse von Node-Red und MQTT voraus. 

Datensammel- und Verteilstation MQTT

Bei mir ist MQTT der Dreh- und Angelpunkt zwischen den unterschiedlichsten Systemen. So kann das HUE-Licht mit der Heimautomation zusammenarbeiten, die SONOS-Box gehorcht einem 433Mhz-Schalter, wenn die Waschmaschine fertig ist, wird eine Mail gesendet; (fast) alles ist möglich - auch hier bei uns.

Es wäre müßig jetzt hier eine Einführung in MQTT folgen zu lassen. Auch in diesem Projekt ist MQTT die Datenzentrale des Gesamtprojektes. 

Wir senden die benötigten Daten über einen Node-Red Knoten an den Broker, damit er diese an diejenigen weitergibt, die diese Daten abonniert haben. Ich gehe später noch darauf ein.

Das Senden an den Broker nennen wir „publish“, also veröffentlichen. Jede „Veröffentlichung“ geht einher mit der Nennung eines „Faches“ wo der Wert gespeichert werden soll. Der Adresse des „Faches nennt man „topic“.  Derjenige, der einen bestimmten Wert vom Broker benötigt, muss erstens das Topic des Wertes kennen und zweitens dem Broker mitteilen, dass er diesen Wert aus dem Topic „XY“ haben möchte - er abonniert einen Topic bei Broker. Diesen Vorgang nennt man „subscribe“. Tiefer möchte ich hier nicht einsteigen, es gibt ganze Bücher, die sich mit dem MQTT-Protokoll beschäftigen. Ich benutze bei mir die Software „mosquitto“ auf einem Rasperry Pi.

Datenaufbereitung mit Node-Red

Als technikbegeisterter Mensch werde ich hellhörig, wenn ich etwas nicht verstehe. So auch, als ich das erste Mal einen „Flow“ gesehen habe. Der Flow ist mehr als eine grafische Darstellung; er ist auch die Beschreibung einer gewünschten Funktionsfähigkeit. Das ist anfangs neu gewesen, hat aber durch die Klarheit und Nachvollziehbarkeit mein Herz im Sturm erobert. Gleichzeitig stellt Node-Red eine durchaus ansprechende Benutzeroberfläche zur Verfügung. Außerdem wird durch Foren und Tutorials der Anfänger bestmöglich unterstützt.

Ausblick

Im zweiten Teil importieren wir den Flow in Node-Red und gestalten die Ausgabe auf dem Display. Anschließend richten wir ESPHome ein und programmieren den ESP32.

Teil 2, Teil 3

Eberhard Werminghoff