dyadmisha
/
AI-on-the-edge-device
зеркало из https://github.com/jomjol/AI-on-the-edge-device


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846
							<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.ico?v=$COMMIT_HASH" type="image/x-icon">
<meta charset="utf-8"/>
<title>Digit ROI's</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;
}
</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>Digit ROI's</h2>
        <p>On this page you define ROI's for the digits.
            See <a href=https://jomjol.github.io/AI-on-the-edge-device-docs/ROI-Configuration/ target=_blank>https://jomjol.github.io/AI-on-the-edge-device-docs/ROI-Configuration/</a> for explanations.</p>
        
        <p><input type="checkbox" id="Category_Digits_enabled" value="1"  onclick = 'EnDisableDigits()' checked><label for="Category_Digits_enabled">Enable Digit ROI's</label></p>

        <p>After saving the digit ROI's, you can define the <a href=edit_analog.html>analog</a> ROI's if your meter has analog counters.<br>
            Only after those steps a reboot is required.</p>
    

<div id="div1">

	<table>
	  <tr>
		<canvas id="canvas" crossorigin></canvas>
	  </tr>
	</table>
    
    <p>
        <table>
            <tr>
                <class id="Numbers_text" style="color:black;"><b>Number:</b> </class>
                <select id="Numbers_value1" onchange="numberChanged()">
                </select>
                <input class="move" type="submit" id="renameNumber" name="renameNumber" onclick="renameNumber()" value="Rename">  
                <input class="move" type="submit" id="newNumber" name="newNumber" onclick="newNumber()" value="New">  
                <input class="move" type="submit" id="removeNumber" name="removeNumber" onclick="removeNumber()" value="Remove">
            </tr>
        </table>
    </p>
    
	<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()" tabindex=1>
			</select>
		</td>
		<td>                
            <input class="button" type="submit" id="renameROI" name="renameROI" onclick="renameROI()" value="Rename">  
		<td>
		<input class="move" type="submit" id="moveNext" onclick="moveNext()" value="move Next">
		<input class="move" 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()" tabindex=2></td>	  
		<td>Δx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchangeddx()" tabindex=4></td>
		<td><input type="checkbox" id="lockAspectRatio" name="lockAspectRatio" value="1" onclick="changelockAspectRatio()" checked tabindex=6><label for="lockAspectRatio"> Lock aspect ratio </label></td>
	  </tr>
	  <tr>
		<td>y: <input type="number" name="refy" id="refy" step=1 onchange="valuemanualchanged()" tabindex=3></td>	
		<td>Δy: <input type="number" name="refdy" id="refdy" step=1 onchange="valuemanualchanged()" tabindex=5></td>
        <td><input type="checkbox" id="lockSizes" name="lockSizes" value="1" onclick="changelockSizes()" checked tabindex=7><label for="lockSizes"> Synchronize y, Δx and Δy between ROIs</label></td>
    </tr>
    <tr>
      <td colspan="2"></td>
      <td ><input type="checkbox" id="lockSpaceEquidistant" name="lockSpaceEquidistant" value="1" onclick="changeLockSpaceEquidistant()" checked tabindex=9>
        <label for="lockSpaceEquidistant">Keep equidistance of <input type="number" name="space" id="space" step=1 onchange="valuemanualchangedspace()" tabindex=8> between all ROIs</label></td>
    </tr>
    </table>	
    
</div>
			 
	<table>
	  <tr>
		<td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save" tabindex=10>
            <p>Proceed to update the <a href=edit_analog.html>analog</a> ROI's when you are done or <a href=reboot_page.html>reboot</a> if there are no analogue counters.</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 type="text/javascript" src="jquery-3.6.0.min.js?v=$COMMIT_HASH"></script>  

