ESP32 C3 Super Mini - OLED-128x32-Display
Erstellen Sie eigene Anzeigen und visualisieren Sie Daten mit dem OLED-128x32-Display! Der kompakte SSD1306-OLED-Bildschirm bietet kontrastreiche Darstellungen, die sich perfekt für Sensorwerte, Statusinformationen und Grafiken eignen. Dieses einsteigerfreundliche Tutorial zeigt Ihnen, wie Sie ein OLED-128x32-Display an Ihren ESP32 C3 Super Mini anschließen und es so programmieren, dass es über I2C-Kommunikation Text, Zahlen, Formen und eigene Bilder anzeigt.
Was Sie lernen werden:
- Was das OLED-128x32-Display ist und wie es funktioniert
- Wie Sie das OLED-Display mit den I2C-Pins des ESP32 C3 Super Mini verdrahten
- Wie Sie die SSD1306-OLED-Bibliothek installieren und verwenden
- Wie Sie Text, Zahlen und Sensordaten auf dem Bildschirm anzeigen
- Wie Sie Text horizontal und vertikal zentrieren
- Wie Sie mit dem ESP32 C3 Super Mini Formen und Grafiken zeichnen
- Wie Sie eigene Bilder und Bitmaps anzeigen
- Wie Sie häufige Probleme mit OLED-Displays beheben
Praktische Anwendungen:
- Sensoranzeigen für Temperatur-, Luftfeuchtigkeits- und Entfernungswerte
- Statusanzeigen für Systemzustand und WLAN-Verbindung
- Datenlogger mit Live-Sensor-Updates
- Menüsysteme mit interaktiven Benutzeroberflächen
- Wetterstationen, die Vorhersagen und Messwerte anzeigen
- Digitaluhren und Countdown-Timer

Display-Technologie:
OLED-Displays (Organic Light-Emitting Diode) erzeugen ihr eigenes Licht, wodurch keine Hintergrundbeleuchtung nötig ist. Jedes Pixel leuchtet unabhängig und bietet im Vergleich zu herkömmlichen LCD-Displays perfektes Schwarz, hohe Kontrastverhältnisse und große Betrachtungswinkel.
Erforderliche Hardware
| 1 | × | ESP32 C3 Super Mini | |
| 1 | × | Micro-USB-Kabel | |
| 1 | × | SSD1306 I2C OLED-Display 128x32 | |
| 1 | × | Verbindungskabel |
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Überblick über OLED 128x32 Display
Das OLED 128x32 ist ein kompaktes monochromes Displaymodul, das selbstleuchtende OLED-Technologie mit dem Treiberchip SSD1306 verwendet.
Hauptmerkmale:
- Auflösung: 128 Pixel breit × 32 Pixel hoch (insgesamt 4.096 Pixel)
- Bildschirmgröße: Typischerweise 0,91 Zoll Diagonale
- Technologie: Organische Leuchtdiode (selbstleuchtende Pixel)
- Kommunikation: I2C-Schnittstelle (2-Draht-Verbindung)
- Treiberchip: SSD1306
- Farbe: Monochrom (weiße oder blaue Pixel auf schwarzem Hintergrund)
- Spannung: 3,3V - 5V Stromversorgung
- Stromaufnahme: 10-20mA (abhängig von den leuchtenden Pixeln)
- Kontrast: Perfektes Schwarz (Pixel schalten sich vollständig aus)
- Betrachtungswinkel: ~170 Grad
- Reaktionszeit: <1ms

