Skip to Content

Disegna sul display CrowPanel Pico 4.3″

Disegna sul display CrowPanel Pico 4.3″

In questo tutorial imparerai come iniziare a utilizzare il CrowPanel Pico 4.3″ Display di ELECROW. I display CrowPanel sono fantastici perché hanno praticamente tutto ciò di cui hai bisogno già integrato. Questo include un touch screen, un RP2040, uno slot per TF Card, un connettore per batteria con caricatore, un’interfaccia I2C e persino un buzzer.

Tuttavia, i primi passi con il CrowPanel Pico possono essere un po’ complicati. Speriamo che questo tutorial, con alcuni semplici esempi di codice, possa aiutarti.

Nota che ci riferiamo specificamente alla versione con display da 4,3″. Gli altri schermi più piccoli della serie CrowPanel Pico utilizzano driver e touch screen diversi, quindi gli esempi di codice non funzioneranno per quelli.

Iniziamo con la lista dei componenti necessari.

Componenti necessari

Ovviamente ci servirà il CrowPanel Pico Display da 4,3″. E se vuoi collegare dell’hardware esterno per testare la porta GPIO, saranno utili alcuni cavi, resistenze, LED e una breadboard.

CrowPanel Pico 4.3″ 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 Pico 4.3″ Display

ELECROW offre diversi display CrowPanel con microcontrollori integrati come ESP32 o RP2040. Per i display basati su ESP32 dai un’occhiata ai nostri tutorial CrowPanel 2.8″ ESP32 Display : Easy Setup Guide e Digital Clock with CrowPanel 3.5″ ESP32 Display .

CrowPanel Pico 4.3" Display
CrowPanel Pico 4.3″ Display ( source )

In questo tutorial scriveremo del codice per il CrowPanel Pico 4.3″ Display, che è basato su RP2040. Rispetto all’ESP32, il chip RP2040 è meno potente ma anche più economico, e questo si riflette nel prezzo dei display CrowPanel Pico.

Specifiche tecniche

Le principali specifiche del CrowPanel Pico 4.3″ Display sono le seguenti:

  • Display Pico 4.3″: risoluzione 320*240, pannello IPS, touch capacitivo e supporto multi-touch
  • Microcontrollore Raspberry Pi RP2040 (ARM Cortex-M0+): chip dual-core a 32 bit con frequenza massima di 133 MHz.
  • Connessione wireless BW16: supporta IEEE 802.11b/g/n a 4GHz e gamma di frequenza 5GHz, supporta Bluetooth 5.0 e BLE
  • Efficienza energetica: supporta modalità sleep e ibernazione a basso consumo, favorendo il risparmio energetico e l’attenzione all’ambiente.
  • Interfacce: I2C, UART, porte IO, USB, interfaccia per batteria al litio e allarme buzzer

Altri display CrowPanel Pico

Come accennato, ci sono diversi altri CrowPanel Pico Displays with different display sizes ma tutti utilizzano l’RP2040 come microcontrollore.

Other CrowPanel Pico Displays
Altri display CrowPanel Pico ( source )

Il CrowPanel Pico 4.3″ Display (evidenziato in giallo) utilizzato in questo tutorial si distingue per il pannello IPS, il touch screen capacitivo e il maggior numero di connettori.

Connettori del CrowPanel Pico 4.3″ Display

In questa sezione descriveremo in dettaglio il pinout dei vari connettori del display. Se guardi il retro del CrowPanel Pico 4.3″ Display puoi vedere che ci sono 5 connettori bianchi, una porta GPIO, una porta USB e UART, uno slot per TF card e due pulsanti (boot, reset).

Back of CrowPanel Pico 4.3" Display
Retro del CrowPanel Pico 4.3″ Display

Nota che le etichette dei pulsanti boot e reset sul retro sono invertite! Se apri il case e guardi la scheda all’interno, puoi vedere che il pulsante in alto è in realtà “reset” e quello sotto è “boot”, come indicato sul silk screen.

