ESP32 - OLED 128x32
Dieses Tutorial zeigt Ihnen, wie Sie einen ESP32 und MicroPython mit einem OLED-128x32-I2C-Display verwenden. Sie lernen:
- Wie Sie ein 128x32-OLED-Display mit dem ESP32 verbinden.
- Wie Sie MicroPython-Code für den ESP32 schreiben, um Text und Zahlen auf dem 128x32-OLED-Bildschirm anzuzeigen.
- Wie Sie MicroPython-Code für den ESP32 schreiben, um auf dem 128x32-OLED-Bildschirm zu zeichnen.
- Wie Sie MicroPython-Code für den ESP32 schreiben, um Bilder auf dem 128x32-OLED-Bildschirm anzuzeigen.
- Wie Sie MicroPython-Code für den ESP32 schreiben, um Text und Zahlen in der Mitte des 128x32-OLED-Bildschirms auszurichten.
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables ESP32 Starter-Kit (ESP32 enthalten) | |
| 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.
Überblick über 128x32 I2C OLED Display
Pinbelegung des 128x32-I2C-OLED-Displays
- GND-Pin: Mit der Masse des ESP32 verbinden.
- VCC-Pin: Zur Stromversorgung mit dem 5-Volt-Pin des ESP32 verbinden.
- SDA-Pin: Dies ist der Daten-Pin für die I2C-Kommunikation.
- SCL-Pin: Dies ist der Takt-Pin für die I2C-Kommunikation.
Verdrahtungsdiagramm
- So verbinden Sie ESP32 und OLED 128x32 über ein Breadboard
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
- So verbinden Sie ESP32 und OLED 128x32 über ein Schraubklemmen-Breakout-Board
Nachfolgend die Verdrahtungstabelle zwischen dem 128x32-OLED-Modul und dem ESP32
| 128x32-OLED-Modul | ESP32 |
|---|---|
| VCC | 3.3V |
| GND | GND |
| SDA | GPIO21 |
| SCL | GPIO22 |
ESP32 MicroPython-Code - Text, Ganzzahl und Gleitkommazahl auf dem OLED anzeigen
/*
* Dieser ESP32 MicroPython Code wurde von newbiely.de entwickelt
* Dieser ESP32 MicroPython 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-micropython/esp32-micropython-oled-128x32
*/
from machine import I2C, Pin
from DIYables_MicroPython_OLED import OLED_SSD1306_I2C
# Initialize I2C
i2c = I2C(0, scl=Pin(22), sda=Pin(21), freq=400000)
# Initialize the OLED display
oled = OLED_SSD1306_I2C(128, 32, i2c)
# Clear the display
oled.clear_display()
oled.display()
oled.set_text_size(2)
# Print a message to the display
text = "DIYables"
integer_value = 123
float_value = 45.678
oled.set_cursor(0, 0)
oled.println(text)
oled.set_cursor(0, 19)
oled.println(str(integer_value)) # Print integer and move to the next line
oled.set_cursor(50, 19)
oled.println("{:.3f}".format(float_value)) # Print formatted float and move to the next line
oled.display() # Ensure you update the display after writing to it
Schnelle Schritte
Bitte befolgen Sie diese Anweisungen Schritt für Schritt:
- Stellen Sie sicher, dass die Thonny IDE auf Ihrem Computer installiert ist.
- Stellen Sie sicher, dass die MicroPython-Firmware auf Ihrem ESP32-Board installiert ist.
- Wenn Sie zum ersten Mal einen ESP32 mit MicroPython verwenden, lesen Sie das Tutorial ESP32 MicroPython Erste Schritte mit ausführlichen Anweisungen.
- Verbinden Sie das OLED-Display gemäß dem Schaltplan mit dem ESP32.
- Verbinden Sie das ESP32-Board über ein USB-Kabel mit Ihrem Computer.
- Öffnen Sie die Thonny IDE auf Ihrem Computer.
- Gehen Sie in der Thonny IDE zu Tools Options.
- Wählen Sie im Tab Interpreter aus dem Dropdown-Menü MicroPython (ESP32) aus.
- Stellen Sie sicher, dass der richtige Port ausgewählt ist. Die Thonny IDE erkennt ihn normalerweise automatisch, eventuell müssen Sie ihn aber manuell auswählen (z. B. COM12 unter Windows oder /dev/ttyACM0 unter Linux).
- Navigieren Sie in der Thonny IDE zu Tools Manage packages.
- Suchen Sie nach “DIYables-MicroPython-OLED” und finden Sie die von DIYables erstellte OLED-Bibliothek.
- Klicken Sie auf DIYables-MicroPython-OLED und dann auf die Schaltfläche Install, um die OLED-Bibliothek zu installieren.
- Kopieren Sie den obigen Code und fügen Sie ihn in den Editor der Thonny IDE ein.
- Speichern Sie das Skript auf Ihrem ESP32-Board:
- Klicken Sie auf die Schaltfläche Save oder verwenden Sie die Tasten Ctrl+S.
- Im Speicherdialog sehen Sie zwei Bereiche: This computer und MicroPython device. Wählen Sie MicroPython device.
- Speichern Sie die Datei als main.py.
- Klicken Sie auf die grüne Schaltfläche Run (oder drücken Sie F5), um das Skript auszuführen. Das Skript wird ausgeführt.
- Sehen Sie sich das OLED-Display an. Es sieht wie folgt aus:
ESP32 MicroPython-Code - Auf dem OLED zeichnen
/*
* Dieser ESP32 MicroPython Code wurde von newbiely.de entwickelt
* Dieser ESP32 MicroPython 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-micropython/esp32-micropython-oled-128x32
*/
from machine import I2C, Pin
from DIYables_MicroPython_OLED import OLED_SSD1306_I2C
# Initialize I2C
i2c = I2C(0, scl=Pin(22), sda=Pin(21), freq=400000)
# Initialize the OLED display
oled = OLED_SSD1306_I2C(128, 32, i2c)
# Clear the display
oled.clear_display()
oled.display()
# Draw a rectangle
#oled.draw_rect(0, 0, 40, 25, 1)
oled.fill_rect(0, 0, 40, 25, 1)
# Draw a circle
oled.draw_circle(64, 16, 15, 1)
#oled.fill_circle(64, 16, 15, 1)
# Draw a triangle
#oled.draw_triangle(80, 31, 128, 31, 104, 0, 1)
oled.fill_triangle(80, 31, 128, 31, 104, 0, 1)
oled.display()
Wenn Sie den obigen Code ausführen, erscheinen ein Rechteck, ein Kreis und ein Dreieck auf dem OLED-Bildschirm, wie unten gezeigt.
ESP32 MicroPython-Code – Bild auf dem OLED anzeigen
Der folgende Code zeichnet ein Bild auf das Display. Das Bild ist das DIYables-Symbol.
/*
* Dieser ESP32 MicroPython Code wurde von newbiely.de entwickelt
* Dieser ESP32 MicroPython 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-micropython/esp32-micropython-oled-128x32
*/
from machine import I2C, Pin
from DIYables_MicroPython_OLED import OLED_SSD1306_I2C
import utime
# Initialize I2C
i2c = I2C(0, scl=Pin(22), sda=Pin(21), freq=400000)
# Create the SSD1306 display object
oled = OLED_SSD1306_I2C(128, 32, i2c)
# Clear the display buffer
oled.clear_display()
utime.sleep(2)
# 16x16 heart bitmap in RGB565 format
heart_bitmap = [
# 'DIYables Icon', 72x32
0x00, 0x0f, 0xff, 0xff, 0x8f, 0xf8, 0x07, 0x38, 0x07, 0x00, 0x0f, 0xff, 0xff, 0x8f, 0xfe, 0x07,
0x1c, 0x0e, 0x00, 0x0f, 0xff, 0xff, 0x8f, 0xff, 0x07, 0x1c, 0x1c, 0x00, 0x0f, 0xff, 0xff, 0x8e,
0x07, 0x87, 0x0e, 0x1c, 0x00, 0x0f, 0xff, 0xff, 0x8e, 0x03, 0xc7, 0x0f, 0x38, 0x00, 0x0f, 0xff,
0xff, 0x8e, 0x01, 0xc7, 0x07, 0x38, 0x00, 0x0f, 0xff, 0xff, 0x8e, 0x01, 0xc7, 0x03, 0xf0, 0xf0,
0x0f, 0xff, 0xff, 0x8e, 0x01, 0xc7, 0x03, 0xe0, 0xfc, 0x0f, 0xff, 0xff, 0x8e, 0x01, 0xc7, 0x01,
0xe0, 0xfe, 0x0f, 0xff, 0xff, 0x8e, 0x03, 0xc7, 0x01, 0xc0, 0xff, 0x8f, 0xff, 0xff, 0x8e, 0x03,
0x87, 0x01, 0xc0, 0xff, 0x8f, 0xff, 0xff, 0x8e, 0x0f, 0x87, 0x01, 0xc0, 0xff, 0xcf, 0xff, 0xff,
0x8f, 0xff, 0x07, 0x01, 0xc0, 0xff, 0xef, 0xff, 0xff, 0x8f, 0xfc, 0x07, 0x01, 0xc0, 0xff, 0xef,
0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x00,
0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00, 0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x80, 0x00, 0x00,
0x00, 0x00, 0xff, 0xff, 0xff, 0xff, 0x8f, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x8f,
0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0f, 0xfc, 0xfd, 0xff, 0xff, 0xff, 0xff, 0xff,
0xff, 0x0f, 0xfc, 0xfc, 0xff, 0xff, 0xff, 0xff, 0xff, 0xff, 0x0f, 0xfc, 0xfc, 0xff, 0xff, 0xff,
0xef, 0xff, 0xff, 0x0e, 0x0c, 0x0c, 0xc3, 0x07, 0xff, 0xef, 0xff, 0xfe, 0x0f, 0xec, 0xec, 0x99,
0x7f, 0xff, 0xef, 0xff, 0xfe, 0x0f, 0x04, 0xe4, 0x81, 0x0f, 0xff, 0xcf, 0xff, 0xfc, 0x0e, 0x32,
0xe4, 0x9f, 0xc7, 0xff, 0x8f, 0xff, 0xf8, 0x0e, 0x32, 0x4c, 0x9b, 0x67, 0xff, 0x0f, 0xff, 0xf0,
0x0e, 0x04, 0x0c, 0xc3, 0x0f, 0xfe, 0x0f, 0xff, 0xe0, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xfc, 0x0f,
0xff, 0x80, 0x0f, 0xff, 0xff, 0xff, 0xff, 0xe0, 0x0f, 0xfc, 0x00, 0x0f, 0xff, 0xff, 0xff, 0xff
]
# Draw the bitmap on the display
oled.draw_bitmap(0, 0, heart_bitmap, 72, 32, 1)
# Update the display with the new image
oled.display()
utime.sleep(3)
#oled.invert_display(True)
Wenn Sie den obigen Code ausführen, erscheint das Bild auf dem OLED-Bildschirm, wie unten gezeigt.
Um ein anderes Bild auf dem OLED-Bildschirm anzuzeigen, gehen Sie wie folgt vor:
- Konvertieren Sie das Bild (in einem beliebigen Format) in ein Bitmap-Array. Sie können dafür das Tool Image to Bitmap Converter verwenden. Im Bild unten sehen Sie, wie ein Bild in ein Bitmap-Array konvertiert wird. In diesem Beispiel habe ich das ESP32-Symbol in ein Bitmap-Array konvertiert.
- Ersetzen Sie das vorhandene Bitmap-Array in Ihrem ESP32-MicroPython-Code durch das neu konvertierte Array.
- Passen Sie Breite und Höhe des Bildes in Ihrem ESP32-MicroPython-Code an die Abmessungen des neuen Bildes an.
Hinweis: Stellen Sie sicher, dass die Bildgröße gleich oder kleiner als die Größe des OLED-Bildschirms ist.
So richten Sie Text/Zahlen auf dem OLED automatisch vertikal und horizontal mittig aus
Der folgende MicroPython-Code zentriert den Text automatisch sowohl vertikal als auch horizontal auf dem OLED-Bildschirm.
/*
* Dieser ESP32 MicroPython Code wurde von newbiely.de entwickelt
* Dieser ESP32 MicroPython 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-micropython/esp32-micropython-oled-128x32
*/
from machine import I2C, Pin
from DIYables_MicroPython_OLED import OLED_SSD1306_I2C
import utime
# Initialize I2C
i2c = I2C(0, scl=Pin(22), sda=Pin(21), freq=400000)
# Initialize the OLED display
oled = OLED_SSD1306_I2C(128, 32, i2c)
# Clear the display
oled.clear_display()
oled.display()
def oled_display_center(oled, text):
# Get the text bounds (width and height) of the string
x1, y1, width, height = oled.get_text_bounds(text, 0, 0)
# Set cursor to the calculated centered position
cursor_x = (oled.WIDTH - width) // 2
cursor_y = (oled.HEIGHT - height) // 2
oled.set_cursor(cursor_x, cursor_y)
# Print the text on the display
oled.println(text)
# Refresh the display to show the text
oled.display()
oled.set_text_size(2)
oled_display_center(oled, "DIYables")
Nach dem Ausführen des Codes wird der Text sowohl vertikal als auch horizontal auf dem OLED-Bildschirm zentriert.
