Detect touch gestures with Hammer – Improvement for scrolling

Intro

In a previous post I introduced the Hammer library as a tool to detect touch gestures in your Mobile XPage Application (MXA?).

Add touch gestures to your page.

Recognizers

In the sample I demonstrated the Pan gesture. But beside Pan you have other recognizers:

The downsize with the Pan recognizer is that there is no velocity detection like in the swipe recognizer. This makes the pan recognizer less “natural”.

Angle detection and scrolling

When users scroll on their mobile devices the angle in which they scroll is never 100% vertical or horizontal. Your thumb tends to go from left bottom to right top.

So in order to avoid the swipe recognizer kicks in unnecessary you can detect the angle the gesture makes. Here are the values for angles:

  • Values are between -180 and 180:
    • 0 means RIGHT
    • -90 means UP
    • 90 means DOWN
    • 180 means LEFT

If you decide to only perform an action on vertical gestures with a deviation of an angle of 15 degrees your altered code could like as followed:

var mc = new Hammer(main);
mc.get(“swipe“).set({ direction: Hammer.DIRECTION_ALL });
mc.on(“swipe”, function(eventObject) {
if(eventObject.angle > -15 && eventObject.angle < 15){
// SESAME OPEN
$(main).animate({
left: width-20, opacity:1}, options);
$(nav).animate({
left: “0”}, options);
}
if(eventObject.angle > 165 || eventObject.angle < -165){
// SESAME CLOSE
$(main).animate({
left: “0”, opacity:1}, options);
$(nav).animate({
left: -(width-20)}, options);
}
});

In this approach the user can scroll without the opening/closing of the left side menu to kick in unnecessary.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s