fly-socket/www/main.html

254 lines
8.4 KiB
HTML
Raw Permalink Normal View History

2019-07-31 01:08:19 +02:00
<!DOCTYPE html>
<html>
<head>
<title>WebSocket DEMO</title>
<script src="js/fly-ws.js"></script>
<script src="js/graph.js"></script>
2019-07-31 01:08:19 +02:00
<style>
html, body {
2019-08-01 19:02:02 +02:00
width: 100vw;
height: 100vh;
2019-07-31 01:08:19 +02:00
top: 0px;
left: 0px;
margin: 0px;
display: grid;
background: #141414;
color: #e7e7e7;
}
body {
grid-template: 100px 50px repeat(4, 1fr) / 50px calc(100vh - 150px) calc((100vh - 150px) / 4) 1fr;
2019-08-01 19:02:02 +02:00
grid-template-areas: "title title title stdin"
"ws-status ws-input ws-connect stdin"
2019-07-31 01:08:19 +02:00
". map data-al console"
". map data-sp console"
". map data-ps console"
". map data-hp console";
}
2019-08-20 11:27:14 +02:00
canvas {
2019-08-21 08:02:04 +02:00
background: #000;
2019-08-20 11:27:14 +02:00
}
2019-07-31 01:08:19 +02:00
body > div {
display: grid;
}
.title {
align-self: center;
justify-self: center;
}
.ws {
align-self: center;
height: 30px;
}
.ws > * {
font-size: 20px;
}
.border {
border: 1px solid dimgray;
}
.ws-status {
justify-self: center;
width: 30px;
background: gray;
}
.online {
2019-08-01 19:02:02 +02:00
background: lime !important;
2019-07-31 01:08:19 +02:00
}
.offline {
background: red;
}
.ws-connect {
justify-self: start;
}
2019-08-01 19:02:02 +02:00
.console {
overflow: auto;
}
#stdin > * {
font-size: 20px;
}
2019-07-31 01:08:19 +02:00
/* Yea... im seperating this */
.title {
grid-area: title;
}
.ws-status {
grid-area: ws-status;
}
.ws-input {
grid-area: ws-input;
}
.ws-connect {
grid-area: ws-connect;
}
.console {
grid-area: console;
}
.map {
grid-area: map;
}
#data_al {
2019-07-31 01:08:19 +02:00
grid-area: data-al;
}
#data_sp {
2019-07-31 01:08:19 +02:00
grid-area: data-sp;
}
#data_ps {
2019-07-31 01:08:19 +02:00
grid-area: data-ps;
}
#data_hp {
2019-07-31 01:08:19 +02:00
grid-area: data-hp;
}
2019-08-01 19:02:02 +02:00
#stdin {
grid-area: stdin;
}
2019-07-31 01:08:19 +02:00
</style>
</head>
<body>
<div class="title">
<h1>Websocket DEMO</h1>
</div>
2019-08-01 19:02:02 +02:00
<div class="ws ws-status border" id="ws_status"></div>
2019-07-31 01:08:19 +02:00
<div class="ws ws-input">
<input id="addr" value="ws://127.0.0.1:7767"/>
</div>
<div class="ws ws-connect">
<button onclick="connect()">Connect</button>
</div>
<div class="map border"></div>
2019-08-21 08:02:04 +02:00
<div class="border data" id="data_al" data-color="#FFBF00"></div>
<div class="border data" id="data_sp" data-color="#00C600"></div>
<div class="border data" id="data_ps" data-color="#C100C1"></div>
<div class="border data" id="data_hp" data-color="#0000D3"></div>
2019-08-01 19:02:02 +02:00
<div class="console border">
<pre id="stdout"></pre>
</div>
<div class="border" id="stdin">
<button onclick="button(0)">0: Get All Flights</button>
<button onclick="button(1)">1: Subscribe flight changes</button>
<button onclick="button(2)">2: Subscribe flight data</button>
<button onclick="button(3)">3: Fetch flight data</button>
</div>
2019-07-31 01:08:19 +02:00
<script>
var fs;
// init graphs
2019-08-20 11:27:14 +02:00
let dataContainers = document.getElementsByClassName("data");
for (let i = 0; i < dataContainers.length; i++) {
let canvas = document.createElement("canvas");
canvas.width = canvas.height = 215;
dataContainers[i].appendChild(canvas);
let graph;
if (true) // Use moving graph
2019-08-21 08:02:04 +02:00
graph = new MovingGraph(canvas, dataContainers[i].dataset["color"], 100, 64, Float32Array);
2019-08-20 11:27:14 +02:00
else
2019-08-21 08:02:04 +02:00
graph = new Graph(canvas, dataContainers[i].dataset["color"], 100);
2019-08-20 11:27:14 +02:00
graph.smooth = true; // Can change on fly
2019-08-22 12:17:16 +02:00
graph.postDraw = postDraw;
2019-08-21 08:02:04 +02:00
let amount = Math.random() * graph.getLength() * 1.4;
2019-08-20 11:27:14 +02:00
for (let v = 0; v < amount; v++) {
graph.add( Math.random() * 100 );
}
graph.draw();
2019-08-21 08:02:04 +02:00
//a = graph;
2019-08-20 11:27:14 +02:00
setInterval(function(){
graph.add( Math.random() * 100 );
graph.draw();
}, 100);
2019-08-21 08:02:04 +02:00
//break;
2019-08-20 11:27:14 +02:00
}
2019-08-01 19:02:02 +02:00
function* buffer2HexArray(buff, start = 0, end = buff.byteLength) {
for (let i = start; i < end; i++) {
let hex = buff.getUint8(i).toString(16);
if (hex.length == 1)
hex = "0" + hex;
yield hex;
}
}
2019-08-22 12:17:16 +02:00
function postDraw(graph) {
graph.ctx.beginPath();
graph.ctx.moveTo(0, 100);
graph.ctx.lineTo(10000, 100);
graph.ctx.stroke();
}
2019-08-01 01:57:07 +02:00
function callbackData(data) {
console.log(data);
}
2019-08-01 19:02:02 +02:00
function callbackRaw(data) {
let hex = Array.from( buffer2HexArray(data) ).join(" ");
stdout.innerHTML += hex + "\n";
}
2019-07-31 01:08:19 +02:00
function connect() {
fs = new FLYSocket(
addr.value, // websocket addr
2019-08-01 19:02:02 +02:00
callbackData,
callbackRaw
2019-07-31 01:08:19 +02:00
);
2019-08-01 19:02:02 +02:00
fs.ws.onopen = function() {
ws_status.classList.add("online");
}
fs.ws.onclose = fs.ws.onerror = function() {
ws_status.classList.add("offline");
ws_status.classList.remove("online");
}
2019-07-31 01:08:19 +02:00
}
2019-08-01 19:02:02 +02:00
function button(i) {
if (!(fs instanceof FLYSocket))
throw Error("FLYSocket not created");
let data;
let uuid = NaN;
switch (i) {
default:
return;
case 0:
data = new DataView( new ArrayBuffer(1) );
data.setUint8(0, 0);
break;
case 1:
data = new DataView( new ArrayBuffer(2) );
data.setUint8(0, 1);
data.setUint8(1, true);
break;
case 2:
data = new DataView( new ArrayBuffer(6) );
data.setUint8(0, 2);
while (isNaN(uuid))
uuid = parseInt( prompt("FlightUUID", 0) );
data.setUint32(1, uuid, true);
data.setUint8(5, true);
break;
case 3:
data = new DataView( new ArrayBuffer(5) );
data.setUint8(0, 3);
while (isNaN(uuid))
uuid = parseInt( prompt("FlightUUID", 0) );
data.setUint32(1, uuid, true);
break;
2019-07-31 01:08:19 +02:00
}
2019-08-01 19:02:02 +02:00
fs.ws.send(data);
}
</script>
2019-07-31 01:08:19 +02:00
</body>
</html>