Made index capable for phones etc, svg in observer
This commit is contained in:
Joshua Moerman
parent
9465420e35
commit
544ca48544
2 changed files with 65 additions and 11 deletions
27
index.html
27
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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Reference in a new issue