Mostrar estado de la batería en AppInventor 2

 

En este tutorial vamos a mostrar estado de la batería en AppInventor 2. Existe una forma de incorporar JavaScript en tus aplicaciones. La técnica implica el uso del componente WebViewer como procesador JavaScript. En este articulo mostraremos el estado de la batería del dispositivo mediante JavaScript y el componente WebViewer. Utilizaremos un archivo HTML donde insertaremos código JavaScript. Este código no solo nos mostrara el porcentaje actual de la batería. Si no, que nos dirá en tiempo real si se esta cargando o no. Nos vamos a ayudar de dos funciones de App Inventor para comunicar la aplicación con el código JavaScript que se ejecuta dentro del componente WebViewer.  A continuación, te muestro como mostrar estado de la batería en AppInventor 2.

DISEÑO DE LA APLICACIÓN

Para el diseño de la aplicación que hará mostrar estado de la batería en AppInventor 2, se ha utilizado una disposición vertical. En esta disposición se ha introducido un lienzo con un grafico. Mas abajo se ha colocado tres disposiciones horizontales. La primera contiene dos etiquetas. TXTBatería, que contendrá el texto, «La batería», y la etiqueta TXTEstadoBatería que mostrara si nuestra batería esta cargando o no. La segunda disposición horizontal contendrá dos etiquetas al igual que la primera. La etiqueta TXTnivel, que contendrá el texto «El nivel de batería es de:». Una segunda etiqueta TXTMuestraNivel que mostrara el nivel actual de la batería. Para la última disposición Horizontal tendremos la etiqueta TXTTiempoBatería que contendrá el texto «Tiempo de batería». Y por último la segunda etiqueta TXTMuestraTBatería que mostrara el tiempo restante de batería.

También utilizaremos varios componentes no visibles como un componente WebView, y tres componentes no visibles Reloj. Configuraremos el reloj 1 y 2 desmarcando la casilla «TemporizadorHabilitado» y configurando el «IntervaloDelTemporizador» en 1500. Para el reloj 3 desmarcaremos TemporizadorSiempreSeDispara y pondremos el tiempo en 1500.

Nuestra aplicación mostrara unos gráficos de batería que estarán almacenados en medios. Además incluiremos el archivo «BateriaAppInventor.html», que contendrá el código JavaScript que comunicara con nuestra aplicación. Todos estos archivos los podréis descargar del siguiente enlace.

Enlace de descarga de archivos de medios

Programando la aplicación

Lo primero que haremos para mostrar el estado de la batería en AppInventor 2, es crear 5 variables globales. Estas variables las usaremos tanto para registrar los datos de lafunción contenida en JavaScript, como para guardar los valores.

La primera la llamaremos «ListaDeEstadosDevueltos» y la inicializaremos construyendo una lista vacía. Esta variable guardara los datos recibidos de JavaScript en forma de lista.

La segunda variable la llamaremos «BateriaCargando» y contendrá el valor de la primera posición de la lista creada anteriormente, y que corresponde a un valor booleano true o false. Si es true, la batería estará cargando, si es false, la batería no estará cargando.

El nombre que recibirá la tercera variable es «NivelDeBatería». Esta variable la inicializamos con un campo vacío de texto y contendrá la segunda posición de nuestra lista, que corresponde a un valor numérico de 0.1 a 1 este valor mas adelante lo multiplicaremos por 100 para sacar el nivel de batería actual.

La cuarta variable recibirá el nombre de «TiempoRestante» y contendrá la tercera posición de nuestra lista. Esta variable mostrara el tiempo restante de batería en uso. Tengo que decir que esta función no es compatible con todos los dispositivos a si que puede ser que no te funcione. Si esto último te sucede, te devolverá el valor de «infinity».

Nuestra última variable la llamaremos «GraficoBatería» estará inicializada con un campo de texto vacío y la utilizaremos para mostrar un grafico de batería con el porcentaje actual.

Llamando a nuestra función de JavaScript para Mostrar estado de la batería en AppInventor 2

Lo primero que vamos hacer es ejecutar una función de JavaScript contenido en nuestro HTML llamada «EstadoBateria()». Para ello nos vamos a ayudar de el reloj3, cuando pase un segundo y medio desde que iniciamos la aplicación le decimos que ejecute dicha función. Le estamos dando este tiempo para que cargue el archivo HTML sin problemas y no intente llamar a una función de nuestro documento HTML cuando este todavía no exista o no este cargado. Fíjate que esto solo va a suceder una vez ya que nuestro temporizador esta configurado para no repetirse.

Que sucede cuando ejecutamos la función «EstadoBateria()».

