Guía Profesional de Animación Bitmap en Pantalla Táctil ILI9341 2.4″ con Shield para Arduino

Componentes y materiales

Componente	Cantidad
Arduino UNO	1
Shield Pantalla Táctil TFT ILI9341 2.4″ para Arduino	1

Aplicaciones y servicios online

• Visuino - Entorno de Desarrollo Gráfico para Arduino
• Arduino IDE (versión 1.6.7 o superior)

Sobre el proyecto

Los Shields de Pantalla Táctil TFT basados en ILI9341 son Shields de Pantalla de bajo costo muy populares para Arduino. Visuino ha tenido soporte para ellos desde hace tiempo, pero nunca tuve la oportunidad de escribir un tutorial sobre cómo usarlos. Recientemente, varias personas preguntaron sobre el uso de pantallas con Visuino, así que decidí crear este tutorial.

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

Paso 1: Componentes

• Una placa compatible con Arduino Uno (puede funcionar con Mega, pero no he probado el shield con él aún)
• Un Shield Pantalla Táctil TFT ILI9341 2.4″ para Arduino

Paso 2: Conectar el Shield de Pantalla Táctil ILI9341 a Arduino

Conecta el Shield TFT encima del Arduino Uno como se muestra en las imágenes.

Paso 3: Iniciar Visuino y añadir Shield de Pantalla TFT

• Inicia Visuino como se muestra en la primera imagen
• Haz clic en el botón "Flecha Abajo" del componente Arduino para abrir el Menú Desplegable (Imagen 1)
• Del menú selecciona "Añadir Shields..." (Imagen 1)
• En el diálogo "Shields", expande la categoría "Displays" y selecciona "TFT Color Touch Screen Display ILI9341 Shield", luego haz clic en el botón "+" para añadirlo (Imagen 2)

Paso 4: En Visuino: Añadir elemento Draw Text para la sombra del texto

• En el Inspector de Objetos, haz clic en el botón "..." junto al valor de la propiedad "Elements" del elemento "TFT Display" (Imagen 1)
• En el editor de elementos selecciona "Draw Text" y haz clic en el botón "+" (Imagen 2) para añadir uno (Imagen 3)
• En el Inspector de Objetos establece el valor de la propiedad "Color" del elemento "Draw Text1" a "aclSilver" (Imagen 3)
• Establece la propiedad "Size" a "4" (Imagen 4) para agrandar el texto
• Establece la propiedad "Text" a "Visuino" (Imagen 5)
• Establece la propiedad "X" a "43" (Imagen 6)
• Establece la propiedad "Y" a "278" (Imagen 6)

Paso 5: En Visuino: Añadir elemento Draw Text para el texto en primer plano

• En el editor de elementos selecciona "Draw Text" y haz clic en el botón "+" (Imagen 1) para añadir el segundo (Imagen 2)
• Establece la propiedad "Size" a "4" (Imagen 2)
• Establece la propiedad "Text" a "Visuino" (Imagen 3)
• Establece la propiedad "X" a "40" (Imagen 4)
• Establece la propiedad "Y" a "275" (Imagen 4)

Paso 6: En Visuino: Añadir elemento Draw Bitmap para la animación

• En el editor de elementos selecciona "Draw Bitmap" y haz clic en el botón "+" (Imagen 1) para añadir uno (Imagen 2)
• En el Inspector de Objetos, haz clic en el botón "..." junto al valor de la propiedad "Bitmap" del elemento "Draw Bitmap1" (Imagen 2) para abrir el "Editor de Bitmap" (Imagen 3)
• En el "Editor de Bitmap" haz clic en el botón "Cargar..." (Imagen 3) para abrir el Diálogo de Apertura de Archivo (Imagen 4)
• Selecciona el bitmap a dibujar y haz clic en "Abrir" (Imagen 4). Si el archivo es muy grande puede que no quepa en la memoria del Arduino. Si obtienes error de memoria durante la compilación, necesitarás un bitmap más pequeño
• Haz clic en "OK" (Imagen 5) para cerrar el diálogo

Paso 7: En Visuino: Añadir pines para las propiedades X e Y del elemento Draw Bitmap

• En el Inspector de Objetos haz clic en el botón "Pin" frente a la propiedad "X" del elemento "Draw Bitmap1" (Imagen 1) y selecciona "Integer SinkPin" (Imagen 2)
• Haz lo mismo para la propiedad "Y" (Imagen 3) y selecciona "Integer SinkPin" (Imagen 4)

Paso 8: En Visuino: Añadir 2 Generadores de Seno Enteros y configurar el primero

• Escribe "sine" en el cuadro de filtro del Component Toolbox, selecciona "Sine Integer Generator" (Imagen 1) y arrastra dos al área de diseño
• Establece la propiedad "Amplitude" de SineIntegerGenerator1 a "96" (Imagen 2)
• Establece la propiedad "Offset" a "96" (Imagen 3)
• Establece la propiedad "Frequency" a "0.2" (Imagen 4)

Paso 9: En Visuino: Configurar el segundo generador de seno y conectar a los pines X e Y del bitmap

• Establece "Amplitude" de SineIntegerGenerator2 a "120" (Imagen 1)
• Establece "Offset" a "120" (Imagen 2)
• Establece "Frequency" a "0.03" (Imagen 3)
• Conecta la salida "Out" de SineIntegerGenerator1 al pin de entrada "X" del elemento "Shields.TFT Display.Elements.Draw Bitmap1" del componente Arduino (Imagen 4)
• Conecta la salida "Out" de SineIntegerGenerator2 al pin de entrada "Y" del mismo elemento (Imagen 5)

Paso 10: En Visuino: Añadir y conectar componentes Start y Clock Multi Source

• Escribe "repeat" en el filtro, selecciona "Repeat" (Imagen 1) y arrástralo al área de diseño (Imagen 2)
• Escribe "multi", selecciona "Clock Multi Source" (Imagen 2) y arrástralo (Imagen 3)
• Conecta "Out" de Repeat1 a "In" de ClockMultiSource1 (Imagen 3)
• Conecta "Pin[0]" de ClockMultiSource1 a "In" de SineIntegerGenerator1 (Imagen 4)
• Conecta "Pin[0]" de ClockMultiSource2 a "In" de SineIntegerGenerator1 (Imagen 5)
• Conecta "Pin[1]" al pin "Clock" del elemento "Shields.TFT Display.Elements.Draw Bitmap1" del Arduino (Imagen 6)

Paso 11: Generar, compilar y subir el código Arduino

• En Visuino, presiona F9 o haz clic en el botón mostrado (Imagen 1) para generar el código Arduino y abrir el Arduino IDE
• En el Arduino IDE, haz clic en Subir para compilar y cargar el código (Imagen 2)

Paso 12: ¡A jugar!

¡Felicidades! Has completado el proyecto.

Las Imágenes 2, 3, 4 y 5 y el Video muestran el proyecto conectado y alimentado. Verás el Bitmap moviéndose por la Pantalla Táctil TFT basada en ILI9341 como se ve en el Video.

En la Imagen 1 puedes ver el diagrama completo de Visuino. También se adjunta el proyecto de Visuino creado para este tutorial y el bitmap con el logo de Visuino. Puedes descargarlo y abrirlo en Visuino: https://www.visuino.com