Taking Gear 2 Gestures to the next level! – tap, swipe, pinch zoom using Hammer.js

DSC_0006

Hammer.js is AWESOME. Basically its a javascript library specifically for detecting multitouch gestures. It enables you detect Detects Tap, DoubleTap, Swipe, Drag, Pinch, and Rotate gestures! And the more gestures we can implement for our limited wearable devices (smartwatches in this case), the better! In the previous tutorial we used Jquery Mobile and additional javascript code to detect a couple of gestures (swipe and double tap), all totalling up to ~67KB  . Hammer.js is just 14KB – and it arguably gets more done! . So if you don’t need all the other functions jQuery mobile brings, you may be better of using the lighter Hammer.js . And the good guys who created Hammer.js have suggested we listen to this sound loop while working on this tutorial . I agree. Hammer Style!

Get the Code Running …

You can consult the previous gesture tutorial on how to create a new project and include js files in your html. Here, you will need to download hammer.js and  include it  (and jQuery.js) in your index.html file. Also add an id attribute to your content div. Your index.html file should look like this.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="A single-page template generated by Tizen Wearable Web IDE"/>

    <title>Tizen Wearable Web IDE - Tizen Wearable - jQuery</title>
    <script type="text/javascript" src="js/jquery-1.9.1.js"></script>
     <script type="text/javascript" src="js/hammer.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <div class=contents id="content">
  	<div style='margin:auto;'>
  		<span class=content_text id=textbox>Swipe Me!</span>
  	</div>
  </div>
</body>
</html>

Next we add some code to detect gestures in main.js

// Gear 2 Swipe Gesture Tutorial
// ----------------------------------
//
// Copyright (c)2014 Dibia Victor, Denvycom
// Distributed under MIT license
//
// https://github.com/chuvidi2003/GearSwipeTutorial
$(window).load(function(){

	//This listens for the back button press
	document.addEventListener('tizenhwkey', function(e) {
        if(e.keyName == "back")
            tizen.application.getCurrentApplication().exit();
    });

	var element = document.getElementById('content');

	// Tap Gesture Enable
    var hammertime = Hammer(element, {
    	  tapHighlightColor: "rgba(5,0,0,0.9)" ,
    		  showTouches: true
    }).on("tap", function(event) {
    	$('#textbox').html("Tap");
    }); 

    // Hold Gesture Enable
    var hammertime = Hammer(element).on("hold", function(event) {
    	$('#textbox').html("Hold");
    });

    // Rotate Gesture Enable
    var hammertime = Hammer(element).on("rotate", function(event) {
    	$('#textbox').html("Rotate");
    });

    // Swipe  Gesture
    var hammertime = Hammer(element).on("swipeup", function(event) {
    	$('#textbox').html("Swipe up");
    });
    var hammertime = Hammer(element).on("swipedown", function(event) {
    	$('#textbox').html("Swipe down");
    });
    var hammertime = Hammer(element).on("swipeleft", function(event) {
    	$('#textbox').html("Swipe left");
    });
    var hammertime = Hammer(element).on("swiperight", function(event) {
    	$('#textbox').html("Swipe right");
    });

    // Pinc gesture
    var hammertime = Hammer(element).on("pinchin", function(event) {
    	$('#textbox').html("Pinch In");
    });
    var hammertime = Hammer(element).on("pinchout", function(event) {
    	$('#textbox').html("Pinch Out");
    });

});

 A note about Gestures

From my tests, some gestures appear to overlap. E.g the pinch gesture may fire off a swipedown gesture when its being completed.  A rotate gesture may also not fire off when a pinch is being listened for etc. Make effort to test your gestures properly before implementing them, so you dont end up with frustrated/unhappy/stumped users.

Gimme That Code!

As usual .. its all up on Github .

Next Steps

Now that you know the available interaction options based on touch input, its about time we get a little rad with contactless input – using the accelerometer ? Its great for games.

About Vykthur

Mobile and Web App Developer and Researcher. Passionate about learning, teaching, and recently - writing.
This entry was posted in Tutorials, Wearables and tagged , . Bookmark the permalink.
  • Tal Yerushalmi

    Essentially i could refer any type of screen input for various game function … like pausing or different type of player action depending on the type of screen input using hammer ?

    • Vykthur

      Hi Tal,

      Yes, you can use ANY of the Hammer interactions (pinch, rotate, doubletap, swipte etc) as controls in your game. E.g you can pause the game each time the player pinches the screen.

      However, you must realize that some of the interactions overlap like I mentioned … so if you are using a pinch, try not to also listen for a swipe up or down at the same time ….

      Finally, you must also let your users know what interaction you expect them to use … find a clever way to let them know.

      -V.

  • jtangelder

    Nice article! I was wondering if you also have seen a new version of Hammer is in the making, you can find it at the /2.0x branch at GitHub. It would be cool if you could take it for a test!

    https://github.com/EightMedia/hammer.js/tree/2.0.x

    • Vykthur

      Thanks alot Jorik for the work you do.I will take version 2.0 for a spin soon and share my experience! Once again, many thanks for sharing Hammer.js with us!

      -Vykthur.

  • Andy O’Sullivan

    Nice articles bro, thanks

    • Vykthur

      Glad you found it useful. Thanks.