iPhone/iPad circular intensity gauge control (image included)

Question

I found this interesting interface(starts at 33 seconds http://vimeo.com/22946428 ), and would like to design something similar for my own apps. I'm particularly interested in the circular intensity gauge/knob control as on the attached image. It has a very futuristic feel to it and should be fairly simple to implement using touchesMoved: gesture recognizer callback.

But in order to not-reinvent the wheel, are there any open source libraries that offer advanced UI capabilities, like the ones in the picture/video?

Update: Answer by Hubert demonstrates how to use single finger motion to rotate the dial. The second part of the puzzle is: how to fill the control with color?

I'm thinking of rotating a background color image, but a part of it has to be cut off or covered with something else to vary from an empty background to full. Maybe the cut out element (about 1 radian) may hide a set of fan-like segments that follow the finger and create an illusion of a continuously increasing or decreasing fill of the gauge. The 6 segments x,y would be continuously animating, positioning them in such a way as to cover only the required fraction of the control.

Intensity gauge

score 8 · Accepted Answer · answered Mar 08 '12 at 17:41

I dont think you will find that control exactly, but Here are a couple of links to working with and tutorials on rotary controls for iOS:

http://www.raywenderlich.com/9864/how-to-create-a-rotating-wheel-control-with-uikit

http://maniacdev.com/2012/02/tutorial-creating-a-one-figure-rotation-gesture-recognizer-for-a-rotary-knob-control-on-ios/

http://maniacdev.com/2011/12/open-source-libraries-for-easily-adding-rotary-knob-controls-in-your-ios-apps/

Your Welcome. Hope that it helps. – Hubert Kunnemeyer Mar 08 '12 at 20:42 — Hubert Kunnemeyer, Mar 08 '12 at 20:42

Alex Stone · Answer 2 · 2012-03-13T19:23:37.060

Here's an example of a circular progress view. Combined with a one finger rotary control, it creates a similar gauge to the one requested (simply overlay 2 controls on top of each other)

Then link the two controls with the rotation callback:

  - (void) rotation: (CGFloat) angle
{
    // calculate rotation angle
    imageAngle += angle;
    if (imageAngle > 360)
        imageAngle -= 360;
    else if (imageAngle < -360)
        imageAngle += 360;

 progress = imageAngle/360.0;
}

DACircularProgress view + OneFingerRotationGestrureRecognizer

iPhone/iPad circular intensity gauge control (image included)

2 Answers2

Linked