CrowPanel Pico 4.3" Display Board
Scheda CrowPanel Pico 4.3″ Display ( source )

Anche l’etichettatura dei pin per la porta GPIO in alto è errata. Ci sono solo 15 etichette ma i pin sono 16 (manca l’etichetta per GPIO2), che secondo il schematics e il silk screen sono i seguenti:

Silk screen for GPIO port
Silk screen per porta GPIO ( source )

Quindi, dal fronte della porta GPIO il pinout è come mostrato qui sotto:

Pinout of GPIO port
Pinout della porta GPIO

Accanto alla porta GPIO ci sono tre connettori I2C, ADC e GPIO_2 che espongono i seguenti pin GPIO:

Pinout of GPIO_D, ADC and I2C connectors
Pinout dei connettori GPIO_D, ADC e I2C (in alto)

Come puoi vedere, ci sono pin inutilizzati per i connettori GPIO_D e I2C. GPIO26, GPIO27 e GPIO28 sono pin ADC che possono essere usati per leggere segnali analogici. Infine, c’è un’altra porta GPIO_D sul lato della scheda, con il seguente pinout:

Pinout of GPIO_D port (side)
Pinout della porta GPIO_D (lato)

Inoltre, c’è un connettore per batteria LiPo, e i connettori USB e UART.

Installazione del core RP2040

Prima di poter programmare l’RP2040 all’interno di un CrowPanel Pico Display, devi prima installare il core RP2040. Vai su File -> Preferenze e apri la finestra delle Preferenze

File -> Preferences Menu
Menu File -> Preferenze

Nella finestra delle Preferenze vai alla scheda Impostazioni . In basso vedrai “URL aggiuntivi per il gestore schede:”. Clicca sul pulsante a destra (evidenziato in giallo) per aprire l’editor degli URL

Settings Tab in Preferences Dialog
Scheda Impostazioni nella finestra Preferenze

Nell’editor degli URL aggiungi il seguente URL all’elenco (evidenziato in giallo qui sotto):
“https://github.com/earlephilhower/arduino-pico/releases/download/global/package_rp2040_index.json”

Add package_rp2040_index URL to board manager
Aggiungi l’URL package_rp2040_index al gestore schede

Come puoi vedere sopra, ho installato anche i core ESP8266 ed ESP32 ma per questo progetto serve solo il core RP2040.

Installazione delle schede RP2040

Ora dobbiamo installare le schede RP2040. Vai su Tools -> Board -> Board Manager e cerca pico nella barra di ricerca. Installa le schede Raspberry Pi Pico/RP2040 di Earle F. Philhower. Dopo l’installazione dovrebbe apparire così.

Raspberry Pi Pico/RP2040 board
Installa la scheda Raspberry Pi Pico/RP2040 

Seleziona la scheda Adafruit Feather RP2040 DVI

Una volta completata l’installazione del core RP2040, vai nel Board Manager e seleziona la scheda “Adafruit Feather RP2040 DVI” come mostrato qui sotto:

Adafruit Feather RP2040 DVI nel Board Manager

Ora siamo pronti per programmare il CrowPanel Pico Display.

Test della porta GPIO_D del CrowPanel Pico 4.3″ Display

Iniziamo con un semplice programma Blink per testare che possiamo effettivamente programmare il display. Collega un LED con una resistenza (100…220Ω) alla porta GPIO_D sul lato del display come mostrato qui sotto

Connecting LED to GPIO_D
Collegamento LED a GPIO_D

Il catodo del LED va collegato al pin GND della porta GPIO_D e il pin più a destra della porta è GPIO22, che va collegato alla resistenza e al pin positivo del LED.

Poi carica il seguente programma blink sulla scheda (Adafruit Feather RP2040 DVI) e il LED dovrebbe iniziare a lampeggiare.

const int ledPin = 22;

void setup() {
  pinMode(ledPin, OUTPUT);
}

