Arduino Uno: animación de mapa de bits en ILI9341 TFT Touchscreen Display Shield con Visuino: 12 pasos (con imágenes)

2024 Autor: John Day | [email protected]. Última modificación: 2024-01-30 08:44

Los protectores de pantalla táctil TFT basados en ILI9341 son protectores de pantalla de bajo costo 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, le mostraré lo fácil que es conectar el Shield a Arduino y programarlo con Visuino para animar un mapa de bits y moverse en la pantalla.

Paso 1: componentes

1. Una placa compatible con Arduino Uno (puede que también funcione con Mega, pero todavía no he probado el escudo con él)
2. Un protector de pantalla táctil TFT de 2,4 "ILI9341 para Arduino

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

Conecte el TFT Shield en la parte superior del Arduino Uno como se muestra en las imágenes

Paso 3: Inicie Visuino y agregue TFT Display Shield

Para comenzar a programar el Arduino, necesitará tener el IDE de Arduino instalado desde aquí:

¡Asegúrese de instalar 1.6.7 o superior, de lo contrario, este Instructable no funcionará

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

1. Inicie Visuino como se muestra en la primera imagen
2. Haga clic en el botón "Flecha hacia abajo" del componente Arduino para abrir el menú desplegable (Imagen 1)
3. En el menú, seleccione "Agregar escudos …" (Imagen 1)
4. En el cuadro de diálogo "Shields", expanda la categoría "Displays" y seleccione "TFT Color Touch Screen Display ILI9341 Shield", luego haga clic en el botón "+" para agregarlo (Imagen 2)

Paso 4: En Visuino: agregar elemento de texto de dibujo para la sombra del texto

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

1. En el Inspector de objetos, haga clic en el botón "…" junto al valor de la propiedad "Elementos" del elemento "Pantalla TFT" (Imagen 1)
2. En el editor de elementos, seleccione "Dibujar texto", y luego haga clic en el botón "+" (Imagen 2) para agregar uno (Imagen 3)
3. En el Inspector de objetos, establezca el valor de la propiedad "Color" del elemento "Dibujar texto1" en "aclSilver" (Imagen 3)
4. En el Inspector de objetos, establezca el valor de la propiedad "Tamaño" del elemento "Dibujar texto1" en "4" (Imagen 4). Esto hace que el texto sea más grande
5. En el Inspector de objetos, establezca el valor de la propiedad "Texto" del elemento "Dibujar texto1" en "Visuino" (Imagen 5)
6. En el Inspector de objetos, establezca el valor de la propiedad "X" del elemento "Dibujar texto1" en "43" (Imagen 6)
7. En el Inspector de objetos, establezca el valor de la propiedad "Y" del elemento "Dibujar texto1" en "278" (Imagen 6)

Paso 5: En Visuino: agregar elemento de texto de dibujo para el primer plano del texto

Ahora agregaremos elemento gráfico para dibujar el texto:

1. En el editor de elementos, seleccione "Dibujar texto", y luego haga clic en el botón "+" (Imagen 1) para agregar el segundo (Imagen 2)
2. En el Inspector de objetos, establezca el valor de la propiedad "Tamaño" del elemento "Dibujar texto1" en "4" (Imagen 2)
3. En el Inspector de objetos, establezca el valor de la propiedad "Texto" del elemento "Dibujar texto1" en "Visuino" (Imagen 3)
4. En el Inspector de objetos, establezca el valor de la propiedad "X" del elemento "Dibujar texto1" en "40" (Imagen 4)
5. En el Inspector de objetos, establezca el valor de la propiedad "Y" del elemento "Dibujar texto1" en "275" (Imagen 4)

Paso 6: En Visuino: agregue el elemento de mapa de bits de dibujo para la animación

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

