fly-socket/www/main.html

215 lines
7.0 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";
}
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" id="data_al"></div>
<div class="border" id="data_sp"></div>
<div class="border" id="data_ps"></div>
<div class="border" id="data_hp"></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 canvas = document.createElement("canvas");
canvas.width = canvas.height = 215;
data_al.appendChild(canvas);
let graph = new Graph(canvas, "#FFBF00");
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 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>