Radial Dial in Xcode - iphone

Question

I am trying to make an app that uses a radial dial. As an example the radial dial features as availabel in this app
http://itunes.apple.com/us/app/kitchen-dial/id448558628?mt=8&ign-mpt=uo%3D4
What I wanted to ask is what method should I use to accomplish this? Guys, I am not asking you to write the code for me what I am asking is how is this done conceptually? I mean when a user swipses left/right on the screen how does it know which radial dial to move and in which direction. I am sure there are multiple buttons and there is some image transition going on here. I need to understand the concept of making such a thing. If anyone know or has done something similar please do share your thoughts. Does apple has a sample code for this? Thank you.

Answer 1

The central concepts are:
Ability to rotate an image around a center point.
Ability to calculate an angle relative to the center point given an x,y coordinate.
So, to move the wheel:
On touch began:
Calculate starting angle based on x,y
On touch moved:
Calculate new angle based on x,y and subtract starting angle. This is the angle delta (or how much more to rotate the image by).
To register button taps on the wheel:
On tap:
Calculate angle based on x,y, add existing rotation, divide by the angle size of each segment to get an index.
You asked for a high-level explanation of the concepts - and that's pretty much it.

Answer 2

This is a complicated question. The simple answer is: use a pan gesture recognizer, with:
- (void)panBegan:(UIPanGestureRecognizer *)pan {
CGRect frame = [self frame];
_central = CGPointMake(frame.origin.x+frame.size.width/2, frame.origin.y+frame.size.height/2);
CGPoint p = [pan locationInView:[self superview]];
p.x -= _central.x;
p.y -= _central.y;
_angle = atan2(p.x, p.y);
}
- (void)panMoved:(UIPanGestureRecognizer *)pan {
CGPoint p = [pan locationInView:[self superview]]];
p.x -= _central.x;
p.y -= _central.y;
CGFloat deltaAngle = _angle - atan2(p.x, p.y);
self.transform = CGAffineTransformMakeRotation(deltaAngle + _finalAngle);
}
where _angle is angle of the initial touch of the pan, and _finalAngle is saved angle at the end of the previous pan.
But: the UIPanGestureRecognizer has a velocity property, and you should be using it at the end of the pan to continue the rotation, as if the dial had inertia. And, if the dial has a fixed integer set of legal stopping positions, then you must adjust the slowdown curve so it stops on a legal stop. And, if you animate the deceleration, and the user starts a new pan before the previous one is finished, then you have to adjust _finalAngle based on the perceived position, not the stored position.

Answer 3

Here is a list of rotary knobs that are open source, so you can look at the code and see whats involved:
http://maniacdev.com/2011/12/open-source-libraries-for-easily-adding-rotary-knob-controls-in-your-ios-apps/