Warum Einsteiger es lieben:
- Einfache I2C-Verdrahtung (nur 4 Verbindungen)
- Keine Hintergrundbeleuchtung nötig (selbstleuchtend)
- Hoher Kontrast macht Text sehr gut lesbar
- Umfangreiche Unterstützung durch Arduino-Bibliotheken
- Geringer Stromverbrauch
- Kompakte Größe passt in kleine Projekte
Vergleich OLED vs. LCD:
| Merkmal | OLED | LCD |
|---|---|---|
| Hintergrundbeleuchtung | Keine (selbstleuchtend) | Erforderlich |
| Kontrast | Perfekt (unendlich) | Begrenzt |
| Schwarzwert | Echtes Schwarz | Grau/beleuchtet |
| Betrachtungswinkel | ~170° | ~120° |
| Stromverbrauch | Niedrig (schwarze Bereiche) | Konstant |
| Dicke | Sehr dünn | Dicker |
| Reaktionszeit | Schnell (<1ms) | Langsamer |
Pinbelegung des OLED-Displays
Das OLED-128x32-Displaymodul hat typischerweise vier Pins für Stromversorgung und I2C-Kommunikation.
- VCC: Stromversorgungspin (3,3V oder 5V)
- GND: Massepin (0V-Bezug)
- SCL: I2C-Taktpin (Serial Clock, wird mit Pin 12 des ESP32 C3 Super Mini verbunden)
- SDA: I2C-Datenpin (Serial Data, wird mit Pin 11 des ESP32 C3 Super Mini verbunden)

I2C-Kommunikation:
- Verwendet nur 2 Drähte (SCL + SDA) für die Datenübertragung
- Standard-I2C-Adresse: 0x3C (manche Module verwenden 0x3D)
- Eingebaute Pull-up-Widerstände (normalerweise auf dem Modul vorhanden)
- Mehrere Geräte können sich denselben I2C-Bus teilen
※ Notiz:
- Die Pin-Anschlüsse von OLED-Modulen können je nach Hersteller variieren – prüfen Sie immer die Beschriftungen auf Ihrem Modul
- Dieses Tutorial verwendet OLED-Displays mit SSD1306-I2C-Treiber (getestet mit DIYables-Modulen)
- Die Pin-Reihenfolge variiert: Manche Module haben GND-VCC-SCL-SDA, andere VCC-GND-SCL-SDA
Verdrahtungsdiagramm
Schließen Sie das OLED-128x32-Display gemäß den unten stehenden I2C-Verbindungen an Ihren ESP32 C3 Super Mini an.

Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Verbindungstabelle:
| OLED-Modul | ESP32 C3 Super Mini |
|---|---|
| VCC | 3,3V |
| GND | GND |
| SDA | SDA (Pin 11) |
| SCL | SCL (Pin 12) |
Verdrahtungstipps:
- Überprüfen Sie vor dem Anschließen die Pin-Beschriftungen auf Ihrem OLED-Modul
- Stellen Sie sicher, dass SDA mit Pin 11 und SCL mit Pin 12 des ESP32 C3 Super Mini verbunden ist
- Verwenden Sie kurze Jumper-Kabel, um Signalstörungen zu minimieren
- Die USB-Stromversorgung des ESP32 C3 Super Mini reicht aus (das OLED benötigt nur 10-20mA)
Programmierung des ESP32 C3 Super Mini mit OLED-Display
SSD1306-OLED-Bibliothek installieren
- Klicken Sie auf das Symbol Libraries auf der linken Seite der Arduino IDE
- Suchen Sie nach SSD1306
- Suchen Sie die Bibliothek Adafruit SSD1306 von Adafruit
- Klicken Sie auf Install, um die Bibliothek hinzuzufügen

- Wenn Sie zur Installation von Abhängigkeiten aufgefordert werden, klicken Sie auf Install All, um die erforderlichen Bibliotheken hinzuzufügen (einschließlich Adafruit GFX)

