Battery API

Mozilla have been working on an experimental API for batteries. This includes attributes for charging, chargingTime, dischargingTime and level. It also includes events for chargingchange, chargingtimechange, dischargingtimechange and levelchange. See their article for more details. I've setup this page to change it's background depending on the current charge level... (only on portables) code bellow:


$(function() {
  var battery = navigator.battery || navigator.mozBattery || navigator.webkitBattery,
    $body = $('body'),
    $level = $('.battery-level');

  function updateBackground() {
      percentage = battery.level * 100;
      $body.css('background', 'hsl(' + percentage * 3.6 + ',50%,50%)');
      $level.text(percentage);
  }

  battery.addEventListener('changingcharge', updateBackground);
  battery.addEventListener('levelchange', updateBackground);
  updateBackground();
});

If you're on a portable you battery level should be:

0%

If not, you're out of luck!