You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
170 lines
4.0 KiB
170 lines
4.0 KiB
<!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: 320px;
|
|
height: 480px;
|
|
opacity: 0.1;
|
|
border: 1px solid black;
|
|
}
|
|
.user {
|
|
-webkit-transition: left 0.5s linear, top 0.5s linear;
|
|
position: absolute;
|
|
}
|
|
.user .bullet {
|
|
width: 10px;
|
|
height: 10px;
|
|
position: absolute;
|
|
left: -5px;
|
|
top: -5px;
|
|
border-radius: 5px;
|
|
background-color: #f00;
|
|
}
|
|
.user .name {
|
|
border-radius: 2px;
|
|
font-size: 12px;
|
|
padding: 2px;
|
|
background-color: #0af;
|
|
}
|
|
#svgscreen {
|
|
background-color: #adf;
|
|
position: absolute;
|
|
width: 320px;
|
|
height: 480px;
|
|
}
|
|
#svgscreen line {
|
|
stroke: rgb(255,0,0);
|
|
stroke-width: 2;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="connection.js"></script>
|
|
<script type="text/javascript" src="websocket.js"></script>
|
|
<script type="text/javascript" src="drawing.js"></script>
|
|
<script type="text/javascript" src="rendering.js"></script>
|
|
<script language="javascript" type="text/javascript">
|
|
var myName = Math.random().toString(36).substring(7);
|
|
var websocket;
|
|
var circle;
|
|
var svgscreen;
|
|
var current_svgline;
|
|
|
|
function init() {
|
|
var statusbar = document.getElementById('status');
|
|
circle = document.getElementById("circle_of_people");
|
|
document.getElementById("myName").innerHTML = myName;
|
|
svgscreen = document.getElementById("svgscreen");
|
|
|
|
if ("WebSocket" in window){
|
|
init_drawing(circle, drawStart, drawMove, drawEnd, drawRemove);
|
|
init_websocket(statusbar, onOpen, onMessage);
|
|
} else {
|
|
statusbar.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 onOpen(evt) {
|
|
doSend();
|
|
}
|
|
|
|
function onMessage(evt) {
|
|
var people = JSON.parse(evt.data);
|
|
for (var i = people.length - 1; i >= 0; i--) {
|
|
var user = document.getElementById(people[i].name);
|
|
if(user){
|
|
user.style.left = people[i].position.x + "px";
|
|
user.style.top = people[i].position.y + "px";
|
|
} else {
|
|
var name = document.createElement('span')
|
|
name.className = "name";
|
|
name.innerText = people[i].name;
|
|
|
|
var user = document.createElement('div');
|
|
user.id = people[i].name;
|
|
user.className = 'user';
|
|
user.innerHTML = '<div class="bullet"></div>';
|
|
user.appendChild(name);
|
|
user.style.left = people[i].position.x + "px";
|
|
user.style.top = people[i].position.y + "px";
|
|
|
|
circle.appendChild(user);
|
|
}
|
|
}
|
|
|
|
var nodes = circle.childNodes;
|
|
for(var i = nodes.length -1; i >= 0; i--) {
|
|
var should_remove = true;
|
|
for (var j = people.length - 1; j >= 0; j--){
|
|
if(people[j].name == nodes[i].id) {
|
|
should_remove = false;
|
|
break;
|
|
}
|
|
}
|
|
if(should_remove){
|
|
circle.removeChild(nodes[i]);
|
|
}
|
|
}
|
|
|
|
setTimeout(function(){
|
|
doSend();
|
|
}, 500);
|
|
}
|
|
|
|
function drawStart(line){
|
|
current_svgline = addLine(line, svgscreen);
|
|
}
|
|
|
|
function drawMove(line){
|
|
updateLine(current_svgline, line);
|
|
}
|
|
|
|
function drawEnd(line){
|
|
console.log(JSON.stringify(line));
|
|
drawRemove(line);
|
|
}
|
|
|
|
function drawRemove(line){
|
|
if(current_svgline){
|
|
svgscreen.removeChild(current_svgline);
|
|
current_svgline = null;
|
|
}
|
|
}
|
|
|
|
function doSend(message) {
|
|
var myself = {
|
|
name: myName,
|
|
size: {width: window.innerWidth, height: window.innerHeight}
|
|
};
|
|
|
|
websocket.send(JSON.stringify(myself));
|
|
}
|
|
|
|
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>
|
|
<p>Status: <span id="status">CONNECTING...</span></p>
|
|
|
|
<svg id="svgscreen" xmlns="http://www.w3.org/2000/svg" version="1.1"></svg>
|
|
<div id="circle_of_people"></div>
|
|
|
|
</body>
|
|
</html>
|
|
|