Si abrimos el documento Html en un procesador de texto, veremos que esta función llama a su vez a otra, llamada «updateBatteryStatus(battery)». Esta función hace uso del objeto window.AppInventor.setWebViewString, que devolverá un texto a la app creada, con el valor devuelto en su interior. En este caso devolverá un texto con el resultado de cada una de las llamadas a las funciones de control de batería, separadas por comas.

Ahora que ya sabemos que esta función no devuelve un texto separado por comas, que contiene el estado de la batería en el momento de la llamada a la función, vamos a completar un poco mas el código. Lo primero nos aseguraremos que el valor devuelto no esta vacío. Si este valor no esta vacío activaremos tanto el temporizador 1 como el 2.

Temporizador 1mostrar estado de la batería en AppInventor 2

Vamos a utilizar un temporizador para que cada 1,5 segundos se active. Este temporizador de nuevo hará una llamada a la función JavaScript EstadoBatería() de nuestro documento HTML, y lo hará cada 1,5 segundos provocando un bucle infinito. De esta manera a cada segundo y medio sabremos el estado de la batería. Pero nos falta mostrar esa información en nuestras etiquetas. Lo primero que haremos será crear una lista de la información recibida en la cadena de WebView, con el componente » Lista desde registro CSV». Esta lista la asignaremos a nuestra variable global «ListaDeEstadosDevueltos». Una vez que tengamos construida la lista, bastara con asignar cada elemento de la misma, con la variable correspondiente.

Entonces decimos que para la variable «BateríaCargando», le asignaremos el índice 1 que corresponde al dato que nos dirá si la batería esta cargando. Para la variable «NivelDeBatería» le asignaremos el índice 2, que corresponde con el valor de carga de la batería multiplicado por 100, ya que los valores recibidos, si recuerdas, están entre 0.1 y 1. Y por último asignaremos a nuestra variable global «TiempoRestante» el índice 3, que corresponde al valor de el tiempo que queda de uso de la batería.

Ahora si el contenido de la variable «BateríaCargando» es false pondremos en la etiqueta TXTEstadoBatería el texto No esta cargando. Si de lo contrario el contenido es True, devolveremos a la etiqueta el texto, Se esta cargando.

Ahora falta mostrar el porcentaje de batería en nuestra etiqueta «TXTMuestraNivel». Para ello, si el valor devuelto es mayor de 0, y menor de 10, le asignaremos el texto de 10%. Si el valor es mayor de 10 y menor de 20, le asignaremos a la etiqueta el valor de 20% y a si sucesivamente. De esta manera mostraremos el nivel de batería. Si por el contrario, no es ninguna de las anteriores será 0. Si quisiéramos mostrar el valores como 12% o 14% simplemente asignar e la etiqueta «TXTMuestraNivel» el valor de la variable «NivelDeBatería». Para este ejemplo yo me he decantado por utilizar el primer método, ya que me parecía demasiado sencillo simplemente asignar el valor de la variable.

Por último asignaremos a nuestra etiqueta «TXTMuestraTbatería» el valor de la variable global «TiempoRestante». Esta variable mostrara el tiempo restante de uso de nuestra batería. No todos los dispositivos serán compatibles con esta función. Si el tuyo no lo es recibirás el valor de Infinity.

Temporizador 2 para mostrar estado de la batería en App Inventor 2

Con este temporizador vamos a mostrar un gráfico de la batería en pantalla. Vamos a crear un procedimiento que se encarga de cambiar el grafico de la batería si esta cargando. Cuando deje de cargar. mostrara el grafico de porcentaje actual de la batería. Vamos a hacer lo mismo que hicimos con la etiqueta de texto que mostraba el porcentaje de la batería. Pero esta vez mostraremos un grafico. Si el Nivel de batería es mayor de 0 y menor de 20 pondremos la variable que contendrá el grafico a mostrar, con el grafico de la batería correspondiente, en este caso a 10.

El procedimiento que vamos a crear es muy sencillo, simplemente se encargara de cambiar el grafico de la batería si esta cagando. Si esta cargando y el grafico es de la batería cargando, lo cambiamos al grafico correspondiente con su nivel de batería. Por el contrario, si esta cargando y el grafico es el porcentaje de batería, pondremos el grafico cargando.

Solo falta llamarlo en el temporizador, y asignarle en su entrada «Imagen1» la variable global grafico batería. Y en su su entrada «Imagen2» el grafico «BateriaCargando.png»

Con esto vemos el uso de devoluciones con el bloque «CadenaDeWebView», y como ejecutar una función de JavaScript desde AppInventor. Esto abre grandes posibilidades, ya que podremos crear WebApps con app inventor 2.

Si te a gustado este articulo no dudes en dejarlo en los comentario al igual que tus dudas. Y si quieres apoyar esta pagina no dudes en suscribirte.