Saturday, 5 December 2020

How to Swipes and pans in PhoneGap?

 In our previous sections of gesture, we learned about the hammer library, tap, touch, and how we can detect the gesture in PhoneGap. In this section, we will learn about the swipes and pans gestures. We will take a closer look at how these gestures work. We will use our previous example and make some changes in it for tap and touch gestures. These are the following steps used to develop the tap and touch gesture application:

1) Create index2.html

We will create a new file index3.html with the same code as preset in the index.html. We will make changes later in the index3.html file, not in index.html.

Swipes and pans in PhoneGap
Swipes and pans in PhoneGap

2) Getting the gesture div

Now, we will get the gesture div by using the id and create the hammer object. We will get the gesture element and create the hammer object in the body section by using the <script></script> tags. This will work in the same way as the window.onload function.

  1. <body>  
  2.         <div id="gestureDiv"></div>  
  3.         <div id="resultDiv"></div>  
  4.         <script type="text/javascript" src="cordova.js"></script>  
  5.         <script>  
  6.                 var myElement = document.getElementById('gestureDiv');  
  7.                 var mc = new Hammer(myElement);  
  8.         </script>  
  9. </body>  

3) Figure out the type of event

When we swipe left or swipe right the screen, the anonymous function will be called. This function will return the event and then we will store the event type into a variable. After that, we will set this variable to our result div in the following way:

  1. var out = ev.type + "<br/>";  
  2. document.getElementById('resultDiv').innerHTML = out;  


Swipes and pans in PhoneGap

4) More information

We have a lot of information rather than just the type of gesture. We can add the distance moved in the gesture in the following way:

  1. out += "Distance: " + ev.distance + "<br/>";  


Swipes and pans in PhoneGap

We can also get the angle of the swipe. The line of code that is mentioned below tells us at what angle the swipe occurred.

  1. out += "Angle: " + ev.angle + "<br/>";  


Swipes and pans in PhoneGap

We can also get the delta x and delta y. Delta x and delta y are the distance moved along the x-axis and y-axis respectively.

  1. out += "DeltaX: " + ev.deltaX + "<br/>";  
  2. out += "DeltaY: " + ev.deltaY + "<br/>";  


Swipes and pans in PhoneGap

Complete Code

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <meta charset = "utf-8" >  
  5.         <meta name = "viewport" content = "initial-scale = 1, maximum-scale = 1, user-scalable = no, width = device-width" >  
  6.         <script src = "hammer.js" ></script>  
  7.         <script src = "hammertime.js" ></script>  
  8.         <style>  
  9.         #gestureDiv  
  10.             {  
  11.                 width : 300px;  
  12.                 height : 400px;  
  13.                 background-color : red;  
  14.                 border : 1px solid black;  
  15.             }  
  16.         </style>  
  17.         <title> Gesture Example </title>  
  18.     </head>  
  19.     <body>  
  20.         <div id = "gestureDiv" ></div>  
  21.         <div id = "resultDiv" ></div>  
  22.         <script type = "text/javascript" src = "cordova.js" ></script>  
  23.         <script>  
  24.           var myElement = document.getElementById('gestureDiv');  
  25.                 var mc = new Hammer(myElement);  
  26.                 mc.on("swipeleft swiperight", function(ev) {  
  27.             var out = ev.type + "<br/>";  
  28.                     out += "Distance: " + ev.distance + "<br/>";  
  29.             out += "DeltaX: " + ev.deltaX + "<br/>";  
  30.             out += "DeltaY: " + ev.deltaY + "<br/>";                
  31.             document.getElementById('resultDiv').innerHTML = out;  
  32.             });   
  33.         </script>  
  34.     </body>  
  35. </html>  


Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)