Battery Status API de HTML5 para ver la carga de batería de las visitas.

Iniciado por ANTRAX, Agosto 10, 2015, 06:22:03 PM

Tema anterior - Siguiente tema

0 Miembros y 1 Visitante están viendo este tema.


Estudiando un poco HTML5, me tope con un grupo de APIs, y hubo una que me llamó mucho la atención, y es la Battery Status, la cual permite saber el estado de la batería de los usuarios que visitan nuestro sitio.
La API ofrece información sobre la carga de la batería y también dice en segundos cuanto tardará en descargarse al todo.

Según la No tienes permitido ver los links. Registrarse o Entrar a mi cuenta

CitarLa API ofrece información sobre el estado de carga de la batería del dispositivo.

Un dato curioso de esta API, es que accede a los datos del telefono sin el permiso del usuario, por lo que se podría decir que es un poco invasiva.

Las consultas al estado de la batería, se hace por medio de atributos, que son los siguientes:


  • 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.
   
Por otro lado, tenemos los eventos. Estos valores son necesarios, ya que si no los utilizamos, no podremos ver como refrescan los valores y siempre estaremos viendo los mismos.


  • 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.

Forma de uso:

A continuación les voy a mostrar un ejemplo de como se usa, aplicando todos los estados:

Código: javascript
		<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>


Este código es de anerbarrena, en donde se explica claramente linea por linea que hace cada parámetro.

Acá un ejemplo de como se vería montado:


Espero que les sirva!

Saludos!
ANTRAX



Excelente...! me encanta conocer nuevas cosas y más ahora que estoy con javascript un abrazo cordial @No tienes permitido ver los links. Registrarse o Entrar a mi cuenta
No tienes permitido ver los links. Registrarse o Entrar a mi cuenta