Skip to content

Technik Blog

IoT, Smart Home & Mikrocontroller einfach erklärt

Menu
  • Smarthome
  • Gartenautomation
  • Mikrocontroller
    • Arduino
    • ESP32 & Co.
    • Calliope Mini
    • Raspberry Pi & Pico
  • Solo Mining
  • Über mich
Menu

ILI9341-Touchdisplay am ESP32-C3 Super Mini anschließen

Veröffentlicht am 7. September 20268. September 2026 von Stefan Draeger

Manchmal entstehen die besten Ideen für neue Blogbeiträge nicht auf dem Schreibtisch, sondern direkt durch Fragen aus der Community. Genau so war es auch bei diesem Beitrag: In einem Support-Ticket wurde ich gefragt, wie sich ein 2,4-Zoll-Touchdisplay mit ILI9341-Controller an einen ESP32-C3 Super Mini anschließen lässt.

ILI9341 Touchdisplay am ESP32-C3 Super Mini anschließen – so geht’s!
Dieses Video auf YouTube ansehen.

Auf den ersten Blick ist diese Kombination durchaus spannend. Das Display benötigt mehrere Anschlüsse für die SPI-Kommunikation und die Touchfunktion, während der kompakte ESP32-C3 Super Mini nur eine begrenzte Anzahl an GPIOs bereitstellt. Reichen die vorhandenen Pins trotzdem aus, um das Display vollständig zu verwenden?

Über solche Fragen freue ich mich immer besonders. Sie geben mir direktes Feedback dazu, welche Themen auf meinem Blog noch fehlen oder an welcher Stelle zusätzliche Erklärungen hilfreich wären. Gleichzeitig entstehen daraus Beiträge, die nicht nur ein theoretisches Problem behandeln, sondern einen echten Mehrwert für die Community bieten.

In diesem Beitrag schauen wir uns deshalb genauer an, wie das ILI9341-Touchdisplay funktioniert, wie viele GPIOs tatsächlich benötigt werden und wie es mit dem ESP32-C3 Super Mini verbunden wird. Anschließend nehmen wir das Display mit einem einfachen Beispielprogramm in Betrieb und prüfen, ob neben der Bildausgabe auch die Touchfunktion genutzt werden kann.

Für mich dient dieser Aufbau außerdem als Einstieg in ein größeres Projekt: ein eigenständiges KI-Chatbot-System auf Basis eines ESP32. Auch wenn dort später wahrscheinlich ein anderes Display eingesetzt wird, bleiben die hier behandelten Grundlagen zur SPI-Kommunikation und Displayansteuerung weiterhin relevant.

Inhaltsverzeichnis

  • Benötigte Bauteile
    • Das 2,4-Zoll-TFT-Touchdisplay
    • Der ESP32-C3 Super Mini
  • Aufbau der Schaltung
    • Reichen die GPIOs des ESP32-C3 Super Mini aus?
  • Entwicklungsumgebung vorbereiten
    • ESP32-Boardpaket installieren
    • TFT_eSPI installieren
  • TFT_eSPI über die Datei User_Setup.h konfigurieren
    • Vorhandene Einstellungen deaktivieren
    • Konfiguration für den ESP32-C3 Super Mini
    • Bedeutung der Pinbelegung
    • Schriftarten und SPI-Geschwindigkeit
  • ILI9341-Display mit einem einfachen Programm testen
  • Touchfunktion des Displays testen
    • Touchtest durchführen
  • Fazit und Ausblick

Benötigte Bauteile

Für den Anschluss und den ersten Funktionstest benötigst du folgende Komponenten:

BauteilAnzahl
ESP32-C3 Super Mini*1
2,4-Zoll-TFT-Touchdisplay mit ILI9341-Controller*1
400 Pin Breadboard*1
Breadboardkabel* , männlich–männlich, 10cmca. 12
USB-C-Datenkabel*1

Hinweis von mir: Die mit einem Sternchen (*) markierten Links sind Affiliate-Links. Wenn du über diese Links einkaufst, erhalte ich eine kleine Provision, die dazu beiträgt, diesen Blog zu unterstützen. Der Preis für dich bleibt dabei unverändert. Vielen Dank für deine Unterstützung!

Achte beim USB-C-Kabel darauf, dass es nicht ausschließlich zum Laden geeignet ist. Für die Übertragung des Programms auf den ESP32-C3 Super Mini muss das Kabel auch Daten übertragen können.

Das Display besitzt zusätzlich einen Steckplatz für eine microSD-Karte. Für den grundlegenden Aufbau sowie den Test von Display und Touchfunktion wird jedoch keine Speicherkarte benötigt.

Das 2,4-Zoll-TFT-Touchdisplay

