Cookies setting
1

Touch The Web: Hammer multitouch

What else than a Hammer, the most useful tool in the world, would be the best solution for multi touch on the web. The library hammer.js actually takes the name from the notorious rapper Mc Hammer, spoofing on his famous song “You can't touch this”, but I prefer my interpretation.

This is not the first tutorial for this library, but since I’ve been using it, they released a new version with a lot of changes, which makes this the only tutorial that works with it right now. My goal with this article is to help a total newbie learn the basics of hammer.js and can start right away working on something serious with it.



Lets start with some useful links: hammer homepage with examples, hammer git page and documentation, Applines hammer.js tutorial. The first 3 are self explanatory and can be found through their home page, all tho the documentation page (for now) isn’t very helpful, which is part of the reason for this article. The source code itself is very well commented and you can learn a lot about the plugin from it. The last link is a proper tutorial on the subject (the only one). This  was the second reason I started this, because the tutorial seems awesome at a first look, but it actually isn’t. It doesn't’ explain in much detail what the code does and the code itself it's full of unnecessary stuff and way too complicated solutions for a beginner. Ultimately the example doesn't do all you would expect it to do. Like when you try to rotate the picture again it resets it to a leveled position, not to even mention doing stuff to multiple objects at the same time. My example for this  tutorial I’ll be a simplified version with proper rotation. The hammer.js plugin is compatible with plain JavaScript, jQuery or other libraries. I chose jQuery.

Here is the example. You can move, rotate and scale the objects (there are only 2, but it the function can be called for n). The article covers just the basics. In the following paragraphs I’ll explain some parts and basic concept that I find crucial to understanding the subject. The example's code itself it’s the main part of the tutorial, I’ve commented all the important lines so it shoud be very easy to understand. After reading the tutorial and the code, I once again strongly advise to go study the hammer.js code itself.

First thing first, the basics of a touch event or gesture. It has 6 stages that you can write functions for: event starts, even continues happening, event ends, event cancel, event leave, event enter (google it for more info). Most manipulations can be implemented by just using the first 2. In the example this are ‘dragstart’, ‘drag’ for moving the objects. The names are predefined by hammer.js unless you add your own events to it, which is one of the new features. The function’s variable (e in the example) holds all the information on the touch events or gestures. Just call console.log(e) and experiment (if your mobile device has a debugger). The different properties are called event.gesture.propertie_name. A list of them with a short explanation is available here.


In order for your hammer to work, you need to declare a hammer instance. It is by the authors to do that directly on the document.body, so you can bind gestures on all the objects on your page. In the example I do this for every object separately:  

    var co = $(con).hammer({
       prevent_default: true,
       drag: true,
       transform: true,
       touch: true,
       drag_min_distance: 0,
       transform_min_rotation: 0,
       transform_min_scale: 0
    });

The various parameters are all explained here. I advise to go try and experiment with them to see what suits your needs.

Moving the object or dragging in hammer.js must be basically written from scratch. The logic behind it is very simple. You get the touch X and Y coordinates on the div and you need to get the divs new top and left properties from it. This means getting the initial top and left and the initial touch coordinates in te ‘dragstar’ function. The ‘drag’ function gets the new position it adds it to the old one and updates its css property.

Scaling and rotating is done at the same time through the transform CSS3 property. This needs the scaleX, scaleX and rotateZ parameters and the origin of the transformation. Here is important to add the previous angle to the existing if a previous rotation occurred. That must be placed in the ‘transformend’ function that gets called at the end of each transformation. Because the actual object's div expands when rotated it's very important to have a container wrapped around it for everything to work properly.

This covers all the basics of the example. The keen eyed probably noticed, that I’ve mentioned manipulating with multiple objects at the same time and I didn't implement it in this example. The reasons for that are 2: I wanted it to be as simple as possible so it’s easy to understand and because I’ll address this in the next and final chapter of this series.

01 Jun 2013 at 14:50


Claudio
16 Sep 2013 at 21:41

Hi,

I appreciate your tutorial. Thanks. It would be nice to have a non-jQuery example with src code. Also, you link to Hammer.js site for an explanation of the parameters, but that site really doesn’t explain much, let alone the parameters. It would be very helpful if you could actually explain what they do exactly, so there is no question – that is if you do know that.

Thank you again. Much appreciated.



(required)

(required)