AI-on-the-edge-device/sd-card/html/edit_alignment.html

<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.ico?v=$COMMIT_HASH" type="image/x-icon">
<title>Alignment Marks</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: 100px;
	margin-right: 10px;
	padding: 3px 5px;
	display: inline-block;
	border: 1px solid #ccc;
	font-size: 16px;
}

input[type=text] {
	padding: 3px 5px;
	display: inline-block;
	border: 1px solid #ccc;
	font-size: 16px;
}

select {
	padding: 3px 5px;
	display: inline-block;
	border: 1px solid #ccc;
	font-size: 16px;
	margin-right: 10px;
}

.button {
	padding: 5px 10px;
    width: 210px;
	font-size: 16px;
}
</style>
<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>
</head>

<body style="font-family: arial; padding: 0px 10px;">

	<h2>Alignment Marks</h2>
    <p>On this page you define two Reference Marks.
        See <a href=https://jomjol.github.io/AI-on-the-edge-device-docs/Alignment/ target=_blank>https://jomjol.github.io/AI-on-the-edge-device-docs/Alignment/</a> for explanations.</p>
    <p>After saving the Reference Marks, you can define the <a href=edit_digits.html>digit</a> resp. <a href=edit_analog.html>analog</a> ROI's.<br>
    Only after those steps a reboot is required.</p>

	<table>
	  <tr>
		<td><canvas id="canvas" crossorigin></canvas></td>
	  </tr>
	</table>

	<table>
	  <tr>
		<td>Select Reference:
			<select id="index" name="reference" onchange="ChangeSelection()">
			  <option value="0" selected>Reference 0</option>
			  <option value="1" >Reference 1</option>
			</select>
		</td>
		<td colspan="2">Storage Path/Name: <input type="text" name="name" id="name" onchange="namechanged()"></td>
	  </tr>
	  <tr>
		<td style="padding-top: 10px">x: <input type="number" name="refx" id="refx" step=1 onchange="valuemanualchanged()"></td>
		<td style="padding-top: 10px">dx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchanged()"></td>
		<td rowspan="2" style="padding-top: 10px"><input class="button" type="button" value="Update Reference Image" onclick="CutOutReference()"></td>
	  </tr>
	  <tr>
		<td>y: <input type="number" name="refy" id="refy" step=1 onchange="valuemanualchanged()"></td>
		<td>dy: <input type="number" name="refdy" id="refdy" step=1 onchange="valuemanualchanged()"></td>
	  </tr>
	  <tr>
		<td style="padding-top: 10px">Original Image:</td>
		<td style="padding-top: 10px">Reference Image:</td>
		<td rowspan="2"><input class="button" type="button" id="enhancecontrast" value="Enhance Contrast" onclick="EnhanceContrast()"></td>
	  </tr>
	  <tr>
		<td><img id="img_ref_org" src = "/img_tmp/ref_zw_org.jpg"></td>
		<td><img id="img_ref" src = "/img_tmp/ref_zw.jpg"></td>
	  </tr>
	</table>

	<table>
	  <tr>
		<td><input class="button" type="submit" name="saveroi" onclick="SaveToConfig()" value="Save">
            <p>Proceed to update the <a href=edit_digits.html>digit</a> resp. <a href=edit_analog.html>analog</a> ROI's when you are done.</p></td>
	  </tr>
	</table>

<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>

<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;

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);
    }
}

function ChangeSelection(){
    aktindex = parseInt(document.getElementById("index").value);
    UpdateReference();
}

function SaveToConfig(){
    WriteConfigININew();
    UpdateConfigReference(domainname)
    SaveConfigToServer(domainname);
    firework.launch('Reference Marks got updated. The change will get applied after the next reboot!', 'success', 5000);
}

function EnhanceContrast(){
    refInfo[aktindex]["name"] = document.getElementById("name").value;
    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;

    enhanceCon = true;
    if (MakeContrastImageZW(refInfo[aktindex], enhanceCon, domainname)) {
        UpdateReference();
    }
}

function UpdateReference(){
    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();
    }

    _filenameurl = refInfo[aktindex]["name"].replace("/config/", "/img_tmp/");

    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;
    document.getElementById("enhancecontrast").disabled = true;
    draw();
}

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, 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');

                imageObj.onload = function() {
                    canvas.width = this.width;
                    canvas.height = this.height;
                    drawImage();
                };

                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 init() {
            domainname = getDomainname();
            loadConfig(domainname);
            ParseConfig();
            param = getConfigParameters();

            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;
            if (MakeRefZW(refInfo[aktindex], domainname)) {
                UpdateReference();
                document.getElementById("enhancecontrast").disabled = false;
            }
        }

        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;
    return { top: Math.round(top), left: Math.round(left) };
}

    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 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) {
            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;

            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 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();
    </script>
</body>
</html>