void loop() {
  digitalWrite(ledPin, HIGH);
  delay(500);
  digitalWrite(ledPin, LOW);
  delay(500);
}

Non è necessario tenere premuto il pulsante boot o reset per mettere la scheda in modalità programmazione.

Nota che il pin GPIO22 è un pin PWM, quindi puoi anche regolare la luminosità del LED. Ecco la relativa loop() funzione per testarlo.

void loop() {
  for (int b=0; b<=255; b++) {
    analogWrite(ledPin, b);
    delay(10);
  }
}

Se tutto funziona, ora possiamo provare qualcosa di più interessante. Nelle prossime sezioni, prima scriveremo sul display, poi testeremo il touchscreen e infine implementeremo una semplice applicazione Scribble.

Scrivere sul CrowPanel Pico 4.3″ Display

Prima di poter disegnare o scrivere qualcosa sul Pico Display dobbiamo installare la PicoDVI library . Apri il Library Manager, cerca PicoDVI e installa PicoDVI – Adafruit Fork di Luke Wren come mostrato qui sotto:

PicoDVI Library installed in Library Manager
Libreria PicoDVI installata nel Library Manager

Una volta installata la libreria possiamo scrivere e disegnare sul display. Qui sotto un breve programma di test che scrive il testo “Makerguides” sul display:

// Display code example for CrowPanel Pico 4.3" Display
// by Makerguides

#include <PicoDVI.h>

DVIGFX16 disp(DVI_RES_320x240p60, picodvi_dvi_cfg);

void setup() {
  if (!disp.begin())
    ;
  disp.setRotation(0);
  disp.fillScreen(0x0000);
  disp.setTextSize(3);
  disp.setCursor(10, 10);
  disp.print("Makerguides");
}

void loop() {
}

Il codice inizia includendo la PicoDVI library e creando l’oggetto display.

#include <PicoDVI.h>

DVIGFX16 disp(DVI_RES_320x240p60, picodvi_dvi_cfg);

La parte più importante qui è impostare la risoluzione corretta ( DVI_RES_320x240p60 ) che corrisponde alla risoluzione hardware del display. Nel nostro caso è 320×240 pixel. Nota che la PicoDVI library offre constructors for framebuffers with different depths . Qui stiamo definendo un framebuffer a 16 bit ( DVIGFX16 ), ma c’è anche DVIGFX8 e DVIGFX1 .

Nella funzione setup aspettiamo il display, impostiamo l’orientamento, riempiamo lo sfondo di nero, impostiamo la dimensione del testo e infine scriviamo il testo alla posizione (10,10).

void setup() {
  if (!disp.begin())
    ;
  disp.setRotation(0);
  disp.fillScreen(0x0000);
  disp.setTextSize(3);
  disp.setCursor(10, 10);
  disp.print("Makerguides");
}

Se carichi il codice dovresti vedere il testo “Makerguides” sul display come mostrato qui sotto.

Text written to CrowPanel Pico Display
Testo scritto sul CrowPanel Pico Display

Nota che la libreria PicoDVI deriva da Adafruit-GFX-Library e ha molte più funzioni. Ad esempio, puoi scegliere font diversi e disegnare anche grafica. Useremo alcune di queste funzioni per implementare la nostra applicazione Scribble.

Nella prossima sezione, però, prima faremo funzionare il touchscreen.

Utilizzare il touchscreen del CrowPanel Pico 4.3″ Display

Secondo il code examples per il CrowPanel Pico 4.3″ Display, il touchscreen può essere controllato con la gt911-arduino library di TANCtec. Tuttavia, né l’esempio di codice ( TouchPrint.ino ) ha funzionato; né sono riuscito a far funzionare il mio codice con la gt911-arduino library originale. C’è qualche problema nell’impostare i pin SDA e SCL nella Wire library che non ho approfondito.

