OLED-Display an ioBroker

ioBroker-Datenanzeige: -> ioBroker-> Wemos D1 mini > -> OLED-Display

Eine Anmerkung vorweg:
Dies ist kein Projekt für ioBroker-/Arduino-Anfänger.
Es sollten Grundkenntnisse im Erstellen von ioBroker-Javascript,
sowie zum Flashen von Wemos D1 mini mittels der Arduino-IDE vorhanden sein.

Hier möchte ich mein ioBroker-OLED-Display vorstellen, welches auf dem gleichen Prinzip basiert, wie meine ioBroker DOT Matrix Laufschrift.
Eine Besonderheit (man könnte auch Gimmick sagen) meines Displays ist es, zusätzlich zu den entspr. Daten, kleine, z.T. animierte Icons darzustellen.
Aktuelle Uhrzeit und Datum werden nicht von ioBroker geliefert, sondern autark zyklisch via NTP aktualisiert.

Hardware:

0,96" OLED-Display 128x64 I2C, ca. 6,- €
Wemos D1 mini, ca. 5,- €
USB-Steckernetzteil mit Micro USB-Kabel, ca. 5,- €
Kleinteile (Schaltlitze, 1 Micro-Taster)

Schaltplan:

Den Reset-Taster habe ich nur eingebaut, damit man - falls sich der Wemos mal aufhängen sollte - nicht den USB-Stecker vom Netzteil ziehen muss. Der Taster kann aber auch entfallen.

Ein entspr. Gehäuse zum Selberdrucken kann man hier finden: 3D-Druck Gehäuse für OLED-Display und Wemos D1 mini

Achtung : Es gibt bei den 0.96"-OLED wohl verschiedene Platinenausführungen: Eine mit Langlöchern zur Befestigung und eine mit Rundlöchern. Für das o.a. Gehäuse eignet sich nur die Rundloch-Version, weil die Langlochversion etwas breiter ist

Es können (theoretisch) beliebig viele Werte aus ioBroker-Datenpunkten an das 128x64 Pixel Oled-Display gesendet werden. Zur Aufbereitung der Werte wird ein ioBroker-JavaScript (JS) verwendet, mein OLED.js soll aber nur als Beispiel dienen, die entspr. Werte/Datenpunkte müssen natürlich an die eigene Konstellation angepasst werden.

Erläuterungen zum JavaScript OLED.js:

1.) Das Script legt einen Datenpunkt "javascript.0.OLED-Display" (Typ string, bzw. Zeichenkette) an, in dem zum Schluß der kpl. Datenstring fü das Display abgelegt wird.
2.) Das Skript wird bei mir zyklisch zu jeder 39ten Sekunde ausgeführt, also im 1 Min-Rhythmus.
3.) In der function OLED_Aktualisieren werden die IP-Adresse des Wemos D1 Mini, sowie der Ausgabe-Datenpunkt festgelegt, in dem alle Werte für das Display abgelegt werden.
4.) Dann folgen die ioBroker Einlese-Datenpunkte, also die Datenpunkte, welche die Werte enthalten, die man darstellen will.
5.) Anschließend werden mit entspr. if-Abfragen die entspr. Einzelstrings generiert, wie z.B.:
if (restmuell_heute == true) { var RestMuellHeute = 'Heute: Restmüll;'} else { var RestMuellHeute = '' }
Das heißt, wenn heute die Abholung von Restmüll ansteht, wird die Variable "RestMuellHeute" mit dem entspr. Einzelstring 'Heute: Restmüll;' gefüllt. Steht heute kein Restmüll an, wird die Variable "RestMuellHeute" mit einem Leerstring gefüllt.
Achtung! : Der String muss immer mit einem Semikolon abgeschlossen werden, welches als Feldtrenner dient.
6.) Wenn alle Einzelstrings erzeugt worden sind, werden sie zu einem kpl. Ausgabestring zusammengesetzt:
var ausgabe = Service + DutyCycle + Badezimmer + load + tf_aussen + tf_wohnzimmer +tf_badewasser + druck_regen + GelbSackMorgen + GelbSackHeute + BioMuellHeute + BioMuellMorgen + PapierHeute + PapierMorgen + RestMuellHeute + RestMuellMorgen + geb0 +geb1 + geb2 + open_windows + wasservbr + Waschmaschine
7.) Dieser Ausgabestring wird dann in den unter 1.) erwähnten Datenpunkt geschrieben.
8.) Danach wird via UDP eine Message "update" an den Wemos D1 mini gesendet, daß neue Daten zur Abholung bereit liegen.

Erläuterungen zum Arduino-Sketch OLED-ioBroker.ino
und zu der zugehörigen Icon-Datei images.h:
Hinweis: Diese beiden Dateien müssen im gleichen Ordner gespeichert werden!

Der Wemos D1 mini verbindet sich als erstes mit dem lokalen WLAN. Da ich ein Freund statischer IP-Adressen für fest installierte Geräte bin, müssen die entspr. Netzwerkparameter im Sketch eingetragen werden.

Ebenso können verschiedene Dauern für Zeit-, bzw. Datenanzeige festgelegt werden ( bei mir: anzeigedauer_zeit = 4000 = 4 Sekunden, anzeigedauer_daten = 3500 = 3,5 Sekunden ).

Wenn die Helligkeit des OLED-Displays stören sollte, kann man sie abends dimmen und morgens wieder aufhellen ( bei mir: display_dimmen = 22 = Display ab 22:00 Uhr dimmen, display_aufhellen = 8 = Display ab 08:00 Uhr wieder aufhellen )

Zur besseren Übersicht habe ich die Bereiche, wo eigene Parameter eingetragen werden müssen mit Hashes (#) abgegrenzt.

Wenn ioBroker via JS eine UDP-Message gesendet hat, daß neue Daten zu Abholung bereit liegen, werden diese via http.GET vom Wemos D1 mini abgeholt.
Deshalb muss im Sketch auch die entspr. HTTP-Adresse hinterlegt werden, wo die Daten abzuholen sind:
"http://<ioBroker IP-Adresse>:8087/getPlainValue/javascript.0.OLED-Display"
Dieser Datenpunkt wurde ja bereits vom o.a. JavaScript angelegt, bzw. gefüllt.

Liegen beim erstmaligen Boot noch keine Daten vor, wird auf dem Display im Wechsel die Uhrzeit und "Warte auf ioBroker-Daten ..." angezeigt.
Nach maximal 1 Minute sollten die Daten dann aber verfügbar sein.

Hinweis:
Nach dem erstmaligen Flashen des Wemos über die serielle Schnittstelle der Arduino-IDE,
kann danach auch via WLAN geflashed werden ( OTA = Over the air )

Zur Ansteuerung des OLED-Displays wird eine spezielle Library benötigt, welche hier heruntergeladen werden kann:
https://github.com/ThingPulse/esp8266-oled-ssd1306

Tipp: Nach dem Herunterladen der Library sollten zum Testen erst mal die zugehörigen Beispiele durchprobiert werden, welche unter esp8266-oled-ssd1306/examples/ zu finden sind

Die restlichen erforderlichen Libraries sollten bekannt, bzw. schon in der Arduino-IDE installiert sein.
------------------------------------

Die Haupt-, bzw. Anpassungs-Arbeiten werden aber in der loop des Sketches erforderlich sein.
Wie bereits erwähnt, wird ja jeder seine individuellen Datenpunkte verwenden wollen, d.h. es müssen für jeden Screen des Displays entspr. Parameter festgelegt werden, sofern zusätzlich zum Text ein Icon angezeigt werden soll.

Ich möchte das hier anhand des Strings " Badezimmer ist besetzt" erläutern:
Wenn im Gesamtstring, der ja via http.GET abgeholt wurde, sich ein Teilstring "besetzt" befindet, soll ein animiertes Icon namens "toilet" angezeigt werden.
Deshalb wird in der loop folgende if-Abfrage erstellt:


         else if(currentValue.indexOf("besetzt") >= 0 ){

          //Animiertes Toiletten-Icon

            for(int x=-40; x<=75; x++){

              delay(1);

              display.clear();
                    
              display.drawXbm(x, 20, toilet_width, toilet_height, toilet_bits); // toilet-picture

              display.display();

            }

Hier wird zuerst geprüft, ob im Gesamtstring der Teilstring "besetzt" enthalten ist.
Wenn ja, wird in einer Schleife das Toiletten-Icon jeweils um 1 Pixel nach rechts versetzt in x-Richtung verschoben.
Das sieht dann optisch so aus, als ob das Icon von links nach rechts über das Display wandert.
Die Parameter der Schleife, hier also von x=-40 bis x=75 richten sich dabei nach der Größe des Icons und können leider nur mit mehrmaligem Testen/Neuflashen ermittelt werden, bis das Icon in seiner Endposition in der rechten unteren Ecke des Diplays angekommen ist.
Das ist leider eine zeitraubende Angelegenheit und ich habe keine andere Möglichkeit, als Try & Error gefunden.
Nachdem das Icon gezeichnet wurde, wird weiter unten in der loop im Abschnitt "//Alle vorhandenen Datensaetze nacheinander anzeigen" der zugehöge Text, also "Badezimmer ist besetzt", ebenfalls an das Display gesendet.
Es wird also zuerst das Icon gezeichnet und anschl. zusätzlich der Text im gleichen Screen dargestellt.
Man muss dabei aber darauf achten, daß sich Icon und Text nicht überlappen, da es sonst unschön aussieht.
Deshalb sollte man die Icons nicht zu groß machen. Ich empfehle ein Größe von ca. 40px x 40px.

Erstellen von eigenen Icons:
Die Icons befinden sich in der Datei images.h. Sie sind dort im sog. XBM-Format - einem speziellen Textformat - abgelegt. Um ein eigenes Icon zu erstellen, wählen wir ein Schwarz-Weiß-Bild (z.B. im jpg-Format) entspr. Größe, welches wir mit diesem Online-Konverter to XBM hochladen und konvertieren können.
Als Beispiel soll wiederum das Toiletten-Icon dienen, welches im Original als toilet.jpg vorliegt:

Nachdem dieses JPG auf den Online-Konverter hochgeladen und konvertiert wurde, können wir die entspr. toilet.XBM herunterladen und abspeichern. Die toilet.XBM sieht dann so aus:

#define 1591528183789_width 40
#define 1591528183789_height 40
static char 1591528183789_bits[] = {
0x00, 0x00, 0x20, 0x00, 0x00, 0x80, 0x0F, 0x20, 0xC0, 0x07, 0x80, 0x1F,
0x20, 0xC0, 0x0F, 0x80, 0x1F, 0x20, 0xE0, 0x0F, 0x80, 0x1F, 0x20, 0xE0,
0x0F, 0x80, 0x1F, 0x20, 0xC0, 0x0F, 0x00, 0x0F, 0x20, 0x80, 0x07, 0x00,
0x00, 0x20, 0x00, 0x00, 0xE0, 0x3F, 0x20, 0xF8, 0x3F, 0xF0, 0x7F, 0x20,
0xFC, 0xFF, 0xF0, 0xFF, 0x20, 0xFE, 0xFF, 0xF8, 0xFF, 0x20, 0xFE, 0xFF,
0xF8, 0xDF, 0x21, 0xFE, 0xFF, 0xD8, 0xDF, 0x21, 0xF6, 0xDF, 0xDC, 0xBF,
0x21, 0xF6, 0xDF, 0xDC, 0xBF, 0x23, 0xF6, 0xDF, 0xEC, 0xBF, 0x23, 0xF6,
0xDF, 0xEE, 0x7F, 0x23, 0xF6, 0xDF, 0xEE, 0x7F, 0x23, 0xF6, 0xDF, 0xF6,
0x7F, 0x27, 0xF6, 0xDF, 0xF6, 0xFF, 0x26, 0xF6, 0xDF, 0xF6, 0xFF, 0x26,
0xF6, 0xDF, 0xF0, 0xFF, 0x20, 0xF6, 0xDF, 0xF8, 0xFF, 0x20, 0xF6, 0xDF,
0xF8, 0xFF, 0x21, 0xF0, 0x1E, 0xF8, 0xFF, 0x21, 0xF0, 0x1E, 0xFC, 0xFF,
0x23, 0xF0, 0x1E, 0xFC, 0xFF, 0x23, 0xF0, 0x1E, 0xC0, 0x1D, 0x20, 0xF0,
0x1E, 0xC0, 0x1D, 0x20, 0xF0, 0x1E, 0xC0, 0x1D, 0x20, 0xF0, 0x1E, 0xC0,
0x1D, 0x20, 0xF0, 0x1E, 0xC0, 0x1D, 0x20, 0xF0, 0x1E, 0xC0, 0x1D, 0x20,
0xF0, 0x1E, 0xC0, 0x1D, 0x20, 0xF0, 0x1E, 0xC0, 0x1D, 0x20, 0xF0, 0x1E,
0xC0, 0x1D, 0x20, 0xF0, 0x1E, 0xC0, 0x1D, 0x20, 0xF0, 0x1E, 0xC0, 0x1D,
0x20, 0xF0, 0x1E, 0x80, 0x0D, 0x20, 0xE0, 0x0E, };

Damit sie für unseren Zweck passt, müssen wir noch die 3 Header-Zeilen anpassen und wiederum abspeichern:
#define toilet_width 40
#define toilet_height 40
const uint8_t toilet_bits[] PROGMEM = {
.......
.......
.......

Diesen Code können wir nun in die Datei images.h einfügen und nach erneutem Flashen des Wemos D1 mini steht uns das toilet-Icon zur Verfügung. Es kann dann mit display.drawXbm(x, y, toilet_width, toilet_height, toilet_bits) auf dem Display dargestellt werden.

P.S.
Ein kleiner Schönheitsfehler ist noch im Sketch enthalten:
Der Wemos verbindet sich beim Booten teilw. bis zu 3 Mal mit dem WLAN, obwohl lt. seriellem Monitor die WLAN-Verbindung bereits erfolgreich hergestellt wurde.
Es ist mir bisher nicht gelungen, diesen Schönheitsfehler zu fixen. Probehalber wurde der Sketch auch auf einen NodeMCU geflasht, der aber leider das gleiche Verhalten zeigt. Ansonsten funktioniert der Sketch auch auf einem NodeMCU.