BluBerriSix - Tutorial TFT TouchScreen / Arduino: 12 passaggi (con immagini)

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:02

Il 2019 è il 20° anniversario del RIM Blackberry 850! Questa piccola invenzione canadese ha cambiato il modo in cui il mondo comunica. È passato da tempo, ma la sua eredità continua!

In questo tutorial imparerai come utilizzare lo schermo TFT da 2,4 MCUfriend.com per Uno/Mega. Imparerai come visualizzare oggetti grafici e testo e come ricevere tocchi e agire sugli eventi di tocco. Questo lo schermo è molto simile ad Adafruit e ad altri schermi/scudi TFT, quindi se sei qui, resta per lo spettacolo.

Costruiremo una versione semplificata di 2 app del mio sketch bluBerriSIX.

Iniziamo!

Passaggio 1: BluBerriSIX - Panoramica

L'app bluBerriSIX è un progetto TFT a sei funzioni.

Include:

Una torcia elettrica

Un'app impertinente "7" (come una palla magica "8")

Una calcolatrice

Un'app per la misurazione della distanza che utilizza il sensore di distanza a ultrasuoni SR-04

Un'app di temperatura e umidità che esegue anche la registrazione dei dati in tempo reale fino a 1,5 km con il ricetrasmettitore HC-12

Un'app di messaggistica che utilizza HC-12.

Questo progetto ha richiesto 1100 righe di codice. Costruiremo una versione considerevolmente più semplice che dimostra ancora i concetti di display TFT e touch sensing.

Passaggio 2: cosa è necessario?

- Un Arduino Uno o Mega 2560

- Uno scudo TFT MCUfriend da 2,4"

Le seguenti librerie:

- Libreria Adafruit_GFX

- Libreria touchscreen Adafruit

- Libreria MCUFRIEND_kbv

Queste librerie possono essere installate con il Gestore della libreria all'interno dell'IDE di Arduino.

Per caricare una libreria, vai all'opzione di menu Schizzo -> Includi libreria -> Gestisci librerie….

Nel campo "Filtra la tua ricerca…", inserisci i primi caratteri del nome della libreria, quindi seleziona e installa la libreria appropriata. Al termine, esci da questa schermata.

Quando si monta lo shield TFT su Uno/Mega, FARE MOLTA ATTENZIONE per assicurarsi di allineare correttamente i pin. Ho disallineato il mio primo scudo e l'ho fritto. Ho trascorso due settimane di crescente frustrazione cercando di trovare le librerie corrette prima di rendermi conto che lo schermo era morto. STAI ATTENTO

Passaggio 3: il nostro progetto

Costruiremo una versione più semplice dello sketch bluBerriSIX.

avrà, - una schermata iniziale

- una schermata del menu principale con due pulsanti

- un'app Saucy 7

- un'app per l'immissione di testo semplificata

Potrai anche tornare al menu principale premendo l'icona "Home" in basso a sinistra di questo particolare display. Se non hai un'icona del genere, dovrai solo definire una regione "home" del tuo schermo. Imparerai come determinare le regioni tattili dello schermo in questo tutorial.

Sebbene questo sia un progetto semplificato, è ancora piuttosto lungo. Fornirò le versioni degli schizzi di Arduino in ogni fase principale in modo che tu possa caricarli se lo desideri.

Passaggio 4: codice intestazione, variabili globali, impostazione dello schermo

L'intero progetto è altamente documentato. Ma i dettagli seguono.

Avvia un nuovo progetto Arduino e chiamalo "tft demo" o con qualsiasi altro nome desideri.

Il primo pannello di codice sopra ci mostra la definizione di variabili globali. Aggiungiamo anche le librerie che dovremo utilizzare sia per la funzione di visualizzazione dello schermo che per il rilevamento del tocco dello schermo.

Definiamo anche i Pin analogici con riferimento ai loro scopi specifici dello schermo.

Definiamo l'oggetto tft (display) e l'oggetto ts (touch) come riferimenti per le rispettive funzioni.

Definiamo alcune costanti di colore a 16 bit per semplificare il rendering dei colori per lo schermo e per gli oggetti di testo e grafici. Noterai che c'è un URL a un sito web che ha un Color Picker e un convertitore per convertire i colori visibili nei loro valori esadecimali a 16 bit. È uno strumento molto utile.

