En esta nueva entrada del Curso de introducción a MIT App Inventor vamos a aprender cómo utilizar el sensor de orientación y el acelerómetro del terminal.
Acelerómetro y sensor de orientación
El acelerómetro funciona midiendo la fuerza gravitatoria en los ejes (X, Y, Z) con el circuito interno de un chip. Si queréis conocer más sobre el funcionamiento del acelerómetro, podéis ver este vídeo (inglés).
El sensor de orientación da información al dispositivo (un terminal móvil en este caso) del valor del acimut en grados sexagesimales y, las rotaciones pitch y roll. Si quieres conocer más sobre qué función tiene cada sensor dentro del dispositivo móvil puedes visitar este enlace.
Diseño de la UI
Para diseñar la interfaz de usuario se utilizarán diferentes layaouts, un canvas, una imagen, y cuatro etiquetas o labels. También se utilizarán el acelerómetro y el sensor de orientación que se encuentran dentro del menú sensors.
En las propiedades de la pantalla, modificamos la propiedad alignHorizontal a center y título a Accelerometer & Orientation. A continuación, se añade un layout en el que modificaremos su alto para que ocupe 30 px y modificamos su nombre a separador_30.
Para utilizar las imágenes que serán nuestra brújula, en primer lugar hay que subirlas. Para ello, pulsamos sobre el botón upload file, seleccionamos los archivos y los subimos. Una vez que ambos estén cargados ya podremos utilizarlos.
A continuación, incluimos un canvas manteniendo las propiedades ancho y alto en automático y, modificaremos la propiedad backgroundImage a la imagen NSWE.png.
En el siguiente paso, incluimos un ImageSprite dentro del canvas y modificamos la propiedad Picture por la imagen compass.png. A continuación, centramos la imagen, desplazándola con el ratón hasta encontrar la posición deseada y modificamos el nombre del ImageSprite por compass.
Debajo del canvas, introducimos una etiqueta, que mostrará el acimut en grados, y modificamos su nombre a labelAzimuth. Debajo de la etiqueta, incluimos un layout con una altura de 50 píxeles, que utilizaremos como separador.
Para representar visualmente los datos del acelerómetro, utilizaremos tres etiquetas que colocaremos dentro de un layaout vertical. Cambiaremos su nombre, comenzando por arriba, a Acel_X, Acel_Y y Acel_Z.
El texto de los botones se va a modificar directamente desde la programación de la aplicación. Para finalizar, incluimos los elementos AccelerometerSensor y OrientationSensor
Programación
En la parte de programación de nuestra App utilizaremos los bloques del sensor de orientación y del acelerómetro.
En primer lugar programaremos el sensor de orientación. Para ello, utilizaremos el bloque OrientationChanged:
La propiedad .heading de una imagen indica la posición a la que “apuntará” la parte superior de una imagen, por lo que se utilizará para modificar la posición de la imagen compass para que vaya en conjunto con el valor del acimut que marque el dispositivo. Para ello, unimos el bloque set compass.Heading to a get azimuth y ambos al bloque anterior.
A continuación, modificamos el texto mostrado en labelAzimuth utilizando el bloque set labelAzimuth.text to. Uniremos a este bloque un bloque join, que concatena cadenas de caracteres, un cuadro de texto (en el que pondrá “Azimuth = “) y get Azimuth.
Para programar el bloque del acelerómetro, utilizaremos el bloque when AccelerometerSensor1.AccelerationChanged.
Utilizaremos los bloques, por ejemplo, set Acel_X.Text to y a éste se unirá el bloque join, donde concatenaremos, en este caso “X =” y el valor de la aceleración X que obtendremos mediante get xAccel.
Se duplicará el conjunto de los bloques para que Acel_Y y Acel_Z la aceleración en el eje Y y en el eje Z.
