Questo tutorial ti mostrerà come iniziare con il CrowPanel Advance 7“ HMI Display (Versione 1.0) di Elecrow. Il CrowPanel Advance 7“ HMI Display è un touchscreen HMI con un display IPS da 800*480 di risoluzione. Utilizza l’ESP32-S3 come processore principale, con 512KB di SRAM, 8M di PSRAM e 16M di Flash.
Oltre al grande display IPS, le caratteristiche principali sono moduli wireless opzionali per Thread, Zigbee, Matter, WiFi 6 o radio a 2.4 GHz, un’interfaccia per microfono e altoparlante. Questo rende il display adatto per AI assistant applicazioni ed Elecrow fornisce esempi code e istruzioni videos per esso.
Tuttavia, in questo tutorial iniziamo con un esempio molto semplice che scrive solo testo sullo schermo e reagisce agli input touch. Questo dovrebbe facilitarti l’inizio con questo display. Nota che sto usando la Versione 1.0 e il codice potrebbe non funzionare con altre versioni del display!
Parti Necessarie
Ti serviranno il CrowPanel Advance 7“ HMI Display di ELECROW e l’Arduino IDE. Io ho la Versione 1.0 ma è disponibile una versione più recente, la 1.2.
CrowPanel Advance 7“
Nota che puoi acquistare il display con o senza un alloggiamento in acrilico. Quest’ultimo è comodo se vuoi montare il display a parete, per esempio, e non vuoi costruire un alloggiamento personalizzato. Fai attenzione ai pulsanti reset/boot sul retro. Sporgono abbastanza e se monti il display troppo vicino, verranno premuti.
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 Advance 7“ Display
Il display CrowPanel Advance ESP32 da 7 pollici è un touchscreen capacitivo IPS con risoluzione 800*480 e un ampio angolo di visione di 178°. L’immagine sotto mostra il frontale del display con le sue dimensioni:
Il display utilizza il chip ESP32-S3 come processore centrale. Questo chip è dotato di un processore dual-core Xtensa 32-bit LX7 con frequenza principale fino a 240MHz, con 512KB di SRAM, 8M di PSRAM e 16M di Flash.
Periferiche
Per quanto riguarda le periferiche, il modulo display ha un Real Time Clock (RTC) con batteria integrata, una porta di ricarica batteria, un’uscita per altoparlante, un microfono digitale, un buzzer, uno slot per scheda micro SD, una porta I2C, una porta GPIO con due GPIO e due uscite UART. La foto sotto mostra il retro della PCB, dove si possono vedere la maggior parte di questi componenti:
La tabella seguente fornisce una panoramica delle varie porte, dei pin GPIO associati e delle caratteristiche elettriche:
| Porta | Pin | Caratteristiche Elettriche |
|---|---|---|
| UART0-OUT | RX(IO44); TX(IO43) RX; | Tensione di uscita: 3.3V Corrente di uscita: max 1A. Uso: uscita alimentazione e comunicazione. |
| UART1-OUT | RX(IO19); TX(IO20) RX; | Tensione di uscita: 3.3V Corrente di uscita: max 1A. Uso: uscita alimentazione e comunicazione. |
| UART0-IN | RX(IO44); TX(IO43) RX; | Tensione di ingresso: 5V ± 5%. Max 5.5V. Corrente di ingresso: max 2A. Scopo: ingresso alimentazione e comunicazione. |
| I2C | SDA(IO15); SCL(IO16); | Tensione di uscita: 3.3V Corrente di uscita: max 1A. Uso: uscita alimentazione e comunicazione. |
| SPK | I2S_LRCLK(IO6); I2S_BCLK(IO5); I2S_SDIN(IO4); | Corrente massima in uscita: 20mA Tipo segnale: livello logico 3.3V, segnale digitale di controllo |
| Slot Scheda SD | MOSI(IO6); MISO(IO4); CLK(IO5); CS(GND) | Corrente massima in uscita: 20mA Tipo segnale: livello logico 3.3V, segnale digitale di controllo |
| Retroilluminazione LCD | P3.5 (STC8H1K28) | Corrente massima in uscita: 20mA Tipo segnale: livello logico 3.3V, segnale digitale di controllo |
| Regolazione Retroilluminazione | P1.1 (STC8H1K28) | |
| I2S MIC | MIC_SD(IO20); MIC_WS(IO2); MIC_CLK(IO19) | Corrente massima in uscita: 20mA Tipo segnale: livello logico 3.3V, segnale digitale di controllo |
| BUZZER | P2.7 (STC8H1K28) | Corrente massima in uscita: 20mA Tipo segnale: livello logico 3.3V, segnale digitale di controllo |
| TP_RST | P1.7 (STC8H1K28) | |
| MUTE amplificatore audio | P3.7 (STC8H1K28) | |
| SHUT amplificatore audio | P3.6 (STC8H1K28) |
Selezione Funzione
Alcune periferiche come il microfono (MIC), l’altoparlante (SPK), il modulo wireless (WM) e la scheda SD (TF Card) competono per i GPIO e possono essere usate solo in combinazioni specifiche. Sul retro del display trovi una tabella e due DIP-switch che ti permettono di selezionare una certa combinazione:
Comunicazione Wireless
Oltre alla funzione integrata Wi-Fi 2.4GHz e BLE con antenna RF incorporata, il display ha uno slot separato per un modulo wireless. Ci sono quattro moduli wireless tra cui scegliere: Module-ESP32-H2, Module-ESP32-C6, Module-nRF2401 e Module-Meshtastic, che permettono di comunicare via Zigbee, LoRa, nRF2401, Matter, Thread e Wi-Fi 6. L’immagine sotto mostra dove si inseriscono questi moduli di comunicazione:
Per maggiori informazioni tecniche dai un’occhiata a Description page for the CrowPanel Advance 7“ Display.
Altre Varianti di Display
Il display CrowPanel Advance ESP32 da 7 pollici è un aggiornamento del CrowPanel ESP32 standard da 7 pollici. Questi display sono disponibili in varie dimensioni e risoluzioni, con diversi driver e capacità. La tabella seguente fornisce una panoramica delle diverse opzioni di display:
Configurazione del CrowPanel Advance 7“ Display
Programmare il CrowPanel Advance 7“ Display è un po’ complicato, poiché è necessario installare versioni specifiche delle librerie e del core ESP32. Altre versioni di librerie o core potrebbero funzionare ma non le ho testate.
Installazione Librerie
Per prima cosa, installiamo le librerie necessarie. Vai alla cartella CrowPanel-Advance-HMI-lib che si trova su Google Drive. Da lì scarica il file librariesAdvance7.0.rar cliccando sull’icona di download come mostrato sotto:
librariesAdvance7.0.rar è un file compresso e devi prima estrarlo. Basta cliccare sul file nell’Esplora risorse (su Windows) e copiare il contenuto in un’altra cartella. Nel mio caso, ho copiato il contenuto nella seguente cartella:
c:\Maet\Temp\librariesAdvance7.0\libraries
Lo screenshot sotto mostra parte del contenuto di quella cartella e il tuo contenuto dovrebbe essere simile:
librariesPuoi scegliere qualsiasi altro percorso, ma deve terminare con \libraries, poiché lo useremo nelle impostazioni del percorso per l’Arduino IDE.
L’Arduino IDE memorizza le librerie installate nella cartella \libraries sotto la posizione dello Sketchbook. Potresti sostituire tutte le librerie in quella posizione con quelle scaricate, ma così perderesti tutte le librerie installate in precedenza.
Invece, cambieremo (temporaneamente) il percorso della posizione dello Sketchbook, che è più veloce e facile da ripristinare. Apri il dialogo File -> Preferences e inserisci il percorso c:\Maet\Temp\librariesAdvance7.0 nel campo per la posizione dello Sketchbook come mostrato sotto:
Assicurati di NON aggiungere la cartella \libraries alla fine del percorso. L’Arduino IDE cercherà quella cartella da solo. In altre parole, le librerie scaricate si trovano sotto c:\Maet\Temp\librariesAdvance7.0\libraries ma devi inserire il percorso c:\Maet\Temp\librariesAdvance7.0.
Quando avrai finito di programmare il CrowPanel Advance 7“ Display, potrai riportare il percorso della posizione dello Sketchbook a quello originale e recuperare le tue librerie originali. Su Windows questo è tipicamente c:\Users\<username>\OneDrive\Documents\Arduino.
Installazione core ESP32 versione 3.0.2
Successivamente dobbiamo installare una versione specifica del core ESP32. Apri il BOARDS MANAGER, digita “esp32” nel campo di ricerca e vedrai le schede “esp32 by Espressif Systems” come mostrato sotto:
Se non hai installato le schede ESP32, vedrai un pulsante INSTALL. Se le hai già installate ma non l’ultima versione (come sopra), vedrai invece un pulsante UPDATE.
In ogni caso, clicca sulla lista a discesa e seleziona la versione 3.0.2 come mostrato sotto, poi premi INSTALL.
Nello screenshot puoi vedere che ho già installato la versione 3.0.2 e quindi viene mostrato il pulsante UPDATE. Dovresti vedere lo stesso, una volta installato il Core ESP32 3.0.2. Se hai bisogno di aiuto, dai un’occhiata al nostro How to Program ESP32 with Arduino IDE tutorial.
Seleziona Scheda
Ora dobbiamo selezionare una scheda ESP32 adatta. Nel caso del CrowPanel Advance 7“, scegliamo “ESP32S3 Dev Module”. Per farlo, collega prima il display al computer tramite cavo USB. Poi clicca sul menu a tendina e su “Select other board and port…”:
Si aprirà un dialogo dove puoi digitare “esp32s3 dev” nella barra di ricerca. Vedrai la scheda “ESP32S3 Dev Module” sotto Boards. Cliccaci sopra e sul COM port per attivarla, poi clicca OK:
Potrai selezionare la porta COM solo se il display è collegato al computer via USB.
Impostazioni Scheda
Infine, dobbiamo impostare i parametri corretti per la scheda. Vai al menu Tools come mostrato sotto:
Si aprirà un ampio menu a tendina con le opzioni di impostazione in fondo. Assicurati di impostare i seguenti parametri:
In particolare, la Flash Size deve essere impostata a 16MB, il Partition Scheme a Huge APP e la PSRAM a OPI PSRAM. Puoi trovare informazioni aggiuntive sulla pagina Product Introduction per il CrowPanel Advance 7“ Display.
Disegnare sul CrowPanel Advance 7“ Display
Con la configurazione completata, possiamo iniziare a programmare il display. Il CrowPanel Advance 7“ Display viene fornito con code esempi e video tutorials, tuttavia, tutti usano SquareLine Studio and LVGL per mostrare qualcosa sullo schermo.
Questo è ottimo per interfacce utente più complesse ma un po’ difficile se vuoi iniziare con il display, dato che il codice corrispondente è piuttosto grande e complesso.
L’esempio seguente è molto più semplice e ti mostra come stampare testo sullo schermo e reagire agli input touch usando la libreria LovyanGFX. Se hai seguito la procedura di configurazione descritta prima, avrai già installato la libreria LovyanGFX.
Struttura del Progetto
Per prima cosa, creiamo la cartella necessaria per il progetto. Crea una cartella con il nome “advance7“, con due file al suo interno, chiamati “advance7.ino” e “lgfx_conf.h“:
Poi apri il file advance7.ino nel tuo Arduino IDE. Dovresti vedere le schede per i due file del progetto:
Configurazione LovyanGFX
Nel file lgfx_conf.h copia il seguente codice, che crea la classe LGFX con la configurazione dei pin per il display.
// lgfx_conf.h
#define LGFX_USE_V1
#include <LovyanGFX.hpp>
#include <lgfx/v1/platforms/esp32s3/Panel_RGB.hpp>
#include <lgfx/v1/platforms/esp32s3/Bus_RGB.hpp>
#include <driver/i2c.h>
class LGFX : public lgfx::LGFX_Device {
public:
lgfx::Bus_RGB _bus_instance;
lgfx::Panel_RGB _panel_instance;
lgfx::Touch_GT911 _touch_instance;
LGFX(void) {
{
auto cfg = _panel_instance.config();
cfg.memory_width = 800;
cfg.memory_height = 480;
cfg.panel_width = 800;
cfg.panel_height = 480;
cfg.offset_x = 0;
cfg.offset_y = 0;
_panel_instance.config(cfg);
}
{
auto cfg = _panel_instance.config_detail();
cfg.use_psram = 1;
_panel_instance.config_detail(cfg);
}
{
auto cfg = _bus_instance.config();
cfg.panel = &_panel_instance;
cfg.pin_d0 = GPIO_NUM_21; // B0
cfg.pin_d1 = GPIO_NUM_47; // B1
cfg.pin_d2 = GPIO_NUM_48; // B2
cfg.pin_d3 = GPIO_NUM_45; // B3
cfg.pin_d4 = GPIO_NUM_38; // B4
cfg.pin_d5 = GPIO_NUM_9; // G0
cfg.pin_d6 = GPIO_NUM_10; // G1
cfg.pin_d7 = GPIO_NUM_11; // G2
cfg.pin_d8 = GPIO_NUM_12; // G3
cfg.pin_d9 = GPIO_NUM_13; // G4
cfg.pin_d10 = GPIO_NUM_14; // G5
cfg.pin_d11 = GPIO_NUM_7; // R0
cfg.pin_d12 = GPIO_NUM_17; // R1
cfg.pin_d13 = GPIO_NUM_18; // R2
cfg.pin_d14 = GPIO_NUM_3; // R3
cfg.pin_d15 = GPIO_NUM_46; // R4
cfg.pin_henable = GPIO_NUM_42;
cfg.pin_vsync = GPIO_NUM_41;
cfg.pin_hsync = GPIO_NUM_40;
cfg.pin_pclk = GPIO_NUM_39;
cfg.freq_write = 21000000;
cfg.hsync_polarity = 0;
cfg.hsync_front_porch = 8;
cfg.hsync_pulse_width = 4;
cfg.hsync_back_porch = 8;
cfg.vsync_polarity = 0;
cfg.vsync_front_porch = 8;
cfg.vsync_pulse_width = 4;
cfg.vsync_back_porch = 8;
cfg.pclk_idle_high = 1;
_bus_instance.config(cfg);
}
_panel_instance.setBus(&_bus_instance);
{
auto cfg = _touch_instance.config();
cfg.x_min = 0;
cfg.x_max = 800;
cfg.y_min = 0;
cfg.y_max = 480;
cfg.pin_int = -1;
cfg.bus_shared = false;
cfg.offset_rotation = 0;
cfg.i2c_port = I2C_NUM_0;
cfg.pin_sda = GPIO_NUM_15;
cfg.pin_scl = GPIO_NUM_16;
cfg.pin_rst = -1;
cfg.freq = 400000;
cfg.i2c_addr = 0x5D; // 0x5D , 0x14
_touch_instance.config(cfg);
_panel_instance.setTouch(&_touch_instance);
}
setPanel(&_panel_instance);
}
};
È la configurazione per il display come richiesta dalla libreria LovyanGFX ed è essenzialmente una copia del file LovyanGFX_Driver.h dell’esempio di codice lesson-03. Indica alla libreria quali pin del display e dell’interfaccia touch sono collegati a quali pin GPIO dell’ESP32.
Questo file di configurazione rimane lo stesso per tutti i progetti e puoi copiarlo e incollarlo in progetti diversi, se necessario.
Codice per il disegno
Infine, copia il seguente codice nel file advance7.ino. È un semplice test che scrive del testo sul display e reagisce agli input touch:
#include "lgfx_conf.h"
#include <Wire.h>
#include <Adafruit_GFX.h>
#include <TCA9534.h>
LGFX gfx;
TCA9534 ioex;
void initIOEX() {
Wire.begin(15, 16);
delay(50);
ioex.attach(Wire);
ioex.setDeviceAddress(0x18);
ioex.config(1, TCA9534::Config::OUT);
ioex.config(2, TCA9534::Config::OUT);
ioex.config(3, TCA9534::Config::OUT);
ioex.config(4, TCA9534::Config::OUT);
ioex.output(1, TCA9534::Level::H); // backlight
}
void initGT911() {
pinMode(1, OUTPUT);
digitalWrite(1, LOW);
ioex.output(2, TCA9534::Level::L);
delay(20);
ioex.output(2, TCA9534::Level::H);
delay(100);
pinMode(1, INPUT);
}
void setup() {
initIOEX();
initGT911();
gfx.init();
gfx.fillScreen(TFT_BLUE);
gfx.setTextColor(TFT_WHITE, TFT_BLUE);
gfx.setTextSize(4);
gfx.drawString("Makerguides-4", 250, 200);
}
void loop() {
uint16_t touch_x, touch_y;
if (gfx.getTouch(&touch_x, &touch_y)) {
gfx.fillCircle(touch_x, touch_y, 10, TFT_YELLOW);
}
delay(100);
}
Più specificamente, questo codice riempie lo sfondo del display di blu, scrive il testo “Makerguides-4” e reagisce ai tocchi disegnando un cerchio giallo nel punto in cui lo schermo viene toccato. L’immagine sotto mostra come appare lo schermo dopo alcuni tocchi:
Nelle sezioni successive esamineremo più da vicino il codice e scopriremo come funziona.
Inclusioni
Il codice inizia includendo il file di configurazione del display, la libreria Wire per la comunicazione I2C, la libreria Adafruit_GFX per il disegno e la libreria TCA9534 per l’espansore IO che fa parte del CrowPanel Advance 7“ display:
#include "lgfx_conf.h" #include <Wire.h> #include <Adafruit_GFX.h> #include <TCA9534.h>
Oggetti
Successivamente creiamo gli oggetti per il display e l’espansore IO:
LGFX gfx; TCA9534 ioex;
Funzione initIOEX
La funzione initIOEX inizializza l’espansore IO TCA9534. Questo è necessario per instradare la comunicazione tra il display e l’ESP32 attraverso il numero limitato di canali GPIO.
void initIOEX() {
Wire.begin(15, 16);
delay(50);
ioex.attach(Wire);
ioex.setDeviceAddress(0x18);
ioex.config(1, TCA9534::Config::OUT);
ioex.config(2, TCA9534::Config::OUT);
ioex.config(3, TCA9534::Config::OUT);
ioex.config(4, TCA9534::Config::OUT);
ioex.output(1, TCA9534::Level::H); // backlight
}
Importante è anche l’ultima riga che accende la retroilluminazione del display. Senza la retroilluminazione accesa, non vedrai nulla.
Funzione initGT911
La funzione initGT911 inizializza il controller del touchscreen (GT911) per il display. Questo permette all’ESP32 di reagire agli input touch.
void initGT911() {
pinMode(1, OUTPUT);
digitalWrite(1, LOW);
ioex.output(2, TCA9534::Level::L);
delay(20);
ioex.output(2, TCA9534::Level::H);
delay(100);
pinMode(1, INPUT);
}
Funzione setup
Nella funzione setup inizializziamo l’espansore IO, il GT911 e il display. Poi riempiamo lo schermo di blu e scriviamo il testo “Makerguides-4” approssimativamente al centro, alla posizione (250, 200) in bianco.
void setup() {
initIOEX();
initGT911();
gfx.init();
gfx.fillScreen(TFT_BLUE);
gfx.setTextColor(TFT_WHITE, TFT_BLUE);
gfx.setTextSize(4);
gfx.drawString("Makerguides-4", 250, 200);
}
Funzione loop
Nella funzione loop chiamiamo ripetutamente la funzione gfx.getTouch() per controllare gli input touch. Se c’è un input touch otteniamo la posizione del tocco dalle variabili touch_x e touch_y, e disegniamo un cerchio pieno giallo con raggio di 10 pixel nella posizione del tocco.
void loop() {
uint16_t touch_x, touch_y;
if (gfx.getTouch(&touch_x, &touch_y)) {
gfx.fillCircle(touch_x, touch_y, 10, TFT_YELLOW);
}
delay(100);
}
Se compili e carichi il codice noterai che l’Arduino IDE ti avvisa che sono disponibili aggiornamenti per le tue schede e librerie.
Non installare questi aggiornamenti, poiché sostituirebbero le versioni specifiche di librerie e schede che abbiamo appena installato durante la configurazione.
Versione display 1.0 vs 1.2
C’è un problema con la versione precedente V1.0 del CrowPanel Advance 7“ display di cui dovresti essere consapevole. Puoi trovare la versione del tuo display sul retro della PCB. Vedi la foto sotto. Se il tuo display ha l’alloggiamento in acrilico, dovrai rimuovere la piastra posteriore per vedere il numero di versione.
I moduli H2 e C6 per la comunicazione wireless forniti con il lotto V1.0 del display non hanno firmware preinstallato. Purtroppo, non puoi collegare direttamente un programmatore seriale per flashare il firmware necessario, poiché mancano i pin header. Dovrai saldare i pin, flashare il firmware e poi rimuoverli.
Per maggiori dettagli vedi https://github.com/Elecrow-RD/CrowPanel-Advance-5.0-HMI-ESP32-AI-Display-800×480/tree/master/example/example_code5.0/lesson-09.
Nota che ci sono anche differenze negli schemi elettrici tra Version 1.0 e l’attuale Version 1.2, che potrebbero essere importanti per alcune applicazioni.
Conclusioni
Spero che questo tutorial ti abbia aiutato a iniziare con il CrowPanel Advance 7“ HMI Display. Abbiamo fornito un semplice esempio di codice su come scrivere testo sul display e reagire agli input touch. Per molte applicazioni questo dovrebbe essere un buon punto di partenza.
Se vuoi costruire interfacce utente più avanzate, SquareLine Studio and LVGL sono la strada da seguire, ma sono anche più difficili da usare e il codice è molto più complesso.
Elecrow fornisce anche diversicode esempi e video tutorials che mostrano come usare l’altoparlante, l’interfaccia scheda SD, le varie opzioni wireless e come costruire applicazioni AI, come un Chat Bot.
Se ti serve un CrowPanel Display più piccolo e semplice, dai un’occhiata al nostro CrowPanel 2.8″ ESP32 Display : Easy Setup Guide. Abbiamo anche alcuni tutorial su applicazioni con CrowPanel Displays come Digital Clock with CrowPanel 3.5″ ESP32 Display, Digital Timer Switch with CrowPanel ESP32 Display o il Parking sensor with CrowPanel ESP32 Display, che potrebbero interessarti.
Se hai domande, sentiti libero di lasciarle nella sezione commenti.
Buon divertimento con il tinkering ; )
Link
Qui sotto alcuni link per il CrowPanel Advance 7“ HMI Display che ho trovato utili mentre scrivevo questo tutorial:
- Wiki
- Specification
- Setup Instructions
- Code Examples
- Code for Wireless Modules
- Video Tutorials
- Schematics Version 1.0
- Schematics Version 1.2
