ESP32 S3 - Écran tactile TFT LCD ILI9341 ILI9488 ST7789 interface SPI
Construisons un projet qui donne vie à un écran TFT SPI en couleurs complètes sur un ESP32 S3. L'ESP32 S3 est un microcontrôleur double cœur puissant avec Wi-Fi, Bluetooth et de nombreux GPIO — et son bus SPI matériel permet facilement de faire fonctionner un écran TFT haute vitesse aux pleines vitesses prises en charge par le panneau.
Ce que vous allez construire :
- Une connexion filaire entre un ESP32 S3 et un écran TFT SPI.
- Une démonstration de formes utilisant l'API de dessin Adafruit GFX.
- Un exemple d'affichage de texte et de nombres.
- Un visualiseur d'image bitmap lisant depuis la mémoire programme (PROGMEM).
- Un visualiseur d'image bitmap lisant des images depuis une carte SD.
- Une démonstration de police externe personnalisée.
- Un lecteur de coordonnées tactiles utilisant un contrôleur XPT2046.
- Une application de dessin tactile (peinture au doigt sur l'écran).
- Une interface de boutons tactiles interactive.
- Un outil de calibration d'écran tactile.
- Un exemple de bus SPI personnalisé utilisant un bus SPI secondaire sur l'ESP32 S3.
Ce projet couvre les écrans TFT LCD SPI tactiles et non tactiles. Il fonctionne avec des panneaux de 1,3, 1,54, 2,2, 2,4, 2,8, 3,2 et 3,5 pouces pilotés par des puces contrôleur ILI9341, ILI9488 ou ST7789.
Matériel requis
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables ESP32 S3 (ESP32 S3 inclus) | |
| 1 | × | Kit de Capteurs DIYables (18 capteurs/écrans) |
Divulgation : Certains des liens fournis dans cette section sont des liens affiliés Amazon. Nous pouvons recevoir une commission pour tout achat effectué via ces liens, sans coût supplémentaire pour vous. Nous vous remercions de votre soutien.
Qu'est-ce que l'écran TFT SPI ?
Un module TFT SPI associe un écran LCD couleur à un circuit intégré pilote qui accepte des commandes de dessin via un bus SPI à 4 fils. La bibliothèque DIYables_TFT_SPI prend en charge trois puces contrôleur courantes, chacune offrant une profondeur de couleur et des caractéristiques de vitesse différentes.
Caractéristiques principales
- ILI9341 - couleur RGB565 16 bits, jusqu'à 40 MHz SPI.
- ILI9488 - couleur RGB666 18 bits via SPI, jusqu'à 24 MHz.
- ST7789 - couleur RGB565 16 bits, jusqu'à 40 MHz SPI.
Recommandation : Si vous n'avez pas encore acheté d'écran, nous recommandons le pilote ST7789. Il est largement disponible, fonctionne à pleine vitesse SPI de 40 MHz, et constitue le choix le plus simple pour les nouveaux projets.
Le dessin est géré via l'API Adafruit GFX, qui inclut des formes, du texte, des polices personnalisées et une sortie bitmap.
Remarque : L'ESP32 S3 utilise une logique 3,3V. La plupart des modules TFT SPI fonctionnent en 3,3V. Vérifiez la spécification de tension de votre module avant de câbler.
Brochage
La plupart des écrans TFT LCD SPI exposent les broches suivantes, réparties entre le contrôleur d'affichage, le slot de carte SD optionnel et le contrôleur tactile XPT2046 optionnel.
Broches de l'écran :
| Broche | Fonction |
|---|---|
| VCC | Alimentation |
| GND | Masse |
| CS | Chip Select — mis à l'état bas pour sélectionner l'écran sur le bus SPI |
| DC / RS | Sélection Données / Commande — haut pour les données de pixel, bas pour les commandes |
| RST | Réinitialisation matérielle — optionnel ; relier à 3,3V si non utilisé |
| MOSI / SDI / SDA | Entrée de données SPI (MCU → écran) |
| SCK / CLK | Horloge SPI |
| MISO / SDO | Sortie de données SPI (écran → MCU) — optionnel pour un usage affichage seul |
| LED / BL / BLK | Alimentation du rétroéclairage — connecter à 3,3V ou à une broche PWM pour la gradation |
Broches de la carte SD (si votre application a besoin d'accéder à la carte SD) :
| Broche | Fonction |
|---|---|
| SD_CS / TF_CS | Chip Select de la carte SD |
| MOSI / SDI | MOSI — données du MCU vers la carte SD |
| SCK / CLK | SCK — horloge SPI |
| MISO / SDO | MISO — données de la carte SD vers le MCU |
Pour les écrans TFT qui prennent en charge le tactile, il existe des broches tactiles supplémentaires (si votre application utilise la fonction tactile et que l'écran la prend en charge) :
| Broche | Fonction |
|---|---|
| T_CS | Chip Select du contrôleur tactile |
| T_CLK | SCK — horloge SPI |
| T_DIN | MOSI — données du MCU vers le contrôleur tactile |
| T_DO | MISO — données du contrôleur tactile vers le MCU |
| T_IRQ | Interruption tactile — optionnel ; signale quand l'écran est touché |
Remarque : Certains modules d'affichage non tactiles exposent également des broches T_CS, T_CLK, T_DIN, T_DO et T_IRQ. Elles sont non fonctionnelles sur ces cartes — le circuit intégré du contrôleur tactile n'est pas monté. Elles apparaissent parce que le circuit imprimé réutilise la même disposition que la version tactile pour réduire les variantes de fabrication.
Schéma de câblage
Remarque — SDO (MISO) est optionnel : La ligne SDO (MISO) ne transporte que des données de l'écran vers la carte. Aucun exemple de code de ce tutoriel ne lit depuis l'écran, cette broche peut donc rester non connectée. Sur les modules où le contrôleur tactile partage le même bus SPI, une ligne SDO connectée peut interférer avec la communication, il est donc recommandé de la laisser non connectée.
Sans tactile
Connectez MOSI à GPIO11, SCK à GPIO12, MISO à GPIO13 sur l'ESP32 S3. CS, DC et RST peuvent être n'importe quel GPIO disponible — GPIO1, GPIO42, GPIO2 sont utilisés dans les exemples.
Écran :
| Broche TFT | Broche ESP32 S3 | Description |
|---|---|---|
| VCC | 3.3V | Alimentation (3,3V uniquement) |
| GND | GND | Masse |
| CS | GPIO1 | Chip Select |
| DC / RS | GPIO42 | Sélection Données / Commande |
| RST | GPIO2 | Réinitialisation (optionnel) |
| MOSI / SDI | GPIO11 | MOSI SPI matériel |
| SCK | GPIO12 | Horloge SPI matérielle |
| MISO / SDO | GPIO13 | MISO SPI matériel (optionnel) |
| LED / BL | 3.3V | Alimentation du rétroéclairage |
Carte SD (si votre application a besoin d'accéder à la carte SD) :
| Broche SD | Broche ESP32 S3 | Description |
|---|---|---|
| SD_CS / TF_CS | tout GPIO libre | Chip Select de la carte SD |
| MOSI / SDI | GPIO11 | Partagé avec le MOSI de l'écran (GPIO11) |
| SCK / CLK | GPIO12 | Partagé avec le SCK de l'écran (GPIO12) |
| MISO / SDO | GPIO13 | Partagé avec le MISO de l'écran (GPIO13) |
Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.
Avec tactile
Connectez le contrôleur tactile XPT2046 au bus SPI de l'ESP32 S3, en partageant GPIO11, GPIO12 et GPIO13 avec l'écran.
Écran :
| Broche TFT | Broche ESP32 S3 | Description |
|---|---|---|
| VCC | 3.3V | Alimentation (3,3V uniquement) |
| GND | GND | Masse |
| CS | GPIO1 | Chip Select |
| DC / RS | GPIO42 | Sélection Données / Commande |
| RST | GPIO2 | Réinitialisation (optionnel) |
| MOSI / SDI | GPIO11 | MOSI SPI matériel |
| SCK | GPIO12 | Horloge SPI matérielle |
| MISO / SDO | GPIO13 | MISO SPI matériel (optionnel) |
| LED / BL | 3.3V | Alimentation du rétroéclairage |
Contrôleur tactile (si votre application utilise la fonction tactile et que l'écran la prend en charge) :
| Broche tactile | Broche ESP32 S3 | Description |
|---|---|---|
| T_CS | GPIO21 | Chip Select tactile |
| T_IRQ | tout GPIO libre | Interruption tactile (optionnel) |
| T_DIN | GPIO11 | Partagé avec le MOSI de l'écran (GPIO11) |
| T_CLK | GPIO12 | Partagé avec le SCK de l'écran (GPIO12) |
| T_DO | GPIO13 | Partagé avec le MISO de l'écran (GPIO13) |
Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.
Si votre MCU possède deux interfaces SPI matérielles ou plus, vous pouvez assigner chaque périphérique (écran, carte SD, contrôleur tactile) à son propre bus SPI dédié. Si votre MCU ne possède qu'une seule interface SPI matérielle, les trois périphériques partagent les mêmes trois lignes de données (MOSI, SCK, MISO). Chaque périphérique possède sa propre broche CS, donc un seul est actif à la fois. La bibliothèque DIYables_TFT_SPI gère à la fois l'écran et le contrôleur tactile XPT2046 via une seule API — aucune bibliothèque SPI distincte n'est nécessaire pour le côté tactile.
Installation de la bibliothèque
- Connectez la carte ESP32 S3 à votre ordinateur via son port USB-C.
- Ouvrez Arduino IDE. Sélectionnez votre variante de carte ESP32 S3 dans le menu des cartes et choisissez le bon port COM.
- Ouvrez le panneau Libraries.
- Recherchez "DIYables_TFT_SPI". Repérez l'entrée DIYables.
- Cliquez sur Install et acceptez toutes les installations de dépendances.
- Search for DIYables TFT SPI created by DIYables.io and click the Install button.
1
void setup() {
Base du projet
Le code suivant fournit le croquis de base pour tout projet TFT ESP32 S3 avec cette bibliothèque. Il initialise l'écran sur le bus SPI matériel et définit l'orientation de l'écran avant que la boucle de dessin ne commence.
#include <DIYables_TFT_SPI.h>
#define TFT_CS_PIN 1
#define TFT_DC_PIN 42
#define TFT_RST_PIN 2
// 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
}
Construisons - Dessiner des formes
L'exemple DrawShapes dessine toute la gamme de primitives Adafruit GFX : cercles, triangles, rectangles, rectangles arrondis et lignes. Le code suivant parcourt chaque type de forme en utilisant des couleurs contrastées afin que vous puissiez vérifier chaque fonction de dessin d'un coup d'œil.
/*
* Ce code ESP32 S3 a été développé par newbiely.fr
* Ce code ESP32 S3 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/esp32-s3/esp32-s3-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 S3)
// =============================================
// TFT pins (always required)
// TFT module ESP32 S3
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> GPIO1 (TFT_CS_PIN)
// RESET -> GPIO2 (TFT_RST_PIN)
// DC / RS -> GPIO42 (TFT_DC_PIN)
// SDI / MOSI -> GPIO11 (hardware SPI MOSI)
// SCK -> GPIO12 (hardware SPI SCK)
// SDO / MISO -> GPIO13 (only needed when reading from display)
// LED -> 3.3V (or any GPIO via initBacklight)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 1
#define TFT_DC_PIN 42
#define TFT_RST_PIN 2
// 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);
}
Téléverser et tester
- Câblez le module TFT à l'ESP32 S3 en utilisant le tableau ci-dessus.
- Branchez le câble USB-C.
- Dans Arduino IDE, sélectionnez la carte et le port, collez le code, et appuyez sur Upload.
- Après le téléversement, l'écran se remplit d'une boucle de formes colorées.
Référence de l'API de dessin
| Méthode | Objectif | Utilisation |
|---|---|---|
| begin() | Initialise l'écran. | TFT_display.begin(); |
| setRotation(r) | Définit l'orientation de l'écran de 0 à 3. | TFT_display.setRotation(1); |
| fillScreen(color) | Remplit tout l'écran d'une seule couleur. | TFT_display.fillScreen(BLACK); |
| colorRGB(r,g,b) | Construit une valeur de couleur 16 bits. | colorRGB(255,128,0) |
| fillCircle(x,y,r,color) | Cercle plein rempli. | TFT_display.fillCircle(120,160,60,RED); |
| fillRect(x,y,w,h,color) | Rectangle plein. | TFT_display.fillRect(0,0,100,50,BLUE); |
| drawLine(x0,y0,x1,y1,color) | Ligne droite entre deux points. | TFT_display.drawLine(0,0,320,240,WHITE); |
Construisons - Afficher du texte et des nombres
L'exemple ShowTextAndNumber utilise le moteur de texte Adafruit GFX pour afficher des chaînes et des valeurs numériques à des tailles et des couleurs réglables. Le code suivant montre plusieurs tailles de police et combinaisons de couleurs afin que vous puissiez créer des tableaux de bord lisibles à l'écran.
/*
* Ce code ESP32 S3 a été développé par newbiely.fr
* Ce code ESP32 S3 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/esp32-s3/esp32-s3-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 S3)
// =============================================
// TFT pins (always required)
// TFT module ESP32 S3
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> GPIO1 (TFT_CS_PIN)
// RESET -> GPIO2 (TFT_RST_PIN)
// DC / RS -> GPIO42 (TFT_DC_PIN)
// SDI / MOSI -> GPIO11 (hardware SPI MOSI)
// SCK -> GPIO12 (hardware SPI SCK)
// SDO / MISO -> GPIO13 (only needed when reading from display)
// LED -> 3.3V (or any GPIO via initBacklight)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 1
#define TFT_DC_PIN 42
#define TFT_RST_PIN 2
// 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() {
}
Téléverser et tester
- Câblez et téléversez comme ci-dessus.
- L'écran affiche plusieurs lignes de texte et de nombres dans différentes couleurs et tailles.
Référence de l'API de dessin
| Méthode | Objectif | Utilisation |
|---|---|---|
| setTextColor(color) | Définit la couleur de premier plan du texte. | TFT_display.setTextColor(WHITE); |
| setTextSize(size) | Met à l'échelle le texte. Taille 1 = 6×8 px, taille 2 = 12×16 px. | TFT_display.setTextSize(2); |
| setCursor(x, y) | Place le curseur de texte au pixel (x, y). | TFT_display.setCursor(10, 20); |
| print(value) | Affiche une chaîne ou un nombre au niveau du curseur. | TFT_display.print("ESP32 S3!"); |
| println(value) | Affiche puis fait avancer le curseur à la ligne suivante. | TFT_display.println(42); |
Construisons - Dessiner une image
Construisons un visualiseur d'image. L'exemple DrawImage charge un bitmap RGB565 en couleurs complètes depuis la flash programme de l'ESP32 S3 et le rend sur l'écran. Les données de pixel sont déclarées dans bitmap.h en tant que tableau const uint16_t avec PROGMEM. Sur l'ESP32 S3, les données PROGMEM sont mappées depuis la flash dans l'espace d'adressage virtuel, donc l'image se dessine sans consommer de RAM de tas.
Copiez bitmap.h dans le dossier du croquis avant de compiler.
/*
* Ce code ESP32 S3 a été développé par newbiely.fr
* Ce code ESP32 S3 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/esp32-s3/esp32-s3-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 S3)
// =============================================
// TFT pins (always required)
// TFT module ESP32 S3
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> GPIO1 (TFT_CS_PIN)
// RESET -> GPIO2 (TFT_RST_PIN)
// DC / RS -> GPIO42 (TFT_DC_PIN)
// SDI / MOSI -> GPIO11 (hardware SPI MOSI)
// SCK -> GPIO12 (hardware SPI SCK)
// SDO / MISO -> GPIO13 (only needed when reading from display)
// LED -> 3.3V (or any GPIO via initBacklight)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 1
#define TFT_DC_PIN 42
#define TFT_RST_PIN 2
// 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);
}
Téléverser et tester
- Placez bitmap.h dans le même dossier que le croquis.
- Câblez le module TFT à l'ESP32 S3 comme indiqué ci-dessus (MOSI=GPIO11, SCK=GPIO12, MISO=GPIO13, CS=GPIO1, DC=GPIO42, RST=GPIO2). Utilisez 3,3V pour VCC.
- Branchez le câble USB-C.
- Dans Arduino IDE, sélectionnez la carte et le port, appuyez sur Upload.
- L'écran affiche l'image bitmap depuis la flash.
Référence de l'API de dessin
| Méthode | Objectif | Utilisation |
|---|---|---|
| drawRGBBitmap(x,y,bitmap,w,h) | Dessine un bitmap RGB565 PROGMEM avec son coin supérieur gauche en (x, y). | TFT_display.drawRGBBitmap(0, 0, myImage, 240, 320); |
| fillScreen(color) | Efface l'écran avant de dessiner l'image. | TFT_display.fillScreen(BLACK); |
Construisons - Dessiner une image depuis la carte SD
Construisons un visualiseur d'image sur carte SD. L'exemple DrawImageSDcard lit une image binaire RGB565 brute depuis une carte micro SD et transmet les données de pixel à l'écran par blocs. L'ESP32 S3 gère à la fois la carte SD et l'écran sur le même bus SPI, en commutant les lignes CS pour arbitrer entre eux.
Câblez le module SD sur GPIO11 (MOSI), GPIO12 (SCK), GPIO13 (MISO). Définissez une broche CS distincte pour le module SD sous le nom SD_CS_PIN dans le croquis.
/*
* Ce code ESP32 S3 a été développé par newbiely.fr
* Ce code ESP32 S3 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/esp32-s3/esp32-s3-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 S3)
// =============================================
// TFT + SD module pins
// TFT + SD module ESP32 S3
// ----------------------- ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// TFT CS -> GPIO1 (TFT_CS_PIN)
// TFT RESET -> GPIO2 (TFT_RST_PIN)
// TFT DC / RS -> GPIO42 (TFT_DC_PIN)
// SD CS -> GPIO14 (SD_CS)
// SDI / MOSI (shared) -> GPIO11 (hardware SPI MOSI)
// SDO / MISO (shared) -> GPIO13 (hardware SPI MISO)
// SCK (shared) -> GPIO12 (hardware SPI SCK)
// LED -> 3.3V (or any GPIO via initBacklight)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 1
#define TFT_DC_PIN 42
#define TFT_RST_PIN 2
// 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() {
}
Téléverser et tester
- Câblez le module SD au bus SPI de l'ESP32 S3. Partagez GPIO11/12/13 avec l'écran. Connectez le CS de la carte SD à la broche définie comme SD_CS_PIN.
- Copiez un fichier image binaire RGB565 brut à la racine de la carte SD. Les dimensions doivent correspondre à votre panneau.
- Branchez le câble USB-C.
- Dans Arduino IDE, sélectionnez la carte et le port, appuyez sur Upload.
- L'écran affiche l'image diffusée depuis la carte SD.
Référence de l'API de dessin
| Méthode | Objectif | Utilisation |
|---|---|---|
| startWrite() | Ouvre une session d'écriture SPI directe et active le CS de l'écran. | TFT_display.startWrite(); |
| setAddrWindow(x0,y0,x1,y1) | Définit la région rectangulaire d'écriture de pixels sur le panneau. | TFT_display.setAddrWindow(0, 0, 239, 319); |
| pushColors(buf, len) | Envoie un tampon de valeurs de pixel RGB565 à l'écran. | TFT_display.pushColors(buf, 512); |
| endWrite() | Ferme la session SPI et libère le CS de l'écran. | TFT_display.endWrite(); |
Construisons - Utiliser une police externe
Construisons un affichage de texte personnalisé. L'exemple UseExternalFont remplace la police par défaut de 5×7 pixels par une police contour plus nette compatible Adafruit GFX. Un seul appel à setFont() suffit pour améliorer la typographie. Appeler setFont(NULL) restaure la police intégrée d'origine à tout moment.
/*
* Ce code ESP32 S3 a été développé par newbiely.fr
* Ce code ESP32 S3 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/esp32-s3/esp32-s3-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 S3)
// =============================================
// TFT pins (always required)
// TFT module ESP32 S3
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> GPIO1 (TFT_CS_PIN)
// RESET -> GPIO2 (TFT_RST_PIN)
// DC / RS -> GPIO42 (TFT_DC_PIN)
// SDI / MOSI -> GPIO11 (hardware SPI MOSI)
// SCK -> GPIO12 (hardware SPI SCK)
// SDO / MISO -> GPIO13 (only needed when reading from display)
// LED -> 3.3V (or any GPIO via initBacklight)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 1
#define TFT_DC_PIN 42
#define TFT_RST_PIN 2
// 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() {
}
Téléverser et tester
- Câblez le module TFT à l'ESP32 S3 comme indiqué ci-dessus.
- Branchez le câble USB-C.
- Dans Arduino IDE, sélectionnez la carte et le port, appuyez sur Upload.
- L'écran affiche du texte dans la police personnalisée.
Référence de l'API de dessin
| Méthode | Objectif | Utilisation |
|---|---|---|
| setFont(&FontName) | Active une police personnalisée compatible GFX. Passez NULL pour restaurer la police intégrée 5×7. | TFT_display.setFont(&FreeSans12pt7b); |
| setCursor(x, y) | Positionne le curseur de texte à la coordonnée de pixel donnée. | TFT_display.setCursor(10, 40); |
| setTextColor(color) | Définit la couleur de premier plan pour le texte suivant. | TFT_display.setTextColor(WHITE); |
| print(text) | Affiche une chaîne au niveau du curseur en utilisant la police active. | TFT_display.print("ESP32 S3 Project"); |
Construisons - Obtenir un point tactile
Construisons un lecteur de coordonnées tactiles. L'exemple TouchGetPoint initialise le XPT2046 sur le bus SPI de l'ESP32 S3 et affiche les valeurs ADC brutes sur le moniteur série chaque fois que l'écran est pressé. C'est la première étape vers un projet sensible au tactile : comprendre la plage de valeurs brutes que produit votre panneau.
Câblage (tous les signaux en 3,3V) :
| Broche tactile | Broche ESP32 S3 | Description |
|---|---|---|
| T_CLK | GPIO12 | SCK — partagé avec l'écran |
| T_DIN | GPIO11 | MOSI — partagé avec l'écran |
| T_DO | GPIO13 | MISO — partagé avec l'écran |
| T_CS | GPIO21 | Chip Select tactile |
| T_IRQ | GPIO45 | Interruption tactile (optionnel) |
/*
* Ce code ESP32 S3 a été développé par newbiely.fr
* Ce code ESP32 S3 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/esp32-s3/esp32-s3-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 S3)
// =============================================
// TFT pins (always required)
// TFT module ESP32 S3
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> GPIO1 (TFT_CS_PIN)
// RESET -> GPIO2 (TFT_RST_PIN)
// DC / RS -> GPIO42 (TFT_DC_PIN)
// SDI / MOSI -> GPIO11 (hardware SPI MOSI)
// SCK -> GPIO12 (hardware SPI SCK)
// SDO / MISO -> GPIO13 (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 ESP32 S3
// ------------ ---------------------------------
// T_CS -> GPIO21 (TOUCH_CS_PIN)
// T_IRQ -> GPIO45 (TOUCH_IRQ_PIN, optional - use -1 to skip)
// T_CLK -> GPIO12 (shared with display SCK)
// T_DIN -> GPIO11 (shared with display MOSI)
// T_DO -> GPIO13 (shared with display MISO)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 1
#define TFT_DC_PIN 42
#define TFT_RST_PIN 2
// 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 21 // 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);
}
}
Téléverser et tester
- Câblez le XPT2046 au bus SPI de l'ESP32 S3, en partageant GPIO11/12/13 avec l'écran. T_CS→GPIO21, T_IRQ→GPIO45.
- Branchez le câble USB-C.
- Dans Arduino IDE, sélectionnez la carte et le port, appuyez sur Upload.
- Ouvrez le moniteur série à 9600 bauds. Touchez l'écran pour voir les valeurs brutes X, Y et Z affichées.
Référence de l'API de dessin
| Méthode | Objectif | Utilisation |
|---|---|---|
| initTouchSPI(cs, irq) | Initialise le XPT2046 sur le bus SPI partagé. Passez -1 pour irq si la broche d'interruption n'est pas connectée. | TFT_display.initTouchSPI(21, 45); |
| readTouchRaw(x, y, z) | Renvoie les valeurs ADC brutes du contrôleur sans calibration appliquée. Renvoie true en cas de pression. | TFT_display.readTouchRaw(x, y, z); |
Construisons - Dessin tactile
Construisons une application de peinture au doigt. L'exemple TouchDraw combine le contrôleur tactile XPT2046 avec l'API de dessin de l'écran. Chaque position tactile est convertie en une coordonnée de pixel calibrée et un petit cercle plein y est dessiné, créant un trait au fur et à mesure que le doigt se déplace.
/*
* Ce code ESP32 S3 a été développé par newbiely.fr
* Ce code ESP32 S3 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/esp32-s3/esp32-s3-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 S3)
// =============================================
// TFT pins (always required)
// TFT module ESP32 S3
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> GPIO1 (TFT_CS_PIN)
// RESET -> GPIO2 (TFT_RST_PIN)
// DC / RS -> GPIO42 (TFT_DC_PIN)
// SDI / MOSI -> GPIO11 (hardware SPI MOSI)
// SCK -> GPIO12 (hardware SPI SCK)
// SDO / MISO -> GPIO13 (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 ESP32 S3
// ------------ ---------------------------------
// T_CS -> GPIO21 (TOUCH_CS_PIN)
// T_IRQ -> GPIO45 (TOUCH_IRQ_PIN, optional - use -1 to skip)
// T_CLK -> GPIO12 (shared with display SCK)
// T_DIN -> GPIO11 (shared with display MOSI)
// T_DO -> GPIO13 (shared with display MISO)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 1
#define TFT_DC_PIN 42
#define TFT_RST_PIN 2
// 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 21 // 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);
}
}
Téléverser et tester
- Câblez le XPT2046 à l'ESP32 S3 comme décrit dans la section Obtenir un point tactile ci-dessus.
- Branchez le câble USB-C.
- Dans Arduino IDE, sélectionnez la carte et le port, appuyez sur Upload.
- Faites glisser un doigt sur l'écran pour peindre.
Référence de l'API de dessin
| Méthode | Objectif | Utilisation |
|---|---|---|
| initTouchSPI(cs, irq) | Initialise le XPT2046 sur le bus SPI partagé. | TFT_display.initTouchSPI(21, 45); |
| setTouchCalibration(minX,maxX,minY,maxY) | Convertit les valeurs ADC brutes en coordonnées de pixel d'écran. Obtenez les quatre valeurs depuis l'exemple TouchCalibration. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
| setTouchInvertX(invert) / setTouchInvertY(invert) | Inverse l'axe tactile lorsque X ou Y est inversé sur votre panneau ou lot spécifique. Appelez AVANT setTouchCalibration(). | TFT_display.setTouchInvertY(true); |
| getTouch(x, y) | Renvoie les coordonnées tactiles calibrées en pixels d'écran. Renvoie true tant que l'écran est pressé. | if (TFT_display.getTouch(x, y)) { ... } |
| fillCircle(x, y, r, color) | Dessine un petit point à la position tactile pour construire le dessin. | TFT_display.fillCircle(x, y, 3, RED); |
Construisons - Bouton tactile
Construisons un panneau de boutons tactiles. L'exemple TouchButton dessine des boutons rectangulaires comme des régions colorées sur l'écran, puis interroge les coordonnées tactiles à chaque itération de boucle. Lorsqu'un point tactile tombe dans les limites d'un bouton, le bouton se met en surbrillance et l'action se déclenche — c'est le modèle central pour toute interface tactile ESP32 S3.
T_IRQ est optionnel. Passez -1 comme argument irq pour utiliser le mode d'interrogation sans la broche d'interruption.
/*
* Ce code ESP32 S3 a été développé par newbiely.fr
* Ce code ESP32 S3 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/esp32-s3/esp32-s3-tft-lcd-touch-display-spi
*/
/*
Touch Button Press/Release Example
------------------------------------
This example shows how to detect press and release events on a rectangular
button using a DIYables SPI TFT display with a 4-wire resistive touch panel.
When you touch inside the button, it changes colour and shows "PRESSED".
When you release, it returns to its original state.
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 S3)
// =============================================
// TFT pins (always required)
// TFT module ESP32 S3
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> GPIO1 (TFT_CS_PIN)
// RESET -> GPIO2 (TFT_RST_PIN)
// DC / RS -> GPIO42 (TFT_DC_PIN)
// SDI / MOSI -> GPIO11 (hardware SPI MOSI)
// SCK -> GPIO12 (hardware SPI SCK)
// SDO / MISO -> GPIO13 (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 ESP32 S3
// ------------ ---------------------------------
// T_CS -> GPIO21 (TOUCH_CS_PIN)
// T_IRQ -> -1 (TOUCH_IRQ_PIN, optional - use -1 to skip)
// T_CLK -> GPIO12 (shared with display SCK)
// T_DIN -> GPIO11 (shared with display MOSI)
// T_DO -> GPIO13 (shared with display MISO)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 1
#define TFT_DC_PIN 42
#define TFT_RST_PIN 2
// 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 21 // 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 BLACK DIYables_TFT_SPI::colorRGB( 0, 0, 0)
#define WHITE DIYables_TFT_SPI::colorRGB(255, 255, 255)
#define GRAY DIYables_TFT_SPI::colorRGB(128, 128, 128)
#define RED DIYables_TFT_SPI::colorRGB(255, 0, 0)
#define BUTTON_X 30
#define BUTTON_Y 100
#define BUTTON_W 180
#define BUTTON_H 60
#define DEBOUNCE_DELAY 50
bool lastPressed = false;
bool stablePressed = false;
unsigned long lastDebounceTime = 0;
void drawButton(bool pressed) {
uint16_t bg = pressed ? GRAY : RED;
TFT_display.fillRect(BUTTON_X, BUTTON_Y, BUTTON_W, BUTTON_H, bg);
TFT_display.drawRect(BUTTON_X, BUTTON_Y, BUTTON_W, BUTTON_H, BLACK);
TFT_display.setTextColor(WHITE, bg);
TFT_display.setTextSize(3);
TFT_display.setCursor(BUTTON_X + 10, BUTTON_Y + 16);
TFT_display.print(pressed ? "PRESSED" : " PRESS ");
}
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);
drawButton(false);
}
void loop() {
int x, y;
bool pressed = false;
if (TFT_display.getTouch(x, y)) {
if (x >= BUTTON_X && x < (BUTTON_X + BUTTON_W) &&
y >= BUTTON_Y && y < (BUTTON_Y + BUTTON_H)) {
pressed = true;
}
}
if (pressed != lastPressed) {
lastDebounceTime = millis();
}
lastPressed = pressed;
if ((millis() - lastDebounceTime) > DEBOUNCE_DELAY) {
if (pressed != stablePressed) {
stablePressed = pressed;
drawButton(stablePressed);
Serial.println(stablePressed ? "Button PRESSED" : "Button RELEASED");
}
}
}
Téléverser et tester
- Connectez T_CS à GPIO21. T_IRQ peut rester non connecté.
- Branchez le câble USB-C.
- Dans Arduino IDE, sélectionnez la carte et le port, appuyez sur Upload.
- Appuyez sur chaque bouton de l'écran et vérifiez qu'il se met en surbrillance et déclenche son action.
Référence de l'API de dessin
| Méthode | Objectif | Utilisation |
|---|---|---|
| initTouchSPI(cs, irq) | Initialise le XPT2046. Passez -1 pour irq afin de désactiver la broche d'interruption. | TFT_display.initTouchSPI(21, -1); |
| setTouchCalibration(minX,maxX,minY,maxY) | Applique la calibration afin que getTouch() renvoie des coordonnées de pixel précises. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
| setTouchInvertX(invert) / setTouchInvertY(invert) | Inverse l'axe tactile lorsque X ou Y est inversé sur votre panneau ou lot spécifique. Appelez AVANT setTouchCalibration(). | TFT_display.setTouchInvertY(true); |
| getTouch(x, y) | Obtient la position tactile calibrée actuelle. Renvoie true tant que pressé. | if (TFT_display.getTouch(x, y)) { ... } |
| fillRect(x, y, w, h, color) | Dessine un bouton comme un rectangle plein rempli. | TFT_display.fillRect(10, 10, 120, 60, BLUE); |
Construisons - Calibration tactile
Construisons un outil de calibration. L'exemple TouchCalibration vous guide à travers la mesure des extrêmes ADC bruts de votre panneau XPT2046. Touchez chaque coin de l'écran comme demandé et notez les valeurs minimales et maximales X et Y affichées. Ces quatre nombres sont les constantes pour setTouchCalibration() dans tous vos autres projets tactiles.
/*
* Ce code ESP32 S3 a été développé par newbiely.fr
* Ce code ESP32 S3 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/esp32-s3/esp32-s3-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 S3)
// =============================================
// TFT pins (always required)
// TFT module ESP32 S3
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> GPIO1 (TFT_CS_PIN)
// RESET -> GPIO2 (TFT_RST_PIN)
// DC / RS -> GPIO42 (TFT_DC_PIN)
// SDI / MOSI -> GPIO11 (hardware SPI MOSI)
// SCK -> GPIO12 (hardware SPI SCK)
// SDO / MISO -> GPIO13 (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 ESP32 S3
// ------------ ---------------------------------
// T_CS -> GPIO21 (TOUCH_CS_PIN)
// T_IRQ -> GPIO45 (TOUCH_IRQ_PIN, optional - use -1 to skip)
// T_CLK -> GPIO12 (shared with display SCK)
// T_DIN -> GPIO11 (shared with display MOSI)
// T_DO -> GPIO13 (shared with display MISO)
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 1
#define TFT_DC_PIN 42
#define TFT_RST_PIN 2
// 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 21 // 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() {}
Téléverser et tester
- Câblez le XPT2046 à l'ESP32 S3 comme décrit dans la section Obtenir un point tactile.
- Branchez le câble USB-C.
- Dans Arduino IDE, sélectionnez la carte et le port, appuyez sur Upload.
- Ouvrez le moniteur série à 9600 bauds. Suivez les invites à l'écran et touchez chaque coin.
- Notez les quatre valeurs affichées et utilisez-les dans setTouchCalibration() dans vos autres projets tactiles.
Référence de l'API de dessin
| Méthode | Objectif | Utilisation |
|---|---|---|
| initTouchSPI(cs, irq) | Initialise le contrôleur tactile XPT2046. | TFT_display.initTouchSPI(21, 45); |
| readTouchRaw(x, y, z) | Lit les valeurs ADC brutes pour déterminer la plage de calibration. | TFT_display.readTouchRaw(x, y, z); |
| setTouchCalibration(minX,maxX,minY,maxY) | Stocke les constantes de calibration afin que getTouch() convertisse correctement les valeurs brutes en coordonnées de pixel. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
| setTouchInvertX(invert) / setTouchInvertY(invert) | Inverse l'axe tactile lorsque X ou Y est inversé sur votre panneau ou lot spécifique. Appelez AVANT d'exécuter la calibration afin que les valeurs stockées correspondent à votre panneau. | TFT_display.setTouchInvertY(true); |
Construisons - SPI personnalisé
Construisons sur un bus SPI personnalisé. L'ESP32 S3 prend en charge plusieurs contrôleurs SPI matériels. L'exemple CustomSPI montre comment créer une instance SPIClass pour un bus SPI secondaire et la passer au constructeur de l'écran. Cela libère le bus SPI principal pour d'autres périphériques comme des cartes SD ou des modules de capteur qui partagent le SPI.
/*
* Ce code ESP32 S3 a été développé par newbiely.fr
* Ce code ESP32 S3 est mis à disposition du public sans aucune restriction.
* Pour des instructions complètes et des schémas de câblage, veuillez visiter:
* https://newbiely.fr/tutorials/esp32-s3/esp32-s3-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 S3: FSPI / HSPI
- 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 S3 - FSPI by default)
// =============================================
// TFT pins using FSPI (default SPI on ESP32 S3)
// TFT module ESP32 S3 FSPI
// ------------ ---------------------------------
// VCC -> 3.3V (NOT 5V!)
// GND -> GND
// CS -> GPIO1 (TFT_CS_PIN)
// RESET -> GPIO2 (TFT_RST_PIN)
// DC / RS -> GPIO42 (TFT_DC_PIN)
// SDI / MOSI -> GPIO11 (FSPI MOSI)
// SCK -> GPIO12 (FSPI SCK)
// SDO / MISO -> GPIO13 (FSPI MISO)
// LED -> 3.3V (or any GPIO via initBacklight)
//
// To use HSPI instead, uncomment the HSPI section below. On the ESP32 S3 the
// HSPI bus has no fixed pins - pick any free GPIOs and pass them to hspi.begin().
// =============================================
// =============================================
// SPI pin definitions (adjust for your board)
// =============================================
#define TFT_CS_PIN 1
#define TFT_DC_PIN 42
#define TFT_RST_PIN 2
// 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 S3: use HSPI ---
// SPIClass hspi(HSPI);
// #define MY_SPI &hspi
// --- ESP32 S3: use FSPI (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 S3 HSPI: set the bus pins before begin()
// hspi.begin(4, 5, 6, -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
}
Téléverser et tester
- Câblez l'écran TFT aux broches de l'ESP32 S3 correspondant au bus SPI personnalisé que vous définissez dans le croquis.
- Branchez le câble USB-C.
- Dans Arduino IDE, sélectionnez la carte et le port, appuyez sur Upload.
- L'écran démarre sur le bus SPI sélectionné et affiche un motif de barres colorées pour confirmer le succès.
Référence de l'API de dessin
| Méthode | Objectif | Utilisation |
|---|---|---|
| SPIClass myBus(HSPI) | Crée une instance SPIClass liée à un contrôleur SPI secondaire. | SPIClass SPI2_bus(HSPI); |
| DIYables_ILI9341_SPI(w,h,cs,dc,rst,spi) | Constructeur acceptant un pointeur vers n'importe quelle SPIClass. Par défaut &SPI si omis. | DIYables_ILI9341_SPI tft(240, 320, 10, 9, 8, &SPI2_bus); |
| begin() | Initialise l'écran sur le bus SPI configuré. | TFT_display.begin(); |
Étapes rapides
- Nouveau sur l'ESP32 S3 ? Suivez d'abord notre guide ESP32 S3 - Premiers pas.
- Installez la bibliothèque DIYables_TFT_SPI via le panneau Libraries de l'Arduino IDE.
- Câblez l'écran TFT aux broches SPI de l'ESP32 S3 en utilisant le tableau de câblage pour votre cas d'usage (avec ou sans tactile).
- Ouvrez le croquis du sous-projet que vous voulez construire et vérifiez que les définitions de broches correspondent à votre câblage.
- Sélectionnez la bonne ligne de constructeur pour votre puce pilote (ILI9341, ILI9488, ou ST7789) et commentez les autres.
- Sélectionnez la carte ESP32 S3 et le bon port COM dans Arduino IDE, puis appuyez sur Upload.
- Pour les projets tactiles, exécutez d'abord l'exemple TouchCalibration et notez les quatre valeurs affichées avant de charger votre croquis principal.
- Astuce pro : Partagez GPIO11, GPIO12 et GPIO13 entre l'écran, la carte SD et le contrôleur tactile — la bibliothèque gère automatiquement l'arbitrage du bus via des broches CS individuelles.
Sortie du moniteur série
Ouvrez le moniteur série à 9600 bauds pour les croquis avec tactile. Sortie attendue pendant une session tactile :
8
Serial.println("Hello World!");
Message (Enter to send message to 'ESP32S3 Dev Module' on 'COM15')
New Line
9600 baud
[2026-01-15 10:23:41] Touch detected: X=1842, Y=2104, Z=1024
[2026-01-15 10:23:41] Calibrated: x=147, y=195
[2026-01-15 10:23:43] Touch detected: X=3201, Y=874, Z=1156
[2026-01-15 10:23:43] Calibrated: x=288, y=62
Applications
Les écrans TFT SPI associés à l'ESP32 S3 sont bien adaptés aux projets embarqués nécessitant une sortie visuelle compacte et en couleurs riches. Voici quelques usages pratiques :
- Tableau de bord : Affichez des relevés de capteurs en temps réel comme la température, l'humidité et la pression sur un écran de jauges à code couleur.
- Moniteur IoT : Affichez des données en direct depuis des sujets MQTT ou des API REST, en mettant à jour l'écran chaque fois que de nouvelles valeurs arrivent via Wi-Fi.
- Panneau de contrôle tactile : Créez une interface multi-boutons pour contrôler des relais, des moteurs, ou des appareils domotiques sans aucun bouton physique.
- Enregistreur portable : Combinez le lecteur de carte SD avec l'écran pour enregistrer et tracer des données de capteur sur une carte micro SD avec un graphique en direct à l'écran.
- Affichage numérique : Faites défiler des images bitmap stockées sur carte SD pour créer un affichage publicitaire ou d'information à basse consommation.
Vidéo
Regardez ci-dessous la vidéo pas à pas de ce projet ESP32 S3.
Défis
Poussez votre projet d'écran TFT ESP32 S3 plus loin en essayant ces extensions progressivement plus difficiles. Chaque défi renforce un aspect différent de la bibliothèque et du matériel.
- Débutant : Modifiez le croquis DrawShapes pour dessiner vos initiales en utilisant des lignes et des rectangles dans vos deux couleurs préférées.
- Débutant : Modifiez le croquis ShowTextAndNumber pour afficher un compteur de millisecondes en direct qui se met à jour toutes les 500 ms en utilisant millis().
- Intermédiaire : Combinez les exemples DrawImageSDcard et ShowTextAndNumber pour superposer une étiquette sur une image bitmap chargée depuis la carte SD.
- Intermédiaire : Créez une interface tactile à deux boutons qui bascule une LED connectée à une broche GPIO — un bouton ALLUMÉ, un bouton ÉTEINT — avec la couleur du bouton reflétant l'état actuel de la LED.
- Avancé : Créez une interface tactile multi-écrans avec un écran d'accueil et deux sous-écrans, en naviguant entre eux avec des boutons précédent et suivant à l'écran, chaque écran affichant des données de capteur différentes.
Dépannage
| Problème | Cause | Solution |
|---|---|---|
| Écran vide | Mauvaises broches SPI ou mauvaise alimentation | Utilisez les bonnes broches SPI matérielles pour votre variante d'ESP32 S3 ; vérifiez que VCC est à 3,3V |
| Image brouillée | Mauvais pilote actif | Décommentez uniquement le constructeur correspondant |
| Image décalée | Incohérence largeur/hauteur du constructeur | Faites correspondre les valeurs aux dimensions réelles de votre panneau |
| Pas de réponse tactile | Données de calibration manquantes | Exécutez l'exemple TouchCalibration et copiez les valeurs affichées |
| Port non visible | Pilote USB manquant | Installez le bon pilote USB pour votre carte ESP32 S3 |
Support de plateforme
La bibliothèque est construite sur l'API SPI standard d'Arduino et prend en charge toutes les variantes ESP32 S3 compatibles Arduino (architectures=*).