ESP32 - ILI9341 ILI9488 ST7789 TFT LCD Touchscreen-Display SPI-Schnittstelle
Lassen Sie uns ein Projekt aufbauen, das ein Farb-SPI-TFT-Display zum Leben auf einem ESP32 erweckt. Der ESP32 ist ein starker Dual-Core-Mikrocontroller mit Wi-Fi, Bluetooth und vielen GPIO-Pins - und sein VSPI-Hardware-SPI-Bus macht es einfach, ein hochfrequentes TFT-Display mit den vom Panel unterstützten Raten zu betreiben.
Was wir bauen werden:
- Eine verdrahtete Verbindung zwischen einem ESP32 und einem SPI-TFT-Display.
- Eine Shapes-Demo mit der Adafruit GFX-Zeichen-API.
- Ein Beispiel für Text- und Zahlenausgabe.
- Ein Bitmap-Bildanzeiger, der aus dem Programmspeicher (PROGMEM) liest.
- Ein Bitmap-Bildanzeiger, der Bilder von einer SD-Karte liest.
- Eine Demo für benutzerdefinierte externe Schriftarten.
- Ein Touch-Koordinatenlese-Tool mit XPT2046-Controller.
- Eine Touch-Draw-Anwendung (Finger-Malen auf dem Bildschirm).
- Eine interaktive Touch-Button-Oberfläche.
- Ein Touchscreen-Kalibrierungstool.
- Ein benutzerdefiniertes SPI-Bus-Beispiel mit ESP32 HSPI.
Dieses Projekt behandelt sowohl Touch- als auch Non-Touch-SPI-TFT-LCD-Displays. Es funktioniert mit 1,3, 1,54, 2,2, 2,4, 2,8, 3,2 und 3,5 Zoll Panels mit ILI9341-, ILI9488- oder ST7789-Controller-Chips.
Erforderliche Hardware
Oder Sie können die folgenden Kits kaufen:
| 1 | × | DIYables ESP32 Starter-Kit (ESP32 enthalten) | |
| 1 | × | DIYables Sensor-Kit (18 Sensoren/Displays) |
Offenlegung: Einige der in diesem Abschnitt bereitgestellten Links sind Amazon-Affiliate-Links. Wir können eine Provision für Käufe erhalten, die über diese Links getätigt werden, ohne zusätzliche Kosten für Sie. Wir schätzen Ihre Unterstützung.
Was ist das SPI-TFT-Display?
Ein SPI-TFT-Modul kombiniert ein LCD-Farbdisplay mit einem Driver-IC, der Zeichenbefehle über einen 4-Draht-SPI-Bus akzeptiert. Die Bibliothek unterstützt drei gängige Chips:
- 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 ein Display noch nicht gekauft haben, empfehlen wir den ST7789-Driver. Er ist weit verbreitet, läuft mit voller 40-MHz-SPI-Geschwindigkeit und ist die beste Wahl für neue Projekte.
Das Zeichnen wird über die Adafruit GFX-API durchgeführt, die Formen, Text, benutzerdefinierte Schriftarten und Bitmap-Ausgabe umfasst.
Hinweis: Der ESP32 verwendet 3,3V-Logik. Die meisten SPI-TFT-Module arbeiten mit 3,3V. Überprüfen Sie die Spannungsvorgabe Ihres Moduls vor dem Verdrahten.
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 auf dem SPI-Bus auszuwählen |
| DC / RS | Daten- / Befehlsauswahl - High für Pixeldaten, Low für Befehle |
| RST | Hardware-Reset - optional; mit 3,3V verbinden, falls nicht verwendet |
| MOSI / SDI / SDA | SPI-Dateneingabe (MCU → Display) |
| SCK / CLK | SPI-Taktsignal |
| MISO / SDO | SPI-Datenausgang (Display → MCU) - optional für reine Displaynutzung |
| LED / BL / BLK | Backlight-Stromversorgung - mit 3,3V oder einem PWM-Pin für Helligkeitssteuerung verbinden |
SD-Karten-Pins (falls Ihre Anwendung auf die SD-Karte zugreifen muss):
| Pin | Funktion |
|---|---|
| SD_CS / TF_CS | SD-Karten-Chip-Select |
| MOSI / SDI | MOSI - Daten vom MCU zur SD-Karte |
| SCK / CLK | SCK - SPI-Taktsignal |
| MISO / SDO | MISO - Daten von der SD-Karte zum MCU |
Für 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 | Touch-Controller-Chip-Select |
| T_CLK | SCK - SPI-Taktsignal |
| 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 Non-Touch-Display-Module zeigen auch T_CS-, T_CLK-, T_DIN-, T_DO- und T_IRQ-Pins. 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 verwendet, um Herstellungsvarianten zu reduzieren.
Verdrahtungsschema
Ohne Touch
Verbinden Sie MOSI mit GPIO23, SCK mit GPIO18 und MISO mit GPIO19 auf dem ESP32. CS, DC und RST können beliebige verfügbare GPIO sein - GPIO5, GPIO2, GPIO4 werden in den Beispielen verwendet.
Display:
| TFT-Pin | ESP32-Pin | Beschreibung |
|---|---|---|
| VCC | 3.3V | Stromversorgung (nur 3,3V) |
| GND | GND | Masse |
| CS | GPIO5 | Chip Select |
| DC / RS | GPIO2 | Daten- / Befehlsauswahl |
| RST | GPIO4 | Reset (optional) |
| MOSI / SDI | GPIO23 | Hardware-SPI-MOSI (VSPI) |
| SCK | GPIO18 | Hardware-SPI-Taktsignal (VSPI) |
| MISO / SDO | GPIO19 | Hardware-SPI-MISO (VSPI, optional) |
| LED / BL | 3.3V | Backlight-Stromversorgung |
SD-Karte (falls Ihre Anwendung auf die SD-Karte zugreifen muss):
| SD-Pin | ESP32-Pin | Beschreibung |
|---|---|---|
| SD_CS / TF_CS | beliebiger freier GPIO | SD-Karten-Chip-Select |
| MOSI / SDI | GPIO23 | Mit Display-MOSI geteilt (GPIO23) |
| SCK / CLK | GPIO18 | Mit Display-SCK geteilt (GPIO18) |
| MISO / SDO | GPIO19 | Mit Display-MISO geteilt (GPIO19) |
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Wenn Sie nicht wissen, wie Sie ESP32 und andere Komponenten mit Strom versorgen, finden Sie Anleitungen im folgenden Tutorial: Wie man ESP32 mit Strom versorgt.
Hinweis: Das obige Diagramm zeigt die korrekte Verdrahtung. In der Praxis ist es nicht einfach, zwei Drähte in das gleiche ESP32-Pin-Header-Loch zu stecken. Eine praktische Lösung ist die Verwendung eines Schraubklemmen-Breakout-Boards für ESP32 - zwei Drähte können in die gleiche Schraubklemme gesichert werden, oder ein Draht in die Schraube und einer im angrenzenden Header-Pin.
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Mit Touch
Verbinden Sie den XPT2046-Touch-Controller mit dem ESP32-VSPI-Bus und teilen Sie GPIO23, GPIO18 und GPIO19 mit dem Display.
Display:
| TFT-Pin | ESP32-Pin | Beschreibung |
|---|---|---|
| VCC | 3.3V | Stromversorgung (nur 3,3V) |
| GND | GND | Masse |
| CS | GPIO5 | Chip Select |
| DC / RS | GPIO2 | Daten- / Befehlsauswahl |
| RST | GPIO4 | Reset (optional) |
| MOSI / SDI | GPIO23 | Hardware-SPI-MOSI (VSPI) |
| SCK | GPIO18 | Hardware-SPI-Taktsignal (VSPI) |
| MISO / SDO | GPIO19 | Hardware-SPI-MISO (VSPI, optional) |
| LED / BL | 3.3V | Backlight-Stromversorgung |
Touch-Controller (falls Ihre Anwendung die Touch-Funktion nutzt und das Display sie unterstützt):
| Touch-Pin | ESP32-Pin | Beschreibung |
|---|---|---|
| T_CS | beliebiger freier GPIO | Touch-Chip-Select |
| T_IRQ | beliebiger freier GPIO | Touch-Interrupt (optional) |
| T_DIN | GPIO23 | Mit Display-MOSI geteilt (GPIO23) |
| T_CLK | GPIO18 | Mit Display-SCK geteilt (GPIO18) |
| T_DO | GPIO19 | Mit Display-MISO geteilt (GPIO19) |
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Hinweis: Das obige Diagramm zeigt die korrekte Verdrahtung. In der Praxis ist es nicht einfach, zwei Drähte in das gleiche ESP32-Pin-Header-Loch zu stecken. Eine praktische Lösung ist die Verwendung eines Schraubklemmen-Breakout-Boards für ESP32 - zwei Drähte können in die gleiche Schraubklemme gesichert werden, oder ein Draht in die Schraube und einer im angrenzenden Header-Pin.
Dieses Bild wurde mit Fritzing erstellt. Klicken Sie, um das Bild zu vergrößern.
Wenn Ihr MCU zwei oder mehr Hardware-SPI-Schnittstellen hat, können Sie jeden peripheren Geräte (Display, SD-Karte, Touch-Controller) an seinen eigenen dedizierten SPI-Bus anschließen. Wenn Ihr MCU nur eine Hardware-SPI-Schnittstelle hat, teilen alle drei peripheren Geräte die gleichen drei Datenleitungen (MOSI, SCK, MISO) - auf dem ESP32 sind dies GPIO23, GPIO18 und GPIO19. Jedes Gerät hat seinen eigenen CS-Pin, so dass nur eines aktiv ist. Die DIYables_TFT_SPI-Bibliothek verwaltet sowohl das Display als auch den XPT2046-Touch-Controller über eine einzige API - es wird keine separate SPI-Bibliothek für die Touch-Seite benötigt.
Bibliotheksinstallation
- Verbinden Sie das ESP32-Board über seinen USB-C-Port mit Ihrem Computer.
- Öffnen Sie die Arduino IDE. Wählen Sie Ihre ESP32-Board-Variante aus dem Board-Menü und wählen Sie den richtigen COM-Port.
- Öffnen Sie das Libraries Panel.
- Suchen Sie nach "DIYables_TFT_SPI". Suchen Sie den DIYables-Eintrag.
- Klicken Sie auf Install und akzeptieren Sie alle Abhängigkeitsinstallationen.
- Search for DIYables TFT SPI created by DIYables.io and click the Install button.
1
void setup() {
Projektgrundlage
Der Basis-Sketch für jedes ESP32-TFT-Projekt mit dieser Bibliothek:
#include <DIYables_TFT_SPI.h>
#define TFT_CS_PIN 5
#define TFT_DC_PIN 2
#define TFT_RST_PIN 4
// Kommentieren Sie die Zeile aus, die zu Ihrem Driver-Chip passt:
// 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() {
// Zeichnungscode hier
}
Lassen Sie uns bauen - Formen zeichnen
Das DrawShapes-Beispiel zeichnet die vollständige Palette von Adafruit GFX-Primitiven: Kreise, Dreiecke, Rechtecke, gerundete Rechtecke und Linien.
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-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 (ESP32)
// =============================================
// TFT pins (always required)
// TFT module ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> GPIO5 (TFT_CS_PIN)
// RESET -> GPIO4 (TFT_RST_PIN)
// DC / RS -> GPIO2 (TFT_DC_PIN)
// SDI / MOSI -> GPIO23 (hardware SPI MOSI / VSPI)
// SCK -> GPIO18 (hardware SPI SCK / VSPI)
// SDO / MISO -> GPIO19 (only needed when reading from display / VSPI)
// LED -> 3.3V (or any GPIO via initBacklight)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 5
#define TFT_DC_PIN 2
#define TFT_RST_PIN 4
// 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);
}
Hochladen und Testen
- Verdrahten Sie das TFT-Modul mit dem ESP32 mit der obigen Tabelle.
- Stecken Sie das USB-C-Kabel ein.
- Fügen Sie in der Arduino IDE den Code ein, wählen Sie das Board und den Port aus, und drücken Sie Upload.
- Nach dem Hochladen füllt sich das Display mit einer Schleife farbiger Formen.
Zeichnungs-API-Referenz
| Methode | Zweck | Verwendung |
|---|---|---|
| begin() | Initialisiert das Display. | TFT_display.begin(); |
| setRotation(r) | Stellt die Bildschirmorientierung 0-3 ein. | TFT_display.setRotation(1); |
| fillScreen(color) | Füllt den gesamten Bildschirm mit einer Farbe. | TFT_display.fillScreen(BLACK); |
| colorRGB(r,g,b) | Erstellt einen 16-Bit-Farbwert. | colorRGB(255,128,0) |
| fillCircle(x,y,r,color) | Vollständig gefüllter Kreis. | TFT_display.fillCircle(120,160,60,RED); |
| fillRect(x,y,w,h,color) | Volles Rechteck. | TFT_display.fillRect(0,0,100,50,BLUE); |
| drawLine(x0,y0,x1,y1,color) | Gerade Linie zwischen zwei Punkten. | TFT_display.drawLine(0,0,320,240,WHITE); |
Lassen Sie uns bauen - Text und Zahlen anzeigen
Das ShowTextAndNumber-Beispiel verwendet die Adafruit GFX-Text-Engine zum Drucken von Zeichenketten und numerischen Werten in verstellbaren Größen und Farben.
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-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 (ESP32)
// =============================================
// TFT pins (always required)
// TFT module ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> GPIO5 (TFT_CS_PIN)
// RESET -> GPIO4 (TFT_RST_PIN)
// DC / RS -> GPIO2 (TFT_DC_PIN)
// SDI / MOSI -> GPIO23 (hardware SPI MOSI / VSPI)
// SCK -> GPIO18 (hardware SPI SCK / VSPI)
// SDO / MISO -> GPIO19 (only needed when reading from display / VSPI)
// LED -> 3.3V (or any GPIO via initBacklight)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 5
#define TFT_DC_PIN 2
#define TFT_RST_PIN 4
// 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() {
}
Hochladen und Testen
- Verdrahten und hochladen wie oben.
- Das Display zeigt mehrere Textzeilen und Zahlen in verschiedenen Farben und Größen.
Zeichnungs-API-Referenz
| Methode | Zweck | Verwendung |
|---|---|---|
| setTextColor(color) | Stellt die Vordergrundfarbe des Textes ein. | TFT_display.setTextColor(WHITE); |
| setTextSize(size) | Skaliert Text. Größe 1 = 6×8 px, Größe 2 = 12×16 px. | TFT_display.setTextSize(2); |
| setCursor(x, y) | Platziert den Text-Cursor bei Pixel (x, y). | TFT_display.setCursor(10, 20); |
| print(value) | Druckt eine Zeichenkette oder Zahl am Cursor. | TFT_display.print("ESP32!"); |
| println(value) | Druckt und bewegt den Cursor zur nächsten Zeile. | TFT_display.println(42); |
Lassen Sie uns bauen - Bild zeichnen
Lassen Sie uns einen Bild-Viewer erstellen. Das DrawImage-Beispiel lädt ein Vollfarb-RGB565-Bitmap aus dem ESP32-Flash in den Speicher und rendert es auf dem Display. Die Pixeldaten werden in bitmap.h als ein const uint16_t Array mit PROGMEM deklariert. Auf dem ESP32 werden PROGMEM-Daten aus dem Flash in den virtuellen Adressraum abgebildet, sodass sich das Bild zeichnet, ohne RAM zu verbrauchen.
Kopieren Sie bitmap.h in den Sketch-Ordner, bevor Sie kompilieren.
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-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 (ESP32)
// =============================================
// TFT pins (always required)
// TFT module ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> GPIO5 (TFT_CS_PIN)
// RESET -> GPIO4 (TFT_RST_PIN)
// DC / RS -> GPIO2 (TFT_DC_PIN)
// SDI / MOSI -> GPIO23 (hardware SPI MOSI / VSPI)
// SCK -> GPIO18 (hardware SPI SCK / VSPI)
// SDO / MISO -> GPIO19 (only needed when reading from display / VSPI)
// LED -> 3.3V (or any GPIO via initBacklight)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 5
#define TFT_DC_PIN 2
#define TFT_RST_PIN 4
// 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);
}
Hochladen und Testen
- Platzieren Sie bitmap.h im gleichen Ordner wie den Sketch.
- Verdrahten Sie das TFT-Modul mit dem ESP32 wie oben gezeigt (MOSI=GPIO23, SCK=GPIO18, MISO=GPIO19, CS=GPIO5, DC=GPIO2, RST=GPIO4). Verwenden Sie 3,3V für VCC.
- Stecken Sie das USB-C-Kabel ein.
- Wählen Sie in der Arduino IDE das Board und den Port aus, und drücken Sie Upload.
- Das Display rendert das Bitmap-Bild aus dem Flash.
Zeichnungs-API-Referenz
| Methode | Zweck | Verwendung |
|---|---|---|
| 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 das Display, bevor das Bild gezeichnet wird. | TFT_display.fillScreen(BLACK); |
Lassen Sie uns bauen - SD-Kartenbild zeichnen
Lassen Sie uns einen SD-Kartenbilds-Viewer erstellen. Das DrawImageSDcard-Beispiel liest ein rohes RGB565-Binär-Bild von einer Micro-SD-Karte und streamt die Pixeldaten in Chunks zum Display. Der ESP32 verwaltet sowohl die SD-Karte als auch das Display auf dem gleichen VSPI-Bus, wobei die CS-Leitungen zwischen ihnen umgeschaltet werden.
Verdrahten Sie das SD-Modul mit GPIO23 (MOSI), GPIO18 (SCK), GPIO19 (MISO). Definieren Sie einen separaten CS-Pin für das SD-Modul als SD_CS_PIN im Sketch.
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-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 (ESP32)
// =============================================
// TFT + SD module pins
// TFT + SD module ESP32
// ----------------------- ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// TFT CS -> GPIO5 (TFT_CS_PIN)
// TFT RESET -> GPIO4 (TFT_RST_PIN)
// TFT DC / RS -> GPIO2 (TFT_DC_PIN)
// SD CS -> GPIO14 (SD_CS)
// SDI / MOSI (shared) -> GPIO23 (hardware SPI MOSI / VSPI)
// SDO / MISO (shared) -> GPIO19 (hardware SPI MISO / VSPI)
// SCK (shared) -> GPIO18 (hardware SPI SCK / VSPI)
// LED -> 3.3V (or any GPIO via initBacklight)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 5
#define TFT_DC_PIN 2
#define TFT_RST_PIN 4
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
#define SD_CS 14 // 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() {
}
Hochladen und Testen
- Verdrahten Sie das SD-Modul mit dem ESP32-VSPI-Bus. Teilen Sie GPIO23/18/19 mit dem Display. Verbinden Sie SD CS mit dem als SD_CS_PIN definierten Pin.
- Kopieren Sie eine rohes RGB565-Binär-Bilddatei in das Root-Verzeichnis der SD-Karte. Die Dimensionen müssen Ihrem Panel entsprechen.
- Stecken Sie das USB-C-Kabel ein.
- Wählen Sie in der Arduino IDE das Board und den Port aus, und drücken Sie Upload.
- Das Display rendert das Bild, das von der SD-Karte gestreamt wird.
Zeichnungs-API-Referenz
| Methode | Zweck | Verwendung |
|---|---|---|
| startWrite() | Öffnet eine direkte SPI-Schreib-Sitzung und behauptet den Display-CS. | TFT_display.startWrite(); |
| setAddrWindow(x0,y0,x1,y1) | Definiert den rechteckigen Pixel-Schreib-Bereich auf dem Panel. | TFT_display.setAddrWindow(0, 0, 239, 319); |
| pushColors(buf, len) | Sendet einen Puffer von RGB565-Pixelwerten zum Display. | TFT_display.pushColors(buf, 512); |
| endWrite() | Schließt die SPI-Sitzung und gibt den Display-CS frei. | TFT_display.endWrite(); |
Lassen Sie uns bauen - Externe Schriftart verwenden
Lassen Sie uns einen benutzerdefinierten Text-Display erstellen. Das UseExternalFont-Beispiel ersetzt die Standard-5×7-Pixel-Schriftart durch eine schärfere Adafruit GFX-kompatible Outline-Schriftart. Ein Aufruf von setFont() ist alles, was es braucht, um die Typografie zu verbessern. Der Aufruf von setFont(NULL) stellt die ursprüngliche eingebaute Schriftart jederzeit wieder her.
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-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 (ESP32)
// =============================================
// TFT pins (always required)
// TFT module ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> GPIO5 (TFT_CS_PIN)
// RESET -> GPIO4 (TFT_RST_PIN)
// DC / RS -> GPIO2 (TFT_DC_PIN)
// SDI / MOSI -> GPIO23 (hardware SPI MOSI / VSPI)
// SCK -> GPIO18 (hardware SPI SCK / VSPI)
// SDO / MISO -> GPIO19 (only needed when reading from display / VSPI)
// LED -> 3.3V (or any GPIO via initBacklight)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 5
#define TFT_DC_PIN 2
#define TFT_RST_PIN 4
// 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() {
}
Hochladen und Testen
- Verdrahten Sie das TFT-Modul mit dem ESP32 wie oben gezeigt.
- Stecken Sie das USB-C-Kabel ein.
- Wählen Sie in der Arduino IDE das Board und den Port aus, und drücken Sie Upload.
- Das Display rendert Text in der benutzerdefinierten Schriftart.
Zeichnungs-API-Referenz
| Methode | Zweck | Verwendung |
|---|---|---|
| setFont(&FontName) | Aktiviert eine benutzerdefinierte GFX-kompatible Schriftart. Übergeben Sie NULL, um die eingebaute 5×7-Schriftart wiederherzustellen. | TFT_display.setFont(&FreeSans12pt7b); |
| setCursor(x, y) | Positioniert den Text-Cursor bei der angegebenen Pixel-Koordinate. | TFT_display.setCursor(10, 40); |
| setTextColor(color) | Stellt die Vordergrundfarbe für nachfolgende Texte ein. | TFT_display.setTextColor(WHITE); |
| print(text) | Druckt eine Zeichenkette am Cursor mit der aktiven Schriftart. | TFT_display.print("ESP32 Project"); |
Lassen Sie uns bauen - Touch-Punkt auslesen
Lassen Sie uns einen Touch-Koordinatenlese-Tool erstellen. Das TouchGetPoint-Beispiel initialisiert den XPT2046 auf dem ESP32-VSPI-Bus und druckt rohe ADC-Werte in den Serial Monitor, wenn der Bildschirm gedrückt wird. Dies ist der erste Schritt zu einem Touch-fähigen Projekt: Das Verständnis des Rohdaten-Bereichs, den Ihr Panel produziert.
Verdrahtung (alle Signale bei 3,3V):
| Touch-Pin | ESP32-Pin | Beschreibung |
|---|---|---|
| T_CLK | GPIO18 | SCK - mit Display geteilt |
| T_DIN | GPIO23 | MOSI - mit Display geteilt |
| T_DO | GPIO19 | MISO - mit Display geteilt |
| T_CS | GPIO15 | Touch-Chip-Select |
| T_IRQ | GPIO27 | Touch-Interrupt (optional) |
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-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 (ESP32)
// =============================================
// TFT pins (always required)
// TFT module ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> GPIO5 (TFT_CS_PIN)
// RESET -> GPIO4 (TFT_RST_PIN)
// DC / RS -> GPIO2 (TFT_DC_PIN)
// SDI / MOSI -> GPIO23 (hardware SPI MOSI / VSPI)
// SCK -> GPIO18 (hardware SPI SCK / VSPI)
// SDO / MISO -> GPIO19 (only needed when reading from display / VSPI)
// 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 ESP32
// ------------ ---------------------------------
// T_CS -> GPIO15 (TOUCH_CS_PIN)
// T_IRQ -> GPIO27 (TOUCH_IRQ_PIN, optional - use -1 to skip)
// T_CLK -> GPIO18 (shared with display SCK / VSPI)
// T_DIN -> GPIO23 (shared with display MOSI / VSPI)
// T_DO -> GPIO19 (shared with display MISO / VSPI)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 5
#define TFT_DC_PIN 2
#define TFT_RST_PIN 4
// 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 15 // 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);
}
}
Hochladen und Testen
- Verdrahten Sie den XPT2046 mit dem ESP32-VSPI-Bus, teilen Sie GPIO23/18/19 mit dem Display. T_CS→GPIO15, T_IRQ→GPIO27.
- Stecken Sie das USB-C-Kabel ein.
- Wählen Sie in der Arduino IDE das Board und den Port aus, und drücken Sie Upload.
- Öffnen Sie den Serial Monitor bei 9600 Baud. Berühren Sie das Display, um rohe X-, Y- und Z-Werte gedruckt zu sehen.
Zeichnungs-API-Referenz
| Methode | Zweck | Verwendung |
|---|---|---|
| initTouchSPI(cs, irq) | Initialisiert den XPT2046 auf dem gemeinsamen SPI-Bus. Übergeben Sie -1 für irq, wenn der Interrupt-Pin nicht verbunden ist. | TFT_display.initTouchSPI(14, 27); |
| readTouchRaw(x, y, z) | Gibt rohe ADC-Werte vom Controller ohne Kalibrierung zurück. Gibt true zurück, wenn gedrückt. | TFT_display.readTouchRaw(x, y, z); |
Lassen Sie uns bauen - Touch-Draw
Lassen Sie uns eine Finger-Mal-App erstellen. Das TouchDraw-Beispiel kombiniert den XPT2046-Touch-Controller mit der Zeichnungs-API des Displays. Jede Touchposition wird auf eine kalibrierte Pixel-Koordinate abgebildet und ein kleiner gefüllter Kreis wird dort gezeichnet, wodurch ein Strich entsteht, wenn der Finger bewegt wird.
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-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 (ESP32)
// =============================================
// TFT pins (always required)
// TFT module ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> GPIO5 (TFT_CS_PIN)
// RESET -> GPIO4 (TFT_RST_PIN)
// DC / RS -> GPIO2 (TFT_DC_PIN)
// SDI / MOSI -> GPIO23 (hardware SPI MOSI / VSPI)
// SCK -> GPIO18 (hardware SPI SCK / VSPI)
// SDO / MISO -> GPIO19 (only needed when reading from display / VSPI)
// 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 ESP32
// ------------ ---------------------------------
// T_CS -> GPIO15 (TOUCH_CS_PIN)
// T_IRQ -> GPIO27 (TOUCH_IRQ_PIN, optional - use -1 to skip)
// T_CLK -> GPIO18 (shared with display SCK / VSPI)
// T_DIN -> GPIO23 (shared with display MOSI / VSPI)
// T_DO -> GPIO19 (shared with display MISO / VSPI)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 5
#define TFT_DC_PIN 2
#define TFT_RST_PIN 4
// 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 15 // 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);
}
}
Hochladen und Testen
- Verdrahten Sie den XPT2046 mit dem ESP32 wie im Abschnitt Touch Get Point beschrieben.
- Stecken Sie das USB-C-Kabel ein.
- Wählen Sie in der Arduino IDE das Board und den Port aus, und drücken Sie Upload.
- Ziehen Sie einen Finger über das Display, um auf dem Bildschirm zu malen.
Zeichnungs-API-Referenz
| Methode | Zweck | Verwendung |
|---|---|---|
| initTouchSPI(cs, irq) | Initialisiert den XPT2046 auf dem gemeinsamen VSPI-Bus. | TFT_display.initTouchSPI(14, 27); |
| setTouchCalibration(minX,maxX,minY,maxY) | Ordnet rohe ADC-Werte auf Bildschirm-Pixel-Koordinaten ab. Holen Sie sich die vier Werte aus dem TouchCalibration-Beispiel. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
| setTouchInvertX(invert) / setTouchInvertY(invert) | Invertiert die Touch-Achse, wenn X oder Y auf Ihrem spezifischen Panel oder Batch gespiegelt wird. 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, wenn der Bildschirm gedrückt wird. | if (TFT_display.getTouch(x, y)) { ... } |
| fillCircle(x, y, r, color) | Zeichnet einen kleinen Punkt auf der Touchposition, um das Gemälde aufzubauen. | TFT_display.fillCircle(x, y, 3, RED); |
Lassen Sie uns bauen - Touch-Kalibrierung
Lassen Sie uns ein Kalibrierungstool erstellen. Das TouchCalibration-Beispiel führt Sie durch die Messung der rohen ADC-Extreme Ihres XPT2046-Panels. Berühren Sie wie aufgefordert jede Ecke des Displays und notieren Sie die gedruckten minimalen und maximalen X- und Y-Werte. Diese vier Zahlen sind die Konstanten für setTouchCalibration() in allen anderen Touch-Projekten.
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-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 (ESP32)
// =============================================
// TFT pins (always required)
// TFT module ESP32
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> GPIO5 (TFT_CS_PIN)
// RESET -> GPIO4 (TFT_RST_PIN)
// DC / RS -> GPIO2 (TFT_DC_PIN)
// SDI / MOSI -> GPIO23 (hardware SPI MOSI / VSPI)
// SCK -> GPIO18 (hardware SPI SCK / VSPI)
// SDO / MISO -> GPIO19 (only needed when reading from display / VSPI)
// 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 ESP32
// ------------ ---------------------------------
// T_CS -> GPIO15 (TOUCH_CS_PIN)
// T_IRQ -> GPIO27 (TOUCH_IRQ_PIN, optional - use -1 to skip)
// T_CLK -> GPIO18 (shared with display SCK / VSPI)
// T_DIN -> GPIO23 (shared with display MOSI / VSPI)
// T_DO -> GPIO19 (shared with display MISO / VSPI)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 5
#define TFT_DC_PIN 2
#define TFT_RST_PIN 4
// 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 15 // 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() {}
Hochladen und Testen
- Verdrahten Sie den XPT2046 mit dem ESP32 wie im Abschnitt Touch Get Point beschrieben.
- Stecken Sie das USB-C-Kabel ein.
- Wählen Sie in der Arduino IDE das Board und den Port aus, und drücken Sie Upload.
- Öffnen Sie den Serial Monitor bei 9600 Baud. Folgen Sie den On-Screen-Anweisungen und berühren Sie jede Ecke.
- Notieren Sie die vier gedruckten Werte und verwenden Sie sie in setTouchCalibration() in Ihren anderen Touch-Projekten.
Zeichnungs-API-Referenz
| Methode | Zweck | Verwendung |
|---|---|---|
| initTouchSPI(cs, irq) | Initialisiert den XPT2046-Touch-Controller. | TFT_display.initTouchSPI(14, 27); |
| readTouchRaw(x, y, z) | Liest rohe ADC-Werte, um den Kalibrierungsbereich zu bestimmen. | TFT_display.readTouchRaw(x, y, z); |
| setTouchCalibration(minX,maxX,minY,maxY) | Speichert Kalibrierungskonstanten, damit getTouch() rohe Werte korrekt auf Pixel-Koordinaten abbildet. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
| setTouchInvertX(invert) / setTouchInvertY(invert) | Invertiert die Touch-Achse, wenn X oder Y auf Ihrem spezifischen Panel oder Batch gespiegelt wird. Rufen Sie VOR der Kalibrierung auf, damit die gespeicherten Werte mit Ihrem Panel übereinstimmen. | TFT_display.setTouchInvertY(true); |
Lassen Sie uns bauen - Benutzerdefinierter SPI
Lassen Sie uns auf einem benutzerdefinierten SPI-Bus bauen. Der ESP32 hat zwei Hardware-SPI-Controller: VSPI und HSPI. Das CustomSPI-Beispiel zeigt, wie Sie eine SPIClass-Instanz für den HSPI-Bus erstellen und sie an den Display-Konstruktor übergeben. Dies gibt den VSPI-Bus für andere Peripheriegräte frei, z. B. SD-Karten oder Sensor-Module, die SPI gemeinsam nutzen.
/*
* Dieser ESP32 Code wurde von newbiely.de entwickelt
* Dieser ESP32 Code wird der Öffentlichkeit ohne jegliche Einschränkung zur Verfügung gestellt.
* Für vollständige Anleitungen und Schaltpläne besuchen Sie bitte:
* https://newbiely.de/tutorials/esp32/esp32-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 (ESP32 - VSPI by default)
// =============================================
// TFT pins using VSPI (default SPI on ESP32)
// TFT module ESP32 VSPI
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> GPIO5 (TFT_CS_PIN)
// RESET -> GPIO4 (TFT_RST_PIN)
// DC / RS -> GPIO2 (TFT_DC_PIN)
// SDI / MOSI -> GPIO23 (VSPI MOSI)
// SCK -> GPIO18 (VSPI SCK)
// SDO / MISO -> GPIO19 (VSPI MISO)
// LED -> 3.3V (or any GPIO via initBacklight)
//
// To use HSPI instead, uncomment the HSPI section below and wire:
// MOSI -> GPIO13, SCK -> GPIO14, MISO -> GPIO12
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 5
#define TFT_DC_PIN 2
#define TFT_RST_PIN 4
// Panel resolution in native (portrait) orientation - change to match your module
#define TFT_WIDTH 240
#define TFT_HEIGHT 320
// =============================================
// Select alternate SPI bus (uncomment for your board)
// =============================================
// --- ESP32: use HSPI ---
// SPIClass hspi(HSPI);
// #define MY_SPI &hspi
// --- ESP32: use VSPI (default) ---
#define MY_SPI &SPI
// --- Arduino Giga / Portenta / RP2040: use SPI1 ---
// #define MY_SPI &SPI1
// =============================================
// 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);
// For ESP32 HSPI: optionally remap pins before begin()
// hspi.begin(14, 12, 13, -1); // SCK, MISO, MOSI, SS
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
}
Hochladen und Testen
- Verdrahten Sie das TFT-Display mit den ESP32-HSPI-Pins oder dem benutzerdefinierten SPI-Bus, den Sie im Sketch definieren.
- Stecken Sie das USB-C-Kabel ein.
- Wählen Sie in der Arduino IDE das Board und den Port aus, und drücken Sie Upload.
- Das Display startet auf dem ausgewählten SPI-Bus und zeigt ein Farbbalken-Muster, um den Erfolg zu bestätigen.
Zeichnungs-API-Referenz
| Methode | Zweck | Verwendung |
|---|---|---|
| SPIClass myBus(HSPI) | Erstellt eine SPIClass-Instanz, die an den HSPI-Controller (GPIO14/12/13/15) gebunden ist. | SPIClass HSPI_bus(HSPI); |
| DIYables_ILI9341_SPI(w,h,cs,dc,rst,spi) | Konstruktor, der einen Zeiger auf jede SPIClass akzeptiert. Standardmäßig &SPI (VSPI), wenn weggelassen. | DIYables_ILI9341_SPI tft(240, 320, 5, 2, 4, &HSPI_bus); |
| begin() | Initialisiert das Display auf dem konfigurierten SPI-Bus. | TFT_display.begin(); |
Fehlersuche
| Problem | Ursache | Behebung |
|---|---|---|
| Leerer Bildschirm | Falsche SPI-Pins oder falsche Stromversorgung | Verwenden Sie VSPI-Pins GPIO23/18/19; überprüfen Sie, ob VCC 3,3V ist |
| Verwirrtes Bild | Falscher aktiver Driver | Kommentieren Sie nur den passenden Konstruktor aus |
| Bild versetzt | Breite/Höhe-Nichtübereinstimmung des Konstruktors | Gleichen Sie Werte Ihren tatsächlichen Panel-Abmessungen an |
| Keine Touch-Reaktion | Fehlende Kalibrierungsdaten | Führen Sie das TouchCalibration-Beispiel aus und kopieren Sie die gedruckten Werte |
| Port nicht sichtbar | USB-Treiber fehlt | Installieren Sie CP210x oder CH340 USB-Treiber für Ihr Board |
Plattformunterstützung
Die Bibliothek ist auf der Standard-SPI-API von Arduino aufgebaut und unterstützt alle Arduino-kompatiblen ESP32-Varianten (architectures=*).