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.
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 video
Video of class example app:
Method list
- Constructor
- Pause auto tracking
- Resume auto tracking
- Clear drawing
- Add gesture
- Reset input
- Resolve gesture
Constructor
| Method name | new gestures(config) |
| Description | Create Gestures instance with provided configuration |
| Input parameters | json config - json with configuration options:
|
Pause auto tracking
| Method name | pauseTracking() |
| Description | Disable autotracking for now |
Resume auto tracking
| Method name | resumeTracking() |
| Description | Enable autotrackingn, works only if autotracking is enabled in configuration |
Clear drawing
| Method name | clear() |
| Description | Clear what user drew |
Add gesture
| Method name | addGesture(name, points, callback) |
| Description | Add 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
| Method name | reset() |
| Description | Delete current input points from auto tracking |
Resolve gesture
| Method name | resolve(points) |
| Description | Resolve 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
