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.

Rapid

Answer 1

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.

Kurdistan

So far the most complete example. Thank you :) I hate it when people don't mark an answer as right … – Kastner

Answer 2

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

Carthy

Answer 3

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 <<<");
}

Furfuran

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. – Rapid

Answer 4

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;
  }
}

Swell

Answer 5

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();

Jelks