Initial commit

taitems · Jan 14, 2011 · 92e89d6 · 92e89d6
commit 92e89d6
Show file tree

Hide file tree

Showing 3 changed files with 187 additions and 0 deletions.
diff --git a/index.html b/index.html
@@ -0,0 +1,187 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
+"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
+<html>
+<head>
+	<title>Gestures</title>
+	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+	<link rel="apple-touch-icon-precomposed" href="itouch.png">
+	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
+	<script type="text/javascript" src="http://depts.washington.edu/aimgroup/proj/dollar/dollar.js"></script>
+	<script type="text/javascript">
+
+		var oldX; var oldY;
+		var canvas;
+		var ctx;
+		var _r = new DollarRecognizer();
+		var _points = [];
+		var isMouseDown = false; // mouse only bool
+		var threshold = 3; // number of pixels required to be moved for a movement to count
+
+
+		document.addEventListener('touchstart', function(e) {
+			e.preventDefault();
+			_points = [];
+			var touch = e.touches[0];
+			ctx.beginPath();
+			ctx.strokeStyle = "#bae1ff";
+			ctx.lineCap = "round";
+			ctx.lineJoin = "round";
+			ctx.lineWidth = 6;
+			oldX = touch.pageX;
+			oldY = touch.pageY;
+		}, false);
+
+		document.addEventListener('touchmove', function(e) {
+			if (oldX - e.pageX < 3 && oldX - e.pageX > -3) {
+				return;
+			}
+			if (oldY - e.pageY < 3 && oldY - e.pageY > -3) {
+				return;
+			}
+			var touch = e.touches[0];
+			ctx.moveTo(oldX,oldY);
+			oldX = touch.pageX;
+			oldY = touch.pageY;
+			ctx.lineTo(oldX,oldY);
+			ctx.stroke();
+			ctx.shadowColor = 'rgba(169,236,255,0.25)';
+			ctx.shadowOffsetX = 0;
+			ctx.shadowOffsetY = 0;
+			ctx.shadowBlur = 10;
+			_points[_points.length] = new Point(oldX,oldY);
+		}, false);
+
+		document.addEventListener('touchend', function(e) {
+			ctx.closePath();
+			if (_points.length >= 10) {
+				var result = _r.Recognize(_points);
+				$("#shapeOutput").text(result.Name);
+				$("#mathOutput").text(Math.round(result.Score*100) + "%");
+			}
+			_points = [];
+			ctx.clearRect(0,0,canvas.width,canvas.height);
+		}, false);
+
+		window.addEventListener("load", function(e) {
+			canvas = document.getElementById("canvas");  
+			ctx = canvas.getContext("2d");
+			canvas.width = window.innerWidth;
+			canvas.height = window.innerHeight;
+			shadowWrapper.width = window.innerWidth;
+			shadowWrapper.height = window.innerHeight;
+		}, false);
+
+
+
+
+		// MOUSE BINDS FOR THE HELL OF IT
+		document.addEventListener('mousedown', function(e) {
+			isMouseDown = true;
+			e.preventDefault();
+			_points = [];
+			ctx.beginPath();
+			ctx.strokeStyle = "#bae1ff";
+			ctx.lineCap = "round";
+			ctx.lineJoin = "round";
+			ctx.lineWidth = 6;
+			ctx.shadowColor = 'rgba(169,236,255,0.1)';
+			ctx.shadowOffsetX = 0;
+			ctx.shadowOffsetY = 0;
+			ctx.shadowBlur = 10;
+			oldX = e.pageX;
+			oldY = e.pageY;
+		}, false);
+
+		document.addEventListener('mousemove', function(e) {
+			if (!isMouseDown) {
+				return;
+			}
+			if (oldX - e.pageX < 3 && oldX - e.pageX > -3) {
+				return;
+			}
+			if (oldY - e.pageY < 3 && oldY - e.pageY > -3) {
+				return;
+			}
+			ctx.moveTo(oldX,oldY);
+			oldX = e.pageX;
+			oldY = e.pageY;
+			ctx.lineTo(oldX,oldY);
+			ctx.stroke();
+			_points[_points.length] = new Point(oldX,oldY);
+		}, false);
+
+		document.addEventListener('mouseup', function(e) {
+			isMouseDown = false;
+			ctx.closePath();
+			if (_points.length >= 10) {
+				var result = _r.Recognize(_points);
+				$("#shapeOutput").text(result.Name);
+				$("#mathOutput").text(Math.round(result.Score*100) + "%");
+			}
+			_points = [];
+			ctx.clearRect(0,0,canvas.width,canvas.height);
+		}, false);
+
+	</script>
+	<style type="text/css">
+		body { background: #131b1e url(tron_grid_2.png) 0 0 repeat; margin: 0; padding: 0; font-family: Helvetica; }
+		#output { 
+			position: absolute;
+			bottom: 0;
+			left: 0;
+			padding: 1em 0;
+			width: 100%;
+			border-top: 1px solid #08090e;
+			background: #0e151a;
+			-webkit-box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 0 2em rgba(255,255,255,0.15);
+			-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.2) inset, 0 0 2em rgba(255,255,255,0.15);
+			background-image: -webkit-gradient(
+				linear,
+				left top,
+				left bottom,
+				color-stop(0, rgb(31,47,59)),
+				color-stop(1, rgb(6,10,11))
+			);
+			background-image: -moz-linear-gradient(
+				center top,
+				rgb(31,47,59) 0%,
+				rgb(6,10,11) 100%
+			);
+		}
+		#shapeOutput { 
+			color: #7c919e;
+			font-size: 1.125em;
+			font-weight: bold;
+			text-shadow: 0 -1px 0 rgba(0,0,0,0.8);
+			text-transform: capitalize;
+			float: left;
+			padding-left: 1em;
+		}
+		#mathOutput {
+			color: #7c919e;
+			font-size: 1.125em;
+			opacity: 0.7;
+			float: right;
+			padding-right: 1em;
+		}
+	</style>
+
+</head>
+
+<body>
+
+	<canvas id="canvas"></canvas>
+
+	<div id="output">
+
+		<div id="shapeOutput">Gesture Recognition</div>
+
+		<div id="mathOutput">0%</div>
+
+	</div>
+
+</body>
+
+</html> 
diff --git a/itouch.png b/itouch.png
diff --git a/tron_grid_2.png b/tron_grid_2.png