File: example.html

Recommend this page to a friend!
  Classes of Arturs Sosins  >  Gestures  >  example.html  >  Download  
File: example.html
Role: Example script
Content type: text/plain
Description: Example usage
Class: Gestures
Recognize gestures that form configurable shapes
Author: By
Last change:
Date: 10 years ago
Size: 2,498 bytes
 

Contents

Class file image Download
<!DOCTYPE html> <!-- /************************************************************* * This script is developed by Arturs Sosins aka ar2rsawseen, http://webcodingeasy.com * Feel free to distribute and modify code, but keep reference to its creator * * Gestures class provides a way to define and detect gestures. * You can define your own gestures, by providing array of points, * that defines shape and provide callback function for each shape. * * For more information, examples and online documentation visit: * http://webcodingeasy.com/JS-classes/Javascript-gesture-recognition **************************************************************/ --> <html> <head> </head> <body> <h1 style='text-align: center;'>Try to draw line, square, rectangle, zigzag, triangle, equilateral triangle, check or circle.</h1> <h1 style='text-align: center;' id='result'>Result: </h1> <script type="text/javascript" src="./gestures.packed.js" ></script> <script type="text/javascript"> function callback(name) { document.getElementById("result").innerHTML = "Result: " + name; } var gest = new gestures({ debug: true, draw: true, drawColor: "#000000", drawWidth: 5, autoTrack: true, allowRotation: true, inverseShape: true, points: 33 }); gest.addGesture("Line", [ {x: 0, y: 0}, {x: 0, y: 100} ], callback); gest.addGesture("Square", [ {x: 0, y: 0}, {x: 200, y: 0}, {x: 200, y: 200}, {x: 0, y: 200}, {x: 0, y: 0} ], callback); gest.addGesture("Rectangle", [ {x: 0, y: 0}, {x: 210, y: 0}, {x: 210, y: 100}, {x: 0, y: 100}, {x: 0, y: 0} ], callback); gest.addGesture("ZigZag", [ {x: 0, y: 0}, {x: 50, y: 87}, {x: 100, y: 0}, {x: 150, y: 87} ], callback); gest.addGesture("Triangle", [ {x: 0, y: 0}, {x: 100, y: 100}, {x: 0, y: 100}, {x: 0, y: 0} ], callback); gest.addGesture("Equilateral Triangle", [ {x: 0, y: 0}, {x: 50, y: 87}, {x: 100, y: 0}, {x: 0, y: 0} ], callback); gest.addGesture("Check", [ {x: 0, y: 0}, {x: 50, y: 50}, {x: 100, y: 0}, ], callback); var x = 0; var y = -100; var circle = []; var totalPoints = 72; var step = (Math.PI*2)/totalPoints; for(var angle = 1; angle < totalPoints; angle++) { var newX = x*Math.cos(angle*step)-y*Math.sin(angle*step); var newY = y*Math.cos(angle*step)+x*Math.sin(angle*step); var point = {x: newX, y: newY}; circle.push(point); } gest.addGesture("Circle", circle, callback) </script> </body> </html>