OneDollar.js

Implementation of the $1 Unistroke Recognizer, a two-dimensional template based gesture recognition, in CoffeeScript.

About

The $1 Gesture Recognizer is a research project by Wobbrock, Wilson and Li of the University of Washington and Microsoft Research. It describes a simple algorithm for accurate and fast recognition of drawn gestures.

Gestures can be recognised at any position, scale, and under any rotation. The system requires little training, achieving a 97% recognition rate with only one template for each gesture.

Wobbrock, J.O., Wilson, A.D. and Li, Y. (2007). Gestures without libraries, toolkits or training: A $1 recognizer for user interface prototypes. Proceedings of the ACM Symposium on User Interface Software and Technology (UIST '07). Newport, Rhode Island (October 7-10, 2007). New York: ACM Press, pp. 159-168.

Usage

Vanilla JS

var one = new OneDollar();

one.add('circle', [[50,60], [70,80], /* ... */ [90,10], [20,30]]);
one.add('triangle', [[10,20], [30,40], /* ... */ [50,60], [70,80]]);

one.on('circle triangle', function(result){
  console.log('do this');
});

// OR:
// one.on('*', function(result){
//   console.log('do that');
// });

// OR:
// one.on(function(result){
//   console.log('do that');
// });

one.check([[50,60], [70,80], /* ... */ [90,10], [20,30]]);

// OR:
// one.start(1, [50,60]);
// one.update(1, [70,80]);
// /* ... */
// one.update(1, [90,10]);
// one.end(1, [20,30]);

// OR:
// one.start([50,60]);
// one.update([70,80]);
// /* ... */
// one.update([90,10]);
// one.end([20,30]);

jQuery

$('#js-sketch').onedollar({
//  options: {
//    'score': 80,
//    'parts': 64,
//    'step': 2,
//    'angle': 45,
//    'size': 250
//  },
  templates: {
    'circle': [[50,60], [70,80], /* ... */ [90,10], [20,30]],
    'triangle': [[10,20], [30,40], /* ... */ [50,60], [70,80]]
  },
  on: [
    ['circle triangle', function(results) {
      console.log(results);
    }]
  ]
});

Download

Note: For older versions have a look at the releases.

Installation

Option 1: Download the files manually or clone the repository.

Option 2: The library is available through Bower:

bower install --save onedollar

Option 3: The library is available through NPM:

npm install --save onedollar.js

API

Example:

var one = new OneDollar();
one.add('circle', [[50,60], [70,80], /* ... */ [90,10], [20,30]]);
// ...

Options

Note: All options are optional. For further details read the official paper.

Example:

var options = {
  'score': 80,
  'parts': 64,
  'step': 2,
  'angle': 45,
  'size': 250
};
var one = new OneDollar(options);

Results

Note: Each check and end method will return a result set.

Example:

var results = one.check([[50,60], [70,80], /* ... */ [90,10], [20,30]]);
console.log(results);
// {
//   recognized: true,
//   score: 84.27,
//   name: "circle",
//   path: {
//   	start: Array[2],
//   	end: Array[2],
//   	centroid: Array[2]
//   },
//   ranking: Array
// }