Console inoutput
This commit is contained in:
parent
0108839757
commit
c9350aa8db
130
www/main.html
130
www/main.html
|
|
@ -6,8 +6,8 @@
|
|||
<script src="js/fly-ws.js"></script>
|
||||
<style>
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
margin: 0px;
|
||||
|
|
@ -18,8 +18,8 @@
|
|||
|
||||
body {
|
||||
grid-template: 100px 50px repeat(4, 1fr) / 50px calc(100vh - 150px) calc((100vh - 150px) / 4) 1fr;
|
||||
grid-template-areas: "title title title console"
|
||||
"ws-status ws-input ws-connect console"
|
||||
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"
|
||||
|
|
@ -53,7 +53,7 @@
|
|||
background: gray;
|
||||
}
|
||||
.online {
|
||||
background: lime;
|
||||
background: lime !important;
|
||||
}
|
||||
.offline {
|
||||
background: red;
|
||||
|
|
@ -63,6 +63,14 @@
|
|||
justify-self: start;
|
||||
}
|
||||
|
||||
.console {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
#stdin > * {
|
||||
font-size: 20px;
|
||||
}
|
||||
|
||||
/* Yea... im seperating this */
|
||||
.title {
|
||||
grid-area: title;
|
||||
|
|
@ -94,6 +102,9 @@
|
|||
.data-hp {
|
||||
grid-area: data-hp;
|
||||
}
|
||||
#stdin {
|
||||
grid-area: stdin;
|
||||
}
|
||||
|
||||
</style>
|
||||
</head>
|
||||
|
|
@ -101,7 +112,7 @@
|
|||
<div class="title">
|
||||
<h1>Websocket DEMO</h1>
|
||||
</div>
|
||||
<div class="ws ws-status border"></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>
|
||||
|
|
@ -113,56 +124,87 @@
|
|||
<div class="data-sp border"></div>
|
||||
<div class="data-ps 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>
|
||||
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) {
|
||||
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
|
||||
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>
|
||||
<!--
|
||||
<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>
|
||||
</html>
|
||||
Loading…
Reference in New Issue
Block a user