Voy a tratar de hacer ejemplos sencillos de la Battery Status API de HTML5 en esta nueva entrada, como veréis es otro paso más de las APIs de HTML5 para integrarse y comunicarse con el hardware de los dispositivos móviles.
Quizás no sea una API de HTML5 muy potente o demandada, pero creo que debía hacer este post ya que nos puede ser útil para futuros desarrollos que dependan mucho del consumo de batería.
Segun la documentación oficial de la W3C:
La API ofrece información sobre el estado de carga de la batería del dispositivo.
La API devuelve información del estado de carga de la batería. Esta información tiene un impacto mínimo en la privacidad y seguridad del dispositivo consultado, por lo que se accede a la información sin permiso del usuario.
Las consultas del estado de la carga de batería en HTML5 se hacen mediante atributos, los enumero a continuación:
Ahora nos queda conocer los eventos que nos permiten controlar los cambios en el estado de la batería. Si no los usamos podemos estar viendo todo el rato el mismo valor de nivel de batería sin que este sea correcto.
Os voy a poner esta demo de ejemplo de la Battery Status API de HTML5 en la que repasaré los diferentes atributos y eventos mencionandos anteriormente.
El ejemplo está probado con la versión móvil de Firefox, en las de Safari y Chrome no he conseguido reproducirlo. Habrá que esperar a futuras versiones de estos navegadores.
<script> $(document).ready(function() { var bateria = navigator.battery || navigator.mozBattery; var nivelbateria = bateria.level * 100; var tiempocarga = bateria.chargingTime / 60; var tiempodescarga = bateria.dischargingTime / 60; //ESTADO BATERIA //asigno al id #estadobateria si la bateria se esta cargando o no if (bateria.charging) { $('#estadobateria').val('Se está cargando la batería'); }else { $('#estadobateria').val('NO se está cargando la batería'); }; //si se empieza a cargar o descargar lo actualizo bateria.onchargingchange = function () { if (bateria.charging) { $('#estadobateria').val('Se está cargando la batería'); }else { $('#estadobateria').val('NO se está cargando la batería'); }; }; //NIVEL BATERIA //Asigno el nivel de bateria al id #nivelbateria $('#nivelbateria').val(nivelbateria); //Si hay un cambio en el nivel de la bateria actualizo la informacion bateria.onlevelchange = function () { $('#nivelbateria').val(bateria.level * 100); }; //TIEMPO CARGA //asigno al id #tiempocarga el tiempo en minutos de carga $('#tiempocarga').val(tiempocarga); //si hay cambio en el tiempo para la carga completa lo actualizo bateria.onchargingtimechange = function () { $('#tiempocarga').val(bateria.chargingTime / 60); }; //TIEMPO DESCARGA //asigno al id #tiempodescarga el tiempo en minutos para la suspension $('#tiempodescarga').val(tiempodescarga); //si hay cambio en el tiempo para la suspension lo actualizo bateria.ondischargingtimechange = function () { $('#tiempodescarga').val(bateria.dischargingTime / 60 ); }; }); </script>
A ver por donde empiezo… básicamente primero he asigando a los input el valor de cada dato en el momento de la consulta. Después he programado 4 funciones para detectar los cambios de valor del: estado de la batería, tiempo de carga restante, tiempo de descarga restante y si se está cargando la batería.
Habrá veces que el valor devuelto en tiempo decarga/descarga os devuelva ‘Infinity‘, esto sucede cuando:
Os pongo esta imagen de ejemplo:
//asigno el valor del estado de la batería var bateria = navigator.battery || navigator.mozBattery; //del valor de la batería cojo su nivel y lo multiplico por 100 paara sacar el % var nivelbateria = bateria.level * 100; //del valor de la batería cojo el tiempo de carga restante y divido en 60 para sacar los min var tiempocarga = bateria.chargingTime / 60; //del valor de la batería cojo el tiempo de descarga restante y divido en 60 para sacar los min var tiempodescarga = bateria.dischargingTime / 60;
Y ahora comento los eventos:
//control para saber si se empieza a cargar o descargar bateria.onchargingchange = function () //control para ver los cambios de nivel de batería bateria.onlevelchange = function () //control para ver el cambio del tiempo restante de carga bateria.onchargingtimechange = function () //control para ver el cambio del tiempo restante de batería bateria.ondischargingtimechange = function ()
Termino poniendo el código de los input:
Estado de la batería: <input name="estadobateria" size="30" id="estadobateria" value=""> <br> Nivel de la batería en %: <input name="nivelbateria" size="5" id="nivelbateria" value=""> <br> Tiempo de carga en minutos: <input name="tiempocarga" size="15" id="tiempocarga" value=""> <br> Tiempo de descarga en minutos: <input name="tiempodescarga" size="15" id="tiempodescarga" value="">
Para que esta demo de ejemplo de la Battery Status API de HTML5 sea más completa y eficiente habría que poner algún control más sobre los valores devueltos, tales como, el valor ‘Infinity’ o el redondeo de los minutos. Aun así espero que os valga para conocer los atributos y eventos para controlar el estado de la batería con HTML5.