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>
|
<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>
|
Loading…
Reference in New Issue
Block a user