Quick Start Guide - Objective-C

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

Your Download

The ShinobiGauges folder contains:

  • A copy of the framework.
  • A copy of the documentation for the framework.
  • A set of samples to demonstrate getting started with ShinobiGauges.
  • A README file with setup steps.
  • A text file containing the version number.
  • A copy of the ShinobiControls license.
  • A change log containing the changes made to this release.

Adding ShinobiGauges to your project

To add ShinobiGauges to your Xcode project, you need to add a reference to the ShinobiGauges framework. There are two ways of doing this:

  • If you have run the Gauges installer, the easiest way to add the framework is to open up the project window, go to the Build Phases tab, and select to add frameworks in the “Link Binary With Libraries” section. In the menu which is displayed, select ShinobiGauges.framework.
  • If you didn’t run the pkg installer, you can drag the framework into your project from the ShinobiGauges folder on your desktop.

ShinobiGauges makes use of the QuartzCore.framework, so you should add this to your project from the “Link Binary With Libraries” section of the project window. Trial users will need to import Security.framework too.

To check you have done all of this correctly, open up the project window, go to the Build Phases tab and check that ShinobiGauges.framework and QuartzCore.framework are both under “Link Binary With Libraries”.

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 trial 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.