Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/nok/onedollar-unistroke-coffee
Implementation of the $1 Unistroke Recognizer, a two-dimensional template based gesture recognition, in CoffeeScript.
https://github.com/nok/onedollar-unistroke-coffee
Last synced: about 2 months ago
JSON representation
Implementation of the $1 Unistroke Recognizer, a two-dimensional template based gesture recognition, in CoffeeScript.
- Host: GitHub
- URL: https://github.com/nok/onedollar-unistroke-coffee
- Owner: nok
- License: mit
- Created: 2013-03-22T23:51:45.000Z (over 11 years ago)
- Default Branch: master
- Last Pushed: 2016-08-12T21:58:59.000Z (about 8 years ago)
- Last Synced: 2024-07-22T04:35:57.642Z (2 months ago)
- Language: CoffeeScript
- Homepage:
- Size: 179 KB
- Stars: 60
- Watchers: 5
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.txt
Awesome Lists containing this project
README
# OneDollar.js
[](https://travis-ci.org/nok/onedollar-unistroke-coffee)
[](https://www.npmjs.com/package/OneDollar.js)
[](https://raw.githubusercontent.com/nok/onedollar-unistroke-coffee/master/LICENSE.txt)
Implementation of the [$1 Unistroke Recognizer](http://depts.washington.edu/aimgroup/proj/dollar/), a two-dimensional template based gesture recognition, in CoffeeScript.
## Table of Contents
- [About](#about)
- [Usage](#usage)
- [Download](#download)
- [Installation](#installation)
- [API](#api)
- [Options](#options)
- [Results](#results)
- [Examples](#examples)
- [Questions?](#questions)
- [License](#license)
## About
The [$1 Gesture Recognizer](http://depts.washington.edu/aimgroup/proj/dollar/) 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](http://faculty.washington.edu/wobbrock/pubs/uist-07.01.pdf). 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
```javascript
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
```javascript
$('#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
Variant
File Size
Gzipped
onedollar.js
10.4 kB
2.62 kB
onedollar.min.js
3.89 kB
1.63 kB
jquery.onedollar.js
2.84 kB
884 B
jquery.onedollar.min.js
1.18 kB
588 B
Note: For older versions have a look at the [releases](releases).
## Installation
Option 1: Download the files [manually](lib) or clone the repository.
Option 2: The library is available through [Bower](https://github.com/twitter/bower):
```bash
bower install --save onedollar
```
Option 3: The library is available through [NPM](https://www.npmjs.com/):
```bash
npm install --save onedollar.js
```
## API
Method
Arguments
Return
Description
add
name : String, path : Array
this : OneDollar
Add a new template
one.add('circle', [[50,60], /* ... */ [20,30]]);
remove
name : String
this : OneDollar
Remove added template
one.remove('circle');`
on
name(s) : String, callback : Function
this : OneDollar
Bind callbacks
one.on('circle', function(results) { /* ... */ });
off
name : String
this : OneDollar
Unbind callback
one.off('circle');
check
path : Array
results : Object
Check the path
var results = one.check([[50,60], /* ... */ [20,30]]);
start
[index : Integer], point : Array[2]
this : OneDollar
Start a new candidate
one.start([50,60]);
one.start(1, [50,60]);
update
[index : Integer], point : Array[2]
this : OneDollar
Update a started candidate
one.update([50,60]);
one.update(1, [50,60]);
end
[index : Integer], point : Array[2]
results : Object
End a started candidate
var results = one.end([50,60]);
var results = one.end(1, [50,60]);
Example:
```javascript
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](http://faculty.washington.edu/wobbrock/pubs/uist-07.01.pdf).
Name
Type
Default
Description
Required
options.score
Number (0-100)
80
The similarity threshold to apply the callback(s)
No
options.parts
Number
64
The number of resampling points
No
options.step
Number
2
The degree of one single rotation step
No
options.angle
Number
45
The last degree of rotation
No
options.size
Number
250
The width and height of the scaling bounding box
No
Example:
```javascript
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.
Name
Type
Description
results.recognized
Boolean
Is a template recognized?
results.score
Number
The score value of the best matched template
results.name
String
The name of the best matched template
results.path
Object
↓
results.path.start
Array[2]
The start point of the candidate
results.path.end
Array[2]
The end point of the candidate
results.path.centroid
Array[2]
The centroid of the candidate
results.ranking
Array
A sorted ranking of matched templates
Example:
```javascript
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](examples/vanilla/index.html)
- [jQuery Plugin](examples/jquery/index.html)
## Questions?
Don't be shy and feel free to contact me via mail or [Twitter](https://twitter.com/darius_morawiec).
## License
The library is Open Source Software released under the [license](LICENSE.txt). It's developed by [Darius Morawiec](http://nok.onl).