Underc0de

Programación Web => Front-end => Mensaje iniciado por: ANTRAX en Agosto 10, 2015, 06:22:03 PM

Título: Battery Status API de HTML5 para ver la carga de batería de las visitas.
Publicado por: ANTRAX en Agosto 10, 2015, 06:22:03 PM
(https://lh3.googleusercontent.com/-ab18pV17Jww/VckVf8lnFNI/AAAAAAAAD58/IOcm5r_ZzSE/s912-Ic42/battery-status-api0.jpg)

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 documentación oficial de la W3C (http://www.w3.org/TR/battery-status/)

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:

   
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.


Forma de uso:

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

Código (javascript) [Seleccionar]
<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:

(https://lh3.googleusercontent.com/-mXWLMZHbc2g/VckVZb7WlFI/AAAAAAAAD50/C0Albhg1cuw/s1080-Ic42/11836319_926797697385672_2039555083_o.jpg)

Espero que les sirva!

Saludos!
ANTRAX
Título: Re:Battery Status API de HTML5 para ver la carga de batería de las visitas.
Publicado por: Leo_Al en Enero 21, 2017, 04:23:46 PM
Gracias! Lo voy a intentar poner en mi página
Título: Re:Battery Status API de HTML5 para ver la carga de batería de las visitas.
Publicado por: Hu3c0 en Enero 21, 2017, 07:38:14 PM
Excelente...! me encanta conocer nuevas cosas y más ahora que estoy con javascript un abrazo cordial @ANTRAX (https://underc0de.org/foro/index.php?action=profile;u=1)