mirror of
https://github.com/jomjol/AI-on-the-edge-device.git
synced 2025-12-07 12:06:58 +03:00
Updated web pages (#2055)
* 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
@@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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"/>
|
||||
|
||||
<style>
|
||||
@@ -48,7 +48,11 @@ select {
|
||||
|
||||
<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>
|
||||
<tr>
|
||||
@@ -88,10 +92,8 @@ select {
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td><input class="button" type="submit" name="saveroi" onclick="SaveToConfig()" value="Save"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="button" id="reboot" type="button" onclick="doReboot()">Reboot to activate changes</button></td>
|
||||
<td><input class="button" type="submit" name="saveroi" onclick="SaveToConfig()" value="Save">
|
||||
<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>
|
||||
</table>
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<link rel="icon" href="favicon.ico?v=$COMMIT_HASH" type="image/x-icon">
|
||||
<meta charset="utf-8"/>
|
||||
<title>Make Analog Alignment</title>
|
||||
<title>Analog ROI's</title>
|
||||
|
||||
<style>
|
||||
h1 {font-size: 2em;}
|
||||
@@ -67,9 +67,11 @@ th, td {
|
||||
|
||||
<body style="font-family: arial; padding: 0px 10px;">
|
||||
|
||||
<h2><input type="checkbox" id="Category_Analog_enabled" value="1" onclick = 'EnDisableAnalog()' checked >
|
||||
Edit Analog</h2>
|
||||
<h2>Analog ROI's</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">
|
||||
<table>
|
||||
@@ -134,10 +136,10 @@ th, td {
|
||||
|
||||
<table>
|
||||
<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>
|
||||
<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>
|
||||
</table>
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<link rel="icon" href="favicon.ico?v=$COMMIT_HASH" type="image/x-icon">
|
||||
<meta charset="utf-8"/>
|
||||
<title>Make Digital Alignment</title>
|
||||
<title>Digit ROI's</title>
|
||||
|
||||
<style>
|
||||
h1 {font-size: 2em;}
|
||||
@@ -58,8 +58,15 @@ th, td {
|
||||
|
||||
<body style="font-family: arial; padding: 0px 10px;">
|
||||
|
||||
<h2><input type="checkbox" id="Category_Digits_enabled" value="1" onclick = 'EnDisableDigits()' checked >
|
||||
Edit Digits</h2>
|
||||
<h2>Digit ROI's</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">
|
||||
|
||||
@@ -126,10 +133,8 @@ th, td {
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save" tabindex=10></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="button" id="reboot" type="button" onclick="doReboot()">Reboot to activate changes</button></td>
|
||||
<td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save" tabindex=10>
|
||||
<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>
|
||||
</table>
|
||||
|
||||
|
||||
@@ -28,12 +28,12 @@ p {font-size: 1em;}
|
||||
|
||||
<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>.
|
||||
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.
|
||||
All settings will also be accessible there.
|
||||
<br>
|
||||
<br>
|
||||
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>
|
||||
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. See <a href=https://jomjol.github.io/AI-on-the-edge-device-docs/initial-setup target=_blank>
|
||||
https://jomjol.github.io/AI-on-the-edge-device-docs/initial-setup</a> for additional explanations.</p>
|
||||
</p>
|
||||
<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 before heading to another step!</span><br>
|
||||
</p>
|
||||
<p>
|
||||
This is an overview over the five steps:
|
||||
@@ -41,26 +41,27 @@ p {font-size: 1em;}
|
||||
|
||||
<p>
|
||||
<ol>
|
||||
<li>Create reference image <br>
|
||||
Base for the position referencing and the identification of the digits and counters.</li>
|
||||
<li>Define two unique references <br>
|
||||
Used to align the individual camera shot and identify the absolut positions</li>
|
||||
<li>Define the digits <br>
|
||||
Digital digits to be recognized</li>
|
||||
<li>Define the analog counters <br>
|
||||
Analog counters to be identified</li>
|
||||
<li>General settings <br>
|
||||
Most settings can be used with default value at the beginning. MQTT connection can be specified here</li>
|
||||
<li><p>Create the <b>Reference Image</b>.<br>
|
||||
It is the base for the position referencing and the identification of the digits and counters.</p></li>
|
||||
<li><p>Define two unique <b>Reference Marks</b>.<br>
|
||||
They is used to align the individual camera images and identify the absolut positions.</p></li>
|
||||
<li></p>Define <b>ROI's</b> for the <b>Digits</b>.<br>
|
||||
They will be used to digitize the digit part of your meter.<br>
|
||||
If your meter has no digits, this step can be skipped.</p></li>
|
||||
<li>Define <b>ROI's</b>> for the <b>Analog Counters</b>.<br>
|
||||
They will be used to digitize the analog part of your meter.<br>
|
||||
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>
|
||||
<p>
|
||||
|
||||
After step 5 setup mode is completed, it then reboots and starts into the normal mode.
|
||||
<br><br>
|
||||
<p>Please be patient when switching to another step. The device takes some time to load all needed information!</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.<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>
|
||||
</html>
|
||||
|
||||
@@ -28,16 +28,11 @@ p {font-size: 1em;}
|
||||
|
||||
<body style="font-family: arial">
|
||||
|
||||
<h4>Finished!</h4>
|
||||
<h4>Step 6: Setup Completed!</h4>
|
||||
|
||||
<p>
|
||||
Now you are finished with the setup and ready to reboot to the normal mode.
|
||||
<br>
|
||||
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>Congratulations, you completed the setup and are now ready to reboot to the normal mode!</p>
|
||||
<p>Once you have pushed the button below, 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 some minutes until you get the first reading.
|
||||
</p>
|
||||
|
||||
<p>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
<html>
|
||||
<head>
|
||||
<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"/>
|
||||
|
||||
<style>
|
||||
@@ -36,8 +36,12 @@ table {
|
||||
</head>
|
||||
|
||||
<body style="font-family: arial; padding: 0px 10px;">
|
||||
<h2>Create Reference out of Raw 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>
|
||||
<h2>Reference Image</h2>
|
||||
<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>
|
||||
<tr>
|
||||
@@ -87,10 +91,8 @@ table {
|
||||
<td><canvas id="canvas"></canvas></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><input class="button" type="button" id="updatereferenceimage" value="Save" onclick="SaveReference()"></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><button class="button" id="reboot" type="button" onclick="doReboot()">Reboot to activate saved Reference</button></td>
|
||||
<td><input class="button" type="button" id="updatereferenceimage" value="Save" onclick="SaveReference()">
|
||||
<p>Proceed to update the <a href=edit_alignment.html>Alignment Marks</a> when you are done.</p></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
|
||||
@@ -20,12 +20,14 @@ p {font-size: 1em;}
|
||||
|
||||
<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.
|
||||
<p>
|
||||
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>
|
||||
Store the reference image by pushing <b>"Update Reference Image"</b>. A reboot is not yet required.
|
||||
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.
|
||||
</p>
|
||||
<p>
|
||||
Don't forget to save your changes with the <b>"Save"</b> button!
|
||||
</p>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -19,15 +19,15 @@ p {font-size: 1em;}
|
||||
|
||||
<body style="font-family: arial">
|
||||
|
||||
<h4>Alignment References</h4>
|
||||
Two opposite alignment references are needed to identify unique fix points on the image.
|
||||
<h4>Step 2: Define two Alignment Marks</h4>
|
||||
Two opposite alignment marks are needed to identify unique fix points on the image.
|
||||
<p>
|
||||
Mark the reference by drag and dop with the mouse or with the coordinates and push <b>"Update Reference"</b>.
|
||||
<br>
|
||||
You can switch between the two reference with <b>"Select Reference"</b>.
|
||||
</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>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -20,7 +20,7 @@ p {font-size: 1em;}
|
||||
|
||||
<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.
|
||||
<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.
|
||||
@@ -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>.
|
||||
</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>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -19,7 +19,7 @@ p {font-size: 1em;}
|
||||
|
||||
<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.
|
||||
<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.
|
||||
@@ -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>.
|
||||
</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>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -19,12 +19,12 @@ p {font-size: 1em;}
|
||||
|
||||
<body style="font-family: arial">
|
||||
|
||||
<h4>General configuration parameters</h4>
|
||||
<p>Here you can define additional settings. The settings should fit for a normal setup.</p>
|
||||
<p>You will also be availabl</p>
|
||||
<h4>Step 5: General Configuration Settings</h4>
|
||||
<p>Here you can define additional settings. The default settings should fit for a normal/initial setup.</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>
|
||||
Don't forget to save your changes!
|
||||
<br><span color=red>You should not reboot here, but leave the setup modus on the next page!</span>
|
||||
Don't forget to save your changes with the <b>"Save"</b> button!
|
||||
</p>
|
||||
|
||||
</body>
|
||||
|
||||
@@ -1,26 +1 @@
|
||||
<!DOCTYPE html>
|
||||
<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>
|
||||
<!-- This page is never shown -->
|
||||
@@ -83,53 +83,53 @@ function clickPrevious() {
|
||||
function LoadStep(){
|
||||
switch (aktstatu) {
|
||||
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("previous").disabled = true;
|
||||
document.getElementById("next").disabled = false;
|
||||
break;
|
||||
case 1:
|
||||
document.getElementById('maincontent').src = '/edit_reference.html?v=$COMMIT_HASH';
|
||||
document.getElementById('explaincontent').src = '/explain_1.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('h_iframe_explain').style.display = "";
|
||||
document.getElementById("previous").disabled = false;
|
||||
document.getElementById("next").disabled = false;
|
||||
break;
|
||||
case 2:
|
||||
document.getElementById('maincontent').src = '/edit_alignment.html?v=$COMMIT_HASH';
|
||||
document.getElementById('explaincontent').src = '/explain_2.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('h_iframe_explain').style.display = "";
|
||||
document.getElementById("previous").disabled = false;
|
||||
document.getElementById("next").disabled = false;
|
||||
|
||||
break;
|
||||
case 3:
|
||||
document.getElementById('maincontent').src = '/edit_digits.html?v=$COMMIT_HASH';
|
||||
document.getElementById('explaincontent').src = '/explain_3.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('h_iframe_explain').style.display = "";
|
||||
document.getElementById("previous").disabled = false;
|
||||
document.getElementById("next").disabled = false;
|
||||
|
||||
break;
|
||||
case 4:
|
||||
document.getElementById('maincontent').src = '/edit_analog.html?v=$COMMIT_HASH';
|
||||
document.getElementById('explaincontent').src = '/explain_4.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('h_iframe_explain').style.display = "";
|
||||
document.getElementById("previous").disabled = false;
|
||||
document.getElementById("next").disabled = false;
|
||||
|
||||
break;
|
||||
case 5:
|
||||
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('maincontent').src = 'edit_config_param.html?v=$COMMIT_HASH?InitialSetup=true';
|
||||
document.getElementById('explaincontent').src = 'explain_5.html?v=$COMMIT_HASH';
|
||||
document.getElementById('h_iframe_explain').style.display = "";
|
||||
document.getElementById("previous").disabled = false;
|
||||
document.getElementById("next").disabled = false;
|
||||
|
||||
break;
|
||||
case 6:
|
||||
document.getElementById('maincontent').src = '/edit_explain_6.html?v=$COMMIT_HASH';
|
||||
document.getElementById('explaincontent').src = '/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'; // Note: The page never gets shown!
|
||||
document.getElementById('h_iframe_explain').style.display = "none";
|
||||
document.getElementById("previous").disabled = false;
|
||||
document.getElementById("next").disabled = true;
|
||||
|
||||
Reference in New Issue
Block a user