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

Update html-style

Browse Source 
Update of HTML
This commit is contained in:
jomjol
2020-09-09 21:34:51 +02:00
parent 2159c1e1e5
commit 40953091d7
14 changed files with 326 additions and 398 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
sd-card/html/edit_alignment.html
View File

@@ -5,7 +5,7 @@
<title>Make Alignment</title> <title>Make Alignment</title>
</head> </head>
<div class="body-content"> <div class="body-content" style="font-family: arial">
<div id="createrefernce"> <div id="createrefernce">
<div style="padding-left: 30px"> <div style="padding-left: 30px">

2
sd-card/html/edit_analog.html
View File

@@ -5,7 +5,7 @@
<title>Make Alignment</title> <title>Make Alignment</title>
</head> </head>
<div class="body-content"> <div class="body-content" style="font-family: arial">
<div id="createrefernce"> <div id="createrefernce">
<div style="padding-left: 30px"> <div style="padding-left: 30px">

2
sd-card/html/edit_check.html
View File

@@ -1,5 +1,5 @@
<html> <html>
<body> <body style="font-family: arial">
<table> <table>
<tr><td>Result:</td></tr> <tr><td>Result:</td></tr>

4
sd-card/html/edit_config.html
View File

@@ -1,11 +1,11 @@
<html> <html>
<body> <body style="font-family: arial">
<table> <table>
<tr><td>Config.ini:</td></tr> <tr><td>Config.ini:</td></tr>
<tr> <tr>
<td colspan="3"> <td colspan="3">
<textarea id="inputTextToSave" cols="80" rows="25"></textarea> <textarea id="inputTextToSave" cols="100" rows="40"></textarea>
</td> </td>
</tr> </tr>
<tr> <tr>

82
sd-card/html/edit_config_old.html
View File

@@ -1,82 +0,0 @@
<html>
<body>
<table>
<tr><td>Config.ini:</td></tr>
<tr>
<td colspan="3">
<textarea id="inputTextToSave" cols="80" rows="25"></textarea>
</td>
</tr>
<tr>
<td><button onclick="saveTextAsFile()">Update Config.ini</button></td>
</tr>
</table>
<script type="text/javascript">
function loadConfig() {
var xhr = new XMLHttpRequest();
xhr.onload = function () {
// alert(this.responseText);
document.getElementById("inputTextToSave").value = this.responseText;
};
url = '/fileserver/config/config.ini';
xhr.open('GET', url);
xhr.send();
}
function saveTextAsFile()
{
if (confirm("Are you sure you want to update \"config.ini\"?")) {
var xhttp = new XMLHttpRequest();
/* first delete the old firmware */
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
/* keine Reaktion, damit sich das Dokument nicht ändert */
} else if (xhttp.status == 0) {
alert("Server closed the connection abruptly!");
location.reload()
} else {
alert(xhttp.status + " Error!\n" + xhttp.responseText);
location.reload()
}
}
};
xhttp.open("POST", "/delete/config/config.ini", false);
xhttp.send();
/* ----------------------------- */
var textToSave = document.getElementById("inputTextToSave").value;
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4) {
if (xhttp.status == 200) {
alert("Update \"config.ini\" successfull!\n\nTo make it active you need to reboot.")
document.reload();
} else if (xhttp.status == 0) {
alert("Server closed the connection abruptly!");
location.reload()
} else {
alert(xhttp.status + " Error!\n" + xhttp.responseText);
location.reload()
}
}
};
upload_path = "/upload/config/config.ini";
xhttp.open("POST", upload_path, true);
xhttp.send(textToSave);
}
}
loadConfig();
</script>
</body>
</html>

2
sd-card/html/edit_digits.html
View File

@@ -5,7 +5,7 @@
<title>Make Alignment</title> <title>Make Alignment</title>
</head> </head>
<div class="body-content"> <div class="body-content" style="font-family: arial">
<div id="createrefernce"> <div id="createrefernce">
<div style="padding-left: 30px"> <div style="padding-left: 30px">

2
sd-card/html/edit_reference.html
View File

