Tutorial: uLCD-32PT cambiare sfondo e i primi disegni

Su segnalazione di un appassionato come te e me che ha commentato il primo articolo dedicato al display grafico uLCD-32PT, ho iniziato a testare alcune funzioni della libreria descritta nel precedente articolo.

Vorrei condividere con te i progressi in modo che tu possa realizzare tutti i progetti che desideri con questo fantastico display touch screen.

In questo articolo ti mostro come cambiare lo sfondo di default, da nero a bianco e come disegnare con i tre colori  primari ( RGB ) alcune figure geometriche.

Occorrente

• n. 1 arduino ( 2009, uno, mega, mini, ecc…)
• n. 1 uLCD-32PT
• n. 5 cavi femmina, maschio mono pin per la connessione arduino-LCD
• n.1 foglio a quadretti, meglio se millimetrato

Lo Sketch

Lo sketch puoi leggere è realizzato con le librerie di Rei Voi che trovo spettacolari, sul suo sito puoi trovare anche la documentazione dei metodi, ben fatta, sia in html sia in PDF.

/*
 * uLCD-32PT demo
 *
 * autore: Mauro Alfieri
 * tw: @mauroalfieri
 * Web: https://www.mauroalfieri.it
 *
 * Versione: 1.0
 *
 */
 
#include "Serial_LCD.h"
#include "proxySerial.h"
#include "GUI.h"
#include "Wire.h"
#include "SoftwareSerial.h"

SoftwareSerial mySerial(2, 3);
ProxySerial myPort(&mySerial); // hardware abstraction layer
Serial_LCD myLCD(&myPort); // LCD

void setup() {
  Serial.begin(19200);
  Serial.print("\n\n\n***\n");
  Serial.print("avr\n");
  mySerial.begin(9600);
  myLCD.begin(4);
  delay(10);
  myLCD.setSpeed(38400);
  mySerial.begin(38400);
  
  myLCD.setPenSolid(true);
  //240x320
  
  myLCD.replaceBackGroundColour( myLCD.setColour(0xff,0xff,0xff) );
  
  myLCD.dRectangle(0, 0, 48, 48, myLCD.setColour(0xff,0x00,0x00));
  myLCD.dRectangle(96, 0, 48, 48, myLCD.setColour(0x00,0xff,0x00));
  myLCD.dRectangle(192, 0, 48, 48, myLCD.setColour(0x00,0x00,0xff));
  
  myLCD.rectangle(0, 58, 48, 106,  myLCD.setColour(0x00,0xff,0x00));
  myLCD.rectangle(96, 58, 144, 106,  myLCD.setColour(0x00,0x00,0xff));
  myLCD.rectangle(192, 58, 240, 106,  myLCD.setColour(0xff,0x00,0x00));
  
  myLCD.circle(24, 140, 24, myLCD.setColour(0x00,0x00,0xff));
  myLCD.circle(120, 140, 24, myLCD.setColour(0xff,0x00,0x00));
  myLCD.circle(216, 140, 24, myLCD.setColour(0x00,0xff,0x00));
  
  myLCD.triangle(24, 174, 0, 222, 48, 222, myLCD.setColour(0x00,0xff,0x00));
  myLCD.triangle(120, 174, 96, 222, 144, 222, myLCD.setColour(0x00,0x00,0xff));
  myLCD.triangle(216, 174, 192, 222, 240, 222, myLCD.setColour(0xff,0x00,0x00));  

  myLCD.triangle(24, 280, 0, 232, 48, 232, myLCD.setColour(0x00,0x00,0xff));
  myLCD.triangle(120, 280, 96, 232, 144, 232, myLCD.setColour(0xff,0x00,0x00));
  myLCD.triangle(216, 280, 192, 232, 240, 232, myLCD.setColour(0x00,0xff,0x00));  

  myLCD.line(0, 290, 240, 290, myLCD.setColour(0xff,0x00,0x00));  
  myLCD.line(0, 300, 240, 300, myLCD.setColour(0x00,0xff,0x00));  
  myLCD.line(0, 310, 240, 310, myLCD.setColour(0x00,0x00,0xff));  
}


void loop() {
}

lo sketch è molto ripetitivo, per ogni figura ne ho disegnate 3 sia per riempire lo schermo nella sua interezza sia per mostrarti come i metodi della classe LCD accettano le coordinate.

linee 12-16: includi le librerie necessarie allo sketch, in particolare la SoftwareSerial.h è necessaria per utilizzare i pin 2 e 3 come TX ed RX simulando una seriale via software e permettendoti di lasciare liberi i pin 0 ed 1 della seriale su arduino (2009,uno, mini) con arduino mega 2650 non hai questo problema puoi usare una delle 3 seriale rimaste libere;

linea 18: inizializza l’oggetto mySerial come istanza della SoftwareSerial indicando come pin a cui colleghi il TX del display il 2 e pin RX il 3;

linea 19: utilizza la classe proxySerial.h per astrarre il livello hardware della seriale, creando l’istanza myPort costruita su mySerial;

linea 20: inizializza l’oggetto myLCD passando come parametro il valore, per riferimento, di myPort;

linee 23-25: inizializza la comunicazione Seriale tra arduino e il computer a 19200 boud e scrive sul terminale seriale:

