Battery Status Indicator

by kirupa   |   11 December 2012

Given that many things that access the web have a battery these days, the applications you create may need to take them into account. For example, you may want to prompt the user if the battery level is really low. You may want to adjust how CPU intensive an animation is depending on whether the user is currently plugged in or not. There are a lot of things you can do, and in this snippet, I created a basic battery level indicator using the new Battery Status API.

Browser Support Warning

Currently, the Battery Status API only works in the latest version of Firefox. If you preview in any other browser, you will not see anything interesting. The code is future-proof in that, when other browsers do support this API, things will just work.

The Example

Below is an example of this snippet running (you can also view it in its own page):

Like I called out earlier, this only works in the latest versions of Firefox right now. If you are viewing this example in a different browser, you will just see the outline of the battery. You will not see an accurate battery status indicator that is green when plugged-in:

battery plugged in baby!

When you are unplugged, the indicator turns yellow:

battery not plugged in!

Both the current status as well as whether you are plugged in and charging or not are updated in real-time. Pretty neat, ehh?

Below is the JavaScript, HTML, and CSS needed to make all of this work.

JavaScript

The code for working with the Battery Status API looks as follows:

var battery = navigator.battery || navigator.msBattery || navigator.mozBattery || navigator.webkitBattery || navigator.oBattery;
var batteryIndicator = document.querySelector("#indicator");

if (battery) {
	battery.addEventListener("chargingchange", updateBatteryNotification);
	battery.addEventListener("levelchange", updateBatteryNotification);
	updateBatteryNotification();
} else {
	// no battery support
}

function updateBatteryNotification() {
	// draw battery level
	batteryIndicator.style.width = battery.level * 100 + "%";
	
	// check if battery is charging
	if (battery.charging) {
		setClass(batteryIndicator, "charging");
	} else {
		setClass(batteryIndicator, "notCharging");
	}
}

function setClass(element, classToAdd) {
	element.className = classToAdd;
}

The code should be pretty self-explanatory. Notice how I deal with the vendor prefixes in JavaScript to ensure that, when other browsers support this, your code will just work.

The HTML

The entire battery is created in HTML:

<div class="container">
	<div id="batteryBody">
		<div id="indicator">
		
		</div>
	</div>
	<div class="batteryEnd">
		<div>
		
		</div>
	</div>
</div>

The element with the id of indicator is the only element you need to be aware of, for it is referenced in our code to set the battery level.

The CSS

While the battery may be created in HTML, it is the CSS that makes it actually look like a battery:

#batteryBody {
	float: left;
	width: 200px;
	height: 75px;
	border: 10px #CCC solid;
}
.container {
	width: 240px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 50px;
}
.batteryEnd {
	float: left;
	height: 95px;
	width: 15px;
}
.batteryEnd div {
	width: 15px;
	height: 35px;
	margin-top: 30px;
	margin-left: 5px;
	background-color: #CCC;
}
#indicator {
	height: 100%;
	width: 50%;
}
#indicator.charging {
	background-color: #BFFF00;
}
#indicator.notCharging {
	background-color: #FFFF00;
}

One thing to note is that the charging and notCharging classes are added in the JavaScript to our indicator element. When they get added, the appropriate selector goes active - giving the battery indicator the green or yellow background color.

Further Exploration

If you want to know more about some of the concepts used in creating this snippet, check out the following links:

Did You Like This?

Getting Help

If you have questions, need some assistance on this topic, or just want to chat - post in the comments below or drop by our friendly forums (where you have a lot more formatting options) and post your question. There are a lot of knowledgeable and witty people who would be happy to help you out. Plus, we have a large collection of smileys you can use

Share

Did you enjoy reading this and found it useful? If so, please share it with your friends:

If you didn't like it, I always like to hear how I can do better next time. Please feel free to contact me directly at kirupa[at]kirupa.com.

Cheers!

Kirupa Chinnathambi

 

Add Your Comment (or post on the Forums)

blog comments powered by Disqus

Creating high-quality content is a team effort that takes a boatload of time. If you found what you see here helpful, please consider sending a small tip:

While tipping is entirely optional, we'll be your bestest friend forever if you do.

More Details & Options