Parte 2 di 5: configuriamo il display
Dopo la lezione dedicata alla parte generale del display, oggi vediamo come configurare la parte dedicata al display.
Questo modello, ha un “difetto”,la parte grafica e la parte touch sono gestiti dagli stessi pin, quindi se decidete di usarlo per un progetto che non richiede l’uso del touch, non avrete modo di liberare pin in Arduino, cosa che potrebbe creare problemi se dovete collegare altre periferiche.
Materiale Necessario
Se siete interessati al materiale, cliccate su questo e sarete indirizzati alla pagina Amazon
Ho trattato la configurazione dei PIN nell’articolo precedente ( ecco il link), quindi qui mi dedicherò alla compilazione di un piccolo sketch di esempio.
Prima di iniziare, occorre installare le librerie MCUFRIEND_kbv ed Adafruit_GFX, occorre anche una terza libreria denominata SPI, ma dovrebbe già essere presente di default.
Una volta installate le librerie, occorre apportare una semplice modifica al file MCUFRIEND_kbv.cpp della libreria MCUFRIEND.
Aprite il file con un editor e cercate la riga con la voce “support 8347D”, questa dovrebbe essere commentata, togliete “//”, così da attivare il riconoscimento del chip inserito nel display.
Finita questa parte iniziamo a scrivere un semplice scketch.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 |
#define LCD_CS A3 #define LCD_CD A2 #define LCD_WR A1 #define LCD_RD A0 #define LCD_RESET A4 #include <SPI.h> #include "Adafruit_GFX.h" #include <MCUFRIEND_kbv.h> #define BLACK 0x0000 #define BLUE 0x001F #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define MAGENTA 0xF81F #define YELLOW 0xFFE0 #define WHITE 0xFFFF MCUFRIEND_kbv tft; int n = 0; const int c[8] = {0x0000, 0x001F, 0xF800, 0x07E0, 0x07FF, 0xF81F, 0xFFE0, 0xFFFF}; void setup() { int id = tft.readID(); tft.begin(id); tft.setRotation(1); tft.setTextSize(2); tft.fillRect(0, 0, 320, 240, BLACK); tft.setCursor(15, 0); tft.setTextColor(GREEN, BLACK); tft.println("HOBBYEIDEE.ALTERVISTA.ORG"); } void loop() { int i; int Cx; int Cy; i= random(8); Cx = random(20, 200); Cy = random(40, 80); tft.fillRect(0, 20, 320, 220, c[i+2]); tft.setTextSize(6); tft.setTextColor(c[i]); tft.setCursor(Cx, Cy); tft.println(n); n++; tft.setTextColor(c[i]); tft.setCursor(20, 200); tft.setTextSize(3); tft.println("TEST DISPLAY TFT"); delay(1000); } |
Sketch un po lungo, ma niente di così complicato, inizio ad analizzarlo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
#define LCD_CS A3 #define LCD_CD A2 #define LCD_WR A1 #define LCD_RD A0 #define LCD_RESET A4 #include <SPI.h> #include "Adafruit_GFX.h" #include <MCUFRIEND_kbv.h> #define BLACK 0x0000 #define BLUE 0x001F #define RED 0xF800 #define GREEN 0x07E0 #define CYAN 0x07FF #define MAGENTA 0xF81F #define YELLOW 0xFFE0 #define WHITE 0xFFFF MCUFRIEND_kbv tft; |
Con i primi cinque #define, do i nomi richiesti dalla libreria ai pin di Arduino a cui è collegato il display.
Successivamente indico le librerie da usare, quella SPI per il protocollo di comunicazione e successivamente le altre due installate in precedenza.
I #define successivi, sono facoltativi ma, possono tornare utili per non scrivere ogni volta il codice HEX del colore, ma richiamarlo tramite nome.
Per finire, altro passaggio richiesto dalla libreria, dichiaro l’oggetto principale MCUFRIEND_kbv con il nome tft.
|
1 2 |
int n = 0; const int c[8] = {0x0000, 0x001F, 0xF800, 0x07E0, 0x07FF, 0xF81F, 0xFFE0, 0xFFFF}; |
Dichiaro due variabili, che mi serviranno nel loop, una di tipo “int” ed una di tipo “const int” che assumerà massimo 8 valori, contenuti all’interno delle parentesi graffe.
Il setup, ha una configurazione un pò strana, ma la libreria MCFRIEND richiede questa procedura.
|
1 2 3 4 5 6 7 8 9 10 |
void setup() { int id = tft.readID(); tft.begin(id); tft.setRotation(1); tft.setTextSize(2); tft.fillRect(0, 0, 320, 240, BLACK); tft.setCursor(15, 0); tft.setTextColor(GREEN, BLACK); tft.println("HOBBYEIDEE.ALTERVISTA.ORG"); } |
In breve nel setup chiediamo al display di darci il suo ID identificativo che Arduino salverà in una variabile di tipo int, chiamata nel mio caso “id”.
Questo valore servirà per inizializzare il display tramite il comando “begin”, fatto questo il display è inizializzato e si può passare alla configurazione grafica.
All’interno del setup, possiamo inserire parti che devono rimanere costanti durante tutto lo sketch, come l’orientazione del display, anche se alcune, in realtà, possono essere sovrascritte all’interno del loop.
Nello sketch il display è impostato in orizzontale, ma vi sono 4 modalità di rotazione, che vi riporto in tabella, avendo il mio display un pulsante reset, prenderò questo come riferimento per indicare la rotazione.
| Valore comando tft.setRotation(); | Posizione display |
|---|---|
| 0 | Posizione verticale, con pulsante in basso |
| 1 | Posizione orizzontale, con pulsante a sinistra |
| 2 | Posizione verticale, con pulsante in alto |
| 3 | Posizione orizzontale, con pulsante a destra |
Continuando con lo sketch, imposto la grandezza del testo, con il comando “tft.fillRect(0, 0, 320, 240, BLACK);” disegno un rettangolo, dando le coordinate dell’asse x ed y ed il colore.
Il metodo di disegno tramite coordinate verrà approfondirò in un successivo articolo, onde evitare di far diventare questo troppo lungo.
Volendo scrivere un testo, ho impostato la posizione iniziale del cursore, il colore del testo ed il suo sfondo e successivamente il testo da scrivere.
Finita la parte di setup, si passa al loop:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
void loop() { int i; int Cx; int Cy; i= random(8); Cx = random(20, 200); Cy = random(40, 80); tft.fillRect(0, 20, 320, 220, c[i+2]); tft.setTextSize(6); tft.setTextColor(c[i]); tft.setCursor(Cx, Cy); tft.println(n); n++; tft.setTextColor(c[i]); tft.setCursor(20, 200); tft.setTextSize(3); tft.println("TEST DISPLAY TFT"); delay(1000); } |
Dichiaro tre variabili di tipo int, una per il gioco di colori e due per le coordinate casuali del testo, tutte verranno poi associate al comando random (random(val min, val max)).
Disegno un rettangolo a cui associo la variabile “c” per il colore, questo darà colori casuali contenuti nella variabile, che avrà un valore uguale ad “i”+2.
Dopo aver dato la grandezza al testo, imposto il colore con il comando “TextColor”, anche lui collegato alla variabile “c”.
Imposto le coordinate del cursore, che non avrà un punto fisso, ma cambierà seguendo i valori assunti dalle variabili Cx e Cy.
Scrivo il valore di “n” che ad ogni ciclo aumenterà di 1 (n++).
Ripeto la procedura per la parte di testo “TEST DISPLAY TFT”.
Aggiungo un Delay di 1 secondo e chiudo il loop.
Lo sketch di prova è finito, un’ultima cosa prima di concludere, ricordatevi che le coordinate e le dimensioni devono essere date in pixel.
Come sempre se avete dubbi o domande potete lasciare un commento qui sotto.
Riporto i link delle altre lezioni collegate a questo tipo di display:
- Lezione 1 di 5 dedicata alla configurazione grafica: Parte Generale
- Lezione 3 di 5 dedicata al metodo di disegno ed alle coordinate: Disegno e Coordinate
- Lezione 4 di 5 dedicata alla configurazione del touch: Parte Touch
- Lezione 5 di 5 dedicata alla configurazione del lettore SD: in lavorazione
Nella pagina sono presenti link di affiliazione su cui si ottiene una piccola quota dei ricavi, senza variazioni dei prezzi.