Detecting swipe gesture direction with Leap Motion

Question

I'm trying to simply get the direction of a swipe gesture with the Leap Motion using the javascript API. My code is:

$(document).ready(function() {
    controller = new Leap.Controller("ws://localhost:6437/");
    listener = new Leap.Listener();

    listener.onFrame = function(controller) {
        var frame = controller.frame();
        var hands = frame.hands();
        var pointables = frame.pointables();

        var gestures = frame.gestures();

        $("#rotationAxis").text(pointables.length);
        $("#gestureDetected").text(gestures[0]);
    }

    controller.addListener(listener);
    controller.enableGesture("swipe", true);
    listener.onConnect = function(controller) {
        // calibrate = new Leap.Calibrate(controller);
        // calibrate.onComplete = function(screen){
        // }
    }
});

I can get the current gesture from the array, but cannot get the type or direction. Any ideas?

Thanks.

score 12 · Answer 1 · answered Oct 25 '13 at 20:26

If you care about right, left, up, or down, you can compare the absolute value of the horizontal and vertical coordinates of the Swipe direction vector to see if the Swipe is more vertical or more horizontal (and then compare the relevant coordinate to zero to see if the swipe is going right or left, or up or down):

// Setup Leap loop with frame callback function
var controllerOptions = {enableGestures: true};

Leap.loop(controllerOptions, function(frame) {

  if (frame.gestures.length > 0) {
    for (var i = 0; i < frame.gestures.length; i++) {
      var gesture = frame.gestures[i];

      if (gesture.type == "swipe") {
          //Classify swipe as either horizontal or vertical
          var isHorizontal = Math.abs(gesture.direction[0]) > Math.abs(gesture.direction[1]);
          //Classify as right-left or up-down
          if(isHorizontal){
              if(gesture.direction[0] > 0){
                  swipeDirection = "right";
              } else {
                  swipeDirection = "left";
              }
          } else { //vertical
              if(gesture.direction[1] > 0){
                  swipeDirection = "up";
              } else {
                  swipeDirection = "down";
              }                  
          }
       }
     }
  }

})

With a slightly more complex comparison, you could classify swipes as forward or backward, too.

So far the most complete example. Thank you :) I hate it when people don't mark an answer as right … — thgie, Jan 07 '14 at 16:43

score 2 · Answer 2 · answered Aug 11 '13 at 12:23

with enableGestures: true and var gesture = frame.gestures[i];

     // detect swipe   
        if (gesture.direction[0] > gesture.direction[2]) {
         console.log('swipe left')
        }

this is how I did it myself,tbh I can't rem if it's left or right but it's not a long process of elmination

score 0 · Answer 3 · answered Aug 02 '13 at 14:32

0

After a quick analysis I found the information you are looking for:

var gestureType = frame.gestures[0].type;

if (gestureType === "swipe")
{
    if (frame.gestures[0].direction[0] > 0)
        console.log(">>> swipe >>>");
    else
        console.log("<<< swipe <<<");
}

answered Aug 02 '13 at 14:32

Sga

3,608
2
36
47

I get "Uncaught TypeError: Cannot read property 'type' of undefined" on var gestureType = frame.gestures[0].type; Sorry, should have noted that in my question. – mrEmpty Aug 02 '13 at 15:08

score 0 · Answer 4 · answered Aug 02 '13 at 15:40

The frame object has a gesture only when there is one. A frame can contains 0 hand, 0 finger or 0 gesture. You have to check if a gesture is present, then retrieve needed information.

var frame = controller.frame();
if (frame.gestures.length > 0)
{
  for (var i = 0; i < frame.gestures.length; i++)
  {
   var gesture = frame.gestures[i];
   var type = gesture.type;
   var direction = gesture.direction;
  }
}

score 0 · Answer 5 · answered Aug 17 '13 at 16:18

here is a code sample that works perfectly for me:

var controller = new Leap.Controller({enableGestures: true});

controller.on('gesture', function (gesture){
    console.log(gesture);
    if(gesture.type === 'swipe'){
        handleSwipe(gesture);
    }
});

function handleSwipe (swipe){
    var startFrameID;
    if(swipe.state === 'stop'){
        if (swipe.direction[0] > 0){
            //this means that the swipe is to the right direction
            moveRight();
        }else{
            //this means that the swipe is to the left direction
            moveLeft();
        }
    }
}

controller.connect();

Detecting swipe gesture direction with Leap Motion

5 Answers5

Linked