Arduino Nano ESP32 - ILI9341 ILI9488 ST7789 TFT LCD Touch Display SPI Interface
Willkommen zu diesem praktischen Workshop, in dem wir ein SPI TFT Display mit einem Arduino Nano ESP32 verbinden. Der Nano ESP32 basiert auf dem ESP32-S3 Chip und bietet Dual-Core-Verarbeitung, Wi-Fi und Bluetooth Low Energy in der vertrauten Nano-Form mit USB-C-Anschluss. Er arbeitet mit 3,3V, was der Spannungsstufe der meisten SPI TFT Module entspricht, was die Verdrahtung einfach macht.
In diesem Workshop werden Sie:
- Ein 3,3V SPI TFT Display mit dem Arduino Nano ESP32 verbinden.
- Formen und Grafiken mit Adafruit GFX Funktionen zeichnen.
- Text-Zeichenketten und Zahlen in verschiedenen Größen anzeigen.
- Bitmap-Bilder aus dem Programmspeicher (PROGMEM) zeichnen.
- Bitmap-Bilder von einer SD-Karte laden.
- Text mit einer benutzerdefinierten externen Schriftart rendern.
- Rohe Touch-Koordinaten von einem XPT2046 Touch-Controller lesen.
- Auf dem Bildschirm zeichnen durch Touch-Gesten.
- Interaktive Touch-Buttons erstellen.
- Den Touch-Bildschirm kalibrieren.
- Einen sekundären oder benutzerdefinierten SPI-Bus für das Display verwenden.
Dieser Workshop behandelt sowohl Touch- als auch Nicht-Touch SPI TFT LCD Displays. Er funktioniert mit 1,3, 1,54, 2,2, 2,4, 2,8, 3,2 und 3,5 Zoll Panels, die von ILI9341, ILI9488 oder ST7789 Controller-Chips angetrieben werden.
Benötigte Hardware
Oder Sie können die folgenden Kits kaufen:
| 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 das SPI TFT Display
SPI TFT Module verwenden einen Treiber-IC, um Pixeldaten zu verwalten und auf Zeichnungsbefehle über einen hochfrequenten SPI-Link zu reagieren. Drei Treiber werden unterstützt:
- 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.
Empfehlung: Wenn Sie noch kein Display gekauft haben, empfehlen wir den ST7789 Treiber. Er ist weit verbreitet, läuft mit voller 40-MHz-SPI-Geschwindigkeit und ist die einfachste Wahl für neue Projekte.
Die Bibliothek basiert auf Adafruit GFX, daher sind Kreise, Rechtecke, Text, benutzerdefinierte Schriftarten und Bitmaps alle sofort einsatzbereit.
Hinweis: Der Arduino Nano ESP32 verwendet 3,3V Logik. Verbinden Sie TFT VCC nur mit dem 3,3V Pin.
Pinbelegung
Die meisten SPI TFT LCD Displays haben die folgenden Pins:
Display-Pins:
| Pin | Funktion |
|---|---|
| VCC | Stromversorgung |
| GND | Masse |
| CS | Chip Select — wird zum Auswählen des Displays auf dem SPI-Bus auf niedrig gezogen |
| DC / RS | Daten / Befehl Auswahl — hoch für Pixeldaten, niedrig für Befehle |
| RST | Hardware-Reset — optional; an 3,3V anschließen, wenn nicht verwendet |
| MOSI / SDI / SDA | SPI Dateneingabe (MCU → Display) |
| SCK / CLK | SPI Takt |
| MISO / SDO | SPI Datenausgabe (Display → MCU) — optional für nur Display-Betrieb |
| LED / BL / BLK | Hintergrundbeleuchtung Stromversorgung — an 3,3V oder PWM-Pin anschließen für Dimmung |
SD-Kartenstifte (falls Ihre Anwendung Zugriff auf die SD-Karte benötigt):
| Pin | Funktion |
|---|---|
| SD_CS / TF_CS | SD-Karten Chip Select |
| MOSI / SDI | MOSI — Daten vom MCU zur SD-Karte |
| SCK / CLK | SCK — SPI Takt |
| MISO / SDO | MISO — Daten von der SD-Karte zum MCU |
Für TFT Displays, die Touch unterstützen, gibt es zusätzliche Touch-Stifte (falls Ihre Anwendung die Touch-Funktion verwendet und das Display diese unterstützt):
| Pin | Funktion |
|---|---|
| T_CS | Touch-Controller Chip Select |
| T_CLK | SCK — SPI Takt |
| T_DIN | MOSI — Daten vom MCU zum Touch-Controller |
| T_DO | MISO — Daten vom Touch-Controller zum MCU |
| T_IRQ | Touch-Interrupt — optional; signalisiert, wenn der Bildschirm berührt wird |
Hinweis: Einige Nicht-Touch-Display-Module stellen auch T_CS, T_CLK, T_DIN, T_DO und T_IRQ Stifte zur Verfügung. Diese sind auf diesen Platinen nicht funktionsfähig — der Touch-Controller-IC ist nicht bestückt. Sie erscheinen, weil die Platine das gleiche Layout wie die Touch-aktivierte Version wiederverwendet, um Fertigungsvarianten zu reduzieren.
Verdrahtungsdiagramm
Ohne Touch
Verbinden Sie MOSI mit D11, SCK mit D13, MISO mit D12 auf dem Nano ESP32. CS, DC und RST können beliebige verfügbare GPIOs sein — D10, D9, D8 werden in den Beispielen verwendet.
Display:
| TFT-Pin | Arduino Nano ESP32 Pin | Beschreibung |
|---|---|---|
| VCC | 3,3V | Stromversorgung (nur 3,3V) |
| GND | GND | Masse |
| CS | D10 | Chip Select |
| DC / RS | D9 | Daten / Befehl Auswahl |
| RST | D8 | Reset (optional) |
| MOSI / SDI | D11 | Hardware SPI MOSI |
| SCK | D13 | Hardware SPI Takt |
| MISO / SDO | D12 | Hardware SPI MISO (optional) |
| LED / BL | 3,3V | Hintergrundbeleuchtung Stromversorgung |
SD-Karte (falls Ihre Anwendung Zugriff auf die SD-Karte benötigt):
| SD-Pin | Arduino Nano ESP32 Pin | Beschreibung |
|---|---|---|
| SD_CS / TF_CS | beliebiger freier GPIO | SD-Karten Chip Select |
| MOSI / SDI | D11 | Gemeinsam mit Display MOSI (D11) |
| SCK / CLK | D13 | Gemeinsam mit Display SCK (D13) |
| MISO / SDO | D12 | Gemeinsam mit Display MISO (D12) |
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Mit Touch
Verbinden Sie den XPT2046 Touch-Controller mit dem Arduino Nano ESP32 SPI-Bus, wobei D11, D13 und D12 mit dem Display geteilt werden.
Display:
| TFT-Pin | Arduino Nano ESP32 Pin | Beschreibung |
|---|---|---|
| VCC | 3,3V | Stromversorgung (nur 3,3V) |
| GND | GND | Masse |
| CS | D10 | Chip Select |
| DC / RS | D9 | Daten / Befehl Auswahl |
| RST | D8 | Reset (optional) |
| MOSI / SDI | D11 | Hardware SPI MOSI |
| SCK | D13 | Hardware SPI Takt |
| MISO / SDO | D12 | Hardware SPI MISO (optional) |
| LED / BL | 3,3V | Hintergrundbeleuchtung Stromversorgung |
Touch-Controller (falls Ihre Anwendung die Touch-Funktion verwendet und das Display diese unterstützt):
| Touch-Pin | Arduino Nano ESP32 Pin | Beschreibung |
|---|---|---|
| T_CS | D7 | Touch Chip Select |
| T_IRQ | D6 | Touch-Interrupt (optional) |
| T_DIN | D11 | Gemeinsam mit Display MOSI (D11) |
| T_CLK | D13 | Gemeinsam mit Display SCK (D13) |
| T_DO | D12 | Gemeinsam mit Display MISO (D12) |
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Falls Ihr MCU zwei oder mehr Hardware-SPI-Schnittstellen hat, können Sie jedes Peripheriegerät (Display, SD-Karte, Touch-Controller) seinem eigenen dedizierten SPI-Bus zuweisen. Falls Ihr MCU nur eine Hardware-SPI-Schnittstelle hat, teilen sich alle drei Peripheriegeräte die gleichen drei Datenleitungen (MOSI, SCK, MISO) — auf dem Nano ESP32 sind dies D11, D13 und D12. Jedes Peripheriegerät hat seinen eigenen CS-Pin, daher ist nur einer gleichzeitig aktiv. Die DIYables_TFT_SPI Bibliothek verwaltet sowohl das Display als auch den XPT2046 Touch-Controller durch eine einzige API — es ist keine separate SPI-Bibliothek für die Touch-Seite erforderlich.
Bibliotheks-Setup
- Stecken Sie den Arduino Nano ESP32 über seinen USB-C-Anschluss in Ihren Computer ein.
- Öffnen Sie die Arduino IDE. Wählen Sie Arduino Nano ESP32 aus der Platinenliste und wählen Sie den richtigen Port aus.
- Klicken Sie auf das Bibliotheken Symbol in der linken Seitenleiste.
- Geben Sie "DIYables_TFT_SPI" im Suchfeld ein. Suchen Sie nach dem DIYables Eintrag.
- Klicken Sie auf Installieren. Installieren Sie alle Abhängigkeiten, wenn Sie dazu aufgefordert werden.
- Search for DIYables TFT SPI created by DIYables.io and click the Install button.
1
void setup() {
Starter-Skizze
Der minimale Code, der benötigt wird, um mit der DIYables_TFT_SPI Bibliothek zu beginnen:
#include <DIYables_TFT_SPI.h>
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Uncomment the line that matches your driver chip:
// DIYables_ILI9341_SPI TFT_display(240, 320, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(320, 480, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(240, 320, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
void setup() {
TFT_display.begin();
TFT_display.setRotation(1);
}
void loop() {
// drawing code here
}
Workshop - Formen zeichnen
Das DrawShapes-Beispiel setzt alle Adafruit GFX Zeichenfunktionen ein: Kreise, Rechtecke, Dreiecke und Linien auf dem Bildschirm.
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
// =============================================
// Wiring (Arduino Nano ESP32)
// ---------------------------------------------
// TFT module Arduino Nano ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D8 (TFT_RST_PIN)
// DC / RS -> D9 (TFT_DC_PIN)
// SDI / MOSI -> D11 (hardware SPI MOSI)
// SCK -> D13 (hardware SPI SCK)
// LED -> 3.3V (or any GPIO via initBacklight)
// SDO / MISO -> D12 (only needed when reading from display)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// MOSI and SCK use default hardware SPI pins
// =============================================
// Create display object (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
#define BLACK DIYables_TFT_SPI::colorRGB(0, 0, 0)
#define BLUE DIYables_TFT_SPI::colorRGB(0, 0, 255)
#define RED DIYables_TFT_SPI::colorRGB(255, 0, 0)
#define GREEN DIYables_TFT_SPI::colorRGB(0, 255, 0)
#define ORANGE DIYables_TFT_SPI::colorRGB(255, 165, 0)
#define PINK DIYables_TFT_SPI::colorRGB(255, 192, 203)
#define VIOLET DIYables_TFT_SPI::colorRGB(148, 0, 211)
#define TURQUOISE DIYables_TFT_SPI::colorRGB(64, 224, 208)
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
// Helper to draw a filled diamond
void fillDiamond(int cx, int cy, int h, int v, uint16_t color) {
int x0 = cx, y0 = cy - v;
int x1 = cx + h, y1 = cy;
int x2 = cx, y2 = cy + v;
int x3 = cx - h, y3 = cy;
TFT_display.fillTriangle(x0, y0, x1, y1, x2, y2, color);
TFT_display.fillTriangle(x0, y0, x2, y2, x3, y3, color);
}
void setup() {
TFT_display.begin();
TFT_display.setRotation(1); // Landscape
}
void loop() {
TFT_display.fillScreen(WHITE);
uint16_t w = TFT_display.width();
uint16_t h = TFT_display.height();
// Scale positions relative to screen size with better spacing
int col1 = w / 8;
int col2 = w * 3 / 8;
int col3 = w * 5 / 8;
int col4 = w * 7 / 8;
int row1 = h / 4;
int row2 = h / 2;
int row3 = h * 3 / 4;
// Outlined circle
TFT_display.drawCircle(col1, row1, 30, RED);
// Filled circle
TFT_display.fillCircle(col2, row1, 30, RED);
// Outlined triangle
TFT_display.drawTriangle(col3 - 30, row1 + 25, col3 + 30, row1 + 25, col3, row1 - 25, BLUE);
// Filled triangle
TFT_display.fillTriangle(col4 - 30, row1 + 25, col4 + 30, row1 + 25, col4, row1 - 25, GREEN);
// Outlined rectangle
TFT_display.drawRect(col1 - 35, row2 - 20, 70, 40, ORANGE);
// Filled rectangle
TFT_display.fillRect(col2 - 35, row2 - 20, 70, 40, TURQUOISE);
// Outlined round rectangle
TFT_display.drawRoundRect(col3 - 35, row2 - 20, 70, 40, 10, VIOLET);
// Filled round rectangle
TFT_display.fillRoundRect(col4 - 35, row2 - 20, 70, 40, 10, PINK);
// Outlined diamond (centered between col1 and col2)
int diamond1_x = (col1 + col2) / 2;
TFT_display.drawLine(diamond1_x, row3 - 30, diamond1_x + 25, row3, GREEN);
TFT_display.drawLine(diamond1_x + 25, row3, diamond1_x, row3 + 30, GREEN);
TFT_display.drawLine(diamond1_x, row3 + 30, diamond1_x - 25, row3, GREEN);
TFT_display.drawLine(diamond1_x - 25, row3, diamond1_x, row3 - 30, GREEN);
// Filled diamond (centered between col3 and col4)
int diamond2_x = (col3 + col4) / 2;
fillDiamond(diamond2_x, row3, 25, 30, BLUE);
delay(10000);
}
Hands-On
- Verbinden Sie das TFT-Modul mit dem Nano ESP32 unter Verwendung der obigen Tabelle. Verwenden Sie 3,3V für VCC.
- Verbinden Sie den Nano ESP32 über USB-C mit Ihrem Computer.
- Wählen Sie in der Arduino IDE die Platine und den Port, fügen Sie den Code ein und klicken Sie auf Upload.
- Das Display zeigt ein rotierendes Muster aus farbigen Formen.
Methoden-Referenz
| Methode | Aktion | Syntax |
|---|---|---|
| begin() | Initialisiert und setzt das Display zurück. | TFT_display.begin(); |
| setRotation(r) | Stellt die Ausrichtung ein (0=Hochformat, 1=Querformat). | TFT_display.setRotation(1); |
| fillScreen(color) | Löscht den Bildschirm in einer Farbe. | TFT_display.fillScreen(BLACK); |
| colorRGB(r,g,b) | Erstellt 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 Rechteck mit runden Ecken. | TFT_display.fillRoundRect(10,10,100,50,10,BLUE); |
| drawTriangle(x0,y0,x1,y1,x2,y2,color) | Dreieck-Kontur. | TFT_display.drawTriangle(60,10,10,110,110,110,GREEN); |
Workshop - Text und Zahlen anzeigen
Das ShowTextAndNumber-Beispiel druckt Zeichenketten und Zahlen mit der integrierten GFX-Text-Engine mit einstellbarer Größe und Farbe.
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
// =============================================
// Wiring (Arduino Nano ESP32)
// ---------------------------------------------
// TFT module Arduino Nano ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D8 (TFT_RST_PIN)
// DC / RS -> D9 (TFT_DC_PIN)
// SDI / MOSI -> D11 (hardware SPI MOSI)
// SCK -> D13 (hardware SPI SCK)
// LED -> 3.3V (or any GPIO via initBacklight)
// SDO / MISO -> D12 (only needed when reading from display)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// =============================================
// Create display object (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
#define MAGENTA DIYables_TFT_SPI::colorRGB(255, 0, 255)
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
void setup() {
Serial.begin(9600);
Serial.println(F("TFT SPI Display - Show text and numbers"));
TFT_display.begin();
TFT_display.setRotation(1); // Landscape
TFT_display.fillScreen(WHITE);
// Set text color and size
TFT_display.setTextColor(MAGENTA);
TFT_display.setTextSize(3);
// Sample values
float temperature = 23.5;
float humidity = 78.6;
// Display temperature
TFT_display.setCursor(20, 20);
TFT_display.print("Temperature: ");
TFT_display.print(temperature, 1);
TFT_display.print(char(247));
TFT_display.println("C");
// Display humidity
TFT_display.setCursor(20, 60);
TFT_display.print("Humidity: ");
TFT_display.print(humidity, 1);
TFT_display.print("%");
}
void loop() {
}
Hands-On
- Verbinden Sie und laden Sie wie oben hochgegeben.
- Das Display druckt mehrere Textzeilen in verschiedenen Farben und Größen.
Methoden-Referenz
| Methode | Aktion | Syntax |
|---|---|---|
| setTextColor(color) | Stellt die Vordergrundfarbe für die Textausgabe ein. | 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 Text-Cursor zur Pixelposition (x, y). | TFT_display.setCursor(10, 20); |
| print(value) | Druckt eine Zeichenkette oder Zahl an der Cursor-Position. | TFT_display.print("ESP32-S3!"); |
| println(value) | Druckt und bewegt den Cursor zur nächsten Zeile. | TFT_display.println(42); |
Workshop - Bild zeichnen
In dieser Workshop-Station laden Sie ein vollständiges RGB565 Bitmap-Bild auf das Display. Die Pixeldaten werden als PROGMEM-Array in bitmap.h in die Firmware kompiliert. Auf dem ESP32-S3 werden PROGMEM-Daten im Flash gespeichert und in den Adressraum abgebildet, daher wird kein SRAM durch die Bilddaten selbst verbraucht. Fügen Sie bitmap.h dem Sketch-Ordner vor dem Kompilieren hinzu.
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
#include "bitmap.h"
// =============================================
// Wiring (Arduino Nano ESP32)
// ---------------------------------------------
// TFT module Arduino Nano ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D8 (TFT_RST_PIN)
// DC / RS -> D9 (TFT_DC_PIN)
// SDI / MOSI -> D11 (hardware SPI MOSI)
// SCK -> D13 (hardware SPI SCK)
// LED -> 3.3V (or any GPIO via initBacklight)
// SDO / MISO -> D12 (only needed when reading from display)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// =============================================
// Create display object (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
int img_width = 120;
int img_height = 53;
void setup() {
Serial.begin(9600);
Serial.println(F("TFT SPI Display - Draw Image"));
TFT_display.begin();
uint16_t SCREEN_WIDTH = TFT_display.width();
uint16_t SCREEN_HEIGHT = TFT_display.height();
int x = (SCREEN_WIDTH - img_width) / 2;
int y = (SCREEN_HEIGHT - img_height) / 2;
TFT_display.fillScreen(WHITE);
TFT_display.drawRGBBitmap(x, y, myBitmap, img_width, img_height);
}
void loop() {
delay(2000);
TFT_display.invertDisplay(true);
delay(2000);
TFT_display.invertDisplay(false);
}
Hands-On
- Legen Sie bitmap.h in den gleichen Ordner wie die Skizze.
- Verbinden Sie das TFT-Modul mit dem Nano ESP32. Verwenden Sie 3,3V für VCC.
- Verbinden Sie den Nano ESP32 über USB-C mit Ihrem Computer.
- Wählen Sie in der Arduino IDE die Platine und den Port, fügen Sie den Code ein und klicken Sie auf Upload.
- Das Display zeigt das Bitmap-Bild aus dem Programm-Flash.
Methoden-Referenz
| 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) | Löscht den Bildschirm in einer Farbe, bevor das Bitmap gezeichnet wird. | TFT_display.fillScreen(BLACK); |
Workshop - Bild von SD-Karte zeichnen
In dieser Workshop-Station streamen Sie eine rohe RGB565-Bilddatei direkt von einer Micro-SD-Karte zum Display. Der ESP32-S3 verwaltet SD und Display auf dem gleichen SPI-Bus ohne Probleme dank seiner Hardware-SPI-Arbitrierung. Definieren Sie den CS-Pin des SD-Moduls als SD_CS_PIN in der Skizze.
Verbinden Sie das SD-Modul mit den gleichen SPI-Pins wie das Display (D11/D13/D12 auf dem Nano ESP32). Verbinden Sie SD CS mit Ihrem gewählten Pin.
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
#include <SD.h>
// =============================================
// Wiring (Arduino Nano ESP32)
// =============================================
// TFT + SD module pins
// TFT + SD module Arduino Nano ESP32
// ----------------------- ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// TFT CS -> D10 (TFT_CS_PIN)
// TFT RESET -> D8 (TFT_RST_PIN)
// TFT DC / RS -> D9 (TFT_DC_PIN)
// SD CS -> D4 (SD_CS)
// SDI / MOSI (shared) -> D11 (hardware SPI MOSI)
// SDO / MISO (shared) -> D12 (hardware SPI MISO)
// SCK (shared) -> D13 (hardware SPI SCK)
// LED -> 3.3V (or any GPIO via initBacklight)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
#define SD_CS D4 // SD card chip select (must differ from TFT_CS_PIN)
// =============================================
// Create display object (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
#define BUFFPIXEL 20
File bmpFile;
uint16_t SCREEN_WIDTH;
uint16_t SCREEN_HEIGHT;
// Helper functions to read BMP file header
uint16_t read16(File &f) {
uint16_t result;
result = f.read();
result |= (f.read() << 8);
return result;
}
uint32_t read32(File &f) {
uint32_t result;
result = f.read();
result |= ((uint32_t)f.read() << 8);
result |= ((uint32_t)f.read() << 16);
result |= ((uint32_t)f.read() << 24);
return result;
}
int32_t readS32(File &f) {
int32_t result;
result = f.read();
result |= ((uint32_t)f.read() << 8);
result |= ((uint32_t)f.read() << 16);
result |= ((uint32_t)f.read() << 24);
return result;
}
bool getBMPDimensions(const char *filename, uint32_t &w, uint32_t &h) {
File f = SD.open(filename);
if (!f) return false;
if (read16(f) != 0x4D42) { f.close(); return false; }
read32(f); // file size
read32(f); // reserved
read32(f); // image offset
read32(f); // DIB header size
w = read32(f);
int32_t sh = readS32(f);
h = (sh < 0) ? -sh : sh;
f.close();
return true;
}
void drawBMP(const char *filename, int x, int y) {
bmpFile = SD.open(filename);
if (!bmpFile) {
Serial.println("File not found");
return;
}
if (read16(bmpFile) != 0x4D42) {
Serial.println("Not a BMP file");
bmpFile.close();
return;
}
uint32_t fileSize = read32(bmpFile);
read32(bmpFile); // Reserved
uint32_t imageOffset = read32(bmpFile);
uint32_t dibHeaderSize = read32(bmpFile);
uint32_t bmpWidth = read32(bmpFile);
int32_t bmpHeight = readS32(bmpFile);
bool topDown = false;
if (bmpHeight < 0) {
bmpHeight = -bmpHeight;
topDown = true;
}
if (read16(bmpFile) != 1) {
Serial.println("Invalid BMP file");
bmpFile.close();
return;
}
uint16_t depth = read16(bmpFile);
if (depth != 24) {
Serial.println("Only 24-bit BMP is supported");
bmpFile.close();
return;
}
if (read32(bmpFile) != 0) {
Serial.println("Unsupported BMP compression");
bmpFile.close();
return;
}
bmpFile.seek(imageOffset);
uint8_t sdbuffer[3 * BUFFPIXEL];
uint16_t color;
uint32_t rowSize = (bmpWidth * 3 + 3) & ~3;
if (x >= SCREEN_WIDTH || y >= SCREEN_HEIGHT) return;
uint32_t maxRow = min((uint32_t)bmpHeight, (uint32_t)(SCREEN_HEIGHT - y));
uint32_t maxCol = min(bmpWidth, (uint32_t)(SCREEN_WIDTH - x));
for (uint32_t row = 0; row < maxRow; row++) {
int32_t rowPos = topDown ? row : bmpHeight - 1 - row;
uint32_t filePosition = imageOffset + rowPos * rowSize;
bmpFile.seek(filePosition);
for (uint32_t col = 0; col < maxCol; col += BUFFPIXEL) {
uint32_t pixelsToRead = min((uint32_t)BUFFPIXEL, maxCol - col);
bmpFile.read(sdbuffer, 3 * pixelsToRead);
for (uint32_t i = 0; i < pixelsToRead; i++) {
uint8_t b = sdbuffer[i * 3];
uint8_t g = sdbuffer[i * 3 + 1];
uint8_t r = sdbuffer[i * 3 + 2];
color = DIYables_TFT_SPI::colorRGB(r, g, b);
if ((x + col + i) < SCREEN_WIDTH && (y + row) < SCREEN_HEIGHT) {
TFT_display.drawPixel(x + col + i, y + row, color);
}
}
}
}
bmpFile.close();
Serial.println("BMP drawn");
}
void setup() {
Serial.begin(9600);
if (!SD.begin(SD_CS)) {
Serial.println("SD card initialization failed!");
return;
}
Serial.println("SD card initialized.");
TFT_display.begin();
TFT_display.setRotation(1); // Landscape
SCREEN_WIDTH = TFT_display.width();
SCREEN_HEIGHT = TFT_display.height();
TFT_display.fillScreen(WHITE);
uint32_t imgWidth, imgHeight;
if (getBMPDimensions("diyables.bmp", imgWidth, imgHeight)) {
int x = (SCREEN_WIDTH - imgWidth) / 2;
int y = (SCREEN_HEIGHT - imgHeight) / 2;
drawBMP("diyables.bmp", x, y);
} else {
Serial.println("Failed to get BMP dimensions");
}
}
void loop() {
}
Hands-On
- Verbinden Sie das SD-Modul mit dem Nano ESP32. Teilen Sie MOSI (D11), SCK (D13), MISO (D12) mit dem Display. Verbinden Sie SD CS mit dem als SD_CS_PIN definierten Pin.
- Kopieren Sie ein rohes RGB565 Binärbild auf die Wurzel der SD-Karte. Die Abmessungen müssen der Platine entsprechen.
- Verbinden Sie den Nano ESP32 über USB-C mit Ihrem Computer.
- Wählen Sie in der Arduino IDE die Platine und den Port, fügen Sie den Code ein und klicken Sie auf Upload.
- Das Display rendert das Bild, das von der SD-Karte gestreamt wird.
Methoden-Referenz
| Methode | Aktion | Syntax |
|---|---|---|
| startWrite() | Öffnet eine rohe SPI-Schreib-Sitzung und aktiviert das Display CS. | TFT_display.startWrite(); |
| setAddrWindow(x0,y0,x1,y1) | Stellt die rechteckige Pixel-Region ein, die Daten empfangen soll. | TFT_display.setAddrWindow(0, 0, 239, 319); |
| pushColors(buf, len) | Schreibt einen Puffer von RGB565-Pixelwerten direkt auf die Platine. | TFT_display.pushColors(buf, 512); |
| endWrite() | Schließt die SPI-Sitzung und gibt das Display CS frei. | TFT_display.endWrite(); |
Workshop - Externe Schriftart verwenden
In dieser Workshop-Station ersetzen Sie die Standardraster-Schriftart durch eine schärfere Adafruit GFX-kompatible benutzerdefinierte Schriftart. Der Schriftart-Deskriptor wird als Header-Datei eingefügt. Das Wechseln von Schriftarten zur Laufzeit erfordert nur einen Funktionsaufruf, und Sie können genauso leicht zur integrierten Schriftart zurückwechseln.
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
#include <Fonts/FreeSansBold12pt7b.h>
// =============================================
// Wiring (Arduino Nano ESP32)
// ---------------------------------------------
// TFT module Arduino Nano ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D8 (TFT_RST_PIN)
// DC / RS -> D9 (TFT_DC_PIN)
// SDI / MOSI -> D11 (hardware SPI MOSI)
// SCK -> D13 (hardware SPI SCK)
// LED -> 3.3V (or any GPIO via initBacklight)
// SDO / MISO -> D12 (only needed when reading from display)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// =============================================
// Create display object (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
#define MAGENTA DIYables_TFT_SPI::colorRGB(255, 0, 255)
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
void setup() {
Serial.begin(9600);
Serial.println(F("TFT SPI Display - Use external font"));
TFT_display.begin();
TFT_display.setFont(&FreeSansBold12pt7b);
TFT_display.setRotation(1); // Landscape
TFT_display.fillScreen(WHITE);
TFT_display.setTextColor(MAGENTA);
TFT_display.setTextSize(1);
float temperature = 23.5;
float humidity = 78.6;
TFT_display.setCursor(20, 30);
TFT_display.print("Temperature: ");
TFT_display.print(temperature, 1);
TFT_display.print(char(247));
TFT_display.println("C");
TFT_display.setCursor(20, 70);
TFT_display.print("Humidity: ");
TFT_display.print(humidity, 1);
TFT_display.print("%");
}
void loop() {
}
Hands-On
- Verbinden Sie das TFT-Modul mit dem Nano ESP32. Verwenden Sie 3,3V für VCC.
- Verbinden Sie den Nano ESP32 über USB-C mit Ihrem Computer.
- Wählen Sie in der Arduino IDE die Platine und den Port, fügen Sie den Code ein und klicken Sie auf Upload.
- Beobachten Sie das Custom-Font-Rendering auf dem Bildschirm. Vergleichen Sie es mit der integrierten Schriftart, um die Verbesserung zu sehen.
Methoden-Referenz
| Methode | Aktion | Syntax |
|---|---|---|
| setFont(&FontName) | Wechselt zu einer benutzerdefinierten GFX-kompatiblen Schriftart. Wenn NULL übergeben wird, wird die integrierte 5×7 Schriftart wiederhergestellt. | TFT_display.setFont(&FreeSans12pt7b); |
| setCursor(x, y) | Positioniert den Text-Cursor an der angegebenen Pixelkoordinate. | TFT_display.setCursor(10, 40); |
| setTextColor(color) | Stellt die Vordergrundfarbe für alle nachfolgenden Textausgaben ein. | TFT_display.setTextColor(WHITE); |
| print(text) | Druckt eine Zeichenkette an der Cursor-Position unter Verwendung der aktiven Schriftart. | TFT_display.print("ESP32 Workshop"); |
Workshop - Touch Punkt lesen
In dieser Workshop-Station lesen Sie rohe ADC-Ausgabe vom XPT2046 Touch-Controller, der mit dem Nano ESP32 verbunden ist. Jeder Touch-Punkt wird auf dem Serial Monitor als rohe X-, Y- und Druck-Z-Werte gedruckt. Diese Zahlen teilen Ihnen den ADC-Bereich mit, den Ihre Platine produziert — essenzielle Information, bevor Sie die Kalibrierung anwenden.
Verdrahtung: Teilen Sie den SPI-Bus (D11/D13/D12) zwischen dem XPT2046 und dem Display. T_CS→D7, T_IRQ→D6. Alle Signale sind bei 3,3V.
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Touch Get Point Example
-----------------------
This example demonstrates how to read and display touch coordinates
using a DIYables SPI TFT display with a 4-wire resistive touch panel.
When you touch the screen, the sketch prints the mapped (screen) X and Y
coordinates to the Serial Monitor and draws a red dot at the touched location.
NOTE:
Run the TouchCalibration example first and paste the calibration values
into setTouchCalibration() below if the touch coordinates are inaccurate.
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
// =============================================
// Wiring (Arduino Nano ESP32)
// =============================================
// TFT pins (always required)
// TFT module Arduino Nano ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D8 (TFT_RST_PIN)
// DC / RS -> D9 (TFT_DC_PIN)
// SDI / MOSI -> D11 (hardware SPI MOSI)
// SCK -> D13 (hardware SPI SCK)
// SDO / MISO -> D12 (only needed when reading from display)
// LED -> 3.3V (or any GPIO via initBacklight)
//
// XPT2046 / HR2046 / ADS7843 SPI touch controller
// (modules with pins: T_CS, T_CLK, T_DIN, T_DO, T_IRQ)
// Touch pin Arduino Nano ESP32
// ------------ ---------------------------------
// T_CS -> D7 (TOUCH_CS_PIN)
// T_IRQ -> D6 (TOUCH_IRQ_PIN, optional - use -1 to skip)
// T_CLK -> D13 (shared with display SCK)
// T_DIN -> D11 (shared with display MOSI)
// T_DO -> D12 (shared with display MISO)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// MOSI and SCK use default hardware SPI pins
// =============================================
// Touch pin definitions (XPT2046 / HR2046 SPI touch controller)
// =============================================
#define TOUCH_CS_PIN D7 // T_CS (any GPIO)
#define TOUCH_IRQ_PIN -1 // T_IRQ (any GPIO, or -1 if not connected)
// =============================================
// =============================================
// Calibration values.
// Run the TouchCalibration example and update these if touch is inaccurate.
// Typical raw ranges:
// - XPT2046 / HR2046 : ~200..3900 (default below)
// - 4-wire resistive : ~100..900
// =============================================
#define TOUCH_LEFT_X 300
#define TOUCH_RIGHT_X 3700
#define TOUCH_TOP_Y 300
#define TOUCH_BOT_Y 3700
// =============================================
// Create display object (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
#define RED DIYables_TFT_SPI::colorRGB(255, 0, 0)
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
void setup() {
Serial.begin(9600);
TFT_display.begin();
TFT_display.setRotation(0);
TFT_display.fillScreen(WHITE);
TFT_display.initTouchSPI(TOUCH_CS_PIN, TOUCH_IRQ_PIN);
// If touch X is mirrored on your board, uncomment:
//TFT_display.setTouchInvertX(true);
// If touch Y is mirrored on your board, uncomment:
//TFT_display.setTouchInvertY(false);
TFT_display.setTouchCalibration(TOUCH_LEFT_X, TOUCH_RIGHT_X,
TOUCH_TOP_Y, TOUCH_BOT_Y);
Serial.println("Touch the screen to see coordinates.");
}
void loop() {
int x, y;
if (TFT_display.getTouch(x, y)) {
Serial.print("Touch at: ");
Serial.print(x);
Serial.print(", ");
Serial.println(y);
TFT_display.fillCircle(x, y, 4, RED);
delay(200);
}
}
Hands-On
- Verbinden Sie den XPT2046 mit dem Nano ESP32, wobei Sie den SPI-Bus mit dem Display teilen. T_CS→D7, T_IRQ→D6.
- Verbinden Sie den Nano ESP32 über USB-C mit Ihrem Computer.
- Wählen Sie in der Arduino IDE die Platine und den Port, fügen Sie den Code ein und klicken Sie auf Upload.
- Öffnen Sie den Serial Monitor bei 9600 Baud. Drücken Sie auf dem Bildschirm, um rohe X-, Y- und Z-Werte zu sehen.
Methoden-Referenz
| Methode | Aktion | Syntax |
|---|---|---|
| initTouchSPI(cs, irq) | Initialisiert den XPT2046 auf dem gemeinsamen SPI-Bus. Übergeben Sie -1 für irq, falls der Interrupt-Pin nicht verbunden ist. | TFT_display.initTouchSPI(7, 6); |
| readTouchRaw(x, y, z) | Liest rohe ADC-Werte vom Controller, wobei die Kalibrierung umgangen wird. Gibt true zurück, wenn gedrückt. | TFT_display.readTouchRaw(x, y, z); |
Workshop - Touch Zeichnen
In dieser Workshop-Station bauen Sie eine Touch-Paint-Anwendung auf dem Nano ESP32. Der XPT2046 liefert kalibrierte Koordinaten, die zu Pixelpositionen übersetzt werden, und an jedem Punkt wird ein kleiner gefüllter Kreis gezeichnet. Ziehen Sie einen Finger, um einen kontinuierlichen bemalten Strich zu erstellen.
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Touch Draw Lines Example
-------------------------
Draws lines on the screen following the pen.
- Touch and drag on the screen to draw.
- Lift the pen to stop drawing.
- Touch again to start a new line from the last point.
NOTE:
Run the TouchCalibration example and update setTouchCalibration() below
if the touch coordinates are inaccurate.
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
// =============================================
// Wiring (Arduino Nano ESP32)
// =============================================
// TFT pins (always required)
// TFT module Arduino Nano ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D8 (TFT_RST_PIN)
// DC / RS -> D9 (TFT_DC_PIN)
// SDI / MOSI -> D11 (hardware SPI MOSI)
// SCK -> D13 (hardware SPI SCK)
// SDO / MISO -> D12 (only needed when reading from display)
// LED -> 3.3V (or any GPIO via initBacklight)
//
// XPT2046 / HR2046 / ADS7843 SPI touch controller
// (modules with pins: T_CS, T_CLK, T_DIN, T_DO, T_IRQ)
// Touch pin Arduino Nano ESP32
// ------------ ---------------------------------
// T_CS -> D7 (TOUCH_CS_PIN)
// T_IRQ -> D6 (TOUCH_IRQ_PIN, optional - use -1 to skip)
// T_CLK -> D13 (shared with display SCK)
// T_DIN -> D11 (shared with display MOSI)
// T_DO -> D12 (shared with display MISO)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// =============================================
// Touch pin definitions (XPT2046 / HR2046 SPI touch controller)
// =============================================
#define TOUCH_CS_PIN D7 // T_CS (any GPIO)
#define TOUCH_IRQ_PIN -1 // T_IRQ (any GPIO, or -1 if not connected)
// =============================================
// =============================================
// Calibration values.
// Run the TouchCalibration example and update these if touch is inaccurate.
// Typical raw ranges:
// - XPT2046 / HR2046 : ~200..3900 (default below)
// - 4-wire resistive : ~100..900
// =============================================
#define TOUCH_LEFT_X 300
#define TOUCH_RIGHT_X 3700
#define TOUCH_TOP_Y 300
#define TOUCH_BOT_Y 3700
// =============================================
// Create display object (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
#define RED DIYables_TFT_SPI::colorRGB(255, 0, 0)
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
#define PEN_RADIUS 3
void setup() {
TFT_display.begin();
TFT_display.setRotation(0);
TFT_display.fillScreen(WHITE);
TFT_display.initTouchSPI(TOUCH_CS_PIN, TOUCH_IRQ_PIN);
// If touch X is mirrored on your board, uncomment:
//TFT_display.setTouchInvertX(true);
// If touch Y is mirrored on your board, uncomment:
//TFT_display.setTouchInvertY(false);
TFT_display.setTouchCalibration(TOUCH_LEFT_X, TOUCH_RIGHT_X,
TOUCH_TOP_Y, TOUCH_BOT_Y);
}
void loop() {
int x, y;
if (TFT_display.getTouch(x, y)) {
TFT_display.fillCircle(x, y, PEN_RADIUS, RED);
}
}
Hands-On
- Verbinden Sie den XPT2046 mit dem Nano ESP32, wie in der Workshop-Station Touch Punkt lesen oben beschrieben.
- Verbinden Sie den Nano ESP32 über USB-C mit Ihrem Computer.
- Wählen Sie in der Arduino IDE die Platine und den Port, fügen Sie den Code ein und klicken Sie auf Upload.
- Berühren und ziehen Sie einen Finger über das Display, um auf dem Bildschirm zu zeichnen.
Methoden-Referenz
| Methode | Aktion | Syntax |
|---|---|---|
| initTouchSPI(cs, irq) | Startet den XPT2046 auf dem gemeinsamen SPI-Bus. | TFT_display.initTouchSPI(7, 6); |
| setTouchCalibration(minX,maxX,minY,maxY) | Ordnet rohe ADC-Messwerte den Bildschirm-Pixelkoordinaten zu. Erhalten Sie die vier Werte von der TouchCalibration-Station. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
| setTouchInvertX(invert) / setTouchInvertY(invert) | Spiegelt die Touch-Achse, wenn X oder Y auf Ihrem spezifischen Panel oder Batch gespiegelt ist. Rufen Sie VOR setTouchCalibration() auf. | TFT_display.setTouchInvertY(true); |
| getTouch(x, y) | Gibt kalibrierte Touch-Koordinaten in Bildschirm-Pixeln zurück. Gibt true zurück, während der Bildschirm gedrückt wird. | if (TFT_display.getTouch(x, y)) { ... } |
| fillCircle(x, y, r, color) | Zeichnet einen Punkt am Touch-Punkt, um den bemalten Strich aufzubauen. | TFT_display.fillCircle(x, y, 3, RED); |
Workshop - Touch Kalibrierung
In dieser Workshop-Station kalibrieren Sie den XPT2046 Touch-Controller für Ihren spezifischen Panel. Berühren Sie jede Ecke des Bildschirms, wenn Sie dazu aufgefordert werden, und notieren Sie die minimalen und maximalen X- und Y-Werte, die auf dem Serial Monitor gedruckt werden. Diese vier Nummern sind die Kalibrierungskonstanten, die in allen anderen Touch-Stationen verwendet werden sollen.
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Touch Screen Calibration Example
---------------------------------
This example measures the raw touch coordinates at all four screen corners
and prints ready-to-use calibration values to the Serial Monitor.
It uses readTouchRaw() directly — it does NOT rely on getTouch() or any
existing calibration values, so it works even when touch is completely broken.
INSTRUCTIONS:
1. Upload this sketch to your board.
2. Open the Serial Monitor (Ctrl+Shift+M) and set baud rate to 9600.
3. The screen shows a blinking red dot in each corner, numbered 1-4:
1 = Top-left
2 = Top-right
3 = Bottom-right
4 = Bottom-left
4. Press and HOLD firmly on the blinking dot.
Keep holding until the Serial Monitor prints "Captured!" for that corner.
5. Release, then wait for the next dot to appear and repeat.
6. After all 4 corners, the Serial Monitor prints the calibration values and
a ready-to-use setTouchCalibration() call. Copy it into your sketch.
NOTE: While waiting, the Serial Monitor continuously prints the live raw
Z/X/Y readings so you can confirm that touch is being detected.
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
// =============================================
// Wiring (Arduino Nano ESP32)
// =============================================
// TFT pins (always required)
// TFT module Arduino Nano ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D8 (TFT_RST_PIN)
// DC / RS -> D9 (TFT_DC_PIN)
// SDI / MOSI -> D11 (hardware SPI MOSI)
// SCK -> D13 (hardware SPI SCK)
// SDO / MISO -> D12 (only needed when reading from display)
// LED -> 3.3V (or any GPIO via initBacklight)
//
// XPT2046 / HR2046 / ADS7843 SPI touch controller
// (modules with pins: T_CS, T_CLK, T_DIN, T_DO, T_IRQ)
// Touch pin Arduino Nano ESP32
// ------------ ---------------------------------
// T_CS -> D7 (TOUCH_CS_PIN)
// T_IRQ -> D6 (TOUCH_IRQ_PIN, optional - use -1 to skip)
// T_CLK -> D13 (shared with display SCK)
// T_DIN -> D11 (shared with display MOSI)
// T_DO -> D12 (shared with display MISO)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// =============================================
// Touch pin definitions (XPT2046 / HR2046 SPI touch controller)
// =============================================
#define TOUCH_CS_PIN D7 // T_CS (any GPIO)
#define TOUCH_IRQ_PIN -1 // T_IRQ (any GPIO, or -1 if not connected)
// =============================================
// =============================================
// Create display object (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN);
// Minimum pressure to count as a valid touch.
#define TOUCH_Z_MIN 10
// How many consecutive valid samples required before a corner is accepted.
#define SAMPLES_NEEDED 10
// Delay between samples (ms).
#define SAMPLE_DELAY_MS 30
#define DOT_RADIUS 12
#define BLACK DIYables_TFT_SPI::colorRGB( 0, 0, 0)
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
#define RED DIYables_TFT_SPI::colorRGB(255, 0, 0)
// Corner pixel positions - filled in setup() once display size is known.
// Order: 0=top-left, 1=top-right, 2=bottom-right, 3=bottom-left
int cx[4], cy[4];
// Captured averaged raw values per corner.
int cap_x[4], cap_y[4];
// -----------------------------------------------------------------------
void drawDot(int corner, bool on) {
uint16_t color = on ? RED : WHITE;
TFT_display.fillCircle(cx[corner], cy[corner], DOT_RADIUS, color);
TFT_display.setTextSize(2);
TFT_display.setTextColor(BLACK, color);
TFT_display.setCursor(cx[corner] - 6, cy[corner] - 8);
TFT_display.print(corner + 1);
}
void captureCorner(int corner) {
const char* names[] = { "Top-left", "Top-right", "Bottom-right", "Bottom-left" };
Serial.println();
Serial.print("Corner "); Serial.print(corner + 1);
Serial.print(" ("); Serial.print(names[corner]); Serial.println(")");
Serial.println(" Press and HOLD firmly on the blinking dot.");
Serial.println(" Keep holding until you see 'Captured!'");
unsigned long lastBlink = 0;
unsigned long lastPrint = 0;
bool dotOn = false;
int goodSamples = 0;
long sumX = 0, sumY = 0;
while (true) {
// Blink the dot
if (millis() - lastBlink > 400) {
lastBlink = millis();
dotOn = !dotOn;
drawDot(corner, dotOn);
}
int raw_x, raw_y, z;
TFT_display.readTouchRaw(raw_x, raw_y, z);
// Print live readings every 500 ms
if (millis() - lastPrint > 500) {
lastPrint = millis();
Serial.print(" Z="); Serial.print(z);
Serial.print(" X="); Serial.print(raw_x);
Serial.print(" Y="); Serial.println(raw_y);
}
if (z >= TOUCH_Z_MIN) {
sumX += raw_x;
sumY += raw_y;
goodSamples++;
if (goodSamples >= SAMPLES_NEEDED) {
cap_x[corner] = sumX / goodSamples;
cap_y[corner] = sumY / goodSamples;
Serial.print(" Captured! raw_x="); Serial.print(cap_x[corner]);
Serial.print(" raw_y="); Serial.println(cap_y[corner]);
drawDot(corner, false);
delay(500);
return;
}
} else {
goodSamples = 0;
sumX = 0;
sumY = 0;
}
delay(SAMPLE_DELAY_MS);
}
}
// -----------------------------------------------------------------------
void setup() {
Serial.begin(9600);
TFT_display.begin();
TFT_display.setRotation(0); // Always calibrate in rotation 0
TFT_display.fillScreen(WHITE);
TFT_display.initTouchSPI(TOUCH_CS_PIN, TOUCH_IRQ_PIN);
// If touch X is mirrored on your board, uncomment the line below
// BEFORE calibrating (so the printed values match your panel):
//TFT_display.setTouchInvertX(true);
// If touch Y is mirrored on your board, uncomment:
//TFT_display.setTouchInvertY(false);
int w = TFT_display.width();
int h = TFT_display.height();
int m = DOT_RADIUS + 4;
cx[0] = m; cy[0] = m;
cx[1] = w - m; cy[1] = m;
cx[2] = w - m; cy[2] = h - m;
cx[3] = m; cy[3] = h - m;
Serial.println("=== Touch Calibration ===");
for (int i = 0; i < 4; i++) {
captureCorner(i);
}
// Derive calibration values from the four corners
int min_x = (cap_x[0] + cap_x[3]) / 2; // left edge
int max_x = (cap_x[1] + cap_x[2]) / 2; // right edge
int min_y = (cap_y[0] + cap_y[1]) / 2; // top edge
int max_y = (cap_y[2] + cap_y[3]) / 2; // bottom edge
Serial.println();
Serial.println("=== Calibration Results ===");
Serial.print(" Left X (min_x): "); Serial.println(min_x);
Serial.print(" Right X (max_x): "); Serial.println(max_x);
Serial.print(" Top Y (min_y): "); Serial.println(min_y);
Serial.print(" Bot Y (max_y): "); Serial.println(max_y);
Serial.println();
Serial.println("Copy this line into your sketch:");
Serial.print(" TFT_display.setTouchCalibration(");
Serial.print(min_x); Serial.print(", ");
Serial.print(max_x); Serial.print(", ");
Serial.print(min_y); Serial.print(", ");
Serial.print(max_y); Serial.println(");");
TFT_display.fillScreen(WHITE);
TFT_display.setTextColor(BLACK);
TFT_display.setTextSize(2);
TFT_display.setCursor(10, 10);
TFT_display.println("Done! Check");
TFT_display.setCursor(10, 35);
TFT_display.println("Serial Monitor");
}
void loop() {}
Hands-On
- Verbinden Sie den XPT2046 mit dem Nano ESP32, wie in der Workshop-Station Touch Punkt lesen oben beschrieben.
- Verbinden Sie den Nano ESP32 über USB-C mit Ihrem Computer.
- Wählen Sie in der Arduino IDE die Platine und den Port, fügen Sie den Code ein und klicken Sie auf Upload.
- Öffnen Sie den Serial Monitor bei 9600 Baud. Berühren Sie jede Ecke, wenn Sie dazu aufgefordert werden.
- Notieren Sie die vier gedruckten Werte und verwenden Sie sie in setTouchCalibration() in allen anderen Touch-Stationen.
Methoden-Referenz
| Methode | Aktion | Syntax |
|---|---|---|
| initTouchSPI(cs, irq) | Initialisiert den XPT2046 Controller. | TFT_display.initTouchSPI(7, 6); |
| 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() rohe Werte Pixelkoordinaten zuordnet. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
| setTouchInvertX(invert) / setTouchInvertY(invert) | Spiegelt die Touch-Achse, wenn X oder Y auf Ihrem spezifischen Panel oder Batch gespiegelt ist. Rufen Sie auf, BEVOR Sie die Kalibrierung durchführen, damit die gespeicherten Werte zu Ihrem Panel passen. | TFT_display.setTouchInvertY(true); |
Workshop - Benutzerdefinierter SPI
In dieser Workshop-Station leiten Sie das Display zu einem nicht-standardmäßigen SPI-Bus um. Der Nano ESP32 basiert auf dem ESP32-S3, der mehrere Hardware-SPI-Controller unterstützt. Das Übergeben einer benutzerdefinierten SPIClass-Instanz an den Konstruktor ermöglicht es Ihnen, das Display an einen beliebigen verfügbaren SPI-Peripheral zuzuweisen — nützlich, wenn der Standard-Bus mit einem Sensor geteilt wird, der unterschiedliche SPI-Modus-Einstellungen erfordert.
/*
* Dieser Arduino Nano ESP32 Code wurde von newbiely.de entwickelt
* Dieser Arduino Nano 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/arduino-nano-esp32/arduino-nano-esp32-tft-lcd-touch-display-spi
*/
/*
Created by DIYables
This example code is in the public domain
Product page: https://diyables.io
This example demonstrates how to use a custom (non-default) SPI bus
with the DIYables TFT SPI library. This is useful on boards that have
multiple SPI interfaces, such as:
- ESP32: HSPI / VSPI
- Arduino Giga / Portenta: SPI1
- Raspberry Pi Pico: SPI1
*/
// =============================================
// Single include brings in the base class plus all driver classes.
// =============================================
#include <DIYables_TFT_SPI.h>
// =============================================
// Wiring (Arduino Nano ESP32 - default SPI bus)
// ---------------------------------------------
// NOTE: The Arduino Nano ESP32 exposes one hardware SPI bus on the Nano
// header pins (D11=MOSI, D13=SCK, D12=MISO). MY_SPI must remain &SPI
// and the wiring uses the standard hardware SPI mapping below.
//
// TFT module Arduino Nano ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> D10 (TFT_CS_PIN)
// RESET -> D8 (TFT_RST_PIN)
// DC / RS -> D9 (TFT_DC_PIN)
// SDI / MOSI -> D11 (hardware SPI MOSI)
// SCK -> D13 (hardware SPI SCK)
// LED -> 3.3V (or any GPIO via initBacklight)
// SDO / MISO -> D12 (only needed when reading from display)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN D10
#define TFT_DC_PIN D9
#define TFT_RST_PIN D8
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// =============================================
// Select SPI bus
// =============================================
// --- Default SPI (D11/D13/D12 on Nano ESP32) ---
#define MY_SPI &SPI
// =============================================
// Create display object with custom SPI bus
// (uncomment matching driver)
// =============================================
// DIYables_ILI9341_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN, MY_SPI);
// DIYables_ILI9488_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN, MY_SPI);
DIYables_ST7789_SPI TFT_display(TFT_WIDTH, TFT_HEIGHT, TFT_CS_PIN, TFT_DC_PIN, TFT_RST_PIN, MY_SPI);
#define BLACK DIYables_TFT_SPI::colorRGB(0, 0, 0)
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
#define RED DIYables_TFT_SPI::colorRGB(255, 0, 0)
#define GREEN DIYables_TFT_SPI::colorRGB(0, 255, 0)
#define BLUE DIYables_TFT_SPI::colorRGB(0, 0, 255)
void setup() {
Serial.begin(9600);
TFT_display.begin();
TFT_display.setRotation(1); // Landscape
TFT_display.fillScreen(BLACK);
uint16_t w = TFT_display.width();
uint16_t h = TFT_display.height();
// Draw a simple test pattern
TFT_display.fillRect(0, 0, w / 3, h, RED);
TFT_display.fillRect(w / 3, 0, w / 3, h, GREEN);
TFT_display.fillRect(w * 2 / 3, 0, w / 3, h, BLUE);
TFT_display.setTextColor(WHITE);
TFT_display.setTextSize(2);
TFT_display.setCursor(10, h / 2 - 10);
TFT_display.print("Custom SPI bus OK");
}
void loop() {
// Nothing to do
}
Hands-On
- Kommentieren Sie den SPIClass-Konstruktor in der Skizze aus, die dem SPI-Bus entspricht, den Sie verwenden möchten, und verbinden Sie das Display mit den entsprechenden Pins.
- Verbinden Sie den Nano ESP32 über USB-C mit Ihrem Computer.
- Wählen Sie in der Arduino IDE die Platine und den Port, fügen Sie den Code ein und klicken Sie auf Upload.
- Das Display startet auf dem ausgewählten SPI-Bus und rendert ein Farbstangen-Muster, um den Erfolg zu bestätigen.
Methoden-Referenz
| Methode | Aktion | Syntax |
|---|---|---|
| DIYables_ILI9341_SPI(w,h,cs,dc,rst,spi) | Konstruktor, der einen expliziten SPIClass-Zeiger als letztes Argument akzeptiert. Standardmäßig &SPI, wenn weggelassen. | DIYables_ILI9341_SPI tft(240, 320, 10, 9, 8, &SPI); |
| begin() | Initialisiert das Display auf dem konfigurierten SPI-Bus. | TFT_display.begin(); |
Fehlerbehebung
| Problem | Mögliche Ursache | Lösung |
|---|---|---|
| Schwarzer Bildschirm | VCC bei 5V oder CS/DC nicht verbunden | Verwenden Sie 3,3V für VCC; überprüfen Sie die Verdrahtung von CS und DC |
| Müll auf dem Bildschirm | Falscher Treiber-Konstruktor aktiv | Lassen Sie nur einen Konstruktor auskommentiert |
| Bild verrutscht oder fehlt | Falsche Breite oder Höhe im Konstruktor | Passen Sie die Werte an Ihre Panel-Größe an |
| Touch nicht reaktiv | Fehlende Kalibrierung | Führen Sie das TouchCalibration-Beispiel aus und kopieren Sie die Ausgabewerte |
| Upload fehlgeschlagen | Platine im falschen Modus | Halten Sie BOOT, während Sie RESET drücken, versuchen Sie dann erneut hochzuladen |
Plattform-Unterstützung
Die Bibliothek basiert vollständig auf Arduino Standard APIs und unterstützt alle Arduino-kompatiblen Plattformen (architectures=*).