Bei dem verwendeten Modul handelt es sich um ein 2,4 Zoll großes TFT-Farbdisplay mit ILI9341-Controller. Die Kommunikation mit dem Mikrocontroller erfolgt über die SPI-Schnittstelle. Für diesen Displaycontroller stehen zahlreiche Bibliotheken und Beispielprogramme zur Verfügung.

Die wichtigsten technischen Daten im Überblick:

EigenschaftWert
DisplaytypTFT-Farbdisplay
Bildschirmdiagonale2,4 Zoll
Auflösung240 × 320 Pixel
DisplaycontrollerILI9341
Farbdarstellung65.536 Farben
Schnittstelle4-Draht-SPI
Touchscreenresistiv
Aktive Displayflächeca. 36,72 × 48,96 mm
Abmessungen des Modulsca. 77,18 × 42,72 mm
Versorgungsspannung3,3 bis 5 V
Logikpegel3,3 V
Leistungsaufnahmeca. 0,57 W
SpeicherkartensteckplatzmicroSD
AusrichtungHoch- und Querformat möglich

Neben Texten und Messwerten lassen sich auf dem Display auch geometrische Formen, Menüs, Schaltflächen und kleinere Bilder darstellen.

Der resistive Touchscreen erkennt Eingaben durch Druck auf die Oberfläche. Sein Touchcontroller wird ebenfalls über SPI angesprochen und kann sich die Takt- und Datenleitungen mit dem ILI9341 teilen. Lediglich eine separate Chip-Select-Leitung ist erforderlich, damit der ESP32-C3 Super Mini zwischen Display und Touchcontroller unterscheiden kann.

Der auf der Rückseite vorhandene microSD-Kartensteckplatz wird in diesem Aufbau zunächst nicht verwendet.

Der ESP32-C3 Super Mini

Den ESP32-C3 Super Mini habe ich bereits in verschiedenen Projekten auf meinem Blog verwendet. Das kompakte Entwicklungsboard basiert auf dem ESP32-C3 und bietet trotz seiner geringen Größe WLAN, Bluetooth Low Energy und ausreichend Leistung für zahlreiche kleinere IoT- und Mikrocontroller-Projekte.

ESP32-C3 Super Mini
ESP32-C3 Super Mini
ESP32-C3 Super Mini
ESP32-C3 Super Mini
ESP32-C3 Chip
ESP32-C3 Chip
ESP32-C3 Super Mini
ESP32-C3 Super Mini
EigenschaftWert
MikrocontrollerESP32-C3
Prozessor32-Bit-RISC-V-Single-Core
Taktfrequenzbis zu 160 MHz
Flash-Speicher4 MB
WLAN2,4 GHz, IEEE 802.11 b/g/n
BluetoothBluetooth Low Energy 5
Logikspannung3,3 V
USB SchnittstelleUSB-C
Verfügbare GPIOsGPIO 0 bis 10 sowie GPIO 20 und 21
SchnittstellenSPI, I²C, UART, PWM und ADC

Für diesen Aufbau ist vor allem die geringe Anzahl frei verfügbarer GPIOs interessant. Einige Pins besitzen außerdem besondere Funktionen während des Startvorgangs. Display und Touchcontroller werden deshalb über einen gemeinsamen SPI-Bus betrieben. Auf diese Weise reichen die Anschlüsse des kleinen ESP32-C3 Super Mini für beide Komponenten aus.

ESP32-C3 Pinout
ESP32-C3 Pinout

Aufbau der Schaltung

Das Display und der integrierte Touchcontroller kommunizieren jeweils über SPI mit dem ESP32-C3 Super Mini. Dabei müssen jedoch nicht zwei vollständig getrennte SPI-Verbindungen aufgebaut werden: Beide Komponenten können sich die Leitungen für Takt und Daten teilen.

Lediglich für die Auswahl des Displays und des Touchcontrollers werden getrennte Chip-Select-Leitungen benötigt. Dadurch bleibt der GPIO-Bedarf trotz der vielen Anschlüsse des Displaymoduls überschaubar.

Für den Aufbau verwende ich folgende Pinbelegung:

Anschluss am DisplayESP32-C3 Super MiniFunktion
VCC5VSpannungsversorgung
GNDGNDMasse
CSGPIO 10Auswahl des Displays
RESETGPIO 1Reset des Displays
DC/RSGPIO 3Umschaltung zwischen Befehlen und Bilddaten
SDI (MOSI)GPIO 7Daten vom ESP32 zum Display
SCKGPIO 6SPI-Taktsignal
LED3,3VHintergrundbeleuchtung
SDO (MISO)nicht verbundenFür die reine Bildausgabe nicht erforderlich
T_CLKGPIO 6Gemeinsames SPI-Taktsignal
T_CSGPIO 4Auswahl des Touchcontrollers
T_DINGPIO 7Daten vom ESP32 zum Touchcontroller
T_DOGPIO 5Touchdaten zum ESP32
T_IRQnicht verbundenTouch-Interrupt wird zunächst nicht verwendet

