Added line rendering (for current line)

drawing.js

@@ -0,0 +1,66 @@
+var line = {
+	starting_point: {x: 0, y: 0},
+	end_point: {x: 0, y: 0}
+};
+
+var drawing = {
+	active: false,
+	draw_start: null,
+	draw_move: null,
+	draw_end: null,
+	draw_cancel: null
+};
+
+function down(e){
+	line.starting_point.x = e.pageX - this.offsetLeft;
+	line.starting_point.y = e.pageY - this.offsetTop;
+	line.end_point.x = e.pageX - this.offsetLeft;
+	line.end_point.y = e.pageY - this.offsetTop;
+	drawing.active = true;
+
+	drawing.draw_start(line);
+}
+
+function up(e){
+	drawing.active = false;
+
+	drawing.draw_end(line);
+}
+
+function move(e){
+	if(drawing.active){
+		line.end_point.x = e.pageX - this.offsetLeft;
+		line.end_point.y = e.pageY - this.offsetTop;
+
+		drawing.draw_move(line);
+	}
+}
+
+function out(e){
+	drawing.active = false;
+	drawing.draw_cancel(line);
+}
+
+function init_drawing(element, draw_start, draw_move, draw_end, draw_cancel){
+	drawing.draw_start = draw_start;
+	drawing.draw_move = draw_move;
+	drawing.draw_end = draw_end;
+	drawing.draw_cancel = draw_cancel;
+
+	// Desktop clients
+	element.addEventListener('mousedown', down, false);
+	element.addEventListener('mouseup', up, false);
+	element.addEventListener('mousemove', move, false);
+	element.addEventListener('mouseout', out, false);
+
+	// Phones/etc clients
+	element.addEventListener('touchstart', down, false);
+	element.addEventListener('touchend', up, false);
+	element.addEventListener('touchmove', move, false);
+	element.addEventListener('touchcancel', out, false);
+}
+
+// To prevent scrolling on devices
+function prevent_scrolling(event){
+	event.preventDefault();
+}

index.html

@@ -17,8 +17,8 @@
 		background-color: #fda;
 		width: 320px;
 		height: 480px;
-		opacity: 0.5;
+		opacity: 0.1;
-		border: 2px solid black;
+		border: 1px solid black;
 	}
 	.user {
 		-webkit-transition: left 0.5s linear, top 0.5s linear;
@@ -39,37 +39,46 @@
 		padding: 2px;
 		background-color: #0af;
 	}
+	#svgscreen {
+		background-color: #adf;
+		position: absolute;
+		width: 320px;
+		height: 480px;
+	}
+	#svgscreen line {
+		stroke: rgb(255,0,0);
+		stroke-width: 2;
+	}
 </style>
-<script type="text/javascript" src="drawing.js"></script>
 <script type="text/javascript" src="connection.js"></script>
+<script type="text/javascript" src="websocket.js"></script>
+<script type="text/javascript" src="drawing.js"></script>
+<script type="text/javascript" src="rendering.js"></script>
 <script language="javascript" type="text/javascript">
 	var myName = Math.random().toString(36).substring(7);
 	var websocket;
 	var circle;
+	var svgscreen;
+	var current_svgline;
 
 	function init() {
+		var statusbar = document.getElementById('status');
 		circle = document.getElementById("circle_of_people");
-		init_drawing();
+		document.getElementById("myName").innerHTML = myName;
+		svgscreen = document.getElementById("svgscreen");
 
 		if ("WebSocket" in window){
-			document.getElementById("myName").innerHTML = myName;
+			init_drawing(circle, drawStart, drawMove, drawEnd, drawRemove);
-			testWebSocket();
+			init_websocket(statusbar, onOpen, onMessage);
 		} else {
-			document.getElementById("status").innerHTML = 'No websockets :(. This means that you either use <em>Internet Explorer</em> or <em>Android</em>. In both cases, I suggest that you use <a href="http://www.google.com/chrome/">Chrome</a> or <a href="http://www.getfirefox.net/">Firefox</a>!';
+			statusbar.innerHTML = 'No websockets :(. This means that you either use <em>Internet Explorer</em> or <em>Android</em>. In both cases, I suggest that you use <a href="http://www.google.com/chrome/">Chrome</a> or <a href="http://www.getfirefox.net/">Firefox</a>!';
 		}
 	}
 
-	function testWebSocket() {
-		websocket = new WebSocket(wsURI);
-		websocket.onopen = function (evt) { onOpen(evt) };
-		websocket.onclose = function (evt) { onClose(evt) };
-		websocket.onmessage = function (evt) { onMessage(evt) };
-		websocket.onerror = function (evt) { onError(evt) };
-	}
 	function onOpen(evt) {
-		document.getElementById("status").innerHTML = "CONNECTED";
 		doSend();
 	}
+
 	function onMessage(evt) {
 		var people = JSON.parse(evt.data);
 		for (var i = people.length - 1; i >= 0; i--) {
@@ -112,6 +121,27 @@
 			doSend();
 		}, 500);
 	}
+
+	function drawStart(line){
+		current_svgline = addLine(line, svgscreen);
+	}
+
+	function drawMove(line){
+		updateLine(current_svgline, line);
+	}
+
+	function drawEnd(line){
+		console.log(JSON.stringify(line));
+		drawRemove(line);
+	}
+
+	function drawRemove(line){
+		if(current_svgline){
+			svgscreen.removeChild(current_svgline);
+			current_svgline = null;
+		}
+	}
+
 	function doSend(message) {
 		var myself = {
 			name: myName,
@@ -120,12 +150,6 @@
 
 		websocket.send(JSON.stringify(myself));
 	}
-	function onError(evt) {
-		document.getElementById("status").innerHTML = 'ERROR: ' + evt.data;
-	}
-	function onClose(evt) {
-		document.getElementById("status").innerHTML = "DISCONNECTED";
-	}
 
 	window.addEventListener("load", init, false);
 
@@ -136,9 +160,10 @@
 </head>
 <body ontouchmove="prevent_scrolling(event);">
 
-<p>My name is: <span id="myName"></span>
+<p>My name is: <span id="myName"></span></p>
-<p>Status: <span id="status">unknown</span>
+<p>Status: <span id="status">CONNECTING...</span></p>
 
+<svg id="svgscreen" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
 <div id="circle_of_people"></div>
 
 </body>

rendering.js

@@ -0,0 +1,22 @@
+function createSVG(element){
+	return document.createElementNS('http://www.w3.org/2000/svg', element);
+}
+
+function addLine(line, svg_parent){
+	var svgline = createSVG('line');
+	svgline.setAttribute('x1', line.starting_point.x);
+	svgline.setAttribute('y1', line.starting_point.y);
+	svgline.setAttribute('x2', line.end_point.x);
+	svgline.setAttribute('y2', line.end_point.y);
+
+	svg_parent.appendChild(svgline);
+	return svgline;
+}
+
+function updateLine(svgline, abstractline){
+	svgline.setAttribute('x1', abstractline.starting_point.x);
+	svgline.setAttribute('y1', abstractline.starting_point.y);
+	svgline.setAttribute('x2', abstractline.end_point.x);
+	svgline.setAttribute('y2', abstractline.end_point.y);
+	return svgline;
+}

websocket.js

@@ -0,0 +1,15 @@
+
+function init_websocket(statusbar, open, message){
+	websocket = new WebSocket(wsURI);
+
+	websocket.onclose = function (evt) { statusbar.innerHTML = 'DISCONNECTED'; };
+	websocket.onerror = function (evt) { statusbar.innerHTML = 'ERROR: ' + evt.data; };
+
+	websocket.onopen = function (evt) {
+		statusbar.innerHTML = 'CONNECTED';
+		open(evt);
+	};
+	websocket.onmessage = function (evt) {
+		message(evt);
+	};
+}