Arduino Uno: Animació de mapa de bits en pantalla de pantalla tàctil ILI9341 TFT amb visuino: 12 passos (amb imatges)

2025 Autora: John Day | [email protected]. Última modificació: 2025-01-23 14:38

Els protectors de pantalla tàctil TFT basats en ILI9341 són protectors de pantalla de baix cost molt populars per a Arduino. Visuino els ha donat suport des de fa força temps, però mai no vaig tenir l'oportunitat d'escriure un tutorial sobre com utilitzar-los. Recentment, però, poca gent va fer preguntes sobre l'ús de pantalles amb Visuino, així que vaig decidir fer un tutorial.

En aquest tutorial, us mostraré el fàcil que és connectar el Shield a Arduino i programar-lo amb Visuino per animar un mapa de bits per moure’s per la pantalla.

Pas 1: components

1. Una placa compatible amb Arduino Uno (també pot funcionar amb Mega, però encara no he provat l'escut)
2. Un blindatge de pantalla tàctil TFT de 2,4 "ILI9341 per Arduino

Pas 2: connecteu el blindatge de pantalla tàctil ILI9341 TFT a Arduino

Connecteu l’escut TFT a la part superior de l’Arduino Uno tal com es mostra a les imatges

Pas 3: Inicieu Visuino i afegiu TFT Display Shield

Per començar a programar l'Arduino, haureu de tenir instal·lat l'IDE Arduino des d'aquí:

Assegureu-vos que instal·leu la versió 1.6.7 o superior, en cas contrari, aquest instructiu no funcionarà

El Visuino: https://www.visuino.com també ha d’estar instal·lat.

1. Inicieu Visuino com es mostra a la primera imatge
2. Feu clic al botó "Fletxa avall" del component Arduino per obrir el menú desplegable (imatge 1)
3. Al menú, seleccioneu "Afegeix escuts …" (imatge 1)
4. Al quadre de diàleg "Escuts", expandiu la categoria "Mostra" i seleccioneu "Pantalla tàctil en color TFT ILI9341 Shield" i, a continuació, feu clic al botó "+" per afegir-lo (imatge 2)

Pas 4: a Visuino: afegiu un element de text de dibuix per a l'ombra de text

A continuació, hem d'afegir elements gràfics per representar text i mapa de bits. Primer afegirem un element gràfic per dibuixar l’ombra del text:

1. A l'Inspector d'objectes, feu clic al botó "…" al costat del valor de la propietat "Elements" de l'element "Pantalla TFT" (imatge 1)
2. A l’editor Elements, seleccioneu “Dibuixa text” i, a continuació, feu clic al botó "+" (imatge 2) per afegir-ne un (imatge 3)
3. A l'Inspector d'objectes, definiu el valor de la propietat "Color" de l'element "Dibuixa text1" a "aclSilver" (imatge 3)
4. A l'Inspector d'objectes, definiu el valor de la propietat "Mida" de l'element "Dibuixa text1" a "4" (imatge 4). Això fa que el text sigui més gran
5. A l'Inspector d'objectes, establiu el valor de la propietat "Text" de l'element "Draw Text1" a "Visuino" (imatge 5)
6. A l'Inspector d'objectes, definiu el valor de la propietat "X" de l'element "Dibuixa text1" a "43" (imatge 6)
7. A l'Inspector d'objectes, definiu el valor de la propietat "Y" de l'element "Dibuixa text1" a "278" (imatge 6)

Pas 5: a Visuino: afegiu un element de text de dibuix per al primer pla del text

Ara afegirem un element gràfic per dibuixar el text:

1. A l’editor Elements, seleccioneu “Dibuixa text” i, a continuació, feu clic al botó "+" (imatge 1) per afegir-ne un segon (imatge 2)
2. A l'Inspector d'objectes, definiu el valor de la propietat "Mida" de l'element "Dibuixa text1" a "4" (imatge 2)
3. A l'Inspector d'objectes, establiu el valor de la propietat "Text" de l'element "Draw Text1" a "Visuino" (imatge 3)
4. A l'Inspector d'objectes, definiu el valor de la propietat "X" de l'element "Dibuixa text1" a "40" (imatge 4)
5. A l'Inspector d'objectes, definiu el valor de la propietat "Y" de l'element "Draw Text1" a "275" (imatge 4)

Pas 6: a Visuino: afegiu un element de mapa de bits de dibuix per a l'animació

A continuació afegirem un element gràfic per dibuixar el mapa de bits:

1. A l’editor Elements, seleccioneu “Dibuixa mapa de bits” i, a continuació, feu clic al botó "+" (imatge 1) per afegir-ne un (imatge 2)
2. A l'Inspector d'objectes, feu clic al botó "…" situat al costat del valor de la propietat "Mapa de bits" de l'element "Dibuixa Bitmap1" (imatge 2) per obrir l '"Editor de mapa de bits" (imatge 3)
3. A l '"Editor de mapes de bits", feu clic al botó "Carrega …" (imatge 3) per obrir el quadre de diàleg Obrir fitxer (imatge 4)
4. Al quadre de diàleg Obrir fitxer, seleccioneu el mapa de bits que voleu dibuixar i feu clic al botó "Obre" (imatge 4). Si el fitxer és massa gran, pot ser que no pugui cabre a la memòria Arduino. Si us queda un error de memòria durant la compilació, potser haureu de seleccionar un mapa de bits més petit
5. A l '"Editor de mapes de bits", feu clic a "D'acord". (imatge 5) per tancar el diàleg

Pas 7: a Visuino: afegiu pins per a les propietats X i Y de l'element de mapa de bits de dibuix

Per animar el mapa de bits, hem de controlar la seva posició X i Y. Per a això afegirem pins per a les propietats X i Y:

1. A l'Inspector d'objectes, feu clic al botó "Pin" que hi ha al davant de la propietat "X" de l'element "Draw Bitmap1" (imatge 1) i seleccioneu "Integer SinkPin" (imatge 2)
2. A l'Inspector d'objectes, feu clic al botó "Fixa" que hi ha al davant de la propietat "Y" de l'element "Dibuixar mapa de bits1" (imatge 3) i seleccioneu "Integer SinkPin" (imatge 4)

Pas 8: a Visuino: afegiu 2 generadors de sinus sencers i configureu el primer

Utilitzarem 2 generadors de sinus sencers per animar el moviment del mapa de bits:

1. Escriviu "sinus" al quadre Filtre de la caixa d'eines de components i, a continuació, seleccioneu el component "Sine Integer Generator" (imatge 1) i deixeu-ne anar dos a l'àrea de disseny
2. A l'Inspector d'objectes, definiu el valor de la propietat "Amplitud" del component SineIntegerGenerator1 a "96" (imatge 2)
3. A l'Inspector d'objectes, definiu el valor de la propietat "Offset" del component SineIntegerGenerator1 a "96" (imatge 3)
4. A l'Inspector d'objectes, definiu el valor de la propietat "Freqüència" del component SineIntegerGenerator1 a "0,2" (imatge 4)

Pas 9: a Visuino: configureu el segon generador de sinus i connecteu els generadors de sinus als pins de coordenades X i Y del mapa de bits

1. A l'Inspector d'objectes, definiu el valor de la propietat "Amplitud" del component SineIntegerGenerator2 a "120" (imatge 1)
2. A l'Inspector d'objectes, definiu el valor de la propietat "Offset" del component SineIntegerGenerator2 a "120" (imatge 2)
3. A l'Inspector d'objectes, definiu el valor de la propietat "Freqüència" del component SineIntegerGenerator2 a "0,03" (imatge 3)
4. Connecteu el pin de sortida "Out" del component SineIntegerGenerator1 al pin d'entrada "X" de l'element "Shields. TFT Sisplay. Elements. Draw Bitmap1" del component Arduino (imatge 4)
5. Connecteu el pin de sortida "Out" del component SineIntegerGenerator2 al pin d'entrada "Y" de l'element "Shields. TFT Display. Elements. Draw Bitmap1" del component Arduino (imatge 5)

Pas 10: a Visuino: afegiu i connecteu components d’inici múltiple d’inici i rellotge

Per representar el mapa de bits cada vegada que s'actualitzen les posicions X i Y, hem d'enviar un senyal de rellotge a l'element "Draw Bitmap1". Per enviar l'ordre després de canviar les posicions, necessitem una manera de sincronitzar els esdeveniments. Per a això utilitzarem el component Repeat per generar esdeveniments constantment i Clock Multi Source per generar 2 esdeveniments en seqüència. El primer esdeveniment marcarà els generadors de sinus per actualitzar les posicions X i Y i el segon marcarà el "Draw Bitmap1":

1. Escriviu "repetir" al quadre Filtre de la caixa d'eines de components i, a continuació, seleccioneu el component "Repetir" (imatge 1) i deixeu-lo anar a l'àrea de disseny (imatge 2)
2. Escriviu "multi" al quadre Filtre de la caixa d'eines de components i, a continuació, seleccioneu el component "Font múltiple del rellotge" (imatge 2) i deixeu-lo anar a l'àrea de disseny (imatge 3)
3. Connecteu el pin de sortida "Out" del component Repeat1 al pin d'entrada "In" del component ClockMultiSource1 (imatge 3)
4. Connecteu el pin de sortida "Pin [0]" dels pins "Out" del component ClockMultiSource1 al pin d'entrada "In" del component SineIntegerGenerator1 (imatge 4)
5. Connecteu el pin de sortida "Pin [0]" dels pins "Out" del component ClockMultiSource2 al pin d'entrada "In" del component SineIntegerGenerator1 (imatge 5)
6. Connecteu el pin de sortida "Pin [1]" del pin d'entrada "Clock" de l'element "Shields. TFT Display. Elements. Draw Bitmap1" del component Arduino (imatge 6)

Pas 11: Genereu, compileu i pengeu el codi Arduino

1. A Visuino, premeu F9 o feu clic al botó que es mostra a la imatge 1 per generar el codi Arduino i obriu l'IDE Arduino
2. A l'IDE Arduino, feu clic al botó Puja, per compilar i penjar el codi (imatge 2)

Pas 12: i juga …

Enhorabona! Heu finalitzat el projecte.

Les imatges 2, 3, 4 i 5 i el vídeo mostren el projecte connectat i encès. Veureu el mapa de bits moure’s per l’escut de pantalla tàctil TFT basat en ILI9341 tal com es veu al vídeo.

A la imatge 1 podeu veure el diagrama complet de Visuino. També s’adjunta el projecte Visuino, que he creat per a aquest instructable, i el mapa de bits amb el logotip de Visuino. Podeu descarregar-lo i obrir-lo a Visuino: