martes, 10 de septiembre de 2013

Control de luminosidad con slider en App Inventor

Después de buscar mucha información de como realizar el procedimiento de control de luminosidad con un slider en App Inventor y darme cuenta que nadie quiere compartir su información (se pasan de cochis) me puse a investigar algunas paginas y encontré algunos ejemplos, http://www.neoteo.com/iluminacion-led-controlada-con-android/ en esta pagina usan el comando canvas, introducen imágenes dinámicas y hacen un control, a mi parecer un poco grande, pueden leerlo para tener mas información de la comunicación con arduino, mi ejemplo es únicamente obtener el valor de 0 a 255 con un slider, después pondré una entrada explicando el uso del bluetooth con arduino y App Inventor, que es un poco mas complicado, y al igual existen unos ejemplos horribles en internet, la segunda pagina es de google groups, usan el mismo modo que la anterior, un control camvas con imágenes dinámicas, https://groups.google.com/forum/#!topic/app-inventor-developers-library/p53HC0zja-s, ejemplos bastantes interesantes, pero no satisfacian mi necesidad de usar el slider predefinido en el App Inventor.

Esta es mi aplicación, ustedes podrán mejorar la apariencia en lo que quieran.

Y como en las demás paginas nunca dicen que se pone donde yo se los explico, en la opción basic, agregan un icono canvas, label, button y slider, en las opciones del slider lo configuran en un rago de 0 a 255, (si desean otra escala pueden cambiarla) el orden incluso no importa, el punto es que estén ahí adentro todos, ahora abrimos el editor, presionando open block editor.
y construimos algo así, encontraran estas opciones dentro de My blocks, le dan click a salir, y ahi aparece la opcion salir.click, click en slider1 y escoger la opción slider1.Positionchanged, automáticamente agregara el name thumbposition.
seleccionar de nuevo salida y escoger salida.text, en la opción built-in escoger la opción matemáticas y round, esta opción redondea el numero thumbposition que mas adelante utilizaremos.
Damos click en canvas y escogemos canvas.Backgroundcolor, seguidamente en built-in vamos a la opción color y escogemos make color, al principio nos aparecerá pequeño, a medida que vayamos agregando elemento se extenderá.
En las opciones built-in vamos a list, y elegimos make list, para agregar los números lo hacemos en la opción text dentro de built-in, al principio nos aparecerá como texto, damos click en el triangulo y lo cambiamos a 123, así cambiara de color a verde.
Agregamos 3 en make list y por ultimo damos click en salida y buscamos la opción salida.txt y también la agragamos.
En My blocks, en la opción My definitions, encontraran el value thumbposition.
¿Para que nos sirven agregar estos números en make list? sencillo, la opcion make color necesita un codigo rgb, y necesita 3 números para crear uno, yo use estos valores, de 100 cada opción, ustedes pueden probar las que gusten la cuarta señal, que en este caso sera salida.txt nos sirve para la opacidad del color, por lo tanto podemos hacerlo mas claro o mas oscuro.

Para poner el boton de salir, damos click en salir, buscamos salir.click, lo agragamos y nos vamos a las opciones built-in, dentro de la opcion control buscamos la opción close aplication, la agregamos a salir.click y listo, tenemos nuestra aplicación lista.

Ustedes podrán mandar el dato thumbposition de la manera que gusten, con el protocolo que mas le agrade, espero le sirva la información y si tienen mejoras pues compartanlas que todos queremos aprender mas, si tienen alguna duda espero poder responderla, un saludo a todos.