Willkommen, liebe Maker! In der Welt der Mikrocontroller und DIY-Elektronik sind Displays unerlässlich, um Informationen anzuzeigen und mit euren Projekten zu interagieren. In dieser umfassenden Anleitung tauchen wir tief in die Materie ein und zeigen euch, wie ihr mit dem ESP32 und der SH1106 Bibliothek ein OLED-Display ansteuert. Egal, ob ihr Anfänger oder erfahrener Bastler seid, hier findet ihr alles, was ihr wissen müsst, um eure Projekte auf das nächste Level zu heben.
Warum der ESP32 und das SH1106 OLED-Display?
Der ESP32 ist ein leistungsstarker und vielseitiger Mikrocontroller, der sich durch seine integrierte WiFi– und Bluetooth-Konnektivität auszeichnet. Er ist ideal für Projekte, die eine drahtlose Anbindung benötigen, wie z.B. IoT-Geräte, Smart Home Anwendungen und vieles mehr. Seine Rechenleistung und der großzügige Speicherplatz machen ihn zu einer guten Wahl für komplexere Aufgaben.
Das SH1106 OLED-Display ist ein kleines, aber feines Anzeigemodul, das sich durch seinen hohen Kontrast und seine gute Lesbarkeit auszeichnet. Im Gegensatz zu LCDs benötigt es keine Hintergrundbeleuchtung, was den Stromverbrauch deutlich reduziert. Es ist relativ einfach anzusteuern und daher besonders für Projekte mit Mikrocontrollern geeignet. Die Kombination aus ESP32 und SH1106 bietet also eine optimale Plattform für interaktive Projekte.
Was ihr für dieses Tutorial benötigt
Bevor wir loslegen, stellen wir sicher, dass ihr alles Notwendige zur Hand habt:
- Ein ESP32 Entwicklungsboard
- Ein SH1106 OLED-Display (128×64 Pixel)
- Jumperkabel
- Ein USB-Kabel zur Programmierung des ESP32
- Einen Computer mit installierter Arduino IDE
- Die SH1106 Bibliothek für die Arduino IDE (erhältlich über den Bibliotheksmanager)
Schritt-für-Schritt Anleitung: Anschluss und Konfiguration
1. Die Hardware-Verbindung
Die Verbindung zwischen dem ESP32 und dem SH1106 Display ist relativ einfach. Wir verwenden hier die I2C-Schnittstelle, da sie nur wenige Pins benötigt. Verbindet die Komponenten wie folgt:
- ESP32 GND mit SH1106 GND
- ESP32 VCC (3.3V) mit SH1106 VCC
- ESP32 SDA (GPIO21) mit SH1106 SDA
- ESP32 SCL (GPIO22) mit SH1106 SCL
Wichtig: Überprüft vor dem Anschließen nochmals die Pinbelegung eures ESP32 Boards und eures SH1106 Displays, um Kurzschlüsse oder Schäden zu vermeiden.
2. Installation der SH1106 Bibliothek in der Arduino IDE
Die Arduino IDE ist unsere Entwicklungsumgebung. Um die SH1106 Display anzusteuern, benötigen wir die entsprechende Bibliothek. Geht dazu wie folgt vor:
- Öffnet die Arduino IDE.
- Geht zu „Werkzeuge” -> „Bibliotheken verwalten…”.
- Sucht nach „SH1106” oder „SSD1306” (da SH1106 oft als kompatibel zu SSD1306 behandelt wird).
- Installiert die Bibliothek von olikraus (U8g2lib). Diese Bibliothek unterstützt viele Displays, einschließlich des SH1106.
3. Der Beispielcode
Nach der Installation der Bibliothek können wir mit dem Programmieren beginnen. Hier ist ein einfacher Beispielcode, der „Hallo Welt!” auf dem Display anzeigt:
#include <U8g2lib.h>
// Konstruktor für SH1106 Display mit I2C
U8G2_SH1106_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8G2_PIN_NONE);
void setup() {
u8g2.begin();
}
void loop() {
u8g2.clearBuffer(); // Lösche den Puffer
u8g2.setFont(u8g2_font_ncenB08); // Wähle eine Schriftart
u8g2.drawStr(0, 12, "Hallo Welt!"); // Zeichne den Text
u8g2.sendBuffer(); // Sende den Puffer zum Display
delay(1000);
}
Erläuterungen zum Code:
#include <U8g2lib.h>: Diese Zeile inkludiert die U8g2lib Bibliothek, die wir für die Ansteuerung des Displays benötigen.U8G2_SH1106_128X64_NONAME_F_HW_I2C u8g2(U8G2_R0, /* reset=*/ U8G2_PIN_NONE);: Hier wird ein Objekt der KlasseU8G2_SH1106_128X64_NONAME_F_HW_I2Cerzeugt. Dies ist der Konstruktor, der die Art des Displays (SH1106, 128×64 Pixel) und die verwendete Schnittstelle (I2C) festlegt.U8G2_R0gibt an, dass das Display nicht gedreht werden soll.U8G2_PIN_NONEbedeutet, dass kein Reset-Pin verwendet wird.u8g2.begin();: Initialisiert das Display.u8g2.clearBuffer();: Löscht den Anzeigepuffer, bevor neue Inhalte gezeichnet werden.u8g2.setFont(u8g2_font_ncenB08);: Wählt eine Schriftart für den Text. Es gibt viele verschiedene Schriftarten in der U8g2lib, die ihr ausprobieren könnt.u8g2.drawStr(0, 12, "Hallo Welt!");: Zeichnet den Text „Hallo Welt!” an den Koordinaten (0, 12). Die Koordinaten beziehen sich auf die obere linke Ecke des Textes.u8g2.sendBuffer();: Sendet den Inhalt des Puffers an das Display, um ihn anzuzeigen.delay(1000);: Wartet eine Sekunde, bevor der Puffer wieder gelöscht und der Text erneut gezeichnet wird.
4. Hochladen des Codes auf den ESP32
- Verbindet euren ESP32 mit dem Computer.
- Wählt in der Arduino IDE unter „Werkzeuge” -> „Board” euer ESP32-Board aus.
- Wählt unter „Werkzeuge” -> „Port” den COM-Port aus, an dem euer ESP32 angeschlossen ist.
- Klickt auf den Upload-Button (Pfeil nach rechts), um den Code auf den ESP32 zu übertragen.
Nachdem der Code erfolgreich hochgeladen wurde, sollte auf eurem SH1106 Display „Hallo Welt!” erscheinen.
Fortgeschrittene Techniken
Nachdem ihr nun die Grundlagen beherrscht, wollen wir uns einige fortgeschrittene Techniken ansehen, um das volle Potenzial des ESP32 und des SH1106 Displays auszuschöpfen.
Texte formatieren und positionieren
Mit der U8g2lib könnt ihr Texte vielfältig formatieren und positionieren. Probiert verschiedene Schriftarten aus, ändert die Textausrichtung und experimentiert mit den Koordinaten, um eure Texte optimal zu präsentieren.
u8g2.setFont(u8g2_font_profont15); // Kleinere Schrift
u8g2.drawStr(10, 30, "Kleiner Text");
u8g2.setFont(u8g2_font_helvB18); // Große, fette Schrift
u8g2.drawStr(10, 60, "GROSS");
Grafiken anzeigen
Ihr könnt auch Grafiken auf dem Display anzeigen. Die U8g2lib bietet Funktionen zum Zeichnen von Linien, Rechtecken, Kreisen und sogar Bitmaps. Um Bitmaps anzuzeigen, müsst ihr die Bitmap-Daten in einem Array speichern und dann mit der Funktion u8g2.drawXBM() auf das Display zeichnen.
Variablen und Sensordaten anzeigen
Das Anzeigen von Variablen und Sensordaten ist ein häufiger Anwendungsfall. Hier ist ein Beispiel, wie ihr einen Sensorwert auf dem Display darstellen könnt:
int sensorWert = analogRead(34); // Beispiel: Analogwert von Pin 34 lesen
String text = "Sensor: " + String(sensorWert);
u8g2.clearBuffer();
u8g2.setFont(u8g2_font_ncenB08);
u8g2.drawStr(0, 12, text.c_str());
u8g2.sendBuffer();
Animationen erstellen
Mit etwas Geschick könnt ihr auch einfache Animationen auf dem SH1106 Display erstellen. Das Prinzip ist einfach: Löscht das Display, zeichnet ein neues Bild und wiederholt den Vorgang. Durch schnelles Ändern des Inhalts entsteht der Eindruck einer Bewegung.
Troubleshooting
Sollten Probleme auftreten, hier einige Tipps:
- Keine Anzeige: Überprüft die Verkabelung und stellt sicher, dass das Display korrekt mit Strom versorgt wird. Stellt sicher, dass die I2C-Adresse korrekt ist (Standardmäßig 0x3C oder 0x3D). Einige Displays benötigen Pull-Up Widerstände an den SDA- und SCL-Leitungen.
- Falsche Darstellung: Überprüft die Initialisierung des Displays im Code. Stellt sicher, dass ihr den richtigen Konstruktor für euer Display verwendet.
- Bibliotheksprobleme: Stellt sicher, dass ihr die richtige Version der U8g2lib installiert habt. Aktualisiert die Bibliothek gegebenenfalls.
Fazit
Mit dieser Anleitung habt ihr nun das nötige Wissen, um ein SH1106 OLED-Display mit eurem ESP32 anzusteuern. Die Möglichkeiten sind endlos: von einfachen Textanzeigen bis hin zu komplexen grafischen Darstellungen. Experimentiert, probiert neue Dinge aus und lasst eurer Kreativität freien Lauf! Wir hoffen, diese Anleitung hat euch geholfen, eure Maker-Projekte auf das nächste Level zu heben. Viel Spaß beim Basteln!