Nel secondo pannello di codice, definiamo le variabili globali per i nostri scopi specifici dell'app.

Le stringhe e gli array cString, letter e letterX e letterY vengono utilizzati per a) visualizzare le lettere sui pulsanti per l'app di immissione testo eb) abbinare le coordinate x e y di un tocco con le coordinate x e y di ciascuna rispettiva lettera su la tastiera. Maggiori informazioni su questo quando arriviamo a quella sezione dello schizzo.

funcX, funcY e func sono array che funzionano per determinare quale pulsante dell'app è stato premuto nella schermata del menu principale e quindi utilizzano tali informazioni per avviare la rispettiva app.

lastTouch e tThresh vengono utilizzati nei metodi touch per assicurarci di non ricevere più tocchi dalla pressione dello schermo troppo a lungo. Più su quello più tardi.

La variabile mode controllerà quale schermata viene visualizzata e la variabile tMode controllerà quali metodi touch vengono utilizzati in un dato momento.

Nel blocco setup(), apriamo un canale Serial se vogliamo usare i comandi Serial.println() per il debug. Non hai bisogno di questa riga se non desideri eseguire il debug di Serial Monitor.

Le prossime quattro righe sono solo il codice di configurazione per l'oggetto tft.

Successivamente impostiamo l'orientamento dello schermo in modalità Ritratto.

Il comando randomSeed() avvia semplicemente il generatore di numeri casuali per un uso successivo da parte dell'app Saucy 7.

Infine chiamiamo il metodo della schermata iniziale.

Passaggio 5: creazione della schermata Spash e comprensione del display rispetto alla mappatura tattile

Inizieremo ora a costruire la schermata di spash.

Ma prima, guarda l'immagine per la mappatura dello schermo e del tocco. Notare che le origini sono in posizioni diverse. Per la visualizzazione, l'origine (0, 0) è in alto a sinistra dello schermo (quando il pulsante RESET è in alto) e cresce da sinistra a destra e dall'alto in basso.

Per il rilevamento del tocco, l'origine si trova nell'angolo in basso a sinistra dello schermo e cresce da sinistra a destra e dal basso verso l'alto.

Quindi LE MAPPE DISPLAY E TOUCH SONO DEFINITE SEPARATAMENTE e hanno risoluzioni diverse. Il display ha una risoluzione di 240 per 320 e il touch ha una risoluzione molto più alta, come vedrai presto.

Vai a un'area del tuo schizzo sotto il metodo loop(){} e inseriremo il codice del metodo splash().

Iniziamo eseguendo un comando fillScreen() per riempire lo schermo con il colore BIANCO che abbiamo definito nel codice dell'intestazione.

Quindi impostiamo la dimensione del testo su "5". Questa è una dimensione del testo di base relativamente grande. Impostiamo la posizione xey per il cursore del testo e impostiamo il colore del testo. Infine il comando print("TFT") disegna effettivamente il testo blu di dimensione '5' nella posizione specificata.

Man mano che aumenti la dimensione del testo, vedrai che i caratteri diventano sempre più grossi. Quindi andare sopra il 5 probabilmente non è utile. Alla fine di questo tutorial, ti mostrerò come utilizzare i caratteri bitmap per ottenere un testo dall'aspetto più gradevole nelle tue app. Il compromesso è che l'uso di set di caratteri bitmap richiede molta memoria nel tuo Arduino che limiterà le dimensioni dello schizzo

Ripetiamo comandi simili per gli altri due elementi di testo nella schermata iniziale.

Infine ritardiamo di 2,5 secondi per dare all'utente la possibilità di leggere il contenuto dello schermo prima che l'app passi alla schermata del menu principale.

Vai avanti e carica questo schizzo sul tuo Arduino. Dovrebbe visualizzare la schermata iniziale.

Passaggio 6: creazione di uno strumento diagnostico per la mappatura tattile

Il metodo showTouch() è molto utile per aiutarti a ottenere le coordinate del tocco di diverse parti dello schermo. Dovrai farlo per definire le regioni tattili per i tuoi pulsanti.