Die Anschlüsse SCK und T_CLK werden gemeinsam mit GPIO 6 verbunden. Ebenso werden SDI (MOSI) und T_DIN gemeinsam an GPIO 7 angeschlossen. Der Touchcontroller sendet seine Messwerte über T_DO an GPIO 5 zurück.

Der Anschluss SDO (MISO) des ILI9341 bleibt in diesem Aufbau frei. Er wird nur benötigt, wenn Daten direkt aus dem Displaycontroller ausgelesen werden sollen. Für die Darstellung von Texten, Formen oder Bildern ist diese Verbindung nicht erforderlich.

Auch T_IRQ bleibt zunächst unbeschaltet. Statt auf ein Interruptsignal zu warten, kann das Programm den Touchcontroller regelmäßig abfragen. Möchtest du später auf Berührungen per Interrupt reagieren, kann T_IRQ mit einem weiteren freien GPIO verbunden werden.

Reichen die GPIOs des ESP32-C3 Super Mini aus?

Für die Bildausgabe und die Touchfunktion werden mit dieser Pinbelegung insgesamt sieben GPIOs verwendet:

  • GPIO 1 für den Display-Reset
  • GPIO 3 für DC/RS
  • GPIO 4 für Touch-CS
  • GPIO 5 für die Touchdaten
  • GPIO 6 für den SPI-Takt
  • GPIO 7 für die ausgehenden SPI-Daten
  • GPIO 10 für Display-CS

Damit reichen die Anschlüsse des ESP32-C3 Super Mini für das ILI9341-Touchdisplay aus. Gleichzeitig bleiben weitere GPIOs für spätere Erweiterungen frei.

Die Boot-Pins GPIO 2, GPIO 8 und GPIO 9 werden bei diesem Aufbau bewusst nicht verwendet. Angeschlossene Komponenten können deren Signalpegel während des Starts beeinflussen und dadurch im ungünstigsten Fall verhindern, dass der ESP32-C3 normal startet.

Entwicklungsumgebung vorbereiten

Bevor das Display programmiert werden kann, müssen das passende Boardpaket für den ESP32-C3 und die Bibliothek TFT_eSPI installiert werden. Bei diesem Projekt ist die verwendete Versionskombination besonders wichtig.

Für den funktionierenden Aufbau verwende ich:

ESP32-Boardpaket installieren

Das benötigte Boardpaket findest du in der Arduino IDE über den Boardverwalter. Öffne diesen über das Board-Symbol in der linken Seitenleiste und suche nach: esp32 by Espressif Systems

Wähle anschließend im Auswahlfeld die Version 2.0.14 aus und installiere sie.

Danach kann unter den verfügbaren Boards das folgende Modell ausgewählt werden: ESP32C3 Dev Module

Die Verwendung der Version 2.0.14 ist in diesem Projekt notwendig. Mit einer neueren Version des ESP32-Boardpakets stürzte der ESP32-C3 Super Mini bei der Initialisierung des Displays ab. Im seriellen Monitor wurde dabei folgende Fehlermeldung ausgegeben: Guru Meditation Error: Core 0 panic'ed (Store access fault). Exception was unhandled.

Der Fehler trat direkt beim Aufruf von tft.init() auf. Nach dem Wechsel auf Version 2.0.14 wurde das Display ohne Absturz initialisiert.

TFT_eSPI installieren

Anschließend wird die Bibliothek TFT_eSPI benötigt. Öffne dazu den Bibliotheksverwalter der Arduino IDE und suche nach: TFT_eSPI

Installiere die Bibliothek von Bodmer in der Version 2.5.43.

TFT_eSPI übernimmt später unter anderem:

  • die Initialisierung des ILI9341,
  • die Kommunikation über den SPI-Bus,
  • das Zeichnen von Texten und Formen,
  • die Darstellung von Farben und Bildern,
  • das Auslesen des Touchcontrollers.

Die Bibliothek muss nach der Installation noch an das verwendete Display und die Pinbelegung des ESP32-C3 Super Mini angepasst werden. Diese Konfiguration erfolgt im nächsten Schritt in der Datei User_Setup.h.

Wichtig: Aktualisiere das ESP32-Boardpaket und TFT_eSPI für diesen Aufbau nicht unkontrolliert. Neuere Versionen können das beschriebene Zusammenspiel verändern. Notiere dir deshalb die funktionierende Versionskombination oder deaktiviere automatische Aktualisierungen.

TFT_eSPI über die Datei User_Setup.h konfigurieren

Nach der Installation muss die Bibliothek TFT_eSPI an den verwendeten Displaycontroller und die Pinbelegung des ESP32-C3 Super Mini angepasst werden. Anders als bei vielen anderen Displaybibliotheken werden diese Einstellungen nicht direkt im Arduino-Programm vorgenommen, sondern in der Datei User_Setup.h.

