Mobile JavaScript Battery API
This only works in Firefox.
by Travis
HTML
<h1>Mobile JavaScript Battery API</h1>
<p>Special thanks to Patrick Stadler for his <a href="" title="Battery.JS" target="_blank">battery.js</a> library.</p>
<p><b>Note: As of 6/3/13 this only works in Firefox.</b></p>
<div id="update"></div>
<div id="level"></div>
<div id="charging"></div>
<div id="tilCharged"></div>
<div id="tilEmpty"></div>
CSS
body {font:400 14px Sans-Serif;}
JavaScript
// BATTERY.JS WRAPPER/LIB
var Battery=function(t){var n="chargingchange chargingtimechange dischargingtimechange levelchange",r=navigator.battery||navigator.webkitBattery||navigator.mozBattery;t.isSupported=function(){return!!r},t.getStatus=function(){return r},t.onUpdate=function(e){};if(t.isSupported()){var i=function(){t.onUpdate(t.getStatus())};for(e in n.split(" "))r.addEventListener(e,i)}return t}(Battery||{});
$(function() {
if(Battery.isSupported()) {
// Store Battery Status
var status = Battery.getStatus();
// Log Battery Levels
$('#level').text("Level: " + Math.floor(status.level * 100) + '%');
$('#charging').text(function() {
if(status.charging === true) {
return "Device is charging.";
} else {
return "Device is NOT charging.";
}
});
$('#tilCharged').text(status.chargingTime + ' til charged.');
$('#tilEmpty').text(status.dischargingTime + ' til empty.');
//console.log('Level: ' + Math.floor(status.level * 100) + '%'); // 30%
//console.log('Charging: ' + status.charging); // true
//console.log('Time until charged: ' + status.chargingTime); // 3600 (seconds) or Infinity
//console.log('Battery time left: ' + status.dischargingTime); // 3600 (seconds) or Infinity
// Register a handler to get notified when battery status changes
Battery.onUpdate = function(status) {
$('#update').text(status); // {level, charging, chargingTime, dischargingTime}
};
}
});