Главная Обзор Помощь
Вход
dyadmisha
/
AI-on-the-edge-device
зеркало из https://github.com/jomjol/AI-on-the-edge-device
1
0
Ответвить 0
Файлы Задачи 0 Вики
Просмотр исходного кода

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>
CaCO3 2 лет назад
Родитель
2ed9fb8eb5
Сommit
3d92860c5e
13 измененных файлов с 94 добавлено и 110 удалено
Разделённый вид Показать статистику Diff
  1. 8 6
      sd-card/html/edit_alignment.html
  2. 8 6
      sd-card/html/edit_analog.html
  3. 12 7
      sd-card/html/edit_digits.html
  4. 22 21
      sd-card/html/edit_explain_0.html
  5. 4 9
      sd-card/html/edit_explain_6.html
  6. 9 7
      sd-card/html/edit_reference.html
  7. 5 3
      sd-card/html/explain_1.html
  8. 3 3
      sd-card/html/explain_2.html
  9. 2 2
      sd-card/html/explain_3.html
  10. 2 2
      sd-card/html/explain_4.html
  11. 5 5
      sd-card/html/explain_5.html
  12. 1 26
      sd-card/html/explain_6.html
  13. 13 13
      sd-card/html/setup.html

+ 8 - 6
sd-card/html/edit_alignment.html
Просмотреть файл 

@@ -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,11 +92,9 @@ select {
 
 
 	<table>
 
 	  <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">
 
+            <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> 
-	  <tr>
 
-                <td><button class="button" id="reboot" type="button" onclick="doReboot()">Reboot to activate changes</button></td>
 
-	  </tr>  
 	</table>
 
 
 <script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script>

+ 8 - 6
sd-card/html/edit_analog.html
Просмотреть файл 

@@ -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,10 +67,12 @@ 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>
 
 	  <tr>
 
@@ -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>

+ 12 - 7
sd-card/html/edit_digits.html
Просмотреть файл 

@@ -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,11 +133,9 @@ th, td {
 
 			 
 	<table>
 
 	  <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>
 
+            <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> 
-	  <tr>
 
-                <td><button class="button" id="reboot" type="button" onclick="doReboot()">Reboot to activate changes</button></td>
 
-	  </tr>  
 	</table>
 
 
 <script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script>

+ 22 - 21
sd-card/html/edit_explain_0.html
Просмотреть файл 

@@ -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>

+ 4 - 9
sd-card/html/edit_explain_6.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>

+ 9 - 7
sd-card/html/edit_reference.html
Просмотреть файл 

@@ -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>

+ 5 - 3
sd-card/html/explain_1.html
Просмотреть файл 

@@ -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>

+ 3 - 3
sd-card/html/explain_2.html
Просмотреть файл 

@@ -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>

+ 2 - 2
sd-card/html/explain_3.html
Просмотреть файл 

@@ -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>

+ 2 - 2
sd-card/html/explain_4.html
Просмотреть файл 

@@ -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>

+ 5 - 5
sd-card/html/explain_5.html
Просмотреть файл 

@@ -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
sd-card/html/explain_6.html
Просмотреть файл 

@@ -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 -->

+ 13 - 13
sd-card/html/setup.html
Просмотреть файл 

@@ -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;