Battery Status: Checking the Battery Status

This tutorial demonstrates how you can retrieve and detect the battery status information of the device.

Warm-up

Become familiar with the Battery Status API by learning about:

• Retrieving Battery Status Information

  Get and display the battery status information.

• Detecting Battery Status Changes

  Set event listeners to detect various battery status changes.

Retrieving Battery Status Information

To enhance the user interaction with the device, you must learn to retrieve and display the battery status:

1. Define the elements used to display the battery status information on the screen:

   <div>charging: <span id="charging"></span></div>
   <div>chargingTime: <span id="chargingTime"></span></div>
   <div>dischargingTime: <span id="dischargingTime"></span></div>
   <div>level: <span id="level"></span></div>
   

2. Check whether the Battery Status API is supported. If it is supported, the object navigator area contains the battery property:

   <script>
      /* As Tizen is webkit-based, it uses the webkit prefix */ 
      var battery = navigator.battery || navigator.webkitBattery || navigator.mozBattery;
   </script> 
   

3. Use the attributes of the BatteryManager interface to display the battery charging status, remaining charging time, remaining battery life, and battery level:

   <script> 
      window.addEventListener('load', function(e) 
      {
         /* Charging status: true or false */
         document.querySelector('#charging').textContent = battery.charging ? 'charging' : 'not charging';
   
         /* Battery charging time: seconds (for example, 3600) or Infinity */
         document.querySelector('#chargingTime').textContent = battery.chargingTime / 60;
   
         /* Battery life: seconds (for example, 3600) or Infinity */
         document.querySelector('#dischargingTime').textContent = battery.dischargingTime / 60;
   
         /* Battery.level: between 0 and 1 (for example, 0.50) */
         document.querySelector('#level').textContent = Math.floor(battery.level * 100) + '%';   
      }, false);
   </script> 
   

Figure: Displaying battery status (in mobile applications only)

Source Code

For the complete source code related to this use case, see the following file:

• show_battery_state.htm

Detecting Battery Status Changes

To enhance the user interaction with the device, you must learn to set event handlers to detect changes in the battery status:

1. Define the elements used to display the battery status change information on the screen:

   <div id="charging"></div>
   <div>
      <progress id="progress" value="0" max="100" ></progress> 
      <span id="level" ></span>
   </div>
   <div id="message"></div>
   

2. Check whether the Battery Status API is supported. If it is supported, the object navigator area contains the battery property:

   <script>
      /* As Tizen is webkit-based, it uses the webkit prefix */
      var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery;
   </script>
   
   

3. Set event listeners with the BatteryManager interface attributes to detect changes in the battery status:

   <script>
      window.addEventListener('load', getBatteryState);
   
      /* Detects changes in the battery charging status */
      battery.addEventListener('chargingchange', getBatteryState);
      /* Detects changes in the battery charging time */
      battery.addEventListener('chargingtimechange', getBatteryState);
      /* Detects changes in the battery discharging time */
      battery.addEventListener('dischargingtimechange', getBatteryState);
      /* Detects changes in the battery level */
      battery.addEventListener('levelchange', getBatteryState);
   </script>
   

4. Display the battery state information when a change occurs:

   <script>
      function getBatteryState() 
      {
         var message = "";
   
         var charging = battery.charging;
         var chargingTime = getTimeFormat(battery.chargingTime);
         var dischargingTime = getTimeFormat(battery.dischargingTime);
         var level = Math.floor(battery.level * 100);
   
         if (charging == false && level < 100) 
         { 
            /* Not charging */
            message = dischargingTime.hour + ":" + dischargingTime.minute + " remained.";
            if (battery.dischargingTime == "Infinity") 
            {
               message = "";
            }
         }
         else if (charging && level < 100) 
         {  
            /* Charging */
            message = "Charging is complete after " 
                      + chargingTime.hour + ":" + chargingTime.minute;
            if (battery.chargingTime == "Infinity") 
            {
               message = "";
            }
         }
         else if (level == 100) 
         {
            message = "Charging is completed";
         }
   
         document.querySelector('#charging').textContent = charging ? 'charging..' : 'Please connect the charger.';
         document.querySelector('#level').textContent = level + "%";
         document.querySelector('#progress').value = level;
         document.querySelector('#message').textContent = message;
      }
   
      /* Time is received in seconds, converted to hours and minutes, and returned */
      function getTimeFormat(time) 
      {
         /* Time parameter is second */
         var tempMinute = time / 60;
   
         var hour = parseInt(tempMinute / 60, 10);
         var minute = parseInt(tempMinute % 60, 10);
         minute = minute < 10 ? "0" + minute : minute;
   
         return {"hour": hour, "minute": minute};
      }
   </script>
   

   If the battery is not charging, a message is displayed telling you to charge the battery. You can see how much time remains until the battery runs out. In the battery is charging, you can see the time left until it is fully charged.

   You can use a progress bar to display the battery charging level.

Figure: Battery status (in mobile applications only)

Source Code

For the complete source code related to this use case, see the following file:

• battery_event.htm