Using UIPanGestureRecognizer in Xcode and velocity to determine swipe direction is too sensitive and switches rapidly between directions

Question

Clarification:

What I'm trying to achieve is this: the swiping gestures (up, down, right and left) are on a WebView. When any of the gestures occur this is what it needs to happen: as soon as the swipe begins, an action must begin (the action is actually loading a html link which moves an ip camera to either up,down,right,left). The html link makes the camera to go all the way to the right or left or up or down. I have another html link which when loaded will tell the ip camera to stop.

So what it needs to happen is when the state is UIGestureRecognizerStateBegan the link load and moves the camera continuously until the user isn't touching the screen and the state becomes UIGestureRecognizerStateEnded and triggers the other html link to run in WebView which link will stop the camera from moving. As we speak my initial code posted does that but the swiping was too sensitive. This problem is fixed with your code but now the second link loads instantly after the first one, not allowing the camera to move. Does it make sense?? First link needs to run until the finger is lifted.

---

Original question:

I was trying to determine the swipe direction using velocity in a UIPanGestureRecognizer, which I managed and it detects the right, left, up and down swipes, it triggers the appropriate actions based on the swipe direction and again the correct actions when UIGestureRecognizerStateEnded for each swipe, BUT, my problem in the code below is that the direction is very sensitive for example during a swipe to the right it recognises most part of the swipe as to the right but also some swipe up or down in between. As the swipe is not always perfectly in a straight line, what I would like to find is to only trigger the action for swipe right if the swipe is MOSTLY to the right and ignore the tiny pixel deviations.

Also, ideally for my project is to trigger the action on a given swipe direction only once just like in the UISwipeGestureRecognizer, but using it I have a problem with UIGestureRecognizerStateEnded as it doesn't let the swipe action run until I lift my finger off the screen, it finishes the swipe action right away even though my finger is still swiping.

Any help would be much appreciated. Here is my code:

in ViewDidLoad I have:

UIPanGestureRecognizer *gestureRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handleGesture:)];
[_myWebView addGestureRecognizer:gestureRecognizer];
[gestureRecognizer setMinimumNumberOfTouches:1];
[gestureRecognizer setMaximumNumberOfTouches:1];

and in my class I have:

- (void)handleGesture:(UIPanGestureRecognizer *)gestureRecognizer
{
CGPoint velocity = [gestureRecognizer velocityInView:_myWebView];

if(velocity.x > 0)//right
{
   //my action here

  if ( [gestureRecognizer state] == UIGestureRecognizerStateEnded )
  { //my action when swipe finished here }
}
else if(velocity.x < 0)//left
{
   //my action here

  if ( [gestureRecognizer state] == UIGestureRecognizerStateEnded )
  { //my action when swipe finished here }
}
else if(velocity.y > 0)//down
{
   //my action here

  if ( [gestureRecognizer state] == UIGestureRecognizerStateEnded )
  { //my action when swipe finished here }
}
else if(velocity.y < 0)//up
{
   //my action here

  if ( [gestureRecognizer state] == UIGestureRecognizerStateEnded )
  { //my action when swipe finished here }
}

Thank you, any clarifications please ask.

Answer 1

You could have some "horizontal" direction detection if the x component was some reasonable multiple of the y component. So, perhaps if x was five times y, that could be considered horizontal swipe. And vice versa for vertical. Whether five is the right multiple is up to you (using tan^-1, you can see that translates to roughly 11.3° from absolute horizontal/vertical), but it's conceptually one way to tackle it easily.

For example, here's a gesture recognizer that will send a camera a command to initiate movement in a particular direction when the user starts a swipe in that direction, and will tell the camera to stop when the user lifts their finger off the screen:

CGFloat const gestureMinimumTranslation = 20.0;

typedef enum : NSInteger {
    kCameraMoveDirectionNone,
    kCameraMoveDirectionUp,
    kCameraMoveDirectionDown,
    kCameraMoveDirectionRight,
    kCameraMoveDirectionLeft
} CameraMoveDirection;

@interface ViewController ()
{
    CameraMoveDirection direction;
}
@end

@implementation ViewController

- (void)viewDidLoad
{
    [super viewDidLoad];

    UIPanGestureRecognizer *recognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipe:)];
    [self.viewWithGestureRecognizer addGestureRecognizer:recognizer];
}

// This is my gesture recognizer handler, which detects movement in a particular
// direction, conceptually tells a camera to start moving in that direction
// and when the user lifts their finger off the screen, tells the camera to stop.

- (void)handleSwipe:(UIPanGestureRecognizer *)gesture
{
    CGPoint translation = [gesture translationInView:self.view];

    if (gesture.state == UIGestureRecognizerStateBegan)
    {
        direction = kCameraMoveDirectionNone;
    }
    else if (gesture.state == UIGestureRecognizerStateChanged && direction == kCameraMoveDirectionNone)
    {
        direction = [self determineCameraDirectionIfNeeded:translation];

        // ok, now initiate movement in the direction indicated by the user's gesture

        switch (direction) {
            case kCameraMoveDirectionDown:
                NSLog(@"Start moving down");
                break;

            case kCameraMoveDirectionUp:
                NSLog(@"Start moving up");
                break;

            case kCameraMoveDirectionRight:
                NSLog(@"Start moving right");
                break;

            case kCameraMoveDirectionLeft:
                NSLog(@"Start moving left");
                break;

            default:
                break;
        }
    }
    else if (gesture.state == UIGestureRecognizerStateEnded)
    {
        // now tell the camera to stop
        NSLog(@"Stop");
    }
}

// This method will determine whether the direction of the user's swipe

- (CameraMoveDirection)determineCameraDirectionIfNeeded:(CGPoint)translation
{
    if (direction != kCameraMoveDirectionNone)
        return direction;

    // determine if horizontal swipe only if you meet some minimum velocity

    if (fabs(translation.x) > gestureMinimumTranslation)
    {
        BOOL gestureHorizontal = NO;

        if (translation.y == 0.0)
            gestureHorizontal = YES;
        else
            gestureHorizontal = (fabs(translation.x / translation.y) > 5.0);

        if (gestureHorizontal)
        {
            if (translation.x > 0.0)
                return kCameraMoveDirectionRight;
            else
                return kCameraMoveDirectionLeft;
        }
    }
    // determine if vertical swipe only if you meet some minimum velocity

    else if (fabs(translation.y) > gestureMinimumTranslation)
    {
        BOOL gestureVertical = NO;

        if (translation.x == 0.0)
            gestureVertical = YES;
        else
            gestureVertical = (fabs(translation.y / translation.x) > 5.0);

        if (gestureVertical)
        {
            if (translation.y > 0.0)
                return kCameraMoveDirectionDown;
            else
                return kCameraMoveDirectionUp;
        }
    }

    return direction;
}

@end

This demonstrates how you could determine the initial direction of a pan gesture and then act once the initial direction is established, as well as upon the end of the gesture.

Answer 2

First thing is you can use translation instead of velocity of the gesture - that'll give you the distance traveled from the beginning to the end of the swipe and not the direction of the movement at the very end of the swipe as with velocity.

Secondly, you probably should check if the gesture state is 'Ended' before checking the direction. Now you repeat the same check in each 'if'.

To get the direction you can either get the angle of the translation using atan2 trigonometric function with x and y of the translation or if it's OK to always interpret the gesture as a swipe in one of 4 directions, simply find whether x or y has larger absolute value and then if it's positive or negative.