ESP32 - OLED

Dieses Tutorial zeigt Ihnen, wie Sie den ESP32 verwenden, um Daten auf dem OLED-Display anzuzeigen. Im Detail werden wir lernen, wie man Zeichen und Zahlen darstellt, Linien und Formen zeichnet und ein Bild auf dem OLED-Display ausgibt.

Erforderliche Hardware

1×ESP32 ESP-WROOM-32 Entwicklungsmodul
1×USB-Kabel Typ-A zu Typ-C (für USB-A PC)
1×USB-Kabel Typ-C zu Typ-C (für USB-C PC)
1×SSD1306 I2C OLED-Display 128x64
1×SSD1306 I2C OLED-Display 128x32
1×Breadboard
1×Verbindungskabel
1×(Optional) DC-Stromanschluss
1×(Empfohlen) Schraubklemmen-Erweiterungsboard für ESP32
1×(Empfohlen) Breakout Expansion Board for ESP32
1×(Empfohlen) Stromverteiler für ESP32

Oder Sie können die folgenden Kits kaufen:

1×DIYables ESP32 Starter-Kit (ESP32 enthalten)
1×DIYables Sensor-Kit (30 Sensoren/Displays)
1×DIYables Sensor-Kit (18 Sensoren/Displays)
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.

Über OLED-Display

Es gibt verschiedene Arten von OLED-Displays, die mit dem ESP32 arbeiten können. Sie unterscheiden sich voneinander in der Kommunikationsschnittstelle (I2C, SPI), Farben (weiß, blau, zweifarbig...) und Größen (128×64, 128×32...).

ESP32 OLED

In diesem Tutorial wird ein SSD1306 128×64 I2C OLED-Display verwendet.

I2C-OLED-Display-Pinbelegung

I2C-OLED-Display enthält vier Pins:

  • GND-Pin: soll mit der Masse des ESP32 verbunden werden
  • VCC-Pin: soll mit dem 5-Volt-Pin des ESP32 verbunden werden.
  • SCL-Pin: ist ein I2C-Taktpin.
  • SDA-Pin: ist ein I2C-Datenpin.
OLED-Pinbelegung

Verdrahtungsdiagramm

  • Wie man den ESP32 mit einem OLED-Display 128×64 über ein Breadboard anschließt Breadboard
ESP32 OLED 128×64 Verdrahtungsdiagramm

Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.

Wenn Sie nicht wissen, wie Sie ESP32 und andere Komponenten mit Strom versorgen, finden Sie Anleitungen im folgenden Tutorial: Wie man ESP32 mit Strom versorgt.

  • So verbinden Sie den ESP32 mit dem OLED-Display 128×64 mithilfe eines Schraubklemmen-Block-Breakout-Boards (LINK_MAIN_ESP32_SCREW_TERMINAL)
Wie verbindet man ESP32 und OLED?

※ Notiz:

  • Die Pin-Belegung des OLED-Moduls kann von Hersteller zu Hersteller variieren. Verwenden Sie IMMER die auf dem OLED-Modul aufgedruckten Beschriftungen. Schauen Sie genau hin!

So verwenden Sie OLED mit ESP32

SSD1306 OLED-Bibliothek installieren

  • Klicken Sie auf das Bibliotheken-Symbol in der linken Leiste der Arduino IDE.
  • Geben Sie im Suchfeld SSD1306 ein, und suchen Sie dann nach der SSD1306-Bibliothek von Adafruit
  • Installieren Sie die Bibliothek, indem Sie auf die Schaltfläche Installieren klicken.
ESP32-OLED-Bibliothek
  • Es erscheint ein Fenster, das Sie auffordert, Abhängigkeiten für die Bibliothek zu installieren
  • Installieren Sie alle Abhängigkeiten für die Bibliothek, indem Sie auf die Schaltfläche Alle installieren klicken.
ESP32 Adafruit GFX-Sensorbibliothek

Wie programmiert man für OLED

  • Bibliothek einbinden
#include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h>
  • Definieren Sie die Bildschirmgröße (123x64 oder 128 x32)
#define SCREEN_WIDTH 128 // OLED-Display Breite, in Pixeln #define SCREEN_HEIGHT 64 // OLED-Display Höhe, in Pixeln
  • Deklariere ein SSD1306 OLED-Objekt
// Deklariere ein SSD1306-Display-Objekt, das über I2C verbunden ist Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1);
  • In der setup()-Funktion das OLED-Display initialisieren
