BluBerriSix: tutorial TFT TouchScreen / Arduino: 12 passos (amb imatges)

2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:14

El 2019 és el vintè aniversari del RIM Blackberry 850. Aquest petit invent canadenc va canviar la manera de comunicar-se del món. Ja ha passat, però el seu llegat continua.

En aquest instructiu, aprendreu a fer servir l’escut de pantalla TFT de 2,4 MCUfriend.com per a l’Uno / Mega. Apreneu a mostrar objectes gràfics i text i a rebre tocs i actuar sobre els esdeveniments tàctils. pantalla és molt similar a Adafruit i altres pantalles / pantalles TFT. Per tant, si sou aquí, aneu al programa.

Crearem una versió simplificada de 2 aplicacions del meu esbós bluBerriSIX.

Comencem!

Pas 1: BluBerriSIX: visió general

L’aplicació bluBerriSIX és un projecte TFT de sis funcions.

Inclou:

Una llanterna

Una aplicació "7" descarada (com una bola Magic "8")

Una calculadora

Una aplicació de mesura de distància que utilitza el sensor de distància ultrasònic SR-04

Una aplicació de temperatura i humitat que també registra dades en temps real fins a 1,5 km amb el transceptor HC-12

Una aplicació de missatges de text amb HC-12.

Aquest projecte requeria 1100 línies de codi. Construirem una versió bastant més senzilla que encara demostri conceptes de pantalla TFT i detecció tàctil.

Pas 2: què cal?

- Un Arduino Uno o Mega 2560

- Un escut TFT MCUfriend de 2,4"

Les biblioteques següents:

- Biblioteca Adafruit_GFX

- Biblioteca de pantalla tàctil Adafruit

- Biblioteca MCUFRIEND_kbv

Aquestes biblioteques es poden instal·lar amb el gestor de biblioteques dins de l'IDE Arduino.

Per carregar una biblioteca, aneu a l'opció de menú Esbós -> Inclou biblioteca -> Gestiona biblioteques …

Al camp "Filtra la cerca …", introdueix els primers caràcters del nom de la biblioteca i, a continuació, selecciona i instal·la la biblioteca adequada. Quan hàgiu acabat, només heu de sortir d'aquesta pantalla.

En muntar l’escut TFT a l’Uno / Mega, TINGUEU MOLT ATENCIÓ per assegurar-vos que alinegeu els passadors correctament. Vaig desalinear el meu primer escut i el vaig fregir. Vaig passar dues setmanes de creixent frustració intentant trobar biblioteques correctes abans d’adonar-me que la pantalla estava morta. VES AMB COMPTE

Pas 3: el nostre projecte

Construirem una versió més senzilla de l’esbós de bluBerriSIX.

Tindrà, - una pantalla de presentació

- una pantalla del menú principal amb dos botons

- una aplicació Saucy 7

- una aplicació d’entrada de text simplificada

També podreu tornar al menú principal prement la icona "Inici" a la part inferior esquerra d'aquesta pantalla en particular. Si no teniu aquesta icona, només haureu de definir una regió "inicial" de la pantalla. Aprendràs a determinar les regions tàctils de la pantalla en aquest tutorial.

Tot i que es tracta d’un projecte simplificat, encara és bastant llarg. Proporcionaré versions dels esbossos d'Arduino a cada etapa principal perquè pugueu penjar-los si ho desitgeu.

Pas 4: codi de capçalera, variables globals, configuració de pantalla

Tot el projecte està molt documentat. Però els detalls segueixen.

Inicieu un nou projecte Arduino i anomeneu-lo "demostració tft" o qualsevol altre nom que vulgueu.

El primer tauler de codi anterior ens mostra la definició de variables globals. També afegim a les biblioteques que haurem d’utilitzar tant per a la funció de visualització de la pantalla com per a la detecció tàctil de la pantalla.

També definim els pins analògics fent referència als seus propòsits específics de pantalla.

Definim l’objecte tft (visualització) i l’objecte ts (tàctil) com a referències per a les seves respectives funcions.

