Arduino Tutorial 61: NodeMCU ESP8266 mit OLED Display

In diesem Tutorial möchte ich einen Microcontroller mit einem verbauten OLED Display vorstellen. Der Microcontroller ist ein NodeMCU mit einem ESP8266 Wifi Chip.

NodeMCU mit OLED Display
NodeMCU mit OLED Display

Einen NodeMCU habe ich bereits im Tutorial NodeMCU – “Einer für (fast) Alles!” vorgestellt und möchte hier nun auf den betrieb mit dem OLED Display eingehen.

Der Microcontroller wurde mir vom Onlineshop Makershop.de für ein Review zur Verfügung gestellt. 

Bezug

Den Microcontroller kannst du auf ebay.de im Shop von Makershop.de für 14,45€ erwerben (Versandkosten fallen nicht an).

Technische Daten des NodeMCU mit OLED Display

NodeMCU

  • 12 digitale Pins
  • 1 analoger Eingang
  • Micro USB Buchse
  • Eingangsspannung 4,75V bis 12V
  • Abmaße 6,2cm x 2,7cm

OLED Display

  • Abmaße 0,96 Zoll (2,7cm x 1,5cm)

Besonderheiten

Der NodeMCU mit OLED Display ist breiter als der NodeMCU.

Vergleich von einfachen NodeMCU mit einem mit Display
Vergleich von einfachen NodeMCU mit einem mit Display

Wenn der Microcontroller auf ein Steckbrett verbaut wird, so kann man nur eine Pinreihe verwenden.

NodeMCU auf einem Steckbrett verbaut
NodeMCU auf einem Steckbrett verbaut

Auf dem NodeMCU mit OLED Display ist bereits ein Sketch installiert welcher auf dem Display einige Funktionen zeigt.

 

Quellcode

In den nachfolgenden Beispielen möchte ich aufzeigen wie das Display des Microcontrollers betrieben wird.

Installation der benötigten Bibliothek

Für den betrieb des Displays wird eine Bibliothek benötigt, diese kann man bequem über die Arduino IDE installieren. Dazu wird über das Hauptmenü der Eintrag „Sketch“ (1) -> „Bibliothek einbinden“ (2) -> „Bibliotheken verwalten …“ (3) navigiert. 

Öffnen des Boardverwalters
Öffnen des Boardverwalters

Es sollte sich nun nach einer kurzen Ladezeit der Boardverwalter öffnen. In diesem Dialog suchen wir zunächst nach dem Eintrag „SSD1306“ (1) danach wird der Eintrag ESP8266 and ESP32 Oled Driver for SSD12306 ….“(2) ausgewählt. Nun noch die Schaltfläche „Installieren“ (3) betätigen. Nachdem die Installation erfolgreich war kann der Dialog mit der Schaltfläche „Schließen“ (4) geschlossen werden.

Boardverwalter, installieren der SSD1306 Bibliothek für das OLED Display
Boardverwalter, installieren der SSD1306 Bibliothek für das OLED Display

Wie üblich bringt auch diese Bibliothek einige Beispiele mit welche nach einer kleinen konfiguration lauffähig sind.

ESP OLED Display Bibliothek - Beispiele
ESP OLED Display Bibliothek – Beispiele

SDA & SCL

Das Display ist über die digitalen Pins D1 – SDA & D2 – SCL angeschlossen, dieses muss in den Beispielen geändert / angepasst werden. Dann sind diese jedoch lauffähig.

Hello World!

Als erstes ein Klassiker „Hello World!“. Für die Darstellung von Text kann man zwischen 3 Schriftgrößen wählen.

Schriftgrössen auf dem OLED Display
Schriftgrössen auf dem OLED Display

Für unser „Hello World!“ reicht die Schriftgröße 16 völlig aus.

Textausgabe auf dem OLED Display

Ausgabe des Textes "Hello World!" auf dem OLED Display
Ausgabe des Textes „Hello World!“ auf dem OLED Display

Einfache Grafiken

Auf dem OLED Display können einfache Grafiken angezeigt werden. In dem Sketch welcher ab Werk auf dem NodeMCU installiert wurde ist  das Wifi Zeichen zu sehen.
Wollen wir uns also nun mal ansehen wie eine Grafik auf dem Display erzeugt werden kann.

X BitMap Image

Die Bilder welche auf dem Display angezeigt werden können müssen im X BitMap Format vorliegen.

Auf Wikipedia ist ein kleiner Beitrag zum X BitMap Format zu finden:

X BitMap (XBM) ist ein Format für die Darstellung von monochromen Rastergrafiken, hauptsächlich Cursors und Icons. Das XBM-Dateiformat wurde 1989 durch XPM für X11 ersetzt.Die Grafiken bestehen aus reinen Textdateien; sie können mit einem einfachen Texteditor bearbeitet und direkt in C-Quellcode eingebunden werden.

Seite „X BitMap“. In: Wikipedia, Die freie Enzyklopädie. Bearbeitungsstand: 21. November 2017, 09:08 UTC. URL: https://de.wikipedia.org/w/index.php?title=X_BitMap&oldid=171218654 (Abgerufen: 17. August 2018, 10:06 UTC)

Umandeln von PNG nach XBM

Um ein Bild in das XBM Format umzuwandeln, muss man nicht unbedingt spezielle Software erwerben, man kann dieses bequem online mit dem Tool https://www.online-utility.org/image/convert/to/XBM erledigt. Hier läd man das gewünschte Bild hoch und kann die XBM Datei herunterladen.

Online PNG to XBM Converter
Online PNG to XBM Converter

Ich habe mein Logo im Format 48×48 Pixel hochgeladen und eine Datei mit folgendem Inhalt heruntergeladen:

Quellcode

Ich musste den Datentyp für das Bild von „static char “ in „const uint8_t“ ändern.

Ansonsten habe ich mich am Beispiel orientiert.

Ausgabe des Bildes auf dem OLED Display

Das Logo wird relativ gut dargestellt, jedoch wird deutlich das bei einem weniger aufwändigen Bild das Display seine stärken zeigen kann.

Darstellen des Logos auf dem OLED Display
Darstellen des Logos auf dem OLED Display

Verwandte Beiträge

Schreibe einen Kommentar

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