Animación de mapa de bits en ILI9341 TFT Touchscreen Display Shield

Acerca de este proyecto

Protectores de pantalla táctil TFT basados ​​en ILI9341 son Display Shields de bajo coste muy populares para Arduino . Visuino ha tenido soporte para ellos durante bastante tiempo, pero nunca tuve la oportunidad de escribir un tutorial sobre cómo usarlos. Recientemente, sin embargo, pocas personas hicieron preguntas sobre el uso de pantallas con Visuino , así que decidí hacer un tutorial.

En este tutorial, te mostraré lo fácil que es conectar el Shield a Arduino y programarlo con Visuino para animar un mapa de bits para que se mueva en la pantalla.

Paso 1:componentes

• Un Arduino Uno placa compatible (también puede funcionar con Mega, pero todavía no he probado el escudo con él)

• Un ILI9341 2.4 "TFT Touchscreen Shield para Arduino

Paso 2:Conecte el protector de pantalla táctil TFT ILI9341 a Arduino

Enchufe el protector TFT encima del Arduino Uno como se muestra en las imágenes.

Paso 3:Inicie Visuino y agregue TFT Display Shield

Para comenzar a programar Arduino, necesitará tener el IDE de Arduino instalado desde aquí:http://www.arduino.cc/.

¡Asegúrate de instalar 1.6.7 o superior, de lo contrario, este tutorial no funcionará!

El Visuino :https://www.visuino.com también debe estar instalado.

• Inicie Visuino como se muestra en la primera imagen

• Haga clic en la " Flecha hacia abajo "botón del componente Arduino para abrir el menú desplegable ( Imagen 1 )

• En el menú, seleccione " Agregar escudos ... "( Imagen 1 )

• En " Escudos "muestra el cuadro de diálogo" Pantallas "y seleccione la categoría" Pantalla táctil a color TFT ILI9341 Shield ", luego haga clic en" + "para agregarlo ( Imagen 2 )

Paso 4:En Visuino:agregue el elemento Dibujar texto para la sombra del texto

A continuación, debemos agregar elementos gráficos para representar texto y mapa de bits. Primero agregaremos un elemento gráfico para dibujar la sombra del texto:

• En el Inspector de objetos, haga clic en " ... "junto al valor de" Elementos "propiedad de" Pantalla TFT "Elemento ( Imagen 1 )

• En el editor de elementos, seleccione " Dibujar texto ”, Y luego haga clic en" + botón "( Imagen 2 ) para agregar uno ( Imagen 3 )

• En el Inspector de objetos, establezca el valor de " Color "propiedad de" Dibujar texto1 "elemento a" aclSilver "( Imagen 3 )

• En el Inspector de objetos, establezca el valor de " Tamaño "propiedad de" Dibujar texto1 "elemento a" 4 "( Imagen 4 ). Esto hace que el texto sea más grande

• En el Inspector de objetos, establezca el valor de " Texto "propiedad de" Dibujar texto1 "elemento a" Visuino "( Imagen 5 )

• En el Inspector de objetos, establezca el valor de " X "propiedad de" Dibujar texto1 "elemento a" 43 "( Imagen 6 )

• En el Inspector de objetos, establezca el valor de " Y "propiedad de" Dibujar texto1 "elemento a" 278 "( Imagen 6 )

Paso 5:En Visuino:agregue el elemento Dibujar texto para el primer plano del texto

Ahora agregaremos elementos gráficos para dibujar el texto:

• En el editor de elementos, seleccione " Dibujar texto ”, Y luego haga clic en el botón" "( Imagen 1 ) para agregar el segundo ( Imagen 2 )

• En el Inspector de objetos, establezca el valor de " Tamaño "propiedad de" Dibujar texto1 "elemento a" 4 "( Imagen 2 )

• En el Inspector de objetos, establezca el valor de " Texto "propiedad de" Dibujar texto1 "elemento a" Visuino "( Imagen 3 )

• En el Inspector de objetos, establezca el valor de " X "propiedad de" Dibujar texto1 "elemento a" 40 "( Imagen 4 )

• En el Inspector de objetos, establezca el valor de " Y "propiedad de" Dibujar texto1 "elemento a" 275 "( Imagen 4 )

Paso 6:En Visuino:agregue el elemento Draw Bitmap para la animación

A continuación, agregaremos un elemento gráfico para dibujar el mapa de bits:

• En el editor de elementos, seleccione " Dibujar mapa de bits ”, Y luego haga clic en el botón" "( Imagen 1 ) para agregar uno ( Imagen 2 )

• En el Inspector de objetos, haga clic en " ... "junto al valor del" Mapa de bits "propiedad de" Dibujar mapa de bits1 "Elemento ( Imagen 2 ) para abrir el " Editor de mapa de bits "( Imagen 3 )

• En el " Editor de mapa de bits "haga clic en" Cargar ... botón "( Imagen 3 ) para abrir el cuadro de diálogo Abrir archivo ( Imagen 4 )

• En el cuadro de diálogo Abrir archivo, seleccione el mapa de bits que desee dibujar y haga clic en " Abrir botón "( Imagen 4 ). Si el archivo es demasiado grande, es posible que no quepa en la memoria Arduino. Si se queda sin memoria durante la compilación, es posible que deba seleccionar un mapa de bits más pequeño

• En el " Editor de mapa de bits "haga clic en" Aceptar . "Botón ( Imagen 5 ) para cerrar el cuadro de diálogo