Definim algunes constants de color de 16 bits per facilitar la representació dels colors de la pantalla i dels objectes de text i gràfics. Notareu que hi ha una URL a un lloc web que té un selector de colors i un convertidor per convertir els colors visibles als seus valors hexadecimals de 16 bits. És una eina molt útil.

Al segon panell de codi, definim les variables globals per als propòsits específics de l'aplicació.

Les cadenes i matrius cString, letter i letterX i letterY s’utilitzen per a) mostrar les lletres als botons de l’aplicació d’entrada de text ib) fer coincidir les coordenades x i y d’un toc amb les coordenades x i y de cada lletra respectiva a el teclat. Més informació sobre això quan arribem a aquesta secció de l'esbós.

funcX , funcY i func són matrius que funcionen per determinar quin botó de l'aplicació s'ha premut a la pantalla del menú principal i, a continuació, utilitza aquesta informació per iniciar l'aplicació respectiva.

lastTouch i tThresh s’utilitzen en els mètodes tàctils per assegurar-nos que no rebem diversos tocs si premem la pantalla massa temps. Més informació sobre això més endavant.

La variable de mode controlarà quina pantalla es mostra i la variable tMode controlarà quins mètodes tàctils s’utilitzen en cada moment.

Al bloc setup (), obrim un canal de sèrie si volem fer servir ordres Serial.println () per depurar. No necessiteu aquesta línia si no voleu fer depuració del monitor sèrie.

Les quatre línies següents són només codi de configuració de l'objecte tft.

A continuació, configurem l'orientació de la pantalla al mode Retrat.

L'ordre randomSeed () només inicia el generador de números aleatoris per a un ús posterior de l'aplicació Saucy 7.

Finalment anomenem el mètode de pantalla de presentació.

Pas 5: crear la pantalla de correcció i entendre la visualització en comparació amb el mapatge tàctil

Ara començarem a construir la pantalla de correcció.

Però primer, mireu la imatge per obtenir mapes de pantalla i tàctils. Fixeu-vos que els orígens es troben en llocs diferents. Per a la visualització, l’origen (0, 0) es troba a la part superior esquerra de la pantalla (quan el botó RESET és a la part superior) i creix d’esquerra a dreta i de dalt a baix.

Per a la detecció tàctil, l'origen es troba a l'extrem inferior esquerre de la pantalla i creix d'esquerra a dreta i de baix a dalt.

Així, doncs, els mapes de visualització i tàctil es defineixen de manera separada i tenen diferents resolucions. La pantalla té una resolució de 240 per 320 i el tacte té una resolució molt més alta, com aviat veureu.

Aneu a una àrea del vostre esbós a sota del mètode loop () {} i introduirem el codi del mètode splash ().

Comencem fent una ordre fillScreen () per omplir la pantalla amb el color BLANC que hem definit al codi de capçalera.

A continuació, establim la mida del text a '5'. Es tracta d’una mida bàsica de text relativament gran. Establim la posició xey del cursor de text i definim el color del text. Finalment, l'ordre print ("TFT") dibuixa el text blau de la mida '5' a la posició especificada.

A mesura que augmenteu la mida del text, veureu que els personatges cada cop són més grollers. Per tant, passar per sobre de 5 probablement no sigui útil. Al final d’aquest tutorial, us mostraré com utilitzar els tipus de lletra de mapa de bits per obtenir un text més atractiu a les vostres aplicacions

Repetim ordres similars per als altres dos elements de text de la pantalla inicial.

Finalment, retardem 2,5 segons per donar a l’usuari l’oportunitat de llegir el contingut de la pantalla abans que l’aplicació passi a la pantalla del menú principal.

Seguiu endavant i pengeu aquest esbós al vostre Arduino. Ha de mostrar la pantalla de presentació.

Pas 6: fer una eina de diagnòstic de mapatge tàctil

El mètode showTouch () és molt útil per ajudar-vos a obtenir les coordenades tàctils de diferents parts de la pantalla. Haureu de fer això per definir les regions tàctils dels botons.

Seguiu endavant i introduïu aquest mètode a sota del vostre mètode splash () fet anteriorment.

Així és com funciona.

