mirror of
https://github.com/jomjol/AI-on-the-edge-device.git
synced 2025-12-06 11:36:51 +03:00
91 lines
2.0 KiB
HTML
91 lines
2.0 KiB
HTML
<html>
|
|
<head>
|
|
<style>
|
|
#rx {
|
|
font-family: 'Courier New', Courier, monospace;
|
|
font-size: small;
|
|
}
|
|
</style>
|
|
<script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script>
|
|
</head>
|
|
<body>
|
|
|
|
<div id="state">State: Please wait...</div>
|
|
<hr>
|
|
<div id="img">Image: Please wait...</div>
|
|
<hr>
|
|
<div id="rx">Events:<br></div>
|
|
|
|
|
|
<script>
|
|
var gateway = getDomainname().replace("http://", "ws://") + "/ws";
|
|
var websocket;
|
|
|
|
window.addEventListener('load', onLoad);
|
|
|
|
function initWebSocket() {
|
|
console.log('Trying to open a WebSocket connection...');
|
|
addToLog('Trying to open a WebSocket connection...');
|
|
|
|
websocket = new WebSocket(gateway);
|
|
websocket.onopen = onOpen;
|
|
websocket.onclose = onClose;
|
|
websocket.onmessage = onMessage; // <-- add this line
|
|
}
|
|
|
|
|
|
function onOpen(event) {
|
|
console.log('Connection opened');
|
|
addToLog('Connection opened');
|
|
}
|
|
|
|
|
|
function onClose(event) {
|
|
console.log('Connection closed');
|
|
addToLog('Connection closed');
|
|
setTimeout(initWebSocket, 2000);
|
|
}
|
|
|
|
|
|
function onMessage(event) {
|
|
console.log(event);
|
|
addToLog(event.data);
|
|
|
|
data = JSON.parse(event.data)
|
|
|
|
// State
|
|
if (data.hasOwnProperty("state")) {
|
|
processStateChange(data.state);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
function onLoad(event) {
|
|
initWebSocket();
|
|
}
|
|
|
|
|
|
function addToLog(msg) {
|
|
document.getElementById('rx').innerHTML += "[" + new Date().toLocaleTimeString() + "] " + msg + "<br>\n";
|
|
window.scrollBy(0,document.body.scrollHeight);
|
|
}
|
|
|
|
function processStateChange(state) {
|
|
document.getElementById('state').innerHTML = "State: <b>" + data.state + "</b>";
|
|
|
|
// TODO only reload image for those steps where it changed...
|
|
var d = new Date();
|
|
var timestamp = d.getTime();
|
|
document.getElementById('img').innerHTML = 'Image: <br><img src=' + getDomainname() + '/img_tmp/alg_roi.jpg?timestamp='+ timestamp +'" height=200px;"></img>';
|
|
}
|
|
|
|
|
|
function updateImage() {
|
|
|
|
}
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|