Battery Status API de HTML5: Comprobar la carga de la batería

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.

Privacidad y seguridad de la Battery Status API

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.

Atributos de la Battery Status API de HTML5

Las consultas del estado de la carga de batería en HTML5 se hacen mediante atributos, los enumero a continuación:

charging: Determina si la batería se está cargando.
chargingTime: Determina el número de segundos restantes para que la batería se cargue por completo.
dischargingTime: Determina el número de segundos restantes para que la batería se gaste completamente y el dispositivo entre en suspensión.
level: Representa el nivel de batería del 1 al 1.0.

Eventos para controlar los cambios del estado de la bateria en HTML5

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.

onchargingchange: Determina si la batería comienza a cargarse o se deja de cargar.
onchargingtimechange: Determina el cambio del tiempo en segundos restantes para cargar la batería al 100%
ondischargingtimechange: Determina el cambio del tiempo en segundos restantes para que la batería quede descargada y entre en suspensión el dispositivo.
onlevelchange: Determina el cambio del valor de nivel de la batería del 1 al 1.0.

Completa demo de ejemplo de la Battery Status API de HTML5

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>

$(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:

Se carga la batería: Es lógico ya que el tiempo restante de batería es infinito puesto que se está cargando.
No se carga la batería: Daría el tiempo de carga infinito ya que no se está cargando la batería.

Os pongo esta imagen de ejemplo:

Comento la inicialización de las variables con los atributos:

//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;

//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 ()

//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="">

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.