Quello che invece ha funzionato è stato copiare i file TAMC_GT911.h e TAMC_GT911.c dell’esempio di codice TouchPrint in una nuova cartella di progetto ( MyTouchPrint ) e usare il codice che ti mostro qui sotto. La tua cartella di progetto dovrebbe apparire così e puoi scaricare il mio esempio MyTouchPrint .

Contents of MyTouchPrint project folder
Contenuto della cartella di progetto MyTouchPrint

Il seguente codice stampa semplicemente le coordinate (e la dimensione del tocco) sul touchscreen dove viene rilevato un nuovo tocco.

// Touchscreen code example for CrowPanel Pico 4.3" Display
// by Makerguides
#include "TAMC_GT911.h"

#define TS_SCL 21
#define TS_SDA 20
#define TS_INT 25
#define TS_RST 29
#define TS_WIDTH 800
#define TS_HEIGHT 480

TAMC_GT911 ts = TAMC_GT911(TS_SDA, TS_SCL, TS_INT, TS_RST, TS_WIDTH, TS_HEIGHT);

void ts_init() {
  ts.begin();
  ts.setRotation(ROTATION_INVERTED);
  delay(100);
}

void ts_process() {
  static uint16_t ox = 0, oy = 0;
  uint16_t x = ts.points[0].x;
  uint16_t y = ts.points[0].y;
  uint8_t s = ts.points[0].size;
  if (x != ox || y != oy) {
    ox = x; oy = y;
    Serial.printf("P: %4d %4d (%d)\n", x, y, s);
  }
}

void setup() {
  Serial.begin(9600);
  ts_init();
}

void loop() {
  ts.read();
  if (ts.isTouched) {
    ts_process();
  }
}

Il codice inizia includendo la libreria TAMC_GT911, i cui file abbiamo copiato nella cartella di progetto MyTouchPrint . Poi definiamo i pin di controllo del touchscreen e la dimensione del touchscreen (800×400). Infine, usiamo queste costanti per creare l’oggetto touchscreen TAMC_GT911 ts .

#include "TAMC_GT911.h"

#define TS_SCL 21
#define TS_SDA 20
#define TS_INT 25
#define TS_RST 29
#define TS_WIDTH 800
#define TS_HEIGHT 480

TAMC_GT911 ts = TAMC_GT911(TS_SDA, TS_SCL, TS_INT, TS_RST, TS_WIDTH, TS_HEIGHT);

Funzione ts_init

La funzione ts_init () inizializza il touchscreen chiamando ts.begin () e impostando l’orientamento dello schermo (modalità verticale). Ho aggiunto un breve delay, perché il touchscreen tendeva a rilevare tocchi casuali all’avvio.

void ts_init() {
  ts.begin();
  ts.setRotation(ROTATION_INVERTED);
  delay(100);
}

Funzione ts_process

La funzione ts_process() , gestisce gli eventi touch. Ricorda le coordinate del tocco precedente ( ox, oy ) e reagisce solo ai nuovi tocchi. Se le nuove coordinate ( x, y ) sono diverse da quelle precedenti ( ox, oy ), stampa le coordinate e la dimensione del tocco.

void ts_process() {
  static uint16_t ox = 0, oy = 0;
  uint16_t x = ts.points[0].x;
  uint16_t y = ts.points[0].y;
  uint8_t s = ts.points[0].size;
  if (x != ox || y != oy) {
    ox = x; oy = y;
    Serial.printf("P: %4d %4d (%d)\n", x, y, s);
  }
}

Il controller touchscreen GT911 è davvero interessante. Non solo può rilevare la dimensione del tocco (pollice vs punta del dito), ma è anche multitouch e può rilevare fino a 5 tocchi simultanei. Tuttavia, il codice sopra riporta solo il primo ( points[0] ).

Funzione setup

Nella funzione setup() , inizializziamo solo la comunicazione seriale e il touchscreen. Assicurati di impostare il baud rate del Serial Monitor a 9600 baud.

void setup() {
  Serial.begin(9600);
  ts_init();
}

Funzione loop