Du findest sie im Installationsverzeichnis der Bibliothek: Arduino/libraries/TFT_eSPI/User_Setup.h

Bevor du die Datei veränderst, solltest du eine Sicherungskopie erstellen. Bei einem späteren Update von TFT_eSPI kann die angepasste Konfiguration überschrieben werden.

Vorhandene Einstellungen deaktivieren

In der Datei sind bereits zahlreiche Displaytreiber und Beispielkonfigurationen vorhanden. Achte darauf, dass immer nur ein Displaytreiber und jeweils eine Definition für die verwendeten GPIOs aktiv sind.

Nicht benötigte Einträge werden mit zwei Schrägstrichen auskommentiert:

//#define ILI9341_DRIVER

Für das hier verwendete Display wird der alternative Treiber ILI9341_2_DRIVER benötigt. Mit dem normalen ILI9341-Treiber wurde die Displayfläche nicht vollständig korrekt angesteuert und im unteren Bereich erschienen regenbogenfarbige Pixel.

Konfiguration für den ESP32-C3 Super Mini

Die vollständige Konfiguration für den hier gezeigten Aufbau lautet:

#define ILI9341_2_DRIVER

#define TFT_INVERSION_OFF

#define TFT_MISO  5
#define TFT_MOSI  7
#define TFT_SCLK  6

#define TFT_CS   10
#define TFT_DC    3
#define TFT_RST   1

#define TOUCH_CS  4

#define LOAD_GLCD
#define LOAD_FONT2
#define LOAD_FONT4
#define LOAD_FONT6
#define LOAD_FONT7
#define LOAD_FONT8
#define LOAD_GFXFF
#define SMOOTH_FONT

#define SPI_FREQUENCY        40000000
#define SPI_READ_FREQUENCY   20000000
#define SPI_TOUCH_FREQUENCY   2500000

Die Auflösung von 240 × 320 Pixeln muss nicht zusätzlich über TFT_WIDTH und TFT_HEIGHT angegeben werden. Sie ist bereits im ausgewählten ILI9341-Treiber hinterlegt.

Bedeutung der Pinbelegung

Die Definitionen entsprechen der zuvor aufgebauten Schaltung:

DefinitionGPIOAufgabe
TFT_MISO5Daten vom Touchcontroller zum ESP32
TFT_MOSI7Daten vom ESP32 zum Display und Touchcontroller
TFT_SCLK6Gemeinsames SPI-Taktsignal
TFT_CS10Auswahl des Displaycontrollers
TFT_DC3Umschaltung zwischen Befehlen und Bilddaten
TFT_RST1Zurücksetzen des Displays
TOUCH_CS4Auswahl des Touchcontrollers

Display und Touchcontroller teilen sich somit die SPI-Leitungen. Über TFT_CS und TOUCH_CS wählt die Bibliothek aus, welcher Controller gerade angesprochen werden soll.

Schriftarten und SPI-Geschwindigkeit

Über die Definitionen LOAD_FONT2 bis LOAD_FONT8 werden verschiedene Schriftgrößen geladen. LOAD_GFXFF aktiviert zusätzlich die freien GFX-Schriftarten, während SMOOTH_FONT die Verwendung geglätteter Schriftarten ermöglicht.

Für die Bildausgabe wird eine SPI-Frequenz von 40 MHz verwendet. Lesezugriffe erfolgen mit 20 MHz. Der Touchcontroller wird mit einer deutlich niedrigeren Frequenz von 2,5 MHz angesprochen, um die Touchwerte zuverlässig zu übertragen.

Nach dem Speichern der User_Setup.h steht die Konfiguration allen Arduino-Programmen zur Verfügung, die TFT_eSPI verwenden. Die GPIOs müssen daher nicht noch einmal im eigentlichen Programm definiert werden.

Bei dem verwendeten Display werden die Farben trotz TFT_INVERSION_OFF zunächst invertiert dargestellt. Im Testprogramm wird deshalb nach der Initialisierung zusätzlich folgender Aufruf benötigt:

tft.invertDisplay(true);

Damit werden die Farben auf diesem Displaymodul korrekt dargestellt.

ILI9341-Display mit einem einfachen Programm testen

Das folgende Programm zeigt nacheinander drei Grundfarben an. Anschließend werden ein Text, ein Rechteck und ein Kreis dargestellt. Damit lassen sich Initialisierung, Farbdarstellung, Auflösung und Ausrichtung überprüfen.

Quellcode – einfaches Beispiel zum Testen des Displays am ESP32-C3 Super Mini
// Bibliothek für die Ansteuerung des TFT-Displays einbinden.
// Displaytyp, Pinbelegung und SPI-Geschwindigkeit werden
// zuvor in der Datei User_Setup.h konfiguriert.
#include <TFT_eSPI.h>