Paso 7:En Visuino:agregue pines para las propiedades X e Y del elemento Dibujar mapa de bits

Para animar el mapa de bits, necesitamos controlar su posición X e Y. Para esto agregaremos pines para las propiedades X e Y:

• En el Inspector de objetos, haga clic en el " Pin "botón en la parte delantera de la" X "propiedad de" Dibujar mapa de bits1 "elemento ( Imagen 1 ) y seleccione " Integer SinkPin "( Imagen 2 )

• En el Inspector de objetos, haga clic en el " Pin "botón en la parte delantera de" Y "propiedad de" Dibujar mapa de bits1 "elemento ( Imagen 3 ) y seleccione " Integer SinkPin "( Imagen 4 )

Paso 8:En Visuino:agregue 2 generadores de seno de enteros y configure el primero

Usaremos 2 generadores de seno entero para animar el movimiento del mapa de bits:

• Escriba " seno "en el cuadro Filtro de la Caja de herramientas de componentes y, a continuación, seleccione" Generador de enteros sinusoidales "componente ( Imagen 1 ) y suelte dos de ellos en el área de diseño

• En el Inspector de objetos, establezca el valor de " Amplitud "propiedad de SineIntegerGenerator1 componente a " 96 "( Imagen 2 )

• En el Inspector de objetos, establezca el valor de " Desplazamiento "propiedad de SineIntegerGenerator1 componente a " 96 "( Imagen 3 )

• En el Inspector de objetos, establezca el valor de la " Frecuencia "propiedad de SineIntegerGenerator1 componente a " 0.2 "( Imagen 4 )

Paso 9:En Visuino:configure el segundo generador de seno y conecte los generadores de seno a los pines de coordenadas X e Y del mapa de bits

• En el Inspector de objetos, establezca el valor de " Amplitud "propiedad de SineIntegerGenerator2 componente a " 120 "( Imagen 1 )

• En el Inspector de objetos, establezca el valor de " Desplazamiento "propiedad de SineIntegerGenerator2 componente a " 120 "( Imagen 2 )

• En el Inspector de objetos, establezca el valor de la " Frecuencia "propiedad de SineIntegerGenerator2 componente a " 0.03 "( Imagen 3 )

• Conecte el " Out "pin de salida del SineIntegerGenerator1 componente a la " X "pin de entrada del" Shields.TFT Sisplay.Elements.Draw Bitmap1 "elemento del Arduino componente ( Imagen 4 )

• Conecte el " Out "pin de salida del SineIntegerGenerator2 componente a la " Y "pin de entrada del" Shields.TFT Display.Elements.Draw Bitmap1 "elemento del Arduino componente ( Imagen 5 )

Paso 10:En Visuino:agregue y conecte los componentes Start y Clock Multi Source

Para representar el mapa de bits cada vez que se actualizan las posiciones X e Y, necesitamos enviar una señal de reloj al elemento "Dibujar mapa de bits1". Para enviar el comando después de que se hayan cambiado las posiciones, necesitamos una forma de sincronizar los eventos. Para esto usaremos el componente Repeat para generar eventos constantemente, y Clock Multi Source para generar 2 eventos en secuencia. El primer evento registrará los generadores de seno para actualizar las posiciones X e Y, y el segundo registrará el "Dibujar mapa de bits1":

• Escriba " repetir "en el cuadro Filtro de la Caja de herramientas de componentes, luego seleccione la opción" Repetir "componente ( Imagen 1 ) y colóquelo en el área de diseño ( Imagen 2 )

• Escriba " multi "en el cuadro Filtro de la Caja de herramientas de componentes, luego seleccione la opción" Reloj de múltiples fuentes "componente ( Imagen 2 ) y colóquelo en el área de diseño ( Imagen 3 )

• Conecte el " Out "pin de salida del Repeat1 componente al " En "pin de entrada de ClockMultiSource1 componente ( Imagen 3 )

• Conecte el " Pin [0] "pin de salida del" Out "pines de ClockMultiSource1 componente al " En "pin de entrada del SineIntegerGenerator1 componente ( Imagen 4 )

• Conecte el " Pin [0] "pin de salida del" Out "pines de ClockMultiSource2 componente al " En "pin de entrada del SineIntegerGenerator1 componente ( Imagen 5 )

• Conecte el " Pin [1] "pin de salida del" Reloj "pin de entrada del" Shields.TFT Display.Elements.Draw Bitmap1 "elemento del Arduino componente ( Imagen 6 )

Paso 11:Genere, compile y cargue el código Arduino

• En Visuino , Presione F9 o haga clic en el botón que se muestra en Imagen 1 para generar el código Arduino y abrir el IDE de Arduino

• En Arduino IDE , haz clic en Subir , para compilar y cargar el código ( Imagen 2 )

Paso 12:Y juega ...

¡Felicitaciones! Has completado el proyecto.

Imágenes 2, 3, 4 y 5 y el Video muestra el proyecto conectado y encendido. Verá el mapa de bits moviéndose alrededor del protector de pantalla táctil TFT basado en ILI9341 como se ve en el video .

En Imagen 1 puedes ver el Visuino completo También se adjunta el Visuino proyecto, que creé para este tutorial, y el mapa de bits con Visuino logo. Puedes descargarlo y abrirlo en Visuino :https://www.visuino.com