Is there a javascript gesture library that works with the Samsung galaxy tab?

Question

i have been experimenting with javascript gesture libraries. They all work great with the iPad mini, however, when I try them on my Samsung Galaxy Tab (GT-P7510, Android 4.04), the results are at best intermittent.

The best results I get are in portrait mode. In landscape mode, virtually nothing works.

I have tried, amongst others, the following libraries, all of which I found from this post: http://www.queness.com/post/11755/11-multi-touch-and-touch-events-javascript-libraries

• hammer.js
• quo.js
• touchy
• doubletap
• jgestures
• touchswipe

Touchswipe worked best, but all the others just didn't really play ball.

The Hammer page has a demo, which works fine on the ipad but not the android:

http://eightmedia.github.com/hammer.js/

So, does anybody know of any way I can get swipe gestures to play nice on my galaxy?

I have viewed the quirksmode page that a previous stackoverflow question pointed to, but that was out of date and no longer maintained, from what I could see. Also, it didn't actually mention any libraries.

Leaven

Are you already working with a javascript library? Right now I'm working on a jQuery UI project and in order to add the gesture capability I use «jQuery UI Touch Punch» which plays very well with iPad & Android. touchpunch.furf.com – Jarrod

I'm pretty stunned by the new sencha framework sencha.com/products/touch It's core is still Ext JS i reckon... – Targum

I think this question is likely to be closed: see Why are “shopping list” questions bad? – Jarrod

Sorry but I disagree. The arguments stated in that meta discussion don't fit here. For a start, I still haven't received an answer! – Leaven

With regards to Touch Punch, I don't see how I could use that to implement a swipe gesture. It would be fine if I had an existing action like drag and drop, which I wanted to work with a tablet, but I want to get swipe working in a situation where there is no existing action. Swipe on an image to get the next image. That kind of thing. – Leaven

Answer 1

I had good luck with this one:

https://github.com/HotStudio/touchy

It has long-press, pinch, rotate, and swipe gestures, and the code is fairly easy to customize.

Note that the combinations of gestures need to be handled-- for example, a swipe will almost always trigger a long touch as well, so you have to set flags or otherwise handle that.

Sprung

Also, if you did not already try it, check out the development branch in the repo there-- it has updates that helped me – Sprung

+1 for an actual answer! I will experiment tonight and let you know how i get on. – Leaven

Yes! Finally! That actually works. Thank you ever so much for pointing me in the right direction. It even works if I switch orientation. – Leaven

Answer 2

Here is a CodePen gesture compare tool. http://jsfiddle.net/icoxfog417/uQBvP/

We abandon Hammer.JS after extensive work and moved to Quo which we are finding ok. Things may have changed and be different now.

  document.head.insertAdjacentHTML( 'beforeEnd', '<meta name="viewport" content="target-densitydpi=device-dpi,width=device-width,initial-scale=1.0" />' );

$(function(){
  //initialization 
  $(".detector").bind("click touchstart",function(e){
    $(".detector").removeClass("selected");
    $(this).addClass("selected");

    unbindLibrary();
    bindLibrary($(this).prop("id"));
  });

  //bind library to gesture pad
  bindLibrary = function(id){
    var $pad = $("#gesture-pad");
    var events = [];
    var eventStr = "";
    $("#" + id + "List li").each(function(){
      events.push($(this).text());
    })
    //make target event list from each library's gestureList
    eventStr = events.join(" ");

    switch(id){
      case "hammer":
        hammer = Hammer($pad.get(0), {
          prevent_default: true
        })
        .on(eventStr, logEvent);
        break;
      case "quojs":
        for(var i = 0;i<events.length;i++){
          $$("#gesture-pad").on(events[i], logEvent);
        }
        $$("#gesture-pad").on("touchstart",function(e){
          e.preventDefault();
        });
        break;
      case "touchSwipe":
        var options = {};
        var touchSwipeHandler = function(name){
          if(name.indexOf("pinch") < 0){
            return function(event, distance, duration, fingerCount){ 
                     var e = {}; e["type"] = name; logEvent(e);        
                   };
          }else{
            return function(e, direction, distance, d, f, pinchZoom){ 
                     var e = {}; e["type"] = name; logEvent(e);        
                   };
          }
        };

        for(var i = 0;i<events.length;i++){
            options[events[i]] = new touchSwipeHandler(events[i]); 
        }
        $pad.swipe(options);
        break;
      case "touchy" :
        var handler = function(name){
            return function(event, phase, $target, data){
                     var e = {}; e["type"] = name; logEvent(e);
                   }
        }
        for(var i = 0;i<events.length;i++){
            $pad.bind(events[i],new handler(events[i]));
        }
        break;      
    }
  }

  //unbind library from gesture pad
  unbindLibrary = function(){
    var element = $("#gesture-pad").clone();
    $("#gesture-pad").replaceWith(element);
    $(".gesturelist .selected").removeClass("selected");
  }

  //log detected gesture
  logEvent = function(e){
    $("#detected").text(e.type);
    var selected = $(".detector.selected").prop("id");
    $("#" + selected + "List li").each(function(){
        if($(this).text() == e.type){
            $(this).addClass("selected");
`enter code here`        };
    })          
    return false;
  }

  $(".detector").first().addClass("selected");
  bindLibrary($(".detector.selected").prop("id"));

})

Sainthood

Answer 3

I know this is an old question, but I tried several libraries and wasn't happy with any of them, so rolled my own. It's MIT licensed and available at

https://github.com/aerik/GestureListener.js

with a test / demo page at

http://aerik.github.io/GestureListener/example.htm

I use it routinely on my Galaxy S4 phone, a couple of Ipads, and several Windows 8 touchscreen devices. We are using it for production software at work.

Bug reports (with examples) welcome.

Paprika