Vai avanti e inserisci questo metodo sotto il tuo metodo splash() fatto in precedenza.

Ecco come funziona.

L'istruzione if determina se è trascorso un tempo sufficiente dall'ultimo tocco. Prende il tempo di sistema corrente millis() e sottrae il tempo lastTouch. Se è maggiore del valore tThresh (200 millisecondi), accetta il tocco. In caso contrario, ignorerà gli eventi multi-touch accidentali.

Successivamente, il comando getpoint() ottiene le coordinate x, yez del tocco. La coordinata z è una misura della pressione di tocco.

Se la pressione rientra nelle costanti max e min che abbiamo definito nell'intestazione dello schizzo, il metodo prima cambierà i pin YP e XM in OUTPUT, mettendo lo schermo in modalità DISPLAY.

Successivamente disegnerà un rettangolo bianco per cancellare tutte le coordinate che potrebbero essere state visualizzate in precedenza.

Lo schizzo quindi imposta il carattere sulla dimensione 2, colore nero e visualizza le coordinate x (p.x) e y (p.y) sullo schermo. Puoi quindi prendere nota di queste posizioni per aiutarti a programmare le zone tattili per i tuoi schizzi.

L'istruzione if nella parte inferiore del metodo controlla se è stato premuto il pulsante "Home" sullo schermo. gli operatori '<=' consentono la larghezza e l'altezza del pulsante Home. Le coordinate specificate sono le coordinate del centro x e del centro y del pulsante Home. Se viene premuto, la modalità viene impostata su 0, che alla fine significherà "Vai alla schermata del menu principale". Più su quello più tardi.

Infine aggiorniamo lastTouch all'ora di sistema corrente millis() per prepararci per un successivo evento touch.

Per favore ora vai al blocco loop() e aggiungi la riga showTouch();

A questo punto, carica il tuo schizzo e provalo. Disegnerà la schermata iniziale e se inizi a toccare lo schermo, le coordinate TOUCH x e y verranno visualizzate sullo schermo.

Prima di andare avanti, rivediamo due importanti righe di codice:

pinMode(YP, OUTPUT); //ripristina i pin di controllo TFT

pinMode(XM, OUTPUT); // per la visualizzazione dopo aver rilevato un tocco

Ogni volta che vuoi visualizzare qualcosa sullo schermo, DEVI eseguire questi due comandi per cambiare lo schermo dalla modalità TOUCH alla modalità DISPLAY. Altrimenti, i tuoi comandi di visualizzazione non funzioneranno.

Ben fatto finora! Fare una pausa!

Passaggio 7: crea la schermata del menu principale

Ora creeremo la nostra schermata del menu principale con due pulsanti che puoi premere per attivare ciascuna app. Il metodo si chiama menuScreen().

Iniziamo mettendo lo schermo in modalità DISPLAY.

Quindi impostiamo la dimensione del carattere, il colore e la posizione e stampiamo il testo del "Menu principale".

Ora disegniamo due rettangoli che sono i pulsanti.

Tutti i comandi grafici hanno una struttura simile:

graphicShape (coordinata x, coordinata y, larghezza, altezza, COLORE)

- coordinata x - in alto a sinistra per oggetti rettangolari, centro per cerchi

- coordinata y - in alto a sinistra per oggetti rettangolari, centro per cerchi

- larghezza - larghezza dell'oggetto in pixel

- COLORE - una costante di colore che abbiamo definito nell'intestazione

Infine chiamiamo due metodi per disegnare l'icona Saucy 7 e l'icona QWERTY Text Entry. Sono metodi separati.

Il metodo draw7icon(0) accetta un parametro intero che è l'offset y per disegnare la palla. Lo facciamo in modo da poter utilizzare lo stesso metodo per disegnare la palla nella schermata del menu E nella schermata dell'app Saucy 7. L'offset ci consente solo di regolare in modo programmatico la coordinata y della palla verso l'alto o verso il basso.

Il metodo draw7Ball(0) viene chiamato dall'interno di draw7Icon(0). Prende anche un parametro che ci permette di regolare la posizione verticale della palla a seconda che la disegniamo nella schermata del menu o nella schermata dell'app.

Il comando fillCircle() accetta 4 argomenti.

- coordinata x del centro del cerchio

