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-08 20:46:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

Enhance web UI

Browse Source
This commit is contained in:
CaCO3
2023-05-22 23:43:33 +02:00
parent e7dbebffa1
commit d47ed060b0
3 changed files with 26 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
code/components/jomjol_flowcontroll/MainFlowControl.cpp
View File

@@ -453,7 +453,7 @@ esp_err_t handler_wasserzaehler(httpd_req_t *req)
else { else {
/* Digital ROIs */ /* Digital ROIs */
txt = "<body style=\"font-family: arial\">"; txt = "<body style=\"font-family: arial\">";
txt += "<h3>Recognized Digit ROIs (previous round)</h3>\n"; txt += "<hr><h3>Recognized Digit ROIs (previous round)</h3>\n";
txt += "<table style=\"border-spacing: 5px\"><tr style=\"text-align: center; vertical-align: top;\">\n"; txt += "<table style=\"border-spacing: 5px\"><tr style=\"text-align: center; vertical-align: top;\">\n";
std::vector<HTMLInfo*> htmlinfodig; std::vector<HTMLInfo*> htmlinfodig;
@@ -488,7 +488,7 @@ esp_err_t handler_wasserzaehler(httpd_req_t *req)
/* Analog ROIs */ /* Analog ROIs */
txt = "<h3>Recognized Analog ROIs (previous round)</h3>\n"; txt = "<hr><h3>Recognized Analog ROIs (previous round)</h3>\n";
txt += "<table style=\"border-spacing: 5px\"><tr style=\"text-align: center; vertical-align: top;\">\n"; txt += "<table style=\"border-spacing: 5px\"><tr style=\"text-align: center; vertical-align: top;\">\n";
std::vector<HTMLInfo*> htmlinfoana; std::vector<HTMLInfo*> htmlinfoana;
@@ -510,7 +510,7 @@ esp_err_t handler_wasserzaehler(httpd_req_t *req)
/* Full Image /* Full Image
* Only show it after the image got taken and aligned */ * Only show it after the image got taken and aligned */
txt = "<h3>Aligned Image (current round)</h3>\n"; txt = "<hr><h3>Aligned Image (current round)</h3>\n";
if ((*status == std::string("Initialization")) || if ((*status == std::string("Initialization")) ||
(*status == std::string("Initialization (delayed)")) || (*status == std::string("Initialization (delayed)")) ||
(*status == std::string("Take Image"))) { (*status == std::string("Take Image"))) {

4
sd-card/html/common.js
View File

@@ -1,7 +1,7 @@
/* The UI can also be run locally, but you have to set the IP of your devide accordingly. /* The UI can also be run locally, but you have to set the IP of your devide accordingly.
* And you also might have to disable CORS in your webbrowser! */ * And you also might have to disable CORS in your webbrowser! */
var domainname_for_testing = "192.168.178.23"; var domainname_for_testing = "192.168.1.151";
/* Returns the domainname with prepended protocol. /* Returns the domainname with prepended protocol.
@@ -13,7 +13,7 @@ function getDomainname(){
) )
{ {
console.log("Using pre-defined domainname for testing: " + domainname_for_testing); //console.log("Using pre-defined domainname for testing: " + domainname_for_testing);
domainname = "http://" + domainname_for_testing domainname = "http://" + domainname_for_testing
} }
else else

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

@@ -24,11 +24,18 @@
'status=no,toolbar=no,titlebar=no,' + 'status=no,toolbar=no,titlebar=no,' +
'left=10,top=250,width=640px,height=480px'; 'left=10,top=250,width=640px,height=480px';
async function loadPage(page) { function loadPage(page) {
console.log("loadPage( " + page + " )");
if (streamPopup) // Ensure that stream popup is closed because it's blocking web interface if (streamPopup) // Ensure that stream popup is closed because it's blocking web interface
streamPopup.close(); streamPopup.close();
console.log("loadPage(" + page + ")"); asyncPageLoad(page);
}
async function asyncPageLoad(page ) {
console.log(" loading " + page + " ...");
document.cookie = "page="+page + "; path=/"; document.cookie = "page="+page + "; path=/";
document.getElementById('maincontent').src = page; document.getElementById('maincontent').src = page;
@@ -37,6 +44,7 @@
}); });
} }
function resetMenu() { function resetMenu() {
[].forEach.call(document.querySelectorAll('.submenu'), function (el) { [].forEach.call(document.querySelectorAll('.submenu'), function (el) {
el.style.visibility = 'visible'; el.style.visibility = 'visible';
@@ -73,6 +81,7 @@
</tr> </tr>
</table> </table>
<div class="menu" onmouseover="resetMenu()"> <div class="menu" onmouseover="resetMenu()">
<ul> <ul>
<li><a href="#" onclick="loadPage('overview.html?v=$COMMIT_HASH');">Overview</a></li> <li><a href="#" onclick="loadPage('overview.html?v=$COMMIT_HASH');">Overview</a></li>
@@ -98,8 +107,13 @@
<li><a>Data<i class="arrow down"></i></a> <li><a>Data<i class="arrow down"></i></a>
<ul class="submenu"> <ul class="submenu">
<li><a href="#" onclick="loadPage(getDomainname() + '/value?full');">Recognition</a></li> <li><a href="#" onclick="loadPage(getDomainname() + '/value?full');">Recognition</a></li>
<li><a>Livestream <i class="arrow right"></i></a>
<ul>
<li><a href="#" onclick="start_livestream(false);">Live Stream (Light off)</a></li>
<li><a href="#" onclick="start_livestream(true);">Live Stream (Light on)</a></li>
</ul>
<li><a href="#" onclick="loadPage('graph.html?v=$COMMIT_HASH');">Data Graph</a></li> <li><a href="#" onclick="loadPage('graph.html?v=$COMMIT_HASH');">Data Graph</a></li>
<li><a href="#" onclick="loadPage('data.html?v=$COMMIT_HASH');">Data Viewer</a></li> <li><a href="#" onclick="loadPage('data.html?v=$COMMIT_HASH');">Data Table</a></li>
<li><a href="#" onclick="loadPage(getDomainname() + '/fileserver/log/data/');">Data Files</a></li> <li><a href="#" onclick="loadPage(getDomainname() + '/fileserver/log/data/');">Data Files</a></li>
</ul> </ul>
</li> </li>
@@ -111,13 +125,9 @@
<li><a href="#" onclick="loadPage('ota_page.html?v=$COMMIT_HASH');">OTA Update</a></li> <li><a href="#" onclick="loadPage('ota_page.html?v=$COMMIT_HASH');">OTA Update</a></li>
<li><a href="#" onclick="loadPage('log.html?v=$COMMIT_HASH');">Log Viewer</a></li> <li><a href="#" onclick="loadPage('log.html?v=$COMMIT_HASH');">Log Viewer</a></li>
<li><a href="#" onclick="loadPage(getDomainname() + '/fileserver/');">File Server</a></li> <li><a href="#" onclick="loadPage(getDomainname() + '/fileserver/');">File Server</a></li>
<li><a>Livestream <i class="arrow right"></i></a>
<ul>
<li><a href="#" onclick="start_livestream(false);">Live Stream (Light off)</a></li>
<li><a href="#" onclick="start_livestream(true);">Live Stream (Light on)</a></li>
</ul>
<li><a href="#" onclick="loadPage('reboot_page.html?v=$COMMIT_HASH');">Reboot</a></li> <li><a href="#" onclick="loadPage('reboot_page.html?v=$COMMIT_HASH');">Reboot</a></li>
<li><a href="#" onclick="loadPage('info.html?v=$COMMIT_HASH');">Info</a></li> <li><a href="#" onclick="loadPage('info.html?v=$COMMIT_HASH');">Info</a></li>
<li><a href="https://jomjol.github.io/AI-on-the-edge-device-docs/" target="_blank">Help</a></li>
</ul> </ul>
</li> </li>
<li id="ManualControl" style="display:none;"><a>Manual Control <i class="arrow down"></i></a> <!-- Workaround: Hide menu if no entry is available --> <li id="ManualControl" style="display:none;"><a>Manual Control <i class="arrow down"></i></a> <!-- Workaround: Hide menu if no entry is available -->
@@ -137,7 +147,7 @@
LoadHostname(); LoadHostname();
LoadFwVersion(); LoadFwVersion();
LoadWebUiVersion(); LoadWebUiVersion();
HA_send_discovery_visiblilty(); HA_send_discovery_visibility();
if (getCookie("page") == "" || getCookie("page") == "reboot_page.html?v=$COMMIT_HASH") { if (getCookie("page") == "" || getCookie("page") == "reboot_page.html?v=$COMMIT_HASH") {
document.cookie = "page=overview.html?v=$COMMIT_HASH" + "; path=/"; document.cookie = "page=overview.html?v=$COMMIT_HASH" + "; path=/";
@@ -169,7 +179,7 @@
*/ */
function HA_send_discovery_visiblilty() { function HA_send_discovery_visibility() {
loadConfig(domainname); loadConfig(domainname);
ParseConfig(); ParseConfig();
category = getConfigCategory(); category = getConfigCategory();
@@ -182,6 +192,7 @@
function HA_send_discovery() { function HA_send_discovery() {
console.log("HA Discovery scheduled");
var url = getDomainname() + '/mqtt_publish_discovery'; var url = getDomainname() + '/mqtt_publish_discovery';
var xhttp = new XMLHttpRequest(); var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() { xhttp.onreadystatechange = function() {