Hoy vamos a continuar explorando las posibilidades del Sensor de Orientación de nuestro dispositivo Android con AppInventor. Y para no perder el Norte, vamos a convertir nuestro móvil en una brújula:

Si este es tu primer tutorial con AppInventor puedes revisar los tutoriales anteriores.

Pero como decimos siempre

¡Vayamos por partes!

Diseñador

Lo primero que vamos a hacer es utilizar el Diseñador de AppInventor para construir la interfaz gráfica. Hemos decidido referirnos a los componentes de AppInventor y mostrar los pantallazos correspondientes en su versión en ingles, la razón para esto es que las traducciones nos han parecido confusas y en muchos casos desafortunadas.Siendo el ingles la lingua franca en el mundo de la tecnología, esto no debería representar mas que una ventaja..

Los componentes que vamos a utilizar son:

• Screen1: cambiaremos la propiedad Title para mostrar el texto Brújula.
• Canvas: Este componente permite dibujar y  Lo puedes encontrar en la sección Dibujo y animación. Acuérdate de marcar el Ancho y el Alto como Ajustar a contenedor para que se expanda a toda la pantalla disponible.
  • BackgroundImage: como imagen de fondo seleccionaremos la imagen de la rosa de los vientos que previamente habremos subido a AppInventor.
• ImageSprite: también en la sección de Dibujo y animación. La colocaremos dentro del Canvas y la renombraremos a AgujaBrujula y subiremos la imagen de la aguja con la configuraremos la propiedad Picture.
• De la sección de Interfaz de usuario añadiremos una etiqueta Label que colocaremos  que colocaremos inmediatamente después del Canvas. Vamos a utilizar esta etiqueta para mostrar en pantalla el valor del sensor de orientación mientras estamos haciendo pruebas (ver depurar). Una vez tengamos el programa rematado podremos marcarla como no visible o borrarla permanentemente. Nosotros hemos renombrado esta etiqueta como EtiquetaAzimut ya que mostrara el valor del azimut del Sensor de Orientación.
• OrientationSensor1: añadiremos a la pantalla un OrientationSensor (sección Sensores). Este componente no es visible con lo cual aparecerá en el área del diseñador para componentes no visibles.

Recursos

Para las imágenes de La Rosa de los Vientos  y la Aguja de la brújula puedes utilizar estas dos imágenes, o cualquier otra que te parezca mas apropiada. Asegúrate que la imagen de la aguja tiene el fondo transparente:

Bloques

En la sección de bloques implementaremos la lógica de nuestra Brújula.

Inicializando los tamaños de la Aguja

Como no sabemos las dimensiones del dispositivo en el que se va a ejecutar nuestra aplicación, podría ser un teléfono móvil de 5 pulgadas o una tableta mucho mayor. Por lo tanto vamos a inicializar las dimensiones y la posición de la aguja dinámicamente. Para ello utilizaremos el evento en que se inicializa la pantalla:

• when Screen1.Initialize: este bloque se invoca cuando se pinta la pantalla por primera vez
  • set AgujaBrujula.Width: informaremos e ancho de la aguja para ocupar todo el ancho del contenedor en que esta embebido, en este caso el Canvas1
  • set AgujaBrujula.Height: informamos el alto de la aguja al ancho del contenedor, ya que si utilizásemos todo el alto del contenedor saldría de los limites de la pantalla al rotar.
  • set AgujaBrujula.X y set AgujaBrujula.Y: informaremos las coordenadas X e Y para posicionar la aguja en el centro del Canvas. Para ello calculamos la mitad del tamaño del Canvas y le restamos la mitad del tamaño de la imagen, de esta forma el centro de la imagen de la aguja coincidirá con el centro del contenedor Canvas.
  • set AgujaBrujula.Rotates: configuramos la imagen para rotar (true) cuando cambie el valor Heading ya que sera este valor el que utilizaremos para cambiar la orientación de la aguja para apuntar al Norte.

La Brújula

Utilizaremos el bloque <when OrientationSensor1.OrientationChanged>, que se ejecutara cada vez que se produzca un cambio de orientación en el dispositivo, para cambiar la propiedad Heading de la aguja:

Este evento OrientationChanged tiene tres parámetros, sin embargo nosotros nos centraremos solo en uno:

• azimut o acimut (brújula): este valor esta relacionado con la función brújula del sensor. Tendrá el valor 0 cuando esta apuntando al Norte, 90 cuando apunta al Este, 180 apuntando al Sur y 270 cuando apunta al Oeste. Para orientar la Aguja de nuestra Brújula vamos usar este valor.

Con este valor azimut informaremos el valor de la propiedad Heading (set AgujaBrujula.Heading)de la aguja y también aprovechamos para informar el texto de la etiqueta EtiquetaAzimut para poder verificar este valor mientras desarrollamos.

Y hasta aquí la teoría, si tu dispositivo tiene bien calibrada la aguja habremos implementado una Brujula para nuestro dispositivo Android con AppInventor.

AI2 Companion

En este momento ya podremos probar nuestra aplicación usando IA2 Companion. Encontraras esta función en la barra de superior en la sección Conectar. Esto mostrara un código que deberás escanear o teclear desde el móvil con la aplicación AI2 Companion que previamente habremos instalado. Si aun no la has instalado puedes revisar estas instrucciones.

Si quieres instalar la aplicación de manera permanente tendrás que generar el archivo en formato .apk desde la sección construir y copiarlo vía USB o WiFi al dispositivo móvil para proceder a instalarla.

Código Fuente

AppInventor no permite compartir código con la comunidad de desarrolladores como la comunidad Scratch. Si quieres importar el código fuente puedes descargar el siguiente archivo: Brujula.aia

Esperamos que hayas disfrutado con este tutorial. Si tienes alguna duda no dudes en hacer un comentario, estaremos encantados de conversar..

¡Nos vemos en el próximo tutorial!