Parte 3 di 5 metodo di disegno e coordinate grafiche
A differenza dei display LCD visti in precedenza dove per posizionare il testo occorre solo dare la posizione di riga e colonna, nei display TFT occorre sapere le coordinate precise su dove posizionare il testo o la forma geometrica che vogliamo disegnare.
Per fare questo dobbiamo immaginare il nostro display come un piano cartesiano XY in cui tramite coordinate note, posizioniamo la nostra grafica.
Materiale Necessario
Se siete interessati al materiale, cliccate su questo e sarete indirizzati alla pagina Amazon
Solitamente i display hanno dimensioni in pixel per larghezza ed altezza ed in pollici per la diagonale, avremo ad esempio un display da 320×240 px da 2,4″, con questi possiamo iniziare a fare due calcoli, prendendo come esempio sempre lo schermo che sto usando, avremo:
- Diagonale in mm (diagonale x 25,4mm): 2,4″ x 25,4mm = 61mm
- Diagonale in pixel (teorema di Pitagora per il calcolo dell’ipotenusa): √(3202 + 2402) = 400px
- Quantità pixel (risoluzione) ( asse X x Asse Y): 320 x 240 = 76800 (0,08 MP)
- Densità PPI (√(((asse X)2 + (asse Y)2)/diagonale in “): √((3202 + 2402) / 2,4) = 167 PPI
- Densità PPCM (PPI x 0,393701): 167 x 0,393701 = 67 PPCM
- Dot pitch in mm ((diagonale in mm / diagonale in px) x 25,4): (2,4 / 400)25,4 = 0,15 mm
- Pixel per mm: (1/Dimensioni pixel in mm): 1 / 0,15 = 6,56
Adesso, se siete in grado di capire dove cade il vostro punto, potete lavorare in pixel, viceversa si possono convertire i pixel in millimetri, così da sapere in maniera più chiara dove verrà posizionato l’oggetto nello schermo.
Per convertire le dimensioni degli assi da pixel a millimetri, possiamo semplicemente seguire la formula qui sotto:
- Asse in px x dot pitch in mm
- Nel nostro caso: 320 px x 0,15 mm = 48,77 mm per l’asse X e 240 px x 0,15 mm = 36,58 mm per l’asse Y
La conversione in millimetri, se da un lato ci agevola nel posizionamento del punto nello schermo, dall’altro fa allungare leggermente in tempi di compilazione dello sketch, infatti una volta note le coordinate in millimetri, dobbiamo poi convertirle nuovamente in pixel, in quanto Arduino le vuole in questa scala.
Avendo a questo punto tutti i dati per convertire le coordinate da millimetri in pixel, io preferisco farlo tramite una semplice proporzione:
- Asse in mm : Asse in px = Coordinate asse in mm : Coordinate asse in px
- Sull’asse X avrò 48,77 : 320 = C : X
dove C è la coordinata nota in mm ed X è la coordinata in pixel.
Avremo quindi che X= (320 * C)/48,77 - Sull’asse y seguendo lo stesso ragionamento avrò: 36,58 : 240 = C : Y
dove C è la coordinata nota in mm ed Y è la coordinata in pixel.
Avremo quindi che Y= (240 * C)/36,58
Anche se non è un metodo molto preciso è comunque un metodo semplice e veloce, volendo fare un esempio numerico, supponendo di dover inserire un testo con punto di partenza che ha coordinate in mm 2; 4 avremo:
AsseX = 48,77 : 320 = 2 : Xpx questo diventa: (320 x 2) / 48,77 = 13,12px per l’asse X
AsseY = 36,58 : 240 = 4 : Ypx questo diventa: (240*4) / 36,58 = 26,24px per l’asse Y
Quindi nel comando Arduino dovremo dare coordinate 13.12, 26.24 (ricordate di usare il punto per i decimali e non la virgola).
Questi calcoli vi serviranno sia per il posizionamento del testo che per le forme geometriche o delle foto, per le forme geometriche Arduino richiede anche le loro dimensioni, quindi occorre dare il punto iniziale che corrisponde al vertice in alto a sinistra della forma e le sue dimensioni (larghezza ed altezza), tutto ovviamente in pixel.
Se ad esempio vogliamo disegnare un rettangolo dovremo dare il comando drawrect (X0, Y0, larghezza, altezza, colore(in HEX)); facendo un esempio numerico avremo drawrect(10, 15, 200, 150, 0x001F); in questo caso avremo un rettangolo largo 200px alto 150px con il vertice in alto a sinistra posizionato nel punto 10X, 15Y, con linee di colore blu.
Disegnare un triangolo risulta leggermente più complicato, infatti Arduino vuole le coordinate dei tre vertici, avremo quindi drawtriangle(X0, Y0, X1, Y1, X2, Y2).
Per il testo la cosa funziona in maniera diversa, infatti se decidiamo di usare il comando print o println, come si usa per il display seriale, di default Arduino imposta le coordinate iniziali in 0, 0, il colore verrà impostato in bianco con sfondo nero, e le dimensioni saranno quelle predefinite dal font (solitamente 5×8 px), se vogliamo modificare questi dati dovremo dare il comando per le coordinate, quello per il colore, quello per le dimensioni ed infine quello con il testo da scrivere.
Ad esempio:
setTextSize(3); //dimensione carattere, moltiplica la dimensione predefinita per 3
setTextColor(0x001F); //imposta il colore del testo in blu
tft.setCursor(20, 10); //le coordinate del vertice in alto a sinistra del testo saranno X20, Y10
tft.println(“ciao”); //il testo che verrà scritto
Se invece vogliamo riportare i dati contenuti in una variabile di tipo char, dovremmo indicare in un unico comando, le coordinate, la variabile, il colore, il colore di sfondo e le dimensioni.
drawChar(X0, Y0, char, colore in HEX, colore sfondo in HEX, dimensioni);
Per tutti i comandi vi invito a leggere la sezione dedicata alla libreria.
Come sempre se avete dubbi o consigli vi invito a lasciare un commento qui sotto.
Riporto i link delle altre lezioni collegate a questo tipo di display:
- Lezione 1 di 5 dedicata alla configurazione generale: Parte generale
- Lezione 2 di 5 dedicata al metodo di disegno ed alle coordinate: Parte Grafica
- 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.