Infine, abbiamo la funzione loop() . Legge il touchscreen, controlla se è stato rilevato un tocco e, in caso affermativo, lo gestisce.

void loop() {
  ts.read();
  if (ts.isTouched) {
    ts_process();
  }
}

Output su Serial Monitor

Se carichi il codice e poi tocchi i quattro angoli dello schermo dovresti vedere coordinate simili a queste stampate sul Serial Monitor.

Touch coordinates printed to Serial Monitor
Coordinate touch stampate su Serial Monitor

Problemi

A volte ho riscontrato strani problemi, dove il touchscreen non rilevava i tocchi o segnalava “auto-switch to second address”, che non aiutava. Il GT911 supporta due indirizzi I2C: 0xBA/0xBB e 0x28/0x29, e la TAMC_GT911 libreria prova il secondo indirizzo se non trova il touchscreen al primo.

Resettare o scollegare il display aiutava e il problema si presentava raramente. Ma sembra esserci qualche problema di affidabilità e non so da cosa dipenda. Il display era alimentato via USB, quindi non può essere l’alimentazione.

Scribble sul CrowPanel Pico 4.3″ Display

A questo punto hai imparato come scrivere sul display e come rilevare i tocchi. Uniamo tutto e costruiamo una piccola applicazione Scribble che permette all’utente di disegnare sul display con il dito.

Sarà un esempio minimale, con un solo colore di disegno, ma puoi facilmente estenderlo a più colori e multitouch. Ecco il codice completo.

// Scribble code example for CrowPanel Pico 4.3" Display
// by Makerguides

#include "PicoDVI.h"
#include "TAMC_GT911.h"

#define TS_SCL 21
#define TS_SDA 20
#define TS_INT 25
#define TS_RST 29
#define TS_WIDTH 800
#define TS_HEIGHT 480

DVIGFX16 disp(DVI_RES_320x240p60, picodvi_dvi_cfg);
TAMC_GT911 ts = TAMC_GT911(TS_SDA, TS_SCL, TS_INT, TS_RST, TS_WIDTH, TS_HEIGHT);

uint16_t rgb(byte r, byte g, byte b) {
  return ((r & 0xF8) << 8) | ((g & 0xFC) << 3) | (b >> 3);
}

void ts_init() {
  ts.begin();
  ts.setRotation(ROTATION_INVERTED);
  delay(100);
}

void ts_process() {
  static uint16_t ox = 0, oy = 0;
  uint16_t x = ts.points[0].x;
  uint16_t y = ts.points[0].y;
  uint8_t s = ts.points[0].size;
  if (x != ox || y != oy) {
    ox = x; oy = y;
    int16_t sx = map(x, 0, TS_WIDTH, 0, disp.width());
    int16_t sy = map(y, 0, TS_HEIGHT, 0, disp.height());
    tone(19, 100, 10);
    disp.fillCircle(sx, sy, s / 3, rgb(255, 255, 100));
  }
}

void disp_init() {
  if (!disp.begin())
    ;
  disp.setRotation(0);
  disp.fillScreen(rgb(0, 0, 0));
  disp.setTextSize(1);
  disp.setCursor(10, 10);
  disp.print("Scribble");
}

void setup() {
  disp_init();
  ts_init();
}

void loop() {
  ts.read();
  if (ts.isTouched) {
    ts_process();
  }
}

Come prima, dovrai aver installato PicoDVI. E i file TAMC_GT911.h e TAMC_GT911.c vanno copiati nella cartella del tuo progetto.

Librerie e oggetti

La creazione dell’oggetto display DVIGFX16 disp e dell’oggetto touchscreen TAMC_GT911 ts , è la stessa degli esempi precedenti.

Funzione rgb

La funzione rgb() converte un RGB color in un RGB565 (or 16 bit) color , che sono i codici colore usati dalla libreria PicoDVI. Puoi usare un RGB55 color picker per trovare il codice di colori specifici, ma i colori RGB sono più comuni e facili da usare. Ho quindi implementato questa semplice funzione di conversione che trasforma un colore RGB in un colore RGB565.

