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 03:56:57 +03:00
Code Issues Packages Projects Releases Wiki Activity

Restructure reference image page (#2905)

Browse Source
This commit is contained in:
CaCO3
2024-02-14 16:54:31 +01:00
committed by GitHub
parent 6b38e44d7f
commit 08ba754b88
3 changed files with 51 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xml:lang="en"> <html lang="en" xml:lang="en">
<head> <head>
<title>Alignment marker</title> <title>Alignment markers</title>
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<style> <style>
@@ -89,13 +89,13 @@
<div id="overlaytext">Device is busy with digitalization round. Waiting until it completes...</div> <div id="overlaytext">Device is busy with digitalization round. Waiting until it completes...</div>
</div> </div>
<h2>Alignment Marker</h2> <h2>Alignment Markers</h2>
<details id="desc_details" style="font-size:16px"> <details id="desc_details" style="font-size:16px">
<summary><b>CLICK HERE</b> for usage description. More infos in documentation: <summary><b>CLICK HERE</b> for usage description. More infos in documentation:
<a href=https://jomjol.github.io/AI-on-the-edge-device-docs/Alignment/ target=_blank>Alignment</a> <a href=https://jomjol.github.io/AI-on-the-edge-device-docs/Alignment/ target=_blank>Alignment</a>
</summary> </summary>
<p> <p>
Two alignment marker with clear contour and proper contrast are needed to identify unique "fix points" on the image. Two alignment markers with clear contour and proper contrast are needed to identify unique "fix points" on the image.
The marker area should be not be part of the variable area of ROI evaluation. Please find more information in documenation: The marker area should be not be part of the variable area of ROI evaluation. Please find more information in documenation:
<a href=https://jomjol.github.io/AI-on-the-edge-device-docs/Alignment/ target=_blank>Alignment</a> <a href=https://jomjol.github.io/AI-on-the-edge-device-docs/Alignment/ target=_blank>Alignment</a>
</p> </p>

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

@@ -1,7 +1,7 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="en" xml:lang="en"> <html lang="en" xml:lang="en">
<head> <head>
<title>Reference Image</title> <title>Reference Image and Camera Settings</title>
<meta charset="utf-8"/> <meta charset="utf-8"/>
<style> <style>
@@ -37,7 +37,6 @@
.button { .button {
padding: 5px 10px; padding: 5px 10px;
width: 205px;
font-size: 16px; font-size: 16px;
} }
@@ -91,10 +90,14 @@
<link href="firework.css?v=$COMMIT_HASH" rel="stylesheet"> <link href="firework.css?v=$COMMIT_HASH" rel="stylesheet">
<script type="text/javascript" src="jquery-3.6.0.min.js?v=$COMMIT_HASH"></script> <script type="text/javascript" src="jquery-3.6.0.min.js?v=$COMMIT_HASH"></script>
<script type="text/javascript" src="firework.js?v=$COMMIT_HASH"></script> <script type="text/javascript" src="firework.js?v=$COMMIT_HASH"></script>
<script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script>
<script type="text/javascript" src="readconfigcommon.js?v=$COMMIT_HASH"></script>
<script type="text/javascript" src="readconfigparam.js?v=$COMMIT_HASH"></script>
</head> </head>
<body style="font-family: arial; padding: 0px 10px;"> <body style="font-family: arial; padding: 0px 10px;">
<h2>Reference Image</h2> <h2>Reference Image and Camera Settings</h2>
<details id="desc_details" style="font-size:16px"> <details id="desc_details" style="font-size:16px">
<summary><b>CLICK HERE</b> for usage description. More infos in documentation: <summary><b>CLICK HERE</b> for usage description. More infos in documentation:
<a href=https://jomjol.github.io/AI-on-the-edge-device-docs/Reference-Image/ target=_blank>Reference Image</a> <a href=https://jomjol.github.io/AI-on-the-edge-device-docs/Reference-Image/ target=_blank>Reference Image</a>
@@ -103,48 +106,39 @@
The reference image is the base image on which the alignment markers, digit ROIs and anlog ROIs will be defined. The reference image is the base image on which the alignment markers, digit ROIs and anlog ROIs will be defined.
</p> </p>
<p> <p>
Firstly the actual saved reference image is shown. If you start with the setup from scratch a default image is shown as placeholder. Initially the currently saved reference image is shown. If you start with a setup from scratch, a default image is shown as a placeholder.
Use the button <b>"Create New Reference"</b> to start creation of your own reference image. After selecting the button a new image will be taken Use the button <b>"Create New Reference / Change Camera Settings"</b> to start the creation of your own reference image. After clicking the button, the camera will take a
all configured parameter will be applied to the shown image. With the button <b>"Update Image"</b> you can update the image again (still all parameter photo using the configured parameters. This will be your new reference image. With the button <b>"Update Reference Image"</b> you can update the image again.
get applied to the new image).
</p> </p>
<p> <p>
To have reliable evaluation processing a properly horizontal aligned evaluation area is mandatory. Using the parameters "Rotation angle" and To have a reliable evaluation processing, it is mandatory to have the digit ROIs horizontally aligned. Using the two input fields "Rotation angle" and
"Rotation angle (Fine-tune)" the image can be rotated in both directions. The resulting rotation anlge is used to prerotate the image before "(Fine-tune)" the image can be rotated in both directions. The resulting rotation angle is used to pre-rotate the image before
the alignment algorithm is processed to compensate only small misalignments. Further information can be found in documenation: the alignment algorithm is processed to compensate only small misalignments (See next step Alignment Markers). Further information can be found in documenation:
<a href=https://jomjol.github.io/AI-on-the-edge-device-docs/Reference-Image/ target=_blank>Reference Image</a> <a href=https://jomjol.github.io/AI-on-the-edge-device-docs/Reference-Image/ target=_blank>Reference Image</a>
</p> </p>
<p> <p>
After setting up your reference image don't forget to save with the <b>"Save New Reference"</b> button!<br> After setting up your reference image don't forget to save with the <b>"Save new Reference Image and Camera Settings"</b> button!<br><br>
<b>NOTE:</b> There is no need to perform a reboot after every saving or step. It's sufficient to reboot after all configuration steps <b>NOTE:</b> There is no need to perform a reboot after every saving or step. It's sufficient to reboot after all configuration steps
(reference image, alignment, ROI configuration) are completed to activate new configuration. (reference image, alignment, ROI configuration) are completed to activate new configuration.
</p> </p>
</details> </details>
<hr /> <hr>
<table style="width: 100%"> <table>
<colgroup>
<col span="1" style="width: 25%;">
<col span="1" style="width: 25%;">
<col span="1" style="width: 25%;">
<col span="1" style="width: 25%;">
</colgroup>
<tr> <tr>
<td class="indent1"> <td><input class="button" type="button" id="showcurrentreference" disabled value="Reset and show current Reference and Camera Settings" onclick="showReference()"></td>
<input style="margin-top:12px;margin-bottom:12px" type="checkbox" id="ExpertModus_enabled" value="1" onclick='UpdateExpertModus()' unchecked> <td><input class="button" type="button" id="startreference" value="Create New Reference / Change Camera Settings" onclick="doTakeReference()"></td>
<label for="ExpertModus_enabled">Show Expert Parameters</label>
</td>
<td></td>
<td colspan="2">
<b>*)</b> A change of this parameter only is applied on the next update of the Refrence Image.
</td>
</tr>
<tr>
<td><input class="button" type="button" id="orignReference" value="Show Actual Reference" onclick="showReference()"></td>
<td><input class="button" type="button" id="newReference" value="Create New Reference" onclick="doTakeReference()"></td>
<td><input class="button" type="button" id="updateReference" value="Update Image" onclick="doTakeReference()">
</tr> </tr>
</table> </table>
<hr>
<input style="margin-top:12px;margin-bottom:12px" type="checkbox" id="ExpertModus_enabled" value="1" onclick='UpdateExpertModus()' unchecked>
<label for="ExpertModus_enabled">Show Expert Parameters</label>
<br><br>
<b>*)</b> A change of this parameter only is applied on the next update of the Refrence Image.
<table style="width: 100%"> <table style="width: 100%">
<colgroup> <colgroup>
<col span="1" style="width: 12%;"> <col span="1" style="width: 12%;">
@@ -295,27 +289,17 @@
<td>$TOOLTIP_TakeImage_Sharpness</td> <td>$TOOLTIP_TakeImage_Sharpness</td>
</tr> </tr>
</table> </table>
<table> <table>
<colgroup>
<col span="1" style="width: 33.3%;">
<col span="1" style="width: 33.3%;">
<col span="1" style="width: 33.3%;">
</colgroup>
<tr>
<td style="vertical-align: bottom;"><b>Reference Image:</b></td>
<td></td>
<td>
<input style="font-weight:bold;" class="button" type="button" id="saveReference" value="Save New Reference" onclick="SaveReference()">
</td>
</tr> </tr>
<tr> <td><input class="button" type="submit" id="take" onclick="doTakeReference()" value="Update Reference Image"></td>
<td colspan="3"><canvas id="canvas"></canvas></td> <td><input class="button" type="button" id="updatereferenceimage" value="Save new Reference Image and Camera Settings" onclick="SaveReference()"></td>
</tr> </tr>
</table> </table>
<script type="text/javascript" src="common.js?v=$COMMIT_HASH"></script> <hr>
<script type="text/javascript" src="readconfigcommon.js?v=$COMMIT_HASH"></script> <b>Reference Image:</b><br>
<script type="text/javascript" src="readconfigparam.js?v=$COMMIT_HASH"></script> <canvas id="canvas"></canvas></td>
<script language="JavaScript"> <script language="JavaScript">
var canvas = document.getElementById('canvas'), var canvas = document.getElementById('canvas'),
@@ -442,11 +426,11 @@
xhttp.open("GET", url, false); xhttp.open("GET", url, false);
xhttp.send(); xhttp.send();
firework.launch('Taking updated image...', 'success', 5000); firework.launch('Taking new image...', 'success', 5000);
var _url = domainname + "/img_tmp/raw.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1); var _url = domainname + "/img_tmp/raw.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1);
document.getElementById("saveReference").disabled = false; document.getElementById("updatereferenceimage").disabled = false;
document.getElementById("grayscale").disabled = false; document.getElementById("grayscale").disabled = false;
document.getElementById("negative").disabled = false; document.getElementById("negative").disabled = false;
@@ -460,9 +444,9 @@
document.getElementById("finerotate").disabled = false; document.getElementById("finerotate").disabled = false;
document.getElementById("prerotateangle").disabled = false; document.getElementById("prerotateangle").disabled = false;
document.getElementById("orignReference").disabled = false; document.getElementById("showcurrentreference").disabled = false;
document.getElementById("newReference").disabled = true; document.getElementById("startreference").disabled = true;
document.getElementById("updateReference").disabled = false; document.getElementById("updatereferenceimage").disabled = false;
if (param["Alignment"]["InitialMirror"].found) { if (param["Alignment"]["InitialMirror"].found) {
document.getElementById("mirror").disabled = false; document.getElementById("mirror").disabled = false;
@@ -535,7 +519,7 @@
} }
function showReference(_param){ function showReference(){
var domainname = getDomainname(); var domainname = getDomainname();
url = domainname + "/fileserver/config/reference.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1); url = domainname + "/fileserver/config/reference.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1);
@@ -630,10 +614,9 @@
document.getElementById("TakeImage_AutoExposureLevel_value1").disabled = true; document.getElementById("TakeImage_AutoExposureLevel_value1").disabled = true;
document.getElementById("finerotate").disabled = true; document.getElementById("finerotate").disabled = true;
document.getElementById("prerotateangle").disabled = true; document.getElementById("prerotateangle").disabled = true;
document.getElementById("saveReference").disabled = true; document.getElementById("updatereferenceimage").disabled = true;
document.getElementById("orignReference").disabled = true; document.getElementById("showcurrentreference").disabled = true;
document.getElementById("newReference").disabled = false; document.getElementById("startreference").disabled = false;
document.getElementById("updateReference").disabled = true;
document.getElementById("TakeImage_Brightness_value1").disabled = true; document.getElementById("TakeImage_Brightness_value1").disabled = true;
document.getElementById("TakeImage_Saturation_value1").disabled = true; document.getElementById("TakeImage_Saturation_value1").disabled = true;
document.getElementById("TakeImage_Contrast_value1").disabled = true; document.getElementById("TakeImage_Contrast_value1").disabled = true;
@@ -661,7 +644,7 @@
} }
function SaveReference(){ function SaveReference(){
if (confirm("Are you sure you want to save the new reference image configuration?")) { //if (confirm("Are you sure you want to save the new reference image configuration?")) {
var domainname = getDomainname(); var domainname = getDomainname();
param["Alignment"]["InitialRotate"].value1 = (Number(document.getElementById("prerotateangle").value) + param["Alignment"]["InitialRotate"].value1 = (Number(document.getElementById("prerotateangle").value) +
@@ -695,7 +678,7 @@
showReference(); showReference();
firework.launch('Reference image configuration saved', 'success', 5000); firework.launch('Reference image configuration saved', 'success', 5000);
} //}
} }
function loadCanvas(dataURL, grid) { function loadCanvas(dataURL, grid) {
@@ -975,7 +958,7 @@
if (document.getElementById("ExpertModus_enabled").checked) { if (document.getElementById("ExpertModus_enabled").checked) {
_style_pur = ''; _style_pur = '';
_hidden = false; _hidden = false;
firework.launch("Expert view activated. Please use carefully", 'warning', 5000); firework.launch("Expert parameter view activated. Please use carefully", 'warning', 5000);
} }
const expert = document.querySelectorAll(".expert"); const expert = document.querySelectorAll(".expert");

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

@@ -92,9 +92,9 @@
<li><a href="#" onclick="loadPage('prevalue_set.html?v=$COMMIT_HASH');">Set "Previous Value"</a></li> <li><a href="#" onclick="loadPage('prevalue_set.html?v=$COMMIT_HASH');">Set "Previous Value"</a></li>
<li><a href="#" onclick="loadPage('edit_config_param.html?v=$COMMIT_HASH');">Configuration</a></li> <li><a href="#" onclick="loadPage('edit_config_param.html?v=$COMMIT_HASH');">Configuration</a></li>
<li><a>Alignment <i class="arrow right"></i></a> <li><a>Alignment <i class="arrow right"></i></a>
<ul> <ul style="width: 350px">
<li><a href="#" onclick="loadPage('edit_reference.html?v=$COMMIT_HASH');">Reference Image</a></li> <li style="width: 350px"><a href="#" onclick="loadPage('edit_reference.html?v=$COMMIT_HASH');">Reference Image and Camera Settings</a></li>
<li><a href="#" onclick="loadPage('edit_alignment.html?v=$COMMIT_HASH');">Alignment Marker</a></li> <li style="width: 350px"><a href="#" onclick="loadPage('edit_alignment.html?v=$COMMIT_HASH');">Alignment Markers</a></li>
</ul> </ul>
</li> </li>
<li><a><strong>R</strong>egions <strong>O</strong>f <strong>I</strong>nterest <i class="arrow right"></i></a> <li><a><strong>R</strong>egions <strong>O</strong>f <strong>I</strong>nterest <i class="arrow right"></i></a>