- coordinata y del centro del cerchio

- raggio del cerchio (in pixel)

- COLORE - una costante di colore che abbiamo definito nell'intestazione

Infine, viene chiamato il metodo drawTextIcon() per disegnare l'icona per l'app Text Entry.

Puoi provare a eseguire il metodo commentando il metodo splash() in setup() e aggiungendo menuScreen().

Carica lo schizzo sul tuo Arduino e provalo!

Passaggio 8: l'app Saucy 7 e i metodi del menu principale

Il metodo sevenScreen() disegnerà lo schermo per l'app, incluso il disegno della palla e quindi la visualizzazione delle istruzioni.

Il metodo sevenInstr() visualizza le istruzioni e cancella lo schermo dalle risposte precedenti. Disegna anche il pulsante 'Risposta'.

Il metodo show7Response() gestisce la cancellazione del metodo di risposta precedente dallo schermo, visualizzando un messaggio animato "pensando…" e quindi visualizzando il messaggio di risposta scelto casualmente.

read7Touch() è il metodo che attende un evento touch per produrre il messaggio generato casualmente. Il codice touch è molto simile al metodo diagnostico showTouch() descritto in precedenza. Per semplicità, il metodo accetterà un tocco in qualsiasi punto dello schermo come tocco del pulsante "Rispondi".

Nella parte superiore del metodo, definiamo un array response di stringhe che sono i messaggi che possono essere generati da un evento touch.

Se viene premuto il pulsante Home, l'app terminerà e tornerà alla schermata del menu principale. In caso contrario, il metodo genererà un numero casuale compreso tra 0 e 7 (esclusivo) e passerà il messaggio di testo corrispondente dall'array response al metodo show7Response().

Infine, il metodo backToMenu() controlla il tocco del pulsante Home e restituisce il controllo alla schermata del menu principale.

Il metodo readMenuTouch() cerca un evento touch quando ti trovi nella schermata del menu principale. Quando viene rilevato un tocco, passa le coordinate xey al metodo getFunc(x, y) che cerca negli array funcX e funcY in modo che corrispondano alle coordinate xey del tocco. Quindi restituisce il numero dall'array func per l'app selezionata. '1' è Saucy 7 e '2' è l'app per l'immissione di testo. Quindi imposta la modalità sul valore dell'app in modo che l'app venga eseguita.

Passaggio 9: il blocco Loop()

Inizieremo ora a creare il codice del blocco loop() per gestire la visualizzazione della schermata appropriata e quindi chiamare i metodi touch appropriati in base all'opzione attualmente selezionata.

Il metodo loop() è costituito da due strutture switch().

La struttura dell'interruttore superiore gestisce la visualizzazione della schermata appropriata a seconda dell'opzione selezionata. Imposta anche il valore tMode per il metodo touch appropriato da eseguire per l'opzione attualmente selezionata. Infine imposta il valore della modalità su 9 in modo che lo schermo del display non venga ridisegnato all'infinito.

La struttura dell'interruttore inferiore controlla quali metodi di tocco vengono eseguiti in base all'opzione dell'app selezionata dall'utente rappresentata dal valore di tMode.

Carica lo schizzo nel tuo Arduino e dovresti essere in grado di selezionare e utilizzare l'app Saucy 7.

Hai fatto un sacco di lavoro! Fare una pausa:-)

Passaggio 10: l'app per l'immissione di testo: siamo a casa

Ora incorporeremo i metodi dell'app per l'immissione di testo.

makeKbd() disegna la tastiera sullo schermo.

Disegna sei rettangoli arrotondati pieni e poi sovrappone la lettera appropriata su ogni "tasto" ottenendo la lettera dalla stringa cString che stampa sullo schermo sopra la chiave. Notare che il penultimo parametro in un comando fillRoundedRect() è il raggio di ogni angolo in pixel. Più alto è questo valore, più gli angoli sono arrotondati.

Il metodo readKbdTouch() funziona in modo simile agli altri metodi di rilevamento del tocco.

Se viene rilevato un tocco che NON è sul pulsante Home, passa le coordinate xey al metodo curChar(x, y) che restituisce il carattere che corrisponde a quella posizione xey sullo schermo. Il messaggio che è stato "digitato" viene quindi visualizzato sullo schermo utilizzando il metodo "displayMsg(theChar).

