mirror of
https://github.com/jomjol/AI-on-the-edge-device.git
synced 2025-12-06 11:36:51 +03:00
976 lines
41 KiB
HTML
976 lines
41 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en" xml:lang="en">
|
|
<head>
|
|
<title>Reference Image and Camera Settings</title>
|
|
<meta charset="utf-8"/>
|
|
|
|
<style>
|
|
h1 {font-size: 2em;}
|
|
h2 {font-size: 1.5em; margin-block-start: 0.0em; margin-block-end: 0.2em;}
|
|
h3 {font-size: 1.2em;}
|
|
p {font-size: 1em;}
|
|
|
|
input[type=number] {
|
|
width: 60px;
|
|
margin-right: 10px;
|
|
padding: 3px 5px;
|
|
display: inline-block;
|
|
border: 1px solid #ccc;
|
|
font-size: 16px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
input:out-of-range {
|
|
background-color: rgba(255, 0, 0, 0.25);
|
|
border: 1px solid red;
|
|
}
|
|
|
|
input:invalid {
|
|
background-color: rgba(255, 0, 0, 0.25);
|
|
border: 1px solid red;
|
|
}
|
|
|
|
.expert {
|
|
background-color: #ffefef;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.button {
|
|
padding: 5px 10px;
|
|
font-size: 16px;
|
|
}
|
|
|
|
th, td {
|
|
padding: 5px 5px 5px 5px;
|
|
}
|
|
|
|
table {
|
|
width: 660px;
|
|
padding: 5px;
|
|
}
|
|
|
|
.tooltip {
|
|
position: relative;
|
|
display: inline-block;
|
|
}
|
|
|
|
.tooltip .tooltiptext {
|
|
visibility: hidden;
|
|
width: 460px;
|
|
background-color: #fcfcfc;
|
|
|
|
padding: 5px;
|
|
padding-bottom: 0;
|
|
|
|
border: solid black 2px;
|
|
|
|
/* Position the tooltip */
|
|
position: absolute;
|
|
z-index: 1;
|
|
top: 100%;
|
|
left: 520%;
|
|
margin-left: -600px;
|
|
}
|
|
|
|
.tooltip:hover .tooltiptext {
|
|
visibility: visible;
|
|
}
|
|
|
|
.tooltip-content {
|
|
width: calc(100% - 2px);
|
|
height: calc(100% - 2px);
|
|
padding: 1px;
|
|
}
|
|
</style>
|
|
|
|
<link rel="stylesheet" href="mkdocs_theme.css?v=$COMMIT_HASH" />
|
|
<link rel="stylesheet" href="mkdocs_theme_extra.css?v=$COMMIT_HASH" />
|
|
<link rel="stylesheet" href="github.min.css?v=$COMMIT_HASH" />
|
|
|
|
<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="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>
|
|
|
|
<body style="font-family: arial; padding: 0px 10px;">
|
|
<h2>Reference Image and Camera Settings</h2>
|
|
<details id="desc_details" style="font-size:16px">
|
|
<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>
|
|
</summary>
|
|
<p>
|
|
The reference image is the base image on which the alignment markers, digit ROIs and anlog ROIs will be defined.
|
|
</p>
|
|
<p>
|
|
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 / Change Camera Settings"</b> to start the creation of your own reference image. After clicking the button, the camera will take a
|
|
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.
|
|
</p>
|
|
<p>
|
|
To have a reliable evaluation processing, it is mandatory to have the digit ROIs horizontally aligned. Using the two input fields "Rotation angle" and
|
|
"(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 (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>
|
|
</p>
|
|
<p>
|
|
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
|
|
(reference image, alignment, ROI configuration) are completed to activate new configuration.
|
|
</p>
|
|
</details>
|
|
<hr>
|
|
|
|
<table>
|
|
<tr>
|
|
<td><input class="button" type="button" id="showcurrentreference" disabled value="Reset and show current Reference and Camera Settings" onclick="showReference()"></td>
|
|
<td><input class="button" type="button" id="startreference" value="Create New Reference / Change Camera Settings" onclick="doTakeReference()"></td>
|
|
</tr>
|
|
</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%">
|
|
<colgroup>
|
|
<col span="1" style="width: 12%;">
|
|
<col span="1" style="width: 15%;">
|
|
<col span="1" style="width: 3%;">
|
|
<col span="1" style="width: 18%;">
|
|
<col span="1" style="width: 10%;">
|
|
<col span="1" style="width: 3%;">
|
|
</colgroup>
|
|
<tr class="expert">
|
|
<td>
|
|
<label for="zoom" id="labelzoom">Enable zoom: <b>*)</b></label></td>
|
|
<td>
|
|
<input type="checkbox" id="zoom" name="zoom" value="0"></td>
|
|
<td>$TOOLTIP_TakeImage_Zoom</td>
|
|
<td>
|
|
<label for="zoomoffsetx">Zoom offset X: <b>*)</b></label></td>
|
|
<td>
|
|
<input required type="number" id="zoomoffsetx" name="zoomoffsetx" value="0" min="0" max="1280" step="1"
|
|
oninput="(!validity.rangeOverflow||(value=1280)) && (!validity.rangeUnderflow||(value=0)) &&
|
|
(!validity.stepMismatch||(value=parseInt(this.value)));">
|
|
</td>
|
|
<td>$TOOLTIP_TakeImage_ZoomOffsetX</td>
|
|
</tr>
|
|
<tr class="expert">
|
|
<td>
|
|
<label for="zoommode" id="labelzoommode">Zoom mode: <b>*)</b></label></td>
|
|
<td>
|
|
<input required type="number" id="zoommode" name="zoommode" value="0" min="0" max="1" step="1"
|
|
oninput="(!validity.rangeOverflow||(value=1)) && (!validity.rangeUnderflow||(value=0)) &&
|
|
(!validity.stepMismatch||(value=parseInt(this.value)));">
|
|
</td>
|
|
<td>$TOOLTIP_TakeImage_ZoomMode</td>
|
|
<td>
|
|
<label for="zoomoffsety">Zoom offset Y: <b>*)</b></label></td>
|
|
<td>
|
|
<input required type="number" id="zoomoffsety" name="zoomoffsety" value="0" min="0" max="960" step="1"
|
|
oninput="(!validity.rangeOverflow||(value=960)) && (!validity.rangeUnderflow||(value=0)) &&
|
|
(!validity.stepMismatch||(value=parseInt(this.value)));">
|
|
</td>
|
|
<td>$TOOLTIP_TakeImage_ZoomOffsetY</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label for="mirror" id="labelmirror">Mirror image:</label></td>
|
|
<td>
|
|
<input type="checkbox" id="mirror" name="mirror" value="1" onchange="drawRotated()"></td>
|
|
<td>$TOOLTIP_Alignment_InitialMirror</td>
|
|
<td>
|
|
<class id="TakeImage_LEDIntensity_text" style="color:black;">LED intensity: <b>*)</b></class>
|
|
</td>
|
|
<td>
|
|
<input required style="clear: both" type="number" id="TakeImage_LEDIntensity_value1" size="13" value="0" min="0" max="100"
|
|
oninput="(!validity.rangeOverflow||(value=100)) && (!validity.rangeUnderflow||(value=0)) &&
|
|
(!validity.stepMismatch||(value=parseInt(this.value)));">
|
|
</td>
|
|
<td>$TOOLTIP_TakeImage_LEDIntensity</td>
|
|
</tr>
|
|
<tr>
|
|
<td>
|
|
<label for="flip" id="labelflip">Flip image size:</label></td>
|
|
<td>
|
|
<input type="checkbox" id="flip" name="flip" value="1" onchange="drawRotated()"></td>
|
|
<td>$TOOLTIP_Alignment_FlipImageSize</td>
|
|
<td>
|
|
<class id="TakeImage_Brightness_text" style="color:black;">Brightness: <b>*)</b></class>
|
|
</td>
|
|
<td>
|
|
<input style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_Brightness_value1" size="13" value=0 min="-2" max="2" oninput="this.nextElementSibling.value = this.value">
|
|
<output id="TakeImage_Brightness_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
|
|
</td>
|
|
<td>$TOOLTIP_TakeImage_Brightness</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="prerotateangle">Rotation angle:</label></td>
|
|
<td>
|
|
<input required type="number" id="prerotateangle" name="prerotateangle" value="0" min="-360" max="360" onchange="drawRotated()"
|
|
oninput="(!validity.rangeOverflow||(value=360)) && (!validity.rangeUnderflow||(value=-360)) &&
|
|
(!validity.stepMismatch||(value=parseInt(this.value)));">degree
|
|
</td>
|
|
<td>$TOOLTIP_Alignment_InitialRotate</td>
|
|
<td>
|
|
<class id="TakeImage_Contrast_text" style="color:black;">Contrast: <b>*)</b></class>
|
|
</td>
|
|
<td>
|
|
<input style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_Contrast_value1" size="13" value=0 min="-2" max="2" oninput="this.nextElementSibling.value = this.value">
|
|
<output id="TakeImage_Contrast_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
|
|
</td>
|
|
<td>$TOOLTIP_TakeImage_Contrast</td>
|
|
</tr>
|
|
<tr>
|
|
<td><label for="finerotate">(Fine-tune):</label></td>
|
|
<td>
|
|
<input required type="number" id="finerotate" name="finerotate" value=0.0 min="-1" max="1" step="0.1" onchange="drawRotated()"
|
|
oninput="(!validity.rangeOverflow||(value=1)) && (!validity.rangeUnderflow||(value=-1)) &&
|
|
(!validity.stepMismatch||(value=parseInt(this.value)));">degree
|
|
</td>
|
|
<td></td>
|
|
<td>
|
|
<class id="TakeImage_Saturation_text" style="color:black;">Saturation: <b>*)</b></class>
|
|
</td>
|
|
<td>
|
|
<input style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_Saturation_value1" size="13" value=0 min="-2" max="2" oninput="this.nextElementSibling.value = this.value">
|
|
<output id="TakeImage_Saturation_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
|
|
</td>
|
|
<td>$TOOLTIP_TakeImage_Saturation</td>
|
|
</tr>
|
|
<tr class="expert">
|
|
<td>
|
|
<label for="grayscale" id="labelgrayscale">Grayscale: <b>*)</b></label></td>
|
|
<td>
|
|
<input type="checkbox" id="grayscale" name="grayscale" value="0"></td>
|
|
<td>$TOOLTIP_TakeImage_Grayscale</td>
|
|
<td>
|
|
<label for="aec2" id="labelaec2">Auto Exposure Control 2: <b>*)</b></label></td>
|
|
<td>
|
|
<input type="checkbox" id="aec2" name="aec2" value="0"></td>
|
|
<td>$TOOLTIP_TakeImage_Aec2</td>
|
|
</tr>
|
|
<tr class="expert">
|
|
<td>
|
|
<label for="negative" id="labelnegative">Negative: <b>*)</b></label></td>
|
|
<td>
|
|
<input type="checkbox" id="negative" name="negative" value="0" onchange="drawRotated()"></td>
|
|
<td>$TOOLTIP_TakeImage_Negative</td>
|
|
<td>
|
|
<class id="TakeImage_AutoExposureLevel_text" style="color:black;">Auto Exposure Level: <b>*)</b></class>
|
|
</td>
|
|
<td>
|
|
<input style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_AutoExposureLevel_value1" size="13" value=0 min="-2" max="2" oninput="this.nextElementSibling.value = this.value">
|
|
<output id="TakeImage_AutoExposureLevel_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
|
|
</td>
|
|
<td>$TOOLTIP_TakeImage_AutoExposureLevel</td>
|
|
</tr>
|
|
<tr class="expert">
|
|
<td>
|
|
<label for="FixedExposure" id="labelFixedExposure">FixedExposure: <b>*)</b></label></td>
|
|
<td>
|
|
<input type="checkbox" id="FixedExposure" name="FixedExposure" value="0"></td>
|
|
<td>$TOOLTIP_TakeImage_FixedExposure</td>
|
|
<td>
|
|
<class id="TakeImage_Sharpness_text" style="color:black;">Sharpness: <b>*)</b></class>
|
|
</td>
|
|
<td>
|
|
<input style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_Sharpness_value1" size="13" value=0 min="-4" max="3" oninput="this.nextElementSibling.value = this.value">
|
|
<output id="TakeImage_Sharpness_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
|
|
</td>
|
|
<td>$TOOLTIP_TakeImage_Sharpness</td>
|
|
</tr>
|
|
</table>
|
|
|
|
<table>
|
|
</tr>
|
|
<td><input class="button" type="submit" id="take" onclick="doTakeReference()" value="Update Reference Image"></td>
|
|
<td><input class="button" type="button" id="updatereferenceimage" value="Save new Reference Image and Camera Settings" onclick="SaveReference()"></td>
|
|
</tr>
|
|
</table>
|
|
|
|
<hr>
|
|
<b>Reference Image:</b><br>
|
|
<canvas id="canvas"></canvas></td>
|
|
|
|
<script language="JavaScript">
|
|
var canvas = document.getElementById('canvas'),
|
|
context = canvas.getContext('2d'),
|
|
imageObj = new Image(),
|
|
isActReference = false,
|
|
param,
|
|
_rotate_temp,
|
|
_mirror_temp,
|
|
_isize_temp,
|
|
_grayscale_temp,
|
|
_negative_temp,
|
|
_aec2_temp,
|
|
_FixedExposure_temp,
|
|
_zoom_temp,
|
|
_zm_temp,
|
|
_x_temp,
|
|
_y_temp,
|
|
_intensity_temp,
|
|
_brightness_temp,
|
|
_contrast_temp,
|
|
_saturation_temp,
|
|
_sharpness_temp,
|
|
_ae_temp;
|
|
|
|
function doReboot() {
|
|
if (confirm("Are you sure you want to reboot? Did you save the config?")) {
|
|
var stringota = getDomainname() + "/reboot";
|
|
window.location = stringota;
|
|
window.location.href = stringota;
|
|
window.location.assign(stringota);
|
|
window.location.replace(stringota);
|
|
}
|
|
}
|
|
|
|
// Create New Reference, Update Image
|
|
function doTakeReference(){
|
|
var xhttp = new XMLHttpRequest();
|
|
var domainname = getDomainname();
|
|
|
|
var _grayscale = document.getElementById("grayscale").checked ? '1' : '0';
|
|
var _negative = document.getElementById("negative").checked ? '1' : '0';
|
|
var _aec2 = document.getElementById("aec2").checked ? '1' : '0';
|
|
var _FixedExposure = document.getElementById("FixedExposure").checked ? '1' : '0';
|
|
var _zoom = document.getElementById("zoom").checked ? '1' : '0';
|
|
|
|
var _zm = document.getElementById("zoommode").value;
|
|
if (_zm == '') {
|
|
_zm = '0';
|
|
}
|
|
|
|
var _x = document.getElementById("zoomoffsetx").value;
|
|
if (_x == '') {
|
|
_x = '0';
|
|
}
|
|
|
|
var _y = document.getElementById("zoomoffsety").value;
|
|
if (_y == '') {
|
|
_y = '0';
|
|
}
|
|
|
|
var _intensity = document.getElementById("TakeImage_LEDIntensity_value1").value;
|
|
if (_intensity == '') {
|
|
_intensity = '50';
|
|
}
|
|
|
|
var _brightness = document.getElementById("TakeImage_Brightness_value1").value;
|
|
var _contrast = document.getElementById("TakeImage_Contrast_value1").value;
|
|
var _saturation = document.getElementById("TakeImage_Saturation_value1").value;
|
|
var _sharpness = document.getElementById("TakeImage_Sharpness_value1").value;
|
|
|
|
var _ae = document.getElementById("TakeImage_AutoExposureLevel_value1").value;
|
|
|
|
if (_grayscale == '1') {
|
|
param["TakeImage"]["Grayscale"].value1 = "true";
|
|
} else {
|
|
param["TakeImage"]["Grayscale"].value1 = "false";
|
|
}
|
|
if (_negative == '1') {
|
|
param["TakeImage"]["Negative"].value1 = "true";
|
|
} else {
|
|
param["TakeImage"]["Negative"].value1 = "false";
|
|
}
|
|
if (_aec2 == '1') {
|
|
param["TakeImage"]["Aec2"].value1 = "true";
|
|
} else {
|
|
param["TakeImage"]["Aec2"].value1 = "false";
|
|
}
|
|
if (_FixedExposure == '1') {
|
|
param["TakeImage"]["FixedExposure"].value1 = "true";
|
|
} else {
|
|
param["TakeImage"]["FixedExposure"].value1 = "false";
|
|
}
|
|
if (_zoom == '1') {
|
|
param["TakeImage"]["Zoom"].value1 = "true";
|
|
} else {
|
|
param["TakeImage"]["Zoom"].value1 = "false";
|
|
}
|
|
|
|
param["TakeImage"]["ZoomMode"].value1 = _zm;
|
|
param["TakeImage"]["ZoomOffsetX"].value1 = _x;
|
|
param["TakeImage"]["ZoomOffsetY"].value1 = _y;
|
|
param["TakeImage"]["LEDIntensity"].value1 = _intensity;
|
|
param["TakeImage"]["Brightness"].value1 = _brightness;
|
|
param["TakeImage"]["Contrast"].value1 = _contrast;
|
|
param["TakeImage"]["Saturation"].value1 = _saturation;
|
|
param["TakeImage"]["Sharpness"].value1 = _sharpness;
|
|
param["TakeImage"]["AutoExposureLevel"].value1 = _ae;
|
|
|
|
var url = domainname + "/editflow?task=test_take";
|
|
url = url + "&bri=" + _brightness + "&con=" + _contrast + "&sat=" + _saturation + "&sh=" + _sharpness;
|
|
url = url + "&int=" + _intensity + "&gs=" + _grayscale + "&ne=" + _negative + "&z=" + _zoom;
|
|
|
|
if (_zoom != '0') {
|
|
url = url + "&zm=" + _zm + "&x=" + _x + "&y=" + _y;
|
|
}
|
|
|
|
url = url + "&ae=" + _ae + "&a2=" + _aec2;
|
|
|
|
if (domainname.length > 0){
|
|
url = url + "&host=" + domainname;
|
|
}
|
|
|
|
xhttp.open("GET", url, false);
|
|
xhttp.send();
|
|
|
|
firework.launch('Taking new image...', 'success', 5000);
|
|
|
|
var _url = domainname + "/img_tmp/raw.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1);
|
|
|
|
document.getElementById("updatereferenceimage").disabled = false;
|
|
|
|
document.getElementById("grayscale").disabled = false;
|
|
document.getElementById("negative").disabled = false;
|
|
document.getElementById("aec2").disabled = false;
|
|
document.getElementById("FixedExposure").disabled = false;
|
|
document.getElementById("zoom").disabled = false;
|
|
document.getElementById("zoommode").disabled = false;
|
|
document.getElementById("zoomoffsetx").disabled = false;
|
|
document.getElementById("zoomoffsety").disabled = false;
|
|
document.getElementById("TakeImage_AutoExposureLevel_value1").disabled = false;
|
|
document.getElementById("finerotate").disabled = false;
|
|
document.getElementById("prerotateangle").disabled = false;
|
|
|
|
document.getElementById("showcurrentreference").disabled = false;
|
|
document.getElementById("startreference").disabled = true;
|
|
document.getElementById("updatereferenceimage").disabled = false;
|
|
|
|
if (param["Alignment"]["InitialMirror"].found) {
|
|
document.getElementById("mirror").disabled = false;
|
|
}
|
|
else {
|
|
document.getElementById("labelmirror").style = "color:lightgrey;";
|
|
}
|
|
|
|
if (param["Alignment"]["FlipImageSize"].found) {
|
|
document.getElementById("flip").disabled = false;
|
|
}
|
|
else {
|
|
document.getElementById("labelflip").style = "color:lightgrey;";
|
|
}
|
|
|
|
document.getElementById("TakeImage_Brightness_value1").disabled = false;
|
|
document.getElementById("TakeImage_Contrast_value1").disabled = false;
|
|
document.getElementById("TakeImage_Saturation_value1").disabled = false;
|
|
document.getElementById("TakeImage_Sharpness_value1").disabled = false;
|
|
document.getElementById("TakeImage_LEDIntensity_value1").disabled = false;
|
|
|
|
isActReference = false;
|
|
loadCanvas(_url, true);
|
|
camSettingsSet();
|
|
}
|
|
|
|
|
|
function camSettingsSet(){
|
|
var domainname = getDomainname();
|
|
var xhttp = new XMLHttpRequest();
|
|
|
|
var _grayscale = '0';
|
|
var _negative = '0';
|
|
var _aec2 = '0';
|
|
var _FixedExposure = '0';
|
|
var _zoom = '0';
|
|
|
|
if (_grayscale_temp == "true") {
|
|
_grayscale = '1';
|
|
}
|
|
if (_negative_temp == "true") {
|
|
_negative = '1';
|
|
}
|
|
if (_aec2_temp == "true") {
|
|
_aec2 = '1';
|
|
}
|
|
if (_FixedExposure_temp == "true") {
|
|
_FixedExposure = '1';
|
|
}
|
|
if (_zoom_temp == "true") {
|
|
_zoom = '1';
|
|
}
|
|
|
|
var url = domainname + "/editflow?task=cam_settings";
|
|
url = url + "&bri=" + _brightness_temp + "&con=" + _contrast_temp + "&sat=" + _saturation_temp + "&sh=" + _sharpness_temp;
|
|
url = url + "&int=" + _intensity_temp + "&gs=" + _grayscale + "&ne=" + _negative + "&z=" + _zoom;
|
|
|
|
if (_zoom != '0') {
|
|
url = url + "&zm=" + _zm_temp + "&x=" + _x_temp + "&y=" + _y_temp;
|
|
}
|
|
|
|
url = url + "&ae=" + _ae_temp + "&a2=" + _aec2;
|
|
|
|
if (domainname.length > 0){
|
|
url = url + "&host=" + domainname;
|
|
}
|
|
|
|
xhttp.open("GET", url, false);
|
|
xhttp.send();
|
|
}
|
|
|
|
|
|
function showReference(){
|
|
var domainname = getDomainname();
|
|
|
|
url = domainname + "/fileserver/config/reference.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1);
|
|
|
|
if (_rotate_temp < 0) {
|
|
document.getElementById("prerotateangle").value = Math.ceil(_rotate_temp);
|
|
}
|
|
else {
|
|
document.getElementById("prerotateangle").value = Math.floor(_rotate_temp);
|
|
}
|
|
|
|
document.getElementById("finerotate").value = (Number(_rotate_temp) - Number(document.getElementById("prerotateangle").value)).toFixed(1);
|
|
|
|
if (_mirror_temp == "true") {
|
|
document.getElementById("mirror").checked = true;
|
|
}
|
|
else {
|
|
document.getElementById("mirror").checked = false;
|
|
}
|
|
|
|
if (_isize_temp == "true") {
|
|
document.getElementById("flip").checked = true;
|
|
}
|
|
else {
|
|
document.getElementById("flip").checked = false;
|
|
}
|
|
|
|
if (_grayscale_temp == "true") {
|
|
document.getElementById("grayscale").checked = true;
|
|
}
|
|
else {
|
|
document.getElementById("grayscale").checked = false;
|
|
}
|
|
|
|
if (_negative_temp == "true") {
|
|
document.getElementById("negative").checked = true;
|
|
}
|
|
else {
|
|
document.getElementById("negative").checked = false;
|
|
}
|
|
|
|
if (_aec2_temp == "true") {
|
|
document.getElementById("aec2").checked = true;
|
|
}
|
|
else {
|
|
document.getElementById("aec2").checked = false;
|
|
}
|
|
|
|
if (_FixedExposure_temp == "true") {
|
|
document.getElementById("FixedExposure").checked = true;
|
|
}
|
|
else {
|
|
document.getElementById("FixedExposure").checked = false;
|
|
}
|
|
|
|
if (_zoom_temp == "true") {
|
|
document.getElementById("zoom").checked = true;
|
|
}
|
|
else {
|
|
document.getElementById("zoom").checked = false;
|
|
}
|
|
|
|
document.getElementById("zoommode").value = _zm_temp;
|
|
document.getElementById("zoomoffsetx").value = _x_temp;
|
|
document.getElementById("zoomoffsety").value = _y_temp;
|
|
|
|
document.getElementById("TakeImage_LEDIntensity_value1").value = _intensity_temp;
|
|
|
|
document.getElementById("TakeImage_Brightness_value1").value = _brightness_temp;
|
|
document.getElementById("TakeImage_Brightness_value1_output").value = _brightness_temp;
|
|
|
|
document.getElementById("TakeImage_Contrast_value1").value = _contrast_temp;
|
|
document.getElementById("TakeImage_Contrast_value1_output").value = _contrast_temp;
|
|
|
|
document.getElementById("TakeImage_Saturation_value1").value = _saturation_temp;
|
|
document.getElementById("TakeImage_Saturation_value1_output").value = _saturation_temp;
|
|
|
|
document.getElementById("TakeImage_Sharpness_value1").value = _sharpness_temp;
|
|
document.getElementById("TakeImage_Sharpness_value1_output").value = _sharpness_temp;
|
|
|
|
document.getElementById("TakeImage_AutoExposureLevel_value1").value = _ae_temp;
|
|
document.getElementById("TakeImage_AutoExposureLevel_value1_output").value = _ae_temp;
|
|
|
|
document.getElementById("grayscale").disabled = true;
|
|
document.getElementById("negative").disabled = true;
|
|
document.getElementById("aec2").disabled = true;
|
|
document.getElementById("FixedExposure").disabled = true;
|
|
document.getElementById("zoom").disabled = true;
|
|
document.getElementById("zoommode").disabled = true;
|
|
document.getElementById("zoomoffsetx").disabled = true;
|
|
document.getElementById("zoomoffsety").disabled = true;
|
|
document.getElementById("TakeImage_AutoExposureLevel_value1").disabled = true;
|
|
document.getElementById("finerotate").disabled = true;
|
|
document.getElementById("prerotateangle").disabled = true;
|
|
document.getElementById("updatereferenceimage").disabled = true;
|
|
document.getElementById("showcurrentreference").disabled = true;
|
|
document.getElementById("startreference").disabled = false;
|
|
document.getElementById("TakeImage_Brightness_value1").disabled = true;
|
|
document.getElementById("TakeImage_Saturation_value1").disabled = true;
|
|
document.getElementById("TakeImage_Contrast_value1").disabled = true;
|
|
document.getElementById("TakeImage_Sharpness_value1").disabled = true;
|
|
document.getElementById("TakeImage_LEDIntensity_value1").disabled = true;
|
|
document.getElementById("mirror").disabled = true;
|
|
document.getElementById("flip").disabled = true;
|
|
|
|
isActReference = true;
|
|
loadCanvas(url, false);
|
|
}
|
|
|
|
function dataURLtoBlob(dataurl) {
|
|
var arr = dataurl.split(',');
|
|
var mime = arr[0].match(/:(.*?);/)[1];
|
|
var bstr = atob(arr[1]);
|
|
var n = bstr.length;
|
|
var u8arr = new Uint8Array(n);
|
|
|
|
while(n--){
|
|
u8arr[n] = bstr.charCodeAt(n);
|
|
}
|
|
|
|
return new Blob([u8arr], {type:mime});
|
|
}
|
|
|
|
function SaveReference(){
|
|
//if (confirm("Are you sure you want to save the new reference image configuration?")) {
|
|
var domainname = getDomainname();
|
|
|
|
param["Alignment"]["InitialRotate"].value1 = (Number(document.getElementById("prerotateangle").value) +
|
|
Number(document.getElementById("finerotate").value)).toFixed(1);
|
|
|
|
if (document.getElementById("mirror").checked) {
|
|
param["Alignment"]["InitialMirror"].value1 = "true";
|
|
}
|
|
else {
|
|
param["Alignment"]["InitialMirror"].value1 = "false";
|
|
}
|
|
|
|
if (document.getElementById("flip").checked) {
|
|
param["Alignment"]["FlipImageSize"].value1 = "true";
|
|
}
|
|
else {
|
|
param["Alignment"]["FlipImageSize"].value1 = "false";
|
|
}
|
|
|
|
var canvas = document.getElementById("canvas");
|
|
drawRotated(false);
|
|
|
|
WriteConfigININew();
|
|
SaveConfigToServer(domainname);
|
|
document.getElementById("saveReference").disabled = true;
|
|
|
|
SaveCanvasToImage(canvas, "/config/reference.jpg", true, domainname);
|
|
|
|
LoadParamTemp();
|
|
camSettingsSet();
|
|
|
|
showReference();
|
|
firework.launch('Reference image configuration saved', 'success', 5000);
|
|
//}
|
|
}
|
|
|
|
function loadCanvas(dataURL, grid) {
|
|
var canvas = document.getElementById('canvas');
|
|
var context = canvas.getContext('2d');
|
|
|
|
imageObj.onload = function() {
|
|
canvas.width = this.width;
|
|
canvas.height = this.height;
|
|
|
|
if (grid) {
|
|
drawRotated(true);
|
|
}
|
|
else {
|
|
drawRotated(false);
|
|
}
|
|
};
|
|
|
|
imageObj.src = dataURL;
|
|
}
|
|
|
|
function getCoords(elem) {
|
|
// crossbrowser version
|
|
var box = elem.getBoundingClientRect();
|
|
var body = document.body;
|
|
var docEl = document.documentElement;
|
|
var scrollTop = window.pageYOffset || docEl.scrollTop || body.scrollTop;
|
|
var scrollLeft = window.pageXOffset || docEl.scrollLeft || body.scrollLeft;
|
|
var clientTop = docEl.clientTop || body.clientTop || 0;
|
|
var clientLeft = docEl.clientLeft || body.clientLeft || 0;
|
|
var top = box.top + scrollTop - clientTop;
|
|
var left = box.left + scrollLeft - clientLeft;
|
|
|
|
return { top: Math.round(top), left: Math.round(left) };
|
|
}
|
|
|
|
function openDescription() {
|
|
if(window.location.hash) {
|
|
var hash = window.location.hash.substring(1);
|
|
|
|
if(hash == 'description') {
|
|
document.getElementById("desc_details").open = true;
|
|
}
|
|
}
|
|
}
|
|
|
|
function init() {
|
|
openDescription();
|
|
canvas.addEventListener('mousemove', mouseMove, false);
|
|
|
|
loadConfig(getDomainname());
|
|
ParseConfig();
|
|
param = getConfigParameters();
|
|
|
|
param["TakeImage"]["AutoExposureLevel"]["enabled"] = true;
|
|
param["TakeImage"]["LEDIntensity"]["enabled"] = true;
|
|
param["TakeImage"]["Brightness"]["enabled"] = true;
|
|
param["TakeImage"]["Contrast"]["enabled"] = true;
|
|
param["TakeImage"]["Saturation"]["enabled"] = true;
|
|
param["TakeImage"]["Sharpness"]["enabled"] = true;
|
|
|
|
param["TakeImage"]["Grayscale"]["enabled"] = true;
|
|
param["TakeImage"]["Negative"]["enabled"] = true;
|
|
param["TakeImage"]["Aec2"]["enabled"] = true;
|
|
param["TakeImage"]["FixedExposure"]["enabled"] = true;
|
|
param["TakeImage"]["Zoom"]["enabled"] = true;
|
|
param["TakeImage"]["ZoomMode"]["enabled"] = true;
|
|
param["TakeImage"]["ZoomOffsetX"]["enabled"] = true;
|
|
param["TakeImage"]["ZoomOffsetY"]["enabled"] = true;
|
|
|
|
if (!param["TakeImage"]["Grayscale"]["found"]) {
|
|
param["TakeImage"]["Grayscale"]["found"] = true;
|
|
param["TakeImage"]["Grayscale"].value1 = 'false';
|
|
}
|
|
if (!param["TakeImage"]["Negative"]["found"]) {
|
|
param["TakeImage"]["Negative"]["found"] = true;
|
|
param["TakeImage"]["Negative"].value1 = 'false';
|
|
}
|
|
if (!param["TakeImage"]["Aec2"]["found"]) {
|
|
param["TakeImage"]["Aec2"]["found"] = true;
|
|
param["TakeImage"]["Aec2"].value1 = 'false';
|
|
}
|
|
if (!param["TakeImage"]["FixedExposure"]["found"]) {
|
|
param["TakeImage"]["FixedExposure"]["found"] = true;
|
|
param["TakeImage"]["FixedExposure"].value1 = 'false';
|
|
}
|
|
if (!param["TakeImage"]["Zoom"]["found"]) {
|
|
param["TakeImage"]["Zoom"]["found"] = true;
|
|
param["TakeImage"]["Zoom"].value1 = 'false';
|
|
}
|
|
if (!param["TakeImage"]["ZoomMode"]["found"]) {
|
|
param["TakeImage"]["ZoomMode"]["found"] = true;
|
|
param["TakeImage"]["ZoomMode"].value1 = '0';
|
|
}
|
|
if (!param["TakeImage"]["ZoomOffsetX"]["found"]) {
|
|
param["TakeImage"]["ZoomOffsetX"]["found"] = true;
|
|
param["TakeImage"]["ZoomOffsetX"].value1 = '0';
|
|
}
|
|
if (!param["TakeImage"]["ZoomOffsetY"]["found"]) {
|
|
param["TakeImage"]["ZoomOffsetY"]["found"] = true;
|
|
param["TakeImage"]["ZoomOffsetY"].value1 = '0';
|
|
}
|
|
if (!param["TakeImage"]["AutoExposureLevel"]["found"]) {
|
|
param["TakeImage"]["AutoExposureLevel"]["found"] = true;
|
|
param["TakeImage"]["AutoExposureLevel"]["value1"] = '0';
|
|
}
|
|
if (!param["TakeImage"]["LEDIntensity"]["found"]) {
|
|
param["TakeImage"]["LEDIntensity"]["found"] = true;
|
|
param["TakeImage"]["LEDIntensity"]["value1"] = '50';
|
|
}
|
|
if (!param["TakeImage"]["Brightness"]["found"]) {
|
|
param["TakeImage"]["Brightness"]["found"] = true;
|
|
param["TakeImage"]["Brightness"]["value1"] = '0';
|
|
}
|
|
if (!param["TakeImage"]["Contrast"]["found"]) {
|
|
param["TakeImage"]["Contrast"]["found"] = true;
|
|
param["TakeImage"]["Contrast"]["value1"] = '0';
|
|
}
|
|
if (!param["TakeImage"]["Saturation"]["found"]) {
|
|
param["TakeImage"]["Saturation"]["found"] = true;
|
|
param["TakeImage"]["Saturation"]["value1"] = '0';
|
|
}
|
|
if (!param["TakeImage"]["Sharpness"]["found"]) {
|
|
param["TakeImage"]["Sharpness"]["found"] = true;
|
|
param["TakeImage"]["Sharpness"]["value1"] = '0';
|
|
}
|
|
|
|
UpdateExpertModus();
|
|
LoadParamTemp();
|
|
showReference();
|
|
}
|
|
|
|
|
|
function LoadParamTemp() {
|
|
_rotate_temp = param["Alignment"]["InitialRotate"].value1;
|
|
_mirror_temp = param["Alignment"]["InitialMirror"].value1;
|
|
_isize_temp = param["Alignment"]["FlipImageSize"].value1;
|
|
|
|
_grayscale_temp = param["TakeImage"]["Grayscale"].value1;
|
|
_negative_temp = param["TakeImage"]["Negative"].value1;
|
|
_aec2_temp = param["TakeImage"]["Aec2"].value1;
|
|
_FixedExposure_temp = param["TakeImage"]["FixedExposure"].value1;
|
|
_zoom_temp = param["TakeImage"]["Zoom"].value1;
|
|
_zm_temp = param["TakeImage"]["ZoomMode"].value1;
|
|
_x_temp = param["TakeImage"]["ZoomOffsetX"].value1;
|
|
_y_temp = param["TakeImage"]["ZoomOffsetY"].value1;
|
|
_intensity_temp = param["TakeImage"]["LEDIntensity"]["value1"];
|
|
_brightness_temp = param["TakeImage"]["Brightness"]["value1"];
|
|
_contrast_temp = param["TakeImage"]["Contrast"]["value1"];
|
|
_saturation_temp = param["TakeImage"]["Saturation"]["value1"];
|
|
_sharpness_temp = param["TakeImage"]["Sharpness"]["value1"];
|
|
_ae_temp = param["TakeImage"]["AutoExposureLevel"]["value1"];
|
|
}
|
|
|
|
|
|
function drawRotated(_grid = true) {
|
|
var canvas = document.getElementById('canvas');
|
|
var context = canvas.getContext('2d');
|
|
|
|
var _finerot = parseFloat(document.getElementById("finerotate").value);
|
|
var _prerot = parseFloat(document.getElementById("prerotateangle").value);
|
|
|
|
var _mirror = document.getElementById("mirror").checked ? '1' : '0';
|
|
var _flip = document.getElementById("flip").checked ? '1' : '0';
|
|
var _negative = document.getElementById("negative").checked ? '1' : '0';
|
|
|
|
if (_finerot == 1) {
|
|
_prerot+=1
|
|
_finerot = 0
|
|
}
|
|
|
|
if (_finerot == -1) {
|
|
_prerot-=1
|
|
_finerot = 0
|
|
}
|
|
|
|
degrees = _finerot + _prerot;
|
|
document.getElementById("finerotate").value = _finerot;
|
|
document.getElementById("prerotateangle").value = _prerot;
|
|
|
|
if (_flip == '1') {
|
|
canvas.width = imageObj.height;
|
|
canvas.height = imageObj.width;
|
|
}
|
|
else {
|
|
canvas.width = imageObj.width;
|
|
canvas.height = imageObj.height;
|
|
}
|
|
|
|
context.clearRect(0,0,canvas.width,canvas.height);
|
|
context.save();
|
|
|
|
if (isActReference) {
|
|
context.drawImage(imageObj,0,0);
|
|
}
|
|
else {
|
|
if (_negative == '1') {
|
|
context.filter = 'invert(1)';
|
|
}
|
|
|
|
context.translate(canvas.width/2,canvas.height/2);
|
|
context.rotate(degrees*Math.PI/180);
|
|
|
|
if (_mirror == '1') {
|
|
context.scale(-1, 1);
|
|
}
|
|
|
|
context.drawImage(imageObj,-imageObj.width/2,-imageObj.height/2);
|
|
}
|
|
|
|
context.restore();
|
|
|
|
if (_grid) {
|
|
drawGrid();
|
|
}
|
|
}
|
|
|
|
function drawGrid(){
|
|
var canvas = document.getElementById('canvas');
|
|
var context = canvas.getContext('2d');
|
|
|
|
var w = canvas.width;
|
|
var h = canvas.height;
|
|
context.save();
|
|
context.strokeStyle = '#00FF00';
|
|
|
|
for (i = h/2; i < h; i += 100) {
|
|
context.moveTo(0, i);
|
|
context.lineTo(w, i);
|
|
context.stroke();
|
|
context.moveTo(0, h-i);
|
|
context.lineTo(w, h-i);
|
|
context.stroke();
|
|
}
|
|
|
|
for (i = w/2; i < w; i += 100) {
|
|
context.moveTo(i, 0);
|
|
context.lineTo(i, h);
|
|
context.stroke();
|
|
context.moveTo(w-i, 0);
|
|
context.lineTo(w-i, h);
|
|
context.stroke();
|
|
}
|
|
|
|
context.restore();
|
|
}
|
|
|
|
function mouseMove(e) {
|
|
var canvas = document.getElementById('canvas');
|
|
var context = canvas.getContext('2d');
|
|
|
|
if (isActReference) {
|
|
drawRotated(false);
|
|
}
|
|
else {
|
|
drawRotated(true);
|
|
}
|
|
|
|
var zw = getCoords(this);
|
|
var x = e.pageX - zw.left;
|
|
var y = e.pageY - zw.top;
|
|
|
|
context.lineWidth = 2;
|
|
context.strokeStyle = "#00FF00";
|
|
context.beginPath();
|
|
context.moveTo(0,y);
|
|
context.lineTo(canvas.width, y);
|
|
context.moveTo(x, 0);
|
|
context.lineTo(x, canvas.height);
|
|
context.stroke();
|
|
}
|
|
|
|
function UpdateExpertModus() {
|
|
var _style_pur = 'none';
|
|
var _hidden = true;
|
|
|
|
if (document.getElementById("ExpertModus_enabled").checked) {
|
|
_style_pur = '';
|
|
_hidden = false;
|
|
firework.launch("Expert parameter view activated. Please use carefully", 'warning', 5000);
|
|
}
|
|
|
|
const expert = document.querySelectorAll(".expert");
|
|
|
|
for (var i = 0; i < expert.length; i++) {
|
|
expert[i].style.display = _style_pur;
|
|
}
|
|
}
|
|
|
|
init();
|
|
|
|
</script>
|
|
</body>
|
|
</html>
|