ESP32 C3 Super Mini - ILI9341 ILI9488 ST7789 TFT LCD Touch-Display mit SPI-Schnittstelle
Dieser Workshop zeigt Ihnen, wie Sie ein SPI TFT LCD Display an einen ESP32 C3 Super Mini anschließen. Das Board arbeitet mit 3,3V, derselben Spannung, die die meisten SPI TFT Module verwenden, sodass die Verdrahtung einfach und sicher bleibt.
In diesem Tutorial lernen Sie:
- Wie Sie ein 3,3V SPI TFT LCD Display mit dem ESP32 C3 Super Mini verdrahten.
- Wie Sie Formen, Text und Zahlen mit den Adafruit GFX Funktionen zeichnen.
- Wie Sie Bitmap-Bilder aus dem Flash-Speicher und von einer SD-Karte anzeigen.
- Wie Sie eine benutzerdefinierte externe Schriftart auf dem TFT LCD Bildschirm verwenden.
- Wie Sie die XPT2046 Touch-Eingabe mit dem ESP32 C3 Super Mini auslesen, kalibrieren und verwenden.
Dieser Workshop behandelt sowohl SPI TFT LCD Displays mit und ohne Touch. Er funktioniert mit Panels in 1,3, 1,54, 2,2, 2,4, 2,8, 3,2 und 3,5 Zoll, die von den Controller-Chips ILI9341, ILI9488 oder ST7789 angesteuert werden.

Workshop-Stationen in diesem Tutorial:
- DrawShapes - Kreise, Rechtecke, Dreiecke und Linien.
- ShowTextAndNumber - Zeichenketten und Zahlen in verschiedenen Größen.
- DrawImage - ein im Flash-Speicher abgelegtes Bitmap-Bild.
- DrawImageSDcard - ein von einer Micro-SD-Karte gestreamtes Bitmap-Bild.
- UseExternalFont - eine schärfere benutzerdefinierte GFX-Schriftart.
- TouchGetPoint - rohe Touch-Werte im Seriellen Monitor.
- TouchDraw - mit dem Finger auf dem Bildschirm malen.
- TouchButton - interaktive Schaltflächen auf dem Bildschirm.
- TouchCalibration - die vier Kalibrierungswerte für Ihr Panel ermitteln.
- CustomSPI - das Display über ein benutzerdefiniertes SPI-Bus-Objekt betreiben.
Erforderliche Hardware
| 1 | × | ESP32 C3 Super Mini | |
| 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 | × | SPI TFT display module | |
| 1 | × | Verbindungskabel |
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Überblick über the SPI TFT Display
Ein SPI TFT Display ist ein farbiger LCD-Bildschirm, der über eine schnelle SPI-Verbindung mit dem ESP32 C3 Super Mini kommuniziert.
Hauptmerkmale:
- Ein Treiber-IC im Modul speichert die Pixel und führt die Zeichenbefehle aus.
- Es werden nur wenige Leitungen benötigt - SPI ist ein 3-Draht-Bus plus ein Chip-Select pro Gerät.
- Funktioniert mit den Adafruit GFX Zeichenfunktionen, sodass Formen, Text, Schriftarten und Bitmaps sofort nutzbar sind.
- Touch-Versionen haben zusätzlich einen XPT2046 Controller am selben SPI-Bus.
- Die DIYables_TFT_SPI-Bibliothek steuert sowohl den Bildschirm als auch das Touch-Panel mit einer einzigen API.
Technische Daten:
- ILI9341: 16-Bit RGB565 Farbe, bis zu 40 MHz SPI.
- ILI9488: 18-Bit RGB666 Farbe über SPI, bis zu 24 MHz.
- ST7789: 16-Bit RGB565 Farbe, bis zu 40 MHz SPI.
- Logikpegel: 3,3V - perfekt passend zum ESP32 C3 Super Mini.
- Panelgrößen: 1,3, 1,54, 2,2, 2,4, 2,8, 3,2 und 3,5 Zoll.
Empfehlung: Wenn Sie noch kein Display gekauft haben, wählen Sie den ST7789 Treiber. Er ist leicht erhältlich, läuft mit der vollen SPI-Geschwindigkeit von 40 MHz und ist die einfachste Wahl für ein neues ESP32 C3 Super Mini Projekt.
WARNING
Der ESP32 C3 Super Mini verwendet 3,3V-Logik. Verbinden Sie TFT VCC nur mit dem 3,3V-Pin. Verwenden Sie niemals 5V.
Pinbelegung
Die meisten SPI TFT LCD Displays haben die folgenden Pins.
Display-Pins:
| Pin | Funktion |
|---|---|
| VCC | Stromversorgung |
| GND | Masse |
| CS | Chip Select — wird auf LOW gezogen, um das Display am SPI-Bus auszuwählen |
| DC / RS | Daten-/Befehlsauswahl — HIGH für Pixeldaten, LOW für Befehle |
| RST | Hardware-Reset — optional; bei Nichtverwendung mit 3.3V verbinden |
| MOSI / SDI / SDA | SPI-Dateneingang (MCU → Display) |
| SCK / CLK | SPI-Takt |
| MISO / SDO | SPI-Datenausgang (Display → MCU) — optional bei reiner Anzeigenutzung |
| LED / BL / BLK | Hintergrundbeleuchtung — mit 3.3V oder einem PWM-Pin zum Dimmen verbinden |
SD-Karten-Pins (falls Ihre Anwendung auf die SD-Karte zugreifen muss):
| Pin | Funktion |
|---|---|
| SD_CS / TF_CS | Chip Select der SD-Karte |
| MOSI / SDI | MOSI — Daten von der MCU zur SD-Karte |
| SCK / CLK | SCK — SPI-Takt |
| MISO / SDO | MISO — Daten von der SD-Karte zur MCU |
Bei TFT Displays mit Touch-Unterstützung gibt es zusätzliche Touch-Pins (falls Ihre Anwendung die Touch-Funktion nutzt und das Display sie unterstützt):
| Pin | Funktion |
|---|---|
| T_CS | Chip Select des Touch-Controllers |
| T_CLK | SCK — SPI-Takt |
| T_DIN | MOSI — Daten von der MCU zum Touch-Controller |
| T_DO | MISO — Daten vom Touch-Controller zur MCU |
| T_IRQ | Touch-Interrupt — optional; signalisiert, wenn der Bildschirm berührt wird |
※ Notiz:
Einige Display-Module ohne Touch haben ebenfalls die Pins T_CS, T_CLK, T_DIN, T_DO und T_IRQ. Diese sind auf solchen Boards funktionslos — der Touch-Controller-IC ist nicht bestückt. Sie sind vorhanden, weil die Platine dasselbe Layout wie die Touch-Version verwendet, um Fertigungsvarianten zu reduzieren.

