Progettare una GUI con la libreria Adafruit GFX per Arduino

Lavorare con i display TFT può rilevarsi un’attività molto divertente e un plus per rendere più accattivanti i propri progetti. Ci sono infinite soluzioni e tra le più veloci e immediate per iniziare a lavorare con la grafica c’è sicuramente Arduino UNO abbinata ad una delle innumerevoli shield disponibili. Tuttavia, non basta scegliere semplicemente l’hardware su cui lavorare. Anche se sono già presenti delle librerie nella IDE di Arduino, è necessario prendere dimestichezza con le funzionalità base per capire come poter sviluppare le proprie interfacce. In particolare, in questo articolo andremo ad osservare nel dettaglio la realizzazione di queste interfacce ricorrendo all’utilizzo delle librerie Adafruit GFX e TFT-LCD.

Introduzione

Realizzare un’interfaccia grafica per il nostro progetto con Arduino UNO è un plus che ci consente di renderlo più accattivante e anche maggiormente coinvolgente, soprattutto se decidiamo di integrare anche le funzionalità touch. In questo articolo, affronteremo nel dettaglio tutte le funzionalità base delle librerie Adafruit GFX e TFT-LCD per iniziare a realizzare le interfacce grafiche e capirne le tecniche e gli strumenti a disposizione.

Per questo tutorial passo-passo il materiale occorrente è il seguente:

Board Arduino UNO Rev3 o compatibile (a dirla tutta, nel mio parco schede ho provato con soddisfazione anche una ELEGOO UNO rev3).
Display OPEN-SMART 3.2: è uno di quelli che si trovano sui siti cinesi e costa meno di 10€. Ce ne sono in commercio molti che differiscono per produttore e per dimensioni. Potete scegliere quello che più vi piace, dovendo però riadattare le librerie da utilizzare con il software.

La scheda Arduino UNO offre innumerevoli spunti per realizzare qualsivoglia progetto creativo. Le shield di espansione sono infinite ed offrono sensori, trasduttori, relè, pulsanti e anche display. Proprio questi ultimi sono presenti in diverse tipologie e funzionalità a seconda delle dimensioni e della tecnologia utilizzata. I più diffusi sono sicuramente i display LCD (a cristalli liquidi) dal costo ridottissimo, tuttavia, troviamo anche diversi display TFT che consentono la realizzazione di vere e proprie interfacce grafiche per il nostro progetto, tra cui la shield OPEN-SMART 3.2" per Arduino. Questa scheda presenta sul lato top il display TFT con touch (come si vede in Figura 1) e sul lato bottom (Figura 2) gli integrati di gestione dello stesso (ad opera dell’integrato ILI9327). Inoltre, sul bottom vediamo la presenza di uno slot per microSD e di un sensore di temperatura che consente di aggiungere ulteriori funzionalità al nostro progetto.

Figura 1: Lato Top della shield OPEN-SMART 3.2"

Figura 2: Lato Bottom della shield OPEN-SMART 3.2"

Le librerie

Per poter lavorare con questa tipologia di display andiamo ad installare la libreria MCUFRIEND_kbv, che di fatto consente di rendere compatibile il proprio progetto con la shield. Io ho installato l’ultima versione disponibile, ossia la 3.0.0. Durante l’installazione saranno installate anche altre librerie di supporto come la Adafruit GFX che viene sfruttata pienamente per la progettazione dell'interfaccia grafica. Una volta installata, possiamo già effettuare una prova semplice ed immediata delle funzionalità andando ad usare l’esempio graphictest_kbv disponibile nel menu File -> Examples -> Mcufriend_kbv. Con questo esempio possiamo vedere all’opera tutte le funzionalità con una demo completa, e ovviamente come secondo fine possiamo controllare che tutti i collegamenti tra la scheda Arduino e il display OpenSmart siano corretti.

Di seguito, andremo ad approfondire le funzioni che abbiamo a disposizione nelle librerie, e nel dettaglio vedremo:

le funzioni di gestione del display
le funzioni base per disegnare figure geometriche
le funzioni per scrivere testo

Funzioni di gestione del display

Le librerie che abbiamo installato forniscono tutte le funzioni necessarie alla corretta gestione del display. Tra queste troviamo sia funzioni di inizializzazione che funzioni utili a gestire i parametri fondamentali del display stesso. Di seguito riporto una breve descrizione:

tft.reset( ) Attraverso questa funzione è possibile effettuare un reset della configurazione del display, da utilizzare soprattutto in fase di inizializzazione.
tft.begin ("identifier") che consente di inizializzare il tutto per poter iniziare a lavorare con il display. Il parametro da passare a tale funzione è l'identificatore del display che si ottiene con la seguente funzione.
tft.readID( ) Questa funzione consente di acquisire l’identificatore del display.
tft.setRotation ("value") la funzione consente di gestire la rotazione dello schermo in modo tale da usarlo in verticale (value uguale a 0) o in orizzontale (value uguale a 1). Eventualmente si può anche capovolgere in verticale (value uguale a 2) o in orizzontale(value uguale a 3).
tft.invertDisplay ("value") La funzione consente di invertire i colori del display con un unico comando. Il parametro da passare è semplicemente un booleano true/false.
tft.width() Con questa funzione è possibile acquisire la larghezza del display in pixel.
tft.height() Con questa funzione, in maniera del tutto duale alla larghezza, è possibile acquisire la misura dell'altezza del display espressa in pixel. Preciso che il risultato di queste due acquisizioni è funzione anche dell'orientamento del display. Cambiando orientamento di fatto le misure larghezza e altezza si scambiano tra loro.

Di seguito riporto una tipica realizzazione di funzione di setup per poter lavorare con il display OPEN-SMART 3.2". Ovviamente, all’interno della funzione di setup potremmo aggiungere tutto ciò che ci serve oltre al display, come ad esempio l’inizializzazione della seriale, di eventuali sensori e via dicendo.

void setup()
{
tft.reset();
uint16_t identifier = tft.readID();
if (identifier == 0xEFEF) identifier = 0x9486;
tft.begin(identifier);
tft.setRotation (0); 
}

Funzioni base per disegnare figure geometriche

Andiamo ora a vedere quali funzioni mette a disposizione la libreria Adafruit GFX per poter realizzare le nostre interfacce grafiche. Di seguito riporto una breve descrizione delle funzionalità base più importanti che possiamo utilizzare per la composizione della parte grafica. Queste sono:

[...]

ATTENZIONE: quello che hai appena letto è solo un estratto, l'Articolo Tecnico completo è composto da ben 2296 parole ed è riservato agli ABBONATI. Con l'Abbonamento avrai anche accesso a tutti gli altri Articoli Tecnici che potrai leggere in formato PDF per un anno. ABBONATI ORA, è semplice e sicuro.