{"id":5545,"date":"2016-07-04T00:35:39","date_gmt":"2016-07-04T00:35:39","guid":{"rendered":"http:\/\/betaweblog.education\/?p=5545"},"modified":"2016-07-04T00:35:39","modified_gmt":"2016-07-04T00:35:39","slug":"crear-una-app-para-el-celular-que-mueva-un-objeto-en-la-pantalla","status":"publish","type":"post","link":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2016\/07\/04\/crear-una-app-para-el-celular-que-mueva-un-objeto-en-la-pantalla\/","title":{"rendered":"Crear una app para el celular que mueva un objeto en la pantalla"},"content":{"rendered":"<p>Estoy experimentando programar aplicaciones para el celular que aprovechen los sensores que llevamos todos los d\u00edas en el bolsillo de la dama o en la cartera del caballero (o al rev\u00e9s).<\/p>\n<p>Para ello, utilizo <a href=\"http:\/\/ai2.appinventor.mit.edu\/\">MIT APP Inventor<\/a>, una herramienta para crear aplicaciones para Android. Necesitamos instalar en el celular la aplicaci\u00f3n <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=edu.mit.appinventor.aicompanion3&amp;hl=es\">MIT AI2 Companion<\/a><\/p>\n<p>Nuestros celulares tienen un sensor que permite conocer el grado de inclinaci\u00f3n y de rotaci\u00f3n horizontal, utilizando estos tres ejes:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-5546\" src=\"\/betaweblog\/wp-content\/uploads\/2016\/07\/screenshot-300x209.jpg\" alt=\"Ejes de movimiento del celular\" width=\"300\" height=\"209\" \/><\/p>\n<p>(Fuente de la imagen:\u00a0<a href=\"https:\/\/www.mathworks.com\/matlabcentral\/fileexchange\/40876-android-sensor-support-from-matlab--r2013a--r2013b-\/content\/sensorgroup\/Examples\/html\/CapturingAzimuthRollPitchExample.html\">www.mathworks.com<\/a>)<\/p>\n<p style=\"text-align: left;\">En este primer experimento, mi programa simplemente mueve un circulito a trav\u00e9s de la pantalla, seg\u00fan c\u00f3mo inclinemos el celular en sus ejes X e Y.<\/p>\n<p style=\"text-align: center;\"><iframe loading=\"lazy\" src=\"https:\/\/www.youtube.com\/embed\/itGJlehs7y8?rel=0\" width=\"300\" height=\"169\" frameborder=\"0\" allowfullscreen=\"allowfullscreen\"><\/iframe><\/p>\n<h1 style=\"text-align: left;\">\u00bfC\u00f3mo se empieza?<\/h1>\n<p>El primer paso ser\u00e1 comenzar un proyecto nuevo en <a href=\"http:\/\/ai2.appinventor.mit.edu\/\">Mit App Inventor<\/a>. Una vez creado el proyecto, tendremos una pantalla en blanco, a la cual debemos arrastrar los objetos que vamos a utilizar en el proyecto:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-5547\" src=\"\/betaweblog\/wp-content\/uploads\/2016\/07\/pantalla-app1-300x200.png\" alt=\"Pantalla dise\u00f1o\" width=\"300\" height=\"200\" \/><\/p>\n<p>Vamos a empezar por poner dos etiquetas (Label) y renombrarlas como &#8220;inclinaci\u00f3n X&#8221; e &#8220;inclinaci\u00f3n Y&#8221;.<\/p>\n<p>Para poder programar utilizando un sensor, debemos arrastrar el sensor hacia la pantalla. \u00c9ste no va a verse en la pantalla, por lo tanto se ubicar\u00e1 debajo, como un componente oculto:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-5548\" src=\"\/betaweblog\/wp-content\/uploads\/2016\/07\/pantalla-app2-298x300.png\" alt=\"Sensor\" width=\"298\" height=\"300\" \/><\/p>\n<p>Ahora vamos a empezar a programar, haciendo clic en Blocks:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-5549\" src=\"\/betaweblog\/wp-content\/uploads\/2016\/07\/cambiar-a-pantalla-Blocks-300x97.png\" alt=\"Ir a blocks\" width=\"300\" height=\"97\" \/><\/p>\n<p>Para comenzar vamos a hacer clic en &#8220;Orientation sensor 1&#8221;, y all\u00ed vamos a elegir el bloque que nos permite programar algo &#8220;cuando el sensor de orientaci\u00f3n cambie&#8221;:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-5550\" src=\"\/betaweblog\/wp-content\/uploads\/2016\/07\/programando-app-inclinacion-300x146.png\" alt=\"programar cuando cambie el valor del sensor\" width=\"300\" height=\"146\" \/><\/p>\n<p>Despu\u00e9s, haciendo clic en cada etiqueta (&#8220;orientaci\u00f3n X&#8221; y &#8220;orientaci\u00f3n Y&#8221;), buscamos la asignaci\u00f3n de un texto a la etiqueta:<\/p>\n<ul>\n<li>set inclinaci\u00f3n_X.text to<\/li>\n<li>set inclinaci\u00f3n_Y.text to<\/li>\n<\/ul>\n<p>Ahora tenemos que decirle que escriba esas etiquetas con el valor de las variables Roll y Pitch (ver gr\u00e1fico de los ejes de inclinaci\u00f3n). Roll nos devolver\u00e1 la inclinaci\u00f3n en el eje X; Pitch nos devolver\u00e1 la inclinaci\u00f3n del eje Y.<\/p>\n<p>Haciendo clic en el sensor de orientaci\u00f3n buscamos los bloques que devuelven esos valores:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-5556 size-medium\" src=\"\/betaweblog\/wp-content\/uploads\/2016\/07\/asignar-valor-a-las-etiquetas-1-300x92.png\" width=\"300\" height=\"92\" \/><\/p>\n<h1>Probar el programa<\/h1>\n<p>Para probar el app que escribir\u00e1 en las etiquetas el valor de inclinaci\u00f3n X e Y, tenemos que usar en el men\u00fa Connect, la opci\u00f3n AICompanion. Nos mostrar\u00e1 un c\u00f3digo num\u00e9rico y un QR Code.<\/p>\n<p>Ejecutamos el programa <a href=\"https:\/\/play.google.com\/store\/apps\/details?id=edu.mit.appinventor.aicompanion3&amp;hl=es\">MIT AI 2 Companion<\/a> en el celular, y escribimos el c\u00f3digo o leemos el c\u00f3digo QR.<\/p>\n<p>Una vez que el programa ley\u00f3 el c\u00f3digo, se ejecutar\u00e1 el programa, que simplemente escribir\u00e1 dos n\u00fameros en la pantalla, que cambiar\u00e1n cuando uno mueve el celular.<\/p>\n<h1>Agregar la parte gr\u00e1fica<\/h1>\n<p>Para completar el programa vamos a arrastrar, en el modo &#8220;Designer&#8221;, una base para poner una imagen (&#8220;canvas&#8221;) y luego un c\u00edrculo:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-5552\" src=\"\/betaweblog\/wp-content\/uploads\/2016\/07\/poner-elementos-graficos-300x169.png\" alt=\"Elementos gr\u00e1ficos\" width=\"300\" height=\"169\" \/>En las propiedades del Canvas, ponemos en altura (height) y anchura (width), que se complete el tama\u00f1o del objeto que lo contiene, para que ocupen todo el ancho y el alto posible en la pantalla.<\/p>\n<p>Volvemos al modo de programaci\u00f3n (Blocks), para crear el comportamiento del c\u00edrculo.<\/p>\n<p>\u00bfQu\u00e9 debe hacer el c\u00edrculo?<\/p>\n<p>Cuando cambie el valor del sensor de orientaci\u00f3n, debe cambiar la posici\u00f3n del c\u00edrculo. \u00bfPero c\u00f3mo tiene que cambiar?<\/p>\n<p>A la posici\u00f3n anterior del c\u00edrculo le vamos a restar el valor del sensor de inclinaci\u00f3n. Para eso, en el conjunto de bloques llamados Math, vamos a ubicar el siguiente elemento:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-5553\" src=\"\/betaweblog\/wp-content\/uploads\/2016\/07\/restar-valores-300x221.png\" alt=\"restar dos valores\" width=\"300\" height=\"221\" \/>Ahora vamos a buscar, dentro de Ball1, los bloques que determinan su posici\u00f3n 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:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-5559\" src=\"\/betaweblog\/wp-content\/uploads\/2016\/07\/set-ball-1-X-e-Y-1-300x115.png\" alt=\"Asignar valor X e Y\" width=\"300\" height=\"115\" \/>\u00a0Ahora le vamos a asignar el valor al eje X y al eje Y de nuestro c\u00edrculo: su valor X actual, su valor Y actual, menos lo que var\u00eda la inclinaci\u00f3n del celular.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-medium wp-image-5560\" src=\"\/betaweblog\/wp-content\/uploads\/2016\/07\/programa-completo-3-300x103.png\" alt=\"Programa completo\" width=\"300\" height=\"103\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Estoy experimentando programar aplicaciones para el celular que aprovechen los sensores que llevamos todos los d\u00edas en el bolsillo de la dama o en la cartera del caballero (o al rev\u00e9s). Para ello, utilizo MIT APP Inventor, una herramienta para crear aplicaciones para Android. Necesitamos instalar en el celular la aplicaci\u00f3n MIT AI2 Companion Nuestros &hellip; <a href=\"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/2016\/07\/04\/crear-una-app-para-el-celular-que-mueva-un-objeto-en-la-pantalla\/\" class=\"more-link\">Continuar leyendo<span class=\"screen-reader-text\"> &#8220;Crear una app para el celular que mueva un objeto en la pantalla&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2],"tags":[],"class_list":["post-5545","post","type-post","status-publish","format-standard","hentry","category-android"],"_links":{"self":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/5545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/comments?post=5545"}],"version-history":[{"count":0,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/posts\/5545\/revisions"}],"wp:attachment":[{"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/media?parent=5545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/categories?post=5545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/irisfernandez.com.ar\/betaweblog\/index.php\/wp-json\/wp\/v2\/tags?post=5545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}