dyadmisha
/
AI-on-the-edge-device
spiegel van https://github.com/jomjol/AI-on-the-edge-device


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482
							<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Make Analog Alignment</title>

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

.move {
	padding: 4px 4px;
    width: 100px;
	font-size: 12px;
}

th, td {
  padding: 5px 5px 5px 0px;
}

#div2{
  background-color:#777;
  margin-bottom:20px;
}
.disabledDiv {
    pointer-events: none;
    opacity: 0.4;
}
</style>

</head>

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

    <h2><input type="checkbox" id="Category_Analog_enabled" value="1"  onclick = 'EnDisableAnalog()' checked >
        Edit Analog</h2>
   

<div id="div1">

	<table>
	  <tr>
		<td><canvas id="canvas" crossorigin></canvas></td>
	  </tr>
	</table>	
			 
	<table>
	  <tr>
		<td><input class="button" type="submit" id= "newROI" name="newROI" onclick="newROI()" value="New ROI (after current)"></td>	  
		<td><input class="button" type="submit" id= "deleteROI" name="deleteROI" onclick="deleteROI()" value="Delete ROI"></td>
		<td></td>
	  </tr>
	  <tr>
		<td>
			<select id="index" name="index" onchange="ChangeSelection()">
			  <option value="0" selected>ROI 0</option>
			  <option value="1" >ROI 1</option>
            </select>
		</td>
		<td>Name: <input type="text" name="name" id="name" onchange="onNameChange()" size="13"></td>
		<td>
		<input class="button" type="submit" id="moveNext" onclick="moveNext()" value="move Next">
		<input class="button" type="submit" id="movePrevious" onclick="movePrevious()" value="move Previous">  
		</td>	
	  </tr>
	  <tr>
        <td>x: <input type="number" name="refx" id="refx" step=1 onchange="valuemanualchanged()"></td>	  
		<td>dx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchangeddx()"></td>
		<td rowspan="2"><label for="lockAR"> Lock aspect ratio: </label><input type="checkbox" id="lockAR" name="lockAR" value="1" onclick="changelockAR()" checked></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>
	</table>			 
</div>	 

	<table>
	  <tr>
		<td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save all to Config.ini"></td>
	  </tr>  
    </table>	


<script type="text/javascript" src="./gethost.js"></script> 
<script type="text/javascript" src="./readconfigcommon.js"></script>  
<script type="text/javascript" src="./readconfig.js"></script>  
<script type="text/javascript" src="./jquery-3.5.1.min.js"></script>  

<script language="JavaScript">
        var canvas = document.getElementById('canvas'),
            ctx = canvas.getContext('2d'),
            imageObj = new Image(),
            rect = {},
            drag = false,
            aktindex = 0,
            ROIInfo,
            enhanceCon = false;
            lockAR = true;
            basepath = "http://192.168.178.26";


function EnDisableAnalog() {
        isEnabled = document.getElementById("Category_Analog_enabled").checked;

		$("#div2").attr("disabled", "disabled").off('click');
        var x1=$("#div2").hasClass("disabledDiv");
        
        if (isEnabled)
        {
            $("#div2").removeClass("disabledDiv");
        }
        else
        {
            $("#div2").addClass("disabledDiv");
        }
		
        sah1(document.getElementById("div1"), !isEnabled);
        if (isEnabled)
        {
            UpdateROIs();
        }
}

function sah1(el, _target) {
        try {
            el.disabled = _target;
        } catch (E) {}
        if (el.childNodes && el.childNodes.length > 0) {
            for (var x = 0; x < el.childNodes.length; x++) {
                sah1(el.childNodes[x], _target);
            }
        }
    }

function onNameChange(){
    ROIInfo[aktindex]["name"] = document.getElementById("name").value;
    UpdateROIs();
}

function deleteROI(){
    ROIInfo.splice(aktindex, 1);
    if (aktindex > ROIInfo.length - 1){
        aktindex = ROIInfo.length - 1;
    }
    UpdateROIs();
}

function newROI(){
    var zw = ROIInfo[ROIInfo.length-1];
    ROIInfo.push(zw);
    for (var i = ROIInfo.length-2; i > aktindex + 1; --i){
        ROIInfo[i] = ROIInfo[i-1];
    }
    aktindex++;
    ROIInfo[aktindex] = new Object;
    ROIInfo[aktindex]["pos_ref"] = -1;
    ROIInfo[aktindex]["name"] = "ROI" + aktindex;
    ROIInfo[aktindex]["x"] = 1;
    ROIInfo[aktindex]["y"] = 1;
    ROIInfo[aktindex]["dx"] = ROIInfo[aktindex-1]["dx"];
    ROIInfo[aktindex]["dy"] = ROIInfo[aktindex-1]["dy"];
    ROIInfo[aktindex]["ar"] = ROIInfo[aktindex-1]["ar"];
    UpdateROIs();
}

function movePrevious(){
    var zw = ROIInfo[aktindex];
    ROIInfo[aktindex] = ROIInfo[aktindex-1];
    ROIInfo[aktindex-1] = zw;
    aktindex--;
    UpdateROIs();      
}

function moveNext(){
    var zw = ROIInfo[aktindex];
    ROIInfo[aktindex] = ROIInfo[aktindex+1];
    ROIInfo[aktindex+1] = zw;
    aktindex++;
    UpdateROIs();    
}

function changelockAR(){
    lockAR = document.getElementById("lockAR").checked;
}

function ChangeSelection(){
    aktindex = parseInt(document.getElementById("index").value);
//    lockAR = true;
    UpdateROIs();
}

function SaveToConfig(){
    _enabled = document.getElementById("Category_Analog_enabled").checked;
    SaveROIToConfig(ROIInfo, "[Analog]", basepath, _enabled);
    UpdatePage();  
}


function UpdateROIs(){
    if (ROIInfo.length == 0){
        alert("There are no ROIs defined.\nPlease first define minimum one ROI in the config.ini by hand.\n");
        document.getElementById("newROI").disabled = true;
        document.getElementById("deleteROI").disabled = true;
        document.getElementById("index").disabled = true;
        document.getElementById("saveroi").disabled = true;
        document.getElementById("moveNext").disabled = true;
        document.getElementById("movePrevious").disabled = true;
        return;
    }

    var _index = document.getElementById("index");
    while (_index.length){
        _index.remove(0);
    }

    for (var i = 0; i < ROIInfo.length; ++i){
        var option = document.createElement("option");
        option.text = "ROI " + (i + 1);
        option.value = i;
        _index.add(option); 
    }
    _index.selectedIndex = aktindex; 


    document.getElementById("movePrevious").disabled = false;
    if (aktindex == 0){
        document.getElementById("movePrevious").disabled = true;
    }

    document.getElementById("moveNext").disabled = false;
    if (aktindex == (ROIInfo.length-1)){
        document.getElementById("moveNext").disabled = true;
    }  
    
    document.getElementById("lockAR").checked = lockAR;
       
    document.getElementById("name").value = ROIInfo[aktindex]["name"];
    document.getElementById("refx").value = ROIInfo[aktindex]["x"];
    document.getElementById("refy").value = ROIInfo[aktindex]["y"];  
    document.getElementById("refdx").value = ROIInfo[aktindex]["dx"];  
    document.getElementById("refdy").value = ROIInfo[aktindex]["dy"];  
    rect.startX = ROIInfo[aktindex]["x"];
    rect.startY = ROIInfo[aktindex]["y"];
    rect.w = ROIInfo[aktindex]["dx"];
    rect.h = ROIInfo[aktindex]["dy"];
    draw();      
}

function ParseIni(_basepath) {
    loadConfig(_basepath);
    ParseConfig();

    document.getElementById("Category_Analog_enabled").checked = true;
    ROIInfo = getROIInfo("[Analog]");

    if (!GetAnalogEnabled()) 
    {
        document.getElementById("Category_Analog_enabled").checked = false;
        EnDisableAnalog();
        alert("Analog ROIs are disabled - please enable (Check box top left).\n");
        return;
    }

    UpdateROIs();
}
			
    
        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();
                    draw();
                };
    
                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() {
            basepath = getbasepath();
            canvas.addEventListener('mousedown', mouseDown, false);
            canvas.addEventListener('mouseup', mouseUp, false);
            canvas.addEventListener('mousemove', mouseMove, false);
            loadCanvas(basepath + "/fileserver/config/reference.jpg");
            ParseIni(basepath);
            drawImage();
            draw();
        }
        
        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 draw() {
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        context.drawImage(imageObj, 0, 0);
        if (document.getElementById("Category_Analog_enabled").checked)
        {
            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);    
            ROIInfo[aktindex]["x"] = rect.startX;       
            ROIInfo[aktindex]["y"] = rect.startY;       
            ROIInfo[aktindex]["dx"] = rect.w;       
            ROIInfo[aktindex]["dy"] = rect.h;       
        }
    }

    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)        


            if (lockAR) {
                rect.h = (e.pageY - zw.top) - rect.startY;
                rect.w = Math.round(rect.h * ROIInfo[aktindex]["ar"]);            }
            else {
                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 valuemanualchanged(){
        if (!drag) {
            rect.w = document.getElementById("refdx").value;
            rect.h = document.getElementById("refdy").value;
            if (lockAR) {
                rect.w = Math.round(rect.h * ROIInfo[aktindex]["ar"]);
                document.getElementById("refdx").value = rect.w;
            }

            rect.startX = document.getElementById("refx").value;
            rect.startY = document.getElementById("refy").value; 
            draw();            
        }
    }

    function valuemanualchangeddx(){
        if (!drag) {
            rect.w = document.getElementById("refdx").value;
            rect.h = document.getElementById("refdy").value;
            if (lockAR) {
                rect.h = Math.round(rect.w / ROIInfo[aktindex]["ar"]);
                document.getElementById("refdy").value = rect.h;
            }

            rect.startX = document.getElementById("refx").value;
            rect.startY = document.getElementById("refy").value; 
            draw();            
        }
    }

    
    init();
</script>
</body>
</html>