Taula de continguts:
- Pas 1: components
- Pas 2: connecteu el blindatge de pantalla tàctil ILI9341 TFT a Arduino
- Pas 3: Inicieu Visuino i afegiu TFT Display Shield
- Pas 4: a Visuino: afegiu un element de text de dibuix per a l'ombra de text
- Pas 5: a Visuino: afegiu un element de text de dibuix per al primer pla del text
- Pas 6: a Visuino: afegiu un element de mapa de bits de dibuix per a l'animació
- Pas 7: a Visuino: afegiu pins per a les propietats X i Y de l'element de mapa de bits de dibuix
- Pas 8: a Visuino: afegiu 2 generadors de sinus sencers i configureu el primer
- 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
- Pas 10: a Visuino: afegiu i connecteu components d’inici múltiple d’inici i rellotge
- Pas 11: Genereu, compileu i pengeu el codi Arduino
- Pas 12: i juga …
Vídeo: Arduino Uno: Animació de mapa de bits en pantalla de pantalla tàctil ILI9341 TFT amb visuino: 12 passos (amb imatges)
2024 Autora: John Day | [email protected]. Última modificació: 2024-01-30 08:16
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
- Una placa compatible amb Arduino Uno (també pot funcionar amb Mega, però encara no he provat l'escut)
- 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.
- Inicieu Visuino com es mostra a la primera imatge
- Feu clic al botó "Fletxa avall" del component Arduino per obrir el menú desplegable (imatge 1)
- Al menú, seleccioneu "Afegeix escuts …" (imatge 1)
- 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:
- A l'Inspector d'objectes, feu clic al botó "…" al costat del valor de la propietat "Elements" de l'element "Pantalla TFT" (imatge 1)
- A l’editor Elements, seleccioneu “Dibuixa text” i, a continuació, feu clic al botó "+" (imatge 2) per afegir-ne un (imatge 3)
- A l'Inspector d'objectes, definiu el valor de la propietat "Color" de l'element "Dibuixa text1" a "aclSilver" (imatge 3)
- 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
- A l'Inspector d'objectes, establiu el valor de la propietat "Text" de l'element "Draw Text1" a "Visuino" (imatge 5)
- A l'Inspector d'objectes, definiu el valor de la propietat "X" de l'element "Dibuixa text1" a "43" (imatge 6)
- 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:
- A l’editor Elements, seleccioneu “Dibuixa text” i, a continuació, feu clic al botó "+" (imatge 1) per afegir-ne un segon (imatge 2)
- A l'Inspector d'objectes, definiu el valor de la propietat "Mida" de l'element "Dibuixa text1" a "4" (imatge 2)
- A l'Inspector d'objectes, establiu el valor de la propietat "Text" de l'element "Draw Text1" a "Visuino" (imatge 3)
- A l'Inspector d'objectes, definiu el valor de la propietat "X" de l'element "Dibuixa text1" a "40" (imatge 4)
- 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:
- A l’editor Elements, seleccioneu “Dibuixa mapa de bits” i, a continuació, feu clic al botó "+" (imatge 1) per afegir-ne un (imatge 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)
- 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)
- 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
- 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:
- 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)
- 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:
- 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
- A l'Inspector d'objectes, definiu el valor de la propietat "Amplitud" del component SineIntegerGenerator1 a "96" (imatge 2)
- A l'Inspector d'objectes, definiu el valor de la propietat "Offset" del component SineIntegerGenerator1 a "96" (imatge 3)
- 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
- A l'Inspector d'objectes, definiu el valor de la propietat "Amplitud" del component SineIntegerGenerator2 a "120" (imatge 1)
- A l'Inspector d'objectes, definiu el valor de la propietat "Offset" del component SineIntegerGenerator2 a "120" (imatge 2)
- A l'Inspector d'objectes, definiu el valor de la propietat "Freqüència" del component SineIntegerGenerator2 a "0,03" (imatge 3)
- 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)
- 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":
- 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)
- 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)
- Connecteu el pin de sortida "Out" del component Repeat1 al pin d'entrada "In" del component ClockMultiSource1 (imatge 3)
- Connecteu el pin de sortida "Pin [0]" dels pins "Out" del component ClockMultiSource1 al pin d'entrada "In" del component SineIntegerGenerator1 (imatge 4)
- Connecteu el pin de sortida "Pin [0]" dels pins "Out" del component ClockMultiSource2 al pin d'entrada "In" del component SineIntegerGenerator1 (imatge 5)
- 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
- 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
- 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:
Recomanat:
Animació de mapa de bits a la pantalla OLED (SPI) SSD1331 amb Visuino: 8 passos
Animació de mapa de bits a la pantalla OLED SSD1331 (SPI) amb Visuino: en aquest tutorial mostrarem i mourem una imatge de mapa de bits en una forma senzilla d’animació a la pantalla OLED SSD1331 (SPI) amb Visuino
Pantalla tàctil Macintosh - Mac clàssic amb un iPad Mini per a la pantalla: 5 passos (amb imatges)
Pantalla tàctil Macintosh | Mac clàssic amb un iPad Mini per a la pantalla: Aquesta és la meva actualització i disseny revisat sobre com substituir la pantalla d'un Macintosh vintage per un iPad mini. Aquest és el sisè d'aquests que he fet al llarg dels anys i estic bastant content de l'evolució i el disseny d'aquest! El 2013, quan vaig fer
Cançó temàtica PUBG + Animació amb Arduino !: 13 passos (amb imatges)
Cançó temàtica PUBG + Animació amb Arduino !: Hola i benvinguts a aquest divertit instructiu. Espero que tots estigueu bé i us mantingueu sans. Aquest petit però sorprenent projecte tracta de reproduir la cançó del tema PUBG i fins i tot de crear algunes animacions de jocs amb arduino. Els components utilitzats són molt
Com fer un rellotge en temps real amb la pantalla Arduino i TFT - Arduino Mega RTC amb pantalla TFT de 3,5 polzades: 4 passos
Com fer un rellotge en temps real amb pantalla Arduino i TFT | Arduino Mega RTC amb pantalla TFT de 3,5 polzades: visiteu el meu canal de Youtube. Introducció: - En aquest post vaig a fer "Rellotge en temps real" amb LCD TFT tàctil de 3,5 polzades, Arduino Mega Mòdul RTC 2560 i DS3231 … Abans de començar … comproveu el vídeo del meu canal de YouTube … Nota: - Si utilitzeu Arduin
Escala de pesatge amb pantalla tàctil (Arduino): 7 passos (amb imatges)
Escala de pesatge amb pantalla tàctil (Arduino): mai heu volgut construir una escala de pesatge amb pantalla tàctil? Mai no hi he pensat? Seguiu llegint i proveu de construir-ne un … Sabeu què són una pantalla tàctil TFT i una cel·la de càrrega? Si sí, aneu al pas 1, comenceu llegint la introducció