dyadmisha
/
AI-on-the-edge-device
espejo de https://github.com/jomjol/AI-on-the-edge-device


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516
							<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.ico?v=$COMMIT_HASH" type="image/x-icon">
<title>Reference Image</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; 
}

.button {
	padding: 5px 10px;
    width: 210px;
	font-size: 16px;
}

table {
	padding: 5px;
}
</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>Reference Image</h2>
    <p>On this page you define the Reference Image.
        See <a href=https://jomjol.github.io/AI-on-the-edge-device-docs/Reference-Image/ target=_blank>https://jomjol.github.io/AI-on-the-edge-device-docs/Reference-Image/</a> for explanations.</p>
    <p>After saving a new Reference Image, make sure to update the <a href=edit_alignment.html>Alignment Marks</a> and then
        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><input class="button" type="button" value="Show Actual Reference" onclick="showReference(param)"></td>	  
		<td><input class="button" type="button" value="Create New Reference" onclick="loadRawImage()"></td>
		<td><input class="button" type="submit" id="take" onclick="doTake()" value="Take Image"></td>
	  </tr> 
	  <tr>
		<td style="padding-top: 10px"><label for="mirror" id="labelmirror">Mirror Image:</label></td>
        <td style="padding-top: 10px"><input type="checkbox" id="mirror" name="mirror" value="1" onchange="drawRotated()"></td>
        <td>
            <class id="TakeImage_LEDIntensity_text" style="color:black;">LEDIntensity: </class>
            <input type="number" id="TakeImage_LEDIntensity_value1" size="13" value=0  min="0" max="100" style="float: right; clear: both;">
        </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>
            <class id="TakeImage_Brightness_text" style="color:black;">Brightness: </class>
            <input type="number" id="TakeImage_Brightness_value1" size="13" value=0  min="-2" max="2" style="float: right; clear: both;">
        </td>
        
	  </tr>
	  <tr>
        <td><label for="mirror">Pre-rotate Angle:</label></td>	  
		<td><input type="number" id="prerotateangle" name="prerotateangle" value="0" min="-360" max="360" onchange="drawRotated()">Degrees</td>
        <td>
            <class id="TakeImage_Contrast_text" style="color:black;">Contrast</class>
            <input type="number" id="TakeImage_Contrast_value1" size="13" value=0  min="-2" max="2" style="float: right; clear: both;">
        </td>
	  </tr>
	  <tr>
		<td><label for="mirror">Fine Alignment:</label></td>	
		<td><input type="number" id="finerotate" name="finerotate" value=0.0 min="-1" max="1" step="0.2" onchange="drawRotated()">Degrees</td>
        <td>
            <class id="TakeImage_Saturation_text" style="color:black;">Saturation</class>
            <input type="number" id="TakeImage_Saturation_value1" size="13" value=0   min="-2" max="2" style="float: right; clear: both;">
        </td>

    </tr>
	</table>

	<table>
		<tr>			
			<td><canvas id="canvas"></canvas></td>
		</tr>			
		<tr>		
			<td><input class="button" type="button" id="updatereferenceimage" value="Save" onclick="SaveReference()">
                <p>Proceed to update the <a href=edit_alignment.html>Alignment Marks</a> 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()
            domainname = getDomainname();   
            isActReference = false;
            param;
            
        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);
            }
        }

        function doTake(){ 
            var xhttp = new XMLHttpRequest();
            if (param["TakeImage"]["Brightness"].found && param["TakeImage"]["Brightness"].enabled)
            {
                _intensity = document.getElementById("TakeImage_LEDIntensity_value1").value;
                if (_intensity == "") _intensity = "50";
                _brightness = document.getElementById("TakeImage_Brightness_value1").value;
                _contrast = document.getElementById("TakeImage_Contrast_value1").value;
                _saturation = document.getElementById("TakeImage_Saturation_value1").value;
                url = getDomainname() + "/editflow?task=test_take&bri=" + _brightness;
                url = url + "&con=" + _contrast + "&sat=" + _saturation + "&int=" + _intensity;
            }
            else
            {
                url = domainname + "/editflow?task=test_take";
            }
            if (domainname.length > 0){
                url = url + "&host=" + domainname;
            }

            xhttp.open("GET", url, false);
            xhttp.send();


            loadRawImage();
        }
            
        function loadRawImage(){
            url = getDomainname() + "/img_tmp/raw.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1);
            document.getElementById("finerotate").disabled = false;
            document.getElementById("prerotateangle").disabled = false;  
            document.getElementById("updatereferenceimage").disabled = false;
            document.getElementById("take").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;";
            }

            if (param["TakeImage"]["Brightness"].found && param["TakeImage"]["Brightness"].enabled)
            {
                document.getElementById("TakeImage_Brightness_value1").disabled = false;
                document.getElementById("TakeImage_Contrast_value1").disabled = false;
                document.getElementById("TakeImage_Saturation_value1").disabled = false;
                document.getElementById("TakeImage_LEDIntensity_value1").disabled = false;
            }
            else
            {
                document.getElementById("TakeImage_Brightness_value1").type = "hidden";
                document.getElementById("TakeImage_Brightness_text").style.visibility = "hidden";
                
            }

