Crear una app para el celular que mueva un objeto en la pantalla

Estoy experimentando programar aplicaciones para el celular que aprovechen los sensores que llevamos todos los días en el bolsillo de la dama o en la cartera del caballero (o al revés).

Para ello, utilizo MIT APP Inventor, una herramienta para crear aplicaciones para Android. Necesitamos instalar en el celular la aplicación MIT AI2 Companion

Nuestros celulares tienen un sensor que permite conocer el grado de inclinación y de rotación horizontal, utilizando estos tres ejes:

Ejes de movimiento del celular

(Fuente de la imagen: www.mathworks.com)

En este primer experimento, mi programa simplemente mueve un circulito a través de la pantalla, según cómo inclinemos el celular en sus ejes X e Y.

¿Cómo se empieza?

El primer paso será comenzar un proyecto nuevo en Mit App Inventor. Una vez creado el proyecto, tendremos una pantalla en blanco, a la cual debemos arrastrar los objetos que vamos a utilizar en el proyecto:

Pantalla diseño

Vamos a empezar por poner dos etiquetas (Label) y renombrarlas como “inclinación X” e “inclinación Y”.

Para poder programar utilizando un sensor, debemos arrastrar el sensor hacia la pantalla. Éste no va a verse en la pantalla, por lo tanto se ubicará debajo, como un componente oculto:

Sensor

Ahora vamos a empezar a programar, haciendo clic en Blocks:

Ir a blocks

Para comenzar vamos a hacer clic en “Orientation sensor 1”, y allí vamos a elegir el bloque que nos permite programar algo “cuando el sensor de orientación cambie”:

programar cuando cambie el valor del sensor

Después, haciendo clic en cada etiqueta (“orientación X” y “orientación Y”), buscamos la asignación de un texto a la etiqueta:

  • set inclinación_X.text to
  • set inclinación_Y.text to

Ahora tenemos que decirle que escriba esas etiquetas con el valor de las variables Roll y Pitch (ver gráfico de los ejes de inclinación). Roll nos devolverá la inclinación en el eje X; Pitch nos devolverá la inclinación del eje Y.

Haciendo clic en el sensor de orientación buscamos los bloques que devuelven esos valores:

Probar el programa

Para probar el app que escribirá en las etiquetas el valor de inclinación X e Y, tenemos que usar en el menú Connect, la opción AICompanion. Nos mostrará un código numérico y un QR Code.

Ejecutamos el programa MIT AI 2 Companion en el celular, y escribimos el código o leemos el código QR.

Una vez que el programa leyó el código, se ejecutará el programa, que simplemente escribirá dos números en la pantalla, que cambiarán cuando uno mueve el celular.

Agregar la parte gráfica

Para completar el programa vamos a arrastrar, en el modo “Designer”, una base para poner una imagen (“canvas”) y luego un círculo:

Elementos gráficosEn las propiedades del Canvas, ponemos en altura (height) y anchura (width), que se complete el tamaño del objeto que lo contiene, para que ocupen todo el ancho y el alto posible en la pantalla.

Volvemos al modo de programación (Blocks), para crear el comportamiento del círculo.

¿Qué debe hacer el círculo?

Cuando cambie el valor del sensor de orientación, debe cambiar la posición del círculo. ¿Pero cómo tiene que cambiar?

A la posición anterior del círculo le vamos a restar el valor del sensor de inclinación. Para eso, en el conjunto de bloques llamados Math, vamos a ubicar el siguiente elemento:

restar dos valoresAhora vamos a buscar, dentro de Ball1, los bloques que determinan su posición X e Y, los pondremos dentro de la estructura anterior (when orientationSensor1.OrientationChanged), y les agregaremos el marco para restar dos valores que sacamos de Math:

Asignar valor X e Y Ahora le vamos a asignar el valor al eje X y al eje Y de nuestro círculo: su valor X actual, su valor Y actual, menos lo que varía la inclinación del celular.

Programa completo

 

 

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *