App Inventor

tecnoloxia.org

Compás

Descrición

Imos explorar as posibilidades do Sensor de Orientación do noso dispositivo Android con AppInventor. E para non perder o Norte imos converter o noso móbil nun compás:

disenocompas

Preparamos o material

Ficheiros que nos van facer falta:

Deseñador de App Inventor

Os compoñentes que imos utilizar son:

  • Screen1: cambiaremos a propiedade Título para mostrar o texto Compás, e engadiremos en Icono a imaxe da rosa dos ventos.
  • Lienzo1: pódelo atopar na sección Dibujo y animación. Nas súas propiedades:
    • Axusta o Alto ao 75%
    • O seu Ancho marca Ajustar al contenedor para que se expanda o ancho da pantalla.
    • Como Imagen de fondo seleccionaremos a imaxe cos puntos cardinais, Compas_fondo.png.
  • SpriteImagen: tamén na sección de Dibujo y animación.  Colocarémola centrada dentro do Lienzo1, e a renomearemos a AgullaCompas, nas propiedades:
    • Axusta o Alto a 100 píxeles
    • O seu Ancho marca Ajustar al contenedor
    • Foto subimos a imaxe da rosa dos ventos cunha agulla vermella, CompasRosaDosVentos.png.
  • Unha etiqueta que colocamos  debaixo do Lienzo1. Na propiedade de Texto escribimos “Acimut:
  • Outra etiqueta que renomearemos EtiquetaAcimut, a propiedade de Texto a deixaremos en branco, xa que despois móstrase nela o valor do acimut do Sensor de Orientación.
  • SensorDeOrientation1: engadirémolo á pantalla (sección Sensores). Este compoñente non é visible co cal aparecerá na área do deseñador para compoñentes non visibles.

Inicializando os tamaños da Agulla

Non sabemos as dimensións do dispositivo no que se vai executar a nosa aplicación. Podería ser un teléfono móbil de 5 polgadas ou unha tableta moito maior. Polo tanto imos inicializar as dimensións e a posición da agulla dinamicamente. Para iso utilizaremos o evento en que se inicializa a pantalla:
bloquestamanoimagespritecuandoScreen1.Initializar: este bloque invócase cando se mostra a pantalla por primeira vez.

ponerAgullaCompas.Ancho:  esto é para que o ancho da agulla ocupe todo o ancho do Lienzo1.

ponerAgullaCompas.Alto: para que o alto da agulla sexa o ancho do lenzo, xa que se utilizásemos todo o alto do lenzo sairía dos límites da pantalla ao rotar.

ponerAgullaCompas.X e ponerAgullaCompas.Y: indicamos  as coordenadas X e Y para situar a agulla no centro do Lienzo1. Para iso calculamos a metade do tamaño do Lienzo1 e restámoslle a metade do tamaño da imaxe, desta forma o centro da imaxe da agulla coincidirá co centro do lenzo.

ponerAgullaCompas.Rota como, cierto e ponerAgullaCompas.Dirección como, 90: (o  evento “cierto” o podes atopar na categoría Lógica) configuramos a imaxe para rotar cando cambie o valor Dirección, xa que será este valor o que utilizaremos para cambiar a orientación da agulla para apuntar ao Norte.

A programación do compás

programacioncompas

Utilizaremos o bloque cuandoSensorDeOrientación1.CambioEnOrientación, para que se execute cada vez que se produza un cambio de orientación no dispositivo. Cambia a propiedade Dirección da agulla.

Este evento ten tres parámetros, con todo nós centrarémonos só nun:

Acimut: Para orientar a Agulla do noso Compás imos usar este valor. Este valor esta relacionado coa función compás do sensor. Terá o valor 0 cando esta apuntando ao Norte, 90 cando apunta ao Leste, 180 apuntando ao Sur e 270 cando apunta ao Oeste.

Tamén aproveitamos para informar ao texto da etiqueta EtiquetaAcimut para poder verificar este valor.

Programación completa da app Compás

programacioncompascompleta

Reto:

Poderías engadir dúas etiquetas máis que mostren a información da inclinación do teu móbil en 3D, a modo de nivel?

Bótalle unha ollada a seguinte presentación:

https://sites.google.com/site/appinventormegusta/presentaciones-google-docs/sensor-de-orientacion

Nota aclaratoria:

As traducións dos parámetros de grao de inclinación anterior e posterior (En English, Pitch, en español, Tono) e grao de inclinación en relación aos laterais (En English, Roll, en español, Lanzar) non son as máis adecuadas.