<script language="JavaScript">
        var canvas = document.getElementById('canvas'),
            imageObj = new Image(),
            rect = {},
            drag = false,
            aktindex = 0,
            ROIInfo,
            cofcat,
            param,
            enhanceCon = false;
            lockAspectRatio = true;
            lockSizes = false;
            lockSpaceEquidistant = true;
            space = 3;
            domainname = getDomainname();

    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 EnDisableDigits() {
        isEnabled = document.getElementById("Category_Digits_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);

        cofcat["Digits"]["enabled"] = 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();
    draw();
}

function newROI() {
    var sel = document.getElementById("Numbers_value1");
    var _number= sel.options[sel.selectedIndex].text;
    sel = document.getElementById("index");
    var _roialt= sel.options[sel.selectedIndex].text;

    var _roinew = prompt("Please enter name of new ROI", "name");

    if (ROIInfo.length > 0) {
        if (ROIInfo.length > 1) {
            space = ROIInfo[1].x - parseInt(ROIInfo[0].x) - parseInt(ROIInfo[0].dx);
        }
        erg = CreateROI(_number, "digit", sel.selectedIndex, _roinew, parseInt(ROIInfo[sel.selectedIndex].x) + parseInt(ROIInfo[sel.selectedIndex].dx) + space,
                parseInt(ROIInfo[sel.selectedIndex].y), ROIInfo[aktindex]["dx"], ROIInfo[aktindex]["dy"], 0);
    }
    else
        erg = CreateROI(_number, "digit", sel.selectedIndex, _roinew, 1, 1, 30, 51, 0);

    if (erg != "")
        firework.launch(erg, 'danger', 30000);
    else {
        UpdateROIs(_roinew);
        // Shift all ROIs on right side to the right
        for (var _nb = sel.selectedIndex + 1; _nb < ROIInfo.length; _nb++) {
            ROIInfo[_nb].x = parseInt(ROIInfo[_nb].x) + parseInt(ROIInfo[_nb].dx) + space;
        }
        draw();
    }
}

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

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

function changelockAspectRatio(){
    lockAspectRatio = document.getElementById("lockAspectRatio").checked;
}

function changelockSizes(){
    lockSizes = document.getElementById("lockSizes").checked;
    UpdateROIs(); 
    valuemanualchangedspace();

    if (!lockSizes) {
        firework.launch("For best results it is in most cases advised to keep the y, Δx and Δy identical!", 'warning', 10000);
    }
}

function changeLockSpaceEquidistant(){
    lockSpaceEquidistant = document.getElementById("lockSpaceEquidistant").checked;
    if (!lockSpaceEquidistant) {
        document.getElementById("space").disabled = true;
    }
    else {
        document.getElementById("space").disabled = false;
    }
    UpdateROIs(); 
}

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

function SaveToConfig(){
//    _zwcat = getConfigCategory();
    cofcat["Digits"]["enabled"] = document.getElementById("Category_Digits_enabled").checked;
    WriteConfigININew();
    SaveConfigToServer(domainname); 
    firework.launch('Configuration got updated. It will get applied after the next reboot!', 'success', 5000);
}


function UpdateROIs(_sel){
    document.getElementById("Category_Digits_enabled").checked = true;
    var sel = document.getElementById("Numbers_value1");
    var _number = sel.options[sel.selectedIndex].text;

    ROIInfo = getROIInfo("digit", _number);
//    _catzw = getConfigCategory();

    if (cofcat["Digits"]["enabled"] == false) 
    {
        document.getElementById("Category_Digits_enabled").checked = false;
        EnDisableDigits();
        firework.launch('Digital ROIs are disabled - please enable first (Check box top left)', 'warning', 10000);
        return;
    }

    if (ROIInfo.length == 0){
        firework.launch('There are no ROIs defined. Please first create a new ROI ("New ROIs ...")', 'danger', 10000);
        document.getElementById("newROI").disabled = false;
        document.getElementById("deleteROI").disabled = true;
        document.getElementById("index").disabled = true;
        document.getElementById("saveroi").disabled = true;
        document.getElementById("renameROI").disabled = true;
        document.getElementById("moveNext").disabled = true;
        document.getElementById("movePrevious").disabled = true;
        return;
    }
    else
    {
        document.getElementById("newROI").disabled = false;
        document.getElementById("deleteROI").disabled = false;
        document.getElementById("renameROI").disabled = false;
        document.getElementById("index").disabled = false;
        document.getElementById("saveroi").disabled = false;
    }

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

    if (aktindex > ROIInfo.length)
        aktindex = ROIInfo.length;

    for (var i = 0; i < ROIInfo.length; ++i){
        var option = document.createElement("option");
        option.text = ROIInfo[i]["name"];
        option.value = i;
        _index.add(option);
        if (typeof _sel !== 'undefined') {
            if (option.text == _sel)
                aktindex = i;
        }
    }
    _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("lockAspectRatio").checked = lockAspectRatio;
    document.getElementById("lockSizes").checked = lockSizes;
    document.getElementById("lockSpaceEquidistant").checked = lockSpaceEquidistant;
    document.getElementById("space").value = space;
    if (!lockSpaceEquidistant) {
        document.getElementById("space").disabled = true;
    }
    else {
        document.getElementById("space").disabled = false;
    }
       
    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 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() {
            domainname = getDomainname();
            canvas.addEventListener('mousedown', mouseDown, false);
            canvas.addEventListener('mouseup', mouseUp, false);
            canvas.addEventListener('mousemove', mouseMove, false);
            loadCanvas(domainname + "/fileserver/config/reference.jpg");
            loadConfig(domainname); 
            ParseConfig();
            param = getConfigParameters(); 
            cofcat = getConfigCategory();
            UpdateNUMBERS();


            /* Check if the ROIs are equidistant. Only if not, untick the checkbox */
            if (ROIInfo.length > 1) {
				var distanceROI0_to_ROI1 = parseInt(ROIInfo[1].x) - (parseInt(ROIInfo[0].x) + parseInt(ROIInfo[0].dx)); // Distance between 1st and 2nd ROI
				//console.log("0->1: " + distanceROI0_to_ROI1);
				for (var i = 1; i < (ROIInfo.length - 1); ++i) { // 2nd .. 2nd-last ROI
					//console.log(i + "->" + i+1 + ": " + (parseInt(ROIInfo[i+1].x) - (parseInt(ROIInfo[i].x) + parseInt(ROIInfo[i].dx))));
					if (distanceROI0_to_ROI1 != (parseInt(ROIInfo[i+1].x) - (parseInt(ROIInfo[i].x) + parseInt(ROIInfo[i].dx)))) {
						console.log("Not equidistant, unticking the checkbox!");
						lockSpaceEquidistant = false;
    					document.getElementById("lockSpaceEquidistant").checked = lockSpaceEquidistant;
                        if (!lockSpaceEquidistant) {
                            document.getElementById("space").disabled = true;
                        }
                        else {
                            document.getElementById("space").disabled = false;
                        }
						break;
					}
				}
			}
			/* Check if the ROIs have same y, dy and dx. If so, tick the sync checkbox */
           var all_y_dx_dy_Identical = true;
            if (ROIInfo.length > 1) {
                for (var i = 1; i < (ROIInfo.length); ++i) { // 2nd .. last ROI
                    if (parseInt(ROIInfo[i].y) != parseInt(ROIInfo[0].y) ||
                        parseInt(ROIInfo[i].dx) != parseInt(ROIInfo[0].dx) ||
                        parseInt(ROIInfo[i].dy) != parseInt(ROIInfo[0].dy)) { 
                        all_y_dx_dy_Identical = false;
						break;
                    }
                }
			}

            if (all_y_dx_dy_Identical) {
                lockSizes = true;
                console.log("All ROI have the same Y, dX and dY, ticking the sync checkbox!");
                document.getElementById("lockSizes").checked = lockSizes;
            }
            else {
                console.log("Not all ROI have the same Y, dX and dY, unticking the sync checkbox!");
            }

            if (ROIInfo.length > 1) {
                space = ROIInfo[1].x - parseInt(ROIInfo[0].x) - parseInt(ROIInfo[0].dx);
                document.getElementById("space").value = space;
            }

            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 UpdateNUMBERS(_sel){
    zw = getNUMBERInfo();

    index = 0;

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

    for (var i = 0; i < zw.length; ++i){
        var option = document.createElement("option");
        option.text = zw[i]["name"];
        option.value = i;
        _index.add(option); 

        if (typeof _sel !== 'undefined') {
            if (zw[i]["name"] == _sel)
                index = i
        }
    }
    _index.selectedIndex = index;

    UpdateROIs();
}

function renameNumber(){
    var sel = document.getElementById("Numbers_value1");
    var _delte= sel.options[sel.selectedIndex].text;
    var _numbernew = prompt("Please enter new name", _delte);

    erg = RenameNUMBER(_delte, _numbernew);
    if (erg != "")
        firework.launch(erg, 'danger', 30000);
    else
        UpdateNUMBERS(_numbernew);
}

function newNumber(){
    var _numbernew = prompt("Please enter name of new number", "name");

    erg = CreateNUMBER(_numbernew);
    if (erg != "")
            firework.launch(erg, 'danger', 30000);
    else
        UpdateNUMBERS(_numbernew);
}


function removeNumber(){
	if (confirm("This will remove the number complete (analog and digital).\nIf you only want to remove the digital ROIs, please use \"Delete ROIs\".\nDo you want to proceed?")) {
        var sel = document.getElementById("Numbers_value1");
        var _delte= sel.options[sel.selectedIndex].text;
        erg = DeleteNUMBER(_delte);
        if (erg != "")
            firework.launch(erg, 'danger', 30000);
        UpdateNUMBERS();
	}	    
}


function drawTextBG(context, txt, x, y, padding) {
    context.font = "15px Arial";
    context.textAlign = "center";

    context.fillStyle = 'rgba(255, 0, 0, 0.5)';
    var width = context.measureText(txt).width;
    context.fillRect(x-(width+padding)/2, y-12, width + padding*2, parseInt(context.font, 10) + padding);

    context.fillStyle = "black";
    context.fillText(txt, x + padding / 2, y + padding / 2);
}


function draw() {
    if (typeof ROIInfo === 'undefined') { // During init, ROIInfo is not defined yet
        return;
    }

        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');
        context.drawImage(imageObj, 0, 0);

        if (ROIInfo.length == 0) {
            return;
        }

        if (document.getElementById("Category_Digits_enabled").checked)
        {
            var sel = document.getElementById("index");
            var _number = sel.selectedIndex;

            if (lockSizes) {
                // Synchronize Y, dx and dy
                for (var _nb = 0; _nb < ROIInfo.length; _nb++)
                {
                    if (_nb != _number)
                    {
                        ROIInfo[_nb].y = rect.startY;
                        ROIInfo[_nb].dy = rect.h;
                        ROIInfo[_nb].dx = rect.w;
                    }
                }
            }

            for (var _nb = 0; _nb < ROIInfo.length; _nb++)
            {
                if (_nb != _number)
                {
                    lw = 2;
                    context.lineWidth = lw;
                    context.strokeStyle = "#990000";
                    var x0 = parseInt(ROIInfo[_nb].x) - parseInt(lw/2);
                    var y0 = parseInt(ROIInfo[_nb].y) - parseInt(lw/2);
                    var dx = parseInt(ROIInfo[_nb].dx) + parseInt(lw);
                    var dy = parseInt(ROIInfo[_nb].dy) + parseInt(lw);
                    context.strokeRect(x0, y0, dx, dy);
                    drawTextBG(context, ROIInfo[_nb]["name"], x0+dx/2, y0-12, 5);

                    lw = 1
                    var x0 = parseInt(ROIInfo[_nb].x) - parseInt(lw/2);
                    var y0 = parseInt(ROIInfo[_nb].y) - parseInt(lw/2);
                    var dx = parseInt(ROIInfo[_nb].dx) + parseInt(lw);
                    var dy = parseInt(ROIInfo[_nb].dy) + parseInt(lw);
                    context.lineWidth = lw;
                    context.beginPath();
                    context.moveTo(x0, y0+dy/2);
                    context.lineTo(x0+dx, y0+dy/2);
                    context.stroke();   
                    context.strokeRect(x0+dx*0.2, y0+dy*0.2, dx*0.6, dy*0.6);
                }
            }

            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);
            drawTextBG(context, ROIInfo[aktindex]["name"], x0+dx/2, y0-11, 5);
            context.lineWidth = 1;
            context.strokeRect(x0+dx*0.2, y0+dy*0.2, dx*0.6, dy*0.6);


            context.lineWidth = 2;
            context.beginPath();
            context.moveTo(x0, y0+dy/2);
            context.lineTo(x0+dx, y0+dy/2);
            context.stroke();   

            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 (ROIInfo.length == 0) {
                return;
            }

            if (lockAspectRatio) {
                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 (ROIInfo.length == 0) {
            return;
        }

        if (!drag) {
            rect.w = document.getElementById("refdx").value;
            rect.h = document.getElementById("refdy").value;

            if (lockAspectRatio) {
                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();   
            if (lockSpaceEquidistant) {
                makeX_SpaceEquidistant();
            }   
            draw();      
        }
    }

    function valuemanualchangeddx(){
        if (ROIInfo.length == 0) {
            return;
        }

        if (!drag) {
            rect.w = document.getElementById("refdx").value;
            rect.h = document.getElementById("refdy").value;

            if (lockAspectRatio) {
                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; 

            if (lockSpaceEquidistant) {
                makeX_SpaceEquidistant();
            }

            draw();            
        }
    }

    function valuemanualchangedspace(){
        if (!drag) {
           space = document.getElementById("space").value;
           valuemanualchanged();
           draw(); 
        }
    }

    // Make all X spaces equidistant
    function makeX_SpaceEquidistant() {
        if (ROIInfo.length <= 1) { // Only one or no number
            return;
        }

        var sel = document.getElementById("index");
        var _number = sel.selectedIndex;

        if (_number == 0) { // First number
            for (var _nb = 1; _nb < ROIInfo.length; _nb++) {
                ROIInfo[_nb].x = parseInt(ROIInfo[_nb-1].x)  + parseInt(ROIInfo[_nb-1].dx) + parseInt(space);
            }
        }
        else { // In between
            for (var _nb = _number - 1; _nb >= 0 ; _nb--) { // left side
                ROIInfo[_nb].x = parseInt(ROIInfo[_nb+1].x) - parseInt(ROIInfo[_nb].dx) - parseInt(space);
            }

            for (var _nb = _number + 1; _nb < ROIInfo.length; _nb++) { // right side
                ROIInfo[_nb].x = parseInt(ROIInfo[_nb-1].x) + parseInt(ROIInfo[_nb-1].dx) + parseInt(space);
            }
        }
    }

    function renameROI(){
        var sel = document.getElementById("Numbers_value1");
        var _number= sel.options[sel.selectedIndex].text;
        sel = document.getElementById("index");
        var _roialt= sel.options[sel.selectedIndex].text;


        var _roinew = prompt("Please enter new name", _roialt);

        erg = RenameROI(_number, "digit", _roialt, _roinew);
        if (erg != "")
            firework.launch(erg, 'danger', 30000);
        else
            UpdateROIs(_roinew);
    }

    function numberChanged()
    {
        UpdateROIs();
    }    


    init();

</script>

</body>
</html>