Mirror/AI-on-the-edge-device
1
0
Fork 0
mirror of https://github.com/jomjol/AI-on-the-edge-device.git synced 2025-12-13 23:16:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

add example UI

Browse Source
This commit is contained in:
CaCO3
2023-04-30 22:47:09 +02:00
parent 716dcb5a84
commit a5d2086159
4 changed files with 55 additions and 9 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
sd-card/html/websocket.html
View File

@@ -10,7 +10,11 @@
</head>
<body>
<div id="rx"></div>
<div id="state">State: Please wait...</div>
<hr>
<div id="img">Image: Please wait...</div>
<hr>
<div id="rx">Events:<br></div>
<script>
@@ -45,7 +49,14 @@
function onMessage(event) {
console.log(event);
addToLog(event.data);
addToLog(event.data);
data = JSON.parse(event.data)
// State
if (data.hasOwnProperty("state")) {
processStateChange(data.state);
}
}
@@ -56,9 +67,23 @@
function addToLog(msg) {
document.getElementById('rx').innerHTML += "[" + new Date().toLocaleTimeString() + "] " +msg + "<br>\n";
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>