Turning up the Heat with ShinobiGauges

Written by Thomas Kelly

With ShinobiGauges hot off the press, we’ve been burning to tell you about some of the cool new features! A lot of you have already been warming up to the Early Access program, and asked us about when we would take the freeze off and release!

So what better way to show you the new and improved ShinobiGauges than building a thermometer?



To start with, you’ll need to grab the latest ShinobiGauges framework. If you want to skip ahead and see the final result, we’ve got the whole project on github.

We start by creating a vertical gauge for the Celsius axis, stretching from -40 to 50 degrees.

gauge = [[SGaugeLinear alloc] initWithFrame:gaugeFrame fromMinimum:@-40 toMaximum:@50];
gauge.orientation = SGaugeLinearOrientationVertical;

We then do a bit of styling, to make our gauge look more thermometer-like

//Style the gauge
gauge.style.bevelSecondaryColor = [UIColor darkGrayColor];
gauge.style.bevelPrimaryColor = gauge.style.bevelSecondaryColor;
gauge.style.bevelWidth = 5;
gauge.style.cornerRadius = 25;
gauge.style.tickMarkAlignment = SGaugeTickAlignBottom;
gauge.style.tickBaselinePosition = 0.03;

Finally, style the labels to be outside the border, and the tickmarks to be more lightweight

//Style the axis
gauge.style.tickLabelOffsetFromBaseline = -25;
gauge.style.tickLabelColor = [UIColor darkGrayColor];
gauge.style.tickBaselineWidth = 0;


The thermometer is starting to look like a thermometer now, but no thermometer is complete without mercury. To do this, we first get rid of the needle

//Remove the needle
gauge.style.needleWidth = 0;
gauge.style.needleBorderWidth = 0;

Then add a “fill” in the middle of the gauge.

//Add the "Mercury"
gauge.style.fillToValue = YES;
gauge.style.fillValueInnerRadius = 0.4;
gauge.style.fillValueOuterRadius = 0.6;

And with that, we have a mercury thermometer!


Still, something is missing… something far on the right… far on right… fahrenheit! A perfect chance to demonstrate one of the new features of the linear gauge: a second axis.

Create your axis, then override the default range and positioning

//Add a Fahrenheit axis
fahrenheitAxis = [[SGaugeAxis alloc] initWithGauge:gauge];
fahrenheitAxis.minimumValue = [self fahrenheitFromCelsius:gauge.axis.minimumValue];
fahrenheitAxis.maximumValue = [self fahrenheitFromCelsius:gauge.axis.maximumValue];
fahrenheitAxis.tickBaselinePosition = 0.97;
fahrenheitAxis.tickMarkAlignment = SGaugeTickAlignTop;
fahrenheitAxis.tickLabelOffsetFromBaseline = 25;
[gauge addSubview:fahrenheitAxis];

With this, your gauge should be complete, showing Celsius and Fahrenheit values with a mercury line in the middle. I’ll leave hooking this up to an actual temperature probe to the reader though.



Don’t forget to download your copy of ShinobiGauges, available as a trial or part of the full ShinobiSuite! The code for this project is available on github if you want to see it in action.