Este sitio utiliza cookies propias y de terceros. Si continúa navegando consideramos que acepta el uso de cookies. OK Más Información.

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

  • 2 Respuestas
  • 4791 Vistas

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

Conectado ANTRAX

  • *
  • Administrator
  • Mensajes: 5487
  • Actividad:
    26.67%
  • Reputación 35
  • ANTRAX
    • Ver Perfil
    • Underc0de
    • Email
  • Skype: underc0de.org
  • Twitter: @Underc0de
« en: Agosto 10, 2015, 06:22:03 pm »

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

Citar
La 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
  1.                 <script>
  2.                 $(document).ready(function()
  3.                         {
  4.                         var bateria  = navigator.battery || navigator.mozBattery;
  5.                         var nivelbateria = bateria.level * 100;
  6.                         var tiempocarga = bateria.chargingTime / 60;
  7.                         var tiempodescarga = bateria.dischargingTime / 60;
  8.  
  9.                         //ESTADO BATERIA
  10.                         //asigno al id #estadobateria si la bateria se esta cargando o no
  11.                         if (bateria.charging)
  12.                                 {
  13.                                 $('#estadobateria').val('Se está cargando la batería');
  14.                                 }else
  15.                                         {
  16.                                         $('#estadobateria').val('NO se está cargando la batería');
  17.                                         };
  18.  
  19.                         //si se empieza a cargar o descargar lo actualizo
  20.                         bateria.onchargingchange = function ()
  21.                                 {
  22.                                 if (bateria.charging)
  23.                                         {
  24.                                         $('#estadobateria').val('Se está cargando la batería');
  25.                                         }else
  26.                                                 {
  27.                                                 $('#estadobateria').val('NO se está cargando la batería');
  28.                                                 };
  29.                                 };                                     
  30.  
  31.                         //NIVEL BATERIA
  32.                         //Asigno el nivel de bateria al id #nivelbateria               
  33.                         $('#nivelbateria').val(nivelbateria);
  34.  
  35.                         //Si hay un cambio en el nivel de la bateria actualizo la informacion
  36.                         bateria.onlevelchange = function ()
  37.                                 {
  38.                                 $('#nivelbateria').val(bateria.level * 100);
  39.                                 };
  40.  
  41.                         //TIEMPO CARGA
  42.                         //asigno al id #tiempocarga el tiempo en minutos de carga
  43.                         $('#tiempocarga').val(tiempocarga);
  44.  
  45.                         //si hay cambio en el tiempo para la carga completa lo actualizo
  46.                         bateria.onchargingtimechange = function ()
  47.                                 {
  48.                                 $('#tiempocarga').val(bateria.chargingTime / 60);
  49.                             };
  50.  
  51.                         //TIEMPO DESCARGA
  52.                         //asigno al id #tiempodescarga el tiempo en minutos para la suspension
  53.                         $('#tiempodescarga').val(tiempodescarga);
  54.  
  55.                         //si hay cambio en el tiempo para la suspension lo actualizo
  56.                         bateria.ondischargingtimechange = function ()
  57.                                 {
  58.                                 $('#tiempodescarga').val(bateria.dischargingTime / 60 );
  59.                             };
  60.  
  61.                     });
  62.                         </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


Desconectado Leo_Al

  • *
  • Underc0der
  • Mensajes: 14
  • Actividad:
    0%
  • Reputación 0
    • Ver Perfil
    • Email
  • Skype: wayercreew
« Respuesta #1 en: Enero 21, 2017, 04:23:46 pm »
Gracias! Lo voy a intentar poner en mi página

Desconectado Hu3c0

  • *
  • Underc0der
  • Mensajes: 434
  • Actividad:
    0%
  • Reputación 0
  • In the middle Netbeans
    • Ver Perfil
« Respuesta #2 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

 

¿Te gustó el post? COMPARTILO!



[JQuery][HERRAMIENTA] Sandbox para jQuery (jsfiddle)

Iniciado por WHK

Respuestas: 2
Vistas: 2608
Último mensaje Septiembre 26, 2013, 09:59:41 pm
por Destructor.cs
Curso Frontend Desde Cero: [Aprende Habilidades Para Ser Un Web Developer]

Iniciado por Mr.Kratos

Respuestas: 2
Vistas: 4455
Último mensaje Enero 31, 2019, 10:43:24 am
por TheBeyonder
DevCode.la coloca su curso de ‪Bootstrap3‬ gratis para todos

Iniciado por graphixx

Respuestas: 0
Vistas: 3757
Último mensaje Marzo 20, 2016, 09:14:02 pm
por graphixx
[VIDEOTUTORIAL] Zenva – Cómo Programar para Emprendedores – JavaScript

Iniciado por graphixx

Respuestas: 0
Vistas: 2331
Último mensaje Enero 10, 2016, 02:26:42 pm
por graphixx
[VIDEOTUTORIAL] JavaScript para diseñadores (2015)

Iniciado por graphixx

Respuestas: 0
Vistas: 1786
Último mensaje Octubre 10, 2015, 11:39:02 pm
por graphixx