// initialisiere OLED-Display mit der Adresse 0x3C für 128x64 if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { Serial.println(F("SSD1306 allocation failed")); while (true); }
  • Und dann können Sie Text anzeigen, Bilder anzeigen, eine Linie zeichnen ...

ESP32-Code - Text auf dem OLED-Display anzeigen

Der untenstehende ESP32-Code zeigt einen Text auf dem OLED-Display.

/* * Dieser ESP32 Code wurde von newbiely.de entwickelt * Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt. * Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte: * https://newbiely.de/tutorials/esp32/esp32-oled */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #define SCREEN_WIDTH 128 // OLED width, in pixels #define SCREEN_HEIGHT 64 // OLED height, in pixels // create an OLED display object connected to I2C Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1); void setup() { Serial.begin(9600); // initialize OLED display with I2C address 0x3C if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { Serial.println(F("failed to start SSD1306 OLED")); while (1); } delay(2000); // wait two seconds for initializing oled.clearDisplay(); // clear display oled.setTextSize(1); // set text size oled.setTextColor(WHITE); // set text color oled.setCursor(0, 10); // set position to display oled.println("esp32io.com"); // set text oled.display(); // display on OLED } void loop() { }

Wir können mehr tun, indem wir die folgenden Funktionen verwenden:

  • oled.clearDisplay(): Diese Funktion wird verwendet, um das Display zu löschen.
  • oled.setTextSize(n): Diese Funktion wird verwendet, um die Schriftgröße festzulegen; unterstützt Werte von 1 bis 8.
  • oled.setTextColor(WHITE): Diese Funktion wird verwendet, um die Textfarbe festzulegen.
  • oled.setCursor(x,y): Diese Funktion wird verwendet, um die Koordinaten festzulegen, an denen der Text angezeigt werden soll.
  • oled.drawPixel(x,y, color): Diese Funktion dient dazu, ein Pixel an den x,y-Koordinaten zu zeichnen.
  • oled.setTextColor(BLACK, WHITE): Diese Funktion dient dazu, die Textfarbe und die Hintergrundfarbe festzulegen.
  • oled.println("message"): Diese Funktion dient dazu, eine Zeichenkette auszugeben.
  • oled.println(number): Diese Funktion dient dazu, eine Zahl auszugeben.
  • oled.println(number, HEX): Diese Funktion dient dazu, eine Zahl im Hex-Format auszugeben.
  • oled.display(): Diese Funktion wird verwendet, um die Änderungen anzuwenden.
  • oled.startscrollright(start, stop): Diese Funktion dient dazu, Text von links nach rechts scrollen zu lassen.
  • oled.startscrollleft(start, stop): Diese Funktion dient dazu, Text von rechts nach links scrollen zu lassen.
  • oled.startscrolldiagright(start, stop): Diese Funktion dient dazu, Text von der unteren linken Ecke zur oberen rechten Ecke zu scrollen.
  • oled.startscrolldiagleft(start, stop): Diese Funktion dient dazu, Text von der unteren rechten Ecke zur oberen linken Ecke zu scrollen.
  • oled.stopscroll(): Diese Funktion dient dazu, das Scrollen zu stoppen.

ESP32-Code - Zeichnen von Formen auf dem OLED-Display

Der folgende Code zeigt, wie man mehrere Formen auf dem OLED zeichnet.

/* * Dieser ESP32 Code wurde von newbiely.de entwickelt * Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt. * Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte: * https://newbiely.de/tutorials/esp32/esp32-oled */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #define SCREEN_WIDTH 128 // OLED width, in pixels #define SCREEN_HEIGHT 64 // OLED height, in pixels // create an OLED display object connected to I2C Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1); void setup() { Serial.begin(9600); // initialize OLED display with I2C address 0x3C if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { Serial.println(F("failed to start SSD1306 OLED")); while (1); } delay(2000); // wait two seconds for initializing oled.setCursor(0, 0); } void loop() { // draw a circle oled.clearDisplay(); //oled.drawCircle(64, 32, 20, WHITE); oled.fillCircle(64, 32, 20, WHITE); oled.display(); // draw a triangle oled.clearDisplay(); //oled.fillTriangle(80, 62, 128, 62, 104, 32, WHITE); oled.drawTriangle(80, 62, 128, 62, 104, 32, WHITE); oled.display(); // draw a rectangle oled.clearDisplay(); //oled.fillRect(0, 0, 40, 25, WHITE); oled.drawRect(0, 0, 40, 25, WHITE); oled.display(); delay(1000); }

