Blog

Back to Blog

Creating a Battery Gauge

Posted on 19 Aug 2013 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.

Bolt

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;

#import "ViewController.h"
#import <ShinobiGauges/ShinobiGauges.h>

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.
    SGaugeRadial *gauge = [[SGaugeRadial alloc] initWithFrame:CGRectMake(0, 0, 300, 300) fromMinimum:@0 toMaximum:@100];
    gauge.style = [SGaugeLightStyle new];
    gauge.center = self.view.center;
    [self.view addSubview:gauge];

    //Set the angle
    gauge.arcAngleStart = -M_PI_4 * 3;
    gauge.arcAngleEnd = M_PI_4 * 3;
}

@end

This will create a standard looking radial gauge, in the center of our page.

Default

Next, we’ll do some styling on the background. Note that I have also included the “UIColor+Hex” category, to simplify setting colors. This category is included in the project github.

First, we’ll style the background a bit to make a cool effect, and make the gauge draw the whole circle.

- (void)viewDidLoad
{
    ...
    
    //Gauge style
    gauge.style.borderIsFullCircle = YES;
    gauge.style.innerBackgroundColor = [UIColor colorWithHexString:@"66D8F2" andAlpha:1];
    gauge.style.outerBackgroundColor = [UIColor colorWithHexString:@"17205C" andAlpha:1];
}

Background

 

Next, we will style the axis to bring the tick marks and labels inwards.

- (void)viewDidLoad
{
    ...

    //Axis style
    gauge.style.tickBaselinePosition = 0.7;
    gauge.style.tickLabelColor = [UIColor colorWithHexString:@"3E9C62" andAlpha:1];
    gauge.style.tickLabelFont = [UIFont fontWithName:@"AmericanTypewriter-Bold" size:18];
    gauge.style.majorTickColor = gauge.style.tickLabelColor;
    gauge.style.minorTickColor = gauge.style.tickLabelColor;
}

Axis

 

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.

- (void)viewDidLoad
{
    ....

    //Bevel style
    gauge.style.bevelWidth = 20;
    gauge.style.bevelPrimaryColor = [UIColor colorWithHexString:@"232B5E" andAlpha:1];
    gauge.style.bevelSecondaryColor = [UIColor colorWithHexString:@"5563BD" andAlpha:1];
}

Bevel

 

Next, we style the needle. We’ll make it fit better with the color scheme, and make it a bit thicker and shorter too.

- (void)viewDidLoad
{
    ...

    gauge.style.needleColor = [UIColor colorWithHexString:@"3FE0BD" andAlpha:1];
    gauge.style.needleWidth = 10;
    gauge.style.needleLength = 0.75;
    gauge.style.knobColor = [UIColor colorWithHexString:@"5563BD" andAlpha:1];
    gauge.style.needleBorderColor = [UIColor blackColor];
    gauge.style.needleBorderWidth = 1;
}

Needle

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.

- (void)viewDidLoad
{
    //Observe the battery level
    [[UIDevice currentDevice] setBatteryMonitoringEnabled:YES];
    [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(updateBatteryStatus) name:UIDeviceBatteryLevelDidChangeNotification object:nil];
    
    //Trigger the value for the initial render
    [self updateBatteryStatus];
}

-(void)updateBatteryStatus
{
    gauge.value = [UIDevice currentDevice].batteryLevel * 100;
}

Note that we manually call updateBatteryStatus, as we are not guarunteed to get a callback immediately. It is worth noting that on the simulator, batteryLevel will always return 0.

With that, we should have a working battery indicator. Let’s throw on a lightning bolt, just for that finishing touch!

Bolt

Pretty cool! If you got stuck at any point, the entire source is available on the Github page (or as a zip), and don’t forget to grab a copy of the framework from ShinobiLabs!

Back to Blog