uint16_t rgb(byte r, byte g, byte b) {
  return ((r & 0xF8) << 8) | ((g & 0xFC) << 3) | (b >> 3);
}

Funzione ts_init

La funzione ts_init() rimane come prima. Avvia il touchscreen e imposta l’orientamento. Per altri orientamenti dello schermo dai un’occhiata al TAMC_GT911.h file .

Funzione ts_process

La funzione ts_process() è leggermente estesa rispetto all’esempio touchscreen visto prima. In particolare, converte le coordinate touchscreen ad alta risoluzione (800, 480) nelle coordinate a bassa risoluzione (320, 240) del display usando la map function .

void ts_process() {
  static uint16_t ox = 0, oy = 0;
  uint16_t x = ts.points[0].x;
  uint16_t y = ts.points[0].y;
  uint8_t s = ts.points[0].size;
  if (x != ox || y != oy) {
    ox = x; oy = y;
    int16_t sx = map(x, 0, TS_WIDTH, 0, disp.width());
    int16_t sy = map(y, 0, TS_HEIGHT, 0, disp.height());
    tone(19, 100, 10);
    disp.fillCircle(sx, sy, s / 3, rgb(255, 255, 100));
  }
}

Quando viene rilevato un tocco, viene riprodotto un breve suono usando la funzione tone() , e poi viene disegnato un cerchio giallo alle coordinate convertite ( sx, sy ) con un raggio proporzionale alla dimensione del tocco ( s/3 ).

Il codice usa il buzzer interno collegato a GPIO19. Non ho dovuto impostare il pin come OUTPUT per il buzzer, ma forse è meglio farlo comunque.

Funzione disp_init

La funzione disp_init() inizializza il display e l’unica differenza è che scriviamo il testo “Scribble” invece di “Makerguides”. Questo ci dice semplicemente che l’applicazione è pronta. Ma potresti anche riprodurre un suono invece.

Funzioni setup e loop

Nella funzione setup() chiamiamo le funzioni di inizializzazione per il display e il touchscreen, mentre la funzione loop() rimane invariata.

Esempio di output sullo schermo

Se carichi il codice e tocchi lo schermo dovresti riuscire a disegnare “cerchi” di diametro diverso usando la punta del dito o il pollice, come mostrato qui sotto:

Circles drawn on display at touch points
Cerchi disegnati sul display nei punti di tocco

Poiché la risoluzione dello schermo è 320×240 e non corrisponde alle dimensioni fisiche, i “cerchi” appaiono come ellissi.

E con questo il tutorial è completo. Ora hai una piccola applicazione Scribble che puoi estendere come preferisci.

Conclusioni

In questo tutorial hai imparato come controllare il CrowPanel Pico 4.3″ Display. In particolare, abbiamo visto esempi di codice su come rilevare i tocchi e come disegnare sullo schermo.

Il CrowPanel Pico 4.3″ ha un display IPS con buoni angoli di visuale e colori. La PicoDVI library , che è un fork della Adafruit-GFX-Library è stata semplice da configurare ed è molto più facile da usare rispetto al codice di esempio fornito da SquareLine Studio. D’altra parte, SquareLine Studio permette di creare interfacce utente molto più avanzate e accattivanti.

Il touchscreen capacitivo del CrowPanel Pico 4.3″ Display è sensibile e può rilevare dimensione e multitouch – permettendo il riconoscimento di gesture come pinch o rotazione. Tuttavia, l’esempio di codice fornito non ha funzionato per me e capire come rilevare i tocchi è stato piuttosto lungo. Spero che l’esempio in questo tutorial ti sia utile.

Allo stesso modo, spero che la documentazione di GPIO_D, ADC e I2C ti sia utile e renda più facile usare il display nei tuoi progetti. Se hai domande, sentiti libero di lasciarle nei commenti.

Buon divertimento con i tuoi progetti ; )