La libreria in oggetto, serve per gestire la grafica dei display sia rettangolari che rotondi, questa libreria ha il pregio di occupare poco spazio in memoria, ma ciò comporta il difetto di non poterla usare per grafiche complesse.
Prendendo come esempio l’immagine qui di fianco, ipotizziamo che lo sfondo blu sia un display rettangolare 240X240, mentre il verde sia il nostro display rotondo, come si può notare nel rotondo abbiamo parti “mancanti” di display, questi seppur non presenti, devono essere però considerati quando si scrivono le coordinate dell’oggetto che vogliamo disegnare.
La libreria usa il piano cartesiano, con origine (0, 0) in alto a sinistra, sia per il posizionamento dell’oggetto sia per la sua dimensione.
Seppur la libreria ci permette di disegnare tutte le forme base della geometria piana, non ci permette di avere grafiche complesse ed inoltre la dimensione delle linee, sia esse semplici segmenti o lati di una forma geometrica, possono essere grandi solamente 1px.
Vediamo i comandi riconosciuti dalla libreria:
| Comando | Funzione |
| void drawPixel(x, y, codice colore1); | Accende un pixel nelle coordinate x-y del colore indicato dal terzo valore. |
| void drawLine(x0, y0, x1, y1, codice colore1); | Disegna una linea che inizia su x0-y0 e termina in x1-y1 il colore della linea è dato dall’ultimo valore) |
| void drawFastHLine(x, y,, lunghezza, codice colore1); | Disegna una linea orizzontale che inizia dalle coordinate x-y di lunghezza data dal terzo valore espresso in px, il colore è dato dall’ultimo valore. |
| void drawFastVLine(x, y, lunghezza, codice colore1); | Disegna una linea verticale che inizia dalle coordinate x-y di lunghezza data dal terzo valore espresso in px, il colore è dato dall’ultimo valore. |
Ecco un esempio del comando linea:
Volendo disegnare la linea qui di fianco inseriremo il comando
void drawLine(X1, Y1, X2, Y2, codice colore);
Dove X1, Y1 sono le coordinate del primo punto ed X2, Y2 le coordinate del pixel dell’ultima linea.
Questo ci indica che la lunghezza e l’inclinazione saranno gestiti dal valore assunti dalle coordinate.
| Comando | Funzione |
| void drawRect(X1, Y1, base, Altezza, codice colore1); | Disegna un rettangolo pieno il cui vertice superiore-sinistro è dato dalle coordinate X1, Y1 e le sue dimensioni dai valori 3 e 4 presenti nel codice. Il colore dell’area è dato dall’ultimo valore. |
| void fillRect(X1, Y1, base, Altezza, codice colore1); | Disegna un rettangolo vuoti il cui vertice superiore-sinistro è dato dalle coordinate X1, Y1 e le sue dimensioni dai valori 3 e 4 presenti nel codice. Il colore del perimetro è dato dall’ultimo valore. |
| void drawRoundRect(X1, Y1, base, altezza, raggio arco, codice colore1); | Disegna un rettangolo pieno con gli spigoli arrotondati il cui vertice superiore-sinistro è dato dalle coordinate X1, Y1 e le sue dimensioni dai valori 3 e 4 presenti nel codice, mentre il valore del raggio darà l’arco per arrotondare gli spigoli Il colore dell’area è dato dall’ultimo valore. |
| void fillRoundRect(X1, Y1, base, altezza, raggio arco, codice colore1); | Disegna un rettangolo vuoto con gli spigoli arrotondati il cui vertice superiore-sinistro è dato dalle coordinate X1, Y1 e le sue dimensioni dai valori 3 e 4 presenti nel codice, mentre il valore del raggio darà l’arco per arrotondare gli spigoli Il colore del perimetro è dato dall’ultimo valore. |
Se volgiamo disegnare un rettangolo con il perimetro di un colore e l’area di un altro, basterà inserire prima il comando fillRect() e successivamente il comando drawRect(), ricordandoci di aumentare di 1 pixel i valori all’interno del comando fillRect().
| Comando | Funzione |
| void drawCircle(X0, Y0, raggio, codice colore); | Disegna un cerchio pieno, il centro è dato dalle coordinate X0, Y0 le dimensioni sono date dal valore del raggio. Il colore è dato dall’ultimo valore |
| void fillCircle(X0, Y0, raggio, codice colore); | Disegna un cerchio vuoto, il centro è dato dalle coordinate X0, Y0 le dimensioni sono date dal valore del raggio. Il colore è dato dall’ultimo valore |
Per disegnare un cerchio occorre indicare all’interno del comando, il centro del cerchio e la misura in pixel del raggio, oltre al colore che vogliamo.
| Comando | Funzione |
| void drawTriangle(X1, Y1, X2, Y2, X3, Y3 codice colore1); | Disegna un triangolo pieno la cui posizione è data dalle coordinate dei 3 vertici. Il colore è dato dall’ultimo valore. |
| void fillTriangle(X1, Y1, X2, Y2, X3, Y3 codice colore1); | Disegna un triangolo vuoto la cui posizione è data dalle coordinate dei 3 vertici. Il colore è dato dall’ultimo valore. |
Anche per i caratteri si hanno comandi specifici:
| Comando | Funzione |
| void drawChar(X1, Y1, ‘carattere’ colore testo1, colore sfondo1, dimensione); | Scrive un carattere, le coordinate indicano il primo pixel in alto a sinistra, il colore è dato dalcodice dopo il carattere, successivamente abbiamo il colore dello sfondo (opzionale), ed infine il fattore di moltiplicazione della grandezza del font (solitamente il valore base è 5x7pixel) |
Per scrivere una frase occorre usare i comandi:
| Comando | Funzione |
| void setCursor(X1, Y1); | Posiziona il cursore |
| void setTextColor(codice colore1); | Indica il colore del testo |
| void setTextColor(codice colore testo 1, codice colore sfondo1); | Indica il colore del testo ed il colore di sfondo |
| void setTextSize(dimensione); | Indica il fattore di moltiplicazione della grandezza del testo, solitamente il valore base è 5x7pixel. |
| void setTextWrap(valore booleano); | Indica se il testo quando raggiunge il margine destro deve andare a capo in automatico o deve superare il margine destro. il comando accetta solo valori booleani (true e false). Avermo: true per andare a capo false per essere scritto oltre i margini del display. |
| display.cp437(true); | Indica alla libreria se attivare o meno (false), un set di caratteri indicati come Code Page 437. |
| display.write(codice); | Scrive il simbolo corrispondente al codice indicato |
La libreria permette di disegnare piccoli bitmap monocromatici
| Comando | Funzione |
| void drawBitmap(X1, Y1, ind. memoria, Larghezza, Altezza, codice colore1); | Disegna un bitmap il cui angolo superiore sinistro è dato dalle coordinate, ind. memoria indica l’indirizzo di memoria dell’array, ogni bit dell’array rappresenta 1 pixel. larghezza ed altezza danno la dimensione, il colore è dato dall’ultimo valore. |
Ecco un esempio su come disegnare una X:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
const unsigned char icona_esempio[] PROGMEM = { 0b10000001, // * * 0b01000010, // * * 0b00100100, // * * 0b00011000, // ** 0b00011000, // ** 0b00100100, // * * 0b01000010, // * * 0b10000001 // * * }; void setup() { display.drawBitmap(20, 20, icona_esempio, 8, 8, WHITE); display.display(); } void loop() {} |
| Comando | Funzione |
| void fillScreen(uint16_t color); | Riempie l’intero display di un colore cancellando qualsiasi cosa è presente |
| void setRotation(uint8_t rotation); | Ruota lo schermo a step di 90° Valore 0 per 0°, 1 per 90°, 2 oer 180°, 3 per 270° |
| uint16_t width(); | Legge la larghezza del display |
| uint16_t height(); | Legge l’altezza del display |
Gli ultimi due comandi sono utili per in caso si decide di cambiare rotazione dello schermo, tramite questi comandi il programma ricalcola altezza e larghezza in base alle nuove dimensioni.
Utile anche per adattare lo sketch ad un nuovo schermo con dimensioni diverse.
Facciamo un esempio:
|
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 |
void setup() { tft.begin(); // Impostiamo una rotazione (es. 1 = orizzontale) tft.setRotation(1); // Puliamo lo schermo tft.fillScreen(ST77XX_BLACK); // 1. OTTENIAMO LE DIMENSIONI ATTUALI uint16_t w = tft.width(); // Legge la larghezza attuale uint16_t h = tft.height(); // Legge l'altezza attuale // 2. DISEGNIAMO UNA CORNICE LUNGO I BORDI // Usiamo w-1 e h-1 perché i pixel partono da 0 tft.drawRect(0, 0, w, h, ST77XX_RED); // 3. TROVIAMO IL PUNTO CENTRALE uint16_t centroX = w / 2; uint16_t centroY = h / 2; // 4. DISEGNIAMO UNA CROCE AL CENTRO tft.drawFastHLine(0, centroY, w, ST77XX_WHITE); // Linea orizzontale tft.drawFastVLine(centroX, 0, h, ST77XX_WHITE); // Linea verticale } |