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.

uLCD-32PT draw

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 !!!

 

 

Prima di inserire un commento, per favore, leggi il regolamento

Permanent link to this article: https://www.mauroalfieri.it/elettronica/tutorial-ulcd-32pt-cambiare-sfondo-e-i-primi-disegni.html

Lascia un commento

Your email address will not be published.

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.