Dans ce tutoriel, vous apprendrez à contrôler un écran tactile TFT ILI9341 de 2,8 pouces avec une résolution de 240×320 pixels, associé à un WEMOS Lolin32 lite (ESP32), en utilisant la bibliothèque TFT_eSPI.
Les instructions et le code fonctionneront avec quelques modifications mineures pour d’autres ESP32 et écrans TFT, tant que l’écran utilise le ILI9341 pilote d’affichage et le XPT2046 contrôleur tactile.
Pièces requises
Vous aurez besoin d’un ESP32 et d’un écran tactile TFT de 2,8 pouces avec une résolution de 240×320 pixels et un circuit intégré pilote d’affichage ILI9341. Quelques câbles et une breadboard peuvent également être utiles.
Écran tactile TFT ILI9341 de 2,8 pouces
ESP32 lite
Câble USB de données
Jeu de fils Dupont
Breadboard
Makerguides is a participant in affiliate advertising programs designed to provide a means for sites to earn advertising fees by linking to Amazon, AliExpress, Elecrow, and other sites. As an Affiliate we may earn from qualifying purchases.
Module d’écran tactile TFT ILI9341 de 2,8″
Il existe plusieurs variantes et clones de ce module d’écran de 2,8 pouces, mais ils sont généralement très similaires et la plupart devraient fonctionner. L’écran TFT a une résolution de 240×320 pixels avec 65K couleurs RVB et est contrôlé via SPI grâce au ILI9341 circuit intégré pilote d’affichage.
De plus, l’écran est équipé d’un écran tactile résistif avec un XPT2046 circuit intégré contrôleur tactile. En outre, il y a également un emplacement pour carte MicroSD à l’arrière, que vous pouvez utiliser pour stocker des images, par exemple. L’image ci-dessous montre le devant et l’arrière du module d’affichage.
Le module d’affichage possède un régulateur de tension intégré et peut être alimenté en 3,3V … 5V sur VCC. Cependant, il n’y a pas de convertisseur de niveau logique, ce qui signifie que vous ne pouvez pas connecter directement un Arduino Uno fonctionnant en logique 5V à l’interface SPI du module qui fonctionne en 3,3V !
Connexion du module d’affichage TFT ILI9341 à Arduino
Si vous souhaitez utiliser l’écran avec un Arduino, vous aurez besoin d’un convertisseur de niveau. Vous pouvez utiliser des diviseurs de tension ou un level shifter module approprié. Comme astuce, Techtonics suggère d’ajouter des résistances de 10k sur les lignes SPI :
Cela fonctionnera probablement (je ne l’ai pas essayé), mais utiliser un level shifter module approprié serait une solution plus fiable et plus sûre. Sinon, utilisez simplement un microcontrôleur fonctionnant en logique 3,3V, comme l’ESP32 que nous allons utiliser ici.
Faire fonctionner le module d’écran tactile TFT ILI9341 en 3,3V
Si vous savez que vous allez alimenter le module d’affichage en 3,3V (VCC=3,3V), vous pouvez contourner le régulateur de tension (U1) en fermant (en soudant) les pastilles de cavalier marquées J1 à l’arrière du module. Voir l’image ci-dessous :
Cela peut potentiellement rendre l’écran plus stable car vous évitez la chute de tension du régulateur et cela réduira également légèrement la consommation d’énergie. Voir le schéma du régulateur de tension ci-dessous et comment le cavalier J1 affecte la connexion :
Je n’ai pas fermé J1 (je l’ai laissé ouvert tel quel) et l’écran fonctionnait bien, mais si vous avez des problèmes de stabilité, vous pouvez essayer de fermer J1.
Cependant, une fois que vous avez soudé (fermé) J1, vous ne pouvez plus fournir 5V à VCC ! Vous devez utiliser 3,3V sur VCC !
Brochage du module d’écran tactile TFT ILI9341
L’image ci-dessous montre l’arrière du module d’affichage avec les broches de connexion. Vous pouvez voir deux groupes : les broches pour le contrôleur tactile et les broches SPI pour l’affichage ci-dessous :
Le tableau suivant, extrait de lcdwiki, liste les broches individuelles et leurs fonctions :
| Numéro | Nom de la broche | Description |
|---|---|---|
| 1 | VCC | Alimentation 5V/3,3V |
| 2 | GND | Masse |
| 3 | CS | Signal de sélection du circuit LCD, actif bas |
| 4 | RESET | Signal de réinitialisation LCD, actif bas |
| 5 | DC/RS | Signal de sélection registre/données LCD, haut niveau : registre, bas niveau : données |
| 6 | SDI(MOSI) | Signal d’écriture de données sur le bus SPI |
| 7 | SCK | Signal d’horloge du bus SPI |
| 8 | LED | Contrôle du rétroéclairage, si non contrôlé, connecter à 3,3V |
| 9 | SDO(MISO) | Signal de lecture de données du bus SPI, si vous n’avez pas besoin de la fonction lecture, ne le connectez pas |
| 10 | T_CLK | Signal d’horloge SPI du tactile |
| 11 | T_CS | Signal de sélection du circuit tactile, actif bas |
| 12 | T_DIN | Entrée SPI du tactile |
| 13 | T_DO | Sortie SPI du tactile |
| 14 | T_IRQ | Signal d’interruption tactile, actif bas lors d’une détection de contact |
Connexion de l’écran tactile TFT ILI9341 à l’ESP32
L’image suivante montre comment connecter le module d’écran tactile à un WEMOS Lolin32 lite (ESP32) :
Il y a pas mal de connexions à faire et le tableau suivant devrait aider. Notez que les lignes SDI(MOSI) et SCK de l’interface SPI sont partagées entre le contrôleur tactile et le contrôleur d’affichage TFT :
| ESP32 | TFT | Tactile |
|---|---|---|
| 5 | CS | – |
| 4 | – | T_CS |
| 17 | RESET | – |
| 16 | DC | – |
| 23 | SDI(MOSI) | T_DIN |
| 18 | SCK | T_CLK |
| 19 | – | T_DO |
| 22 | LED | – |
Vous pourriez connecter la broche 19 de l’ESP32 à SDO(MISO) aussi, mais comme nous ne lisons pas de données depuis le contrôleur d’affichage TFT, ce n’est pas nécessaire et il a été rapporté que cela peut causer des problèmes dans certains cas. Je n’ai pas connecté la broche 19 à SDO(MISO) et l’écran fonctionnait parfaitement.
Notez également que nous laissons la broche T_IRQ du module d’affichage non connectée. Cette broche signale si un contact tactile a été détecté et vous pourriez l’utiliser pour réveiller l’ESP32 d’un mode deep-sleep, par exemple. Cependant, dans ce tutoriel, nous n’implémentons pas cette fonctionnalité.
Le câblage est assez complexe et j’ai utilisé deux breadboards pour placer l’ESP32 et l’écran TFT dessus. La bonne nouvelle est que, à part la masse (GND), toutes les connexions sont d’un côté de l’ESP32, ce qui simplifie un peu le câblage. L’image ci-dessous montre mon montage :
Contrôle du rétroéclairage pour l’écran tactile TFT ILI9341
Notez que la LED de rétroéclairage du module est commutée via un transistor et nous pouvons donc la contrôler directement via un GPIO, dans notre cas la broche 22 de l’ESP32 est utilisée. Voir le schéma du circuit de contrôle de la LED ci-dessous :
Contrôleur tactile pour l’écran tactile TFT ILI9341
Comme mentionné précédemment, le contrôleur tactile du module d’affichage est un XPT2046. Le schéma ci-dessous montre comment le contrôleur est connecté à l’intérieur du module d’affichage.
Emplacement carte SD pour l’écran tactile TFT ILI9341
Enfin, le module d’affichage possède un emplacement pour carte SD. L’image ci-dessous montre le schéma de cet emplacement. En interne, il est seulement connecté à VCC et GND.
L’interface SPI (SD_CS, SD_MOSI, SD_CLK) est accessible via des broches externes à l’arrière du module. Mais notez que SD_MISO n’est pas connecté :
Cependant, nous n’utiliserons pas l’emplacement carte SD dans ce tutoriel.
Code pour l’écran tactile TFT ILI9341 avec la bibliothèque TFT_eSPI
Dans cette section, nous allons utiliser la TFT_eSPI library pour contrôler l’écran et l’interface tactile. Pour install cette bibliothèque, ouvrez le gestionnaire de bibliothèques, recherchez « TFT_eSPI » et cliquez sur « INSTALL ». Après une installation réussie, cela devrait ressembler à ceci :
Ensuite, nous devons créer la structure de dossier correcte pour le projet. Ouvrez votre IDE Arduino et créez un projet « tft_test » puis enregistrez-le (Enregistrer sous …). Cela créera un dossier « tft_test » contenant le fichier « tft_test.ino« . Dans ce dossier, créez un autre fichier nommé « tft_setup.h« . Votre dossier de projet devrait ressembler à ceci
Si vous souhaitez en savoir plus sur cette configuration et d’autres options pour configurer un écran TFT avec la bibliothèque TFT_eSPI, consultez le tutoriel How to configure TFT_eSPI Library for TFT display.
tft_setup.h pour l’écran tactile TFT ILI9341
Une fois le dossier de projet avec les deux fichiers créé, copiez le code de configuration suivant pour l’écran TFT dans le fichier tft_setup.h :
// tft_setup.h // 2.8" TFT Touch Display // 240x 320, Driver: ILI9341 #define ILI9341_DRIVER //#define ILI9341_2_DRIVER #define TFT_WIDTH 240 #define TFT_HEIGHT 320 #define TFT_RGB_ORDER TFT_BGR // WEMOLS Lolin32 lite #define TFT_CS 5 #define TFT_RST 17 #define TFT_DC 16 #define TFT_MOSI 23 // SDA // HW MOSI #define TFT_SCLK 18 // SCL // HW SCLK #define TFT_MISO 19 // HW MISO #define TFT_BL 22 // LED back-light #define TFT_BACKLIGHT_ON HIGH #define TOUCH_CS 4 #define TOUCH_CLK TFT_SCLK #define TOUCH_DIN TFT_MOSI #define TOUCH_DO TFT_MISO #define LOAD_GLCD #define LOAD_FONT2 #define LOAD_FONT4 #define LOAD_FONT6 #define LOAD_FONT7 #define LOAD_FONT8 #define LOAD_GFXFF #define SMOOTH_FONT #define SPI_FREQUENCY 27000000 #define SPI_READ_FREQUENCY 20000000 #define SPI_TOUCH_FREQUENCY 2500000
La partie la plus importante de ce fichier de configuration est de sélectionner le pilote d’affichage correct. Dans notre cas, c’est le ILI9341. Notez qu’il existe une définition alternative :
#define ILI9341_DRIVER //#define ILI9341_2_DRIVER
Si vous rencontrez des problèmes avec votre écran, essayez le ILI9341_2_DRIVER à la place du ILI9341_DRIVER.
Les constantes pour la largeur et la hauteur de l’écran ainsi que l’ordre des canaux de couleur sont également importantes.
#define TFT_WIDTH 240 #define TFT_HEIGHT 320 #define TFT_RGB_ORDER TFT_BGR
Si votre contenu semble tronqué ou si les couleurs affichées sont incorrectes, assurez-vous que vous avez les bonnes dimensions (TFT_WIDTH, TFT_HEIGHT) et le TFT_RGB_ORDER correct. Le TFT_RGB_ORDER peut être TFT_BGR ou TFT_RGB.
Notez qu’il existe aussi une définition pour inverser le noir et blanc (#define TFT_INVERSION_ON), au cas où vous rencontreriez ce problème. Pour toutes les options possibles, consultez le fichier User_Setup.h.
Ensuite, nous avons les définitions des broches. J’utilise un WEMOS Lolin32 lite (ESP32) et les broches pour le SPI matériel sont (MOSI=23, MSIO=19, SCK=18) :
#define TFT_CS 5 #define TFT_RST 17 #define TFT_DC 16 #define TFT_MOSI 23 // SDA // HW MOSI #define TFT_SCLK 18 // SCL // HW SCLK #define TFT_MISO 19 // HW MISO #define TFT_BL 22 // LED back-light #define TFT_BACKLIGHT_ON HIGH #define TOUCH_CS 4 #define TOUCH_CLK TFT_SCLK #define TOUCH_DIN TFT_MOSI #define TOUCH_DO TFT_MISO
Selon votre microcontrôleur, ces broches peuvent différer. Vous devriez trouver et utiliser les broches pour le SPI matériel, car cela permet une communication plus rapide et donc un affichage plus rapide. Les autres broches peuvent être choisies librement.
Les constantes pour les polices n’ont généralement pas besoin d’être modifiées. Cependant, si vous manquez de mémoire, vous pouvez retirer les polices inutilisées de la liste.
#define LOAD_GLCD ... #define SMOOTH_FONT
Les constantes pour SPI_FREQUENCY et SPI_TOUCH_FREQUENCY sont assez critiques. Si elles sont trop élevées, vous verrez un contenu déformé et la reconnaissance tactile sera instable. Les valeurs ici ont fonctionné pour moi, mais pour un autre microcontrôleur ou écran, vous devrez peut-être les diminuer.
#define SPI_FREQUENCY 27000000 #define SPI_READ_FREQUENCY 20000000 #define SPI_TOUCH_FREQUENCY 2500000
Code de test pour l’écran tactile TFT ILI9341
Dans cette section, je vous montre un code de test que vous pouvez utiliser pour essayer l’écran et la détection tactile. Copiez simplement le code suivant dans le fichier tft_test.ino :
// tft_test.ino
#include "tft_setup.h"
#include "TFT_eSPI.h"
TFT_eSPI tft = TFT_eSPI();
uint16_t cal[5] = { 0, 0, 0, 0, 0 };
void calibrate_touch() {
if (!cal[1]) {
tft.fillScreen(TFT_BLACK);
tft.calibrateTouch(cal, TFT_YELLOW, TFT_BLACK, 20);
Serial.printf("cal[5] = {%d, %d, %d, %d, %d};\n",
cal[0], cal[1], cal[2], cal[3], cal[4]);
}
}
void setup(void) {
Serial.begin(115200);
tft.init();
tft.setRotation(1);
calibrate_touch();
tft.setTouch(cal);
tft.fillScreen(TFT_BLACK);
tft.setTextFont(1);
tft.setTextSize(2);
tft.setTextColor(TFT_WHITE, TFT_BLACK);
tft.setTextDatum(CC_DATUM);
tft.drawString("Makerguides", TFT_HEIGHT / 2, TFT_WIDTH / 2);
}
void loop() {
uint16_t x, y;
if (tft.getTouch(&x, &y)) {
Serial.printf("%d %d\n", x, y);
tft.fillCircle(x, y, 2, TFT_YELLOW);
}
}
Le code commence par inclure la bibliothèque requise et le fichier de configuration.
#include "tft_setup.h" #include "TFT_eSPI.h"
Ensuite, nous créons l’objet écran TFT et un tableau pour stocker les paramètres de calibration de l’écran tactile :
TFT_eSPI tft = TFT_eSPI();
uint16_t cal[5] = { 0, 0, 0, 0, 0 };
Fonction calibrate_touch
Au départ, les paramètres de calibration sont initialisés à zéro, mais nous les remplirons plus tard. La fonction calibrate_touch() est utilisée pour récupérer ces paramètres de calibration :
void calibrate_touch() {
if (!cal[1]) {
tft.fillScreen(TFT_BLACK);
tft.calibrateTouch(cal, TFT_YELLOW, TFT_BLACK, 20);
Serial.printf("cal[5] = {%d, %d, %d, %d, %d};\n",
cal[0], cal[1], cal[2], cal[3], cal[4]);
}
}
S’ils ne sont pas encore définis (!cal[1]), la fonction efface l’écran puis appelle tft.calibrateTouch(), qui remplit le tableau cal. Cette fonction dessine des flèches (en jaune sur fond noir, taille 20 pixels) dans les coins de l’écran et l’utilisateur doit toucher ces coins pour calibrer l’écran. Nous y reviendrons plus tard. Une fois que nous avons les paramètres cal, nous les affichons sur le moniteur série.
Fonction setup
Dans la fonction setup(), nous initialisons le moniteur série et l’écran TFT, calibrons l’écran tactile si nécessaire, puis affichons le texte « Makerguides » sur l’écran :
void setup(void) {
Serial.begin(115200);
tft.init();
tft.setRotation(1);
calibrate_touch();
tft.setTouch(cal);
tft.fillScreen(TFT_BLACK);
...
tft.drawString("Makerguides", TFT_HEIGHT / 2, TFT_WIDTH / 2);
}
Fonction loop
Dans la fonction loop(), nous appelons getTouch pour vérifier si un contact tactile a été détecté. Si oui, nous affichons les coordonnées du contact sur le moniteur série et dessinons un petit cercle jaune à l’endroit du contact :
void loop() {
uint16_t x, y;
if (tft.getTouch(&x, &y)) {
Serial.printf("%d %d\n", x, y);
tft.fillCircle(x, y, 2, TFT_YELLOW);
}
}
Contrôle du rétroéclairage
Enfin, si vous souhaitez éteindre la LED de rétroéclairage de l’écran pour réduire la consommation d’énergie lorsque l’écran n’est pas utilisé, vous pouvez mettre la broche TFT_BL à LOW :
pinMode(TFT_BL, OUTPUT); digitalWrite(TFT_BL, LOW); // Switch off Backlight
Je n’utilise pas cela dans ce code, mais cela fonctionne. Cela peut être utile pour économiser de l’énergie en mettant l’ESP32 en deep-sleep et ne le réveiller que lorsqu’un contact tactile est détecté.
Dans la section suivante, nous apprendrons comment calibrer l’écran tactile.
Calibration de l’écran tactile TFT ILI9341
Si vous téléversez et lancez le code, l’écran démarrera en mode calibration. Cela est nécessaire pour calibrer l’écran tactile afin que la fonction tft.getTouch(&x, &y) retourne les coordonnées correctes à l’écran lors d’un contact.
En mode calibration, l’écran affiche d’abord une flèche jaune dans le coin supérieur gauche. Utilisez un stylet et touchez l’écran à l’endroit où la flèche pointe. Notez que si vous souhaitez des flèches plus grandes/petites, ou une couleur ou un fond différent, vous pouvez modifier les paramètres de la fonction tft.calibrateTouch() :
tft.calibrateTouch(cal, TFT_YELLOW, TFT_BLACK, 20);
Si le contact tactile est enregistré avec succès, l’écran affiche ensuite une flèche dans le coin supérieur droit. Touchez ce coin et répétez le processus jusqu’à ce que les quatre coins aient été touchés. L’image ci-dessous montre les quatre flèches pendant les quatre étapes du processus de calibration :
Après le quatrième contact, l’écran affichera le texte « Makerguides » au centre (sans flèches) :
Surtout, le code affichera aussi les paramètres de calibration cal sur le moniteur série. Vous devriez voir une sortie similaire à ce qui suit :
cal[5] = {397, 3495, 294, 3495, 7};
Copiez ces valeurs et remplacez les paramètres de calibration à zéro pour la constante cal (cal[5] = { 0, 0, 0, 0, 0 }) dans le sketch tft_test.ino par les valeurs affichées sur le moniteur série :
// tft_test.ino
...
uint16_t cal[5] = {397, 3495, 294, 3495, 7};
void calibrate_touch() {
...
Puis compilez et téléversez à nouveau le code.
Détection des contacts avec l’écran tactile TFT ILI9341
Lorsque les paramètres cal sont définis, le code sautera l’étape de calibration, affichera directement « Makerguides » et sera prêt à détecter les entrées tactiles. Utilisez votre stylet et un point jaune devrait apparaître à l’endroit où vous touchez l’écran. Ci-dessous une photo de l’écran avec mes essais de contacts tactiles :
Si les points jaunes apparaissent décalés par rapport à l’endroit où vous avez touché l’écran, la calibration est incorrecte. Vous pouvez refaire la calibration en remettant les paramètres cal à zéro (cal[5] = { 0, 0, 0, 0, 0 }).
Notez que le moniteur série affichera les coordonnées tactiles détectées une fois la calibration terminée. Vous pouvez utiliser cela pour vérifier la calibration ou pour ajouter des boutons qui réagissent au toucher, par exemple.
241 51 240 54 240 53 241 47 243 46 ...
Voir le tutoriel Digital Clock with CrowPanel 3.5″ ESP32 Display pour un exemple.
Conclusions
Dans ce tutoriel, vous avez appris à contrôler un écran tactile TFT ILI9341 de 2,8 pouces avec une résolution de 240×320 pixels, associé à un WEMOS Lolin32 lite (ESP32), en utilisant la bibliothèque TFT_eSPI.
Si vous rencontrez des difficultés avec la bibliothèque TFT_eSPI, notre How to configure TFT_eSPI Library for TFT display pourrait vous aider. Il y a aussi une longue discussion here concernant des problèmes avec cet écran spécifique.
Si vous avez un écran différent avec un circuit pilote ST7735 ou souhaitez apprendre à utiliser la bibliothèque Adafruit, le Interface TFT ST7735 Display with ESP32 tutorial pourrait vous être utile.
Et pour les écrans TFT ronds, jetez un œil au tutoriel Digital Clock on CrowPanel 1.28″ Round Display.
Si vous avez des commentaires, n’hésitez pas à les laisser dans la section commentaires.
Bon bricolage ; )
