Introduction

The following guide will get you up and running with the SGauge component as quickly as possible. In this guide, we will introduce you to the key features of the Gauge, including initial project setup and configuring the style. It may help to follow along with our related code sample: GaugesGettingStarted.xcodeproj

Creating a Gauge

Start up Xcode and create a new project (File / New / Single View Application).

Within your newly created project, add a reference to the ShinobiGauges.framework. Instructions for doing this can be found in the Framework Guide. If you are a trial user, you will also need to setup the license key.

Firstly, add an instance variable for the Gauge, and import the main ShinobiGauges header in ViewController.m, defining the variable as follows:

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

@implementation ViewController
{
    SGaugeRadial *gauge;
}
...

In viewDidLoad, create the Gauge instance as follows:

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view.

    gauge = [[SGaugeRadial alloc] initWithFrame:CGRectMake(0, 0, 400, 400) fromMinimum:@0 toMaximum:@1000];
    gauge.center = self.view.center;
    [self.view addSubview:gauge];
}

At this point, build and run the project to check that everything has been set up correctly. You should see something similar to the gauge below:

Configuring the Gauge

The gauge has been built with styling in mind, allowing you to change virtually every aspect of the gauge, needle and the axis. For more detail on this, see the Styling section below.

Instead of the default style, apply the Dashboard style as follows:

- (void)viewDidLoad
{
    ...
    gauge.style = [SGaugeDashboardStyle new];
}

Next, make the range take up more of the circle by setting the start and end angle of the axis arc:

- (void)viewDidLoad
{
    ...
    gauge.arcAngleStart = -M_PI_4 * 3.0;
    gauge.arcAngleEnd = M_PI_4 * 3.0;
}

Thicken the bevel around the edge:

- (void)viewDidLoad
{
    ...
    gauge.style.bevelWidth = 30;
}

Finally, give the gauge a value:

- (void)viewDidLoad
{
    ...
    gauge.value = 375;
}

This is only a small part of what the Gauge can do, but there are plenty of options on how to customize it exactly how you need it. If you got stuck at any point, take a look at our related code sample: GaugesGettingStarted.xcodeproj.