// Ein Displayobjekt der Klasse TFT_eSPI erzeugen.
// Über dieses Objekt werden später alle Zeichenbefehle ausgeführt.
TFT_eSPI tft = TFT_eSPI();


void setup() {

  // Serielle Kommunikation starten.
  // Die Ausgabe dient ausschließlich der Kontrolle im seriellen Monitor.
  Serial.begin(115200);

  // Kurze Pause, damit die serielle Schnittstelle nach dem Start
  // des ESP32-C3 Super Mini ausreichend Zeit zur Initialisierung hat.
  delay(1000);

  Serial.println("Display wird initialisiert");


  // Display initialisieren.
  // TFT_eSPI verwendet dabei die Einstellungen aus der User_Setup.h.
  tft.init();


  // Ausrichtung des Displays festlegen.
  //
  // 0 = Hochformat
  // 1 = Querformat
  // 2 = gedrehtes Hochformat
  // 3 = gedrehtes Querformat
  //
  // Mit Rotation 1 beträgt die nutzbare Auflösung 320 x 240 Pixel.
  tft.setRotation(1);


  // Bei dem verwendeten Displaymodul werden die Farben ohne diese
  // Einstellung invertiert dargestellt.
  //
  // Beispielsweise erscheint Grün sonst als Lila und Blau als Gelb.
  tft.invertDisplay(true);

  Serial.println("Display wurde initialisiert");


  // ------------------------------------------------------------
  // Grundfarben testen
  // ------------------------------------------------------------

  // Die komplette Displayfläche rot ausfüllen.
  tft.fillScreen(TFT_RED);

  // Die Farbe eine Sekunde lang anzeigen.
  delay(1000);


  // Die komplette Displayfläche grün ausfüllen.
  tft.fillScreen(TFT_GREEN);

  // Die Farbe eine Sekunde lang anzeigen.
  delay(1000);


  // Die komplette Displayfläche blau ausfüllen.
  tft.fillScreen(TFT_BLUE);

  // Die Farbe eine Sekunde lang anzeigen.
  delay(1000);


  // ------------------------------------------------------------
  // Testbildschirm zeichnen
  // ------------------------------------------------------------

  // Display löschen und den Hintergrund schwarz einfärben.
  tft.fillScreen(TFT_BLACK);


  // Einen grünen Rahmen mit einem Abstand von fünf Pixeln
  // zum Rand des Displays zeichnen.
  //
  // Parameter:
  // 1. X-Position der linken oberen Ecke
  // 2. Y-Position der linken oberen Ecke
  // 3. Breite des Rechtecks
  // 4. Höhe des Rechtecks
  // 5. Farbe des Rahmens
  tft.drawRect(
    5,
    5,
    tft.width() - 10,
    tft.height() - 10,
    TFT_GREEN
  );


  // Einen ausgefüllten gelben Kreis zeichnen.
  //
  // Die X-Position wird aus der halben Displaybreite berechnet.
  // Dadurch befindet sich der Kreis horizontal in der Mitte.
  //
  // Parameter:
  // 1. X-Position des Kreismittelpunkts
  // 2. Y-Position des Kreismittelpunkts
  // 3. Radius in Pixeln
  // 4. Farbe
  tft.fillCircle(
    tft.width() / 2,
    70,
    30,
    TFT_YELLOW
  );


  // ------------------------------------------------------------
  // Textausgabe vorbereiten
  // ------------------------------------------------------------

  // Textfarbe und Hintergrundfarbe festlegen.
  //
  // Der Text wird weiß dargestellt.
  // Der Hintergrund einzelner Zeichen wird schwarz gezeichnet.
  tft.setTextColor(TFT_WHITE, TFT_BLACK);


  // Bezugspunkt für die Textposition festlegen.
  //
  // MC_DATUM bedeutet "Middle Centre".
  // Die angegebenen Koordinaten beziehen sich damit auf die
  // horizontale und vertikale Mitte des Textes.
  tft.setTextDatum(MC_DATUM);


  // Überschrift auf dem Display ausgeben.
  //
  // Parameter:
  // 1. Text
  // 2. horizontale Position
  // 3. vertikale Position
  // 4. verwendete Schriftart
  tft.drawString(
    "ILI9341 funktioniert!",
    tft.width() / 2,
    140,
    4
  );


  // Für die zweite Textzeile eine andere Farbe auswählen.
  tft.setTextColor(TFT_CYAN, TFT_BLACK);


  // Aktuelle Displayauflösung als Text zusammensetzen.
  //
  // Durch setRotation(1) liefert:
  // tft.width()  den Wert 320
  // tft.height() den Wert 240
  String aufloesung =
    String(tft.width()) +
    " x " +
    String(tft.height()) +
    " Pixel";


  // Auflösung mittig unterhalb der Überschrift ausgeben.
  tft.drawString(
    aufloesung,
    tft.width() / 2,
    180,
    2
  );


  // ------------------------------------------------------------
  // Informationen im seriellen Monitor ausgeben
  // ------------------------------------------------------------

  Serial.print("Aufloesung: ");
  Serial.print(tft.width());
  Serial.print(" x ");
  Serial.println(tft.height());

  Serial.println("Displaytest abgeschlossen");
}