Verdrahtungsdiagramm
Verdrahten Sie das TFT LCD Display mit den Hardware-SPI-Pins des ESP32 C3 Super Mini.
- Hinweis: VCC nur an 3,3V anschließen. 5V können den ESP32 C3 Super Mini und das Panel beschädigen.
- Hinweis: Die Hardware-SPI-Pins des ESP32 C3 Super Mini sind SCK = GPIO4, MISO = GPIO5, MOSI = GPIO6.
- Hinweis: Jedes Gerät am Bus benötigt einen eigenen CS-Pin. Das Display verwendet GPIO3, der Touch-Controller GPIO10 und die SD-Karte GPIO7.
- Hinweis — SDO (MISO) ist optional: Die SDO (MISO) Leitung überträgt nur Daten vom Display zurück zum Board. Keiner der Beispielcodes in diesem Tutorial liest vom Display, daher kann dieser Pin unverbunden bleiben. Bei Modulen, bei denen der Touch-Controller denselben SPI-Bus nutzt, kann eine angeschlossene SDO-Leitung die Kommunikation stören, daher wird empfohlen, sie unverbunden zu lassen.
Ohne Touch
Verbinden Sie MOSI mit GPIO6, SCK mit GPIO4 und MISO mit GPIO5. CS, DC und RST können beliebige freie GPIOs sein — in den Beispielen werden GPIO3, GPIO0 und GPIO1 verwendet.
Display:
| TFT Pin | ESP32 C3 Super Mini Pin | Beschreibung |
|---|---|---|
| VCC | 3.3V | Stromversorgung (nur 3.3V) |
| GND | GND | Masse |
| CS | GPIO3 | Chip Select |
| DC / RS | GPIO0 | Daten-/Befehlsauswahl |
| RST | GPIO1 | Reset (optional) |
| MOSI / SDI | GPIO6 | Hardware-SPI MOSI |
| SCK | GPIO4 | Hardware-SPI-Takt |
| MISO / SDO | GPIO5 | Hardware-SPI MISO (optional) |
| LED / BL | 3.3V | Hintergrundbeleuchtung |
SD-Karte (falls Ihre Anwendung auf die SD-Karte zugreifen muss):
| SD Pin | ESP32 C3 Super Mini Pin | Beschreibung |
|---|---|---|
| SD_CS / TF_CS | GPIO7 | Chip Select der SD-Karte |
| MOSI / SDI | GPIO6 | Gemeinsam mit Display-MOSI (GPIO6) |
| SCK / CLK | GPIO4 | Gemeinsam mit Display-SCK (GPIO4) |
| MISO / SDO | GPIO5 | Gemeinsam mit Display-MISO (GPIO5) |

Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Mit Touch
Verbinden Sie den XPT2046 Touch-Controller mit demselben SPI-Bus des ESP32 C3 Super Mini, wobei GPIO6, GPIO4 und GPIO5 mit dem Display gemeinsam genutzt werden.
Display:
| TFT Pin | ESP32 C3 Super Mini Pin | Beschreibung |
|---|---|---|
| VCC | 3.3V | Stromversorgung (nur 3.3V) |
| GND | GND | Masse |
| CS | GPIO3 | Chip Select |
| DC / RS | GPIO0 | Daten-/Befehlsauswahl |
| RST | GPIO1 | Reset (optional) |
| MOSI / SDI | GPIO6 | Hardware-SPI MOSI |
| SCK | GPIO4 | Hardware-SPI-Takt |
| MISO / SDO | GPIO5 | Hardware-SPI MISO (optional) |
| LED / BL | 3.3V | Hintergrundbeleuchtung |
Touch-Controller (falls Ihre Anwendung die Touch-Funktion nutzt und das Display sie unterstützt):
| Touch Pin | ESP32 C3 Super Mini Pin | Beschreibung |
|---|---|---|
| T_CS | GPIO10 | Touch Chip Select |
| T_IRQ | nicht verbunden | Touch-Interrupt (optional, im Code auf -1 setzen) |
| T_DIN | GPIO6 | Gemeinsam mit Display-MOSI (GPIO6) |
| T_CLK | GPIO4 | Gemeinsam mit Display-SCK (GPIO4) |
| T_DO | GPIO5 | Gemeinsam mit Display-MISO (GPIO5) |

Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Der ESP32 C3 Super Mini hat einen Hardware-SPI-Bus an den Stiftleisten, daher teilen sich Display, SD-Karte und Touch-Controller dieselben drei Datenleitungen (MOSI GPIO6, SCK GPIO4, MISO GPIO5). Jedes Gerät hat seinen eigenen CS-Pin, sodass immer nur eines aktiv ist. Die DIYables_TFT_SPI-Bibliothek verwaltet sowohl das Display als auch den XPT2046 Touch-Controller über eine einzige API — für die Touch-Seite ist keine separate SPI-Bibliothek erforderlich.
Bibliothek einrichten
Installieren Sie die Bibliothek einmal, dann lassen sich alle folgenden Beispiele kompilieren.
- Board anschließen: Verbinden Sie den ESP32 C3 Super Mini über ein USB-Typ-C-Kabel mit Ihrem Computer.
- Arduino IDE öffnen: Stellen Sie sicher, dass ESP32 C3 Super Mini unter Werkzeuge > Board ausgewählt ist, und wählen Sie den richtigen Port.
- Bibliotheksverwalter öffnen: Klicken Sie auf das Symbol Libraries in der linken Seitenleiste.
- Bibliothek suchen: Geben Sie "DIYables_TFT_SPI" in das Suchfeld ein und suchen Sie den Eintrag von DIYables.
- Installieren: Klicken Sie auf Install und dann auf Install All, wenn Abhängigkeiten angeboten werden.
- Search for DIYables TFT SPI created by DIYables.io and click the Install button.
Einstiegs-Sketch
Dies ist der kleinste Sketch, mit dem das TFT LCD Display am ESP32 C3 Super Mini läuft.
Was dieser Code macht:
- Bindet die DIYables_TFT_SPI-Bibliothek ein.
- Legt die Pins CS, DC und RST auf GPIO3, GPIO0 und GPIO1 fest.
- Erstellt das Display-Objekt für Ihren Treiberchip.
- Startet das Display und schaltet es ins Querformat.
※ Notiz:
Es darf nur EINE Display-Objekt-Zeile aktiv sein. Lassen Sie die anderen beiden auskommentiert, sonst lässt sich der Sketch nicht kompilieren.
Workshop - Formen zeichnen
Das Beispiel DrawShapes verwendet alle Adafruit GFX Zeichenprimitive auf dem ESP32 C3 Super Mini.
Was dieser Code macht:
- Zeichnet umrandete und gefüllte Kreise.
- Zeichnet umrandete und gefüllte Dreiecke.
- Zeichnet Rechtecke und abgerundete Rechtecke.
- Zeichnet Rauten aus einzelnen Linien.
- Zeichnet das gesamte Muster alle 10 Sekunden neu.
Schnelle Schritte
- Neu beim ESP32 C3 Super Mini? Absolvieren Sie zuerst unser Tutorial Erste Schritte mit dem ESP32 C3 Super Mini, um Ihre Entwicklungsumgebung einzurichten.
- Bauteile verdrahten: Schließen Sie das TFT LCD Modul gemäß der obigen Tabelle an. Verwenden Sie 3,3V für VCC.
- Board anschließen: Verbinden Sie den ESP32 C3 Super Mini über ein USB-Typ-C-Kabel mit Ihrem Computer.
- Board auswählen: Stellen Sie sicher, dass ESP32 C3 Super Mini unter Werkzeuge > Board ausgewählt ist, und wählen Sie den COM-Port.
- Code kopieren: Fügen Sie den obigen Code in die Arduino IDE ein.
- Code hochladen: Klicken Sie auf Upload und warten Sie auf die Fertig-Meldung.
- Ergebnis ansehen: Der Bildschirm zeigt ein Muster aus farbigen Formen.
- Profi-Tipp: Kommentieren Sie nur die Treiberzeile ein, die zu Ihrem Panel passt. Ein falscher Treiber führt zu einem leeren oder verrauschten Bildschirm.
Methodenreferenz
| Methode | Aktion | Syntax |
|---|---|---|
| begin() | Initialisiert das Display und setzt es zurück. | TFT_display.begin(); |
| setRotation(r) | Legt die Ausrichtung fest (0=Hochformat, 1=Querformat). | TFT_display.setRotation(1); |
| fillScreen(color) | Füllt den Bildschirm mit einer Farbe. | TFT_display.fillScreen(BLACK); |
| colorRGB(r,g,b) | Erzeugt eine 16-Bit-Farbe aus R, G, B. | colorRGB(255,128,0) |
| fillCircle(x,y,r,color) | Gefüllter Kreis. | TFT_display.fillCircle(100,100,50,RED); |
| fillRoundRect(x,y,w,h,r,color) | Gefülltes abgerundetes Rechteck. | TFT_display.fillRoundRect(10,10,100,50,10,BLUE); |
| drawTriangle(x0,y0,x1,y1,x2,y2,color) | Dreiecksumriss. | TFT_display.drawTriangle(60,10,10,110,110,110,GREEN); |
Workshop - Text und Zahlen anzeigen
Das Beispiel ShowTextAndNumber gibt Zeichenketten und Zahlen mit der eingebauten GFX-Text-Engine aus.
Was dieser Code macht:
- Legt die Textfarbe und die Textgröße fest.
- Gibt einen Temperaturwert mit einer Nachkommastelle aus.
- Gibt einen Feuchtigkeitswert mit Prozentzeichen aus.
- Platziert jede Zeile an ihrer eigenen Pixelposition.
Schnelle Schritte
- Verdrahten und hochladen: Verwenden Sie dieselbe Verdrahtung wie bei der Formen-Station und klicken Sie dann auf Upload.
- Ergebnis ansehen: Das Display gibt Textzeilen in verschiedenen Farben und Größen aus.
- Profi-Tipp: Textgröße 1 entspricht 6x8 Pixeln. Größe 3 ist auch quer durch den Raum gut lesbar.
Methodenreferenz
| Methode | Aktion | Syntax |
|---|---|---|
| setTextColor(color) | Legt die Vordergrundfarbe für die Textausgabe fest. | TFT_display.setTextColor(WHITE); |
| setTextSize(size) | Skaliert den Text um einen ganzzahligen Faktor. Größe 1 = 6×8 px. | TFT_display.setTextSize(2); |
| setCursor(x, y) | Bewegt den Textcursor an die Pixelposition (x, y). | TFT_display.setCursor(10, 20); |
| print(value) | Gibt eine Zeichenkette oder Zahl an der Cursorposition aus. | TFT_display.print("ESP32 C3!"); |
| println(value) | Gibt aus und bewegt den Cursor in die nächste Zeile. | TFT_display.println(42); |
Workshop - Bild zeichnen
In dieser Station laden Sie ein vollfarbiges RGB565-Bitmap auf das TFT LCD Display. Die Pixeldaten werden als PROGMEM-Array in bitmap.h in die Firmware kompiliert. Auf dem ESP32 C3 Super Mini liegen PROGMEM-Daten im Flash und werden in den Adressraum eingeblendet, sodass die Bilddaten keinen SRAM belegen.
Was dieser Code macht:
- Bindet das Bild-Array aus bitmap.h ein.
- Liest die tatsächliche Bildschirmbreite und -höhe vom Treiber.
- Zentriert das Bild auf dem Bildschirm.
- Invertiert die Farben alle 2 Sekunden, damit Sie die Aktualisierung sehen.
Fügen Sie dem Sketch einen zweiten Tab namens bitmap.h hinzu und fügen Sie diese Bilddaten dort ein.
Schnelle Schritte
- Tab erstellen: Drücken Sie in der Arduino IDE Strg+Umschalt+N und nennen Sie die neue Datei bitmap.h.
- Daten einfügen: Kopieren Sie den obigen Bitmap-Code in diesen Tab.
- Modul verdrahten: Schließen Sie das TFT LCD an den ESP32 C3 Super Mini an. Verwenden Sie 3,3V für VCC.
- Code hochladen: Wählen Sie Board und Port und klicken Sie dann auf Upload.
- Ergebnis ansehen: Das Bild erscheint in der Mitte des Bildschirms.
- Profi-Tipp: Verwenden Sie das Tool Image to Bitmap Converter, um Ihr eigenes PNG oder JPG in ein Bitmap-Array umzuwandeln, und passen Sie dann img_width und img_height an.
Methodenreferenz
| Methode | Aktion | Syntax |
|---|---|---|
| drawRGBBitmap(x,y,bitmap,w,h) | Zeichnet ein RGB565 PROGMEM-Bitmap mit der oberen linken Ecke bei (x, y). | TFT_display.drawRGBBitmap(0, 0, myImage, 240, 320); |
| fillScreen(color) | Füllt den Bildschirm vor dem Zeichnen des Bitmaps mit einer Farbe. | TFT_display.fillScreen(BLACK); |
Workshop - Bild von SD-Karte zeichnen
In dieser Station streamen Sie eine Bitmap-Datei von einer Micro-SD-Karte direkt auf das TFT LCD Display. Das SD-Kartenmodul teilt sich den SPI-Bus mit dem Display und benötigt nur einen eigenen CS-Pin.
Was dieser Code macht:
- Startet die SD-Karte am Chip-Select-Pin GPIO7.
- Liest den BMP-Header, um Bildbreite und -höhe zu ermitteln.
- Zentriert das Bild auf dem Bildschirm.
- Zeichnet das Bild Zeile für Zeile aus der Datei.
Verdrahten Sie das SD-Modul mit denselben SPI-Pins wie das Display (GPIO6, GPIO4, GPIO5 am ESP32 C3 Super Mini). Verbinden Sie SD CS mit GPIO7, der im Sketch SD_CS heißt.
Schnelle Schritte
- SD-Modul verdrahten: Teilen Sie MOSI (GPIO6), SCK (GPIO4), MISO (GPIO5) mit dem Display. Verbinden Sie SD CS mit GPIO7.
- Karte vorbereiten: Kopieren Sie eine 24-Bit-BMP-Datei namens diyables.bmp in das Stammverzeichnis der SD-Karte.
- Karte einsetzen: Stecken Sie die Micro-SD-Karte in das Modul.
- Board anschließen: Verbinden Sie den ESP32 C3 Super Mini über ein USB-Typ-C-Kabel mit Ihrem Computer.
- Code hochladen: Wählen Sie Board und Port und klicken Sie dann auf Upload.
- Ergebnis ansehen: Das von der SD-Karte gestreamte Bild erscheint auf dem TFT LCD Display.
- Profi-Tipp: Halten Sie Dateinamen kurz (höchstens 8 Zeichen vor .bmp), um die beste Kompatibilität mit der SD-Bibliothek zu erreichen.
Methodenreferenz
| Methode | Aktion | Syntax |
|---|---|---|
| startWrite() | Öffnet eine rohe SPI-Schreibsitzung und aktiviert den Display-CS. | TFT_display.startWrite(); |
| setAddrWindow(x0,y0,x1,y1) | Legt den rechteckigen Pixelbereich fest, der Daten empfängt. | TFT_display.setAddrWindow(0, 0, 239, 319); |
| pushColors(buf, len) | Schreibt einen Puffer mit RGB565-Pixelwerten direkt auf das Panel. | TFT_display.pushColors(buf, 512); |
| endWrite() | Schließt die SPI-Sitzung und gibt den Display-CS frei. | TFT_display.endWrite(); |
Workshop - Externe Schriftart verwenden
In dieser Station ersetzen Sie die Standard-Rasterschrift durch eine schärfere benutzerdefinierte Adafruit GFX Schriftart. Der Wechsel der Schriftart erfordert nur einen Funktionsaufruf.
Was dieser Code macht:
- Bindet den Schriftart-Header FreeSansBold12pt7b ein.
- Setzt diese Schriftart, bevor Text gezeichnet wird.
- Gibt Temperatur- und Feuchtigkeitswerte im neuen Aussehen aus.
- Belässt die Textgröße bei 1, da benutzerdefinierte Schriftarten bereits eine eigene Größe haben.
Schnelle Schritte
- Modul verdrahten: Schließen Sie das TFT LCD an den ESP32 C3 Super Mini an. Verwenden Sie 3,3V für VCC.
- Code hochladen: Wählen Sie Board und Port und klicken Sie dann auf Upload.
- Aussehen vergleichen: Betrachten Sie die benutzerdefinierte Schriftart auf dem Bildschirm und vergleichen Sie sie mit der eingebauten Schriftart.
- Profi-Tipp: Übergeben Sie NULL an setFont(), um jederzeit zur eingebauten 5x7-Schriftart zurückzukehren.
※ Notiz:
Einige benutzerdefinierte Schriftarten enthalten keine Sonderzeichen wie das Gradzeichen. Testen Sie Ihre Schriftart, bevor Sie eine ganze Oberfläche darauf aufbauen.
Methodenreferenz
| Methode | Aktion | Syntax |
|---|---|---|
| setFont(&FontName) | Wechselt zu einer benutzerdefinierten GFX-kompatiblen Schriftart. Die Übergabe von NULL stellt die eingebaute 5×7-Schriftart wieder her. | TFT_display.setFont(&FreeSans12pt7b); |
| setCursor(x, y) | Positioniert den Textcursor an der angegebenen Pixelkoordinate. | TFT_display.setCursor(10, 40); |
| setTextColor(color) | Legt die Vordergrundfarbe für alle nachfolgenden Textausgaben fest. | TFT_display.setTextColor(WHITE); |
| print(text) | Gibt eine Zeichenkette an der Cursorposition mit der aktiven Schriftart aus. | TFT_display.print("ESP32 Workshop"); |
Workshop - Touch-Punkt auslesen
In dieser Station lesen Sie den XPT2046 Touch-Controller mit dem ESP32 C3 Super Mini aus. Jeder Berührungspunkt wird im Seriellen Monitor ausgegeben und auf dem Bildschirm mit einem roten Punkt markiert.
Was dieser Code macht:
- Startet den Touch-Controller am Chip-Select-Pin GPIO10.
- Wendet einen Standard-Kalibrierungsbereich an.
- Gibt die Touch-Werte X und Y im Seriellen Monitor aus.
- Zeichnet einen kleinen roten Punkt an der Stelle, an der Sie drücken.
Verdrahtung: Teilen Sie den SPI-Bus (GPIO6, GPIO4, GPIO5) zwischen dem XPT2046 und dem Display. T_CS wird mit GPIO10 verbunden. T_IRQ kann unverbunden bleiben. Alle Signale arbeiten mit 3,3V.
Schnelle Schritte
- Touch-Panel verdrahten: Verbinden Sie T_CS mit GPIO10 und teilen Sie den SPI-Bus mit dem Display.
- Board anschließen: Verbinden Sie den ESP32 C3 Super Mini über ein USB-Typ-C-Kabel mit Ihrem Computer.
- Code hochladen: Wählen Sie Board und Port und klicken Sie dann auf Upload.
- Seriellen Monitor öffnen: Stellen Sie die Baudrate auf 115200 ein.
- Bildschirm drücken: Die X- und Y-Werte erscheinen, während Sie den Bildschirm berühren.
- Profi-Tipp: Wenn sich die Zahlen in die falsche Richtung bewegen, führen Sie die Station TouchCalibration aus und übernehmen Sie deren Werte hier.
Methodenreferenz
| Methode | Aktion | Syntax |
|---|---|---|
| initTouchSPI(cs, irq) | Initialisiert den XPT2046 am gemeinsamen SPI-Bus. Übergeben Sie -1 für irq, wenn der Interrupt-Pin nicht verbunden ist. | TFT_display.initTouchSPI(10, -1); |
| readTouchRaw(x, y, z) | Liest rohe ADC-Werte vom Controller unter Umgehung der Kalibrierung. Gibt true zurück, wenn gedrückt wird. | TFT_display.readTouchRaw(x, y, z); |
Workshop - Touch-Zeichnen
In dieser Station bauen Sie eine Touch-Mal-App auf dem ESP32 C3 Super Mini. Ziehen Sie einen Finger über das TFT LCD Display, um eine Linie zu malen.
Was dieser Code macht:
- Startet den XPT2046 am gemeinsamen SPI-Bus.
- Wendet die Kalibrierungswerte an, damit die Berührung den Pixeln entspricht.
- Liest in jedem Schleifendurchlauf den Berührungspunkt.
- Zeichnet an jedem Punkt einen kleinen gefüllten Kreis.
Schnelle Schritte
- Touch-Panel verdrahten: Gleiche Verdrahtung wie bei der Station Touch-Punkt auslesen. T_CS wird mit GPIO10 verbunden.
- Board anschließen: Verbinden Sie den ESP32 C3 Super Mini über ein USB-Typ-C-Kabel mit Ihrem Computer.
- Code hochladen: Wählen Sie Board und Port und klicken Sie dann auf Upload.
- Auf dem Bildschirm zeichnen: Berühren Sie den Bildschirm und ziehen Sie Ihren Finger, um zu malen.
- Profi-Tipp: Ändern Sie PEN_RADIUS, um den Pinsel dicker oder dünner zu machen.
Methodenreferenz
| Methode | Aktion | Syntax |
|---|---|---|
| initTouchSPI(cs, irq) | Startet den XPT2046 am gemeinsamen SPI-Bus. | TFT_display.initTouchSPI(10, -1); |
| setTouchCalibration(minX,maxX,minY,maxY) | Ordnet rohe ADC-Werte den Pixelkoordinaten des Bildschirms zu. Die vier Werte erhalten Sie aus der Station TouchCalibration. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
| setTouchInvertX(invert) / setTouchInvertY(invert) | Spiegelt die Touch-Achse, wenn X oder Y bei Ihrem Panel oder Ihrer Charge gespiegelt ist. VOR setTouchCalibration() aufrufen. | TFT_display.setTouchInvertY(true); |
| getTouch(x, y) | Gibt kalibrierte Touch-Koordinaten in Bildschirmpixeln zurück. Gibt true zurück, solange der Bildschirm gedrückt ist. | if (TFT_display.getTouch(x, y)) { ... } |
| fillCircle(x, y, r, color) | Zeichnet einen Punkt am Berührungspunkt und baut so den gemalten Strich auf. | TFT_display.fillCircle(x, y, 3, RED); |
Workshop - Touch-Schaltfläche
In dieser Station bauen Sie eine Schaltfläche auf dem Bildschirm, die auf ein Antippen reagiert. Der Code prüft, ob der Berührungspunkt innerhalb des Schaltflächen-Rechtecks liegt.
Was dieser Code macht:
- Zeichnet ein rotes Rechteck mit der Aufschrift PRESS.
- Liest in jedem Schleifendurchlauf den kalibrierten Berührungspunkt.
- Färbt die Schaltfläche grau und zeigt PRESSED an, solange Sie sie gedrückt halten.
- Entprellt die Berührung, sodass ein Antippen genau ein Ereignis ist.
- Gibt PRESSED und RELEASED im Seriellen Monitor aus.
T_IRQ ist hier optional. Der Sketch übergibt -1 als irq-Argument und arbeitet im Polling-Modus.
Schnelle Schritte
- Touch-Panel verdrahten: Verbinden Sie T_CS mit GPIO10. T_IRQ kann unverbunden bleiben.
- Board anschließen: Verbinden Sie den ESP32 C3 Super Mini über ein USB-Typ-C-Kabel mit Ihrem Computer.
- Code hochladen: Wählen Sie Board und Port und klicken Sie dann auf Upload.
- Seriellen Monitor öffnen: Stellen Sie die Baudrate auf 115200 ein.
- Schaltfläche antippen: Beobachten Sie, wie sie hervorgehoben wird und ihren Zustand ausgibt.
- Profi-Tipp: Ändern Sie BUTTON_X, BUTTON_Y, BUTTON_W und BUTTON_H, um eine ganze Reihe von Schaltflächen zu bauen.
Methodenreferenz
| Methode | Aktion | Syntax |
|---|---|---|
| initTouchSPI(cs, irq) | Initialisiert den XPT2046. Übergeben Sie -1 für irq, um den Interrupt-Pin zu deaktivieren. | TFT_display.initTouchSPI(10, -1); |
| setTouchCalibration(minX,maxX,minY,maxY) | Wendet die Kalibrierung an, damit getTouch() genaue Bildschirmkoordinaten zurückgibt. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
| setTouchInvertX(invert) / setTouchInvertY(invert) | Spiegelt die Touch-Achse, wenn X oder Y bei Ihrem Panel oder Ihrer Charge gespiegelt ist. VOR setTouchCalibration() aufrufen. | TFT_display.setTouchInvertY(true); |
| getTouch(x, y) | Liefert die aktuelle kalibrierte Touch-Position. Gibt true zurück, solange der Bildschirm gedrückt ist. | if (TFT_display.getTouch(x, y)) { ... } |
| fillRect(x, y, w, h, color) | Stellt eine Schaltfläche als gefülltes Rechteck dar. | TFT_display.fillRect(10, 10, 120, 60, BLUE); |
Workshop - Touch-Kalibrierung
In dieser Station ermitteln Sie die vier Kalibrierungswerte für Ihr eigenes Panel. Berühren Sie jede Ecke, wenn der Punkt blinkt, und der ESP32 C3 Super Mini gibt die benötigten Werte aus.
Was dieser Code macht:
- Lässt in jeder der vier Ecken einen roten Punkt blinken, nummeriert von 1 bis 4.
- Mittelt zehn Rohwerte für jede Ecke.
- Gibt während des Wartens die aktuellen Rohwerte Z, X und Y aus.
- Gibt am Ende eine fertig einfügbare setTouchCalibration() Zeile aus.
Schnelle Schritte
- Touch-Panel verdrahten: Gleiche Verdrahtung wie bei der Station Touch-Punkt auslesen. T_CS wird mit GPIO10 verbunden.
- Board anschließen: Verbinden Sie den ESP32 C3 Super Mini über ein USB-Typ-C-Kabel mit Ihrem Computer.
- Code hochladen: Wählen Sie Board und Port und klicken Sie dann auf Upload.
- Seriellen Monitor öffnen: Stellen Sie die Baudrate auf 115200 ein.
- Jede Ecke berühren: Drücken und halten Sie den blinkenden Punkt, bis Sie "Captured!" sehen.
- Ergebnis kopieren: Fügen Sie die ausgegebene setTouchCalibration() Zeile in die anderen Touch-Sketches ein.
- Profi-Tipp: Verwenden Sie einen Kunststoff-Stift statt eines Fingernagels, um möglichst gut wiederholbare Eckwerte zu erhalten.
Methodenreferenz
| Methode | Aktion | Syntax |
|---|---|---|
| initTouchSPI(cs, irq) | Initialisiert den XPT2046 Controller. | TFT_display.initTouchSPI(10, -1); |
| readTouchRaw(x, y, z) | Liest rohe ADC-Werte, um den Kalibrierungsbereich zu messen. | TFT_display.readTouchRaw(x, y, z); |
| setTouchCalibration(minX,maxX,minY,maxY) | Speichert Kalibrierungskonstanten, damit getTouch() Rohwerte auf Pixelkoordinaten abbildet. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
| setTouchInvertX(invert) / setTouchInvertY(invert) | Spiegelt die Touch-Achse, wenn X oder Y bei Ihrem Panel oder Ihrer Charge gespiegelt ist. VOR der Kalibrierung aufrufen, damit die gespeicherten Werte zu Ihrem Panel passen. | TFT_display.setTouchInvertY(true); |
Workshop - Benutzerdefinierter SPI
In dieser Station übergeben Sie Ihr eigenes SPIClass-Objekt an den Display-Konstruktor. Das ist nützlich, wenn Sie die volle Kontrolle über den SPI-Bus haben möchten, den der ESP32 C3 Super Mini für den Bildschirm verwendet.
Was dieser Code macht:
- Definiert MY_SPI als Zeiger auf ein SPI-Bus-Objekt.
- Übergibt diesen Zeiger als letztes Konstruktorargument.
- Zeichnet drei Farbbalken, um zu bestätigen, dass der Bus funktioniert.
- Gibt eine kurze Meldung in der Mitte des Bildschirms aus.
Schnelle Schritte
- Standard-Bus beibehalten: Der ESP32 C3 Super Mini hat einen SPI-Bus an den Stiftleisten, lassen Sie MY_SPI daher auf &SPI.
- Modul verdrahten: Verwenden Sie GPIO6 für MOSI, GPIO4 für SCK, GPIO5 für MISO, GPIO3 für CS.
- Board anschließen: Verbinden Sie den ESP32 C3 Super Mini über ein USB-Typ-C-Kabel mit Ihrem Computer.
- Code hochladen: Wählen Sie Board und Port und klicken Sie dann auf Upload.
- Ergebnis ansehen: Rote, grüne und blaue Balken füllen den Bildschirm mit einer Textbeschriftung.
- Profi-Tipp: Wenn Sie das SPI-Objekt explizit übergeben, lässt sich Ihr Sketch leicht auf ein Board mit zwei SPI-Bussen übertragen.
Methodenreferenz
| Methode | Aktion | Syntax |
|---|---|---|
| DIYables_ILI9341_SPI(w,h,cs,dc,rst,spi) | Konstruktor, der als letztes Argument einen expliziten SPIClass-Zeiger akzeptiert. Standardwert ist &SPI, wenn weggelassen. | DIYables_ILI9341_SPI tft(240, 320, 7, 3, 2, &SPI); |
| begin() | Initialisiert das Display am konfigurierten SPI-Bus. | TFT_display.begin(); |
Fehlerbehebung
Verwenden Sie diese Tabelle, wenn sich das TFT LCD Display nicht wie erwartet verhält.
| Problem | Mögliche Ursache | Lösung |
|---|---|---|
| Schwarzer Bildschirm | VCC an 5V, oder CS/DC nicht verbunden | Verwenden Sie 3.3V für VCC; prüfen Sie die Verdrahtung von CS (GPIO3) und DC (GPIO0) |
| Zeichensalat auf dem Bildschirm | Falscher Treiber-Konstruktor aktiv | Lassen Sie nur einen Konstruktor unkommentiert |
| Bild verschoben oder fehlt | Falsche Breite oder Höhe im Konstruktor | Passen Sie die Werte an die physische Größe Ihres Panels an |
| Touch reagiert nicht | Fehlende Kalibrierung | Führen Sie das Beispiel TouchCalibration aus und übernehmen Sie die ausgegebenen Werte |
| Nichts im Seriellen Monitor | Falsche Baudrate | Stellen Sie den Seriellen Monitor auf 115200 ein |
| Hochladen schlägt fehl | Board im falschen Modus | Halten Sie BOOT gedrückt, während Sie RESET drücken, und versuchen Sie das Hochladen erneut |
| SD-Karte nicht gefunden | CS-Pin-Konflikt | SD_CS muss GPIO7 sein, verschieden vom Display-CS (GPIO3) |
Anwendungs- und Projektideen
Hier sind einige spannende Dinge, die Sie mit einem ESP32 C3 Super Mini und einem SPI TFT LCD Touch-Display bauen können.
- Touch-Thermostat: Zeigen Sie die Raumtemperatur an und stellen Sie den Sollwert mit Schaltflächen auf dem Bildschirm ein.
- WLAN-Wetteranzeige: Rufen Sie die Vorhersage über WLAN ab und zeichnen Sie Symbole auf das TFT LCD Display.
- Bilderrahmen: Zeigen Sie nacheinander Bitmap-Bilder von einer Micro-SD-Karte an.
- Sensor-Dashboard: Stellen Sie Live-Sensorwerte als Balken oder als scrollendes Diagramm dar.
- Zeichenblock: Verwandeln Sie den Touchscreen in einen Skizzenblock mit Farbschaltflächen.
- Menüsteuerung: Bauen Sie ein Touch-Menü, das Ihr Projekt zwischen verschiedenen Modi umschaltet.
Fordern Sie sich heraus
Probieren Sie diese Aufgaben aus, um mit dem ESP32 C3 Super Mini und Ihrem SPI TFT LCD Display weiterzukommen.
- Einfach: Ändern Sie die Farben und die Textgröße im Beispiel ShowTextAndNumber.
- Einfach: Ersetzen Sie das Bitmap in bitmap.h durch Ihr eigenes Bild.
- Mittel: Fügen Sie eine zweite Touch-Schaltfläche hinzu, die den Zeichenbildschirm löscht.
- Mittel: Zeigen Sie einen analogen Live-Messwert auf dem Display an und denken Sie daran, dass der ADC 0-4095 liefert. RST ist optional, verbinden Sie daher den RESET-Pin des Displays mit 3,3V und verwenden Sie den frei gewordenen GPIO1 für den Sensor.
- Fortgeschritten: Bauen Sie ein dreiseitiges Touch-Menü, das zwischen einer Uhr, einer Anzeige und einer Einstellungsseite wechselt.
- Fortgeschritten: Speichern Sie jeden Berührungspunkt auf der Micro-SD-Karte und zeichnen Sie das gesamte Bild nach einem Reset neu.
Plattformunterstützung
Die Bibliothek basiert vollständig auf den Arduino-Standard-APIs und unterstützt alle Arduino-kompatiblen Plattformen (architectures=*).