LailaTheElf/rcrf-wifi
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
Laila van Reenen
2024-08-12 21:22:06 +02:00
parent 3adec932bf
commit c3737936c4
3 changed files with 95 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
index.html
View File

@@ -29,60 +29,83 @@
var boatListEl = document.getElementById('boats');
var stickEl = document.getElementById('canvas');
var connection = new WebSocket('ws://' + "10.254.0.1" + ':8080/', ['mbcRcRf']);
var connection = false;
var refresh_timer = false;
var state = "connecting";
connection.onopen = function ()
function conn_onopen()
{
connection.send(clientId + ';4675;' + Math.floor(new Date().getTime()/1000.0).toString());
setTimeout(() => { connection.send(clientId + ';boats'); }, 100);
state = "connected";
};
connection.onerror = function (error)
function conn_onerror(error)
{
console.log('WebSocket Error ', error);
alert('WebSocket Error ', error);
//connection.onmessage({ data: "boats:50;test 1;available:164;tosti;available" })
};
connection.onmessage = function (e)
function conn_onmessage(e)
{
let data = e.data.split(':');
if (data[0] == "boats")
{
console.log("boats: ", data);
boatListEl.innerHTML = "";
stickEl.style.display = 'none';
boatListEl.style.display = 'block';
for (let boat in data)
if (state == 'connected')
{
boat = data[boat].split(';');
if ((boat.length == 3) && (boat[2] == 'available'))
console.log("boats: ", data);
boatListEl.innerHTML = "";
stickEl.style.display = 'none';
boatListEl.style.display = 'block';
for (let boat in data)
{
console.log("render boat", boat);
let el = document.createElement("div");
el.style.textAlign = "center";
el.style.borderRadius = "10px";
el.style.backgroundColor = "#242495";
el.style.padding = "10px";
el.style.margin = "5px 25%";
el.style.color = "white";
el.style.cursor = "pointer";
el.id = "boat" + boat[0];
el.innerHTML = boat[1];
el.addEventListener('click', selectBoat);
boatListEl.appendChild(el);
boat = data[boat].split(';');
if ((boat.length == 3) && (boat[2] == 'available'))
{
console.log("render boat", boat);
let el = document.createElement("div");
el.style.textAlign = "center";
el.style.borderRadius = "10px";
el.style.backgroundColor = "#242495";
el.style.padding = "10px";
el.style.margin = "5px 25%";
el.style.color = "white";
el.style.cursor = "pointer";
el.id = "boat" + boat[0];
el.innerHTML = boat[1];
el.addEventListener('click', selectBoat);
boatListEl.appendChild(el);
}
}
if (refresh_timer)
{
clearTimeout(refresh_timer);
}
refresh_timer = setTimeout(()=>{connection.send(clientId + ';boats')}, 1000)
}
}
else if (data[0] == "FAIL")
{
console.error("ground station send FAIL");
connection.send(clientId + ';boats');
}
else
{
console.log('Server: ', e.data);
}
};
function connect()
{
connection = new WebSocket('ws://10.254.0.1:8080/', ['mbcRcRf']);
connection.onopen = conn_onopen;
connection.onerror = conn_onerror;
connection.onmessage = conn_onmessage;
}
function selectBoat(e)
{
clearTimeout(refresh_timer);
connection.send(clientId + ';ctrl;' + e.target.id.split('boat')[1]);
console.log('ctrl:', e.target.id.split('boat')[1]);
stickEl.style.display = 'block';