Brújula - Sensor de orientación (Azimuth) e ImageSprite


Vamos a construir una brújula. Para ello, es necesario comprender el funcionamiento del sensor de orientación, en concreto, la propiedad Azimuth de dicho sensor. Antes de empezar quizá te interese leer la siguiente presentación.


Entorno de usuario
Interfaz
Se trata de un interfaz sencillo que muestra una brújula simple y el valor de la propiedad azimuth correspondiente a la orientación en la que se encuentre el móvil.
Para construirlo utilicé un Canvas, un ImageSprite y dos Label. Las etiquetas para mostrar el valor de azimuth y, el Canvas y el ImageSprite para la brújula.
Utilizo la propiedad texto de la etiqueta de la izquierda para el rótulo y la de la derecha para el valor. Empleo la propiedad Canvas.BackgrundImage para establecer el fondo del Canvas (imagen de los puntos cardinales) y la propiedad ImageSprite.Picture para definir la imagen del componente de animación ImageSprite (imagen de la rosa de los vientos)

 ImageSprite.Picture Canvas.BackgrundImage
 Estrella para brújula Fondo del canvas

A medida que el usuario mueve el móvil, la rosa irá cambiado su orientación y el valor de azimuth aumentará o disminuirá. Únicamente si la parte anterior del móvil está orientada al norte (azimuth 0), la aguja roja señalará la N

Brújula con azimuth cercano a 0º Brújula con azimuth cercano a 90º Brújula con azimuth cercano a 180º Brújula con azimuth cercano a 270º

Funcionamiento

El funcionamiento de la brújula se basa en el evento OrientationSensor.OrientationChanged y en la propiedad ImageSprite.Heading. Cada vez que cambia la orientación del móvil (ocurre continuamente si lo tenemos en nuestras manos :-))le asignamos el valor azimuth a la propiedad Heading del ImageSprite y a la propiedad Text de la etiqueta.
La propiedad Heading establece la dirección en la que se moverá el Sprite. Su valor se expresa en grados y va de 0º a 360º.

Bloques de la brújula

Comments