Icontem

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: 7 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>