@@ -5,7 +5,7 @@
<title>Make refernce</title> <title>Make refernce</title>
</head> </head>
<body> <body style="font-family: arial">
<h3>Create Reference out of Raw Image</h3> <h3>Create Reference out of Raw Image</h3>
<div style="padding-left: 30px"> <div style="padding-left: 30px">
<table> <table>

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

@@ -1,115 +1,98 @@
<html><head> <!DOCTYPE html>
<title>jomjol - AI on the edge</title> <html>
<meta charset="utf-8"> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <style>
<style type="text/css" media="screen"> .h_iframe iframe {width:995px;height:700px;}
nav > ul { .h_iframe {width:995px;height:700px;}
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
nav li {
margin: 0.5em;
padding: 0;
font-size: 1.5em;
flex: 1 1 0%;
}
@media (min-width: 45em) {
nav > ul {
flex-direction: row;
}
nav li {
flex: 1;
font-size: 1em;
}
}
nav a {
display: block;
padding: 0.4em;
text-decoration: none;
font-weight: bold;
text-align: center;
border: 1px solid darkblue;
border-radius: 10px;
box-shadow: 0 5px 10px white inset;
color: gold;
background-color: darkblue;
transition: all .25s ease-in;
}
nav li[aria-current] a {
background-color: firebrick;
color: gold;
}
nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
color: darkblue;
background-color: gold;
}
html, body { h1 {font-size: 2em;}
height:100%; h2 {font-size: 1.5em;}
width:100%; p {font-size: 1em;}
margin:0;
}
.h_iframe iframe {
width:98%;
height:80%;
}
.h_iframe {
height: 80%;
width:98%;
}
</style>
<script type="text/javascript">
//<![CDATA[
//]]>
</script> ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
width:1000px;
}
li {
float: left;
font-family: arial;
font-size: 18px;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
font-family: arial;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
</head> </head>
<body> <body style="font-family: arial">
<h1>Watermeter - AI on the edge - an ESP32 all in neural network recognition system</h1>
<nav>
<ul>
<li aria-current="page"><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler_roi.html';">wasserzaehler</a>
<ul class="submenu">
<li><a href="#"onclick="document.getElementById('maincontent').src = '/prevalue_set.html';">Set preValue</a> </li>
<li><a href="index_configure.html">Edit Configuration</a> </li>
<li><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler.html?full';">/wasserzaehler.html?full</a> </li>
</ul>
</li>
<li><a href="#" onclick="document.getElementById('maincontent').src = '/fileserver/';">File Server</a> </li> <h1>Watermeter - AI on the edge</h1>
<h2>An ESP32 all in neural network recognition system</h2>
<li><a href="#">System</a>
<ul class="submenu">
<li><a href="#"onclick="document.getElementById('maincontent').src = '/starttime';">Start time</a> </li>
<li><a href="#"onclick="document.getElementById('maincontent').src = '/ota_page.html';">OTA Update</a> </li>
<li><a href="#"onclick="document.getElementById('maincontent').src = '/reboot_page.html';">Reboot</a> </li>
</ul>
</li>
</ul> <ul>
</nav> <li><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler_roi.html';">Overview</a></li>
<li class="dropdown">
<p> <a href="javascript:void(0)" class="dropbtn">Configuration</a>
<div class="dropdown-content">
<div class="h_iframe"> <a href="#"onclick="document.getElementById('maincontent').src = '/prevalue_set.html';">Set preValue</a>
<iframe name="maincontent" id ="maincontent" src="/wasserzaehler_roi.html" title="fileserver" allowfullscreen></iframe> <a href="index_configure.html">Edit Configuration</a>
</div> </div>
</li>
<li><a href="#"onclick="document.getElementById('maincontent').src = '/wasserzaehler.html?full';">Watermeter</a></li>
<li><a href="#"onclick="document.getElementById('maincontent').src = '/fileserver/';">File Server</a></li>
<li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">System</a>
<div class="dropdown-content">
<a href="#"onclick="document.getElementById('maincontent').src = '/ota_page.html';">OTA Update</a>
<a href="#"onclick="document.getElementById('maincontent').src = '/reboot_page.html';">Reboot</a>
</div>
</ul>
<p>
<div class="h_iframe">
<iframe width="1020px" height="650px" name="maincontent" id ="maincontent" src="/wasserzaehler_roi.html" title="fileserver" allowfullscreen></iframe>
</div>
</body>
</html>
</body></html>

192
sd-card/html/index_configure.html
View File

@@ -2,74 +2,70 @@
<title>jomjol - AI on the edge</title> <title>jomjol - AI on the edge</title>
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css" media="screen"> <style>
nav > ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
nav li {
margin: 0.5em;
padding: 0;
font-size: 1.5em;
flex: 1 1 0%;
}
@media (min-width: 45em) {
nav > ul {
flex-direction: row;
}
nav li {
flex: 1;
font-size: 1em;
}
}
nav a {
display: block;
padding: 0.4em;
text-decoration: none;
font-weight: bold;
text-align: center;
border: 1px solid darkblue;
border-radius: 10px;
box-shadow: 0 5px 10px white inset;
color: gold;
background-color: darkblue;
transition: all .25s ease-in;
}
nav li[aria-current] a {
background-color: firebrick;
color: gold;
}
nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
color: darkblue;
background-color: gold;
}
html, body { .h_iframe iframe {width:995px;height:760px;}
height:100%; .h_iframe {width:995px;height:760px;}
width:100%;
margin:0; h1 {font-size: 2em;}
} h2 {font-size: 1.5em;}
.h_iframe iframe { p {font-size: 1em;}
width:98%;
height:150%; ul {
} list-style-type: none;
.h_iframe { margin: 0;
height: 150%; padding: 0;
width:98%; overflow: hidden;
} background-color: #333;
</style> width:1000px;
}
li {
float: left;
font-family: arial;
font-size: 18px;
}
li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover, .dropdown:hover .dropbtn {
background-color: red;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
font-family: arial;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {background-color: #f1f1f1;}
.dropdown:hover .dropdown-content {
display: block;
}
</style>
<script type="text/javascript"> <script type="text/javascript">
//<![CDATA[ //<![CDATA[
//]]> //]]>
@@ -77,40 +73,32 @@
</script> </script>
</head> </head>
<body> <body style="font-family: arial">
<h1>Configure watermeter</h1>
<nav>
<ul>
<h1>Configure Watermeter</h1>
<li><a href="#" onclick="document.getElementById('maincontent').src = 'edit_config.html';">CONFIG.INI direct</a> </li>
<li><a href="#">Alignment</a>
<ul class="submenu">
<li><a href="#"onclick="document.getElementById('maincontent').src = 'edit_reference.html';">Reference Image</a> </li>
<li><a href="#"onclick="document.getElementById('maincontent').src = 'edit_alignment.html';">Alignment Marks</a> </li>
</ul>
</li>
<li><a href="#">Regions of interest</a>
<ul class="submenu">
<li><a href="#"onclick="document.getElementById('maincontent').src = 'edit_digits.html';">Digital ROIs</a> </li>
<li><a href="#"onclick="document.getElementById('maincontent').src = 'edit_analog.html';">Analog ROIs</a> </li>
</ul>
</li>
<li><a href="#" onclick="document.getElementById('maincontent').src = 'edit_check.html';">Check</a> </li> <ul>
<li aria-current="page"><a href="index.html">Main</a> <li aria-current="page"><a href="index.html">Main Page</a>
</li> <li><a href="#"onclick="document.getElementById('maincontent').src = 'edit_config.html';">CONFIG.INI direct</a></li>
</ul> <li class="dropdown">
</nav> <a href="javascript:void(0)" class="dropbtn">Alignment</a>
<div class="dropdown-content">
<p> <a href="#"onclick="document.getElementById('maincontent').src = 'edit_reference.html';">Reference Image</a>
<a href="#"onclick="document.getElementById('maincontent').src = 'edit_alignment.html';">Alignment Marks</a>
<div class="h_iframe"> </div>
<iframe name="maincontent" id="maincontent" src="edit_config.html" title="fileserver"></iframe> </li>
</div> <li class="dropdown">
<a href="javascript:void(0)" class="dropbtn">Regions Of Interest (ROI)</a>
<div class="dropdown-content">
<a href="#"onclick="document.getElementById('maincontent').src = 'edit_digits.html';">Digital ROIs</a>
<a href="#"onclick="document.getElementById('maincontent').src = 'edit_analog.html';">Analog ROIs</a>
</div>
</body></html> </li>
<li><a href="#" onclick="document.getElementById('maincontent').src = 'edit_check.html';">Check</a></li>
</ul>
<p>
<div class="h_iframe">
<iframe width="1020px" height="650px" name="maincontent" id ="maincontent" src="edit_config.html" title="fileserver"></iframe>
</div>
</body>
</html>

2
sd-card/html/ota_page.html
View File

@@ -9,7 +9,7 @@
</script> </script>
</head> </head>
<body> <body style="font-family: arial">
<h3>It is strongly recommended to update firmware and content of /html directory on SD-card at the same time!</h3> <h3>It is strongly recommended to update firmware and content of /html directory on SD-card at the same time!</h3>
<h2>1. Firmware Update</h2> <h2>1. Firmware Update</h2>
<table class="fixed" border="0"> <table class="fixed" border="0">

57
sd-card/html/prevalue_set.html
View File

@@ -9,13 +9,50 @@
</script> </script>
</head> </head>
<body> <style>
<table style="width:100%"> h1 {font-size: 2em;}
h2 {font-size: 1.5em;}
p {font-size: 1em;}
</style>
<script>
function includeHTML() {
var z, i, elmnt, file, xhttp;
/* Loop through a collection of all HTML elements: */
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* Make an HTTP request using the attribute value as the file name: */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/* Remove the attribute, and call this function once more: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
}
}
}
</script>
<body style="font-family: arial">
<table style="width:100%">
<tr> <tr>
Current Value:<p> <h2>Current Value:</h2><p>
<iframe name="currentvalue" id ="currentvalue" src="/setPreValue.html" title="fileserver" allowfullscreen></iframe> <div w3-include-html="/setPreValue.html"></div>
</tr> </tr>
<tr> <tr>
<h2>Set Value:</h2><p>
Input (Format = 123.456):<p> Input (Format = 123.456):<p>
PreValue: PreValue:
<input type="number" id="myInput" name="myInput" <input type="number" id="myInput" name="myInput"
@@ -24,8 +61,8 @@
<button type="button" onclick="setprevalue()">Set PreValue</button> <button type="button" onclick="setprevalue()">Set PreValue</button>
</tr> </tr>
<tr> <tr>
Result:<p> <h2>Result:</h2><p>
<iframe name="result" id ="result" src="" title="fileserver" allowfullscreen></iframe> <div id="result"> </div>
</tr> </tr>
</table> </table>
@@ -34,10 +71,14 @@
function setprevalue() { function setprevalue() {
var inputVal = document.getElementById("myInput").value; var inputVal = document.getElementById("myInput").value;
inputVal = inputVal.replace(",", "."); inputVal = inputVal.replace(",", ".");
_value = "/setPreValue.html?value="+inputVal; _value = "<object data=" + "/setPreValue.html?value=" + inputVal + " ></object>";
document.getElementById('result').src = _value; document.getElementById("result").innerHTML=_value;
// location.reload(); // location.reload();
} }
</script> </script>
<script>
includeHTML();
</script>
</body></html> </body></html>

12
sd-card/html/reboot_page.html
View File

@@ -9,26 +9,28 @@
</script> </script>
</head> </head>
<body> <body style="font-family: arial">
<h2>Do you really want to reboot your system now?</h2>
<table class="fixed" border="0"> <table class="fixed" border="0">
<tr> <tr>
<td> <td>
<button id="reboot" type="button" onclick="doReboot()">Reboot</button> <button id="reboot" type="button" onclick="doReboot()">Yes, please reboot now</button>
</td> </td>
</tr> </tr>
</table> </table>
<script> <script>
function doReboot() { function doReboot() {
if (confirm("Are you sure you want to reboot the ESP32?")) { // if (confirm("Are you sure you want to reboot the ESP32?")) {
var stringota = "/reboot"; var stringota = "/reboot";
window.location = stringota; window.location = stringota;
window.location.href = stringota; window.location.href = stringota;
window.location.assign(stringota); window.location.assign(stringota);
window.location.replace(stringota); window.location.replace(stringota);
} // }
} }
</script> </script>
</body></html> </body></html>

2
sd-card/html/upload_script.html
View File

@@ -1,4 +1,4 @@
<table class="fixed" border="0"> <table class="fixed" border="0" style="font-family: arial">
<col width="300px" /><col width="200px" /> <col width="300px" /><col width="200px" />
<tr><td> <tr><td>
<h2>ESP32 File Server</h2> <h2>ESP32 File Server</h2>

164
sd-card/html/wasserzaehler_roi.html
View File

@@ -3,95 +3,91 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<style type="text/css" media="screen"> <style type="text/css" media="screen">
nav > ul { .tg {border-collapse:collapse;border-spacing:0;width:100%;color: darkslategray;border: inset;}
list-style: none; .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
margin: 0; .tg th{font-family:Arial, sans-serif;font-size:24px;font-weight:bold;text-align:left;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
padding: 0; .tg .tg-hfl5{font-size:20px;font-family:Arial, Helvetica, sans-serif !important;border: inset;}
display: flex;
flex-direction: column;
}
nav li {
margin: 0.5em;
padding: 0;
font-size: 1.5em;
flex: 1 1 0%;
}
@media (min-width: 45em) {
nav > ul {
flex-direction: row;
}
nav li {
flex: 1;
font-size: 1em;
}
}
nav a {
display: block;
padding: 0.4em;
text-decoration: none;
font-weight: bold;
text-align: center;
border: 1px solid darkblue;
border-radius: 10px;
box-shadow: 0 5px 10px white inset;
color: gold;
background-color: darkblue;
transition: all .25s ease-in;
}
nav li[aria-current] a {
background-color: firebrick;
color: gold;
}
nav a:focus,
nav a:hover,
nav li[aria-current] a:focus,
nav li[aria-current] a:hover {
color: darkblue;
background-color: gold;
}
html, body {
height:100%;
width:100%;
margin:0;
}
.h_iframe iframe {
width:100%;
height:100%;
}
.h_iframe {
height: 100%;
width:100%;
}
</style> </style>
<script type="text/javascript">
</script>
</head> </head>
<body> <script>
<table style="width:100%"> function includeHTML() {
var z, i, elmnt, file, xhttp;
/* Loop through a collection of all HTML elements: */
z = document.getElementsByTagName("*");
for (i = 0; i < z.length; i++) {
elmnt = z[i];
/*search for elements with a certain atrribute:*/
file = elmnt.getAttribute("w3-include-html");
if (file) {
/* Make an HTTP request using the attribute value as the file name: */
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
/* Remove the attribute, and call this function once more: */
elmnt.removeAttribute("w3-include-html");
includeHTML();
}
}
xhttp.open("GET", file, true);
xhttp.send();
/* Exit the function: */
return;
}
}
}
</script>
<body style="font-family: arial">
<table class="tg">
<tr> <tr>
<td> <img src="/img_tmp/alg_roi.jpg" alt="ROI-Image"> </td> <td class="tg-hfl5" rowspan="8"><img src="/img_tmp/alg_roi.jpg" alt="ROI-Image"></td>
<td> <th class="th">
<table> Raw Value:
<tr> </th>
Raw Value:<p> </tr>
<iframe name="maincontent1" id ="maincontent1" src="/wasserzaehler.html?rawvalue=true" title="fileserver" allowfullscreen></iframe> <tr>
</tr> <td class="tg-hfl5">
<tr> <div w3-include-html="/wasserzaehler.html?rawvalue=true"></div>
Corrected Value:<p> </td>
<iframe name="maincontent2" id ="maincontent2" src="/wasserzaehler.html" title="fileserver" allowfullscreen></iframe>
</tr>
</table>
</td>
</tr> </tr>
<tr>
<th class="th">
Corrected Value:
</th>
</tr>
<tr>
<td class="tg-hfl5">
<div w3-include-html="/wasserzaehler.html"></div>
</td>
</tr>
<tr>
<th class="th">
Current Value:
</th>
</tr>
<tr>
<td class="tg-hfl5">
<div w3-include-html="/setPreValue.html"></div>
</td>
</tr>
<tr>
<th class="th">
Start Time:
</th>
</tr>
<tr>
<td class="tg-hfl5">
<div w3-include-html="/starttime"></div>
</td>
</tr>
</table> </table>
<script>
includeHTML();
</script>
</body></html> </body></html>