Recommended:

  • phpclasses.org
  • jsclasses.org
  • jsmag.com
  • siteapps.com
  • View our reviews on Hot Scripts
  • JS Tutorial
  • scripts.com
  • securesignup.com




Recent Comments

Powered by Disqus




Back to articles

Javascript gesture recognition

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.

It is also possible to detect gestures from provided array of points.

Additionally this class can automatically track touch inputs to gather collection of points and resolve it automatically, and automatically output what user draws in real time.

Package contains gestures.js, gestures.packed.js and example file.

Contents

Download

Example codes

function callback(name)
{
	document.getElementById('result').innerHTML = 'Result: ' + name;
}

var gest = new gestures({
	debug: true,
	draw: true,
	drawColor: 'ff0000',
	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);

Examples in action

Example scripts provided with package in action:

Example video

Video of class example app:

Method list

Constructor

Back to method list

Method namenew gestures(config)
DescriptionCreate Gestures instance with provided configuration
Input parameters

json config - json with configuration options:

  • bool draw - display user drawing input (default: true)
  • string drawColor - color of drawing line (default: '#ff0000')
  • int drawWidth - width of color line (default: 5)
  • bool autoTrack - automatically track user input and resolve Gestures (default: 'true')
  • bool allowRotation - allow rotating provided point, meaning if you define square, with allowRotation, it doesn't matter from which side of square you start drawing, if allowRotation is disabled, then square will be detected when drawn only from the side you defined first. You may want to disable auto rotation, when using gestures as line up and line down, because of rotation, they will be the same gestures (default: true)
  • bool inverseShape - Inverse shape's points, meaning it allows to draw, for example, square in both clock-wise and counter clock-wise directions. You may want to disable inversing, when using gestures as line up and line down, because of inversion, they will be the same gestures (default: false)
  • int point - to how many points to reduce input, 33 is pretty optimal value (default: 33)

Pause auto tracking

Back to method list

Method namepauseTracking()
DescriptionDisable autotracking for now

Resume auto tracking

Back to method list

Method nameresumeTracking()
DescriptionEnable autotrackingn, works only if autotracking is enabled in configuration

Clear drawing

Back to method list

Method nameclear()
DescriptionClear what user drew

Add gesture

Back to method list

Method nameaddGesture(name, points, callback)
DescriptionAdd new gesture that can be recognized
Input parameters

string name - name of the gesture for identification

array point - array of points, where each element is object with x and y properties

function callback - function to call, when this gesture is detected. Callback function can accept gesture name as function argument

Reset input

Back to method list

Method namereset()
DescriptionDelete current input points from auto tracking

Resolve gesture

Back to method list

Method nameresolve(points)
DescriptionResolve gesture from provided collection of points (useful, when auto tracking is disabled)
Input parameters

array points - array of points, where each element is object with x and y properties

Latest changes

None for now

You may also be interested in:

Powered by BlogAlike.com

blog comments powered by Disqus