Enhance web UI

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

View File

@@ -453,7 +453,7 @@ esp_err_t handler_wasserzaehler(httpd_req_t *req)
else {
/* Digital ROIs */
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";
std::vector<HTMLInfo*> htmlinfodig;
@@ -488,7 +488,7 @@ esp_err_t handler_wasserzaehler(httpd_req_t *req)
/* 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";
std::vector<HTMLInfo*> htmlinfoana;
@@ -510,7 +510,7 @@ esp_err_t handler_wasserzaehler(httpd_req_t *req)
/* Full Image
* 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")) ||
(*status == std::string("Initialization (delayed)")) ||
(*status == std::string("Take Image"))) {

View File

@@ -1,7 +1,7 @@
/* 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! */
var domainname_for_testing = "192.168.178.23";
var domainname_for_testing = "192.168.1.151";
/* 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
}
else

View File

@@ -24,11 +24,18 @@
'status=no,toolbar=no,titlebar=no,' +
'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
streamPopup.close();
console.log("loadPage(" + page + ")");
asyncPageLoad(page);
}
async function asyncPageLoad(page ) {
console.log(" loading " + page + " ...");
document.cookie = "page="+page + "; path=/";
document.getElementById('maincontent').src = page;
@@ -37,6 +44,7 @@
});
}
function resetMenu() {
[].forEach.call(document.querySelectorAll('.submenu'), function (el) {
el.style.visibility = 'visible';
@@ -73,6 +81,7 @@
</tr>
</table>
<div class="menu" onmouseover="resetMenu()">
<ul>
<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>
<ul class="submenu">
<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('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>
</ul>
</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('log.html?v=$COMMIT_HASH');">Log Viewer</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('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>
</li>
<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();
LoadFwVersion();
LoadWebUiVersion();
HA_send_discovery_visiblilty();
HA_send_discovery_visibility();
if (getCookie("page") == "" || getCookie("page") == "reboot_page.html?v=$COMMIT_HASH") {
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);
ParseConfig();
category = getConfigCategory();
@@ -182,6 +192,7 @@
function HA_send_discovery() {
console.log("HA Discovery scheduled");
var url = getDomainname() + '/mqtt_publish_discovery';
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {