Write a Circular UIGestureRecognizer

Question

Hi

I'm looking to create a jog wheel in an iPhone / iPad application. I know that you can subclass UIGestureRecognizer to write your own recognizers. Does anyone know how (mainly the maths behind it) to create one that would detect a circular movement, perhaps in combination with a pan gesture?

Thanks

Answer 1

Hi,
this question isn't easy. I spend some time thinking of a possible solution:
I think what you need are some key properties you have to set:

• The center of the circular movement (in this case no problem, because you know the center of the jog wheel)
• A corridor in which the movement should happen.
  • so you need the inner radius and the outer radius.

Now you have something like this (unfortunately I haven't got enough reputation so only the link: http://img17.imageshack.us/img17/4416/bildschirmfoto20100721u.png

Now the maths behind this starts:
First of all you arrange the corridor in four quarters:

• From 0° to 90°
• From 90° to 180°
• From 180° to 270°
• From 270° to 360°

For each quarter you have to figure out when the finger is moving (let's say that the 0°-line is from the center point straight to the top):

• if the finger is in the first quarter you know if the x changes to the left that the rotation must be anti-clockwise. If the x changes to the right the rotation must be clockwise.

Apply this logic for all quarters. Now you know if the jog wheel is moved clockwise or anti-clockwise. You have to make sure, that the finger is never leaving the corridor (if you test this logic and the movement stops because of leaving the corridor, make the corridor bigger - Thanks to CrystalSkull for his comment: Use 44px as a minimum width for the corridor to apply to the Human Interface Guidelines).

Sumary
So now you can conclude that you need a center point and a corridor the finger can move in. You have to figure out in which quarter the finger is in and find out (using the x-value) if the rotation is clockwise or anti-clockwise.

I hope this helps you a little bit.