La sentència if determina si ha passat un temps suficient des del darrer toc. Pren el temps actual del sistema millis () i resta el temps lastTouch. Si és superior al valor tThresh (200 mil·lisegons), accepta el toc. En cas contrari, ignorarà els esdeveniments multitáctils accidentals.

A continuació, l'ordre getpoint () obté les coordenades x, y i z del tacte. La coordenada z és una mesura de la pressió tàctil.

Si la pressió es troba dins de les constants màxima i mínima definides a la capçalera d'esbós, el mètode canviarà primer els pins YP i XM a OUTPUT, posant la pantalla en mode DISPLAY.

A continuació, dibuixarà un rectangle blanc per esborrar les coordenades que s'hagin pogut mostrar prèviament.

A continuació, l'esbós defineix la font a la mida 2, en color negre i mostra les coordenades x (p.x) i y (p.y) a la pantalla. A continuació, podeu fer una nota d’aquestes ubicacions per ajudar-vos a programar les zones tàctils per als vostres propis esbossos.

La sentència if a la part inferior del mètode comprova si es prem el botó "Inici" a la pantalla. els operadors '<=' permeten l'amplada i l'alçada del botó Inici. Les coordenades especificades són les coordenades de centre x i centre del botó Inici. Si es prem, el mode s'estableix a 0, que finalment significa "Vés a la pantalla del menú principal". Més informació sobre això més endavant.

Finalment, actualitzem lastTouch al temps actual del sistema millis () per preparar-nos per a un esdeveniment tàctil posterior.

Si us plau, aneu ara al bloc loop () i afegiu la línia showTouch ();

En aquest moment, pengeu el vostre esbós i proveu-lo. Dibuixarà la pantalla inicial i, si comenceu a tocar la pantalla, es mostraran les coordenades TOUCH x i y a la pantalla.

Abans de continuar, tornem a revisar dues línies de codi importants:

pinMode (YP, OUTPUT); // restaura els pins de control TFT

pinMode (XM, OUTPUT); // per visualitzar després de detectar un toc

Sempre que vulgueu mostrar alguna cosa a la pantalla, heu d'executar aquestes dues ordres per canviar la pantalla del mode TOUCH al mode DISPLAY. En cas contrari, les vostres ordres de pantalla no funcionaran.

Ben fet fins ara! Fes un descans!

Pas 7: creeu la pantalla del menú principal

Ara crearem la pantalla del menú principal amb dos botons que podeu prémer per activar cada aplicació. El mètode s’anomena menuScreen ().

Comencem posant la pantalla en mode DISPLAY.

A continuació, definim la mida, el color i la posició de la lletra i imprimim el text del menú principal.

Ara dibuixem dos rectangles que són els botons.

Totes les ordres gràfiques tenen una estructura similar:

graphicShape (coordenada x, coordenada y, amplada, alçada, COLOR)

- coordenada x: a la part superior esquerra dels objectes rectangulars, al centre dels cercles

- Coordenada y: a la part superior esquerra dels objectes rectangulars, al centre dels cercles

- ample - amplada de l'objecte en píxels

- COLOR: una constant de color que hem definit a la capçalera

Finalment, anomenem dos mètodes per dibuixar la icona Saucy 7 i la icona d’entrada de text QWERTY. Aquests són mètodes separats.

El mètode draw7icon (0) pren un paràmetre enter que és el desplaçament en y per dibuixar la pilota. Ho fem per poder utilitzar el mateix mètode per dibuixar la bola a la pantalla del menú I a la pantalla de l’aplicació Saucy 7. El desplaçament només ens permet ajustar de forma programada la coordenada y de la pilota cap amunt o cap avall.

El mètode draw7Ball (0) es diu des de draw7Icon (0). També pren un paràmetre que ens permet ajustar la posició vertical de la pilota segons si la dibuixem a la pantalla del menú o a la pantalla de l’aplicació.

L'ordre fillCircle () té 4 arguments.

- coordenada x del centre del cercle

- Coordenada y del centre del cercle

- radi del cercle (en píxels)

- COLOR: una constant de color que hem definit a la capçalera

