HTML5: Access to the battery via javascript

The HTML5 specification is filling up and APIs slowly begin to appear, allowing you to get information about the device on which the application is running. One of the latter is the Battery Status API . As you may have guessed, the API allows you to get information about the battery using javascript. So now you have the opportunity to disconnect the heavy animation on your page, suggest the user to save the data or to actively save it to the local storage. A working example can be found here . It should be noted that the “Battery time left” property was not available when I opened the page. But it was updated in a couple of minutes.



I tested this API from the latest Mozilla beta versions and it doesn’t work on a Mac yet (but it works on iOS, Android and Windows). I also did not manage to get a positive result of the charging status, but the discharge time and the battery level worked correctly. In this small example, we simply display the information from the API on a simple page like this (screen from my tablet):





')

In this article we will look at:

• Using the Battery API
• Creating fields to display information from the API
• Creating a picture to display battery status
• Using eventListener to update information

Let's take a quick look at the API.

Using the Battery API

Quite simply - the API has only a few properties that you have access to (from the specification):

[NoInterfaceObject] interface BatteryManager : EventTarget { readonly attribute boolean charging; readonly attribute double chargingTime; readonly attribute double dischargingTime; readonly attribute double level; }; 

The charging property shows whether we are connected to charging, chargingTime returns the amount of time remaining until full charging, dischargingTime shows the time to full discharge, well, the level shows how much charging you still have in percentage. Very simple.



In addition to these properties, the API defines several callbacks:

 [TreatNonCallableAsNull] attribute Function? onchargingchange; [TreatNonCallableAsNull] attribute Function? onchargingtimechange; [TreatNonCallableAsNull] attribute Function? ondischargingtimechange; [TreatNonCallableAsNull] attribute Function? onlevelchange; 

You can register functions for these callbacks that will be executed each time one of the properties changes.

Creating fields to display information from the API

Let's start with a couple of simple fields in which we will display information about the battery. Use the following HTML:

 <div id="box"> <div id="battery"></div> <div id="text"> <span style="display: block;margin-bottom:15px;font-size: xx-large;"><strong>Battery specifications</strong></span> <span style="display: block" id="level">Battery level: unknown</span> <span style="display: block" id="status">Charging status: unknown</span> <span style="display: block" id="charged">Battery charged: unknown</span> </div> </div> 

And javascript:

 // get the battery information var battery = navigator.mozBattery; // get the battery information to be displayed $('#level').text("Battery level: " + Math.round(battery.level * 100) + "%"); $('#status').text("Charging status: " + ((battery.charging) ? "true" : "false")); if (battery.charging) { $('#charged').text("Battery time to charge: " + battery.chargingTime); } else { $('#charged').text("Battery time left: " + (Math.round(battery.dischargingTime / 60)) + " minutes"); } 

As can be seen from the code above - there is no place easier. We also display the battery level.

Creating a picture to display battery status

I will not go into details as it is pretty boring. But if you're still interested - see the source code . For this example, I created a simple battery object (based on an example from Nokia) and by calling the updateBattery method I can set the battery charge level. For initialization, use the code below:

 var b = new Battery("assets/bat_empty.png", "assets/bat_full.png", 96, 168); $("#battery").append(b.domElement); b.updateBattery(battery.level * 100); 

Using eventListener to update information

Finally, add a couple of eventListeners that will be executed after each change of battery properties:

 // when the loader is connected battery.addEventListener("chargingchange", function (e) { $('#status').text("Charging status: " + ((battery.charging) ? "true" : "false")); }, false); // when charging time changes update the time to charge / time left battery.addEventListener("chargingtimechange", function (e) { if (battery.charging) { $('#charged').text("Battery time to charge: " + battery.chargingTime); } else { $('#charged').text("Battery time left: " + (Math.round(battery.dischargingTime / 60)) + " minutes"); } }, false); // when dischargingtime changes update the time to charge / time left battery.addEventListener("dischargingtimechange", function (e) { if (battery.charging) { $('#charged').text("Battery time to charge: " + (Math.round(battery.dischargingTime / 60)) + " minutes"); } else { $('#charged').text("Battery time left: " + (Math.round(battery.dischargingTime / 60)) + " minutes"); } }, false); // listener that is notified when the level changes battery.addEventListener("levelchange", function (e) { $('#level').text("Battery level: " + Math.round(battery.level * 100) + "%"); b.updateBattery(100 * battery.level) }, false); 

Just right? The really good news is that the API works on all devices. On my mobile it looks like this:







On Windows (running on a VM) it looks like this: