dyadmisha
/
AI-on-the-edge-device
spogulis no https://github.com/jomjol/AI-on-the-edge-device


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056
							<!DOCTYPE html>
<html lang="en" xml:lang="en"> 
<head>
    <title>Reference Image and Camera Settings</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;
            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: 460px;
            background-color: #fcfcfc;

            padding: 5px;
            padding-bottom: 0;

            border: solid black 2px; 

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

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

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

        #overlay {
            position: fixed;
            display: none;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0,0,0,0.8);
            z-index: 2;
        }

        #overlaytext{
            position: absolute;
            top: 50%;
            left: 50%;
            font-size: 150%;
            color: white;
            transform: translate(-50%,-50%);
            -ms-transform: translate(-50%,-50%);
        }
    </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>

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

<body style="font-family: arial; padding: 0px 10px;">
    <div id="overlay">
        <div id="overlaytext"></div>
    </div>

    <h2>Reference Image and Camera Settings</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>
            Initially the currently saved reference image is shown. If you start with a setup from scratch, a default image is shown as a placeholder.
            Use the button <b>"Create New Reference / Change Camera Settings"</b> to start the creation of your own reference image. After clicking the button, the camera will take a
            photo using the configured parameters. This will be your new reference image. With the button <b>"Update Reference Image"</b> you can update the image again.
        </p>        
        <p>
            To have a reliable evaluation processing, it is mandatory to have the digit ROIs horizontally aligned. Using the two input fields "Rotation angle" and
            "(Fine-tune)" the image can be rotated in both directions. The resulting rotation angle is used to pre-rotate the image before
            the alignment algorithm is processed to compensate only small misalignments (See next step Alignment Markers). 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 Image and Camera Settings"</b> button!<br><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>

    <input class="button" type="button" id="showcurrentreference" disabled value="Reset and show current Reference and Camera Settings" onclick="showReference()"><br><br>
    <input class="button" type="button" id="startreference" value="Create New Reference / Change Camera Settings" onclick="doTakeReference()">
    <hr>

    <input style="margin-top:12px;margin-bottom:12px" type="checkbox" id="ExpertModus_enabled" value="1"  onclick='UpdateExpertModus()' unchecked>
    <label for="ExpertModus_enabled">Show Expert Parameters</label> 

    <br><br>
    <b>*)</b> A change of this parameter only is applied on the next update of the Refrence Image.

    <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" onchange="cameraParameterChanged()"></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" onchange="cameraParameterChanged()"
                        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" onchange="cameraParameterChanged()"
                        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" onchange="cameraParameterChanged()"
                        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="cameraParameterChangedDR()"></td>
                <td>$TOOLTIP_Alignment_InitialMirror</td>
            <td>
                <class id="TakeImage_LEDIntensity_text" style="color:black;">LED intensity: <b>*)</b></class>
            </td>
            <td>
                <input required style="clear: both" type="number" id="TakeImage_LEDIntensity_value1" size="13" value="0"  min="0" max="100" onchange="cameraParameterChanged()" 
                    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="cameraParameterChangedDR()"></td>
                <td>$TOOLTIP_Alignment_FlipImageSize</td>
            <td>
                <class id="TakeImage_Brightness_text" style="color:black;">Brightness: <b>*)</b></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" onchange="cameraParameterChanged()" 
			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="cameraParameterChangedDR()"
                        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: <b>*)</b></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" onchange="cameraParameterChanged()" 
			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="cameraParameterChangedDR()"
                        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: <b>*)</b></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" onchange="cameraParameterChanged()" 
			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" onchange="cameraParameterChanged()"></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" onchange="cameraParameterChanged()"></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="cameraParameterChangedDR()"></td>
            <td>$TOOLTIP_TakeImage_Negative</td>
            <td>
                <class id="TakeImage_AutoExposureLevel_text" style="color:black;">Auto Exposure Level: <b>*)</b></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" onchange="cameraParameterChanged()" 
			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" onchange="cameraParameterChanged()"></td>
            <td>$TOOLTIP_TakeImage_FixedExposure</td>
            <td>
                <class id="TakeImage_Sharpness_text" style="color:black;">Sharpness: <b>*)</b></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" onchange="cameraParameterChanged()" 
			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>
        </tr>
            <td><input class="button" type="submit" id="updatereferenceimage" disabled onclick="doTakeReference()" value="Update Reference Image"></td>
            <td><input class="button" type="button" id="savereferenceimage" value="Save new Reference Image and Camera Settings" onclick="SaveReference()"></td>
        </tr>	
    </table>

    <hr>
    <b>Reference Image:</b><br>
    <canvas id="canvas"></canvas>
    
    <script language="JavaScript">
        var canvas = document.getElementById('canvas'),
            context = canvas.getContext('2d'),
            imageObj = new Image(),
            isActReference = false,
            param,
            _rotate_temp,
            _mirror_temp,
            _isize_temp,			
            _grayscale_temp,
            _negative_temp,
            _aec2_temp,
            _FixedExposure_temp,
            _zoom_temp,
            _zm_temp,
            _x_temp,
            _y_temp,
            _intensity_temp,
            _brightness_temp,
            _contrast_temp,
            _saturation_temp,
            _sharpness_temp,
            _ae_temp;		

        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 cameraParameterChanged() {
            document.getElementById("savereferenceimage").disabled = true;

            if(document.getElementById("zoom").checked) {
                document.getElementById("zoommode").disabled = false;
                document.getElementById("zoomoffsetx").disabled = false;
                document.getElementById("zoomoffsety").disabled = false;
            }
            else {
                document.getElementById("zoommode").disabled = true;
                document.getElementById("zoomoffsetx").disabled = true;
                document.getElementById("zoomoffsety").disabled = true;			
            }		
        }

        function cameraParameterChangedDR() {
            document.getElementById("savereferenceimage").disabled = true;
            drawRotated();
        }

        // Create New Reference, Update Image
        function doTakeReference(){            
            document.getElementById("overlay").style.display = "block";
            document.getElementById("overlaytext").innerHTML = "Taking new image...";

            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;
		
            if(document.getElementById("zoom").checked) {
                document.getElementById("zoommode").disabled = false;
                document.getElementById("zoomoffsetx").disabled = false;
                document.getElementById("zoomoffsety").disabled = false;
            }
            else {
                document.getElementById("zoommode").disabled = true;
                document.getElementById("zoomoffsetx").disabled = true;
                document.getElementById("zoomoffsety").disabled = true;			
            }
		
            document.getElementById("TakeImage_AutoExposureLevel_value1").disabled = false;
            document.getElementById("finerotate").disabled = false;
            document.getElementById("prerotateangle").disabled = false;

            document.getElementById("showcurrentreference").disabled = false;
            document.getElementById("startreference").disabled = true;
            document.getElementById("updatereferenceimage").disabled = false;
            document.getElementById("savereferenceimage").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;";
            }

            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;

            setTimeout(function() {
                var xhttp = new XMLHttpRequest();
                var domainname = getDomainname();

                var _grayscale = document.getElementById("grayscale").checked ? '1' : '0';
                var _negative = document.getElementById("negative").checked ? '1' : '0';
                var _aec2 = document.getElementById("aec2").checked ? '1' : '0';
                var _FixedExposure = document.getElementById("FixedExposure").checked ? '1' : '0';
                var _zoom = document.getElementById("zoom").checked ? '1' : '0';
                
                var _zm = document.getElementById("zoommode").value;
                if (_zm == '') {
                    _zm = '0';
                }
                
                var _x = document.getElementById("zoomoffsetx").value;
                if (_x == '') {
                    _x = '0';
                }
                
                var _y = document.getElementById("zoomoffsety").value;
                if (_y == '') {
                    _y = '0';
                }
                
                var _intensity = document.getElementById("TakeImage_LEDIntensity_value1").value;
                if (_intensity == '') {
                    _intensity = '50';
                }
                
                var _brightness = document.getElementById("TakeImage_Brightness_value1").value;
                var _contrast = document.getElementById("TakeImage_Contrast_value1").value;
                var _saturation = document.getElementById("TakeImage_Saturation_value1").value;
                var _sharpness = document.getElementById("TakeImage_Sharpness_value1").value;
                
                var _ae = document.getElementById("TakeImage_AutoExposureLevel_value1").value;

                if (_grayscale == '1') {
                    param["TakeImage"]["Grayscale"].value1 = "true";
                } else {
                    param["TakeImage"]["Grayscale"].value1 = "false";
                }
                if (_negative == '1') {
                    param["TakeImage"]["Negative"].value1 = "true";
                } else {
                    param["TakeImage"]["Negative"].value1 = "false";
                }			
                if (_aec2 == '1') {
                    param["TakeImage"]["Aec2"].value1 = "true";
                } else {
                    param["TakeImage"]["Aec2"].value1 = "false";
                }
                if (_FixedExposure == '1') {
                    param["TakeImage"]["FixedExposure"].value1 = "true";
                } else {
                    param["TakeImage"]["FixedExposure"].value1 = "false";
                }
                if (_zoom == '1') {
                    param["TakeImage"]["Zoom"].value1 = "true";
                } else {
                    param["TakeImage"]["Zoom"].value1 = "false";
                }

                param["TakeImage"]["ZoomMode"].value1 = _zm;
                param["TakeImage"]["ZoomOffsetX"].value1 = _x;
                param["TakeImage"]["ZoomOffsetY"].value1 = _y;
                param["TakeImage"]["LEDIntensity"].value1 = _intensity;
                param["TakeImage"]["Brightness"].value1 = _brightness;
                param["TakeImage"]["Contrast"].value1 = _contrast;
                param["TakeImage"]["Saturation"].value1 = _saturation;
                param["TakeImage"]["Sharpness"].value1 = _sharpness;
                param["TakeImage"]["AutoExposureLevel"].value1 = _ae;			
                
                var url = domainname + "/editflow?task=test_take";
                url = url + "&bri=" + _brightness + "&con=" + _contrast + "&sat=" + _saturation + "&sh=" + _sharpness;
                url = url + "&int=" + _intensity + "&gs=" + _grayscale + "&ne=" + _negative + "&z=" + _zoom;
                
                if (_zoom != '0') {
                    url = url + "&zm=" + _zm + "&x=" + _x + "&y=" + _y;
                }
                else {
                    url = url + "&zm=0" + "&x=0" + "&y=0";
                }		    
                    
                url = url + "&ae=" + _ae + "&a2=" + _aec2;		
                
                if (domainname.length > 0){
                    url = url + "&host=" + domainname;
                }

                xhttp.open("GET", url, true);
                xhttp.send();
            
                var _url = domainname + "/img_tmp/raw.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1);
                
                isActReference = false;
                loadCanvas(_url, true);
                camSettingsSet();
                
            }, 1); // Delay so the overlay gets shown
        }


        function camSettingsSet(){
            var domainname = getDomainname();
            var xhttp = new XMLHttpRequest();
			
            var _grayscale = '0';
            var _negative = '0';
            var _aec2 = '0';
            var _FixedExposure = '0';
            var _zoom = '0';

            if (_grayscale_temp == "true") {
                _grayscale = '1';
            }
            if (_negative_temp == "true") {
                _negative = '1';
            }			
            if (_aec2_temp == "true") {
                _aec2 = '1';
            }
            if (_FixedExposure_temp == "true") {
                _FixedExposure = '1';
            }
            if (_zoom_temp == "true") {
                _zoom = '1';
            }

            var url = domainname + "/editflow?task=cam_settings";
            url = url + "&bri=" + _brightness_temp + "&con=" + _contrast_temp + "&sat=" + _saturation_temp + "&sh=" + _sharpness_temp;
            url = url + "&int=" + _intensity_temp + "&gs=" + _grayscale + "&ne=" + _negative + "&z=" + _zoom;
			
            if (_zoom != '0') {
                url = url + "&zm=" + _zm_temp + "&x=" + _x_temp + "&y=" + _y_temp;
            }
				
            url = url + "&ae=" + _ae_temp + "&a2=" + _aec2;
			
            if (domainname.length > 0){
                url = url + "&host=" + domainname;
            }

            xhttp.open("GET", url, true);
            xhttp.send();			
        }
		
		
        function showReference(){
            var domainname = getDomainname();
		
            url = domainname + "/fileserver/config/reference.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1);

            if (_rotate_temp < 0) {
                document.getElementById("prerotateangle").value = Math.ceil(_rotate_temp);
            }
            else {
                document.getElementById("prerotateangle").value = Math.floor(_rotate_temp);
            }

            document.getElementById("finerotate").value = (Number(_rotate_temp) - Number(document.getElementById("prerotateangle").value)).toFixed(1);

            if (_mirror_temp == "true") {
                document.getElementById("mirror").checked = true;
            }
            else {
                document.getElementById("mirror").checked = false;
            }

            if (_isize_temp == "true") {
                document.getElementById("flip").checked = true;
            }
            else {
                document.getElementById("flip").checked = false;
            }			

            if (_grayscale_temp == "true") {
                document.getElementById("grayscale").checked = true;
            }
            else {
                document.getElementById("grayscale").checked = false;
            }

            if (_negative_temp == "true") {
                document.getElementById("negative").checked = true;
            }
            else {
                document.getElementById("negative").checked = false;
            }

            if (_aec2_temp == "true") {
                document.getElementById("aec2").checked = true;
            }
            else {
                document.getElementById("aec2").checked = false;
            }
			
            if (_FixedExposure_temp == "true") {
                document.getElementById("FixedExposure").checked = true;
            }
            else {
                document.getElementById("FixedExposure").checked = false;
            }

            if (_zoom_temp == "true") {
                document.getElementById("zoom").checked = true;
            }
            else {
                document.getElementById("zoom").checked = false;
            }			
			
            document.getElementById("zoommode").value = _zm_temp;
            document.getElementById("zoomoffsetx").value = _x_temp;
            document.getElementById("zoomoffsety").value = _y_temp;			
			
            document.getElementById("TakeImage_LEDIntensity_value1").value = _intensity_temp;
			
            document.getElementById("TakeImage_Brightness_value1").value = _brightness_temp;
            document.getElementById("TakeImage_Brightness_value1_output").value = _brightness_temp;
			
            document.getElementById("TakeImage_Contrast_value1").value = _contrast_temp;
            document.getElementById("TakeImage_Contrast_value1_output").value = _contrast_temp;
			
            document.getElementById("TakeImage_Saturation_value1").value = _saturation_temp;
            document.getElementById("TakeImage_Saturation_value1_output").value = _saturation_temp;
			
            document.getElementById("TakeImage_Sharpness_value1").value = _sharpness_temp;
            document.getElementById("TakeImage_Sharpness_value1_output").value = _sharpness_temp;			
			
            document.getElementById("TakeImage_AutoExposureLevel_value1").value = _ae_temp;
            document.getElementById("TakeImage_AutoExposureLevel_value1_output").value = _ae_temp;

            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("savereferenceimage").disabled = true;
            document.getElementById("updatereferenceimage").disabled = true;
            document.getElementById("showcurrentreference").disabled = true;
            document.getElementById("startreference").disabled = false;
            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 = true;
            document.getElementById("flip").disabled = true;

            isActReference = true;                                  
            loadCanvas(url, false);
        }
        
        function dataURLtoBlob(dataurl) {
            var arr = dataurl.split(',');
            var mime = arr[0].match(/:(.*?);/)[1];
            var bstr = atob(arr[1]);
            var n = bstr.length;
            var u8arr = new Uint8Array(n);
				
            while(n--){
                u8arr[n] = bstr.charCodeAt(n);
            }
			
            return new Blob([u8arr], {type:mime});
        }			
        
        function SaveReference(){
            var domainname = getDomainname();
        
            param["Alignment"]["InitialRotate"].value1 = (Number(document.getElementById("prerotateangle").value) + 
                                                            Number(document.getElementById("finerotate").value)).toFixed(1);

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

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

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

            WriteConfigININew();
            SaveConfigToServer(domainname);    
            //document.getElementById("savereferenceimage").disabled = true;
            //document.getElementById("updatereferenceimage").disabled = true;

            SaveCanvasToImage(canvas, "/config/reference.jpg", true, domainname);
            
            LoadParamTemp();				
            camSettingsSet();
            
            showReference();				
            firework.launch('Reference image configuration saved', 'success', 5000);
        }

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

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

                console.log("Done");
                document.getElementById("overlay").style.display = "none";

            };

            imageObj.src = dataURL;
        }

        function SaveCanvasToImage(_canvas, _filename, _delete = true, _domainname = ""){
            var JPEG_QUALITY=0.8;
            var dataUrl = _canvas.toDataURL('image/jpeg', JPEG_QUALITY);	
            var rtn = dataURLtoBlob(dataUrl);

            if (_delete) {
                FileDeleteOnServer(_filename, _domainname);
            }

            FileSendContent(rtn, _filename, _domainname);
        }

        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 openDescription() {
            if(window.location.hash) {
                var hash = window.location.hash.substring(1);
				
                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';
            }
			
            UpdateExpertModus();
            LoadParamTemp();
            showReference();
        }


        function LoadParamTemp() {
            _rotate_temp = param["Alignment"]["InitialRotate"].value1;
            _mirror_temp = param["Alignment"]["InitialMirror"].value1;
            _isize_temp = param["Alignment"]["FlipImageSize"].value1;		
		
            _grayscale_temp = param["TakeImage"]["Grayscale"].value1;
            _negative_temp = param["TakeImage"]["Negative"].value1;
            _aec2_temp = param["TakeImage"]["Aec2"].value1;
            _FixedExposure_temp = param["TakeImage"]["FixedExposure"].value1;
            _zoom_temp = param["TakeImage"]["Zoom"].value1;
            _zm_temp = param["TakeImage"]["ZoomMode"].value1;
            _x_temp = param["TakeImage"]["ZoomOffsetX"].value1;
            _y_temp = param["TakeImage"]["ZoomOffsetY"].value1;
            _intensity_temp = param["TakeImage"]["LEDIntensity"]["value1"];
            _brightness_temp = param["TakeImage"]["Brightness"]["value1"];
            _contrast_temp = param["TakeImage"]["Contrast"]["value1"];
            _saturation_temp = param["TakeImage"]["Saturation"]["value1"];
            _sharpness_temp = param["TakeImage"]["Sharpness"]["value1"];
            _ae_temp = param["TakeImage"]["AutoExposureLevel"]["value1"];
        }

        
        function drawRotated(_grid = true) {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');		
		
            var _finerot = parseFloat(document.getElementById("finerotate").value);
            var _prerot = parseFloat(document.getElementById("prerotateangle").value);
			
            var _mirror = document.getElementById("mirror").checked ? '1' : '0';
            var _flip = document.getElementById("flip").checked ? '1' : '0';
            var _negative = document.getElementById("negative").checked ? '1' : '0';			

            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;
			
            if (_flip == '1') {
                canvas.width = imageObj.height;
                canvas.height = imageObj.width;
            }
            else {
                canvas.width = imageObj.width;
                canvas.height = imageObj.height;
            }

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

            if (isActReference) {
                context.drawImage(imageObj,0,0);
            }
            else {
                if (_negative == '1') {
                    context.filter = 'invert(1)';
                }
              
                context.translate(canvas.width/2,canvas.height/2);
                context.rotate(degrees*Math.PI/180);
				
                if (_mirror == '1') {
                    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 context = canvas.getContext('2d');
			
            var w = canvas.width;
            var h = canvas.height;
            context.save();
            context.strokeStyle = '#00FF00';

            for (i = h/2; i < h; i += 100) {
                context.moveTo(0, i);
                context.lineTo(w, i);
                context.stroke();
                context.moveTo(0, h-i);
                context.lineTo(w, h-i);
                context.stroke();
            }
			
            for (i = w/2; i < w; i += 100) {
                context.moveTo(i, 0);
                context.lineTo(i, h);
                context.stroke();
                context.moveTo(w-i, 0);
                context.lineTo(w-i, h);
                context.stroke();                
            }
			
            context.restore();
        }

        function mouseMove(e) {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');            
			
            if (isActReference) {
                drawRotated(false);
            }
            else {
                drawRotated(true);
            }
            
            var zw = getCoords(this);
            var x = e.pageX - zw.left;
            var 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 UpdateExpertModus() {
            var _style_pur = 'none';
            var _hidden = true;
			
            if (document.getElementById("ExpertModus_enabled").checked) {
                _style_pur = '';
                _hidden = false;
                firework.launch("Expert parameter 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;
            }
        }

        init();

    </script>
</body>
</html>