joshua
/
beats-website
Archived
1
0
Fork 0
Code Releases Activity
Browse Source

Made index capable for phones etc, svg in observer

master
Joshua Moerman 12 years ago
parent
9465420e35
commit
544ca48544
2 changed files with 65 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 27
      index.html
  2. 49
      observer.html

27
index.html
View File

@ -1,16 +1,24 @@
<!DOCTYPE html> <!DOCTYPE html>
<meta charset="utf-8" /> <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> <title>WebSocket Test</title>
<style type="text/css"> <style type="text/css">
body { body {
font-size: 16pt; font-size: 16pt;
margin: 0px;
overflow: hidden;
height: 100%;
} }
#circle_of_people { #circle_of_people {
position: absolute; position: absolute;
background-color: #fda; background-color: #fda;
width: 400px; width: 320px;
height: 400px; height: 480px;
opacity: 0.5; opacity: 0.5;
border: 2px solid black;
} }
.user { .user {
-webkit-transition: left 0.5s linear, top 0.5s linear; -webkit-transition: left 0.5s linear, top 0.5s linear;
@ -32,12 +40,17 @@
background-color: #0af; background-color: #0af;
} }
</style> </style>
<script type="text/javascript" src="drawing.js"></script>
<script type="text/javascript" src="connection.js"></script> <script type="text/javascript" src="connection.js"></script>
<script language="javascript" type="text/javascript"> <script language="javascript" type="text/javascript">
var myName = Math.random().toString(36).substring(7); var myName = Math.random().toString(36).substring(7);
var websocket; var websocket;
var circle;
function init() { function init() {
circle = document.getElementById("circle_of_people");
init_drawing();
if ("WebSocket" in window){ if ("WebSocket" in window){
document.getElementById("myName").innerHTML = myName; document.getElementById("myName").innerHTML = myName;
testWebSocket(); 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>!'; 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() { function testWebSocket() {
websocket = new WebSocket(wsURI); websocket = new WebSocket(wsURI);
websocket.onopen = function (evt) { onOpen(evt) }; websocket.onopen = function (evt) { onOpen(evt) };
@ -57,8 +71,6 @@
doSend(); doSend();
} }
function onMessage(evt) { function onMessage(evt) {
var circle = document.getElementById("circle_of_people");
var people = JSON.parse(evt.data); var people = JSON.parse(evt.data);
for (var i = people.length - 1; i >= 0; i--) { for (var i = people.length - 1; i >= 0; i--) {
var user = document.getElementById(people[i].name); var user = document.getElementById(people[i].name);
@ -116,11 +128,18 @@
} }
window.addEventListener("load", init, false); window.addEventListener("load", init, false);
setTimeout(function (){
window.scrollTo(0, 1);
}, 0);
</script> </script>
</head>
<body ontouchmove="prevent_scrolling(event);">
<p>My name is: <span id="myName"></span> <p>My name is: <span id="myName"></span>
<p>Status: <span id="status">unknown</span> <p>Status: <span id="status">unknown</span>
<div id="circle_of_people"></div> <div id="circle_of_people"></div>
</body>
</html> </html>

49
observer.html
View File

@ -14,6 +14,19 @@
height: 800px; height: 800px;
opacity: 0.5; 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 { .user {
border: 3px solid #0af; border: 3px solid #0af;
text-align: right; text-align: right;
@ -28,10 +41,12 @@
<script type="text/javascript" src="connection.js"></script> <script type="text/javascript" src="connection.js"></script>
<script language="javascript" type="text/javascript"> <script language="javascript" type="text/javascript">
var websocket; var websocket;
var the_screen; var svgscreen;
var peoplescreen;
function init() { function init() {
the_screen = document.getElementById("screen"); svgscreen = document.getElementById("svgscreen");
peoplescreen = document.getElementById("people");
testWebSocket(); testWebSocket();
} }
function testWebSocket() { function testWebSocket() {
@ -47,11 +62,17 @@
websocket.send("a"); websocket.send("a");
} }
function onMessage(evt) { function onMessage(evt) {
var people = JSON.parse(evt.data); var ret = JSON.parse(evt.data);
var lines = ret.lines;
for (var i = lines.length - 1; i >= 0; i--) {
addLine(lines[i], svgscreen);
};
the_screen.innerHTML = ''; var people = ret.people;
peoplescreen.innerHTML = '';
for (var i = people.length - 1; i >= 0; i--) { for (var i = people.length - 1; i >= 0; i--) {
var name = document.createElement('span') var name = document.createElement('span');
name.className = "name"; name.className = "name";
name.innerText = people[i].name; name.innerText = people[i].name;
@ -61,11 +82,11 @@
user.style.width = people[i].size.width + "px"; user.style.width = people[i].size.width + "px";
user.style.height = people[i].size.height + "px"; user.style.height = people[i].size.height + "px";
the_screen.appendChild(user); peoplescreen.appendChild(user);
}; };
setTimeout(function(){ setTimeout(function(){
websocket.send("a"); //websocket.send("a");
}, 500); }, 500);
} }
function onError(evt) { function onError(evt) {
@ -75,12 +96,26 @@
document.getElementById("status").innerHTML = "DISCONNECTED"; 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); window.addEventListener("load", init, false);
</script> </script>
<p>Status: <span id="status">unknown</span> <p>Status: <span id="status">unknown</span>
<div id="screen"> <div id="screen">
<svg id="svgscreen" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
<div id="people"></div>
</div> </div>
</html> </html>