Grundlegende Schritte zur OLED-Programmierung
Erforderliche Bibliotheken einbinden:
Displayabmessungen definieren:
Display-Objekt erstellen:
Display in setup() initialisieren:
Inhalte anzeigen:
- Verwenden Sie Zeichenfunktionen, um Text, Formen und Bilder hinzuzufügen
- Rufen Sie oled.display() auf, um Ihre Inhalte auf dem Bildschirm anzuzeigen
ESP32 C3 Super Mini Code - Text auf dem OLED anzeigen
Wichtige OLED-Textfunktionen:
- oled.clearDisplay() – Löscht alle Pixel auf dem Bildschirm
- oled.setTextSize(n) – Legt die Textgröße fest (1-8, wobei 1 die kleinste ist)
- oled.setCursor(x, y) – Legt die Startposition für den Text fest
- oled.setTextColor(WHITE) – Setzt die Textfarbe auf Weiß
- oled.setTextColor(BLACK, WHITE) – Setzt die Textfarbe auf Schwarz mit weißem Hintergrund
- oled.print("text") – Gibt Text ohne Zeilenumbruch aus
- oled.println("text") – Gibt Text mit Zeilenumbruch aus
- oled.println(number) – Gibt einen Zahlenwert aus
- oled.println(number, HEX) – Gibt eine Zahl im Hexadezimalformat aus
- oled.display() – Aktualisiert den Bildschirm, um alle Änderungen anzuzeigen
Scroll-Funktionen:
- oled.startscrollright(start, stop) – Scrollt Text von links nach rechts
- oled.startscrollleft(start, stop) – Scrollt Text von rechts nach links
- oled.startscrolldiagright(start, stop) – Scrollt diagonal (von unten links nach oben rechts)
- oled.startscrolldiagleft(start, stop) – Scrollt diagonal (von unten rechts nach oben links)
- oled.stopscroll() – Stoppt die Scroll-Animation
Textgrößen-Referenz für das 128x32-Display:
- Größe 1: ~21 Zeichen pro Zeile, 4 Zeilen (6×8 Pixel pro Zeichen)
- Größe 2: ~10 Zeichen pro Zeile, 2 Zeilen (12×16 Pixel pro Zeichen)
- Größe 3: ~7 Zeichen pro Zeile, 1 Zeile (18×24 Pixel pro Zeichen)
Text auf dem OLED-Display zentrieren
Um zu lernen, wie Sie Text und Zahlen mit dem ESP32 C3 Super Mini auf dem OLED-128x32-Display horizontal und vertikal zentrieren, lesen Sie diese ausführliche Anleitung:
Wie man Text auf einem OLED vertikal/horizontal zentriert
Schnelle Zentrierungsformel:
- Horizontale Mitte: x = (128 - textWidth) / 2
- Vertikale Mitte: y = (32 - textHeight) / 2
- Textbreite = Zeichen × 6 × textSize
- Texthöhe = 8 × textSize
ESP32 C3 Super Mini Code - Formen auf dem OLED zeichnen
Wichtige Zeichenfunktionen:
- oled.drawPixel(x, y, color) – Zeichnet ein einzelnes Pixel an einer Position
- oled.drawLine(x0, y0, x1, y1, color) – Zeichnet eine Linie zwischen zwei Punkten
- oled.drawRect(x, y, width, height, color) – Zeichnet den Umriss eines Rechtecks
- oled.fillRect(x, y, width, height, color) – Zeichnet ein gefülltes Rechteck
- oled.drawCircle(x, y, radius, color) – Zeichnet den Umriss eines Kreises
- oled.fillCircle(x, y, radius, color) – Zeichnet einen gefüllten Kreis
- oled.drawTriangle(x0, y0, x1, y1, x2, y2, color) – Zeichnet den Umriss eines Dreiecks
- oled.fillTriangle(x0, y0, x1, y1, x2, y2, color) – Zeichnet ein gefülltes Dreieck
- oled.drawRoundRect(x, y, width, height, radius, color) – Zeichnet ein abgerundetes Rechteck
- oled.fillRoundRect(x, y, width, height, radius, color) – Zeichnet ein gefülltes abgerundetes Rechteck
ESP32 C3 Super Mini Code - Bilder auf dem OLED anzeigen
Um eigene Bilder auf dem OLED-128x32-Display anzuzeigen, wandeln Sie Ihr Bild mit dem Online-Konverter in ein Bitmap-Array um.
Schritte zur Bildkonvertierung:
- Besuchen Sie den Bild-zu-Bitmap-Konverter
- Laden Sie Ihre Bilddatei hoch (JPG, PNG usw.)
- Legen Sie Breite und Höhe fest (maximal 128×32 für dieses Display)
- Wählen Sie die Einstellungen: Monochrome, Horizontal orientation
- Klicken Sie auf Convert und kopieren Sie das erzeugte Bitmap-Array