***
avr

serve a darti l’idea di quando il programma parte, puoi eliminare queste linee se il tuo progetto funziona perfettamente e non hai necessità di visualizzare informazioni sul monitor seriale.

linea 26: imposta la velocità di trasferimento a 9600baud per la seriale virtuale mySerial;

linea 27: invia al display LCD il segnale di init indicando che il pin 4 è quello che utilizzi per il reset, ossia quello a cui è connesso il pin RST del uLCD, ricordati di collegare questo pin e se vuoi cambiarlo in quanto occupato da altri componenti del tuo progetto ricordati di modificare questa linea, o il display non verrà mai resettato dallo sketch e non cambierà mai schermata se non con un clear();

linea 28: attendi 10 millisecondi che il display sia inizializzato;

linea 29: imposta la velocità di comunicazione tra arduino e il uLCD a 38400;

linea 30: imposta anche la velocità della seriale virtuale a 38400 per consentire ad arduino ed al display di comunicare alla medesima velocità;

linea 32: con il metodo setPenSolid( val ) il cui valore val può essere true o false indichi all’oggetto myLCD che intendi attivare la penna per disegnare, se poni a false il valore di questo metodo anche inviando segnali di disegno non vedrai visualizzato nulla.

linea 33: è un mio commento per ricordarti le dimensioni del display in pixel o punti;

linea 35: inizia a cambiare il colore di sfondo, di default è nero, ma se volessi averlo bianco? Il metodo replaceBackGroundColor( colore ) ti permette di variare il colore, in questa linea troviamo anche un’altro metodo setColour( R,G,B ) che trasforma la notazione esadecimale ( 0x00, 0x00, 0x00 ) nel formato accettato da tutte le funzioni di disegno della classe LCD. per avere il colore rosso primario ad esempio scriverai ( 0xff, 0x00, 0x00 ), per il bianco ( 0xff, 0xff, 0xff );

linee 37-39: il metodo che ho usato in queste linee è dRectangle( x1, y1, x2, y2, colore ) questo metodo disegna un rettangolo le cui coordinate sono espresse come:

x1, y1 indicano il punto di partenza o angolo in alto a sinistra;

x2,y2 indicano la distanza in pixel da percorrere dal punto x1 al punto x2 e y1, y2;

colore: serve a dargli il colore che desideri al rettangolo con il metodo setColout();

avrai notato che il primo rettangolo parte dal punto 0,0 ed ha un lato di 48×48 pixel, è un quadrato, ma per disegnare quadrati si usano le funzioni dRectangle e rectangle. Il secondo rettangolo parte da 96,0 ossia x1=96 e Y1=0, stessa altezza del primo ma spostato di 96 pixel ( 48 x 2 ) ho scelto 48 come misura perchè il display ha una risoluzione di 240px sul lato più corto e 240 / 5 = 48 ( tre quadrati da 48 equidistanti tra loro )

linee 41-43: in queste linee disegni sempre un rettangolo ma utilizzando il metodo rectangle( x1,y1,x2,y2,colore ) dove x1 e y1 sono identici all’esempio visto per la funzione precedente mentre x2 e y2 indicano il punto in basso a  destra del rettangolo da disegnare, il disegno parte da 0,58 per disegnare questi tre rettangoli a 10px di distanza verticale dai primi, ma ha coordinate differenti da prima nella prte x2,y2 che non sono più i pixel lungo i quali deve estendersi il rettangolo ma le coordinate del punto in basso a destra;

linee 45-47: disegnano tre cerchi con la funzione circle( x1, y1, raggio, colore ) dove

x1, y1: individuano il centro del cerchio

raggio: è 24 per disegnare cerchi con 48px di diametro

colore: è il colore che vuoi dare al cerchio;

linee 49-51: disegnano dei triangoli utilizzando il metodo triangle( x1,y1, x2,y2, x3,y3, colore ) in cui:

x1,y1: sono le coordinate del primo vertice;

x2,y2: le coordinate del secondo vertice;

x3,y3: le coordinate del terzo vertice;

colore: il colore che vuoi dare al triangolo. Ti invito a notare che il valore della prima coordianta ( x1,y1 ) è posta a metà delle altre, questo perchè ho voluto disegnare dei triangoli a punta in su.

linee 53-55: il metodo usato è sempre triangle ma questa volta li disegni a punta in giù;

linee 57-59: disegna 3 linee parallele distanziate tra loro di 10px e che si estendono dal punto x1=0 a x2=240, ossia per tutta la lunghezza del display. Per farlo utilizza il metodo line( x1,y1, x2,y2, colore ) in cui

x1,y1: rappresentano le coordinate del punto di partenza;

x2,y2: rappresntano le coordinate del punto di arrivo della linea;

colore: indica il colore che vuoi far assumere alla linea stessa;

Tutto lo sketch è realizzato nella sola funzione setup() di arduino, a tal proposito vorrei darti due informazionei:

1. non è necessario usare la loop() se non deve avvenire nulla durante i cicli di esecuzione dello sketch, è sufficiente utilizzare la funzione setup();
2. la funzione loop(), anche se non utilizzata deve essere sempre dichiarata essendo una delle due funzioni fondamentali dello sketch.

Buon divertimento !!!