void loop() {

  // In diesem Testprogramm ist keine wiederkehrende Aufgabe nötig.
  //
  // Der in setup() gezeichnete Inhalt bleibt auf dem Display
  // sichtbar, bis er durch einen neuen Zeichenbefehl überschrieben
  // oder die Stromversorgung getrennt wird.
}

Nach dem Start sollte das Display jeweils für eine Sekunde Rot, Grün und Blau anzeigen. Danach erscheint ein schwarzer Testbildschirm mit:

  • einem grünen Rahmen,
  • einem gelben Kreis,
  • dem Text „ILI9341 funktioniert!“,
  • der Auflösung 320 x 240 Pixel.

Wenn der gesamte Bildschirm korrekt ausgefüllt wird und die Farben stimmen, funktionieren Display, SPI-Verbindung und TFT_eSPI-Konfiguration.

Touchfunktion des Displays testen

Nachdem die Bildausgabe funktioniert, prüfen wir nun den resistiven Touchscreen. Für diesen ersten Test ist noch keine Kalibrierung erforderlich. Das Programm liest lediglich die Rohwerte des Touchcontrollers aus und zeigt sie auf dem Display sowie im seriellen Monitor an.

Dem Display liegt ein kleiner Eingabestift bei. Damit lässt sich der resistive Touchscreen nahezu punktgenau bedienen – besonders bei kleinen Schaltflächen oder Menüpunkten ist das deutlich präziser als mit dem Finger. Gleichzeitig vermeidest du damit unschöne Fingerabdrücke auf der Displayoberfläche.

Quellcode zum Testen der Funktion Touch des TFT-Displays
// Bibliothek für Display und Touchcontroller einbinden.
// Die Pinbelegung wurde zuvor in der User_Setup.h festgelegt.
#include <TFT_eSPI.h>


// Displayobjekt erstellen.
// Darüber erfolgen sowohl die Bildausgabe als auch der Touchzugriff.
TFT_eSPI tft = TFT_eSPI();


void setup() {

  // Serielle Kommunikation für die Ausgabe der Touchwerte starten.
  Serial.begin(115200);

  // Kurze Pause, damit die serielle Schnittstelle bereit ist.
  delay(1000);

  Serial.println("Display wird initialisiert");


  // Display und SPI-Schnittstelle initialisieren.
  tft.init();


  // Display im Querformat verwenden.
  // Dadurch stehen 320 x 240 Pixel zur Verfügung.
  tft.setRotation(1);


  // Bei diesem Displaymodul ist diese Einstellung erforderlich,
  // damit die Farben korrekt dargestellt werden.
  tft.invertDisplay(true);


  // Schwarzen Hintergrund zeichnen.
  tft.fillScreen(TFT_BLACK);


  // Grünen Rahmen mit fünf Pixeln Abstand zum Rand zeichnen.
  tft.drawRect(
    5,
    5,
    tft.width() - 10,
    tft.height() - 10,
    TFT_GREEN
  );


  // Bezugspunkt für die Texte auf die Mitte setzen.
  // Die angegebenen Koordinaten entsprechen dadurch
  // jeweils dem Mittelpunkt des Textes.
  tft.setTextDatum(MC_DATUM);


  // Überschrift ausgeben.
  tft.setTextColor(TFT_WHITE, TFT_BLACK);
  tft.drawString(
    "Touchscreen testen",
    tft.width() / 2,
    60,
    4
  );


  // Hinweis für den Benutzer anzeigen.
  tft.setTextColor(TFT_YELLOW, TFT_BLACK);
  tft.drawString(
    "Display mit dem Stift beruehren",
    tft.width() / 2,
    110,
    2
  );


  // Platzhalter anzeigen, bis die erste Berührung erkannt wird.
  tft.setTextColor(TFT_LIGHTGREY, TFT_BLACK);
  tft.drawString(
    "Warte auf Eingabe ...",
    tft.width() / 2,
    160,
    2
  );


  Serial.println("Touchtest gestartet");
  Serial.println("Display mit dem Eingabestift beruehren");
}


