Skip to Content

CrowPanel 2.8″ ESP32 Display : Guida rapida alla configurazione

CrowPanel 2.8″ ESP32 Display : Guida rapida alla configurazione

In questo tutorial imparerai come iniziare a utilizzare il CrowPanel 2.8″ ESP32 Display di ELECROW. I display CrowPanel sono ottimi perché hanno praticamente tutto ciò che serve già integrato. Questo include il touch screen TFT, un ESP32, uno slot per TF Card, un connettore per batteria con caricatore, un’interfaccia I2C e persino un’interfaccia per altoparlante.

Tuttavia, a seconda della tua esperienza, i primi passi nell’utilizzo possono essere un po’ impegnativi. Spero che questa guida all’installazione ti aiuti. Mi concentro in particolare sulla versione con display da 2.8″, ma le informazioni valgono anche per le versioni da 2.4″ e 3.5″. Gli altri schermi più grandi della serie CrowPanel, invece, utilizzano driver display diversi.

Allora, iniziamo.

Componenti necessari

I componenti necessari includono ovviamente il display e, se vuoi collegare dell’hardware esterno, alcuni cavi, resistenze, LED e una breadboard saranno utili.

CrowPanel 2.8″ ESP32 Display

Cavo USB C

Dupont wire set

Set di cavi Dupont

Half_breadboard56a

Breadboard

Kit di resistenze & LED

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.

Caratteristiche del CrowPanel 2.8″ ESP32 Display

Il CrowPanel 2.8″ ESP32 Display di ELECROW è un touch screen resistivo HMI con display TFT a risoluzione 320*240. Utilizza il modulo ESP32-WROOM-32 come processore di controllo, che integra WiFi e Bluetooth.

Fronte del CrowPanel 2.8″ ESP32 Display (source)

Inoltre, la scheda dispone di uno slot per TF card, un’interfaccia UART, un’interfaccia I2C, un’interfaccia per altoparlante, un connettore per batteria con funzione di ricarica e una piccola porta GPIO con due pin GPIO. Vedi il pinout qui sotto:

Pinout del CrowPanel 2.8″ ESP32 Display (source)

La tabella seguente riassume a quali pin GPIO sono assegnate le tre interfacce IO. Per altri pin GPIO consulta gli schemi nell’appendice di questo post.

GPIO_DIO25; IO32
UARTRX(IO16); TX(IO17)
I2CSDA(IO22); SCL(IO21)

Puoi alimentare la scheda tramite la porta USB (5V, 2A) oppure collegando una batteria LiPo standard da 3.7V al connettore BAT. Se il cavo USB e la batteria sono collegati contemporaneamente, la scheda caricherà la batteria. La corrente massima di carica è di 500mA.

La scheda supporta diversi ambienti di sviluppo come Arduino IDE, Espressif IDF, Lua RTOS e Micro Python, ed è compatibile con la LVGL graphics library. Tuttavia, in questo tutorial mi concentrerò su Arduino IDE e sulla TFT_eSPI graphics library. 

Serie di display CrowPanel ESP32

Il CrowPanel 2.8″ ESP32 Display fa parte di una famiglia di display che va da 2.4 pollici fino a 7 pollici. Per una panoramica vedi la tabella qui sotto.

CrowPanel ESP32 Displays
CrowPanel ESP32 Displays (source)

In questo tutorial descriverò nello specifico la configurazione della versione da 2.8″. Ma gli esempi di codice e la procedura di setup sono praticamente gli stessi anche per la 2.4″ display e la 3.5″ display, dato che usano lo stesso o un driver display simile (ILI9341, ILI9488). Vedi le sezioni evidenziate in giallo nella tabella sopra.

Tuttavia, dato che sto usando la TFT_eSPI library, gli esempi di codice probabilmente non funzioneranno con i display più grandi (4.3″, 5″, 7″), poiché i driver per quei display non sono supportati – per quanto ne so. Correggimi se sbaglio, visto che in realtà non ho provato.

Prima di implementare qualsiasi grafica avanzata, però, ti consiglio di testare prima il caricamento e l’esecuzione di un semplice programma blink. Ed è proprio questo l’argomento della prossima sezione.

Test dei GPIO

Il display viene fornito con una demo UI che si avvia quando colleghi la scheda. È un buon primo test. Successivamente, però, vogliamo verificare se possiamo caricare ed eseguire il nostro codice. L’esempio tipico per questo è il programma Blink.