1. 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)
2. En el Inspector de objetos, haga clic en el botón "…" junto al valor de la propiedad "Mapa de bits" del elemento "Dibujar mapa de bits1" (Imagen 2) para abrir el "Editor de mapa de bits" (Imagen 3)
3. En el "Editor de mapa de bits", haga clic en el botón "Cargar …" (Imagen 3) para abrir el cuadro de diálogo Abrir archivo (Imagen 4)
4. En el cuadro de diálogo Abrir archivo, seleccione el mapa de bits que desee dibujar y haga clic en el botón "Abrir" (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
5. En el "Editor de mapa de bits", haga clic en "Aceptar". botón (Imagen 5) para cerrar el 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:

1. En el Inspector de objetos, haga clic en el botón "Pin" al frente de la propiedad "X" del elemento "Dibujar Bitmap1" (Imagen 1) y seleccione "Integer SinkPin" (Imagen 2)
2. En el Inspector de objetos, haga clic en el botón "Pin" al frente de la propiedad "Y" del elemento "Dibujar Bitmap1" (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:

1. Escriba "seno" en el cuadro Filtro de la Caja de herramientas de componentes, luego seleccione el componente "Generador de enteros seno" (Imagen 1) y suelte dos de ellos en el área de diseño
2. En el Inspector de objetos, establezca el valor de la propiedad "Amplitud" del componente SineIntegerGenerator1 en "96" (Imagen 2)
3. En el Inspector de objetos, establezca el valor de la propiedad "Offset" del componente SineIntegerGenerator1 en "96" (Imagen 3)
4. En el Inspector de objetos, establezca el valor de la propiedad "Frecuencia" del componente SineIntegerGenerator1 en "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

1. En el Inspector de objetos, establezca el valor de la propiedad "Amplitud" del componente SineIntegerGenerator2 en "120" (Imagen 1)
2. En el Inspector de objetos, establezca el valor de la propiedad "Offset" del componente SineIntegerGenerator2 en "120" (Imagen 2)
3. En el Inspector de objetos, establezca el valor de la propiedad "Frecuencia" del componente SineIntegerGenerator2 en "0.03" (Imagen 3)
4. Conecte el pin de salida "Out" del componente SineIntegerGenerator1 al pin de entrada "X" del elemento "Shields. TFT Sisplay. Elements. Draw Bitmap1" del componente Arduino (Imagen 4)
5. Conecte el pin de salida "Out" del componente SineIntegerGenerator2 al pin de entrada "Y" del elemento "Shields. TFT Display. Elements. Draw Bitmap1" del componente Arduino (Imagen 5)

Paso 10: En Visuino: agregue y conecte los componentes de origen múltiple de inicio y reloj

Para renderizar 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":

1. Escriba "repetir" en el cuadro Filtro de la Caja de herramientas de componentes, luego seleccione el componente "Repetir" (Imagen 1) y suéltelo en el área de diseño (Imagen 2)
2. Escriba "multi" en el cuadro Filtro de la Caja de herramientas de componentes, luego seleccione el componente "Reloj de múltiples fuentes" (Imagen 2) y suéltelo en el área de diseño (Imagen 3)
3. Conecte el pin de salida "Out" del componente Repeat1 al pin de entrada "In" del componente ClockMultiSource1 (Imagen 3)
4. Conecte el pin de salida "Pin [0]" de los pines "Out" del componente ClockMultiSource1 al pin de entrada "In" del componente SineIntegerGenerator1 (Imagen 4)
5. Conecte el pin de salida "Pin [0]" de los pines "Out" del componente ClockMultiSource2 al pin de entrada "In" del componente SineIntegerGenerator1 (Imagen 5)
6. Conecte el pin de salida "Pin [1]" del pin de entrada "Reloj" del elemento "Shields. TFT Display. Elements. Draw Bitmap1" del componente Arduino (Imagen 6)

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

1. En Visuino, presione F9 o haga clic en el botón que se muestra en la Imagen 1 para generar el código Arduino y abra el IDE de Arduino
2. En el IDE de Arduino, haga clic en el botón Cargar, para compilar y cargar el código (Imagen 2)

Paso 12: Y juega …

¡Felicidades! Has completado el proyecto.

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

En la Imagen 1 se puede ver el diagrama completo de Visuino. También se adjunta el proyecto Visuino, que creé para este Instructable, y el mapa de bits con el logo de Visuino. Puede descargarlo y abrirlo en Visuino: