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-10 05:26:52 +03:00
Code Issues Packages Projects Releases Wiki Activity

Enhance ref image page (#2910)

Browse Source 
Enhanced Reference Image page
This commit is contained in:
CaCO3
2024-02-14 23:49:35 +01:00
committed by GitHub
parent cc89d625f2
commit ef64be3888
3 changed files with 172 additions and 138 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -86,7 +86,7 @@
<body style="font-family: arial; padding: 0px 10px;"> <body style="font-family: arial; padding: 0px 10px;">
<div id="overlay"> <div id="overlay">
<div id="overlaytext">Device is busy with digitalization round. Waiting until it completes...</div> <div id="overlaytext"></div>
</div> </div>
<h2>Alignment Markers</h2> <h2>Alignment Markers</h2>

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

@@ -81,6 +81,29 @@
height: calc(100% - 2px); height: calc(100% - 2px);
padding: 1px; padding: 1px;
} }
#overlay {
position: fixed;
display: none;
width: 100%;
height: 100%;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.8);
z-index: 2;
}
#overlaytext{
position: absolute;
top: 50%;
left: 50%;
font-size: 150%;
color: white;
transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style> </style>
<link rel="stylesheet" href="mkdocs_theme.css?v=$COMMIT_HASH" /> <link rel="stylesheet" href="mkdocs_theme.css?v=$COMMIT_HASH" />
@@ -97,6 +120,10 @@
</head> </head>
<body style="font-family: arial; padding: 0px 10px;"> <body style="font-family: arial; padding: 0px 10px;">
<div id="overlay">
<div id="overlaytext"></div>
</div>
<h2>Reference Image and Camera Settings</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:
@@ -332,7 +359,8 @@
// Create New Reference, Update Image // Create New Reference, Update Image
function doTakeReference(){ function doTakeReference(){
firework.launch('Taking new image...', 'success', 5000); document.getElementById("overlay").style.display = "block";
document.getElementById("overlaytext").innerHTML = "Taking new image...";
document.getElementById("grayscale").disabled = false; document.getElementById("grayscale").disabled = false;
document.getElementById("negative").disabled = false; document.getElementById("negative").disabled = false;
@@ -371,100 +399,103 @@
document.getElementById("TakeImage_Sharpness_value1").disabled = false; document.getElementById("TakeImage_Sharpness_value1").disabled = false;
document.getElementById("TakeImage_LEDIntensity_value1").disabled = false; document.getElementById("TakeImage_LEDIntensity_value1").disabled = false;
var xhttp = new XMLHttpRequest(); setTimeout(function() {
var domainname = getDomainname(); var xhttp = new XMLHttpRequest();
var domainname = getDomainname();
var _grayscale = document.getElementById("grayscale").checked ? '1' : '0'; var _grayscale = document.getElementById("grayscale").checked ? '1' : '0';
var _negative = document.getElementById("negative").checked ? '1' : '0'; var _negative = document.getElementById("negative").checked ? '1' : '0';
var _aec2 = document.getElementById("aec2").checked ? '1' : '0'; var _aec2 = document.getElementById("aec2").checked ? '1' : '0';
var _FixedExposure = document.getElementById("FixedExposure").checked ? '1' : '0'; var _FixedExposure = document.getElementById("FixedExposure").checked ? '1' : '0';
var _zoom = document.getElementById("zoom").checked ? '1' : '0'; var _zoom = document.getElementById("zoom").checked ? '1' : '0';
var _zm = document.getElementById("zoommode").value; var _zm = document.getElementById("zoommode").value;
if (_zm == '') { if (_zm == '') {
_zm = '0'; _zm = '0';
} }
var _x = document.getElementById("zoomoffsetx").value; var _x = document.getElementById("zoomoffsetx").value;
if (_x == '') { if (_x == '') {
_x = '0'; _x = '0';
} }
var _y = document.getElementById("zoomoffsety").value; var _y = document.getElementById("zoomoffsety").value;
if (_y == '') { if (_y == '') {
_y = '0'; _y = '0';
} }
var _intensity = document.getElementById("TakeImage_LEDIntensity_value1").value; var _intensity = document.getElementById("TakeImage_LEDIntensity_value1").value;
if (_intensity == '') { if (_intensity == '') {
_intensity = '50'; _intensity = '50';
} }
var _brightness = document.getElementById("TakeImage_Brightness_value1").value; var _brightness = document.getElementById("TakeImage_Brightness_value1").value;
var _contrast = document.getElementById("TakeImage_Contrast_value1").value; var _contrast = document.getElementById("TakeImage_Contrast_value1").value;
var _saturation = document.getElementById("TakeImage_Saturation_value1").value; var _saturation = document.getElementById("TakeImage_Saturation_value1").value;
var _sharpness = document.getElementById("TakeImage_Sharpness_value1").value; var _sharpness = document.getElementById("TakeImage_Sharpness_value1").value;
var _ae = document.getElementById("TakeImage_AutoExposureLevel_value1").value; var _ae = document.getElementById("TakeImage_AutoExposureLevel_value1").value;
if (_grayscale == '1') { if (_grayscale == '1') {
param["TakeImage"]["Grayscale"].value1 = "true"; param["TakeImage"]["Grayscale"].value1 = "true";
} else { } else {
param["TakeImage"]["Grayscale"].value1 = "false"; param["TakeImage"]["Grayscale"].value1 = "false";
} }
if (_negative == '1') { if (_negative == '1') {
param["TakeImage"]["Negative"].value1 = "true"; param["TakeImage"]["Negative"].value1 = "true";
} else { } else {
param["TakeImage"]["Negative"].value1 = "false"; param["TakeImage"]["Negative"].value1 = "false";
} }
if (_aec2 == '1') { if (_aec2 == '1') {
param["TakeImage"]["Aec2"].value1 = "true"; param["TakeImage"]["Aec2"].value1 = "true";
} else { } else {
param["TakeImage"]["Aec2"].value1 = "false"; param["TakeImage"]["Aec2"].value1 = "false";
} }
if (_FixedExposure == '1') { if (_FixedExposure == '1') {
param["TakeImage"]["FixedExposure"].value1 = "true"; param["TakeImage"]["FixedExposure"].value1 = "true";
} else { } else {
param["TakeImage"]["FixedExposure"].value1 = "false"; param["TakeImage"]["FixedExposure"].value1 = "false";
} }
if (_zoom == '1') { if (_zoom == '1') {
param["TakeImage"]["Zoom"].value1 = "true"; param["TakeImage"]["Zoom"].value1 = "true";
} else { } else {
param["TakeImage"]["Zoom"].value1 = "false"; param["TakeImage"]["Zoom"].value1 = "false";
} }
param["TakeImage"]["ZoomMode"].value1 = _zm; param["TakeImage"]["ZoomMode"].value1 = _zm;
param["TakeImage"]["ZoomOffsetX"].value1 = _x; param["TakeImage"]["ZoomOffsetX"].value1 = _x;
param["TakeImage"]["ZoomOffsetY"].value1 = _y; param["TakeImage"]["ZoomOffsetY"].value1 = _y;
param["TakeImage"]["LEDIntensity"].value1 = _intensity; param["TakeImage"]["LEDIntensity"].value1 = _intensity;
param["TakeImage"]["Brightness"].value1 = _brightness; param["TakeImage"]["Brightness"].value1 = _brightness;
param["TakeImage"]["Contrast"].value1 = _contrast; param["TakeImage"]["Contrast"].value1 = _contrast;
param["TakeImage"]["Saturation"].value1 = _saturation; param["TakeImage"]["Saturation"].value1 = _saturation;
param["TakeImage"]["Sharpness"].value1 = _sharpness; param["TakeImage"]["Sharpness"].value1 = _sharpness;
param["TakeImage"]["AutoExposureLevel"].value1 = _ae; param["TakeImage"]["AutoExposureLevel"].value1 = _ae;
var url = domainname + "/editflow?task=test_take"; var url = domainname + "/editflow?task=test_take";
url = url + "&bri=" + _brightness + "&con=" + _contrast + "&sat=" + _saturation + "&sh=" + _sharpness; url = url + "&bri=" + _brightness + "&con=" + _contrast + "&sat=" + _saturation + "&sh=" + _sharpness;
url = url + "&int=" + _intensity + "&gs=" + _grayscale + "&ne=" + _negative + "&z=" + _zoom; url = url + "&int=" + _intensity + "&gs=" + _grayscale + "&ne=" + _negative + "&z=" + _zoom;
if (_zoom != '0') { if (_zoom != '0') {
url = url + "&zm=" + _zm + "&x=" + _x + "&y=" + _y; url = url + "&zm=" + _zm + "&x=" + _x + "&y=" + _y;
} }
url = url + "&ae=" + _ae + "&a2=" + _aec2; url = url + "&ae=" + _ae + "&a2=" + _aec2;
if (domainname.length > 0){ if (domainname.length > 0){
url = url + "&host=" + domainname; url = url + "&host=" + domainname;
} }
xhttp.open("GET", url, false); xhttp.open("GET", url, true);
xhttp.send(); xhttp.send();
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);
isActReference = false; isActReference = false;
loadCanvas(_url, true); loadCanvas(_url, true);
camSettingsSet(); camSettingsSet();
}, 1); // Delay so the overlay gets shown
} }
@@ -508,7 +539,7 @@
url = url + "&host=" + domainname; url = url + "&host=" + domainname;
} }
xhttp.open("GET", url, false); xhttp.open("GET", url, true);
xhttp.send(); xhttp.send();
} }
@@ -639,48 +670,48 @@
} }
function SaveReference(){ function SaveReference(){
//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) +
Number(document.getElementById("finerotate").value)).toFixed(1); Number(document.getElementById("finerotate").value)).toFixed(1);
if (document.getElementById("mirror").checked) { if (document.getElementById("mirror").checked) {
param["Alignment"]["InitialMirror"].value1 = "true"; param["Alignment"]["InitialMirror"].value1 = "true";
} }
else { else {
param["Alignment"]["InitialMirror"].value1 = "false"; param["Alignment"]["InitialMirror"].value1 = "false";
} }
if (document.getElementById("flip").checked) { if (document.getElementById("flip").checked) {
param["Alignment"]["FlipImageSize"].value1 = "true"; param["Alignment"]["FlipImageSize"].value1 = "true";
} }
else { else {
param["Alignment"]["FlipImageSize"].value1 = "false"; param["Alignment"]["FlipImageSize"].value1 = "false";
} }
var canvas = document.getElementById("canvas"); var canvas = document.getElementById("canvas");
drawRotated(false); drawRotated(false);
WriteConfigININew(); WriteConfigININew();
SaveConfigToServer(domainname); SaveConfigToServer(domainname);
//document.getElementById("savereferenceimage").disabled = true; //document.getElementById("savereferenceimage").disabled = true;
//document.getElementById("updatereferenceimage").disabled = true; //document.getElementById("updatereferenceimage").disabled = true;
SaveCanvasToImage(canvas, "/config/reference.jpg", true, domainname); SaveCanvasToImage(canvas, "/config/reference.jpg", true, domainname);
LoadParamTemp(); LoadParamTemp();
camSettingsSet(); camSettingsSet();
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) {
var canvas = document.getElementById('canvas'); var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d'); var context = canvas.getContext('2d');
console.log("loadCanvas");
imageObj.onload = function() { imageObj.onload = function() {
canvas.width = this.width; canvas.width = this.width;
canvas.height = this.height; canvas.height = this.height;
@@ -691,11 +722,27 @@
else { else {
drawRotated(false); drawRotated(false);
} }
console.log("Done");
document.getElementById("overlay").style.display = "none";
}; };
imageObj.src = dataURL; imageObj.src = dataURL;
} }
function SaveCanvasToImage(_canvas, _filename, _delete = true, _domainname = ""){
var JPEG_QUALITY=0.8;
var dataUrl = _canvas.toDataURL('image/jpeg', JPEG_QUALITY);
var rtn = dataURLtoBlob(dataUrl);
if (_delete) {
FileDeleteOnServer(_filename, _domainname);
}
FileSendContent(rtn, _filename, _domainname);
}
function getCoords(elem) { function getCoords(elem) {
// crossbrowser version // crossbrowser version
var box = elem.getBoundingClientRect(); var box = elem.getBoundingClientRect();

13
sd-card/html/readconfigcommon.js
View File

@@ -230,19 +230,6 @@ function FileSendContent(_content, _filename, _domainname = ""){
} }
function SaveCanvasToImage(_canvas, _filename, _delete = true, _domainname = ""){
var JPEG_QUALITY=0.8;
var dataUrl = _canvas.toDataURL('image/jpeg', JPEG_QUALITY);
var rtn = dataURLtoBlob(dataUrl);
if (_delete) {
FileDeleteOnServer(_filename, _domainname);
}
FileSendContent(rtn, _filename, _domainname);
}
function MakeRefImageZW(zw, _enhance, _domainname){ function MakeRefImageZW(zw, _enhance, _domainname){
var _filename = zw["name"].replace("/config/", "/img_tmp/"); var _filename = zw["name"].replace("/config/", "/img_tmp/");