Blog

NUCLiOS IGGaugeView: Anatomy

Stephen Zaharuk / Thursday, September 25, 2014

I've had a few people ask me about what parts are which on the IGGaugeView. So today i'm putting together a diagram that breaks out each of the individual pieces of the gauge so that you can easily style it however you like. 

If you were to place a gauge in your app, without any additional code, this is what you'll see.

So lets get rid of everything, and start from the Inside going Out. 

To do this, we'll use the following code, to create an empty gauge: 

    _gaugeView.rangeOutlines = nil;

    _gaugeView.rangeBrushes = nil;

    _gaugeView.needleShape = IGGaugeNeedleShapeNone;

    _gaugeView.needlePivotShape = IGGaugePivotShapeNone;

    _gaugeView.scaleEndExtent = _gaugeView.scaleStartExtent = 0;

    _gaugeView.backingOuterExtent = _gaugeView.backingInnerExtent = 0;

    _gaugeView.backingOutline = _gaugeView.backingBrush = nil;

    _gaugeView.scaleBrush = nil;

    _gaugeView.tickStartExtent = _gaugeView.tickEndExtent = 0;

    _gaugeView.tickStrokeThickness = 0;

    _gaugeView.minorTickCount = 0;

    _gaugeView.interval = 0;

    _gaugeView.fontBrush = nil;

    _gaugeView.tickBrush = nil;

    _gaugeView.needleBrush = _gaugeView.needleOutline = _gaugeView.needlePivotBrush = _gaugeView.needlePivotOutline = nil;

    _gaugeView.minorTickBrush = nil;

    _gaugeView.font = [UIFont systemFontOfSize:0];

If we were to run the app now, we'd see nothing but white. I'd post a picture, but i'm pretty sure you can imagine what that looks like! :)

NeedlePivot

The pivot is the circle area that wraps around the needle.

_gaugeView.needlePivotShape = IGGaugePivotShapeCircleOverlayWithHole;

_gaugeView.needlePivotBrush = [[IGBrush alloc]initWithColor:[UIColor redColor]];

_gaugeView.needlePivotStrokeThickness = 3;

_gaugeView.needlePivotOutline = [[IGBrush alloc]initWithColor:[UIColor greenColor]];

Needle

Next up.. the needle!

_gaugeView.needleShape = IGGaugeNeedleShapeNeedleWithBulb;

_gaugeView.needleBrush = [[IGBrush alloc]initWithColor:[UIColor redColor]];

_gaugeView.needleOutline = [[IGBrush alloc]initWithColor:[UIColor greenColor]];

Scale


The scale is that gray looking bar that contains the tick marks in the original picture. It always starts and ends where the gauge's start and end angles begin and end.  

_gaugeView.scaleBrush = [[IGBrush alloc]initWithColor:[UIColor lightGrayColor]];

_gaugeView.scaleEndExtent = .5;

_gaugeView.scaleStartExtent = .45;

What are Extents?

One important thing to note: You'll see that there are a lot of properties that contain the term "Extent" in them. Those properties are percentage based, meaning they go from 1.0 - 0.0. Where 1.0 is the gauge's most outer part and 0.0 is the most inner part. So, for example, if you want to set the scale, (the light gray area, to extend from the center to just short of the outside, you could set its scaleStartExtent to .95 and the scaleEndExtent to 0.0.

_gaugeView.scaleBrush = [[IGBrush alloc]initWithColor:[UIColor lightGrayColor]];

_gaugeView.scaleEndExtent = .95;

_gaugeView.scaleStartExtent = 0;

For a bit more clarification. Here is the same image from above, with an overlay of extent values.

Tickmarks

There are 2 kinds of tick marks: normal and minor. 

For normal ticks the code looks like this:

_gaugeView.interval = 5;

_gaugeView.tickBrush = [[IGBrush alloc]initWithColor:[UIColor redColor]];

_gaugeView.tickStrokeThickness = 1;

_gaugeView.tickStartExtent = .5;

_gaugeView.tickEndExtent = .45;

The interval controls how often a tick mark should be displayed. That number is baed on degrees. So if you're got a gauge with a start angle of 0 and end and of 90, then a tick mark will be placed at 0, 5, 10, 15, 20... etc... Note that extents are used, the same as mentioned above, in the section about scales.

For minor ticks:

_gaugeView.minorTickCount = 5;

_gaugeView.minorTickBrush = [[IGBrush alloc]initWithColor:[UIColor greenColor]];

_gaugeView.minorTickStartExtent = .5;

_gaugeView.minorTickEndExtent = .47;

Minor ticks appear between major ticks. Setting a minorTickCount of 5 means that there will be five minor ticks between every major tick.  Note extents are used like above

Labels


By default, the labels in the gauge will use the same interval property that the tick marks use. However, if you'd like them to follow a different interval, then you can use the labelInterval property. With labels, you can control the font and color used, as well, as its start extent. 

_gaugeView.labelInterval = 10;

_gaugeView.labelExtent = .55;

_gaugeView.fontBrush = [[IGBrush alloc]initWithColor:[UIColor redColor]];

_gaugeView.font = [UIFont systemFontOfSize:15];

Backing

The backing is the final piece of the puzzle. Its the dark black outer border and the background color of the gauge. Like everything else, you can control the where it begins and ends via the extents.

_gaugeView.backingOuterExtent = .9;

_gaugeView.backingInnerExtent = 0;

_gaugeView.backingOutline = [[IGBrush alloc]initWithColor:[UIColor redColor]];

_gaugeView.backingStrokeThickness = 5;

_gaugeView.backingBrush = [[IGBrush alloc]initWithColor:[UIColor greenColor]];

 

And there you have it! The anatomy of the gauge.

Of course there is more to it than this. You can also add ranges to the gauge which add a lot more styling and flexibility options. 

I won't go into detail about them here, however I've already done a few pieces on them:

Building the SBViz App

Customizing the iOS Gauge Control

Hope this helps!

-SteveZ