Finalment, es crida al mètode drawTextIcon () per dibuixar la icona de l'aplicació Entrada de text.

Podeu provar d'executar el mètode comentant el mètode splash () a setup () i afegint menuScreen ().

Pengeu l'esbós al vostre Arduino i proveu-lo.

Pas 8: l'aplicació Saucy 7 i els mètodes del menú principal

El mètode sevenScreen () dibuixarà la pantalla de l'aplicació, inclòs el dibuix de la bola i la visualització de les instruccions.

El mètode sevenInstr () mostra les instruccions i neteja la pantalla de les respostes anteriors. També dibuixa el botó "Resposta".

El mètode show7Response () permet esborrar el mètode de resposta anterior de la pantalla, mostrar un missatge animat de "pensar …" i, a continuació, mostrar el missatge de resposta triat a l'atzar.

read7Touch () és el mètode que espera que un esdeveniment tàctil produeixi el missatge generat aleatòriament. El codi tàctil és molt similar al mètode de diagnòstic showTouch () descrit anteriorment. Per simplicitat, el mètode acceptarà un toc en qualsevol lloc de la pantalla com a botó "Respon".

A la part superior del mètode, definim una matriu de cadenes de resposta que són els missatges que es poden generar a partir d'un esdeveniment tàctil.

Si es prem el botó Inici, finalitzarà l'aplicació i tornarà a la pantalla del menú principal. En cas contrari, el mètode generarà un número aleatori entre 0 i 7 (exclusiu) i passarà el missatge de text corresponent de la matriu de resposta al mètode show7Response ().

Finalment, el mètode backToMenu () vigila un simple toc del botó Inici i torna el control a la pantalla del menú principal.

El mètode readMenuTouch () vigila un esdeveniment tàctil quan es troba a la pantalla del menú principal. Quan es detecta un tacte, passa les coordenades x i y al mètode getFunc (x, y) que es veu a les matrius funcX i funcY perquè coincideixin amb les coordenades x i y del tacte. A continuació, retorna el número de la matriu func de l'aplicació que s'ha seleccionat. "1" és Saucy 7 i "2" és l'aplicació d'entrada de text. A continuació, estableix el mode al valor de l'aplicació de manera que s'executi.

Pas 9: el bloc Loop ()

Ara començarem a crear el codi de bloc loop () per controlar la visualització de la pantalla adequada i, a continuació, trucarem als mètodes tàctils adequats segons l’opció seleccionada actualment.

El mètode loop () consisteix en dues estructures switch ().

L'estructura del commutador superior gestiona la visualització de la pantalla adequada en funció de l'opció seleccionada. També estableix el valor tMode per al mètode tàctil adequat per a l'execució de l'opció seleccionada actual. Finalment estableix el valor del mode a 9 perquè la pantalla no es redibuixi sense fi.

L'estructura de commutador inferior controla quins mètodes tàctils s'estan executant en funció de l'opció d'aplicació seleccionada per l'usuari tal com es representa amb el valor de tMode.

Carregueu l'esbós al vostre Arduino i hauríeu de poder seleccionar i utilitzar l'aplicació Saucy 7.

Heu fet molta feina! Fes un descans:-)

Pas 10: l'aplicació d'entrada de text: ja som a casa

Ara incorporarem els mètodes de l'aplicació d'entrada de text.

makeKbd () dibuixa el teclat a la pantalla.

Dibuixa sis rectangles arrodonits emplenats i, a continuació, sobreposa la lletra adequada a cada "clau" obtenint la lletra de la cadena cString que imprimeix a la pantalla sobre la tecla. Fixeu-vos que el segon darrer paràmetre d'una ordre fillRoundedRect () és el radi de cada cantonada en píxels. Com més alt és aquest valor, més arrodonides són les cantonades.

El mètode readKbdTouch () funciona de manera similar als altres mètodes de detecció de tacte.

Si es detecta un toc que NO és al botó Inici, passa les coordenades x i al mètode curChar (x, y) que retorna el caràcter que correspon a la ubicació xey de la pantalla. El missatge que s'ha "escrit" es mostra a la pantalla mitjançant el mètode "displayMsg (theChar)".

