Proyecto Arduino GPS y Pantalla TFT Táctil Shield: Visualización de Ubicación en Tiempo Real

Componentes y materiales

Componente	Cantidad
Arduino UNO	1
Makerfabs GPS Shield	1
Shield Pantalla TFT Táctil ILI9341 2.4" para Arduino	1

Aplicaciones y servicios online

• Visuino - Entorno de desarrollo gráfico para Arduino
• Arduino IDE

Descripción del proyecto

Recientemente la gente de Makerfabs me envió un Arduino GPS Shield para apoyar el desarrollo de Visuino y permitirme hacer más tutoriales. También quería hacer más tutoriales con mi Shield Pantalla TFT Táctil ILI9341, y decidí hacer un tutorial usando los dos shields juntos.

En este tutorial te mostraré lo fácil que es conectar los shields a Arduino y programarlo con Visuino para mostrar información de ubicación GPS en el display.

Paso 1: Componentes

• Una placa Arduino UNO compatible (puede funcionar con Mega, pero no he probado el shield con él)
• Un Makerfabs Arduino GPS Shield (parte trasera en Imagen 2)
• Un Shield Pantalla TFT Táctil ILI9341 2.4" para Arduino

Después de publicar este tutorial, la gente de Makerfabs creó un Combo Especial con todos los componentes para este proyecto.

Paso 2: Iniciar Visuino, añadir y configurar Shield Display TFT

Como el Arduino UNO tiene solo un puerto serie, necesario para programar el Arduino, tendrás que programar el Arduino UNO antes de conectar el GPS.

Para empezar a programar, necesitas Arduino IDE instalado: https://www.arduino.cc/.

¡Asegúrate de instalar versión 1.6.7 o superior, si no este tutorial no funcionará!

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

1. Inicia Visuino (Imagen 1)
2. Haz clic en el botón "Flecha abajo" del componente Arduino para abrir menú desplegable (Imagen 1)
3. En el menú selecciona "Añadir Shields..." (Imagen 1)
4. En el diálogo "Shields", expande categoría "Displays" y selecciona "Shield Pantalla Táctil Color TFT ILI9341", luego clic en botón "+" para añadirlo (Imagen 2)
5. En el Inspector de Objetos, expande propiedad "Texto" (Imagen 3)
6. En el Inspector, pon valor "2" en sub-propiedad "Tamaño" de "Texto" (Imagen 3) - esto agranda el texto por defecto al dibujar en el display

Paso 3: En Visuino, añadir elementos de campo de texto para información GPS

Añadimos elementos gráficos para mostrar Latitud, Longitud y Altitud del GPS:

1. En Inspector de Objetos, clic en botón "..." junto a valor de propiedad "Elementos" del elemento "Shield TFT Display" (Imagen 1)
2. En editor de elementos selecciona "Campo de Texto" y clic 3 veces en botón "+" (Imagen 2) para añadir 3 de ellos (Imagen 2)
3. Selecciona los 3 elementos "Campo de Texto" (Imagen 3)
4. En Inspector pon propiedad "Auto Tamaño" de los 3 elementos a "Falso" (Imagen 3)
5. En Inspector pon propiedad "Ancho" de los 3 elementos a "10" (Imagen 3)
6. En Inspector pon propiedad "X" de los 3 elementos a "10" (Imagen 3)

Paso 4: En Visuino, configurar resto de propiedades de los campos de texto

1. Selecciona elemento "Campo de Texto1" (Imagen 1)
2. En Inspector pon propiedad "Valor Inicial" a "Actualizar" (Imagen 1) - muestra "Actualizar" hasta que llegue primer dato GPS
3. En Inspector pon propiedad "Y" a "20" (Imagen 2)
4. Selecciona elemento "Campo de Texto2" (Imagen 3)
5. En Inspector pon propiedad "Y" a "40" (Imagen 3)
6. Selecciona elemento "Campo de Texto3" (Imagen 4)
7. En Inspector pon propiedad "Y" a "60" (Imagen 4)

Paso 5: En Visuino, añadir y conectar componente GPS Serie

Para decodificar información GPS del GPS Shield, añadimos y conectamos componente GPS en Visuino:

1. Escribe "GPS" en filtro de Caja de Herramientas, selecciona componente "GPS Serie" (Imagen 1), arrástralo al área de diseño
2. Conecta pin de salida "Latitud" del cuadro "Ubicación" del componente GPS1 al pin "Entrada" del elemento "Shields.TFT Display.Elements.Campo de Texto1" del componente Arduino (Imagen 2)
3. Conecta pin "Longitud" de "Ubicación" de GPS1 a "Entrada" de "Shields.TFT Display.Elements.Campo de Texto2" (Imagen 3)
4. Conecta pin "Altitud" de "Ubicación" de GPS1 a "Entrada" de "Shields.TFT Display.Elements.Campo de Texto3" (Imagen 4)
5. Conecta pin "Salida" del componente GPS1 (Imagen 5) al pin "Entrada" de "Serial[ 0 ]" del componente Arduino (Imagen 6)

Paso 6: Generar, compilar y subir código Arduino

1. En Visuino, pulsa F9 o clic en botón de Imagen 1 para generar código Arduino y abrir Arduino IDE
2. En Arduino IDE, clic en botón Subir para compilar y cargar el código (Imagen 2)

Paso 7: Configurar y conectar GPS Shield a Arduino

Ahora que el Arduino UNO está programado, instalamos los shields.

El Makerfabs GPS Shield tiene jumpers para configurar pines de comunicación serie con el chip GPS (Imagen 1). Los configuraremos para usar el Serie Hardware en pines 0 y 1 del Arduino UNO:

1. Configura jumper TX para conectar TX a Pin 0 (Imagen 1)
2. Configura jumper RX para conectar RX a Pin 1 (Imagen 1)
3. Conecta el Shield TFT encima del Arduino Uno como en Imágenes 2, 3, 4 y 5

Paso 8: Conectar Shield Display TFT Táctil ILI9341 a Arduino

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

Paso 9: ¡Y a disfrutar!

¡Enhorabuena! Has completado el proyecto.

Imágenes 2, 3, 4 y 5 y el Video muestran el proyecto conectado y encendido.

• Enciende el Arduino UNO
• Inicialmente verás "Actualizar" en el Shield Display TFT (Imagen 1)
• Mira de lado (Imagen 2), al rato verás que el LED azul del Makerfabs GPS Shield empieza a parpadear indicando que ha encontrado satélites GPS (Imagen 3)
• Poco después, la ubicación GPS se mostrará en el Shield Display TFT (Imagen 4)

Según la ubicación, puede tardar unos minutos en mostrar datos. Si tras varios minutos no aparece nada, apaga el proyecto, espera un minuto y vuelve a encender para resetear el GPS.

En Imagen 1 ves el diagrama completo de Visuino. Puedes descargarlo y abrirlo en Visuino: https://www.visuino.com

Si no tienes los componentes, la gente de Makerfabs hizo un Combo Especial con todos los componentes para este proyecto.

Descargar diagrama Visuino