From aaa00ff80680cee57d75833a04eeb358d88488b9 Mon Sep 17 00:00:00 2001
From: Joshua Moerman <lakseru@gmail.com>
Date: Tue, 5 Mar 2013 10:19:02 +0100
Subject: [PATCH] Created nice observer

---
 observer.html | 51 +++++++++++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 49 insertions(+), 2 deletions(-)
diff --git a/observer.html b/observer.html
index dd89cdf..b46ab29 100644
--- a/observer.html
+++ b/observer.html
@@ -1,11 +1,36 @@
 <!DOCTYPE html>
 <meta charset="utf-8" />
 <title>WebSocket Test</title>
+<style type="text/css">
+	body {
+		font-size: 16pt;
+	}
+	#screen {
+		background-color: #fda;
+		position: absolute;
+		top: 0px;
+		left: 0px;
+		width: 1280px;
+		height: 800px;
+		opacity: 0.5;
+	}
+	.user {
+		border: 3px solid #0af;
+		text-align: right;
+		position: absolute;
+		opacity: 0.5;
+	}
+	.user .name {
+		padding: 4px;
+		background-color: #0af;
+	}
+</style>
 <script language="javascript" type="text/javascript">
 	var websocket;
-	var list_of_people;
+	var the_screen;
 
 	function init() {
+		the_screen = document.getElementById("screen");
 		testWebSocket();
 	}
 	function testWebSocket() {
@@ -21,7 +46,26 @@
 		websocket.send("a");
 	}
 	function onMessage(evt) {
-		list_of_people = JSON.parse(evt.data);
+		var people = JSON.parse(evt.data);
+
+		the_screen.innerHTML = '';
+		for (var i = people.length - 1; i >= 0; i--) {
+			var name = document.createElement('span')
+			name.className = "name";
+			name.innerText = people[i].name;
+
+			var user = document.createElement('div');
+			user.className = 'user';
+			user.appendChild(name);
+			user.style.width = people[i].width + "px";
+			user.style.height = people[i].height + "px";
+
+			the_screen.appendChild(user);
+		};
+
+		setTimeout(function(){
+			websocket.send("a");
+		}, 500);
 	}
 	function onError(evt) {
 		document.getElementById("status").innerHTML = 'ERROR: ' + evt.data;
@@ -36,4 +80,7 @@
 <p>Response of server: <span id="people"></span>
 <p>Status: <span id="status">unknown</span>
 
+<div id="screen">
+</div>
+
 </html>
