In questo tutorial imparerai come controllare un display touch TFT ILI9341 da 2,8 pollici con risoluzione 240×320 utilizzando un WEMOS Lolin32 lite (ESP32) e la libreria TFT_eSPI.
Le istruzioni e il codice funzioneranno con alcune piccole modifiche anche per altri ESP32 e TFT, purché il display utilizzi il ILI9341 driver del display e il XPT2046 controller touch.
Componenti necessari
Ti serviranno un ESP32 e un display touch TFT da 2,8 pollici con risoluzione 240×320 pixel e un driver display ILI9341. Potrebbero tornare utili anche alcuni cavi e una breadboard.
Display touch TFT ILI9341 da 2,8 pollici
ESP32 lite
Cavo dati USB
Set di fili 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.
Modulo display touch TFT ILI9341 da 2,8″
Esistono diverse varianti e cloni di questo modulo display da 2,8 pollici, ma sono molto simili e la maggior parte dovrebbe funzionare. Il display TFT ha una risoluzione di 240×320 pixel con 65K colori RGB ed è controllato via SPI usando il ILI9341 chip driver del display.
Inoltre, il display ha un touchscreen resistivo con un XPT2046 chip controller touch. Sul retro c’è anche uno slot per schede MicroSD, utile per memorizzare immagini, ad esempio. L’immagine sotto mostra il fronte e il retro del modulo display.
Il modulo display ha un regolatore di tensione integrato e può essere alimentato con 3,3V … 5V su VCC. Tuttavia, non c’è un convertitore di livello logico, il che significa che non puoi collegare direttamente un Arduino Uno che funziona a 5V logici all’interfaccia SPI del modulo che funziona a 3,3V!
Collegare il modulo display TFT ILI9341 ad Arduino
Se vuoi usare il display con un Arduino ti servirà un convertitore di livello. Puoi usare partitori di tensione o un level shifter module adeguato. Come soluzione temporanea Techtonics suggerisce di aggiungere resistenze da 10k sulle linee SPI:
Probabilmente funzionerà (non l’ho provato) ma usare un level shifter module adeguato è una soluzione più affidabile e sicura. In alternativa, usa un microcontrollore che funziona a 3,3V logici, come l’ESP32 che useremo qui.
Far funzionare il modulo display TFT ILI9341 a 3,3V
Se sai che userai il modulo display a 3,3V (VCC=3,3V), puoi bypassare il regolatore di tensione (U1) chiudendo (saldando) i jumper contrassegnati J1 sul retro del modulo. Vedi l’immagine sotto:
Questo potrebbe rendere il display più stabile evitando la caduta di tensione del regolatore e ridurre leggermente il consumo energetico. Vedi lo schema del regolatore di tensione e come il jumper J1 influisce sulla connessione:
Io non ho chiuso J1 (l’ho lasciato aperto) e il display funzionava bene, ma se hai problemi di stabilità puoi provare a chiudere J1.
Tieni presente che una volta saldato (chiuso) J1 non puoi più fornire 5V a VCC! Devi usare 3,3V su VCC!
Pinout del modulo display touch TFT ILI9341
L’immagine sotto mostra il retro del modulo display con i pin del connettore. Si vedono due gruppi: i pin per il controller touch e i pin SPI per il display:
La tabella seguente, tratta da lcdwiki elenca i singoli pin e le loro funzioni:
| Numero | Etichetta pin | Descrizione |
|---|---|---|
| 1 | VCC | Alimentazione 5V/3,3V |
| 2 | GND | Massa |
| 3 | CS | Segnale chip select LCD, attivo basso |
| 4 | RESET | Segnale reset LCD, reset attivo basso |
| 5 | DC/RS | Segnale selezione registro/dati LCD, alto: registro, basso: dati |
| 6 | SDI(MOSI) | Segnale dati scrittura bus SPI |
| 7 | SCK | Segnale clock bus SPI |
| 8 | LED | Controllo retroilluminazione, se non controllato collegare a 3,3V |
| 9 | SDO(MISO) | Segnale dati lettura bus SPI, se non serve la funzione di lettura non collegarlo |
| 10 | T_CLK | Segnale clock bus SPI touch |
| 11 | T_CS | Segnale chip select touch, attivo basso |
| 12 | T_DIN | Ingresso bus SPI touch |
| 13 | T_DO | Uscita bus SPI touch |
| 14 | T_IRQ | Segnale interrupt touch, basso quando viene rilevato il tocco |
Collegare il display touch TFT ILI9341 all’ESP32
L’immagine seguente mostra come collegare il modulo display touch a un WEMOS Lolin32 lite (ESP32):
Ci sono parecchi collegamenti da fare e la tabella seguente dovrebbe aiutare. Nota che le linee SDI(MOSI) e SCK dell’interfaccia SPI sono condivise tra il controller touch e quello del display TFT:
| ESP32 | TFT | Touch |
|---|---|---|
| 5 | CS | – |
| 4 | – | T_CS |
| 17 | RESET | – |
| 16 | DC | – |
| 23 | SDI(MOSI) | T_DIN |
| 18 | SCK | T_CLK |
| 19 | – | T_DO |
| 22 | LED | – |
Potresti collegare il pin 19 dell’ESP32 a SDO(MISO) ma dato che non leggiamo dati dal controller del display TFT non ne abbiamo bisogno e ci sono segnalazioni che in alcuni casi questo causa problemi. Io non ho collegato il pin 19 a SDO(MISO) e il display funzionava bene.
Nota che lasciamo anche T_IRQ del modulo display scollegato. Questo pin segnala se è stato rilevato un tocco e potresti usarlo per risvegliare l’ESP32 dal deep-sleep, per esempio. Tuttavia, in questo tutorial non implementiamo questa funzionalità.
Il cablaggio è piuttosto complesso e ho collegato due breadboard per posizionare l’ESP32 e il display TFT. La buona notizia è che, a parte la massa (GND), tutti i collegamenti sono su un lato dell’ESP32, il che semplifica un po’ il cablaggio. L’immagine sotto mostra il mio setup:
Controllo retroilluminazione per il display touch TFT ILI9341
Nota che il LED della retroilluminazione del modulo è commutato tramite un transistor e quindi possiamo controllarlo direttamente via GPIO, nel nostro caso usiamo il pin 22 dell’ESP32. Vedi lo schema del circuito di controllo LED sotto:
Controller touch per il display touch TFT ILI9341
Come detto prima, il controller touch del modulo display è un XPT2046. Lo schema sotto mostra come il controller è collegato all’interno del modulo display.
Slot per scheda SD per il display touch TFT ILI9341
Infine, il modulo display ha uno slot per schede SD. L’immagine sotto mostra lo schema di questo slot. Internamente è collegato solo a VCC e GND.
L’interfaccia SPI (SD_CS, SD_MOSI, SD_CLK) è accessibile tramite pin esterni sul retro del modulo. Ma nota che SD_MISO non è collegato:
Tuttavia, in questo tutorial non useremo lo slot per schede SD.
Codice per il display touch TFT ILI9341 con la libreria TFT_eSPI
In questa sezione useremo la TFT_eSPI library per controllare il display e l’interfaccia touch. Per install questa libreria apri il Library Manager, cerca “TFT_eSPI” e premi “INSTALL”. Dopo l’installazione avrai questa schermata:
Ora dobbiamo creare la struttura corretta delle cartelle del progetto. Apri l’IDE Arduino e crea un progetto “tft_test” e salvalo (Salva con nome …). Questo creerà una cartella “tft_test” con il file “tft_test.ino” dentro. In questa cartella crea un altro file chiamato “tft_setup.h“. La struttura della cartella del progetto dovrebbe essere così
Se vuoi saperne di più su questa configurazione e altre opzioni per configurare un display TFT con la libreria TFT_eSPI dai un’occhiata al tutorial How to configure TFT_eSPI Library for TFT display.
tft_setup.h per il display touch TFT ILI9341
Dopo aver creato la cartella del progetto con i due file, copia il seguente codice di configurazione per il display TFT nel file 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 parte più importante di questo file di configurazione è selezionare il driver corretto per il display. Nel nostro caso è il ILI9341. Nota che esiste una definizione alternativa:
#define ILI9341_DRIVER //#define ILI9341_2_DRIVER
Se hai problemi con il display, prova il ILI9341_2_DRIVER invece del ILI9341_DRIVER.
Importanti sono anche le costanti per la larghezza e l’altezza del display e l’ordine dei canali colore.
#define TFT_WIDTH 240 #define TFT_HEIGHT 320 #define TFT_RGB_ORDER TFT_BGR
Se il contenuto appare tagliato o i colori sono sbagliati, assicurati che le dimensioni (TFT_WIDTH, TFT_HEIGHT) e il TFT_RGB_ORDER siano corretti. Il TFT_RGB_ORDER può essere TFT_BGR o TFT_RGB.
Nota che c’è anche una definizione per invertire bianco e nero (#define TFT_INVERSION_ON), nel caso incontrassi questo problema. Per tutte le impostazioni possibili vedi il file User_Setup.h.
Poi ci sono le definizioni dei pin. Io uso un WEMOS Lolin32 lite (ESP32) e i pin per l’Hardware SPI sono (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
A seconda del tuo microcontrollore questi pin possono variare. Dovresti trovare e usare i pin per l’Hardware SPI, perché permettono una comunicazione più veloce e quindi un display più rapido. Gli altri pin puoi sceglierli liberamente.
Le costanti per i font di solito non vanno cambiate. Se però finisci la memoria, puoi rimuovere i font inutilizzati dalla lista.
#define LOAD_GLCD ... #define SMOOTH_FONT
Le costanti per SPI_FREQUENCY e SPI_TOUCH_FREQUENCY sono piuttosto critiche. Se sono troppo alte vedrai contenuti distorti e il riconoscimento del touch sarà impreciso. I valori qui funzionano per me, ma con un microcontrollore o display diverso potresti doverli abbassare.
#define SPI_FREQUENCY 27000000 #define SPI_READ_FREQUENCY 20000000 #define SPI_TOUCH_FREQUENCY 2500000
Codice di test per il display touch TFT ILI9341
In questa sezione ti mostro un codice di test che puoi usare per provare il display e il rilevamento touch. Copia semplicemente il seguente codice nel file 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);
}
}
Il codice inizia includendo la libreria necessaria e il file di configurazione.
#include "tft_setup.h" #include "TFT_eSPI.h"
Poi creiamo l’oggetto display TFT e un array per memorizzare i parametri di calibrazione del touch screen:
TFT_eSPI tft = TFT_eSPI();
uint16_t cal[5] = { 0, 0, 0, 0, 0 };
Funzione calibrate_touch
Inizialmente i parametri di calibrazione sono impostati a zero, ma li inseriremo più avanti. La funzione calibrate_touch() serve per recuperare questi parametri di calibrazione:
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]);
}
}
Se non sono ancora impostati (!cal[1]), la funzione pulisce lo schermo e poi chiama tft.calibrateTouch(), che riempie l’array cal. Questa funzione disegna frecce (di colore giallo con sfondo nero e dimensione 20 pixel) negli angoli del display e l’utente deve toccare gli angoli per calibrare il display. Ne parleremo più avanti. Una volta ottenuti i parametri cal li stampiamo sul monitor seriale.
Funzione setup
Nella funzione setup() inizializziamo il monitor seriale e lo schermo TFT, calibriamo il touch screen se necessario e poi stampiamo il testo “Makerguides” sul display:
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);
}
Funzione loop
Nella funzione loop() chiamiamo getTouch per verificare se è stato rilevato un tocco. Se sì, stampiamo le coordinate del tocco sul monitor seriale e disegniamo un piccolo cerchio giallo nel punto toccato:
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);
}
}
Controllo retroilluminazione
Infine, se vuoi spegnere il LED della retroilluminazione del display per ridurre il consumo quando il display non è usato, puoi impostare il pin TFT_BL a LOW:
pinMode(TFT_BL, OUTPUT); digitalWrite(TFT_BL, LOW); // Switch off Backlight
Non uso questa funzione in questo codice ma funziona. Potrebbe essere utile per risparmiare energia mettendo l’ESP32 in deep-sleep e risvegliandolo solo quando viene rilevato un tocco.
Nella prossima sezione impareremo come calibrare il touch screen.
Calibrazione del display touch TFT ILI9341
Se carichi ed esegui il codice, il display partirà in modalità calibrazione. Questo serve per calibrare il touch screen affinché la funzione tft.getTouch(&x, &y) restituisca le coordinate corrette sullo schermo per un tocco.
In modalità calibrazione il display mostra prima una freccia gialla nell’angolo in alto a sinistra. Usa una penna e tocca il display nell’angolo indicato dalla freccia. Nota che se vuoi frecce più grandi/piccole, o di colore o sfondo diverso, puoi cambiare i parametri della funzione tft.calibrateTouch():
tft.calibrateTouch(cal, TFT_YELLOW, TFT_BLACK, 20);
Se il tocco è registrato correttamente, il display mostra una freccia nell’angolo in alto a destra. Tocca questo angolo e ripeti il processo finché non hai toccato tutti e quattro gli angoli. L’immagine sotto mostra le quattro frecce durante i quattro passaggi della calibrazione:
Dopo il quarto tocco il display mostrerà il testo “Makerguides” al centro (senza frecce):
Soprattutto, il codice stamperà anche i parametri di calibrazione cal sul monitor seriale. Dovresti vedere una stampa simile a questa:
cal[5] = {397, 3495, 294, 3495, 7};
Copia questi valori e sostituisci i parametri di calibrazione a zero per la costante cal (cal[5] = { 0, 0, 0, 0, 0 }) nello sketch tft_test.ino con i valori letti sul monitor seriale:
// tft_test.ino
...
uint16_t cal[5] = {397, 3495, 294, 3495, 7};
void calibrate_touch() {
...
Poi compila e carica di nuovo il codice.
Rilevamento tocchi con il display touch TFT ILI9341
Quando i parametri cal sono impostati, il codice salterà la calibrazione, stamperà direttamente “Makerguides” e sarà pronto a rilevare tocchi. Usa la penna e apparirà un punto giallo dove tocchi il display. Qui sotto una foto del display mentre provo i tocchi:
Se i punti gialli appaiono spostati rispetto al punto toccato, la calibrazione è errata. Puoi rifare la calibrazione impostando i parametri cal a zero (cal[5] = { 0, 0, 0, 0, 0 }).
Nota che il monitor seriale stamperà le coordinate del tocco rilevato una volta completata la calibrazione. Puoi usarlo per controllare la calibrazione o per aggiungere pulsanti che reagiscono al tocco, per esempio.
241 51 240 54 240 53 241 47 243 46 ...
Vedi il tutorial Digital Clock with CrowPanel 3.5″ ESP32 Display per un esempio.
Conclusioni
In questo tutorial hai imparato come controllare un display touch TFT ILI9341 da 2,8 pollici con risoluzione 240×320 usando un WEMOS Lolin32 lite (ESP32) e la libreria TFT_eSPI.
Se hai difficoltà con la libreria TFT_eSPI, il nostro How to configure TFT_eSPI Library for TFT display potrebbe aiutarti. C’è anche una lunga discussione here riguardo problemi con questo specifico display.
Se hai un display diverso con driver ST7735 o vuoi imparare a usare la libreria Adafruit, il Interface TFT ST7735 Display with ESP32 tutorial potrebbe esserti utile.
E per display TFT rotondi dai un’occhiata al tutorial Digital Clock on CrowPanel 1.28″ Round Display.
Se hai commenti, sentiti libero di lasciarli nella sezione commenti.
Buon divertimento con il tinkering ; )
