Initial commit

havard · Mar 11, 2012 · 5e3f89e · 5e3f89e
commit 5e3f89e
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 0 deletions.
diff --git a/drawnode.js b/drawnode.js
@@ -0,0 +1,14 @@
+var express = require('express');
+
+var app = express.createServer();
+app.use(express.static(__dirname + '/ui'));
+app.listen(1337);
+
+var io = require('socket.io').listen(app);
+
+io.sockets.on('connection', function(socket) {
+  socket.on('draw', function(draw) {
+  	console.log(draw);
+  	socket.broadcast.emit('draw', draw);
+  });
+});
diff --git a/ui/index.html b/ui/index.html
@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<title>Drawnode</title>
+		<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+		<script type="text/javascript" src="/socket.io/socket.io.js"></script>
+		<script type="text/javascript" src="ui.js"></script>
+		<style type="text/css">
+		  #canvas { border: 1px solid #000; cursor: auto; }
+		</style>
+	</head>
+	<body>
+		<h1>Drawnode</h1>
+		<canvas id="canvas"></canvas>
+	</body>
+</html>
diff --git a/ui/ui.js b/ui/ui.js
@@ -0,0 +1,50 @@
+var randomColor = function() {
+    var letters = '0123456789ABCDEF'.split('');
+    var color = '#';
+    for (var i = 0; i < 6; i++ ) {
+        color += letters[Math.round(Math.random() * 15)];
+    }
+    return color;
+}
+
+$(document).ready(function() {
+  var socket = io.connect('http://localhost:1337/');
+  socket.on('draw', function(json) {
+  	var coords = JSON.parse(json);
+  	draw(coords.ax, coords.ay, coords.bx, coords.by, coords.color);
+  });
+
+  var canvas = $('#canvas');
+  var ctx = canvas[0].getContext('2d');
+  var ax = -1, ay = -1;
+  var color = randomColor();
+  var draw = function(ax, ay, bx, by, color) {
+  	ctx.strokeStyle = color;
+  	ctx.beginPath();
+	ctx.moveTo(ax, ay);
+	ctx.lineTo(bx, by);
+    ctx.closePath();
+	ctx.stroke();
+  };
+
+  canvas.mousedown(function(e) {
+  	ax = e.offsetX; 
+  	ay = e.offsetY;
+  });
+  canvas.mousemove(function(e) {
+	if (ax != -1) {
+	  draw(ax, ay, e.offsetX, e.offsetY, color);
+      socket.emit('draw', JSON.stringify({ ax: ax, ay: ay, bx: e.offsetX, by: e.offsetY, color: color}));
+      ax = e.offsetX;
+      ay = e.offsetY;
+	}
+  });
+
+  canvas.mouseup(function(e) {
+  	ax = -1;
+  });
+
+  canvas.mouseleave(function(e) {
+  	ax = -1;
+  });
+});