Nachdem Sie den Code ausgeführt haben, sehen Sie ein Rechteck, einen Kreis und ein Dreieck auf dem OLED-Bildschirm.

ESP32 zeichnet Rechteck, Kreis und Dreieck auf dem OLED-Display.

ESP32-Code – Bild auf OLED anzeigen

Um ein Bild auf einem OLED-Display anzuzeigen, muss das Bild in ein Bitmap-Array konvertiert werden. Es gibt ein Online-Tool, um das Bild in ein Bitmap-Array zu konvertieren. Das folgende Bild zeigt, wie man es macht. Ich habe das ESP32-Icon in ein Bitmap-Array konvertiert.

Bild zu Bitmap-Array

Nach dem Konvertieren kopieren Sie den Array-Code und aktualisieren Sie ihn im bitmap_image-Array im folgenden Code:

/* * Dieser ESP32 Code wurde von newbiely.de entwickelt * Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt. * Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte: * https://newbiely.de/tutorials/esp32/esp32-oled */ #include <Wire.h> #include <Adafruit_GFX.h> #include <Adafruit_SSD1306.h> #define SCREEN_WIDTH 128 // OLED width, in pixels #define SCREEN_HEIGHT 64 // OLED height, in pixels // create an OLED display object connected to I2C Adafruit_SSD1306 oled(SCREEN_WIDTH, SCREEN_HEIGHT, &Wire, -1); // bitmap of DIYables-icon image const unsigned char bitmap_image [] PROGMEM = { // 'DIYables-icon', 128x64px 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xfe, 0x00, 0x03, 0xf1, 0xf8, 0x00, 0x3e, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xc0, 0x03, 0xf1, 0xf8, 0x00, 0x7e, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xf0, 0x03, 0xf0, 0xfc, 0x00, 0x7c, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xf8, 0x03, 0xf0, 0xfc, 0x00, 0xfc, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xfc, 0x03, 0xf0, 0x7e, 0x00, 0xf8, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x01, 0xfe, 0x03, 0xf0, 0x3f, 0x01, 0xf8, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x7f, 0x03, 0xf0, 0x3f, 0x03, 0xf0, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x3f, 0x03, 0xf0, 0x1f, 0x83, 0xe0, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x3f, 0x83, 0xf0, 0x1f, 0x87, 0xe0, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x1f, 0x83, 0xf0, 0x0f, 0xc7, 0xc0, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x1f, 0x83, 0xf0, 0x07, 0xef, 0xc0, 0x00, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x1f, 0x83, 0xf0, 0x07, 0xff, 0x80, 0xf0, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x1f, 0x83, 0xf0, 0x03, 0xff, 0x00, 0xfe, 0x00, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x1f, 0x83, 0xf0, 0x03, 0xff, 0x00, 0xff, 0xc0, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x1f, 0x83, 0xf0, 0x01, 0xfe, 0x00, 0xff, 0xe0, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x1f, 0x83, 0xf0, 0x00, 0xfe, 0x00, 0xff, 0xf8, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x1f, 0x83, 0xf0, 0x00, 0xfc, 0x00, 0xff, 0xfc, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x3f, 0x03, 0xf0, 0x00, 0xfc, 0x00, 0xff, 0xfe, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0x7f, 0x03, 0xf0, 0x00, 0xfc, 0x00, 0xff, 0xff, 0x03, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x00, 0xff, 0x03, 0xf0, 0x00, 0xfc, 0x00, 0xff, 0xff, 0x83, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xf8, 0x03, 0xfe, 0x03, 0xf0, 0x00, 0xfc, 0x00, 0xff, 0xff, 0xc3, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xfc, 0x03, 0xf0, 0x00, 0xfc, 0x00, 0xff, 0xff, 0xc3, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xf8, 0x03, 0xf0, 0x00, 0xfc, 0x00, 0xff, 0xff, 0xe3, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xe0, 0x03, 0xf0, 0x00, 0xfc, 0x00, 0xff, 0xff, 0xe3, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0x80, 0x03, 0xf0, 0x00, 0xfc, 0x00, 0xff, 0xff, 0xf3, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xf8, 0x00, 0x03, 0xe0, 0x00, 0xfc, 0x00, 0xff, 0xff, 0xf3, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xfb, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xfb, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xfb, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xfb, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xc7, 0xff, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0xff, 0xff, 0xc7, 0xff, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfb, 0xff, 0xff, 0xff, 0xff, 0x80, 0xff, 0xff, 0xc7, 0xff, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfb, 0xff, 0xff, 0xff, 0xff, 0x80, 0xff, 0xff, 0xc7, 0xff, 0x1f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xfb, 0xff, 0xff, 0xff, 0xff, 0x80, 0xff, 0x9f, 0xc6, 0x7f, 0x1f, 0xdf, 0xf9, 0xff, 0xff, 0xff, 0xfb, 0xff, 0xff, 0xff, 0xff, 0x00, 0xfc, 0x03, 0xc0, 0x0f, 0x1e, 0x03, 0xe0, 0x3f, 0xff, 0xff, 0xf3, 0xff, 0xff, 0xff, 0xff, 0x00, 0xfc, 0x03, 0xc0, 0x07, 0x1c, 0x01, 0xc0, 0x3f, 0xff, 0xff, 0xf3, 0xff, 0xff, 0xff, 0xfe, 0x00, 0xfd, 0xf1, 0xc3, 0xc7, 0x18, 0xf8, 0x8f, 0xff, 0xff, 0xff, 0xe3, 0xff, 0xff, 0xff, 0xfe, 0x00, 0xff, 0xf1, 0xc7, 0xe3, 0x18, 0xf8, 0x8f, 0xff, 0xff, 0xff, 0xe3, 0xff, 0xff, 0xff, 0xfc, 0x00, 0xfe, 0x01, 0xc7, 0xe3, 0x18, 0x00, 0xc0, 0xff, 0xff, 0xff, 0xc3, 0xff, 0xff, 0xff, 0xfc, 0x00, 0xfc, 0x01, 0xc7, 0xe3, 0x18, 0x00, 0xe0, 0x3f, 0xff, 0xff, 0xc3, 0xff, 0xff, 0xff, 0xf8, 0x00, 0xf8, 0xf1, 0xc7, 0xe3, 0x18, 0xff, 0xfe, 0x1f, 0xff, 0xff, 0x83, 0xff, 0xff, 0xff, 0xf0, 0x00, 0xf8, 0xf1, 0xc3, 0xc7, 0x18, 0xff, 0xff, 0x1f, 0xff, 0xff, 0x03, 0xff, 0xff, 0xff, 0xe0, 0x00, 0xf8, 0x61, 0xc0, 0x07, 0x1c, 0x01, 0xc0, 0x3f, 0xff, 0xfe, 0x03, 0xff, 0xff, 0xff, 0xc0, 0x00, 0xfc, 0x01, 0xc0, 0x0f, 0x1e, 0x01, 0x80, 0x3f, 0xff, 0xfc, 0x03, 0xff, 0xff, 0xff, 0x80, 0x00, 0xfe, 0x19, 0xc4, 0x3f, 0x1f, 0x87, 0xe0, 0xff, 0xff, 0xf8, 0x03, 0xff, 0xff, 0xff, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x03, 0xff, 0xff, 0xfc, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xc0, 0x03, 0xff, 0xff, 0xf0, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x00, 0x03, 0xff, 0xff, 0xc0, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xf0, 0x00, 0x03, 0xff, 0xfc, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff }; void setup() { Serial.begin(9600); // initialize OLED display with I2C address 0x3C if (!oled.begin(SSD1306_SWITCHCAPVCC, 0x3C)) { Serial.println(F("failed to start SSD1306 OLED")); while (1); } delay(2000); // wait two seconds for initializing oled.setCursor(0, 0); } void loop() { oled.clearDisplay(); // display bitmap oled.drawBitmap(0, 0, bitmap_image, 128, 57, WHITE); oled.display(); delay(1000); // invert display oled.invertDisplay(1); delay(1000); }

Wenn Sie den obigen Code ausführen, wird das Bild auf dem OLED angezeigt, wie unten gezeigt.

ESP32 zeigt ein Bild auf dem OLED an.

OLED-Fehlerbehebung

Siehe OLED-Fehlerbehebung

※ UNSERE NACHRICHTEN

  • Sie können gerne den Link zu diesem Tutorial teilen. Bitte verwenden Sie jedoch unsere Inhalte nicht auf anderen Websites. Wir haben viel Mühe und Zeit in die Erstellung der Inhalte investiert, bitte respektieren Sie unsere Arbeit!