Creating a Battery Gauge

Written by Thomas Kelly

With the new release of the ShinobiGauges in ShinobiLabs, hopefully you’ve already had a play over the weekend with the new framework and Gauge Designer. If not, I highly recommend giving it a whirl!

To show you just how easy it is to make a great looking gauge, we’re going to create a battery life indicator. You can find the source on our github page if you want to follow along, or download the source.

Start by creating a new Single-View project, using ARC. Drag the ShinobiGauges.framework into your project, and add the QuartzCore.framework too.

First things first, we will create a radial gauge, and put it on screen. Import the <ShinobiGauges/ShinobiGauges.h> header in ViewController.m, and create the gauge. We’re also going to set a different style from the default, but we’ll edit it heavily later;

To make it stand out just that little bit more, we’ll add a bevel around the side. To make the “shine” on the bevel look like a light is coming from above, the bevelPrimaryColor must be darker than the bevelSecondaryColor.

Now to start getting some values for the gauge, we subscribe to the “UIDeviceBatteryLevelDidChangeNotification”. When we get this notification, we set the gauge value to the current battery percentage.