Dato che il display non ha un LED integrato, useremo i due pin GPIO disponibili sulla porta GPIO_D per controllare due LED esterni. Lo schema di collegamento qui sotto mostra come collegare i due LED alla porta. Puoi usare il cavo fornito con il display per questo.

Wiring for blinking two LEDs
Collegamento per lampeggiare due LED

I pin all’interno della porta GPIO_D sono: IO25; IO32, 3.3V, GND. Non ci serve l’uscita 3.3V, solo i due pin GPIO e la massa. Quando costruisci il circuito, non dimenticare le resistenze da 220Ω per limitare la corrente ai LED e assicurati che la massa sia collegata correttamente.

Dopo di che puoi caricare il seguente codice che fa lampeggiare i due LED in modo alternato. Stampa anche sul Serial monitor, così se c’è qualche problema con i collegamenti puoi almeno verificare che il programma stia girando. Assicurati che il baud rate del Serial monitor sia impostato a 115200.

const int led1 = 25;
const int led2 = 32;

void setup() {
  Serial.begin(115200);
  pinMode(led1, OUTPUT);
  pinMode(led2, OUTPUT);
}

void loop() {
  Serial.println("on");
  digitalWrite(led1, HIGH);
  digitalWrite(led2, LOW);
  delay(1000);

  Serial.println("off");
  digitalWrite(led1, LOW);
  digitalWrite(led2, HIGH);
  delay(1000);
}

Dato che il display utilizza un ESP32, avrai bisogno del core ESP32 installato. Se hai problemi con questo, dai un’occhiata al nostro tutorial A Beginner’s Guide To ESP32 Programming, dove spieghiamo come fare.

Nota che esistono due versioni della scheda display. La vecchia versione V1 richiede di tenere premuto il tasto BOOT e poi premere RESET per entrare in modalità programmazione. La nuova versione V2 non richiede più questa procedura. Io ho la versione V2 e sono riuscito a caricare senza problemi e senza dover premere pulsanti.

Configurazione della libreria TFT_eSPI tramite User_Setup.h

Finora tutto dovrebbe essere stato semplice. Ora arriva la parte difficile. Se vuoi mostrare qualcosa sul display dovrai usare una libreria grafica. La più comune è probabilmente la TFT_eSPI library di Bodmer. La trovi nel Library Manager e puoi installarla normalmente da lì:

TFT_eSPI library in Library Manager
Libreria TFT_eSPI nel Library Manager

La parte difficile è configurare i parametri giusti per il display CrowPanel 2.8″ in modo che la libreria TFT_eSPI funzioni. Per questo devi trovare un file chiamato User_Setup.h, che fa parte della libreria TFT_eSPI. Tipicamente, su Windows si trova in un percorso simile al seguente

C:\Users\stefa\OneDrive\Documents\Arduino\libraries\TFT_eSPI

Il percorso esatto dipende dal tuo nome utente (nel mio caso “stefa“) e dal sistema operativo e se usi OneDrive o meno. Dovrai cercarlo.

Se apri il file User_Setup.h vedrai una quantità enorme di impostazioni che devono essere corrette per far funzionare il display. Buona fortuna!

User_Setup.h
User_Setup.h

È sorprendentemente difficile trovare la configurazione corretta e devo ringraziare Ralph S Bacon e il suo TFT 3.5″ Touch Screen & ESP32 built in – Elecrow review che mi hanno risparmiato molte prove ed errori. Ecco le impostazioni che ti servono:

#define ILI9341_DRIVER
#define TFT_WIDTH  320
#define TFT_HEIGHT 240 

#define TFT_BACKLIGHT_ON HIGH
#define TFT_BL   27 
#define TFT_MISO 12
#define TFT_MOSI 13
#define TFT_SCLK 14
#define TFT_CS   15
#define TFT_DC    2 
#define TFT_RST  -1
#define TOUCH_CS 33

#define SPI_FREQUENCY        27000000
#define SPI_TOUCH_FREQUENCY   2500000
#define SPI_READ_FREQUENCY   16000000

#define LOAD_GLCD   // Font 1. Original Adafruit 8 pixel font needs ~1820 bytes in FLASH
#define LOAD_FONT2  // Font 2. Small 16 pixel high font, needs ~3534 bytes in FLASH, 96 characters
#define LOAD_FONT4  // Font 4. Medium 26 pixel high font, needs ~5848 bytes in FLASH, 96 characters
#define LOAD_FONT6  // Font 6. Large 48 pixel font, needs ~2666 bytes in FLASH, only characters 1234567890:-.apm
#define LOAD_FONT7  // Font 7. 7 segment 48 pixel font, needs ~2438 bytes in FLASH, only characters 1234567890:-.
#define LOAD_FONT8  // Font 8. Large 75 pixel font needs ~3256 bytes in FLASH, only characters 1234567890:-.
#define LOAD_GFXFF  // FreeFonts. Include access to the 48 Adafruit_GFX free fonts FF1 to FF48 and custom fonts
#define SMOOTH_FONT

Secondo le specifiche, il display da 2.8″ usa il driver ILI9341 e ha una risoluzione di 320×240 pixel. Questa è la prima parte delle impostazioni. Poi c’è l’assegnazione dei pin GPIO che controllano il display via SPI, le impostazioni della frequenza SPI e infine i font disponibili.

