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-07 20:16:55 +03:00
Code Issues Packages Projects Releases Wiki Activity

Updated web pages (#2055)

Browse Source 
* allow longer file paths

* updated web pages

* updated the setup pages

* .

* Update server_file.cpp

---------

Co-authored-by: CaCO3 <caco@ruinelli.ch>
This commit is contained in:
CaCO3
2023-02-21 22:35:50 +01:00
committed by GitHub
parent 2ed9fb8eb5
commit 3d92860c5e
13 changed files with 94 additions and 110 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<link rel="icon" href="favicon.ico?v=$COMMIT_HASH" type="image/x-icon"> <link rel="icon" href="favicon.ico?v=$COMMIT_HASH" type="image/x-icon">
<title>Make Alignment</title> <title>Alignment Marks</title>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<style> <style>
@@ -48,7 +48,11 @@ select {
<body style="font-family: arial; padding: 0px 10px;"> <body style="font-family: arial; padding: 0px 10px;">
<h2>Define Alignment Structure in Reference Image</h2> <h2>Alignment Marks</h2>
<p>On this page you define two Reference Marks.
See <a href=https://jomjol.github.io/AI-on-the-edge-device-docs/Alignment/ target=_blank>https://jomjol.github.io/AI-on-the-edge-device-docs/Alignment/</a> for explanations.</p>
<p>After saving the Reference Marks, you can define the <a href=edit_digits.html>digit</a> resp. <a href=edit_analog.html>analog</a> ROI's.<br>
Only after those steps a reboot is required.</p>
<table> <table>
<tr> <tr>
@@ -88,10 +92,8 @@ select {
<table> <table>
<tr> <tr>
<td><input class="button" type="submit" name="saveroi" onclick="SaveToConfig()" value="Save"></td> <td><input class="button" type="submit" name="saveroi" onclick="SaveToConfig()" value="Save">
</tr> <p>Proceed to update the <a href=edit_digits.html>digit</a> resp. <a href=edit_analog.html>analog</a> ROI's when you are done.</p></td>
<tr>
<td><button class="button" id="reboot" type="button" onclick="doReboot()">Reboot to activate changes</button></td>
</tr> </tr>
</table> </table>

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

@@ -3,7 +3,7 @@
<head> <head>
<link rel="icon" href="favicon.ico?v=$COMMIT_HASH" type="image/x-icon"> <link rel="icon" href="favicon.ico?v=$COMMIT_HASH" type="image/x-icon">
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>Make Analog Alignment</title> <title>Analog ROI's</title>
<style> <style>
h1 {font-size: 2em;} h1 {font-size: 2em;}
@@ -67,9 +67,11 @@ th, td {
<body style="font-family: arial; padding: 0px 10px;"> <body style="font-family: arial; padding: 0px 10px;">
<h2><input type="checkbox" id="Category_Analog_enabled" value="1" onclick = 'EnDisableAnalog()' checked > <h2>Analog ROI's</h2>
Edit Analog</h2> <p>On this page you define ROI's for the analog counters.
See <a href=https://jomjol.github.io/AI-on-the-edge-device-docs/ROI-Configuration/ target=_blank>https://jomjol.github.io/AI-on-the-edge-device-docs/ROI-Configuration/</a> for explanations.</p>
<input type="checkbox" id="Category_Analog_enabled" value="1" onclick = 'EnDisableAnalog()' checked ><label for="Category_Analog_enabled">Enable Analog ROI's</label></p>
<div id="div1"> <div id="div1">
<table> <table>
@@ -134,10 +136,10 @@ th, td {
<table> <table>
<tr> <tr>
<td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save" tabindex=9></td> <td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save" tabindex=9>
</tr> </tr>
<tr> <tr>
<td><button class="button" id="reboot" type="button" onclick="doReboot()">Reboot to activate changes</button></td> <td><button class="button" id="reboot" type="button" onclick="doReboot()">Reboot to activate the changes</button></td>
</tr> </tr>
</table> </table>

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

@@ -3,7 +3,7 @@
<head> <head>
<link rel="icon" href="favicon.ico?v=$COMMIT_HASH" type="image/x-icon"> <link rel="icon" href="favicon.ico?v=$COMMIT_HASH" type="image/x-icon">
<meta charset="utf-8"/> <meta charset="utf-8"/>
<title>Make Digital Alignment</title> <title>Digit ROI's</title>
<style> <style>
h1 {font-size: 2em;} h1 {font-size: 2em;}
@@ -58,8 +58,15 @@ th, td {
<body style="font-family: arial; padding: 0px 10px;"> <body style="font-family: arial; padding: 0px 10px;">
<h2><input type="checkbox" id="Category_Digits_enabled" value="1" onclick = 'EnDisableDigits()' checked > <h2>Digit ROI's</h2>
Edit Digits</h2> <p>On this page you define ROI's for the digits.
See <a href=https://jomjol.github.io/AI-on-the-edge-device-docs/ROI-Configuration/ target=_blank>https://jomjol.github.io/AI-on-the-edge-device-docs/ROI-Configuration/</a> for explanations.</p>
<p><input type="checkbox" id="Category_Digits_enabled" value="1" onclick = 'EnDisableDigits()' checked><label for="Category_Digits_enabled">Enable Digit ROI's</label></p>
<p>After saving the digit ROI's, you can define the <a href=edit_analog.html>analog</a> ROI's if your meter has analog counters.<br>
Only after those steps a reboot is required.</p>
<div id="div1"> <div id="div1">
@@ -126,10 +133,8 @@ th, td {
<table> <table>
<tr> <tr>
<td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save" tabindex=10></td> <td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save" tabindex=10>
</tr> <p>Proceed to update the <a href=edit_analog.html>analog</a> ROI's when you are done or <a href=reboot_page.html>reboot</a> if there are no analogue counters.</p></td>
<tr>
<td><button class="button" id="reboot" type="button" onclick="doReboot()">Reboot to activate changes</button></td>
</tr> </tr>
</table> </table>

43
sd-card/html/edit_explain_0.html
View File

@@ -28,12 +28,12 @@ p {font-size: 1em;}
<p> <p>
This is the first time you started the digitizer after the initial installation. You have been automatically routed to the <b>initial setup procedure</b>. This is the first time you started the digitizer after the initial installation. You have been automatically routed to the <b>initial setup procedure</b>.
Here you adjust the settings for your counter within five steps. In the final step the inital setup will be disabled and it will restart to the normal mode. Here you adjust the settings for your meter within five steps. In the final step the inital setup will be disabled and it will restart to the normal mode.
All settings will also be accessible there. All settings will also be accessible there. See <a href=https://jomjol.github.io/AI-on-the-edge-device-docs/initial-setup target=_blank>
<br> https://jomjol.github.io/AI-on-the-edge-device-docs/initial-setup</a> for additional explanations.</p>
<br> </p>
You can navigate forward and backward during the setup with the buttons "Next" and "Previous".<br><br> <p>You can navigate forward and backward during the setup with the buttons "Next" and "Previous".<br><br>
<span color=red>Do not forget to save in each step!</span><br> <span color=red>Do not forget to save in each step before heading to another step!</span><br>
</p> </p>
<p> <p>
This is an overview over the five steps: This is an overview over the five steps:
@@ -41,26 +41,27 @@ p {font-size: 1em;}
<p> <p>
<ol> <ol>
<li>Create reference image <br> <li><p>Create the <b>Reference Image</b>.<br>
Base for the position referencing and the identification of the digits and counters.</li> It is the base for the position referencing and the identification of the digits and counters.</p></li>
<li>Define two unique references <br> <li><p>Define two unique <b>Reference Marks</b>.<br>
Used to align the individual camera shot and identify the absolut positions</li> They is used to align the individual camera images and identify the absolut positions.</p></li>
<li>Define the digits <br> <li></p>Define <b>ROI's</b> for the <b>Digits</b>.<br>
Digital digits to be recognized</li> They will be used to digitize the digit part of your meter.<br>
<li>Define the analog counters <br> If your meter has no digits, this step can be skipped.</p></li>
Analog counters to be identified</li> <li>Define <b>ROI's</b>> for the <b>Analog Counters</b>.<br>
<li>General settings <br> They will be used to digitize the analog part of your meter.<br>
Most settings can be used with default value at the beginning. MQTT connection can be specified here</li> If your meter has no analog counters, this step can be skipped.</p></li>
<li><p><b>General Settings</b><br>
Further configuration of your device.</p></li>
</ol> </ol>
<p>
After step 5 setup mode is completed, it then reboots and starts into the normal mode. <p>Please be patient when switching to another step. The device takes some time to load all needed information!</p>
<br><br>
If you need support, have a look to the <a href=https://jomjol.github.io/AI-on-the-edge-device-docs target=_blank>documentation</a> or the <a href=https://github.com/jomjol/AI-on-the-edge-device/discussions target=_blank>discussion</a> pages.<br> <p>After step 5 the setup is completed, you then can reboot and starts into the normal operation mode.</p>
<h4>Have fun with the digitizer!</h4> <p>If you need support, have a look to the <a href=https://jomjol.github.io/AI-on-the-edge-device-docs target=_blank>documentation</a> or the <a href=https://github.com/jomjol/AI-on-the-edge-device/discussions target=_blank>discussion</a> pages.</p>
<p><b>Have fun with your digitizer!</b></p>
</body> </body>
</html> </html>

13
sd-card/html/edit_explain_6.html
View File

@@ -28,16 +28,11 @@ p {font-size: 1em;}
<body style="font-family: arial"> <body style="font-family: arial">
<h4>Finished!</h4> <h4>Step 6: Setup Completed!</h4>
<p> <p>Congratulations, you completed the setup and are now ready to reboot to the normal mode!</p>
Now you are finished with the setup and ready to reboot to the normal mode. <p>Once you have pushed the button below, the setup modus will be left and the digitizer will restart to normal operation mode.<br>
<br> The Web Interface will automatically reload. It will take some minutes until you get the first reading.
Once you have pushed below button, the setup modus will be left and the digitizer will restart to normal operation mode.
<br>
The Web Interface will automatically reload. It will take two to four minutes, until you get the first reading.
<br>
All settings can be changed as well in the configuration menu in the Normal modus.
</p> </p>
<p> <p>

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

@@ -2,7 +2,7 @@
<html> <html>
<head> <head>
<link rel="icon" href="favicon.ico?v=$COMMIT_HASH" type="image/x-icon"> <link rel="icon" href="favicon.ico?v=$COMMIT_HASH" type="image/x-icon">
<title>Make Reference</title> <title>Reference Image</title>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<style> <style>
@@ -36,8 +36,12 @@ table {
</head> </head>
<body style="font-family: arial; padding: 0px 10px;"> <body style="font-family: arial; padding: 0px 10px;">
<h2>Create Reference out of Raw Image</h2> <h2>Reference Image</h2>
<p><b>Note: After saving a new Reference Image, make sure to update the Alignment Marks and the ROI's and reboot once!</b></p> <p>On this page you define the Reference Image.
See <a href=https://jomjol.github.io/AI-on-the-edge-device-docs/Reference-Image/ target=_blank>https://jomjol.github.io/AI-on-the-edge-device-docs/Reference-Image/</a> for explanations.</p>
<p>After saving a new Reference Image, make sure to update the <a href=edit_alignment.html>Alignment Marks</a> and then
the <a href=edit_digits.html>digit</a> resp. <a href=edit_analog.html>analog</a> ROI's.<br>
Only after those steps a reboot is required.</p>
<table> <table>
<tr> <tr>
@@ -87,10 +91,8 @@ table {
<td><canvas id="canvas"></canvas></td> <td><canvas id="canvas"></canvas></td>
</tr> </tr>
<tr> <tr>
<td><input class="button" type="button" id="updatereferenceimage" value="Save" onclick="SaveReference()"></td> <td><input class="button" type="button" id="updatereferenceimage" value="Save" onclick="SaveReference()">
</tr> <p>Proceed to update the <a href=edit_alignment.html>Alignment Marks</a> when you are done.</p></td>
<tr>
<td><button class="button" id="reboot" type="button" onclick="doReboot()">Reboot to activate saved Reference</button></td>
</tr> </tr>
</table> </table>

8
sd-card/html/explain_1.html
View File

@@ -20,12 +20,14 @@ p {font-size: 1em;}
<body style="font-family: arial"> <body style="font-family: arial">
<h4>Reference Image</h4> <h4>Step 1: Define a Reference Image</h4>
The reference image is the base to define the digits, counters and references positions. The reference image is the base to define the digits, counters and references positions.
<p> <p>
Firstly you see the default image. Use the Button "Create New Reference" to start to create your own reference image.<br> Firstly you see the default image. Use the Button "Create New Reference" to start to create your own reference image.<br>
Most important feature is a straight alignment of the image. Use the Pre-rotate angle and the fine alignment to adjust the rotation of the image<br> Most important feature is a straight alignment of the image. Use the Pre-rotate angle and the fine alignment to adjust the rotation of the image.
Store the reference image by pushing <b>"Update Reference Image"</b>. A reboot is not yet required. </p>
<p>
Don't forget to save your changes with the <b>"Save"</b> button!
</p> </p>
</body> </body>

6
sd-card/html/explain_2.html
View File

@@ -19,15 +19,15 @@ p {font-size: 1em;}
<body style="font-family: arial"> <body style="font-family: arial">
<h4>Alignment References</h4> <h4>Step 2: Define two Alignment Marks</h4>
Two opposite alignment references are needed to identify unique fix points on the image. Two opposite alignment marks are needed to identify unique fix points on the image.
<p> <p>
Mark the reference by drag and dop with the mouse or with the coordinates and push <b>"Update Reference"</b>. Mark the reference by drag and dop with the mouse or with the coordinates and push <b>"Update Reference"</b>.
<br> <br>
You can switch between the two reference with <b>"Select Reference"</b>. You can switch between the two reference with <b>"Select Reference"</b>.
</p> </p>
<p> <p>
Don't forget to save your changes! A reboot is not yet required. Don't forget to save your changes with the <b>"Save"</b> button!
</p> </p>
</body> </body>

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

@@ -20,7 +20,7 @@ p {font-size: 1em;}
<body style="font-family: arial"> <body style="font-family: arial">
<h4>Define Digits</h4> <h4>Step 3: Define ROI's for your Digits</h4>
Here you define your digits you want to read. If you have more than one number on the reading you can define several numbers with the <b>"Number"</b> selector. There you can also define new numbers. Here you define your digits you want to read. If you have more than one number on the reading you can define several numbers with the <b>"Number"</b> selector. There you can also define new numbers.
<p> <p>
With the drop down menue <b>"ROI x"</b> you can change between the different digits. Mark them with the mouse or the coordinates. With the drop down menue <b>"ROI x"</b> you can change between the different digits. Mark them with the mouse or the coordinates.
@@ -29,7 +29,7 @@ Here you define your digits you want to read. If you have more than one number o
You can change it with <b>"move Next" / "move Previous"</b>. You can change it with <b>"move Next" / "move Previous"</b>.
</p> </p>
<p> <p>
Don't forget to save your changes! A reboot is not yet required. Don't forget to save your changes with the <b>"Save"</b> button!
</p> </p>
</body> </body>

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

@@ -19,7 +19,7 @@ p {font-size: 1em;}
<body style="font-family: arial"> <body style="font-family: arial">
<h4>Define Digits</h4> <h4>Step 4: Define ROI's for your Analog Counters</h4>
Here you define your analog counters you want to read. If you have more than one number on the reading you can define several numbers with the <b>"Number"</b> selector. There you can also define new numbers. If you do not have analog counters delete all ROIs. Here you define your analog counters you want to read. If you have more than one number on the reading you can define several numbers with the <b>"Number"</b> selector. There you can also define new numbers. If you do not have analog counters delete all ROIs.
<p> <p>
With the drop down menue <b>"ROI x"</b> you can change between the different counters. Mark them with the mouse or the coordinates. With the drop down menue <b>"ROI x"</b> you can change between the different counters. Mark them with the mouse or the coordinates.
@@ -28,7 +28,7 @@ Here you define your analog counters you want to read. If you have more than one
You can change it with <b>"move Next" / "move Previous"</b>. You can change it with <b>"move Next" / "move Previous"</b>.
</p> </p>
<p> <p>
Don't forget to save your changes with <b>"Save all to Config.ini"</b>! A reboot is not yet required. Don't forget to save your changes with the <b>"Save"</b> button!
</p> </p>
</body> </body>

10
sd-card/html/explain_5.html
View File

@@ -19,12 +19,12 @@ p {font-size: 1em;}
<body style="font-family: arial"> <body style="font-family: arial">
<h4>General configuration parameters</h4> <h4>Step 5: General Configuration Settings</h4>
<p>Here you can define additional settings. The settings should fit for a normal setup.</p> <p>Here you can define additional settings. The default settings should fit for a normal/initial setup.</p>
<p>You will also be availabl</p> <p>You will also be able to change them later, so don't worry if you do not understand the parameters yet!</p>
</p>
<p> <p>
Don't forget to save your changes! Don't forget to save your changes with the <b>"Save"</b> button!
<br><span color=red>You should not reboot here, but leave the setup modus on the next page!</span>
</p> </p>
</body> </body>

27
sd-card/html/explain_6.html
View File

@@ -1,26 +1 @@
<!DOCTYPE html> <!-- This page is never shown -->
<html style="width: fit-content">
<head>
<link rel="icon" href="favicon.ico?v=$COMMIT_HASH" type="image/x-icon">
<title>AI on the edge</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
h1 {font-size: 2em; margin-block-end: 0.3em;}
h2 {font-size: 1.5em;margin-block-start: 0.3em;}
h3 {font-size: 1.2em;}
p {font-size: 1em;}
</style>
</head>
<body style="font-family: arial">
<h4>Finished!</h4>
Read below!
</body>
</html>

26
sd-card/html/setup.html
View File

@@ -83,53 +83,53 @@ function clickPrevious() {
function LoadStep(){ function LoadStep(){
switch (aktstatu) { switch (aktstatu) {
case 0: case 0:
document.getElementById('maincontent').src = '/edit_explain_0.html?v=$COMMIT_HASH'; document.getElementById('maincontent').src = 'edit_explain_0.html?v=$COMMIT_HASH';
document.getElementById('h_iframe_explain').style.display = "none"; document.getElementById('h_iframe_explain').style.display = "none";
document.getElementById("previous").disabled = true; document.getElementById("previous").disabled = true;
document.getElementById("next").disabled = false; document.getElementById("next").disabled = false;
break; break;
case 1: case 1:
document.getElementById('maincontent').src = '/edit_reference.html?v=$COMMIT_HASH'; document.getElementById('maincontent').src = 'edit_reference.html?v=$COMMIT_HASH';
document.getElementById('explaincontent').src = '/explain_1.html?v=$COMMIT_HASH'; document.getElementById('explaincontent').src = 'explain_1.html?v=$COMMIT_HASH';
document.getElementById('h_iframe_explain').style.display = ""; document.getElementById('h_iframe_explain').style.display = "";
document.getElementById("previous").disabled = false; document.getElementById("previous").disabled = false;
document.getElementById("next").disabled = false; document.getElementById("next").disabled = false;
break; break;
case 2: case 2:
document.getElementById('maincontent').src = '/edit_alignment.html?v=$COMMIT_HASH'; document.getElementById('maincontent').src = 'edit_alignment.html?v=$COMMIT_HASH';
document.getElementById('explaincontent').src = '/explain_2.html?v=$COMMIT_HASH'; document.getElementById('explaincontent').src = 'explain_2.html?v=$COMMIT_HASH';
document.getElementById('h_iframe_explain').style.display = ""; document.getElementById('h_iframe_explain').style.display = "";
document.getElementById("previous").disabled = false; document.getElementById("previous").disabled = false;
document.getElementById("next").disabled = false; document.getElementById("next").disabled = false;
break; break;
case 3: case 3:
document.getElementById('maincontent').src = '/edit_digits.html?v=$COMMIT_HASH'; document.getElementById('maincontent').src = 'edit_digits.html?v=$COMMIT_HASH';
document.getElementById('explaincontent').src = '/explain_3.html?v=$COMMIT_HASH'; document.getElementById('explaincontent').src = 'explain_3.html?v=$COMMIT_HASH';
document.getElementById('h_iframe_explain').style.display = ""; document.getElementById('h_iframe_explain').style.display = "";
document.getElementById("previous").disabled = false; document.getElementById("previous").disabled = false;
document.getElementById("next").disabled = false; document.getElementById("next").disabled = false;
break; break;
case 4: case 4:
document.getElementById('maincontent').src = '/edit_analog.html?v=$COMMIT_HASH'; document.getElementById('maincontent').src = 'edit_analog.html?v=$COMMIT_HASH';
document.getElementById('explaincontent').src = '/explain_4.html?v=$COMMIT_HASH'; document.getElementById('explaincontent').src = 'explain_4.html?v=$COMMIT_HASH';
document.getElementById('h_iframe_explain').style.display = ""; document.getElementById('h_iframe_explain').style.display = "";
document.getElementById("previous").disabled = false; document.getElementById("previous").disabled = false;
document.getElementById("next").disabled = false; document.getElementById("next").disabled = false;
break; break;
case 5: case 5:
document.getElementById('maincontent').src = '/edit_config_param.html?v=$COMMIT_HASH?InitialSetup=true'; document.getElementById('maincontent').src = 'edit_config_param.html?v=$COMMIT_HASH?InitialSetup=true';
document.getElementById('explaincontent').src = '/explain_5.html?v=$COMMIT_HASH'; document.getElementById('explaincontent').src = 'explain_5.html?v=$COMMIT_HASH';
document.getElementById('h_iframe_explain').style.display = ""; document.getElementById('h_iframe_explain').style.display = "";
document.getElementById("previous").disabled = false; document.getElementById("previous").disabled = false;
document.getElementById("next").disabled = false; document.getElementById("next").disabled = false;
break; break;
case 6: case 6:
document.getElementById('maincontent').src = '/edit_explain_6.html?v=$COMMIT_HASH'; document.getElementById('maincontent').src = 'edit_explain_6.html?v=$COMMIT_HASH';
document.getElementById('explaincontent').src = '/explain_6.html?v=$COMMIT_HASH'; document.getElementById('explaincontent').src = 'explain_6.html?v=$COMMIT_HASH'; // Note: The page never gets shown!
document.getElementById('h_iframe_explain').style.display = "none"; document.getElementById('h_iframe_explain').style.display = "none";
document.getElementById("previous").disabled = false; document.getElementById("previous").disabled = false;
document.getElementById("next").disabled = true; document.getElementById("next").disabled = true;