El mètode curChar (x, y) busca a través de les matrius letterX i letterY per intentar trobar una coincidència que sigui propera a les coordenades x i y passades de readKbdTouch (). Si troba una coincidència, retorna la lletra corresponent al mètode readKbdTouch. Tingueu en compte que inicialitzem la variable theChar a 32, que és el codi ASCII per a un caràcter espacial . Ho fem de manera que si l'usuari toca una àrea allunyada del teclat, no mostrarà caràcters no disponibles.

El mètode displayMsg (theChar) pren el caràcter retornat de curChar (x, y) i l’afegeix a la cadena msg. A continuació, mostra el missatge a la pantalla.

Finalment, actualitzarem el bloc loop () per acceptar la selecció d’aplicacions d’entrada de text.

Pengeu l'esbós de tftDemo al vostre Arduino i hauríeu de poder utilitzar l'aplicació completa.

Enhorabona! heu creat una aplicació de pantalla tàctil TFT. Pren la resta del dia lliure!

Pas 11: Gettin 'Slick! - Ús de tipus de lletra Adafruit Bitmap al vostre esbós

El conjunt de tipus de lletra tft estàndard està bé. Però és més bo si podem utilitzar fonts de mapes de bits adequades als nostres esbossos TFT.

L’inconvenient és que carregar conjunts de tipus de lletra a la memòria Arduino ocupa un espai significatiu. De fet, és molt fàcil omplir el vostre esbós amb tantes fonts que no es carregaran a l’Arduino.

Els tipus de lletra estan disponibles a la carpeta de la biblioteca Adafruit_GFX que ja heu instal·lat per a aquest projecte. En aquest lloc trobareu un excel·lent tutorial sobre l’ús de tipus de lletra.

A l'àrea de Capçalera del vostre esbós, afegiu la referència del tipus de lletra per al tipus de lletra que voleu utilitzar. Utilitzarem el tipus de lletra FreeSerifBoldItalic18p7b per a aquest exemple.

#incloure

Al vostre mètode splash (), comenteu el tft.setTextSize (); comandament.

Afegiu l'ordre següent,

tft.setFont (& FreeSerifBoldItalic18pt7b);

Ara qualsevol ordre print () utilitzarà el tipus de lletra actualment especificat. Per canviar a un tipus de lletra diferent, heu d'utilitzar una altra ordre tft.setFont () amb el següent tipus de lletra que vulgueu utilitzar.

Per restablir el tipus de lletra al tipus tft estàndard, només cal que utilitzeu un tft.setFont (); ordre sense paràmetre.

Pengeu l'esbós al vostre Arduino i hauríeu de veure que la pantalla de presentació ara utilitza el tipus de lletra de mapa de bits per representar el text a la pantalla. Notareu que la mida de l’esbós és significativament més gran ara que heu inclòs un tipus de lletra.

Pas 12: Pensaments finals

Hi ha moltes altres ordres d'objecte gràfic disponibles a la vostra disposició. Inclouen:

tft.drawRect (x, y, amplada, alçada, COLOR);

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

Els exemples següents utilitzen el mètode tft.color565 per permetre especificar el color en funció dels valors vermell, verd i blau. Aquesta és una forma alternativa d'utilitzar els valors de color HEX definits constantment que hem utilitzat al nostre esbós.

tft.drawRoundRect (x, y, amplada, alçada, radi, tft.color565 (255, 0, 0)); // això seria vermell

tft.drawCircle (x, y, radi, tft.color565 (0, 255, 0)); // això seria verd

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

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

Juga amb aquestes ordres i explora com es poden afegir als teus projectes TFT.

Aprendre a utilitzar una pantalla TFT és un repte i hauríeu d’estar orgullosos de vosaltres mateixos per dedicar-vos el temps a aprendre aquests primers passos.

Les pantalles TFT poden afegir un aspecte d’interfície gràfica d’usuari atractiu i útil als vostres projectes Arduino.

Gràcies per treballar aquest tutorial.

ARA SORTI I FES QUE ALGUNA cosa MERAVELLOSA!