Eigene Bilder verwenden:
Wichtige Hinweise:
- Die Bildabmessungen dürfen 128×32 Pixel nicht überschreiten
- Verkleinern Sie zu große Bilder vor der Konvertierung
- Passen Sie die Parameter für Breite und Höhe in der Funktion oled.drawBitmap() an Ihre Bildgröße an
- Ersetzen Sie das Array ArduinoIcon durch Ihr konvertiertes Bitmap-Array
Funktion zur Bildanzeige:
- oled.drawBitmap(x, y, bitmap_array, width, height, color) – Zeichnet ein Bitmap-Bild an einer Position
Schnelle Schritte
- Neu beim ESP32 C3 Mini? Absolvieren Sie zuerst unser Tutorial Erste Schritte mit dem ESP32 C3 Mini, um Ihre Entwicklungsumgebung einzurichten.
- OLED mit dem ESP32 verbinden: Verbinden Sie VCC mit 3,3V, GND mit GND, SDA mit Pin 11 und SCL mit Pin 12
- Bibliotheken installieren: Fügen Sie die Bibliotheken Adafruit SSD1306 und Adafruit GFX über den Bibliotheksverwalter der Arduino IDE hinzu
- Code kopieren: Verwenden Sie einen der obigen Beispielcodes (Text-, Zeichen- oder Bildanzeige)
- I2C-Adresse prüfen: Die meisten OLED-Module verwenden 0x3C (bei Bedarf auf 0x3D ändern)
- Code hochladen: Wählen Sie das richtige ESP32 C3 Super Mini-Board und den COM-Port und laden Sie dann hoch
- Display prüfen: Das OLED sollte je nach Code Text, Grafiken oder Bilder anzeigen
- Inhalte anpassen: Passen Sie Text, Positionen und Grafiken an die Anforderungen Ihres Projekts an
- Profi-Tipp: Rufen Sie vor dem Aktualisieren der Inhalte immer oled.clearDisplay() und danach oled.display() auf, um den Bildschirm richtig zu aktualisieren
Fehlerbehebung bei OLED-Displays
Problem: Leerer Bildschirm (nichts wird angezeigt)
- Verdrahtung prüfen: Überprüfen Sie SDA an Pin 11, SCL an Pin 12, VCC an 3,3V, GND an GND
- I2C-Adresse testen: Führen Sie einen I2C-Scanner-Code aus, um die tatsächliche Adresse zu ermitteln
- Adresse ändern: Versuchen Sie 0x3D in der Funktion oled.begin(), wenn 0x3C nicht funktioniert
- Stromversorgung prüfen: Stellen Sie sicher, dass 3,3V oder 5V korrekt mit dem VCC-Pin verbunden sind
- Verbindungen überprüfen: Drücken Sie die Jumper-Kabel fest in die Löcher des Steckbretts
- Modul testen: Testen Sie das OLED an einem anderen Arduino, um ein defektes Display auszuschließen
I2C-Scanner-Code:
Problem: Verzerrte oder unvollständige Anzeige
- Verbindungen sichern: Prüfen Sie auf lose Jumper-Kabel
- Auflösung prüfen: Stellen Sie sicher, dass der Code 128×32 verwendet (nicht 128×64)
- Initialisierungsverzögerung hinzufügen: Fügen Sie delay(2000) nach oled.begin() ein
- Display zurücksetzen: Rufen Sie nach der Initialisierung oled.clearDisplay() und oled.display() auf
Problem: Text zu klein oder zu groß
- Textgröße anpassen: Verwenden Sie oled.setTextSize(1) für klein, setTextSize(2) für mittel
- Größe 1: Passt ~21 Zeichen pro Zeile (je 6×8 Pixel)
- Größe 2: Passt ~10 Zeichen pro Zeile (je 12×16 Pixel)
- Größe 3: Passt ~7 Zeichen pro Zeile (nur 1 Zeile bei 32 Pixel Höhe)
Problem: Display flackert
- Aktualisierung optimieren: Rufen Sie pro Aktualisierung einmal oled.clearDisplay() und dann einmal oled.display() auf
- Verzögerung hinzufügen: Fügen Sie delay(100) in die Schleife ein, um die Aktualisierungsrate zu begrenzen
- Schnelles Löschen vermeiden: Löschen Sie das Display nicht unnötig wiederholt
Problem: Nur die erste Zeile wird angezeigt
- Koordinaten prüfen: Stellen Sie sicher, dass die Y-Position im Bereich 0-31 liegt (32 Pixel hoch)
- Cursor richtig setzen: Verwenden Sie oled.setCursor(x, y) vor jeder Zeile
- Überlauf der Textgröße: Große Textgrößen können Inhalte aus dem Bildschirm schieben
Projektideen mit dem OLED-Display
Erweitern Sie Ihre Fähigkeiten mit dem ESP32 C3 Super Mini mit diesen Projektideen für das OLED-Display:
- Temperatur- und Luftfeuchtigkeitsmonitor: Messwerte des DHT11- oder DHT22-Sensors in Echtzeit anzeigen
- Ultraschall-Entfernungsmesser: HC-SR04-Messungen mit visuellem Fortschrittsbalken anzeigen
- WLAN-Signalstärkeanzeige: RSSI-Werte mit Balkendiagramm anzeigen
- Laufschrift-Nachrichtentafel: Einen Newsticker mit Laufschrift-Animation erstellen
- Digitaluhr mit RTC-Modul: Uhrzeit und Datum der Echtzeituhr DS3231 anzeigen
- Tastergesteuertes Menüsystem: Mit Tastern durch Einstellungen navigieren
- Wetterstationsanzeige: Temperatur, Luftfeuchtigkeit und Luftdruck des BME280-Sensors anzeigen
- Bewegungsmelder-Alarm: Status des PIR-Sensors und Anzahl der Auslösungen anzeigen
- Batteriespannungsmonitor: Batteriestand in Echtzeit mit Prozentbalken anzeigen
- Einfache Spielkonsole: Spiele wie Pong, Snake oder Breakout erstellen
Video Tutorial
Wir erwägen die Erstellung von Video-Tutorials. Wenn Sie Video-Tutorials für wichtig halten, abonnieren Sie bitte unseren YouTube-Kanal , um uns zu motivieren, die Videos zu erstellen.
Sehen Sie sich das folgende Video an, um eine visuelle Schritt-für-Schritt-Anleitung zu diesem ESP32 C3 Super Mini OLED-Display-Projekt zu erhalten.
Herausforderungen
Probieren Sie diese zunehmend anspruchsvollen Änderungen aus, um Ihre Fähigkeiten mit dem OLED-Display zu verbessern:
- Einfach: Ändern Sie Textgröße, Farbe und Position, um Ihr Display-Layout anzupassen
- Einfach: Zeigen Sie die Messwerte eines DHT11-Temperatur-/Luftfeuchtigkeitssensors auf dem OLED an
- Mittel: Erstellen Sie einen animierten Ladebalken, der sich von 0% bis 100% füllt
- Mittel: Bauen Sie einen Laufschrift-Ticker, der Ihre Nachricht fortlaufend wiederholt
- Mittel: Entwerfen Sie ein mehrseitiges Menüsystem, das mit Tastern gesteuert wird
- Fortgeschritten: Stellen Sie Sensordaten in Echtzeit als scrollendes Diagramm auf dem OLED dar
- Fortgeschritten: Erstellen Sie ein Minispiel (Pong oder Snake) mit Tastersteuerung
- Fortgeschritten: Bauen Sie eine WLAN-verbundene Wetteranzeige mit Live-Vorhersagedaten