diff --git a/index.html b/index.html
index 61ed2e8..1c52fd9 100644
--- a/index.html
+++ b/index.html
@@ -1,16 +1,24 @@
 <!DOCTYPE html>
 <meta charset="utf-8" />
+<head>
+<meta name="apple-mobile-web-app-capable" content="yes" />
+<meta name="viewport" content="user-scalable=no, width=device-width" />
+
 <title>WebSocket Test</title>
 <style type="text/css">
 	body {
 		font-size: 16pt;
+		margin: 0px;
+		overflow: hidden;
+		height: 100%;
 	}
 	#circle_of_people {
 		position: absolute;
 		background-color: #fda;
-		width: 400px;
-		height: 400px;
+		width: 320px;
+		height: 480px;
 		opacity: 0.5;
+		border: 2px solid black;
 	}
 	.user {
 		-webkit-transition: left 0.5s linear, top 0.5s linear;
@@ -32,12 +40,17 @@
 		background-color: #0af;
 	}
 </style>
+<script type="text/javascript" src="drawing.js"></script>
 <script type="text/javascript" src="connection.js"></script>
 <script language="javascript" type="text/javascript">
 	var myName = Math.random().toString(36).substring(7);
 	var websocket;
+	var circle;
 
 	function init() {
+		circle = document.getElementById("circle_of_people");
+		init_drawing();
+
 		if ("WebSocket" in window){
 			document.getElementById("myName").innerHTML = myName;
 			testWebSocket();
@@ -45,6 +58,7 @@
 			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>!';
 		}
 	}
+
 	function testWebSocket() {
 		websocket = new WebSocket(wsURI);
 		websocket.onopen = function (evt) { onOpen(evt) };
@@ -57,8 +71,6 @@
 		doSend();
 	}
 	function onMessage(evt) {
-		var circle = document.getElementById("circle_of_people");
-
 		var people = JSON.parse(evt.data);
 		for (var i = people.length - 1; i >= 0; i--) {
 			var user = document.getElementById(people[i].name);
@@ -116,11 +128,18 @@
 	}
 
 	window.addEventListener("load", init, false);
+
+	setTimeout(function (){
+		window.scrollTo(0, 1);
+	}, 0);
 </script>
+</head>
+<body ontouchmove="prevent_scrolling(event);">
 
 <p>My name is: <span id="myName"></span>
 <p>Status: <span id="status">unknown</span>
 
 <div id="circle_of_people"></div>
 
+</body>
 </html>
diff --git a/observer.html b/observer.html
index fc6aef2..b38166c 100644
--- a/observer.html
+++ b/observer.html
@@ -14,6 +14,19 @@
 		height: 800px;
 		opacity: 0.5;
 	}
+	#svgscreen {
+		background-color: #adf;
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		width: 100%;
+		height: 100%;
+		opacity: 0.5;
+	}
+	#svgscreen line {
+		stroke: rgb(255,0,0);
+		stroke-width: 2;
+	}
 	.user {
 		border: 3px solid #0af;
 		text-align: right;
@@ -28,10 +41,12 @@
 <script type="text/javascript" src="connection.js"></script>
 <script language="javascript" type="text/javascript">
 	var websocket;
-	var the_screen;
+	var svgscreen;
+	var peoplescreen;
 
 	function init() {
-		the_screen = document.getElementById("screen");
+		svgscreen = document.getElementById("svgscreen");
+		peoplescreen = document.getElementById("people");
 		testWebSocket();
 	}
 	function testWebSocket() {
@@ -47,11 +62,17 @@
 		websocket.send("a");
 	}
 	function onMessage(evt) {
-		var people = JSON.parse(evt.data);
+		var ret = JSON.parse(evt.data);
 
-		the_screen.innerHTML = '';
+		var lines = ret.lines;
+		for (var i = lines.length - 1; i >= 0; i--) {
+			addLine(lines[i], svgscreen);
+		};
+
+		var people = ret.people;
+		peoplescreen.innerHTML = '';
 		for (var i = people.length - 1; i >= 0; i--) {
-			var name = document.createElement('span')
+			var name = document.createElement('span');
 			name.className = "name";
 			name.innerText = people[i].name;
 
@@ -61,11 +82,11 @@
 			user.style.width = people[i].size.width + "px";
 			user.style.height = people[i].size.height + "px";
 
-			the_screen.appendChild(user);
+			peoplescreen.appendChild(user);
 		};
 
 		setTimeout(function(){
-			websocket.send("a");
+			//websocket.send("a");
 		}, 500);
 	}
 	function onError(evt) {
@@ -75,12 +96,26 @@
 		document.getElementById("status").innerHTML = "DISCONNECTED";
 	}
 
+	function addLine(line, sgvelement){
+		var svgline = document.createElementNS('http://www.w3.org/2000/svg','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);
+
+		sgvelement.appendChild(svgline);
+	}
+
 	window.addEventListener("load", init, false);
 </script>
 
 <p>Status: <span id="status">unknown</span>
 
 <div id="screen">
+
+<svg id="svgscreen" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
+<div id="people"></div>
+
 </div>
 
 </html>