Devi modificare User_Setup.h, commentare tutto il resto (//) e assicurarti che solo queste impostazioni siano attive. Ti consiglio di salvare l’originale User_Setup.h in un nuovo file, ad esempio “User_Setup.h.bak” e semplicemente sostituire tutto in User_Setup.h con le impostazioni sopra.

Una volta fatto, dovresti riuscire a eseguire qualsiasi esempio fornito con la libreria TFT_eSPI. Il mio preferito è il programma Cellular_Automata:

Example programs of the TFT_eSPI library
Esempi della libreria TFT_eSPI

Impostazioni per i display CrowPanel da 2.4″ e 3.5″

Le impostazioni per il display da 2.4″ sono le stesse di quelle per il display da 2.8″ mostrate sopra, poiché il display da 2.4″ ha la stessa risoluzione (320×240) e lo stesso driver (ILI9341). Per il display CrowPanel da 3.5″ basta solo modificare il driver (ILI9488) e la risoluzione (480×320) per adattarle alle sue specifiche:

#define ILI9488_DRIVER
#define TFT_WIDTH  480
#define TFT_HEIGHT 320 

I display CrowPanel da 4.3″, 5″ e 7″ usano driver che non sono direttamente supportati dalla libreria TFT_eSPI. Quindi, per quanto ne so, non puoi usare questa libreria con quei display, ma non ho effettivamente provato.

Configurazione della libreria TFT_eSPI tramite tft_setup.h

Modificare le impostazioni in User_Setup.h va bene per provare gli esempi della libreria TFT_eSPI. Ma non è una buona soluzione quando scrivi e carichi il tuo codice. Il motivo è che ogni volta che scrivi codice per un display diverso o reinstalli/aggiorni la libreria TFT_eSPI devi cambiare di nuovo le impostazioni in User_Setup.

Per fortuna, la libreria TFT_eSPI offre una soluzione. Invece di modificare le impostazioni in User_Setup.h, che influisce globalmente su tutti i progetti, puoi aggiungere un file chiamato tft_setup.h al tuo specifico progetto Arduino. Questo file contiene le stesse impostazioni descritte sopra ma sarà valido solo per quel progetto. Significa che puoi avere progetti diversi con display diversi, senza dover cambiare User_Setup.h ogni volta che usi un display diverso.

Ecco un esempio pratico. Prima crea un nuovo progetto Arduino e salvalo come “tft_test“, ad esempio. Questo creerà una cartella tft_test con un file tft_test.ino al suo interno:

Arduino Project Folder tft_test
Cartella progetto Arduino tft_test

In questa cartella, ora crea un file chiamato “tft_setup.h” – esattamente con questo nome. La tua cartella di progetto dovrebbe apparire così:

Cartella progetto Arduino con tft_setup.h

Nell’Arduino IDE ora dovresti vedere due tab; tft_test.ino e tft_setup.h su cui puoi cliccare per modificare i file.

Arduino IDE with tft_test.ino and tft_setup.h tabs
Arduino IDE con tab tft_test.ino and tft_setup.h

Nel file tft_setup.h copia tutte le impostazioni del display mostrate sopra. Il seguente estratto è solo un esempio. Devi copiare tutte le impostazioni.

#define ILI9341_DRIVER
#define TFT_WIDTH  320
#define TFT_HEIGHT 240 
..
#define LOAD_FONT8
#define LOAD_GFXFF  
#define SMOOTH_FONT

Nel file tft_test.ino copia il seguente codice. Questo è un piccolo test che usa la libreria TFT_eSPI per mostrare il testo “Makerguides” al centro dello schermo.

#include "tft_setup.h"
#include"TFT_eSPI.h"

TFT_eSPI tft = TFT_eSPI();

void setup(void) {
  tft.init();
  tft.fillScreen(TFT_BLACK);  
}

void loop() {
  tft.setCursor(50, 150, 2);  
  tft.setTextColor(TFT_WHITE, TFT_BLACK);
  tft.setTextSize(2);
  tft.println("Makerguides");
  delay(5000);
}

Nota che tft_setup.h è incluso all’inizio del programma. Il codice è facile da capire. Creiamo un oggetto TFT_eSPI e lo inizializziamo nella funzione setup(). Nella funzione loop, impostiamo il cursore e il font (2), il colore e la dimensione del testo, e infine stampiamo la stringa “Makerguides” sul display TFT.

Se compili e carichi questo programma, dovresti vedere il seguente output sul display:

Text "Makerguides" shown on display
Testo “Makerguides” mostrato sul display

Se sei arrivato fin qui, congratulazioni! Il peggio è passato. Nelle prossime sezioni imparerai come leggere i dati touch per calibrare il touch screen e come costruire una semplice interfaccia utente.

Calibrazione del Touchscreen

Il CrowPanel 2.8″ Display è dotato di un touch screen resistivo che devi calibrare prima di poterlo usare con la libreria TFT_eSPI. Alcuni esempi di codice della libreria TFT_eSPI hanno il codice di calibrazione integrato, ma è scomodo averlo in ogni progetto.

Estrazione dei parametri di calibrazione

Ho quindi derivato il seguente programma dagli esempi, che estrae i parametri di calibrazione rilevanti:

#include "tft_setup.h"
#include "TFT_eSPI.h"

TFT_eSPI tft = TFT_eSPI();

void setup() {
  Serial.begin(115200);
  tft.begin();
  tft.setRotation(0);
}

void loop() {
  uint16_t cal[5];

  tft.fillScreen(TFT_BLACK);
  tft.setCursor(20, 0);
  tft.setTextFont(2);
  tft.setTextSize(1);
  tft.setTextColor(TFT_WHITE, TFT_BLACK);
  tft.print("Touch corners ... ");
  tft.calibrateTouch(cal, TFT_MAGENTA, TFT_BLACK, 15);
  tft.println("done.");

  Serial.printf("cal: {%d, %d, %d, %d, %d}\n",
                cal[0], cal[1], cal[2], cal[3], cal[4]);
  delay(10000);
}

Quando lo esegui, ti chiede di toccare i quattro angoli dello schermo e poi stampa i 5 parametri di calibrazione (coordinate degli angoli e orientamento dello schermo) sul Serial.monitor. Il tuo display durante la calibrazione dovrebbe apparire così:

Calibration of touch screen
Calibrazione del touch screen

e sul Serial.monitor dovresti vedere qualcosa di simile stampato quando la calibrazione è terminata:

  cal: {286, 3478, 196, 3536, 2}

La calibrazione si ripete ogni 10 secondi, così puoi fare più tentativi per ottenere i parametri più precisi. Copiali da qualche parte, perché ti serviranno per il prossimo passaggio.

Lettura delle coordinate touch

In questa sezione implementiamo un piccolo programma per leggere la coordinata in cui il display viene toccato. Dai un’occhiata al seguente codice:

#include "tft_setup.h"
#include "TFT_eSPI.h"

TFT_eSPI tft = TFT_eSPI();
uint16_t cal[5] = { 286, 3478, 196, 3536, 2 };

void setup() {
  tft.begin();
  tft.setRotation(0);
  tft.setTextSize(2);
  tft.setTextColor(TFT_WHITE, TFT_BLACK);
  tft.fillScreen(TFT_BLACK);
  tft.setTouch(cal);
}

void loop() {
  uint16_t x = 0, y = 0;

  if (tft.getTouch(&x, &y)) {
    tft.setCursor(50, 150);
    tft.printf("x=%d, y=%d    ", x, y);
  }

  delay(100);
}

Per prima cosa includiamo le librerie come al solito e creiamo l’oggetto schermo. La riga successiva è importante. Qui definiamo e salviamo il parametro di calibrazione che abbiamo estratto prima:

uint16_t cal[5] = { 286, 3478, 196, 3536, 2 };

Dopo di che, nella funzione setup impostiamo i parametri tipici del display come rotazione, dimensione e colore del testo. Alla fine arriva la riga più importante, dove effettivamente impostiamo i parametri di calibrazione:

  tft.setTouch(cal);

Il loop principale è semplice. Ogni 100msec chiamiamo tft.getTouch e controlliamo se è stato rilevato un tocco. In tal caso, mostriamo le coordinate touch sullo schermo. Il tuo schermo dovrebbe apparire così:

Reading and displaying touch coordinates
Lettura e visualizzazione delle coordinate touch

E con questo abbiamo tutto il necessario per costruire una vera interfaccia utente. Le prossime sezioni forniscono un semplice esempio.

Costruire una Interfaccia Utente

In questa sezione andremo a costruire una semplice Interfaccia Utente (UI) con due pulsanti che ci permetteranno di controllare i due LED che abbiamo collegato prima alla porta GPIO_D. L’interfaccia utente sarà così:

UI with two Buttons to control the LEDs
UI con due pulsanti per controllare i LED

Tuttavia, prima di poter implementare questa UI dobbiamo installare un’altra libreria. La TFT_eWidget library è una piccola estensione della libreria TFT_eSPI che fornisce elementi UI come pulsanti, gauge o grafici. Può essere installata normalmente tramite il Library Manager:

TFT_eWidget library in Library Manager
Libreria TFT_eWidget nel Library Manager

Una volta installata, abbiamo tutto ciò che ci serve. Dai un’occhiata al codice completo della UI prima di discuterne i dettagli:

#include "tft_setup.h"
#include "TFT_eSPI.h"
#include "TFT_eWidget.h"

TFT_eSPI tft = TFT_eSPI();
uint16_t cal[5] = { 286, 3478, 196, 3536, 2 };

const int led1 = 25;
const int led2 = 32;

ButtonWidget btn1 = ButtonWidget(&tft);
ButtonWidget btn2 = ButtonWidget(&tft);
ButtonWidget* btns[] = { &btn1, &btn2 };

void btn1_pressed(void) {
  if (btn1.justPressed()) {
    bool state = !btn1.getState();
    btn1.drawSmoothButton(state, 2, TFT_WHITE, state ? "ON" : "OFF");
    digitalWrite(led1, state ? HIGH : LOW);
  }
}

void btn2_pressed(void) {
  if (btn2.justPressed()) {
    bool state = !btn2.getState();
    btn2.drawSmoothButton(state, 2, TFT_WHITE, state ? "ON" : "OFF");
    digitalWrite(led2, state ? HIGH : LOW);
  }
}

void initButtons() {
  uint16_t w = 100;
  uint16_t h = 50;
  uint16_t x = (tft.width() - w) / 2;
  uint16_t y = tft.height() / 2 - h - 10;

  btn1.initButtonUL(x, y, w, h, TFT_WHITE, TFT_BLACK, TFT_YELLOW, "LED1", 2);
  btn1.setPressAction(btn1_pressed);
  btn1.drawSmoothButton(false, 2, TFT_BLACK);

  y = tft.height() / 2 + 10;
  btn2.initButtonUL(x, y, w, h, TFT_WHITE, TFT_BLACK, TFT_GREEN, "LED2", 2);
  btn2.setPressAction(btn2_pressed);
  btn2.drawSmoothButton(false, 2, TFT_BLACK);
}

void handleButtons() {
  uint8_t nBtns = sizeof(btns) / sizeof(btns[0]);
  uint16_t x = 0, y = 0;
  bool touched = tft.getTouch(&x, &y);
  for (uint8_t b = 0; b < nBtns; b++) {
    if (touched) {
      if (btns[b]->contains(x, y)) {
        btns[b]->press(true);
        btns[b]->pressAction();
      }
    } else {
      btns[b]->press(false);
      btns[b]->releaseAction();
    }
  }
}

void setup() {
  pinMode(led1, OUTPUT);
  pinMode(led2, OUTPUT);

  tft.begin();
  tft.setRotation(0);
  tft.fillScreen(TFT_BLACK);
  tft.setTouch(cal);
  
  initButtons();2
}

void loop() {
  handleButtons();
  delay(50);
}

La UI avrà i seguenti cinque stati o schermate: i due pulsanti inizializzati e poi ciascuno in stato acceso o spento.

Different screens of the UI
Schermate diverse della UI

Vediamo più da vicino come viene realizzato tutto ciò.

Librerie

Per prima cosa installiamo le tre librerie necessarie. Ricorda che “tft_setup.h” è il file che contiene le impostazioni per il display TFT e deve far parte del progetto Arduino che contiene il codice sopra.

#include "tft_setup.h"
#include "TFT_eSPI.h"
#include "TFT_eWidget.h"

Tuttavia, se hai le impostazioni corrette del display in User_Setup.h, non serve includere il file tft_setup.h.

Costanti e Oggetti

Successivamente creiamo l’oggetto display tramite TFT_eSPI tft e una costante cal con i parametri di calibrazione. Poi definiamo i pin GPIO per i due LED. Dopo di che, creiamo i due oggetti pulsante btn1 e btn2.

TFT_eSPI tft = TFT_eSPI();
uint16_t cal[5] = { 286, 3478, 196, 3536, 2 };

const int led1 = 25;
const int led2 = 32;

ButtonWidget btn1 = ButtonWidget(&tft);
ButtonWidget btn2 = ButtonWidget(&tft);
ButtonWidget* btns[] = { &btn1, &btn2 };

Salviamo i due pulsanti in un array btns, perché così la gestione degli eventi sarà più semplice. Ne parleremo dopo.

Gestione della pressione dei pulsanti

Le funzioni btn1_pressed() e btn2_pressed() gestiscono la pressione dei pulsanti per ciascun LED. Quando un pulsante viene premuto, lo stato del LED corrispondente viene invertito e l’aspetto del pulsante viene aggiornato sullo schermo. Qui sotto trovi solo il codice per btn1 ma il codice per btn2 è praticamente lo stesso, cambia solo il LED controllato.

void btn1_pressed(void) {
  if (btn1.justPressed()) {
    bool state = !btn1.getState();
    btn1.drawSmoothButton(state, 2, TFT_WHITE, state ? "ON" : "OFF");
    digitalWrite(led1, state ? HIGH : LOW);
  }
}

Inizializzazione dei pulsanti

La funzione initButtons() imposta posizione, aspetto e azioni per i due pulsanti sullo schermo TFT. Ogni pulsante viene inizializzato con proprietà specifiche e la sua azione di pressione. Rendiamo il pulsante per il LED giallo, giallo (TFT_YELLOW) e quello per il LED verde, verde (TFT_GREEN).

void initButtons() {
  ...
  btn1.initButtonUL(x, y, w, h, TFT_WHITE, TFT_BLACK, TFT_YELLOW, "LED1", 2);
  btn1.setPressAction(btn1_pressed);
  btn1.drawSmoothButton(false, 2, TFT_BLACK);

  ...
  btn2.initButtonUL(x, y, w, h, TFT_WHITE, TFT_BLACK, TFT_GREEN, "LED2", 2);
  btn2.setPressAction(btn2_pressed);
  btn2.drawSmoothButton(false, 2, TFT_BLACK);
}

Gestione dei pulsanti

Nella funzione handleButtons() controlliamo l’input touch sullo schermo TFT tramite tft.getTouch(). Iteriamo su tutti i pulsanti e chiamiamo la pressAction() o la releaseAction() in base alle coordinate touch.

void handleButtons() {
  ...
  bool touched = tft.getTouch(&x, &y);
  for (uint8_t b = 0; b < nBtns; b++) {
    if (touched) {
      if (btns[b]->contains(x, y)) {
        btns[b]->press(true);
        btns[b]->pressAction();
      }
    } else {
      btns[b]->press(false);
      btns[b]->releaseAction();
    }
  }
}

I pulsanti che abbiamo creato non hanno un’azione di rilascio associata, dato che qui non serve. Ma per mantenere il codice generico, chiamiamo comunque releaseAction(). Questo ha il vantaggio che il codice funzionerà senza modifiche se vorrai usare azioni di rilascio in futuro.

Funzione di Setup

Nella funzione setup() configuriamo i pin dei LED come output, inizializziamo il display TFT, impostiamo la rotazione, riempiamo lo schermo di nero, impostiamo la calibrazione touch e creiamo i pulsanti.

void setup() {
  pinMode(led1, OUTPUT);
  pinMode(led2, OUTPUT);

  tft.begin();
  tft.setRotation(0);
  tft.fillScreen(TFT_BLACK);
  tft.setTouch(cal);
  
  initButtons();
}

Funzione Loop

La funzione loop() controlla continuamente le interazioni con i pulsanti chiamando handleButtons() e introduce un piccolo delay per evitare pressioni troppo rapide.

void loop() {
  handleButtons();
  delay(50);
}

Nota che chiamare delay() blocca tutte le altre azioni. In alternativa, puoi fare qualcosa del genere per evitare il blocco:

void loop() {
  static uint32_t lastTime = millis();
  if (millis() - lastTime >= 50) {
    handleButtons();
    lastTime = millis();
  }
}

Ed ecco fatto, una semplice UI per controllare due pulsanti da un CrowPanel 2.8″ ESP32 Display.

L’esempio di codice sopra è derivato dall’esempio Button_demo.ino della libreria TFT_eWidget. Per maggiori informazioni e altri esempi dai un’occhiata lì.

Conclusione

Questo tutorial ha fornito una guida dettagliata alla configurazione del CrowPanel 2.8″ ESP32 Display. Con poche o nessuna modifica questa guida si applica anche ai display da 2.4″ e 3.5″.

Le schede CrowPanel ESP32 Display includono praticamente tutto ciò che serve per un progetto che coinvolge un display. Comprendono un touch screen TFT, un ESP32, uno slot per TF Card, un connettore per batteria con caricatore, un’interfaccia per altoparlante e un’interfaccia I2C.

Tuttavia, questo significa anche che il numero di pin GPIO liberi è limitato a soli due. Ma dato che c’è un’interfaccia I2C, puoi usare un espansore GPIO per aggiungere altri GPIO. Dai un’occhiata al nostro tutorial Using GPIO Expander MCP23017 With Arduino.

Lavorare con i display è spesso complicato, perché servono il driver e le impostazioni giuste. In questa guida hai imparato come configurare la libreria TFT_eSPI.h per pilotare il CrowPanel 2.8″ Display. Inoltre abbiamo usato la libreria di estensione TFT_eWidget per implementare una semplice UI con due pulsanti per controllare due LED. Dai un’occhiata al tutorial Digital Clock with CrowPanel 3.5″ ESP32 Display, dove estendiamo il codice di esempio di questo tutorial per costruire un orologio digitale.

Se ti servono UI più avanzate la libreria LVGL è una scelta migliore, perché offre più widget e un software GUI Builder. Tuttavia, è anche molto più complessa da configurare e usare. Per maggiori informazioni, consulta i tutorial sul sito ELECROW. Ci sono esempi di codice Arduino per LVGL, ma anche esempi per ESP-IDF, ESPHome, PlatformIO e MicroPython.

Se vuoi usare LVGL, dai un’occhiata anche ai CrowPanel ESP32 Display Video Tutorials che spiegano come usare il Squareline Studio GUI builder. Nota che esiste una versione gratuita, anche se limitata (Personal plan) di questo GUI builder.

Tantissime cose con cui divertirsi! Buon divertimento ; )

Link

Ecco alcuni link che ho trovato utili mentre scrivevo questa guida.

Schemi elettrici

Ho estratto i seguenti schemi della scheda dal link CrowPanel 2.8″-ESP32 Display Schematics. Sembra che alcuni esempi di codice usino pin sbagliati o obsoleti e in questi casi gli schemi aiutano a chiarire.

Schematic USB Type-C
Schema USB Type-C
Schematic USB
Schema USB
Schematic Battery port and charger
Schema porta batteria e caricatore
Schematic Power
Schema alimentazione
Schematic ESP32-WROOM-32-N4
Schema ESP32-WROOM-32-N4
Schematic LCD Connector
Schema connettore LCD
Schematic Speaker
Schema altoparlante
Schematic GPIO_D
Schema porta GPIO_D
Schematic I2C
Schema porta I2C
Schematic UART
Schema porta UART
Schematic TF Card
Schema TF Card
Schematic XPT2046
Schema XPT2046