void loop() {

  // Variablen für die vom Touchcontroller gelieferten Rohwerte.
  uint16_t touchX;
  uint16_t touchY;


  // Prüfen, ob der Touchscreen gerade berührt wird.
  //
  // getTouchRaw() liefert noch keine fertigen Pixelkoordinaten,
  // sondern die unverarbeiteten Messwerte des Touchcontrollers.
  if (tft.getTouchRaw(&touchX, &touchY)) {

    // Rohwerte im seriellen Monitor ausgeben.
    Serial.print("Touch X: ");
    Serial.print(touchX);
    Serial.print(" | Touch Y: ");
    Serial.println(touchY);


    // Den Bereich mit der vorherigen Ausgabe löschen.
    // Der restliche Inhalt des Displays bleibt dabei erhalten.
    tft.fillRect(
      30,
      140,
      tft.width() - 60,
      55,
      TFT_BLACK
    );


    // Text für die Anzeige der beiden Touchwerte zusammensetzen.
    String touchAusgabe =
      "X: " + String(touchX) +
      "  Y: " + String(touchY);


    // Aktuelle Werte mittig auf dem Display darstellen.
    tft.setTextDatum(MC_DATUM);
    tft.setTextColor(TFT_CYAN, TFT_BLACK);
    tft.drawString(
      touchAusgabe,
      tft.width() / 2,
      165,
      4
    );


    // Kurze Pause, damit die Anzeige nicht zu schnell aktualisiert
    // wird und die Werte lesbar bleiben.
    delay(100);
  }
}

Touchtest durchführen

Nach dem Übertragen zeigt das Display die Aufforderung, die Oberfläche mit dem Eingabestift zu berühren. Bei jeder erkannten Eingabe erscheinen die aktuellen X- und Y-Werte auf dem Display. Gleichzeitig werden sie mit 115.200 Baud im seriellen Monitor der Arduino IDE ausgegeben.

Wenn du den Stift über die Displayoberfläche bewegst, sollten sich beide Werte abhängig von der Position verändern. Damit ist bestätigt, dass der Touchcontroller angeschlossen ist und über den gemeinsamen SPI-Bus angesprochen werden kann.

Die angezeigten Werte entsprechen noch nicht direkt den 320 × 240 Pixeln des Displays. Es handelt sich um unkalibrierte Rohwerte des Touchcontrollers. Für eine spätere grafische Oberfläche müssen diese Werte noch kalibriert und der tatsächlichen Position auf dem Display zugeordnet werden.

Hinweis zur seriellen Ausgabe: Werden im seriellen Monitor keine Meldungen oder Touchwerte angezeigt, prüfe in der Arduino IDE unter Werkzeuge → USB CDC On Boot, ob die Einstellung Enabled ausgewählt ist. Kontrolliere außerdem, ob der serielle Monitor auf 115.200 Baud eingestellt ist. Nach einer Änderung muss das Programm erneut auf den ESP32-C3 Super Mini übertragen werden.

Fazit und Ausblick

Trotz seiner kompakten Bauform besitzt der ESP32-C3 Super Mini genügend GPIOs, um das ILI9341-Display über SPI anzusteuern. Da sich Display und Touchcontroller mehrere Leitungen teilen können, bleiben sogar noch Anschlüsse für weitere Komponenten frei.

Bei der Inbetriebnahme haben sich zwei Details als besonders wichtig erwiesen: Die Kombination aus dem ESP32-Boardpaket in Version 2.0.14 und TFT_eSPI in Version 2.5.43 verhindert den Absturz bei tft.init(). Außerdem benötigt das verwendete Display tft.invertDisplay(true), damit die Farben korrekt dargestellt werden.

Mit dem einfachen Testprogramm konnten wir anschließend die Grundfarben, Textausgabe, Auflösung und grafische Elemente erfolgreich überprüfen. Damit steht die technische Grundlage für eigene Benutzeroberflächen.

Im nächsten Beitrag gehen wir einen Schritt weiter: Dort schließe ich einen Sensor an den ESP32-C3 Super Mini an und visualisiere dessen Messwerte mit LVGL auf dem Display. So entsteht aus dem einfachen Displaytest eine moderne grafische Oberfläche mit übersichtlich dargestellten Sensordaten.

Transparenzhinweis: Dieser Beitrag wurde mit Unterstützung künstlicher Intelligenz erstellt und redaktionell geprüft. Mehr zur Nutzung von KI

Letzte Aktualisierung am: 08. September 2026

Foto von Stefan Draeger
Über den Autor

Stefan Draeger — Entwickler & Tech-Blogger

Ich zeige praxisnah, wie du Projekte mit Arduino, ESP32 und Smarthome-Komponenten umsetzt – Schritt für Schritt, mit Code und Schaltplänen.

Mehr Artikel von Stefan →

Schreibe einen Kommentar Antwort abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Kategorien

Kontakt & Hilfe

Fragen oder Feedback?

Du hast eine Idee, brauchst Hilfe oder möchtest Feedback loswerden? Erstelle einfach ein Support-Ticket.

Support-Ticket erstellen
Keine Beiträge verpassen

