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

  • 2 Respuestas
  • 5081 Vistas

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

Conectado ANTRAX

  • *
  • Administrator
  • Mensajes: 5672
  • Actividad:
    20%
  • Country: ar
  • Reputación 37
  • ANTRAX
  • Skype: underc0de.org
  • Twitter: @Underc0de
    • Ver Perfil
    • Underc0de
    • Email

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 You are not allowed to view links. Register or Login

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
  • Skype: wayercreew
    • Ver Perfil
    • Email
Gracias! Lo voy a intentar poner en mi página

Desconectado Hu3c0

  • *
  • Underc0der
  • Mensajes: 433
  • Actividad:
    0%
  • Reputación 0
  • In the middle Netbeans
    • Ver Perfil
Excelente...! me encanta conocer nuevas cosas y más ahora que estoy con javascript un abrazo cordial @You are not allowed to view links. Register or Login
You are not allowed to view links. Register or Login

 

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

Iniciado por WHK

Respuestas: 2
Vistas: 2934
Ú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: 5510
Último mensaje Enero 31, 2019, 10:43:24 am
por TheBeyonder
[VIDEOTUTORIAL] Zenva – Cómo Programar para Emprendedores – JavaScript

Iniciado por graphixx

Respuestas: 0
Vistas: 2484
Último mensaje Enero 10, 2016, 02:26:42 pm
por graphixx
Cheat-Sheet: JAVASCRIPT - Hoja Guía para que no se me olvide

Iniciado por Denisse

Respuestas: 0
Vistas: 215
Último mensaje Marzo 20, 2020, 03:00:11 am
por Denisse
Cheat-Sheet: CSS3 - Hoja Guia para que no se me olvide

Iniciado por Denisse

Respuestas: 0
Vistas: 1311
Último mensaje Mayo 17, 2020, 09:39:36 pm
por Denisse