Console inoutput

This commit is contained in:
Emily 2019-08-01 19:02:02 +02:00
parent 0108839757
commit c9350aa8db

View File

@ -6,8 +6,8 @@
<script src="js/fly-ws.js"></script> <script src="js/fly-ws.js"></script>
<style> <style>
html, body { html, body {
width: 100%; width: 100vw;
height: 100%; height: 100vh;
top: 0px; top: 0px;
left: 0px; left: 0px;
margin: 0px; margin: 0px;
@ -18,8 +18,8 @@
body { body {
grid-template: 100px 50px repeat(4, 1fr) / 50px calc(100vh - 150px) calc((100vh - 150px) / 4) 1fr; grid-template: 100px 50px repeat(4, 1fr) / 50px calc(100vh - 150px) calc((100vh - 150px) / 4) 1fr;
grid-template-areas: "title title title console" grid-template-areas: "title title title stdin"
"ws-status ws-input ws-connect console" "ws-status ws-input ws-connect stdin"
". map data-al console" ". map data-al console"
". map data-sp console" ". map data-sp console"
". map data-ps console" ". map data-ps console"
@ -53,7 +53,7 @@
background: gray; background: gray;
} }
.online { .online {
background: lime; background: lime !important;
} }
.offline { .offline {
background: red; background: red;
@ -63,6 +63,14 @@
justify-self: start; justify-self: start;
} }
.console {
overflow: auto;
}
#stdin > * {
font-size: 20px;
}
/* Yea... im seperating this */ /* Yea... im seperating this */
.title { .title {
grid-area: title; grid-area: title;
@ -94,6 +102,9 @@
.data-hp { .data-hp {
grid-area: data-hp; grid-area: data-hp;
} }
#stdin {
grid-area: stdin;
}
</style> </style>
</head> </head>
@ -101,7 +112,7 @@
<div class="title"> <div class="title">
<h1>Websocket DEMO</h1> <h1>Websocket DEMO</h1>
</div> </div>
<div class="ws ws-status border"></div> <div class="ws ws-status border" id="ws_status"></div>
<div class="ws ws-input"> <div class="ws ws-input">
<input id="addr" value="ws://127.0.0.1:7767"/> <input id="addr" value="ws://127.0.0.1:7767"/>
</div> </div>
@ -113,56 +124,87 @@
<div class="data-sp border"></div> <div class="data-sp border"></div>
<div class="data-ps border"></div> <div class="data-ps border"></div>
<div class="data-hp border"></div> <div class="data-hp border"></div>
<div class="console border" id="stdout"></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> <script>
var fs; var fs;
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) { function callbackData(data) {
console.log(data); console.log(data);
} }
function callbackRaw(data) {
let hex = Array.from( buffer2HexArray(data) ).join(" ");
stdout.innerHTML += hex + "\n";
}
function connect() { function connect() {
fs = new FLYSocket( fs = new FLYSocket(
addr.value, // websocket addr addr.value, // websocket addr
callbackData callbackData,
// callbackRaw 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> </script>
<!--
<script>
function hex(str)
{
var arr1 = [];
for (var n = 0, l = str.length; n < l; n ++)
{
var hex = Number(str.charCodeAt(n)).toString(16);
arr1.push(hex);
}
return arr1.join(' ');
}
var ws = new WebSocket("ws://127.0.0.1:7767/"),
messages = document.createElement('ul');
ws.onmessage = function (event) {
var messages = document.getElementsByTagName('ul')[0],
message = document.createElement('li'),
res = new Response(event.data).arrayBuffer().then(
function(buff) {
last = buff;
data = new DataView(buff);
data_str = "";
for (let i = 0; i < data.byteLength; i++)
data_str += String.fromCharCode(data.getInt8(i));
content = document.createTextNode(data_str + " | " + hex(data_str));
message.appendChild(content);
messages.appendChild(message);
}
);
};
document.body.appendChild(messages);
</script>-->
</body> </body>
</html> </html>