Newsletter abonnieren

Erhalte regelmäßig Updates zu neuen Projekten, Tutorials und Tipps rund um Arduino, ESP32, Smarthome und IoT direkt in dein Postfach.

Newsletter abonnieren
Videos & Tutorials

Draeger-IT auf YouTube

Entdecke meine Videos zu Arduino, ESP32, Raspberry Pi, Smarthome und spannenden Elektronikprojekten – mit Tutorials, Tests und Praxisbeispielen.

YouTube-Kanal besuchen
Freiwillige Unterstützung

Unterstütze meinen Blog

Wenn dir meine Inhalte gefallen, freue ich mich über deine Unterstützung auf Tipeee. So hilfst du dabei, den Blog am Leben zu halten und neue Beiträge zu ermöglichen.

Auf Tipeee unterstützen

Vielen Dank für deinen Support!
– Stefan Draeger

Kostenlose Online-Werkzeuge

Tools

Praktische Generatoren, Rechner und Hilfsmittel für deine Elektronik- und Entwicklungsprojekte.

Generatoren & Konverter

  • QR-Code Generator
  • Passwort Generator
  • PNG zu WebP konvertieren
  • Bilder online komprimieren
  • Code online formatieren

Rechner & Tabellen

  • Unix-Zeitstempel-Rechner
  • ASCII-Tabelle
  • Spannung, Strom, Widerstand und Leistung berechnen
  • Widerstandsrechner

LED-Matrix

  • 8×8 LED Matrix Tool
  • 8×16 LED Matrix Modul von Keyestudio
  • 16×16 LED Matrix Generator
Kontakt

Anschrift & Kontaktdaten

Stefan Draeger

Königsberger Str. 13
38364 Schöningen

Telefon 01556 5432686

E-Mail info@draeger-it.blog

Blogverzeichnis Bloggerei.de TopBlogs.de das Original - Blogverzeichnis | Blog Top Liste Blogverzeichnis trusted-blogs.com
Social Media

Folge mir auf

Weitere Projekte, Videos und Neuigkeiten findest du auch auf meinen Social-Media-Kanälen.

  • f Facebook
  • in LinkedIn
  • ▶ YouTube
  • ♪ TikTok
  • P Pinterest
  • ◎ Instagram
Rechtliche Informationen

Rechtliches

  • Impressum
  • Datenschutzerklärung
  • Disclaimer
  • Cookie-Richtlinie (EU)
  • KI-Transparenz bei draeger-it.blog
©2026 Technik Blog | Built using WordPress and Responsive Blogily theme by Superb
Cookie-Zustimmung verwalten
Wir verwenden Technologien wie Cookies, um Geräteinformationen zu speichern und/oder darauf zuzugreifen. Wir tun dies, um das Surferlebnis zu verbessern und um personalisierte Werbung anzuzeigen. Wenn Sie diesen Technologien zustimmen, können wir Daten wie das Surfverhalten oder eindeutige IDs auf dieser Website verarbeiten. Wenn Sie Ihre Zustimmung nicht erteilen oder zurückziehen, können bestimmte Funktionen beeinträchtigt werden.
Funktional Immer aktiv
Die technische Speicherung oder der Zugang ist unbedingt erforderlich für den rechtmäßigen Zweck, die Nutzung eines bestimmten Dienstes zu ermöglichen, der vom Teilnehmer oder Nutzer ausdrücklich gewünscht wird, oder für den alleinigen Zweck, die Übertragung einer Nachricht über ein elektronisches Kommunikationsnetz durchzuführen.
Vorlieben
Die technische Speicherung oder der Zugriff ist für den rechtmäßigen Zweck der Speicherung von Präferenzen erforderlich, die nicht vom Abonnenten oder Benutzer angefordert wurden.
Statistiken
Die technische Speicherung oder der Zugriff, der ausschließlich zu statistischen Zwecken erfolgt. Die technische Speicherung oder der Zugriff, der ausschließlich zu anonymen statistischen Zwecken verwendet wird. Ohne eine Vorladung, die freiwillige Zustimmung deines Internetdienstanbieters oder zusätzliche Aufzeichnungen von Dritten können die zu diesem Zweck gespeicherten oder abgerufenen Informationen allein in der Regel nicht dazu verwendet werden, dich zu identifizieren.
Marketing
Die technische Speicherung oder der Zugriff ist erforderlich, um Nutzerprofile zu erstellen, um Werbung zu versenden oder um den Nutzer auf einer Website oder über mehrere Websites hinweg zu ähnlichen Marketingzwecken zu verfolgen.
  • Optionen verwalten
  • Dienste verwalten
  • Verwalten von {vendor_count}-Lieferanten
  • Lese mehr über diese Zwecke
Einstellungen anzeigen
  • {title}
  • {title}
  • {title}