Enhance ref image page (#2910)

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

View File

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

View File

@@ -81,6 +81,29 @@
height: calc(100% - 2px);
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>
<link rel="stylesheet" href="mkdocs_theme.css?v=$COMMIT_HASH" />
@@ -97,6 +120,10 @@
</head>
<body style="font-family: arial; padding: 0px 10px;">
<div id="overlay">
<div id="overlaytext"></div>
</div>
<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:
@@ -332,7 +359,8 @@
// Create New Reference, Update Image
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("negative").disabled = false;
@@ -371,6 +399,7 @@
document.getElementById("TakeImage_Sharpness_value1").disabled = false;
document.getElementById("TakeImage_LEDIntensity_value1").disabled = false;
setTimeout(function() {
var xhttp = new XMLHttpRequest();
var domainname = getDomainname();
@@ -457,7 +486,7 @@
url = url + "&host=" + domainname;
}
xhttp.open("GET", url, false);
xhttp.open("GET", url, true);
xhttp.send();
var _url = domainname + "/img_tmp/raw.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1);
@@ -465,6 +494,8 @@
isActReference = false;
loadCanvas(_url, true);
camSettingsSet();
}, 1); // Delay so the overlay gets shown
}
@@ -508,7 +539,7 @@
url = url + "&host=" + domainname;
}
xhttp.open("GET", url, false);
xhttp.open("GET", url, true);
xhttp.send();
}
@@ -639,7 +670,6 @@
}
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) +
@@ -674,13 +704,14 @@
showReference();
firework.launch('Reference image configuration saved', 'success', 5000);
//}
}
function loadCanvas(dataURL, grid) {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
console.log("loadCanvas");
imageObj.onload = function() {
canvas.width = this.width;
canvas.height = this.height;
@@ -691,11 +722,27 @@
else {
drawRotated(false);
}
console.log("Done");
document.getElementById("overlay").style.display = "none";
};
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) {
// crossbrowser version
var box = elem.getBoundingClientRect();

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){
var _filename = zw["name"].replace("/config/", "/img_tmp/");