Detecting Gesture

The gesture technology allows us to interact with the device without touching the screen. The PhoneGap doesn’t support the gestures naturally. For this purpose, we will use the Hammer min and time JavaScript library because it is one of the most important part for creating a mobile application. There are two problems, i.e., JavaScript is built for a browser. The hammer gives us the gestures, and the hammer time gives us the actual library. Now, we will install these libraries. We will use the following steps to set up and add hammer library in our application:

1) Create a new project

Firstly, we will create a new PhoneGap project with a blank template. If you don’t know how to create an app with a blank template, go through the PhoneGap project link.

2) Download hammer.js file

Now, we will go to the http://hammerjs.github.io/ link and click on the Hammer.min.js option. This click will open the code of the hammer.min.js file. We will copy the complete code and paste it in our suitable editor. After that, we will save it in the www folder of our application with the name hammer.js.

3) Download hammer-time.js file

Now, we will copy the content of the hammer-time.js file from the http://hammerjs.github.io/dist/hammer-time.min.js link. We will paste it and save it with the name of hammertime with JavaScript extension. We will also save it in the www folder of our application.

4) Adding hammer and hammer-time in our index.html file

Now, we will add both the libraries in our index.html file. We will use the <script></script> tag and use the src property of it to add these two libraries in the file. We will use the <script></script> tag in the following way:

  <script src= “hammer.js” ></script>  <script src= “hammertime.js” ></script>  

5) Creating UI

Now, we will create a user Interface for the gesture. We will create two <div></dvi> tags, i.e., one for gesture and one for result. After that, we will add the script in the body section. This will play the same role as the window.onload function works. In this script, we will get the element on which we perform the gesture and create a new hammer just below the element.

Now, we will make a statement to get the result and show result. The complete body section will be coded in the following way:

  <body>          <div id = “gestureDiv” ></div>          <div id = “resultDiv” ></div>          <script type=”text/javascript” src=”cordova.js”></script>          <script>            var myElement = document.getElementById(‘gestureDiv’);                  var mc = new Hammer(myElement);                  mc.on(“panleft panright tap press”, function(ev) {                      document.getElementById(‘resultDiv’).innerHTML = ev.type + ” gesture detected.”;                  });          </script>  </body>  

6) Change the style of gestureDiv

Now, we will change the style of the gestureDiv by using <style></style> tag. We will set the width to 300 pixels, height to 400 pixels, background color to red, and border to 1-pixel solid black. We will also add a title for our application also.

  <style>          #gestureDiv              {                  width: 300px;                  height: 400px;                  background-color: red;                  border: 1px solid black;              }  </style>  

Now, we are ready to run our project in our PhoneGap Developer App.

Complete Code

  <!DOCTYPE html>  <html>      <head>          <meta charset=”utf-8″>          <meta name=”viewport” content=”initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width”>          <script src= “hammer.js” ></script>          <script src= “hammertime.js” ></script>          <style>          #gestureDiv              {                  width: 300px;                  height: 400px;                  background-color: red;                  border: 1px solid black;              }          </style>          <title> Gesture Example </title>      </head>      <body>          <div id= “gestureDiv” ></div>          <div id= “resultDiv” ></div>          <script type=”text/javascript” src=”cordova.js”></script>          <script>            var myElement = document.getElementById(‘gestureDiv’);                  var mc = new Hammer(myElement);                  mc.on(“panleft panright tap press”, function(ev) {                      document.getElementById(‘resultDiv’).innerHTML = ev.type + ” gesture detected.”;                  });          </script>      </body>  </html>  

Output

Next TopicSwipes & pans

PhoneGap Detecting Gesture