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 11 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
Split 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>
<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>

49
observer.html
View File

@ -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>