Il metodo curChar(x, y) cerca negli array letterX e letterY per cercare di trovare una corrispondenza vicina alle coordinate xey passate da readKbdTouch(). Se trova una corrispondenza, restituisce la lettera corrispondente al metodo readKbdTouch. Nota che inizializziamo la variabile theChar a 32 che è il codice ASCII per uno spazio, ' '. Lo facciamo in modo che se l'utente tocca un'area lontana dalla tastiera, non verranno visualizzati i caratteri non disponibili.

Il metodo displayMsg(theChar) prende il carattere restituito da curChar(x, y) e lo aggiunge alla stringa msg. Quindi visualizza il messaggio sullo schermo.

Infine, aggiorneremo il blocco loop() per accettare la selezione dell'app per l'immissione di testo.

Carica lo schizzo tftDemo sul tuo Arduino e dovresti essere in grado di utilizzare l'app completata.

Congratulazioni! hai creato un'app touchscreen TFT! Prenditi il resto della giornata libera!

Passaggio 11: diventare lucido! - Utilizzo dei caratteri bitmap di Adafruit nel tuo schizzo

Il set di caratteri tft standard va bene. Ma è meglio se possiamo usare i caratteri bitmap appropriati nei nostri schizzi TFT.

Lo svantaggio è che il caricamento di set di caratteri nella memoria di Arduino occupa uno spazio significativo. In effetti, è molto facile riempire il tuo schizzo con così tanti caratteri che non verrà caricato in Arduino.

I caratteri sono disponibili all'interno della cartella della libreria Adafruit_GFX che hai già installato per questo progetto. Un eccellente tutorial sull'uso dei caratteri è su questo sito.

Nell'area dell'intestazione del tuo schizzo, aggiungi il riferimento del carattere per il carattere che desideri utilizzare. Useremo il carattere FreeSerifBoldItalic18p7b per questo esempio.

#includere

Nel tuo metodo splash(), commenta tft.setTextSize(); comando.

Aggiungi il seguente comando,

tft.setFont(&FreeSerifBoldItalic18pt7b);

Ora qualsiasi comando print() utilizzerà il carattere attualmente specificato. Per passare a un font diverso, dovresti usare un altro comando tft.setFont() con il font successivo che vorresti usare.

Per riportare il carattere al carattere tft standard, usa semplicemente un tft.setFont(); comando senza parametri.

Carica lo schizzo sul tuo Arduino e dovresti vedere che la schermata iniziale ora utilizza il carattere bitmap per il rendering del testo sullo schermo. Noterai che la dimensione dello schizzo è significativamente più grande ora che hai incluso un font.

Passaggio 12: Considerazioni finali

Sono disponibili molti altri comandi per oggetti grafici. Loro includono:

tft.drawRect(x, y, larghezza, altezza, COLORE);

tft.drawLine(x1, y1, x2, y2, COLORE);

Gli esempi seguenti utilizzano il metodo tft.color565 per consentire di specificare il colore in base ai valori di rosso, verde e blu. Questo è un modo alternativo per utilizzare i valori di colore HEX definiti costanti che abbiamo usato nel nostro schizzo.

tft.drawRoundRect(x, y, larghezza, altezza, raggio, tft.color565(255, 0, 0)); // questo sarebbe rosso

tft.drawCircle(x, y, raggio, tft.color565(0, 255, 0)); // questo sarebbe verde

tft.drawTriangle(vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565(0, 0, 255)); // blu

tft.fillTriangle(vertex1x, vertex1y, vertex2x, vertex2y, vertex3x, vertex3y, tft.color565(255, 0, 0);

Gioca con questi comandi ed esplora come possono essere aggiunti ai tuoi progetti TFT.

Imparare a usare uno schermo TFT è impegnativo e dovresti essere orgoglioso di te stesso per aver dedicato del tempo per imparare questi primi passi.

Gli schermi TFT possono aggiungere un aspetto interessante e utile dell'interfaccia utente grafica ai tuoi progetti Arduino.

Grazie per aver lavorato su questo tutorial.

ORA ESCI E FAI QUALCOSA DI MERAVIGLIOSO!