//            if (param["TakeImage"]["Saturation"].found)
//                document.getElementById("TakeImage_Saturation_value1").disabled = false;
//            if (param["TakeImage"]["Contrast"].found)
//                document.getElementById("TakeImage_Contrast_value1").disabled = false;

            isActReference = false;
            loadCanvas(url);  
            drawRotated();          
        }    

        function showReference(_param){
            url = getDomainname() + "/fileserver/config/reference.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1);;
            document.getElementById("finerotate").value = 0;
            document.getElementById("prerotateangle").value = _param["Alignment"]["InitialRotate"].value1;

            if (_param["Alignment"]["InitialMirror"].found && (_param["Alignment"]["InitialMirror"].value1 == "true"))
                document.getElementById("mirror").checked = true;

            if (_param["Alignment"]["FlipImageSize"].found && (_param["Alignment"]["FlipImageSize"].value1 == "true"))
                document.getElementById("flip").checked = true;

            document.getElementById("finerotate").disabled = true;
            document.getElementById("prerotateangle").disabled = true; 
            document.getElementById("updatereferenceimage").disabled = true;
            document.getElementById("take").disabled = true;
            document.getElementById("TakeImage_Brightness_value1").disabled = true;
            document.getElementById("TakeImage_Saturation_value1").disabled = true;
            document.getElementById("TakeImage_Contrast_value1").disabled = true;
            document.getElementById("TakeImage_LEDIntensity_value1").disabled = true;
            document.getElementById("mirror").disabled = false;
            document.getElementById("flip").disabled = false;
            if (!(param["TakeImage"]["Brightness"].found))
            {
                document.getElementById("TakeImage_Brightness_value1").type = "hidden";
                document.getElementById("TakeImage_Brightness_text").style.visibility = "hidden";
            }


            document.getElementById("mirror").disabled = true;
            document.getElementById("flip").disabled = true;

            isActReference = true;                                  
            loadCanvas(url);
            drawRotated(false, true);
        }
            
        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 SaveReference(){
            if (confirm("Are you sure you want to update the reference image?")) {
                param["Alignment"]["InitialRotate"].value1 = document.getElementById("prerotateangle").value;

                if ((param["Alignment"]["InitialMirror"].found == true) && (document.getElementById("mirror").checked))
                {
                    param["Alignment"]["InitialMirror"].value1 = "true";
                    param["Alignment"]["InitialMirror"]["found"] = true;
                    param["Alignment"]["InitialMirror"]["enabled"] = true;
                }
                else
                    param["Alignment"]["InitialMirror"].value1 = "false";

                if ((param["Alignment"]["FlipImageSize"].found == true) && (document.getElementById("flip").checked))
                    param["Alignment"]["FlipImageSize"].value1 = "true";
                else
                    param["Alignment"]["FlipImageSize"].value1 = "false";

                if (param["TakeImage"]["Brightness"].found && param["TakeImage"]["Brightness"].enabled)
                {
                    ReadParameter(param, "TakeImage", "Brightness", false);		
                	ReadParameter(param, "TakeImage", "Contrast", false);
                    ReadParameter(param, "TakeImage", "Saturation", false);
                    ReadParameter(param, "TakeImage", "LEDIntensity", false);
                }

                var canvas = document.getElementById("canvas");
                drawRotated(false);

                WriteConfigININew();
                SaveConfigToServer(getDomainname());    

                SaveCanvasToImage(canvas, "/config/reference.jpg", true, getDomainname());
                showReference(param);
                UpdatePage();
                firework.launch('Reference got updated. It will get applied after the next reboot!', 'success', 5000);
            }
        }

        function loadCanvas(dataURL) {
                var canvas = document.getElementById('canvas');
                var context = canvas.getContext('2d');

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

                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() {
            canvas.addEventListener('mousemove', mouseMove, false);    
            loadConfig(getDomainname()); 
            ParseConfig();
            param = getConfigParameters();

            param["TakeImage"]["LEDIntensity"]["enabled"] = true;
            param["TakeImage"]["Brightness"]["enabled"] = true;
            param["TakeImage"]["Contrast"]["enabled"] = true;
            param["TakeImage"]["Saturation"]["enabled"] = true;

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

            UpdateInput();
            showReference(param); 
        }

        function UpdateInput() {
            WriteParameter(param, category, "TakeImage", "Brightness", false);		
            WriteParameter(param, category, "TakeImage", "Contrast", false);		
            WriteParameter(param, category, "TakeImage", "Saturation", false);		
            WriteParameter(param, category, "TakeImage", "LEDIntensity", false);		
        }


        function ReadParameter(_param, _cat, _name, _optional, _select = false){
            if (_param[_cat][_name]["found"]){
                if (_optional) {
                    _param[_cat][_name]["enabled"] = document.getElementById(_cat+"_"+_name+"_enabled").checked;			
                }
                if (_select) {
                    var sel = document.getElementById(_cat+"_"+_name+"_value1");
                    _param[_cat][_name]["value1"] = sel.options[sel.selectedIndex].text;
                }
                else {
                    for (var j = 1; j <= _param[_cat][_name]["anzParam"]; ++j) {
                        _param[_cat][_name]["value"+j] = document.getElementById(_cat+"_"+_name+"_value"+j).value;
                    }
                }
            }
        }
        

        function WriteParameter(_param, _category, _cat, _name, _optional, _select = false, _anzpara = 1){
            if (_param[_cat][_name]["found"]){
                if (_optional) {
                    document.getElementById(_cat+"_"+_name+"_enabled").checked = _param[_cat][_name]["enabled"];
                    for (var j = 1; j <= _anzpara; ++j) {
                        document.getElementById(_cat+"_"+_name+"_value"+j).disabled = !_param[_cat][_name]["enabled"];	
                    }		
                }
                document.getElementById(_cat+"_"+_name+"_text").style="color:black;"
                if (_select) {
                    var textToFind = _param[_cat][_name]["value1"];
                    var dd = document.getElementById(_cat+"_"+_name+"_value1");
                    for (var i = 0; i < dd.options.length; i++) {
                        if (dd.options[i].text.toLowerCase() === textToFind.toLowerCase()) {
                            dd.selectedIndex = i;
                            break;
                        }
                    }
                }
                else {
                    for (var j = 1; j <= _anzpara; ++j) {
                        document.getElementById(_cat+"_"+_name+"_value"+j).value = _param[_cat][_name]["value"+j];
                    }
                }

            }
            else {
                if (_optional) {
                    document.getElementById(_cat+"_"+_name+"_enabled").disabled = true;	
                    for (var j = 1; j <= _anzpara; ++j) {
                        document.getElementById(_cat+"_"+_name+"_value"+j).disabled = true;	
                    }	
                }
                document.getElementById(_cat+"_"+_name+"_text").style="color:lightgrey;"		
            }
        }


        function drawRotated(_grid = true, _isreference = false){
            finerot= parseFloat(document.getElementById("finerotate").value);
            prerot = parseFloat(document.getElementById("prerotateangle").value);
            mirror = document.getElementById("mirror").checked;
            flip = document.getElementById("flip").checked;

            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;

            var canvas = document.getElementById('canvas');
            if (flip == 1)
            {
                canvas.width = imageObj.height;
                canvas.height = imageObj.width;
            }
            else
            {
                canvas.width = imageObj.width;
                canvas.height = imageObj.height;
            }

            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');

            context.clearRect(0,0,canvas.width,canvas.height);
            context.save();

            if (isActReference)
            {
                context.drawImage(imageObj,0,0);
            }
            else
            {
                context.translate(canvas.width/2,canvas.height/2);
                context.rotate(degrees*Math.PI/180);
                if (mirror) {
                    context.scale(-1, 1);
                }
                context.drawImage(imageObj,-imageObj.width/2,-imageObj.height/2);
            }
            
            
            context.restore();
            if (_grid == true && !isActReference){
                drawGrid();
            }

        }

        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 mouseMove(e) {
            drawRotated();
            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();            
        }


        init();
    </script>

</body>
</html>