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


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156115711581159116011611162116311641165116611671168116911701171117211731174117511761177117811791180118111821183118411851186118711881189119011911192119311941195119611971198119912001201120212031204120512061207120812091210121112121213121412151216121712181219122012211222122312241225122612271228122912301231123212331234123512361237123812391240124112421243124412451246124712481249125012511252125312541255125612571258125912601261126212631264126512661267126812691270127112721273127412751276127712781279128012811282128312841285128612871288128912901291129212931294129512961297129812991300130113021303130413051306130713081309131013111312131313141315131613171318131913201321132213231324132513261327132813291330133113321333133413351336133713381339134013411342134313441345134613471348134913501351135213531354135513561357135813591360136113621363136413651366136713681369137013711372137313741375137613771378137913801381138213831384138513861387138813891390139113921393139413951396139713981399140014011402140314041405140614071408140914101411141214131414141514161417141814191420142114221423
							<!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; color:black" type="checkbox" id="ExpertModus_enabled" value="1"  onclick='UpdateExpertModus()' unchecked>
    <label for="ExpertModus_enabled">Show Expert Parameters</label> 

    <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 class="indent1">
				<class id="TakeImage_CamZoom_text" style="color:black;">Zoom</class>
			</td>
			<td>
				<select id="TakeImage_CamZoom_value1" onchange="cameraParameterChanged()">
					<option value="true">enable</option>
					<option value="false" selected>disable</option>
				</select>			
			</td>
			<td>$TOOLTIP_TakeImage_CamZoom</td>				
			
            <td class="indent1">
                <label id="TakeImage_CamZoomOffsetX_text" style="color:black;">Zoom Offset X: </label>
			</td>
            <td>
                <input required type="number" id="TakeImage_CamZoomOffsetX_value1" value="0" min="-960" max="960" step="8" onchange="cameraParameterChanged()"
                    oninput="(!validity.rangeOverflow||(value=960)) && (!validity.rangeUnderflow||(value=-960)) && (!validity.stepMismatch||(value=parseInt(this.value)));">
            </td>
			<td>$TOOLTIP_TakeImage_CamZoomOffsetX</td>				
        </tr>
		
        <tr class="expert">
            <td class="indent1">
                <label id="TakeImage_CamZoomSize_text" style="color:black;">Zoom Size: </label>
			</td>
            <td>
                <input required type="number" id="TakeImage_CamZoomSize_value1" value="0" min="0" max="59" step="1" onchange="cameraParameterChanged()"
                    oninput="(!validity.rangeOverflow||(value=59)) && (!validity.rangeUnderflow||(value=0)) && (!validity.stepMismatch||(value=parseInt(this.value)));">
            </td>
			<td>$TOOLTIP_TakeImage_CamZoomSize</td>			
		
            <td class="indent1">
                <label id="TakeImage_CamZoomOffsetY_text" style="color:black;">Zoom Offset Y: </label>
			</td>
            <td>
                <input required type="number" id="TakeImage_CamZoomOffsetY_value1" value="0" min="-720" max="720" step="8" onchange="cameraParameterChanged()"
                    oninput="(!validity.rangeOverflow||(value=720)) && (!validity.rangeUnderflow||(value=-720)) && (!validity.stepMismatch||(value=parseInt(this.value)));">
            </td>
			<td>$TOOLTIP_TakeImage_CamZoomOffsetY</td>		
        </tr>
		
        <tr class="expert">
			<td class="indent1">
				<class id="TakeImage_CamSpecialEffect_text" style="color:black;">SpecialEffect: </class>
			</td>
			<td>
				<select id="TakeImage_CamSpecialEffect_value1" onchange="cameraParameterChanged()">
					<option value="no_effect" selected>no effect</option>
					<option value="negative" >negative</option>
					<option value="grayscale" >grayscale</option>					
					<option value="red" >red</option>					
					<option value="green" >green</option>					
					<option value="blue" >blue</option>					
					<option value="retro" >retro</option>					
				</select>
			</td>
			<td>$TOOLTIP_TakeImage_CamSpecialEffect</td>			
			
			<td class="indent1">
				<class id="TakeImage_CamAec2_text" style="color:black;">Auto-exposure Control 2</class>
			</td>
			<td>
				<select id="TakeImage_CamAec2_value1" onchange="cameraParameterChanged()">
					<option value="true">enable</option>
					<option value="false" selected>disable</option>
				</select>
			</td>
			<td>$TOOLTIP_TakeImage_CamAec2</td>			
        </tr>
		
        <tr>
			<td class="indent1">
			    <class id="TakeImage_CamHmirror_text" style="color:black;">Mirror Image</class>
			</td>
			<td>
				<select id="TakeImage_CamHmirror_value1" onchange="cameraParameterChanged()">
					<option value="true">enable</option>
					<option value="false" selected>disable</option>
				</select>
			</td>			
			<td>$TOOLTIP_TakeImage_CamHmirror</td>
			
            <td class="indent1">
                <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" 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 class="indent1">
			    <class id="TakeImage_CamVflip_text" style="color:black;">Flip Image</class>
			</td>
			<td>
				<select id="TakeImage_CamVflip_value1" onchange="cameraParameterChanged()">
					<option value="true">enable</option>
					<option value="false" selected>disable</option>
				</select>
			</td>			
			<td>$TOOLTIP_TakeImage_CamVflip</td>
			
            <td class="indent1">
                <class id="TakeImage_CamBrightness_text" style="color:black;">Brightness: </class>
            </td>
            <td>
                <input style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_CamBrightness_value1" size="13" value=0  min="-2" max="2" onchange="cameraParameterChanged()" 
					oninput="this.nextElementSibling.value = this.value">
                <output id="TakeImage_CamBrightness_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
            </td>
			<td>$TOOLTIP_TakeImage_CamBrightness</td>
        </tr>
		
        <tr>
            <td class="indent1">
				<label id="PreRotateAngle_text" style="color:black;">Rotation angle:</label>
			</td>
            <td>
                <input required type="number" id="PreRotateAngle_value1" value="0" min="-180" max="180" onchange="cameraParameterChangedDR()"
                    oninput="(!validity.rangeOverflow||(value=180)) && (!validity.rangeUnderflow||(value=-180)) && (!validity.stepMismatch||(value=parseInt(this.value)));">degree
            </td>
			<td>$TOOLTIP_Alignment_InitialRotate</td>
			
            <td class="indent1">
                <class id="TakeImage_CamContrast_text" style="color:black;">Contrast: </class>
            </td>
            <td>
                <input style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_CamContrast_value1" size="13" value=0  min="-2" max="2" onchange="cameraParameterChanged()" 
					oninput="this.nextElementSibling.value = this.value">
                <output id="TakeImage_CamContrast_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
            </td>
			<td>$TOOLTIP_TakeImage_CamContrast</td>
        </tr>
		
        <tr>
            <td class="indent1">
				<label id="FineRotate_text" style="color:black;">(Fine-tune):</label>
			</td>
            <td>
                <input required type="number" id="FineRotate_value1" 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="indent1">
                <class id="TakeImage_CamSaturation_text" style="color:black;">Saturation: </class>
            </td>
            <td>
                <input  style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_CamSaturation_value1" size="13" value=0 min="-2" max="2" onchange="cameraParameterChanged()" 
					oninput="this.nextElementSibling.value = this.value">
                <output id="TakeImage_CamSaturation_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
            </td>
			<td>$TOOLTIP_TakeImage_CamSaturation</td>
        </tr>
		
        <tr class="expert">
			<td class="indent1">
				<class id="TakeImage_CamAec_text" style="color:black;">Auto-exposure Control</class>
			</td>
			<td>
				<select id="TakeImage_CamAec_value1" onchange="cameraParameterChanged()">
					<option value="true">enable</option>
					<option value="false" selected>disable</option>
				</select>
			</td>
			<td>$TOOLTIP_TakeImage_CamAec</td>
			
            <td class="indent1">
                <class id="TakeImage_CamAeLevel_text" style="color:black;">Auto Exposure Level: </class>
            </td>
            <td>
                <input  style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_CamAeLevel_value1" size="13" value=0 min="-2" max="2" onchange="cameraParameterChanged()" 
					oninput="this.nextElementSibling.value = this.value">
                <output id="TakeImage_CamAeLevel_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
            </td>
			<td>$TOOLTIP_TakeImage_CamAeLevel</td>
        </tr>
		
        <tr class="expert">
			<td class="indent1">
				<class id="TakeImage_CamAutoSharpness_text" style="color:black;">AutoSharpness</class>
			</td>
			<td>
				<select id="TakeImage_CamAutoSharpness_value1" onchange="cameraParameterChanged()">
					<option value="true">enable</option>
					<option value="false" selected>disable</option>
				</select>
			</td>
			<td>$TOOLTIP_TakeImage_CamAutoSharpness</td>			
			
            <td class="indent1">
                <class id="TakeImage_CamSharpness_text" style="color:black;">Sharpness: </class>
            </td>
            <td>
                <input style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_CamSharpness_value1" size="13" value=0  min="-2" max="2" onchange="cameraParameterChanged()" 
					oninput="this.nextElementSibling.value = this.value">
                <output id="TakeImage_CamSharpness_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
            </td>
			<td>$TOOLTIP_TakeImage_CamSharpness</td>
        </tr>
    </table>

    <table>
        <tr class="indent1">
            <td>
				<input class="button" type="submit" id="updatereferenceimage" value="Update Reference Image" onclick="doTakeReference()">
			</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'),
            domainname = getDomainname(),
            context = canvas.getContext('2d'),
            imageObj = new Image(),
            isActReference = false,
            param,
			category;

        function doReboot() {
            if (confirm("Are you sure you want to reboot? Did you save the config?")) {
               var stringota = domainname + "/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("TakeImage_CamZoom_value1").selectedIndex) {
				// EnDisableItem(_status, _param, _category, _cat, _name, _optional, _number = -1)
				EnDisableItem(true, param, category, "TakeImage", "CamZoomOffsetX", false);
				EnDisableItem(true, param, category, "TakeImage", "CamZoomOffsetY", false);
				EnDisableItem(true, param, category, "TakeImage", "CamZoomSize", false);				
            }
            else {
				EnDisableItem(false, param, category, "TakeImage", "CamZoomOffsetX", false);
				EnDisableItem(false, param, category, "TakeImage", "CamZoomOffsetY", false);
				EnDisableItem(false, param, category, "TakeImage", "CamZoomSize", false);				
            }

            if(!document.getElementById("TakeImage_CamAutoSharpness_value1").selectedIndex) {
				EnDisableItem(false, param, category, "TakeImage", "CamSharpness", false);				
            }
            else {
				EnDisableItem(true, param, category, "TakeImage", "CamSharpness", false);				
            }			
        }

        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...";
			
			EnDisableItem(true, param, category, "TakeImage", "CamBrightness", false);
			EnDisableItem(true, param, category, "TakeImage", "CamSaturation", false);
			EnDisableItem(true, param, category, "TakeImage", "CamContrast", false);

			EnDisableItem(true, param, category, "TakeImage", "CamAutoSharpness", false);
			
            if(!document.getElementById("TakeImage_CamAutoSharpness_value1").selectedIndex) {
				EnDisableItem(false, param, category, "TakeImage", "CamSharpness", false);				
            }
            else {
				EnDisableItem(true, param, category, "TakeImage", "CamSharpness", false);				
            }			

			EnDisableItem(true, param, category, "TakeImage", "CamZoom", false);
			
            if(!document.getElementById("TakeImage_CamZoom_value1").selectedIndex) {
				EnDisableItem(true, param, category, "TakeImage", "CamZoomOffsetX", false);
				EnDisableItem(true, param, category, "TakeImage", "CamZoomOffsetY", false);
				EnDisableItem(true, param, category, "TakeImage", "CamZoomSize", false);				
            }
            else {
				EnDisableItem(false, param, category, "TakeImage", "CamZoomOffsetX", false);
				EnDisableItem(false, param, category, "TakeImage", "CamZoomOffsetY", false);
				EnDisableItem(false, param, category, "TakeImage", "CamZoomSize", false);				
            }

			EnDisableItem(true, param, category, "TakeImage", "CamAec", false);				
			EnDisableItem(true, param, category, "TakeImage", "CamAec2", false);
			EnDisableItem(true, param, category, "TakeImage", "CamAeLevel", false);
				
			EnDisableItem(true, param, category, "TakeImage", "CamHmirror", false);
			EnDisableItem(true, param, category, "TakeImage", "CamVflip", false);
				
			EnDisableItem(true, param, category, "TakeImage", "CamSpecialEffect", false);
				
			EnDisableItem(true, param, category, "TakeImage", "LEDIntensity", false);			

            document.getElementById("ExpertModus_enabled").disabled = false;

            document.getElementById("FineRotate_value1").disabled = false;
			document.getElementById("FineRotate_text").style.color = "black";
            document.getElementById("PreRotateAngle_value1").disabled = false;
			document.getElementById("PreRotateAngle_text").style.color = "black";

            document.getElementById("showcurrentreference").disabled = false;
            document.getElementById("startreference").disabled = true;
            document.getElementById("updatereferenceimage").disabled = false;
            document.getElementById("savereferenceimage").disabled = false;

            var _aec_temp = document.getElementById("TakeImage_CamAec_value1").selectedIndex;
            if (_aec_temp == '0') {
                _aec_temp = '1';
            }
            else {
                _aec_temp = '0';
            }

            var _aec2_temp = document.getElementById("TakeImage_CamAec2_value1").selectedIndex;
            if (_aec2_temp == '0') {
                _aec2_temp = '1';
            }
            else {
                _aec2_temp = '0';
            }
			
            var _mirror_temp = document.getElementById("TakeImage_CamHmirror_value1").selectedIndex;
            if (_mirror_temp == '0') {
                _mirror_temp = '1';
            }
            else {
                _mirror_temp = '0';
            }
	
            var _flip_temp = document.getElementById("TakeImage_CamVflip_value1").selectedIndex;
            if (_flip_temp == '0') {
                _flip_temp = '1';
            }
            else {
                _flip_temp = '0';
            }		
			
            var _zoom_temp = document.getElementById("TakeImage_CamZoom_value1").selectedIndex;
            if (_zoom_temp == '0') {
                _zoom_temp = '1';
            }
            else {
                _zoom_temp = '0';
            }			
			
            var _ashp_temp = document.getElementById("TakeImage_CamAutoSharpness_value1").value;
            if (_ashp_temp == '0') {
                _ashp_temp = '1';
            }
            else {
                _ashp_temp = '0';
            }
			
            var _zoomx_temp = document.getElementById("TakeImage_CamZoomOffsetX_value1").value;
            var _zoomy_temp = document.getElementById("TakeImage_CamZoomOffsetY_value1").value;
            var _zooms_temp = document.getElementById("TakeImage_CamZoomSize_value1").value;
			
            var _ledi_temp = document.getElementById("TakeImage_LEDIntensity_value1").value;			
                
            var _bri_temp = document.getElementById("TakeImage_CamBrightness_value1").value;
            var _con_temp = document.getElementById("TakeImage_CamContrast_value1").value;
            var _sat_temp = document.getElementById("TakeImage_CamSaturation_value1").value;
            var _shp_temp = document.getElementById("TakeImage_CamSharpness_value1").value;

            var _ael_temp = document.getElementById("TakeImage_CamAeLevel_value1").value;
            var _effect_temp = document.getElementById("TakeImage_CamSpecialEffect_value1").selectedIndex;
			
            var url = domainname + "/editflow?task=test_take";
			
            if (domainname.length > 0) {
                url = url + "&host=" + domainname;
            }
			
            url = url + "&bri=" + _bri_temp + "&con=" + _con_temp + "&sat=" + _sat_temp + "&shp=" + _shp_temp;
            url = url + "&ashp=" + _ashp_temp + "&ledi=" + _ledi_temp + "&spe=" + _effect_temp + "&zoom=" + _zoom_temp;
                
            if (_zoom_temp != '0') {
				url = url + "&zooms=" + _zooms_temp + "&zoomx=" + _zoomx_temp + "&zoomy=" + _zoomy_temp;
            }
            else {
                url = url + "&zooms=0" + "&zoomx=0" + "&zoomy=0";
            }		    
                    
            url = url + "&aec=" + _aec_temp + "&ael=" + _ael_temp + "&aec2=" + _aec2_temp;
            url = url + "&mirror=" + _mirror_temp + "&flip=" + _flip_temp;			

            var durchlaufe = 0;

            function sleep(ms) {
                return new Promise(resolve => setTimeout(resolve, ms));
            }

            async function task() {
                while (true) {
                    var xhttp = new XMLHttpRequest();
					
                    if (durchlaufe > 10) {
						document.getElementById("overlay").style.display = "none";
                        firework.launch('Image capture aborted, timeout!', 'danger', 5000);
                        return;
                    }					

                    try {
                        xhttp.open("GET", url, false);
                        xhttp.send();
                    } catch (error){}				
            
                    if (xhttp.responseText != "DeviceIsBusy") {
                        var _url = domainname + "/img_tmp/raw.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1);						
                        loadCanvas(_url, true);
                        isActReference = false;
						
                        document.getElementById("overlay").style.display = "none";
                        firework.launch('Image capture completed, please wait until it loads...', 'success', 5000);

                        return;
                    }
                    else {
                        // Get status
                        var _xhttp = new XMLHttpRequest();
						durchlaufe = durchlaufe + 1;
						
                        try {
                            _xhttp.open("GET", domainname + "/statusflow", false);
                            _xhttp.send();
                        }
                        catch (error){}

                        document.getElementById("overlaytext").innerHTML = "Device is busy, plase waiting...<br><br>Current step: " + _xhttp.responseText;
                        console.log("Device is busy, waiting 5s then checking again...");
                        await sleep(2000);
                    }
                }
            }

            setTimeout(function() { 
                // Delay so the overlay gets shown
                task();
            }, 1);
        }

        function camSettingsSet(){
            document.getElementById("overlay").style.display = "block";
            document.getElementById("overlaytext").innerHTML = "Save Cam Settings...";			

            var _aec_temp = document.getElementById("TakeImage_CamAec_value1").selectedIndex;
            if (_aec_temp == '0') {
                _aec_temp = '1';
            }
            else {
                _aec_temp = '0';
            }

            var _aec2_temp = document.getElementById("TakeImage_CamAec2_value1").selectedIndex;
            if (_aec2_temp == '0') {
                _aec2_temp = '1';
            }
            else {
                _aec2_temp = '0';
            }
			
            var _mirror_temp = document.getElementById("TakeImage_CamHmirror_value1").selectedIndex;
            if (_mirror_temp == '0') {
                _mirror_temp = '1';
            }
            else {
                _mirror_temp = '0';
            }
	
            var _flip_temp = document.getElementById("TakeImage_CamVflip_value1").selectedIndex;
            if (_flip_temp == '0') {
                _flip_temp = '1';
            }
            else {
                _flip_temp = '0';
            }		
			
            var _zoom_temp = document.getElementById("TakeImage_CamZoom_value1").selectedIndex;
            if (_zoom_temp == '0') {
                _zoom_temp = '1';
            }
            else {
                _zoom_temp = '0';
            }			

            var _ashp_temp = document.getElementById("TakeImage_CamAutoSharpness_value1").value;
            if (_ashp_temp == '0') {
                _ashp_temp = '1';
            }
            else {
                _ashp_temp = '0';
            }

            var _zoomx_temp = document.getElementById("TakeImage_CamZoomOffsetX_value1").value;
            var _zoomy_temp = document.getElementById("TakeImage_CamZoomOffsetY_value1").value;
            var _zooms_temp = document.getElementById("TakeImage_CamZoomSize_value1").value;
			
            var _ledi_temp = document.getElementById("TakeImage_LEDIntensity_value1").value;
                
            var _bri_temp = document.getElementById("TakeImage_CamBrightness_value1").value;
            var _con_temp = document.getElementById("TakeImage_CamContrast_value1").value;
            var _sat_temp = document.getElementById("TakeImage_CamSaturation_value1").value;
            var _shp_temp = document.getElementById("TakeImage_CamSharpness_value1").value;

            var _ael_temp = document.getElementById("TakeImage_CamAeLevel_value1").value;
            var _effect_temp = document.getElementById("TakeImage_CamSpecialEffect_value1").selectedIndex;

            var url = domainname + "/editflow?task=cam_settings";

            if (domainname.length > 0) {
                url = url + "&host=" + domainname;
            }

            url = url + "&bri=" + _bri_temp + "&con=" + _con_temp + "&sat=" + _sat_temp + "&shp=" + _shp_temp;
            url = url + "&ashp=" + _ashp_temp + "&ledi=" + _ledi_temp + "&spe=" + _effect_temp + "&zoom=" + _zoom_temp;

            if (_zoom_temp != '0') {
				url = url + "&zooms=" + _zooms_temp + "&zoomx=" + _zoomx_temp + "&zoomy=" + _zoomy_temp;
            }
            else {
                url = url + "&zooms=0" + "&zoomx=0" + "&zoomy=0";
            }		    

            url = url + "&aec=" + _aec_temp + "&ael=" + _ael_temp + "&aec2=" + _aec2_temp;
            url = url + "&mirror=" + _mirror_temp + "&flip=" + _flip_temp;			

            var durchlaufe = 0;

            function sleep(ms) {
                return new Promise(resolve => setTimeout(resolve, ms));
            }

            async function task() {
                while (true) {
                    var xhttp = new XMLHttpRequest();
					
                    if (durchlaufe > 10) {
						document.getElementById("overlay").style.display = "none";
                        firework.launch('Save Cam Settings aborted, timeout!', 'danger', 5000);
                        return;
                    }					

                    try {
                        xhttp.open("GET", url, false);
                        xhttp.send();
                    } catch (error){}				
            
                    if (xhttp.responseText == "CamSettingsSet") {
						document.getElementById("overlay").style.display = "none";
                        firework.launch('Cam Settings saved', 'success', 2000);
                        return;
                    }
                    else {
                        // Get status
                        var _xhttp = new XMLHttpRequest();
						durchlaufe = durchlaufe + 1;
						
                        try {
                            _xhttp.open("GET", domainname + "/statusflow", false);
                            _xhttp.send();
                        }
                        catch (error){}

                        document.getElementById("overlaytext").innerHTML = "Device is busy, plase waiting...<br><br>Current step: " + _xhttp.responseText;
                        console.log("Device is busy, waiting 2s then checking again...");
                        await sleep(2000);
                    }
                }
            }

            setTimeout(function() { 
                // Delay so the overlay gets shown
                task();
            }, 1);
        }
		
        function showReference(){
            url = domainname + "/fileserver/config/reference.jpg" + "?session=" + Math.floor((Math.random() * 1000000) + 1);		
            loadCanvas(url, false);
            isActReference = true;			
		
            var _rotate_temp = param["Alignment"]["InitialRotate"].value1;

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

            document.getElementById("FineRotate_value1").value = (Number(_rotate_temp) - Number(document.getElementById("PreRotateAngle_value1").value)).toFixed(1);

			WriteParameter(param, category, "TakeImage", "CamBrightness", false, true);
			WriteParameter(param, category, "TakeImage", "CamContrast", false, true);
			WriteParameter(param, category, "TakeImage", "CamSaturation", false, true);
			WriteParameter(param, category, "TakeImage", "CamSharpness", false, true);
			WriteParameter(param, category, "TakeImage", "CamAutoSharpness", false);

			WriteParameter(param, category, "TakeImage", "CamZoom", false);
			WriteParameter(param, category, "TakeImage", "CamZoomOffsetX", false);
			WriteParameter(param, category, "TakeImage", "CamZoomOffsetY", false);
			WriteParameter(param, category, "TakeImage", "CamZoomSize", false);			

			WriteParameter(param, category, "TakeImage", "CamAec", false);	
			WriteParameter(param, category, "TakeImage", "CamAec2", false);
			WriteParameter(param, category, "TakeImage", "CamAeLevel", false, true);
			
			WriteParameter(param, category, "TakeImage", "CamHmirror", false);
			WriteParameter(param, category, "TakeImage", "CamVflip", false);
			
			WriteParameter(param, category, "TakeImage", "CamSpecialEffect", false);
			
			WriteParameter(param, category, "TakeImage", "LEDIntensity", false);

			EnDisableItem(false, param, category, "TakeImage", "CamBrightness", false);
			EnDisableItem(false, param, category, "TakeImage", "CamSaturation", false);
			EnDisableItem(false, param, category, "TakeImage", "CamContrast", false);
			EnDisableItem(false, param, category, "TakeImage", "CamSharpness", false);
			EnDisableItem(false, param, category, "TakeImage", "CamAutoSharpness", false);

			EnDisableItem(false, param, category, "TakeImage", "CamZoom", false);
			EnDisableItem(false, param, category, "TakeImage", "CamZoomOffsetX", false);
			EnDisableItem(false, param, category, "TakeImage", "CamZoomOffsetY", false);
			EnDisableItem(false, param, category, "TakeImage", "CamZoomSize", false);			

			EnDisableItem(false, param, category, "TakeImage", "CamAec", false);				
			EnDisableItem(false, param, category, "TakeImage", "CamAec2", false);
			EnDisableItem(false, param, category, "TakeImage", "CamAeLevel", false);
				
			EnDisableItem(false, param, category, "TakeImage", "CamHmirror", false);
			EnDisableItem(false, param, category, "TakeImage", "CamVflip", false);
				
			EnDisableItem(false, param, category, "TakeImage", "CamSpecialEffect", false);
				
			EnDisableItem(false, param, category, "TakeImage", "LEDIntensity", false);			
			
            document.getElementById("ExpertModus_enabled").disabled = true;
			
            document.getElementById("FineRotate_value1").disabled = true;
			document.getElementById("FineRotate_text").style.color = "rgb(122, 122, 122)";
            document.getElementById("PreRotateAngle_value1").disabled = true;
			document.getElementById("PreRotateAngle_text").style.color = "rgb(122, 122, 122)"; 
			
            document.getElementById("savereferenceimage").disabled = true;
            document.getElementById("updatereferenceimage").disabled = true;
            document.getElementById("showcurrentreference").disabled = true;
            document.getElementById("startreference").disabled = false;                                  
        }

        function SaveReference(){
            param["Alignment"]["InitialRotate"].value1 = (Number(document.getElementById("PreRotateAngle_value1").value) + 
                                                            Number(document.getElementById("FineRotate_value1").value)).toFixed(1);

			ReadParameter(param, "TakeImage", "CamBrightness", false);
			ReadParameter(param, "TakeImage", "CamContrast", false);
			ReadParameter(param, "TakeImage", "CamSaturation", false);
			ReadParameter(param, "TakeImage", "CamSharpness", false);
			ReadParameter(param, "TakeImage", "CamAutoSharpness", false);

			ReadParameter(param, "TakeImage", "CamZoom", false);
			ReadParameter(param, "TakeImage", "CamZoomOffsetX", false);
			ReadParameter(param, "TakeImage", "CamZoomOffsetY", false);
			ReadParameter(param, "TakeImage", "CamZoomSize", false);			

			ReadParameter(param, "TakeImage", "CamAec", false);	
			ReadParameter(param, "TakeImage", "CamAec2", false);
			ReadParameter(param, "TakeImage", "CamAeLevel", false);
			
			ReadParameter(param, "TakeImage", "CamHmirror", false);
			ReadParameter(param, "TakeImage", "CamVflip", false);
			
			ReadParameter(param, "TakeImage", "CamSpecialEffect", false);
			
			ReadParameter(param, "TakeImage", "LEDIntensity", false);			

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

            WriteConfigININew();
            SaveConfigToServer(domainname);    

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

        function init() {
            openDescription();		
	
            if (!loadConfig(domainname)) {
				firework.launch('Configuration could not be loaded! Please reload the page!', 'danger', 30000);
				return;
            }		
			
            param = getCamConfig();
			category = getConfigCategory();
			
			canvas.addEventListener('mousemove', mouseMove, false);			

            UpdateExpertModus();
			UpdateTooltipModus();
            showReference();
        }

        function loadCanvas(dataURL, grid = false) {
            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 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 drawRotated(_grid = true) {
            var canvas = document.getElementById('canvas');
            var context = canvas.getContext('2d');		
		
            var _finerot = parseFloat(document.getElementById("FineRotate_value1").value);
            var _prerot = parseFloat(document.getElementById("PreRotateAngle_value1").value);
			
            if (_finerot == 1) {
                _prerot+=1
                _finerot = 0
            }
			
            if (_finerot == -1) {
                _prerot-=1
                _finerot = 0
            }
			
            degrees = _finerot + _prerot;
            document.getElementById("FineRotate_value1").value =  _finerot;
            document.getElementById("PreRotateAngle_value1").value =  _prerot;
			
            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 {
                context.translate(canvas.width/2,canvas.height/2);
                context.rotate(degrees*Math.PI/180);
				
                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;
            }
        }
		
		function UpdateTooltipModus() {
			var _style_pur = 'none';
			var _hidden = true;

			if (param["System"]["Tooltip"].value1 == 'true') {
				_style_pur = '';
				_hidden = false;
			}

			const tooltip = document.querySelectorAll(".tooltip");
	
			for (var i = 0; i < tooltip.length; i++) {
				tooltip[i].style.display = _style_pur;
			}
		}		

        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 InvertEnableItem(_cat, _param) {
			_zw = _cat + "_" + _param + "_enabled";
			_isOn = document.getElementById(_zw).checked;

			_color = "rgb(122, 122, 122)";
	
			if (_isOn) {
				_color = "black";
			}

			_zw = _cat + "_" + _param + "_text";
			document.getElementById(_zw).disabled = !_isOn;
			document.getElementById(_zw).style.color = _color;

			setEnabled(_cat + "_" + _param, _isOn);

			for (var j = 1; j <= param[_cat][_param]["anzParam"]; ++j) {
				document.getElementById(_cat+"_"+_param+"_value"+j).disabled = !_isOn;	
				document.getElementById(_cat+"_"+_param+"_value"+j).style.color = _color;
			}
		}

		function setEnabled(className, enabled) {
			_color = "rgb(122, 122, 122)";
	
			if (enabled) {
				_color = "black";
			}

			let elements = document.getElementsByClassName(className);
	
			for (i = 0; i < elements.length; i++) {
				if (enabled) {
					elements[i].classList.remove("disabled");
				} 
				else {
					elements[i].classList.add("disabled");
				}

				let inputs = elements[i].getElementsByTagName("input");
		
				for (j = 0; j < inputs.length; j++) {
					if (inputs[j].id.endsWith("_enabled")) {
						continue;
					}

					inputs[j].style.color = _color;
			
					if (enabled) {
						inputs[j].removeAttribute("disabled");
					} 
					else {
						inputs[j].setAttribute("disabled", "disabled");
					}
				}
			}
		}

		function setVisible(className, visible) {
			let elements = document.getElementsByClassName(className);
	
			for (i = 0; i < elements.length; i++) {
				if (visible) {
					elements[i].classList.remove("hidden");
				} 
				else {
					elements[i].classList.add("hidden");
				}
			}
		}

		function EnDisableItem(_status, _param, _category, _cat, _name, _optional, _number = -1) {
			//_status = _category[_cat]["enabled"];

			_color = "rgb(122, 122, 122)";
	
			if (_status) {
				_color = "black";
			}

			if (_optional) {
				document.getElementById(_cat+"_"+_name+"_enabled").disabled = !_status;
				document.getElementById(_cat+"_"+_name+"_enabled").style.color = _color;	
			}

			if (_number == -1) {
				if (!_param[_cat][_name]["enabled"]) {
					_status = false;
					_color = "rgb(122, 122, 122)";
				}
			}
			else {
				if (!NUMBERS[_number][_cat][_name]["enabled"]) {
					_status = false;
					_color = "rgb(122, 122, 122)";
				}
			}

			document.getElementById(_cat+"_"+_name+"_text").disabled = !_status;
			document.getElementById(_cat+"_"+_name+"_text").style.color = _color;

			setEnabled(_cat+"_"+_name, _status);

			for (var j = 1; j <= _param[_cat][_name]["anzParam"]; ++j) {
				document.getElementById(_cat+"_"+_name+"_value"+j).disabled = !_status;	
				document.getElementById(_cat+"_"+_name+"_value"+j).style.color = _color;	
			}
		}

		function ReadParameter(_param, _cat, _name, _optional, _number = -1) {
			if (_number > -1) {
				if (_cat == "Digits") {
					_cat = "digit";
				}
	    
				if (_cat == "Analog") {
					_cat = "analog";
				}

				if ((NUMBERS[_number] == undefined) || (NUMBERS[_number][_cat] == undefined) ||  (NUMBERS[_number][_cat][_name] == undefined)) {
					return;
				}

				if (_optional) {
					NUMBERS[_number][_cat][_name]["enabled"] = document.getElementById(_cat+"_"+_name+"_enabled").checked;			
				}

				for (var j = 1; j <= _param[_cat][_name]["anzParam"]; ++j) {
					let element = document.getElementById(_cat+"_"+_name+"_value"+j);
					
					if (element.tagName.toLowerCase() == "select") {
						NUMBERS[_number][_cat][_name]["value"+j] = element.selectedIndex > -1 ? element.options[element.selectedIndex].value : "";
					}
					else if ((element.getAttribute("type") != null) && (element.getAttribute("type").toLowerCase() == "checkbox")) {
						NUMBERS[_number][_cat][_name]["value"+j] = element.checked;
					}
					else {
						if ((NUMBERS[_number][_cat][_name].checkRegExList != null) && (NUMBERS[_number][_cat][_name].checkRegExList[j-1] != null)) {
							if (!element.value.match(NUMBERS[_cat][_name].checkRegExList[j-1])) {
								element.classList.add("invalid-input");
							} 
							else {
								element.classList.remove("invalid-input");
							}
						}
						NUMBERS[_number][_cat][_name]["value"+j] = element.value;
					}
				}
			}
			else {
				if (_optional) {
					_param[_cat][_name]["enabled"] = document.getElementById(_cat+"_"+_name+"_enabled").checked;			
				}

				for (var j = 1; j <= _param[_cat][_name]["anzParam"]; ++j) {
					let element = document.getElementById(_cat+"_"+_name+"_value"+j);
					
					if (element.tagName.toLowerCase() == "select") {
						_param[_cat][_name]["value"+j] = element.selectedIndex > -1 ? element.options[element.selectedIndex].value : "";
					}
					else if ((element.getAttribute("type") != null) && (element.getAttribute("type").toLowerCase() == "checkbox")) {
						_param[_cat][_name]["value"+j] = element.checked;
					}
					else {
						if ((_param[_cat][_name].checkRegExList != null) && (_param[_cat][_name].checkRegExList[j-1] != null)) {
							if (!element.value.match(_param[_cat][_name].checkRegExList[j-1])) {
								element.classList.add("invalid-input");
							} 
							else {
								element.classList.remove("invalid-input");
							}
						}
						_param[_cat][_name]["value"+j] = element.value;
					}
				}		
			}
		}

		function WriteParameter(_param, _category, _cat, _name, _optional, _outval = false, _number = -1) {
			let anzpara;
			try {
				anzpara = _param[_cat][_name].anzParam;	
			}
			catch (error) {
				firework.launch("Parameter '" + _name + "' in der Kategorie '" + _cat + "' ist unbekannt!", 'danger', 30000);
				return;
			}

			if (_number > -1) {
				if ((NUMBERS[_number] == undefined) || (NUMBERS[_number][_cat] == undefined) ||  (NUMBERS[_number][_cat][_name] == undefined)) {
					return;
				}

				if (_optional) {
					document.getElementById(_cat+"_"+_name+"_enabled").checked = NUMBERS[_number][_cat][_name]["enabled"];
					
					for (var j = 1; j <= anzpara; ++j) {
						document.getElementById(_cat+"_"+_name+"_value"+j).disabled = !NUMBERS[_number][_cat][_name]["enabled"];	
					}		
				}
	    
				document.getElementById(_cat+"_"+_name+"_text").style.color = "black"
				setEnabled(_cat+"_"+_name, true);

				for (var j = 1; j <= anzpara; ++j) {
					let element = document.getElementById(_cat+"_"+_name+"_value"+j);
					
					if (element.tagName.toLowerCase() == "select") {
						var textToFind = NUMBERS[_number][_cat][_name]["value"+j];
						
						if (textToFind == undefined) {
							continue;
						}

						_isFound = false;
						element.selectedIndex = -1;
						
						for (var i = 0; i < element.options.length; i++) {
							if (element.options[i].value.toLowerCase() === textToFind.toLowerCase()) {
								element.selectedIndex = i;
								_isFound = true;
								break;
							}
						}
						
						if (!_isFound) {
							_zw_txt = "Der Wert '" + textToFind + "' des Parameters '" + _name;
							_zw_txt = _zw_txt + "' im Bereich '" + _cat + "' ist ungültig. BITTE VOR DEM SPEICHERN PRÜFEN!";
							firework.launch(_zw_txt, 'warning', 10000);
						}
					}
					else if ((element.getAttribute("type") != null) && (element.getAttribute("type").toLowerCase() == "checkbox")) {
						element.checked = NUMBERS[_number][_cat][_name]["value"+j] == "true";
					}
					else {
						element.value = NUMBERS[_number][_cat][_name]["value"+j];
					}
				}
				
                if (_outval) {
					for (var j = 1; j <= anzpara; ++j) {				
						document.getElementById(_cat+"_"+_name+"_value"+j+"_output").value = document.getElementById(_cat+"_"+_name+"_value"+j).value;
					}
				}				
			}
			else {
				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"
				setEnabled(_cat+"_"+_name, true);

				for (var j = 1; j <= anzpara; ++j) {
					let element = document.getElementById(_cat+"_"+_name+"_value"+j);
					
					if (element.tagName.toLowerCase() == "select") {
						var textToFind = _param[_cat][_name]["value"+j];
						
						if (textToFind == undefined) {
							continue;
						}
                
						_isFound = false;
						element.selectedIndex = -1;
						
						for (var i = 0; i < element.options.length; i++) {
							if (element.options[i].value.toLowerCase() === textToFind.toLowerCase()) {
								element.selectedIndex = i;
								_isFound = true;
								break;
							}
						}
						
						if (!_isFound) {
							_zw_txt = "Der Wert '" + textToFind + "' des Parameters '" + _name;
							_zw_txt = _zw_txt + "' im Bereich '" + _cat + "' ist ungültig. BITTE VOR DEM SPEICHERN PRÜFEN!";
							firework.launch(_zw_txt, 'warning', 10000);
						}

					}
					else if ((element.getAttribute("type") != null) && (element.getAttribute("type").toLowerCase() == "checkbox")) {
						element.checked = _param[_cat][_name]["value"+j] == "true";
					}
					else {
						element.value = _param[_cat][_name]["value"+j];
					}
				}

                if (_outval) {
                    document.getElementById(_cat+"_"+_name+"_value1_output").value = document.getElementById(_cat+"_"+_name+"_value1").value;
				}				
			}

			///////////////// am Ende, falls Kategorie als gesamtes nicht ausgewählt --> deaktivieren
			if (_category[_cat]["enabled"] == false) {
				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: gray;"
				setEnabled(_cat+"_"+_name, false);
			}

			EnDisableItem(_category[_cat]["enabled"], _param, _category, _cat, _name, _optional, _number);
		}

        /* hash #description open the details part of the page */
        function openDescription() {
            if(window.location.hash) {
                var hash = window.location.hash.substring(1);
				
                if(hash == 'description') {
                    document.getElementById("desc_details").open = true;
                }
            }
        }

        init();

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