dyadmisha
/
AI-on-the-edge-device
Mirror von https://github.com/jomjol/AI-on-the-edge-device


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966
							<!DOCTYPE html>
<html lang="en" xml:lang="en"> 
<head>
    <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: 60px;
            margin-right: 10px;
            padding: 3px 5px;
            display: inline-block;
            border: 1px solid #ccc;
            font-size: 16px;
            vertical-align: middle;
        }

		input:out-of-range {
			background-color: rgba(255, 0, 0, 0.25);
			border: 1px solid red;
        }

		input:invalid {
			background-color: rgba(255, 0, 0, 0.25);
			border: 1px solid red;
        }

        .expert {
            background-color: #ffefef;
            font-size: 16px;
        }

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

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

        table {
            width: 660px;
            padding: 5px;
        }

        .tooltip {
            position: relative;
            display: inline-block;
        }

        .tooltip .tooltiptext {
            visibility: hidden;
            width: 470px;
            background-color: #fcfcfc;

            padding: 5px;
            padding-bottom: 0;

            border: solid black 2px; 

            /* Position the tooltip */
            position: absolute;
            z-index: 1;
            top: 100%;
            left: 590%;
            margin-left: -600px;
        }

        .tooltip:hover .tooltiptext {
            visibility: visible;
        }

        .tooltip-content {
            width: calc(100% - 2px);
            height: calc(100% - 2px);
            padding: 1px;
        }
    </style>

    <link rel="stylesheet" href="mkdocs_theme.css?v=$COMMIT_HASH" />
    <link rel="stylesheet" href="mkdocs_theme_extra.css?v=$COMMIT_HASH" />
    <link rel="stylesheet" href="github.min.css?v=$COMMIT_HASH" />

    <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>
    <details id="desc_details" style="font-size:16px">
        <summary><b>CLICK HERE</b> for usage description. More infos in documentation: 
                <a href=https://jomjol.github.io/AI-on-the-edge-device-docs/Reference-Image/ target=_blank>Reference Image</a>
        </summary>
        <p>
            The reference image is the base image on which the alignment markers, digit ROIs and anlog ROIs will be defined.
        </p>        
        <p>
            Firstly the actual saved reference image is shown. If you start with the setup from scratch a default image is shown as placeholder.
            Use the button <b>"Create New Reference"</b> to start creation of your own reference image. After selecting the button a new image will be taken
            all configured parameter will be applied to the shown image. With the button <b>"Update Image"</b> you can update the image again (still all parameter
            get applied to the new image).
        </p>        
        <p>
            To have reliable evaluation processing a properly horizontal aligned evaluation area is mandatory. Using the parameters "Rotation angle" and
            "Rotation angle (Fine-tune)" the image can be rotated in both directions. The resulting rotation anlge is used to prerotate the image before
            the alignment algorithm is processed to compensate only small misalignments. Further information can be found in documenation:
            <a href=https://jomjol.github.io/AI-on-the-edge-device-docs/Reference-Image/ target=_blank>Reference Image</a>
        </p>
        <p>
            After setting up your reference image don't forget to save with the <b>"Save New Reference"</b> button!<br>
            <b>NOTE:</b> There is no need to perform a reboot after every saving or step. It's sufficient to reboot after all configuration steps 
            (reference image, alignment, ROI configuration) are completed to activate new configuration.
        </p>
    </details>
    <hr />

	<table>
        <colgroup>
            <col span="1" style="width: 33.3%;">
            <col span="1" style="width: 33.3%;">
            <col span="1" style="width: 33.3%;">
        </colgroup>
        <tr>
			<td class="indent1">
				<input style="margin-top:12px;margin-bottom:12px" type="checkbox" id="ExpertModus_enabled" value="1"  onclick='UpdateExpertModus()' unchecked>
					<label for="ExpertModus_enabled">Expert View</label> 
			</td>
			<td colspan="2">
				<b>*)</b> A change of this parameter only is applied on the next update of the Refrence Image.
			</td>
			<td>
            </td>
		</tr>
        <tr>
            <td><input class="button" type="button" value="Show Actual Reference" onclick="showReference(param)"></td>	  
            <td><input class="button" type="button" id="startreference" value="Create New Reference" onclick="loadRawImage(false)"></td>
            <td><input class="button" type="submit" id="take" onclick="doTake()" value="Update Reference Image">
        </tr>
    </table>
    <table style="width: 100%">
        <colgroup>
            <col span="1" style="width: 12%;">
            <col span="1" style="width: 15%;">
            <col span="1" style="width: 3%;">
            <col span="1" style="width: 18%;">
            <col span="1" style="width: 10%;">
            <col span="1" style="width: 3%;">
        </colgroup>
        <tr class="expert">
            <td>
                <label for="zoom" id="labelzoom">Enable zoom: <b>*)</b></label></td>
            <td>
                <input type="checkbox" id="zoom" name="zoom" value="0"></td>
                <td>$TOOLTIP_TakeImage_Zoom</td>
            <td>
                <label for="zoomoffsetx">Zoom offset X: <b>*)</b></label></td>
            <td>
                <input required type="number" id="zoomoffsetx" name="zoomoffsetx" value="0" min="0" max="1280" step="1"
                        oninput="(!validity.rangeOverflow||(value=1280)) && (!validity.rangeUnderflow||(value=0)) && 
                            (!validity.stepMismatch||(value=parseInt(this.value)));">
            </td>
            <td>$TOOLTIP_TakeImage_ZoomOffsetX</td>
        </tr>
        <tr class="expert">
            <td>
                <label for="zoommode" id="labelzoommode">Zoom mode: <b>*)</b></label></td>
            <td>
                <input required type="number" id="zoommode" name="zoommode" value="0" min="0" max="1" step="1"
                        oninput="(!validity.rangeOverflow||(value=1)) && (!validity.rangeUnderflow||(value=0)) && 
                            (!validity.stepMismatch||(value=parseInt(this.value)));">
            </td>
            <td>$TOOLTIP_TakeImage_ZoomMode</td>
            <td>
                <label for="zoomoffsety">Zoom offset Y: <b>*)</b></label></td>
            <td>
                <input required type="number" id="zoomoffsety" name="zoomoffsety" value="0" min="0" max="960" step="1"
                        oninput="(!validity.rangeOverflow||(value=960)) && (!validity.rangeUnderflow||(value=0)) && 
                            (!validity.stepMismatch||(value=parseInt(this.value)));">
            </td>
            <td>$TOOLTIP_TakeImage_ZoomOffsetY</td>
        </tr>
        <tr>
            <td>
                <label for="mirror" id="labelmirror">Mirror image:</label></td>
            <td>
                <input type="checkbox" id="mirror" name="mirror" value="1" onchange="drawRotated()"></td>
                <td>$TOOLTIP_Alignment_InitialMirror</td>
            <td>
                <class id="TakeImage_LEDIntensity_text" style="color:black;">LED intensity:</class>
            </td>
            <td>
                <input required style="clear: both" type="number" id="TakeImage_LEDIntensity_value1" size="13" value="0"  min="0" max="100" 
                    oninput="(!validity.rangeOverflow||(value=100)) && (!validity.rangeUnderflow||(value=0)) && 
                        (!validity.stepMismatch||(value=parseInt(this.value)));">
            </td>
            <td>$TOOLTIP_TakeImage_LEDIntensity</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>$TOOLTIP_Alignment_FlipImageSize</td>
            <td>
                <class id="TakeImage_Brightness_text" style="color:black;">Brightness:</class>
            </td>
            <td>
                <input style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_Brightness_value1" size="13" value=0  min="-2" max="2" oninput="this.nextElementSibling.value = this.value">
                <output id="TakeImage_Brightness_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
            </td>
            <td>$TOOLTIP_TakeImage_Brightness</td>
        </tr>
        <tr>
            <td><label for="prerotateangle">Rotation angle:</label></td>
            <td>
                <input required type="number" id="prerotateangle" name="prerotateangle" value="0" min="-360" max="360" onchange="drawRotated()"
                        oninput="(!validity.rangeOverflow||(value=360)) && (!validity.rangeUnderflow||(value=-360)) && 
                            (!validity.stepMismatch||(value=parseInt(this.value)));">degree
                </td>
                <td>$TOOLTIP_Alignment_InitialRotate</td>
            <td>
                <class id="TakeImage_Contrast_text" style="color:black;">Contrast:</class>
            </td>
            <td>
                <input style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_Contrast_value1" size="13" value=0  min="-2" max="2" oninput="this.nextElementSibling.value = this.value">
                <output id="TakeImage_Contrast_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
            </td>
            <td>$TOOLTIP_TakeImage_Contrast</td>
        </tr>
        <tr>
            <td><label for="finerotate">(Fine-tune):</label></td>
            <td>
                <input required type="number" id="finerotate" name="finerotate" value=0.0 min="-1" max="1" step="0.1" onchange="drawRotated()"
                        oninput="(!validity.rangeOverflow||(value=1)) && (!validity.rangeUnderflow||(value=-1)) && 
                            (!validity.stepMismatch||(value=parseInt(this.value)));">degree
            </td>
            <td></td>
            <td>
                <class id="TakeImage_Saturation_text" style="color:black;">Saturation:</class>
            </td>
            <td>
                <input  style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_Saturation_value1" size="13" value=0 min="-2" max="2" oninput="this.nextElementSibling.value = this.value">
                <output id="TakeImage_Saturation_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
            </td>
            <td>$TOOLTIP_TakeImage_Saturation</td>
        </tr>
        <tr class="expert">
            <td>
                <label for="grayscale" id="labelgrayscale">Grayscale: <b>*)</b></label></td>
            <td>
                <input type="checkbox" id="grayscale" name="grayscale" value="0"></td>
                <td>$TOOLTIP_TakeImage_Grayscale</td>
            <td>
                <label for="aec2" id="labelaec2">Auto Exposure Control 2: <b>*)</b></label></td>
            <td>
                <input type="checkbox" id="aec2" name="aec2" value="0"></td>
                <td>$TOOLTIP_TakeImage_Aec2</td>
        </tr>
        <tr class="expert">
            <td>
                <label for="negative" id="labelnegative">Negative: <b>*)</b></label></td>
            <td>
                <input type="checkbox" id="negative" name="negative" value="0" onchange="drawRotated()"></td>
            <td>$TOOLTIP_TakeImage_Negative</td>
            <td>
                <class id="TakeImage_AutoExposureLevel_text" style="color:black;">Auto Exposure Level:</class>
            </td>
            <td>
                <input  style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_AutoExposureLevel_value1" size="13" value=0 min="-2" max="2" oninput="this.nextElementSibling.value = this.value">
                <output id="TakeImage_AutoExposureLevel_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
            </td>
            <td>$TOOLTIP_TakeImage_AutoExposureLevel</td>
        </tr>
        <tr class="expert">
            <td>
                <label for="FixedExposure" id="labelFixedExposure">FixedExposure: <b>*)</b></label></td>
            <td>
                <input type="checkbox" id="FixedExposure" name="FixedExposure" value="0"></td>
            <td>$TOOLTIP_TakeImage_FixedExposure</td>
            <td>
                <class id="TakeImage_Sharpness_text" style="color:black;">Sharpness:</class>
            </td>
            <td>
                <input style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_Sharpness_value1" size="13" value=0  min="-4" max="3" oninput="this.nextElementSibling.value = this.value">
                <output id="TakeImage_Sharpness_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
            </td>
            <td>$TOOLTIP_TakeImage_Sharpness</td>
        </tr>
    </table>
    <table>
        <colgroup>
            <col span="1" style="width: 33.3%;">
            <col span="1" style="width: 33.3%;">
            <col span="1" style="width: 33.3%;">
        </colgroup>
        <tr>
            <td style="vertical-align: bottom;"><b>Reference Image:</b></td>
            <td></td>
            <td>
                <input style="font-weight:bold;" class="button" type="button" id="updatereferenceimage" value="Save New Reference" onclick="SaveReference()">
            </td>
        </tr>
        <tr>
            <td colspan="3"><canvas id="canvas"></canvas></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)
            {
                _grayscale = document.getElementById("grayscale").checked ? "1" : "0";
                _negative = document.getElementById("negative").checked ? "1" : "0";
                _aec2 = document.getElementById("aec2").checked ? "1" : "0";
                _FixedExposure = document.getElementById("FixedExposure").checked ? "1" : "0";
                _zoom = document.getElementById("zoom").checked ? "1" : "0";
                _zm = document.getElementById("zoommode").value;
                if (_zm == "") _zm = "0";
                _x = document.getElementById("zoomoffsetx").value;
                if (_x == "") _x = "0";
                _y = document.getElementById("zoomoffsety").value;
                if (_y == "") _y = "0";
                _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;
                _sharpness = document.getElementById("TakeImage_Sharpness_value1").value;
                _ae = document.getElementById("TakeImage_AutoExposureLevel_value1").value;
                url = getDomainname() + "/editflow?task=test_take&bri=" + _brightness;
                url = url + "&con=" + _contrast + "&sat=" + _saturation + "&sh=" + _sharpness + "&int=" + _intensity + "&gs=" + _grayscale + "&ne=" + _negative + "&z=" + _zoom;
                if (_zoom != '0')
                    url = url + "&zm=" + _zm + "&x=" + _x + "&y=" + _y;
                url = url + "&ae=" + _ae + "&a2=" + _aec2;
            }
            else
            {
                url = domainname + "/editflow?task=test_take";
            }
            if (domainname.length > 0){
                url = url + "&host=" + domainname;
            }

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

            firework.launch('Taking updated image...', 'success', 5000);
            loadRawImage(true);
        }
        

        function loadRawImage(new_image) {
            if (new_image) {
                url = getDomainname() + "/img_tmp/raw.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1);
                document.getElementById("updatereferenceimage").disabled = false;
            }
            else {
                document.getElementById("updatereferenceimage").disabled = true;
                doTake();
            }

            document.getElementById("grayscale").disabled = false;
            document.getElementById("negative").disabled = false;
            document.getElementById("aec2").disabled = false;
            document.getElementById("FixedExposure").disabled = false;
            document.getElementById("zoom").disabled = false;
            document.getElementById("zoommode").disabled = false;
            document.getElementById("zoomoffsetx").disabled = false;
            document.getElementById("zoomoffsety").disabled = false;
            document.getElementById("TakeImage_AutoExposureLevel_value1").disabled = false;
            document.getElementById("finerotate").disabled = false;
            document.getElementById("prerotateangle").disabled = false;
            document.getElementById("startreference").disabled = true;
            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_Sharpness_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, true);
        }
        

        function showReference(_param){
            url = getDomainname() + "/fileserver/config/reference.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1);

            if (_param["Alignment"]["InitialRotate"].value1 < 0) {
                document.getElementById("prerotateangle").value = Math.ceil(_param["Alignment"]["InitialRotate"].value1);
            }
            else {
                document.getElementById("prerotateangle").value = Math.floor(_param["Alignment"]["InitialRotate"].value1);
            }

            document.getElementById("finerotate").value = (Number(_param["Alignment"]["InitialRotate"].value1) - 
                                                            Number(document.getElementById("prerotateangle").value)).toFixed(1);

            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("grayscale").disabled = true;
            document.getElementById("negative").disabled = true;
            document.getElementById("aec2").disabled = true;
            document.getElementById("FixedExposure").disabled = true;
            document.getElementById("zoom").disabled = true;
            document.getElementById("zoommode").disabled = true;
            document.getElementById("zoomoffsetx").disabled = true;
            document.getElementById("zoomoffsety").disabled = true;
            document.getElementById("TakeImage_AutoExposureLevel_value1").disabled = true;
            document.getElementById("finerotate").disabled = true;
            document.getElementById("prerotateangle").disabled = true; 
            document.getElementById("updatereferenceimage").disabled = true;
            document.getElementById("startreference").disabled = false;
            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_Sharpness_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, false);
        }
        
        
        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 save the new reference image configuration?")) {
                param["Alignment"]["InitialRotate"].value1 = (Number(document.getElementById("prerotateangle").value) + 
                                                                Number(document.getElementById("finerotate").value)).toFixed(1);

                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"]["Grayscale"].found == true) && (document.getElementById("grayscale").checked))
                    param["TakeImage"]["Grayscale"].value1 = "true";
                else
                    param["TakeImage"]["Grayscale"].value1 = "false";

                if ((param["TakeImage"]["Negative"].found == true) && (document.getElementById("negative").checked))
                    param["TakeImage"]["Negative"].value1 = "true";
                else
                    param["TakeImage"]["Negative"].value1 = "false";

                if ((param["TakeImage"]["Aec2"].found == true) && (document.getElementById("aec2").checked))
                    param["TakeImage"]["Aec2"].value1 = "true";
                else
                    param["TakeImage"]["Aec2"].value1 = "false";

                if ((param["TakeImage"]["FixedExposure"].found == true) && (document.getElementById("FixedExposure").checked))
                    param["TakeImage"]["FixedExposure"].value1 = "true";
                else
                    param["TakeImage"]["FixedExposure"].value1 = "false";

                if ((param["TakeImage"]["Zoom"].found == true) && (document.getElementById("zoom").checked))
                    param["TakeImage"]["Zoom"].value1 = "true";
                else
                    param["TakeImage"]["Zoom"].value1 = "false";

                param["TakeImage"]["ZoomMode"].value1 = document.getElementById("zoommode").value;
                param["TakeImage"]["ZoomOffsetX"].value1 = document.getElementById("zoomoffsetx").value;
                param["TakeImage"]["ZoomOffsetY"].value1 = document.getElementById("zoomoffsety").value;

                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", "Sharpness", false);
                    ReadParameter(param, "TakeImage", "LEDIntensity", false);
                    ReadParameter(param, "TakeImage", "AutoExposureLevel", false);
                }

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

                WriteConfigININew();
                SaveConfigToServer(getDomainname());    
                document.getElementById("updatereferenceimage").disabled = true;

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


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

                imageObj.onload = function() {
                    canvas.width = this.width;
                    canvas.height = this.height;
                    if (grid)
                        drawRotated(true);
                    else
                        drawRotated(false);
                };

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

            param["TakeImage"]["AutoExposureLevel"]["enabled"] = true;
            param["TakeImage"]["LEDIntensity"]["enabled"] = true;
            param["TakeImage"]["Brightness"]["enabled"] = true;
            param["TakeImage"]["Contrast"]["enabled"] = true;
            param["TakeImage"]["Saturation"]["enabled"] = true;
            param["TakeImage"]["Sharpness"]["enabled"] = true;
            
            param["TakeImage"]["Grayscale"]["enabled"] = true;
            param["TakeImage"]["Negative"]["enabled"] = true;
            param["TakeImage"]["Aec2"]["enabled"] = true;
            param["TakeImage"]["FixedExposure"]["enabled"] = true;
            param["TakeImage"]["Zoom"]["enabled"] = true;
            param["TakeImage"]["ZoomMode"]["enabled"] = true;
            param["TakeImage"]["ZoomOffsetX"]["enabled"] = true;
            param["TakeImage"]["ZoomOffsetY"]["enabled"] = true;

            if (!param["TakeImage"]["Grayscale"]["found"])
            {
                param["TakeImage"]["Grayscale"]["found"] = true;
                param["TakeImage"]["Grayscale"].value1 = "false";
            }
            if (!param["TakeImage"]["Negative"]["found"])
            {
                param["TakeImage"]["Negative"]["found"] = true;
                param["TakeImage"]["Negative"].value1 = "false";
            }
            if (!param["TakeImage"]["Aec2"]["found"])
            {
                param["TakeImage"]["Aec2"]["found"] = true;
                param["TakeImage"]["Aec2"].value1 = "false";
            }
            if (!param["TakeImage"]["FixedExposure"]["found"])
            {
                param["TakeImage"]["FixedExposure"]["found"] = true;
                param["TakeImage"]["FixedExposure"].value1 = "false";
            }
            if (!param["TakeImage"]["Zoom"]["found"])
            {
                param["TakeImage"]["Zoom"]["found"] = true;
                param["TakeImage"]["Zoom"].value1 = "false";
            }
            if (!param["TakeImage"]["ZoomMode"]["found"])
            {
                param["TakeImage"]["ZoomMode"]["found"] = true;
                param["TakeImage"]["ZoomMode"].value1 = "0";
            }
            if (!param["TakeImage"]["ZoomOffsetX"]["found"])
            {
                param["TakeImage"]["ZoomOffsetX"]["found"] = true;
                param["TakeImage"]["ZoomOffsetX"].value1 = "0";
            }
            if (!param["TakeImage"]["ZoomOffsetY"]["found"])
            {
                param["TakeImage"]["ZoomOffsetY"]["found"] = true;
                param["TakeImage"]["ZoomOffsetY"].value1 = "0";
            }

            if (!param["TakeImage"]["AutoExposureLevel"]["found"])
            {
                param["TakeImage"]["AutoExposureLevel"]["found"] = true;
                param["TakeImage"]["AutoExposureLevel"]["value1"] = "0";
            }
            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";
            }
            if (!param["TakeImage"]["Sharpness"]["found"])
            {
                param["TakeImage"]["Sharpness"]["found"] = true;
                param["TakeImage"]["Sharpness"]["value1"] = "0";
            }

            UpdateInput();
            showReference(param); 
        }


        function UpdateInput() {
            WriteParameter(param, category, "TakeImage", "AutoExposureLevel", false, true);
            WriteParameter(param, category, "TakeImage", "Brightness", false, true);
            WriteParameter(param, category, "TakeImage", "Contrast", false, true);
            WriteParameter(param, category, "TakeImage", "Saturation", false, true);
            WriteParameter(param, category, "TakeImage", "Sharpness", false, true);
            WriteParameter(param, category, "TakeImage", "LEDIntensity", false);
            if (param["TakeImage"]["Grayscale"].value1 == "true") {
                document.getElementById("grayscale").checked = true;
            } else {
                document.getElementById("grayscale").checked = false;
            }
            if (param["TakeImage"]["Negative"].value1 == "true") {
                document.getElementById("negative").checked = true;
            } else {
                document.getElementById("negative").checked = false;
            }
            if (param["TakeImage"]["Aec2"].value1 == "true") {
                document.getElementById("aec2").checked = true;
            } else {
                document.getElementById("aec2").checked = false;
            }
            if (param["TakeImage"]["FixedExposure"].value1 == "true") {
                document.getElementById("FixedExposure").checked = true;
            } else {
                document.getElementById("FixedExposure").checked = false;
            }
            if (param["TakeImage"]["Zoom"].value1 == "true") {
                document.getElementById("zoom").checked = true;
            } else {
                document.getElementById("zoom").checked = false;
            }
            document.getElementById("zoommode").value = param["TakeImage"]["ZoomMode"].value1;
            document.getElementById("zoomoffsetx").value = param["TakeImage"]["ZoomOffsetX"].value1;
            document.getElementById("zoomoffsety").value = param["TakeImage"]["ZoomOffsetY"].value1;
        }


        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, outval = false, _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];
                    }
                }
                if (outval)
                    document.getElementById(_cat+"_"+_name+"_value1_output").value = document.getElementById(_cat+"_"+_name+"_value1").value;
            }
            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) {
            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();

            negative = document.getElementById("negative").checked;

            if (isActReference)
            {
                context.drawImage(imageObj,0,0);
            }
            else
            {
                if (negative) {
                    context.filter = 'invert(1)';
                }
                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)
                    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) {
            if (isActReference)
                drawRotated(false);
            else
                drawRotated(true);
            
            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();
        UpdateExpertModus();
    

        function UpdateExpertModus()
        {
        //	var _style = 'display:none;';
            var _style_pur = 'none';
            var _hidden = true;
            if (document.getElementById("ExpertModus_enabled").checked) {
        //		_style = '';
                _style_pur = '';
                _hidden = false;
                firework.launch("Expert view activated. Please use carefully", 'warning', 5000);
            }

            const expert = document.querySelectorAll(".expert");
            for (var i = 0; i < expert.length; i++) {
                expert[i].style.display = _style_pur;
        //		document.getElementById(expert[i].id).style = _style;
            }
        }


    </script>

</body>
</html>