OneDollar.js

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

Table of Contents

• About
• Usage
• Download
• Installation
• API
• Options
• Results
• Examples
• Questions?
• License

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

Either you can download the files manually or use the package manager Bower:

bower install onedollar#2.0.0

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
// }

Examples

• Vanilla JS
• jQuery Plugin

Questions?

Don't be shy and feel free to contact me via mail or Twitter.

License

The library is Open Source Software released under the license. It's developed by Darius Morawiec.