CODEWITHSUNDEEP
javascriptgesturesleap-motion
Alessandro Resta
Alessandro Resta

Reputation: 1172

Better aproach for touching gestures on leap motion

I'm trying to develop a menu where I can hover over the icons using my hand and then click on them using a pushing forward movement. To achieve that, I'm using the velocity my hand on the z-axis, plus the touch zone and the touch distance as you can see in this snippet of code.

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

controller.on('frame', function(frame) {
  if (frame.pointables.length > 0) {
    var pointable = frame.pointables[0];

    // Params used to navigation and touching on menu interfaces
    var touchZone = pointable.touchZone, // None, hovering, or touching
        touchDistance = pointable.touchDistance, // [+1, 0, -1]
        zNotFinger= pointable.tipVelocity[0], // For the case pointable isnn't a hand
        zIndex = pointable.tipVelocity[1], // Index finger velocity on z-axis
        zMiddle = pointable.tipVelocity[2], // Middle finger velocity on z-axis
        x = pointable.tipPosition[0],
        y = pointable.tipPosition[1],

        // Getting highest tipVelocity
        tempVelocity = zIndex >= zNotFinger ? zIndex : zNotFinger,
        velocity = zMiddle > tempVelocity ? zMiddle : tempVelocity;

    // The circle is defined as a gesture to go back to homepage
    if (frame.hands.length === 1 && origin !== 'home' && frame.gestures.length > 0) {
      var gesture = frame.gestures[0],
          hand = frame.hands[0],
          oneExtended = hand.fingers[1].extended && !hand.fingers[3].extended;

      if (gesture.type === 'circle' && oneExtended && gesture.pointableIds.length >= 1) {
        window.open('../html/home.html','_self');
      }
    }

    // Sending data...
    if (origin === 'home') {
      homeHover(x, y, touchZone, touchDistance, velocity);
    } else if (origin === 'bio') {
      bioHover(x, y, touchZone, touchDistance, velocity);
    } else if (origin === 'nature') {
      natureHover(x, y, touchZone, touchDistance, velocity);
    }

  }
});
controller.connect();

}

and then...

if (velocity > 150) {
if ($(".hovered").attr("href") && touchZone === 'touching' && touchDistance <= -0.4) {
  window.location.replace($(".hovered").attr("href"));
}

}

The main problem is to accidentally "click" on the links while hovering over the icons or set up the requires too high making difficult to click.

Could anyone give me a hand on that? Maybe new methods that I should use or even a completely different approach.

OBS: I already tried the screenTap and keyTap.

Many thanks!

Upvotes: 1

Views: 298

Answers (1)

Charles Ward
Charles Ward

Reputation: 1388

The too hard or too easy to click is a common problem. The built-in taps have the same problem.

You could explore the stabilizedTipPosition instead of velocity (or in addition to velocity) and make the user move forward a predetermined amount after hovering. Using stabilizedTip position should make it easier for the user to push forward without accidentally moving off the target. Only clicking when the motion is primarily along the z axis should greatly reduce accidental clicks, both those that occur when the user is moving to a target menu item and those that occur when the user is just moving their hands (unrelated to the menu).

Other common approaches to menus include:

  1. Hover to activate -- the cursor shows a countdown indicator and the user just has to hold the cursor over the menu item or button for the requisite amount of time. It works, but is a bit inelegant and makes the user wait a bit for each menu option when they've already made up their mind what to do. This is one of the most common methods and can be seen in many apps in the Leap Motion app store.
  2. Pull-out to activate -- the user hovers over the menu item and moves their finger to "drag" the item to the side to activate. You can see an example of this type of menu in the Sculpting app.
  3. Physical -- the menus and buttons are activated by "touch" (collision) in 3D space. This technique works well in VR-style apps because the user has a better sense of depth perception. It can also work for non-VR 3D apps (with careful design). You could do a hybrid 2D-3D web app where the content is essentially 2D, but the hands are 3D and shown above the content.

There are some menu design guidelines (older) here: https://developer.leapmotion.com/documentation/javascript/practices/Leap_Menu_Design_Guidelines.html

And several examples (not all menus, though): https://developer.leapmotion.com/gallery/category/javascript

Upvotes: 1

Related Questions