254 lines
8.4 KiB
HTML
254 lines
8.4 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<title>WebSocket DEMO</title>
|
|
<script src="js/fly-ws.js"></script>
|
|
<script src="js/graph.js"></script>
|
|
<style>
|
|
html, body {
|
|
width: 100vw;
|
|
height: 100vh;
|
|
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;
|
|
grid-template-areas: "title title title stdin"
|
|
"ws-status ws-input ws-connect stdin"
|
|
". map data-al console"
|
|
". map data-sp console"
|
|
". map data-ps console"
|
|
". map data-hp console";
|
|
}
|
|
|
|
canvas {
|
|
background: #000;
|
|
}
|
|
|
|
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 {
|
|
background: lime !important;
|
|
}
|
|
.offline {
|
|
background: red;
|
|
}
|
|
|
|
.ws-connect {
|
|
justify-self: start;
|
|
}
|
|
|
|
.console {
|
|
overflow: auto;
|
|
}
|
|
|
|
#stdin > * {
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* 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 {
|
|
grid-area: data-al;
|
|
}
|
|
#data_sp {
|
|
grid-area: data-sp;
|
|
}
|
|
#data_ps {
|
|
grid-area: data-ps;
|
|
}
|
|
#data_hp {
|
|
grid-area: data-hp;
|
|
}
|
|
#stdin {
|
|
grid-area: stdin;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="title">
|
|
<h1>Websocket DEMO</h1>
|
|
</div>
|
|
<div class="ws ws-status border" id="ws_status"></div>
|
|
<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>
|
|
<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>
|
|
<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>
|
|
<script>
|
|
var fs;
|
|
|
|
// init graphs
|
|
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
|
|
graph = new MovingGraph(canvas, dataContainers[i].dataset["color"], 100, 64, Float32Array);
|
|
else
|
|
graph = new Graph(canvas, dataContainers[i].dataset["color"], 100);
|
|
|
|
graph.smooth = true; // Can change on fly
|
|
|
|
graph.postDraw = postDraw;
|
|
|
|
let amount = Math.random() * graph.getLength() * 1.4;
|
|
for (let v = 0; v < amount; v++) {
|
|
graph.add( Math.random() * 100 );
|
|
}
|
|
graph.draw();
|
|
//a = graph;
|
|
|
|
setInterval(function(){
|
|
graph.add( Math.random() * 100 );
|
|
graph.draw();
|
|
}, 100);
|
|
|
|
//break;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|
|
|
|
function postDraw(graph) {
|
|
graph.ctx.beginPath();
|
|
|
|
graph.ctx.moveTo(0, 100);
|
|
graph.ctx.lineTo(10000, 100);
|
|
|
|
graph.ctx.stroke();
|
|
}
|
|
|
|
function callbackData(data) {
|
|
console.log(data);
|
|
}
|
|
|
|
function callbackRaw(data) {
|
|
let hex = Array.from( buffer2HexArray(data) ).join(" ");
|
|
stdout.innerHTML += hex + "\n";
|
|
}
|
|
|
|
function connect() {
|
|
fs = new FLYSocket(
|
|
addr.value, // websocket addr
|
|
callbackData,
|
|
callbackRaw
|
|
);
|
|
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");
|
|
}
|
|
}
|
|
|
|
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;
|
|
}
|
|
fs.ws.send(data);
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |