James - Logo

Battery API

Mozilla have been working on an experimental API for batteries.

This includes attributes for :

It also includes events for:

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!