ESP32 - Écran TFT LCD Tactile SPI ILI9341 ILI9488 ST7789
Construisons un projet qui donne vie à un écran TFT SPI couleur sur un ESP32. L'ESP32 est un microcontrôleur double cœur avec WiFi, Bluetooth et de nombreuses GPIO — et son bus SPI matériel VSPI permet de piloter facilement un écran TFT haute vitesse.
Ce que nous allons construire :
- Une connexion câblée entre un ESP32 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'images bitmap lisant depuis la mémoire programme (PROGMEM).
- Un visualiseur d'images 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 interactifs.
- Un outil de calibration de l'écran tactile.
- Un exemple de bus SPI personnalisé utilisant le HSPI de l'ESP32.
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 les puces ILI9341, ILI9488 ou ST7789.
Matériel Requis
Ou vous pouvez acheter les kits suivants:
| 1 | × | Kit de Démarrage DIYables ESP32 (ESP32 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 LCD couleur à un CI pilote qui accepte des commandes de dessin via un bus SPI 4 fils. La bibliothèque prend en charge trois puces courantes :
- ILI9341 - couleur RGB565 16 bits, SPI jusqu'à 40 MHz.
- ILI9488 - couleur RGB666 18 bits sur SPI, jusqu'à 24 MHz.
- ST7789 - couleur RGB565 16 bits, SPI jusqu'à 40 MHz.
Recommandation : Si vous n'avez pas encore acheté d'écran, nous recommandons le pilote ST7789. Il est largement disponible, fonctionne à la 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 des bitmaps.
Note : L'ESP32 utilise la logique 3,3V. La plupart des modules TFT SPI fonctionnent à 3,3V. Vérifiez la spécification de tension de votre module avant le câblage.
Brochage
La plupart des écrans TFT LCD SPI ont les broches suivantes :
Broches d'affichage :
| Broche | Fonction |
|---|---|
| VCC | Alimentation |
| GND | Masse |
| CS | Sélection de puce — mis à LOW pour sélectionner l'afficheur sur le bus SPI |
| DC / RS | Sélection Données / Commande — HIGH pour les données pixel, LOW pour les commandes |
| RST | Réinitialisation matérielle — optionnel ; reliez à 3,3V si non utilisé |
| MOSI / SDI / SDA | Données SPI en entrée (MCU → afficheur) |
| SCK / CLK | Horloge SPI |
| MISO / SDO | Données SPI en sortie (afficheur → MCU) — optionnel pour utilisation affichage uniquement |
| LED / BL / BLK | Alimentation rétroéclairage — connecter à 3,3V ou une broche PWM pour le gradateur |
Broches de carte SD (si votre application doit accéder à la carte SD) :
| Broche | Fonction |
|---|---|
| SD_CS / TF_CS | Sélection de puce 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 prenant en charge le tactile, il y a des broches tactiles supplémentaires (si votre application utilise la fonction tactile et que l'écran la prend en charge) :
| Broche | Fonction |
|---|---|
| T_CS | Sélection de puce 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é |
Note : Certains modules d'affichage non tactiles exposent également les broches T_CS, T_CLK, T_DIN, T_DO et T_IRQ. Celles-ci sont non fonctionnelles sur ces cartes — le CI contrôleur tactile n'est pas implanté. Elles apparaissent car le PCB réutilise la même conception que la version tactile pour réduire les variantes de fabrication.
Schéma de Câblage
Sans Tactile
Connectez MOSI à GPIO23, SCK à GPIO18, MISO à GPIO19 sur l'ESP32. CS, DC et RST peuvent être n'importe quelle GPIO disponible — GPIO5, GPIO2, GPIO4 sont utilisés dans les exemples.
Afficheur :
| Broche TFT | Broche ESP32 | Description |
|---|---|---|
| VCC | 3.3V | Alimentation (3,3V uniquement) |
| GND | GND | Masse |
| CS | GPIO5 | Sélection de puce |
| DC / RS | GPIO2 | Sélection Données / Commande |
| RST | GPIO4 | Réinitialisation (optionnel) |
| MOSI / SDI | GPIO23 | MOSI SPI matériel (VSPI) |
| SCK | GPIO18 | Horloge SPI matériel (VSPI) |
| MISO / SDO | GPIO19 | MISO SPI matériel (VSPI, optionnel) |
| LED / BL | 3.3V | Alimentation rétroéclairage |
Carte SD (si votre application doit accéder à la carte SD) :
| Broche SD | Broche ESP32 | Description |
|---|---|---|
| SD_CS / TF_CS | n'importe quelle GPIO libre | Sélection de puce carte SD |
| MOSI / SDI | GPIO23 | Partagé avec MOSI afficheur (GPIO23) |
| SCK / CLK | GPIO18 | Partagé avec SCK afficheur (GPIO18) |
| MISO / SDO | GPIO19 | Partagé avec MISO afficheur (GPIO19) |
Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.
Si vous ne savez pas comment alimenter l'ESP32 et d'autres composants, consultez les instructions dans le tutoriel suivant : Comment alimenter l'ESP32..
Note : Le schéma ci-dessus montre le câblage correct. En pratique, connecter deux fils dans le même trou de broche de l'ESP32 n'est pas facile. Une solution pratique est d'utiliser un bloc de connexion à vis pour ESP32 — deux fils peuvent être fixés dans la même borne à vis, ou un fil dans la vis et un dans la broche adjacente.
Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.
Avec Tactile
Connectez le contrôleur tactile XPT2046 au bus VSPI de l'ESP32, en partageant GPIO23, GPIO18 et GPIO19 avec l'afficheur.
Afficheur :
| Broche TFT | Broche ESP32 | Description |
|---|---|---|
| VCC | 3.3V | Alimentation (3,3V uniquement) |
| GND | GND | Masse |
| CS | GPIO5 | Sélection de puce |
| DC / RS | GPIO2 | Sélection Données / Commande |
| RST | GPIO4 | Réinitialisation (optionnel) |
| MOSI / SDI | GPIO23 | MOSI SPI matériel (VSPI) |
| SCK | GPIO18 | Horloge SPI matériel (VSPI) |
| MISO / SDO | GPIO19 | MISO SPI matériel (VSPI, optionnel) |
| LED / BL | 3.3V | Alimentation 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 | Description |
|---|---|---|
| T_CS | n'importe quelle GPIO libre | Sélection de puce tactile |
| T_IRQ | n'importe quelle GPIO libre | Interruption tactile (optionnel) |
| T_DIN | GPIO23 | Partagé avec MOSI afficheur (GPIO23) |
| T_CLK | GPIO18 | Partagé avec SCK afficheur (GPIO18) |
| T_DO | GPIO19 | Partagé avec MISO afficheur (GPIO19) |
Cette image a été créée avec Fritzing. Cliquez pour agrandir l'image.
Note : Le schéma ci-dessus montre le câblage correct. En pratique, connecter deux fils dans le même trou de broche de l'ESP32 n'est pas facile. Une solution pratique est d'utiliser un bloc de connexion à vis pour ESP32 — deux fils peuvent être fixés dans la même borne à vis, ou un fil dans la vis et un dans la broche adjacente.
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 attribuer chaque périphérique (afficheur, carte SD, contrôleur tactile) à son propre bus SPI dédié. Si votre MCU n'a qu'une seule interface SPI matérielle, les trois périphériques partagent les mêmes trois lignes de données (MOSI, SCK, MISO) — sur l'ESP32, ce sont GPIO23, GPIO18 et GPIO19. Chaque périphérique a sa propre broche CS, donc un seul est actif à la fois. La bibliothèque DIYables_TFT_SPI gère à la fois l'afficheur et le contrôleur tactile XPT2046 via une seule API — aucune bibliothèque SPI séparée n'est nécessaire pour le côté tactile.
Installation de la Bibliothèque
- Connectez la carte ESP32 à votre ordinateur via son port USB-C.
- Ouvrez Arduino IDE. Sélectionnez votre variante de carte ESP32 dans le menu des cartes et choisissez le port COM correct.
- Ouvrez le panneau Bibliothèques.
- Recherchez "DIYables_TFT_SPI". Localisez l'entrée DIYables.
- Cliquez sur Installer 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 sketch de base pour tout projet ESP32 TFT avec cette bibliothèque :
#include <DIYables_TFT_SPI.h>
#define TFT_CS_PIN 5
#define TFT_DC_PIN 2
#define TFT_RST_PIN 4
// 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
}
Construction - Dessiner des Formes
L'exemple DrawShapes dessine toute la gamme des primitives Adafruit GFX : cercles, triangles, rectangles, rectangles arrondis et lignes.
/*
* Ce code ESP32 a été développé par newbiely.fr
* Ce code ESP32 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/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);
}
Téléverser et Tester
- Câblez le module TFT à l'ESP32 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 Téléverser.
- Après le téléversement, l'afficheur remplit avec une boucle de formes colorées.
Référence API de Dessin
| Méthode | Objectif | Utilisation |
|---|---|---|
| begin() | Initialiser l'afficheur. | TFT_display.begin(); |
| setRotation(r) | Définir l'orientation de l'écran 0-3. | TFT_display.setRotation(1); |
| fillScreen(color) | Remplir tout l'écran d'une couleur. | TFT_display.fillScreen(BLACK); |
| colorRGB(r,g,b) | Construire une valeur de couleur 16 bits. | colorRGB(255,128,0) |
| fillCircle(x,y,r,color) | Cercle plein. | 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); |
Construction - Afficher Texte et Nombres
L'exemple ShowTextAndNumber utilise le moteur de texte Adafruit GFX pour imprimer des chaînes et des valeurs numériques à des tailles et couleurs réglables.
/*
* Ce code ESP32 a été développé par newbiely.fr
* Ce code ESP32 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/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() {
}
Téléverser et Tester
- Câblez et téléversez comme ci-dessus.
- L'afficheur montre plusieurs lignes de texte et de nombres dans différentes couleurs et tailles.
Référence API de Dessin
| Méthode | Objectif | Utilisation |
|---|---|---|
| setTextColor(color) | Définit la couleur du texte en premier plan. | TFT_display.setTextColor(WHITE); |
| setTextSize(size) | Met le texte à l'échelle. 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) | Imprime une chaîne ou un nombre au curseur. | TFT_display.print("ESP32!"); |
| println(value) | Imprime et fait avancer le curseur à la ligne suivante. | TFT_display.println(42); |
Construction - Afficher une Image
Construisons un visualiseur d'images. L'exemple DrawImage charge un bitmap RGB565 couleur depuis la mémoire flash du programme ESP32 et le rend sur l'afficheur. Les données pixel sont déclarées dans bitmap.h comme un tableau const uint16_t avec PROGMEM.
Copiez bitmap.h dans le dossier du sketch avant de compiler.
/*
* Ce code ESP32 a été développé par newbiely.fr
* Ce code ESP32 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/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);
}
Téléverser et Tester
- Placez bitmap.h dans le même dossier que le sketch.
- Câblez le module TFT à l'ESP32 comme indiqué ci-dessus (MOSI=GPIO23, SCK=GPIO18, MISO=GPIO19, CS=GPIO5, DC=GPIO2, RST=GPIO4). Utilisez 3,3V pour VCC.
- Branchez le câble USB-C.
- Dans Arduino IDE, sélectionnez la carte et le port, appuyez sur Téléverser.
- L'afficheur rend l'image bitmap depuis la flash.
Référence API de Dessin
| Méthode | Objectif | Utilisation |
|---|---|---|
| drawRGBBitmap(x,y,bitmap,w,h) | Dessine un bitmap PROGMEM RGB565 avec son coin supérieur gauche en (x, y). | TFT_display.drawRGBBitmap(0, 0, myImage, 240, 320); |
| fillScreen(color) | Efface l'afficheur avant de dessiner l'image. | TFT_display.fillScreen(BLACK); |
Construction - Afficher une Image depuis la Carte SD
Construisons un visualiseur d'images depuis carte SD. L'exemple DrawImageSDcard lit un fichier image binaire RGB565 brut depuis une micro carte SD et envoie les données pixel à l'afficheur par morceaux.
Câblez le module SD à GPIO23 (MOSI), GPIO18 (SCK), GPIO19 (MISO). Définissez une broche CS séparée pour le module SD comme SD_CS_PIN dans le sketch.
/*
* Ce code ESP32 a été développé par newbiely.fr
* Ce code ESP32 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/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() {
}
Téléverser et Tester
- Câblez le module SD au bus VSPI de l'ESP32. Partagez GPIO23/18/19 avec l'afficheur. Connectez SD CS à 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 Téléverser.
- L'afficheur rend l'image diffusée depuis la carte SD.
Référence API de Dessin
| Méthode | Objectif | Utilisation |
|---|---|---|
| startWrite() | Ouvre une session d'écriture SPI directe et affirme le CS de l'afficheur. | TFT_display.startWrite(); |
| setAddrWindow(x0,y0,x1,y1) | Définit la région rectangulaire d'écriture des pixels sur le panneau. | TFT_display.setAddrWindow(0, 0, 239, 319); |
| pushColors(buf, len) | Envoie un tampon de valeurs pixel RGB565 à l'afficheur. | TFT_display.pushColors(buf, 512); |
| endWrite() | Ferme la session SPI et libère le CS de l'afficheur. | TFT_display.endWrite(); |
Construction - Utiliser une Police Externe
Construisons un affichage de texte personnalisé. L'exemple UseExternalFont remplace la police pixel 5×7 par défaut par une police de contour compatible Adafruit GFX plus nette.
/*
* Ce code ESP32 a été développé par newbiely.fr
* Ce code ESP32 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/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() {
}
Téléverser et Tester
- Câblez le module TFT à l'ESP32 comme indiqué ci-dessus.
- Branchez le câble USB-C.
- Dans Arduino IDE, sélectionnez la carte et le port, appuyez sur Téléverser.
- L'afficheur rend le texte dans la police personnalisée.
Référence API de Dessin
| Méthode | Objectif | Utilisation |
|---|---|---|
| setFont(&FontName) | Active une police compatible GFX personnalisée. 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 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) | Imprime une chaîne au curseur en utilisant la police active. | TFT_display.print("ESP32 Project"); |
Construction - Obtenir un Point Tactile
Construisons un lecteur de coordonnées tactiles. L'exemple TouchGetPoint initialise le XPT2046 sur le bus VSPI de l'ESP32 et imprime les valeurs ADC brutes sur le Moniteur Série chaque fois que l'écran est pressé.
Câblage (tous les signaux à 3,3V) :
| Broche tactile | Broche ESP32 | Description |
|---|---|---|
| T_CLK | GPIO18 | SCK — partagé avec l'afficheur |
| T_DIN | GPIO23 | MOSI — partagé avec l'afficheur |
| T_DO | GPIO19 | MISO — partagé avec l'afficheur |
| T_CS | GPIO15 | Sélection de puce tactile |
| T_IRQ | GPIO27 | Interruption tactile (optionnel) |
/*
* Ce code ESP32 a été développé par newbiely.fr
* Ce code ESP32 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/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);
}
}
Téléverser et Tester
- Câblez le XPT2046 au bus VSPI de l'ESP32, partageant GPIO23/18/19 avec l'afficheur. T_CS→GPIO15, T_IRQ→GPIO27.
- Branchez le câble USB-C.
- Dans Arduino IDE, sélectionnez la carte et le port, appuyez sur Téléverser.
- Ouvrez le Moniteur Série à 9600 bauds. Touchez l'afficheur pour voir les valeurs brutes X, Y et Z imprimées.
Référence 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(14, 27); |
| readTouchRaw(x, y, z) | Retourne les valeurs ADC brutes du contrôleur sans calibration. Retourne true quand pressé. | TFT_display.readTouchRaw(x, y, z); |
Construction - 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'afficheur.
/*
* Ce code ESP32 a été développé par newbiely.fr
* Ce code ESP32 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/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);
}
}
Téléverser et Tester
- Câblez le XPT2046 à l'ESP32 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 Téléverser.
- Faites glisser un doigt sur l'afficheur pour peindre sur l'écran.
Référence API de Dessin
| Méthode | Objectif | Utilisation |
|---|---|---|
| initTouchSPI(cs, irq) | Initialise le XPT2046 sur le bus VSPI partagé. | TFT_display.initTouchSPI(14, 27); |
| setTouchCalibration(minX,maxX,minY,maxY) | Mappe les valeurs ADC brutes aux coordonnées pixel de l'écran. Obtenez les quatre valeurs depuis l'exemple TouchCalibration. | TFT_display.setTouchCalibration(200, 3800, 300, 3700); |
| setTouchInvertX(invert) / setTouchInvertY(invert) | Inverse l'axe tactile quand X ou Y est en miroir sur votre panneau. Appelez AVANT setTouchCalibration(). | TFT_display.setTouchInvertY(true); |
| getTouch(x, y) | Retourne les coordonnées tactiles calibrées en pixels d'écran. Retourne true pendant 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 la peinture. | TFT_display.fillCircle(x, y, 3, RED); |
Construction - Bouton Tactile
Construisons un panneau de boutons tactiles. L'exemple TouchButton dessine des boutons rectangulaires comme des régions colorées sur l'afficheur, puis vérifie les coordonnées tactiles à chaque itération de boucle.
T_IRQ est optionnel. Passez -1 comme argument irq pour utiliser le mode polling sans la broche d'interruption.