Loading alignment page faster (#2868)

Da es Probleme mit param_temp gab (mal ging es, mal nicht), habe ich extra Parameter angelegt (_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).
Bei den bisherigen Tests, hat alles so funktioniert wie es soll.
This commit is contained in:
michael
2024-02-14 16:24:29 +01:00
committed by GitHub
parent 141aea7fa7
commit 6b38e44d7f
7 changed files with 1330 additions and 1295 deletions

View File

@@ -162,37 +162,63 @@
<script type="text/javascript" src="readconfigparam.js?v=$COMMIT_HASH"></script>
<script language="JavaScript">
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
imageObj = new Image(),
rect = {},
drag = false,
aktindex = 0,
refInfo,
enhanceCon = false,
param;
domainname = getDomainname();
param;
var canvas = document.getElementById('canvas'),
ctx = canvas.getContext('2d'),
imageObj = new Image(),
rect = {},
drag = false,
aktindex = 0,
refInfo,
enhanceCon = false,
domainname = getDomainname(),
neueref1,
neueref2,
param;
function doReboot() {
if (confirm("Are you sure you want to reboot? Did you save your changes?")) {
var stringota = getDomainname() + "/reboot";
window.location = stringota;
window.location.href = stringota;
window.location.assign(stringota);
window.location.replace(stringota);
if (confirm("Are you sure you want to reboot? Did you save your changes?")) {
var stringota = getDomainname() + "/reboot";
window.location = stringota;
window.location.href = stringota;
window.location.assign(stringota);
window.location.replace(stringota);
}
}
function ChangeSelection(){
aktindex = parseInt(document.getElementById("index").value);
UpdateReference();
if (aktindex == 0 && neueref1 == 1) {
UpdateReference();
}
else if (aktindex == 1 && neueref2 == 1) {
UpdateReference();
}
else
{
LoadReference();
}
}
function SaveToConfig(){
if (confirm("Are you sure you want to save the new alignment marker configuration?")) {
WriteConfigININew();
UpdateConfigReference(domainname)
if (neueref1 == 1 && neueref2 == 1) {
UpdateConfigReferences(domainname);
}
else if (neueref1 == 1) {
var anzneueref = 1;
UpdateConfigReference(anzneueref, domainname);
}
else if (neueref2 == 1) {
var anzneueref = 2;
UpdateConfigReference(anzneueref, domainname);
}
//UpdateConfigReference(domainname)
SaveConfigToServer(domainname);
document.getElementById("savemarker").disabled = true;
document.getElementById("enhancecontrast").disabled = true;
@@ -208,7 +234,7 @@ function EnhanceContrast(){
refInfo[aktindex]["dx"] = document.getElementById("refdx").value;
refInfo[aktindex]["dy"] = document.getElementById("refdy").value;
enhanceCon = true;
var enhanceCon = true;
document.getElementById("overlay").style.display = "block";
document.getElementById("overlaytext").innerHTML = "Enhancing Image Contrast...";
@@ -219,11 +245,17 @@ function EnhanceContrast(){
async function task() {
while (true) {
var ret = MakeContrastImageZW(refInfo[aktindex], enhanceCon, domainname);
if (ret) {
var ret = MakeRefImageZW(refInfo[aktindex], enhanceCon, domainname);
if (ret) {
UpdateReference();
//document.getElementById("enhancecontrast").disabled = true;
document.getElementById("overlay").style.display = "none";
if (aktindex == 0) {
neueref1 = 1;
}
else if (aktindex == 1) {
neueref2 = 1;
}
return;
}
else {
@@ -276,260 +308,284 @@ function UpdateReference(){
}
function dataURLtoBlob(dataurl) {
var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
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 loadCanvas(dataURL) {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
function loadCanvas(dataURL) {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
imageObj.onload = function() {
canvas.width = this.width;
canvas.height = this.height;
drawImage();
};
imageObj.onload = function() {
canvas.width = this.width;
canvas.height = this.height;
drawImage();
};
imageObj.src = dataURL;
}
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) };
}
/* hash #description open the details part of the page */
function openDescription() {
if(window.location.hash) {
var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
if(hash == 'description')
document.getElementById("desc_details").open = true;
}
}
function init() {
openDescription();
domainname = getDomainname();
loadConfig(domainname);
ParseConfig();
param = getConfigParameters();
document.getElementById("savemarker").disabled = true;
document.getElementById("enhancecontrast").disabled = true;
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
loadCanvas(domainname + "/fileserver/config/reference.jpg");
CopyReferenceToImgTmp(domainname);
refInfo = GetReferencesInfo();
UpdateReference();
drawImage();
}
function drawImage(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.clearRect(0,0,imageObj.width,imageObj.height);
context.save();
context.drawImage(imageObj, 0, 0);
// context.restore();
}
function CutOutReference(){
refInfo[aktindex]["x"] = document.getElementById("refx").value;
refInfo[aktindex]["y"] = document.getElementById("refy").value;
refInfo[aktindex]["dx"] = document.getElementById("refdx").value;
refInfo[aktindex]["dy"] = document.getElementById("refdy").value;
document.getElementById("overlay").style.display = "block";
document.getElementById("overlaytext").innerHTML = "Updating marker...";
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function task() {
while (true) {
var ret = MakeRefZW(refInfo[aktindex], domainname);
if (ret) {
UpdateReference();
document.getElementById("enhancecontrast").disabled = false;
document.getElementById("savemarker").disabled = false;
document.getElementById("overlay").style.display = "none";
return;
}
else {
// Get status
var xhttp = new XMLHttpRequest();
try {
xhttp.open("GET", domainname + "/statusflow", false);
xhttp.send();
}
catch (error){}
document.getElementById("overlaytext").innerHTML = "Device is busy, waiting until the Digitalization Round got completed (this can take several minutes)...<br><br>Current step: " + xhttp.responseText;
console.log("Device is busy, waiting 5s then checking again...");
await sleep(5000);
}
}
}
setTimeout(function() { // Delay so the overlay gets shown
task();
}, 1);
}
function drawGrid(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
w = canvas.width;
h = canvas.height;
ctx.save();
ctx.strokeStyle = '#00FF00';
for (i = h/2; i < h; i += 100)
{
ctx.moveTo(0, i);
ctx.lineTo(w, i);
ctx.stroke();
ctx.moveTo(0, h-i);
ctx.lineTo(w, h-i);
ctx.stroke();
}
for (i = w/2; i < w; i += 100)
{
ctx.moveTo(i, 0);
ctx.lineTo(i, h);
ctx.stroke();
ctx.moveTo(w-i, 0);
ctx.lineTo(w-i, h);
ctx.stroke(); }
// ctx.restore();
}
function draw() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.drawImage(imageObj, 0, 0);
lw = 4
context.lineWidth = lw;
context.strokeStyle = "#FF0000";
var x0 = parseInt(rect.startX) - parseInt(lw/2);
var y0 = parseInt(rect.startY) - parseInt(lw/2);
var dx = parseInt(rect.w) + parseInt(lw);
var dy = parseInt(rect.h) + parseInt(lw);
context.strokeRect(x0, y0, dx, dy);
}
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;
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) };
}
/* hash #description open the details part of the page */
function openDescription() {
if(window.location.hash) {
var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
if(hash == 'description') {
document.getElementById("desc_details").open = true;
}
}
}
function mouseDown(e) {
zw = getCoords(this)
rect.startX = e.pageX - zw.left;
rect.startY = e.pageY - zw.top;
document.getElementById("refx").value = rect.startX;
document.getElementById("refy").value = rect.startY;
drag = true;
function LoadReference(){
document.getElementById("img_ref").onload = function () {
document.getElementById("refdx").value = this.width;
document.getElementById("refdy").value = this.height;
refInfo[aktindex]["dx"] = this.width;
refInfo[aktindex]["dy"] = this.height;
rect.w = document.getElementById("refdx").value;
rect.h = document.getElementById("refdy").value;
draw();
}
function mouseUp() {
drag = false;
if (rect.w < 0) {
rect.w = -rect.w
rect.startX-=rect.w
_filenameurl = refInfo[aktindex]["name"];
var url = domainname + "/fileserver" + _filenameurl + "?" + Date.now();
document.getElementById("img_ref").src = url;
_filenameurl = _filenameurl.replace(".jpg", "_org.jpg");
var url = domainname + "/fileserver" + _filenameurl + "?" + Date.now();
document.getElementById("img_ref_org").src = url;
document.getElementById("name").value = refInfo[aktindex]["name"];
document.getElementById("refx").value = refInfo[aktindex]["x"];
document.getElementById("refy").value = refInfo[aktindex]["y"];
rect.startX = document.getElementById("refx").value;
rect.startY = document.getElementById("refy").value;
draw();
}
function init() {
openDescription();
domainname = getDomainname();
loadConfig(domainname);
ParseConfig();
param = getConfigParameters();
document.getElementById("savemarker").disabled = true;
document.getElementById("enhancecontrast").disabled = true;
canvas.addEventListener('mousedown', mouseDown, false);
canvas.addEventListener('mouseup', mouseUp, false);
canvas.addEventListener('mousemove', mouseMove, false);
loadCanvas(domainname + "/fileserver/config/reference.jpg");
//CopyReferenceToImgTmp(domainname);
refInfo = GetReferencesInfo();
//UpdateReference();
LoadReference();
drawImage();
}
function drawImage(){
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.clearRect(0,0,imageObj.width,imageObj.height);
context.save();
context.drawImage(imageObj, 0, 0);
// context.restore();
}
function CutOutReference(){
refInfo[aktindex]["x"] = document.getElementById("refx").value;
refInfo[aktindex]["y"] = document.getElementById("refy").value;
refInfo[aktindex]["dx"] = document.getElementById("refdx").value;
refInfo[aktindex]["dy"] = document.getElementById("refdy").value;
var enhanceCon = false;
document.getElementById("overlay").style.display = "block";
document.getElementById("overlaytext").innerHTML = "Updating marker...";
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function task() {
while (true) {
var ret = MakeRefImageZW(refInfo[aktindex], enhanceCon, domainname);
if (ret) {
UpdateReference();
document.getElementById("enhancecontrast").disabled = false;
document.getElementById("savemarker").disabled = false;
document.getElementById("overlay").style.display = "none";
if (aktindex == 0) {
neueref1 = 1;
}
else if (aktindex == 1) {
neueref2 = 1;
}
return;
}
if (rect.h < 0) {
rect.h = -rect.h
rect.startY-=rect.h
else {
// Get status
var xhttp = new XMLHttpRequest();
try {
xhttp.open("GET", domainname + "/statusflow", false);
xhttp.send();
}
catch (error){}
document.getElementById("overlaytext").innerHTML = "Device is busy, waiting until the Digitalization Round got completed (this can take several minutes)...<br><br>Current step: " + xhttp.responseText;
console.log("Device is busy, waiting 5s then checking again...");
await sleep(5000);
}
}
}
setTimeout(function() { // Delay so the overlay gets shown
task();
}, 1);
}
function drawGrid(){
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var w = canvas.width;
var h = canvas.height;
ctx.save();
ctx.strokeStyle = '#00FF00';
for (i = h/2; i < h; i += 100) {
ctx.moveTo(0, i);
ctx.lineTo(w, i);
ctx.stroke();
ctx.moveTo(0, h-i);
ctx.lineTo(w, h-i);
ctx.stroke();
}
for (i = w/2; i < w; i += 100) {
ctx.moveTo(i, 0);
ctx.lineTo(i, h);
ctx.stroke();
ctx.moveTo(w-i, 0);
ctx.lineTo(w-i, h);
ctx.stroke();
}
// ctx.restore();
}
function draw() {
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
context.drawImage(imageObj, 0, 0);
var lw = 4
context.lineWidth = lw;
context.strokeStyle = "#FF0000";
var x0 = parseInt(rect.startX) - parseInt(lw/2);
var y0 = parseInt(rect.startY) - parseInt(lw/2);
var dx = parseInt(rect.w) + parseInt(lw);
var dy = parseInt(rect.h) + parseInt(lw);
context.strokeRect(x0, y0, dx, dy);
}
function mouseDown(e) {
var zw = getCoords(this)
rect.startX = e.pageX - zw.left;
rect.startY = e.pageY - zw.top;
document.getElementById("refx").value = rect.startX;
document.getElementById("refy").value = rect.startY;
drag = true;
}
function mouseUp() {
drag = false;
if (rect.w < 0) {
rect.w = -rect.w
rect.startX-=rect.w
}
if (rect.h < 0) {
rect.h = -rect.h
rect.startY-=rect.h
}
document.getElementById("refdx").value = rect.w;
document.getElementById("refdy").value = rect.h;
document.getElementById("refx").value = rect.startX;
document.getElementById("refy").value = rect.startY;
}
function mouseMove(e) {
if (drag) {
var zw = getCoords(this)
rect.w = (e.pageX - zw.left) - rect.startX;
rect.h = (e.pageY - zw.top) - rect.startY ;
document.getElementById("refdx").value = rect.w;
document.getElementById("refdy").value = rect.h;
document.getElementById("refx").value = rect.startX;
document.getElementById("refy").value = rect.startY;
draw();
}
else {
draw();
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
function mouseMove(e) {
if (drag) {
zw = getCoords(this)
rect.w = (e.pageX - zw.left) - rect.startX;
rect.h = (e.pageY - zw.top) - rect.startY ;
document.getElementById("refdx").value = rect.w;
document.getElementById("refdy").value = rect.h;
draw();
}
else {
draw();
var canvas = document.getElementById('canvas');
var context = canvas.getContext('2d');
zw = getCoords(this);
x = e.pageX - zw.left;
y = e.pageY - zw.top;
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();
}
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 namechanged()
{
_name = document.getElementById("name").value;
refInfo[aktindex]["name"] = _name;
function namechanged() {
_name = document.getElementById("name").value;
refInfo[aktindex]["name"] = _name;
}
function valuemanualchanged(){
if (!drag) {
rect.w = document.getElementById("refdx").value;
rect.h = document.getElementById("refdy").value;
rect.startX = document.getElementById("refx").value;
rect.startY = document.getElementById("refy").value;
draw();
}
function valuemanualchanged(){
if (!drag) {
rect.w = document.getElementById("refdx").value;
rect.h = document.getElementById("refdy").value;
rect.startX = document.getElementById("refx").value;
rect.startY = document.getElementById("refy").value;
draw();
}
}
}
init();
init();
</script>
</body>
</html>