$1 recognizer gesture creator

code to compile gesture code for $1 recognizer

by falldeaf

HTML

name your gesture: <input id="gname" type="text" /><br/>
draw single line gesture in grey box<br/>
<canvas id="canvas" width="300" height="300"></canvas>

<br/>
<button id="printcode">Generate Code</button>
<button id="clear">Clear All</button>
<button id="copycode">Copy Code to Clipboard</button>

<p>
<div id="gen_code"></div>
</p>

CSS

#canvas {
  background-color:#DDD;
}

#gen_code {
  background-color:#FFF;
  border:1px solid black;
  width:300px;
  height:300px;
  overflow-y: scroll;
  word-wrap: break-word;
}

JavaScript

context = document.getElementById('canvas').getContext("2d");

$('#canvas').mousedown(function(e){
  var mouseX = e.pageX - this.offsetLeft;
  var mouseY = e.pageY - this.offsetTop;
		
  paint = true;
  addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
  redraw();
});

$('#canvas').mousemove(function(e){
  if(paint){
    addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
    redraw();
  }
});

$('#canvas').mouseup(function(e){
  paint = false;
});

$('#canvas').mouseleave(function(e){
  paint = false;
});

var clickX = new Array();
var clickY = new Array();
var clickDrag = new Array();
var paint;

function addClick(x, y, dragging)
{
  clickX.push(x);
  clickY.push(y);
  clickDrag.push(dragging);
}

function redraw(){
  context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
			
  for(var i=0; i < clickX.length; i++) {	
    context.beginPath();
  	context.arc(clickX[i]-1, clickY[i-1], 1, 0, Math.PI*2, true); 
  	context.closePath();
  	context.fill();
  }
}

function printCode() {
	var gname = ($('#gname').val() != "") ? "\"" + $('#gname').val() + "\"" : "gkey";
	var code_string = "this.Templates.Push( new Template(" + gname + ", new Array(";
    
  for(var i=0; i < clickX.length; i++) {
  	var x = clickX[i]-1;
    var y = clickY[i]-1;
  	code_string += "new Point(" + x + "," + y + "),"
  }
  code_string = code_string.slice(0,-1);
  code_string += ")));";
	$('#gen_code').html(code_string);
}

function clearAll() {
  context.clearRect(0, 0, context.canvas.width, context.canvas.height); // Clears the canvas
  clickX = new Array();
  clickY = new Array();
  clickDrag = new Array();
  $('#gen_code').html("");
  $('#gname').val("");
}

$('#printcode').click(printCode);
$('#clear').click(clearAll);
$('#copycode').click(function () { copyToClipboard('#gen_code'); });

function copyToClipboard(element) {
  var $temp = $("<input>");
  $("body").append($temp);
  $temp.val($(element).text()).select();
 ...