aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--src/Utils.ts3
-rw-r--r--src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx13
-rw-r--r--src/ndollar.ts148
3 files changed, 93 insertions, 71 deletions
diff --git a/src/Utils.ts b/src/Utils.ts
index 37b509370..dc62d96e0 100644
--- a/src/Utils.ts
+++ b/src/Utils.ts
@@ -3,9 +3,12 @@ import v5 = require("uuid/v5");
import { Socket } from 'socket.io';
import { Message } from './server/Message';
import { RouteStore } from './server/RouteStore';
+import { NDollarRecognizer } from './ndollar';
export namespace Utils {
+ export const GestureRecognizer = new NDollarRecognizer(false);
+
export const DRAG_THRESHOLD = 4;
export function GenerateGuid(): string {
diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
index 7267e94be..dcda13b00 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormView.tsx
@@ -337,9 +337,16 @@ export class CollectionFreeFormView extends CollectionSubView(PanZoomDocument) {
if (this._points.length > 1) {
let B = this.svgBounds;
let points = this._points.map(p => ({ x: p.x - B.left, y: p.y - B.top }));
- let inkDoc = Docs.Create.InkDocument(InkingControl.Instance.selectedColor, InkingControl.Instance.selectedTool, parseInt(InkingControl.Instance.selectedWidth), points, { width: B.width, height: B.height, x: B.left, y: B.top });
- this.addDocument(inkDoc);
- this._points = [];
+
+ let result = Utils.GestureRecognizer.Recognize(new Array(points));
+ if (result) {
+ console.log(result.Name);
+ }
+ else {
+ let inkDoc = Docs.Create.InkDocument(InkingControl.Instance.selectedColor, InkingControl.Instance.selectedTool, parseInt(InkingControl.Instance.selectedWidth), points, { width: B.width, height: B.height, x: B.left, y: B.top });
+ this.addDocument(inkDoc);
+ this._points = [];
+ }
}
document.removeEventListener("pointermove", this.onPointerMove);
diff --git a/src/ndollar.ts b/src/ndollar.ts
index 2d3903cc3..6d7b8c5d9 100644
--- a/src/ndollar.ts
+++ b/src/ndollar.ts
@@ -130,6 +130,10 @@ export class Multistroke {
}
}
+export enum Gestures {
+ Box = "box"
+}
+
//
// Result class
//
@@ -140,7 +144,7 @@ export class Result {
//
// NDollarRecognizer constants
//
-const NumMultistrokes = 16;
+const NumMultistrokes = 1;
const NumPoints = 96;
const SquareSize = 250.0;
const OneDThreshold = 0.25; // customize to desired gesture set (usually 0.20 - 0.35)
@@ -165,78 +169,86 @@ export class NDollarRecognizer {
// one predefined multistroke for each multistroke type
//
this.Multistrokes = new Array(NumMultistrokes);
- this.Multistrokes[0] = new Multistroke("T", useBoundedRotationInvariance, new Array(
- new Array(new Point(30, 7), new Point(103, 7)),
- new Array(new Point(66, 7), new Point(66, 87))
- ));
- this.Multistrokes[1] = new Multistroke("N", useBoundedRotationInvariance, new Array(
- new Array(new Point(177, 92), new Point(177, 2)),
- new Array(new Point(182, 1), new Point(246, 95)),
- new Array(new Point(247, 87), new Point(247, 1))
- ));
- this.Multistrokes[2] = new Multistroke("D", useBoundedRotationInvariance, new Array(
- new Array(new Point(345, 9), new Point(345, 87)),
- new Array(new Point(351, 8), new Point(363, 8), new Point(372, 9), new Point(380, 11), new Point(386, 14), new Point(391, 17), new Point(394, 22), new Point(397, 28), new Point(399, 34), new Point(400, 42), new Point(400, 50), new Point(400, 56), new Point(399, 61), new Point(397, 66), new Point(394, 70), new Point(391, 74), new Point(386, 78), new Point(382, 81), new Point(377, 83), new Point(372, 85), new Point(367, 87), new Point(360, 87), new Point(355, 88), new Point(349, 87))
- ));
- this.Multistrokes[3] = new Multistroke("P", useBoundedRotationInvariance, new Array(
- new Array(new Point(507, 8), new Point(507, 87)),
- new Array(new Point(513, 7), new Point(528, 7), new Point(537, 8), new Point(544, 10), new Point(550, 12), new Point(555, 15), new Point(558, 18), new Point(560, 22), new Point(561, 27), new Point(562, 33), new Point(561, 37), new Point(559, 42), new Point(556, 45), new Point(550, 48), new Point(544, 51), new Point(538, 53), new Point(532, 54), new Point(525, 55), new Point(519, 55), new Point(513, 55), new Point(510, 55))
- ));
- this.Multistrokes[4] = new Multistroke("X", useBoundedRotationInvariance, new Array(
- new Array(new Point(30, 146), new Point(106, 222)),
- new Array(new Point(30, 225), new Point(106, 146))
- ));
- this.Multistrokes[5] = new Multistroke("H", useBoundedRotationInvariance, new Array(
- new Array(new Point(188, 137), new Point(188, 225)),
- new Array(new Point(188, 180), new Point(241, 180)),
- new Array(new Point(241, 137), new Point(241, 225))
- ));
- this.Multistrokes[6] = new Multistroke("I", useBoundedRotationInvariance, new Array(
- new Array(new Point(371, 149), new Point(371, 221)),
- new Array(new Point(341, 149), new Point(401, 149)),
- new Array(new Point(341, 221), new Point(401, 221))
- ));
- this.Multistrokes[7] = new Multistroke("exclamation", useBoundedRotationInvariance, new Array(
- new Array(new Point(526, 142), new Point(526, 204)),
- new Array(new Point(526, 221))
- ));
- this.Multistrokes[8] = new Multistroke("line", useBoundedRotationInvariance, new Array(
- new Array(new Point(12, 347), new Point(119, 347))
- ));
- this.Multistrokes[9] = new Multistroke("five-point star", useBoundedRotationInvariance, new Array(
- new Array(new Point(177, 396), new Point(223, 299), new Point(262, 396), new Point(168, 332), new Point(278, 332), new Point(184, 397))
- ));
- this.Multistrokes[10] = new Multistroke("null", useBoundedRotationInvariance, new Array(
- new Array(new Point(382, 310), new Point(377, 308), new Point(373, 307), new Point(366, 307), new Point(360, 310), new Point(356, 313), new Point(353, 316), new Point(349, 321), new Point(347, 326), new Point(344, 331), new Point(342, 337), new Point(341, 343), new Point(341, 350), new Point(341, 358), new Point(342, 362), new Point(344, 366), new Point(347, 370), new Point(351, 374), new Point(356, 379), new Point(361, 382), new Point(368, 385), new Point(374, 387), new Point(381, 387), new Point(390, 387), new Point(397, 385), new Point(404, 382), new Point(408, 378), new Point(412, 373), new Point(416, 367), new Point(418, 361), new Point(419, 353), new Point(418, 346), new Point(417, 341), new Point(416, 336), new Point(413, 331), new Point(410, 326), new Point(404, 320), new Point(400, 317), new Point(393, 313), new Point(392, 312)),
- new Array(new Point(418, 309), new Point(337, 390))
- ));
- this.Multistrokes[11] = new Multistroke("arrowhead", useBoundedRotationInvariance, new Array(
- new Array(new Point(506, 349), new Point(574, 349)),
- new Array(new Point(525, 306), new Point(584, 349), new Point(525, 388))
- ));
- this.Multistrokes[12] = new Multistroke("pitchfork", useBoundedRotationInvariance, new Array(
- new Array(new Point(38, 470), new Point(36, 476), new Point(36, 482), new Point(37, 489), new Point(39, 496), new Point(42, 500), new Point(46, 503), new Point(50, 507), new Point(56, 509), new Point(63, 509), new Point(70, 508), new Point(75, 506), new Point(79, 503), new Point(82, 499), new Point(85, 493), new Point(87, 487), new Point(88, 480), new Point(88, 474), new Point(87, 468)),
- new Array(new Point(62, 464), new Point(62, 571))
- ));
- this.Multistrokes[13] = new Multistroke("six-point star", useBoundedRotationInvariance, new Array(
- new Array(new Point(177, 554), new Point(223, 476), new Point(268, 554), new Point(183, 554)),
- new Array(new Point(177, 490), new Point(223, 568), new Point(268, 490), new Point(183, 490))
- ));
- this.Multistrokes[14] = new Multistroke("asterisk", useBoundedRotationInvariance, new Array(
- new Array(new Point(325, 499), new Point(417, 557)),
- new Array(new Point(417, 499), new Point(325, 557)),
- new Array(new Point(371, 486), new Point(371, 571))
- ));
- this.Multistrokes[15] = new Multistroke("half-note", useBoundedRotationInvariance, new Array(
- new Array(new Point(546, 465), new Point(546, 531)),
- new Array(new Point(540, 530), new Point(536, 529), new Point(533, 528), new Point(529, 529), new Point(524, 530), new Point(520, 532), new Point(515, 535), new Point(511, 539), new Point(508, 545), new Point(506, 548), new Point(506, 554), new Point(509, 558), new Point(512, 561), new Point(517, 564), new Point(521, 564), new Point(527, 563), new Point(531, 560), new Point(535, 557), new Point(538, 553), new Point(542, 548), new Point(544, 544), new Point(546, 540), new Point(546, 536))
+ this.Multistrokes[0] = new Multistroke(Gestures.Box, useBoundedRotationInvariance, new Array(
+ new Array(new Point(30, 146), new Point(30, 222), new Point(106, 225), new Point(106, 146))
));
+
+ //
+ // PREDEFINED STROKES
+ //
+
+ // this.Multistrokes[0] = new Multistroke("T", useBoundedRotationInvariance, new Array(
+ // new Array(new Point(30, 7), new Point(103, 7)),
+ // new Array(new Point(66, 7), new Point(66, 87))
+ // ));
+ // this.Multistrokes[1] = new Multistroke("N", useBoundedRotationInvariance, new Array(
+ // new Array(new Point(177, 92), new Point(177, 2)),
+ // new Array(new Point(182, 1), new Point(246, 95)),
+ // new Array(new Point(247, 87), new Point(247, 1))
+ // ));
+ // this.Multistrokes[2] = new Multistroke("D", useBoundedRotationInvariance, new Array(
+ // new Array(new Point(345, 9), new Point(345, 87)),
+ // new Array(new Point(351, 8), new Point(363, 8), new Point(372, 9), new Point(380, 11), new Point(386, 14), new Point(391, 17), new Point(394, 22), new Point(397, 28), new Point(399, 34), new Point(400, 42), new Point(400, 50), new Point(400, 56), new Point(399, 61), new Point(397, 66), new Point(394, 70), new Point(391, 74), new Point(386, 78), new Point(382, 81), new Point(377, 83), new Point(372, 85), new Point(367, 87), new Point(360, 87), new Point(355, 88), new Point(349, 87))
+ // ));
+ // this.Multistrokes[3] = new Multistroke("P", useBoundedRotationInvariance, new Array(
+ // new Array(new Point(507, 8), new Point(507, 87)),
+ // new Array(new Point(513, 7), new Point(528, 7), new Point(537, 8), new Point(544, 10), new Point(550, 12), new Point(555, 15), new Point(558, 18), new Point(560, 22), new Point(561, 27), new Point(562, 33), new Point(561, 37), new Point(559, 42), new Point(556, 45), new Point(550, 48), new Point(544, 51), new Point(538, 53), new Point(532, 54), new Point(525, 55), new Point(519, 55), new Point(513, 55), new Point(510, 55))
+ // ));
+ // this.Multistrokes[4] = new Multistroke("X", useBoundedRotationInvariance, new Array(
+ // new Array(new Point(30, 146), new Point(106, 222)),
+ // new Array(new Point(30, 225), new Point(106, 146))
+ // ));
+ // this.Multistrokes[5] = new Multistroke("H", useBoundedRotationInvariance, new Array(
+ // new Array(new Point(188, 137), new Point(188, 225)),
+ // new Array(new Point(188, 180), new Point(241, 180)),
+ // new Array(new Point(241, 137), new Point(241, 225))
+ // ));
+ // this.Multistrokes[6] = new Multistroke("I", useBoundedRotationInvariance, new Array(
+ // new Array(new Point(371, 149), new Point(371, 221)),
+ // new Array(new Point(341, 149), new Point(401, 149)),
+ // new Array(new Point(341, 221), new Point(401, 221))
+ // ));
+ // this.Multistrokes[7] = new Multistroke("exclamation", useBoundedRotationInvariance, new Array(
+ // new Array(new Point(526, 142), new Point(526, 204)),
+ // new Array(new Point(526, 221))
+ // ));
+ // this.Multistrokes[8] = new Multistroke("line", useBoundedRotationInvariance, new Array(
+ // new Array(new Point(12, 347), new Point(119, 347))
+ // ));
+ // this.Multistrokes[9] = new Multistroke("five-point star", useBoundedRotationInvariance, new Array(
+ // new Array(new Point(177, 396), new Point(223, 299), new Point(262, 396), new Point(168, 332), new Point(278, 332), new Point(184, 397))
+ // ));
+ // this.Multistrokes[10] = new Multistroke("null", useBoundedRotationInvariance, new Array(
+ // new Array(new Point(382, 310), new Point(377, 308), new Point(373, 307), new Point(366, 307), new Point(360, 310), new Point(356, 313), new Point(353, 316), new Point(349, 321), new Point(347, 326), new Point(344, 331), new Point(342, 337), new Point(341, 343), new Point(341, 350), new Point(341, 358), new Point(342, 362), new Point(344, 366), new Point(347, 370), new Point(351, 374), new Point(356, 379), new Point(361, 382), new Point(368, 385), new Point(374, 387), new Point(381, 387), new Point(390, 387), new Point(397, 385), new Point(404, 382), new Point(408, 378), new Point(412, 373), new Point(416, 367), new Point(418, 361), new Point(419, 353), new Point(418, 346), new Point(417, 341), new Point(416, 336), new Point(413, 331), new Point(410, 326), new Point(404, 320), new Point(400, 317), new Point(393, 313), new Point(392, 312)),
+ // new Array(new Point(418, 309), new Point(337, 390))
+ // ));
+ // this.Multistrokes[11] = new Multistroke("arrowhead", useBoundedRotationInvariance, new Array(
+ // new Array(new Point(506, 349), new Point(574, 349)),
+ // new Array(new Point(525, 306), new Point(584, 349), new Point(525, 388))
+ // ));
+ // this.Multistrokes[12] = new Multistroke("pitchfork", useBoundedRotationInvariance, new Array(
+ // new Array(new Point(38, 470), new Point(36, 476), new Point(36, 482), new Point(37, 489), new Point(39, 496), new Point(42, 500), new Point(46, 503), new Point(50, 507), new Point(56, 509), new Point(63, 509), new Point(70, 508), new Point(75, 506), new Point(79, 503), new Point(82, 499), new Point(85, 493), new Point(87, 487), new Point(88, 480), new Point(88, 474), new Point(87, 468)),
+ // new Array(new Point(62, 464), new Point(62, 571))
+ // ));
+ // this.Multistrokes[13] = new Multistroke("six-point star", useBoundedRotationInvariance, new Array(
+ // new Array(new Point(177, 554), new Point(223, 476), new Point(268, 554), new Point(183, 554)),
+ // new Array(new Point(177, 490), new Point(223, 568), new Point(268, 490), new Point(183, 490))
+ // ));
+ // this.Multistrokes[14] = new Multistroke("asterisk", useBoundedRotationInvariance, new Array(
+ // new Array(new Point(325, 499), new Point(417, 557)),
+ // new Array(new Point(417, 499), new Point(325, 557)),
+ // new Array(new Point(371, 486), new Point(371, 571))
+ // ));
+ // this.Multistrokes[15] = new Multistroke("half-note", useBoundedRotationInvariance, new Array(
+ // new Array(new Point(546, 465), new Point(546, 531)),
+ // new Array(new Point(540, 530), new Point(536, 529), new Point(533, 528), new Point(529, 529), new Point(524, 530), new Point(520, 532), new Point(515, 535), new Point(511, 539), new Point(508, 545), new Point(506, 548), new Point(506, 554), new Point(509, 558), new Point(512, 561), new Point(517, 564), new Point(521, 564), new Point(527, 563), new Point(531, 560), new Point(535, 557), new Point(538, 553), new Point(542, 548), new Point(544, 544), new Point(546, 540), new Point(546, 536))
+ // ));
//
// The $N Gesture Recognizer API begins here -- 3 methods: Recognize(), AddGesture(), and DeleteUserGestures()
//
}
- Recognize = (strokes: any[], useBoundedRotationInvariance: boolean, requireSameNoOfStrokes: boolean, useProtractor: boolean) => {
+ Recognize = (strokes: any[], useBoundedRotationInvariance: boolean = false, requireSameNoOfStrokes: boolean = false, useProtractor: boolean = true) => {
var t0 = Date.now();
var points = CombineStrokes(strokes); // make one connected unistroke from the given strokes
var candidate = new Unistroke("", useBoundedRotationInvariance, points);
@@ -267,7 +279,7 @@ export class NDollarRecognizer {
}
}
var t1 = Date.now();
- return (u == -1) ? new Result("No match.", 0.0, t1 - t0) : new Result(this.Multistrokes[u].Name, useProtractor ? (1.0 - b) : (1.0 - b / HalfDiagonal), t1 - t0);
+ return (u == -1) ? null : new Result(this.Multistrokes[u].Name, useProtractor ? (1.0 - b) : (1.0 - b / HalfDiagonal), t1 - t0);
}
AddGesture = (name: string, useBoundedRotationInvariance: boolean, strokes: any[]) => {