Button to hide other red Digit Frames (#2907)

Button to hide other red Digit Frames for easier setup, implements #2680
2025-12-10 13:36:54 +03:00 · 2024-02-15 21:55:01 +01:00
parent 6feae4e239
commit fa5c99b3cb
2 changed files with 985 additions and 966 deletions
--- a/sd-card/html/edit_analog.html
+++ b/sd-card/html/edit_analog.html
@@ -197,6 +197,10 @@
            <td colspan="2"></td>
            <td><input type="checkbox" id="CCW" name="CCW" value="0" onclick="changeCCW()" unchecked tabindex=8><label for="CCW">Counter clockwise rotation (CCW)</label></td>
        </tr>
+        <tr>
+            <td colspan="2"></td>
+            <td><input type="checkbox" id="showall" name="showall" value="1" onclick="draw()" checked tabindex=9><label for="showall">Show all ROIs</label></td>
+        </tr>		
    </table>		 
 </div>

@@ -248,18 +252,16 @@
        }
    }
    
-function EnDisableAnalog() {
+    function EnDisableAnalog() {
        isEnabled = document.getElementById("Category_Analog_enabled").checked;

        $("#div2").attr("disabled", "disabled").off('click');
        var x1=$("#div2").hasClass("disabledDiv");
        
-        if (isEnabled)
-        {
+        if (isEnabled) {
            $("#div2").removeClass("disabledDiv");
        }
-        else
-        {
+        else {
            $("#div2").addClass("disabledDiv");
        }
 		
@@ -268,16 +270,16 @@ function EnDisableAnalog() {
        cofcat["Analog"]["enabled"] = isEnabled;
        document.getElementById("saveroi").disabled = false;
                
-        if (isEnabled)
-        {
+        if (isEnabled) {
            UpdateROIs();
        }
-}
+    }

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

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

-function deleteROI(){
+    function deleteROI() {
        if (!confirm("Delete the selected ROI?")) {
            return; //break out of the function early because prompt was aborted
        }

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

-function newROI() {
+    function newROI() {
        var sel = document.getElementById("Numbers_value1");
        var _number= sel.options[sel.selectedIndex].text;
        sel = document.getElementById("index");
@@ -321,65 +325,70 @@ function newROI() {
            return; //break out of the function early because prompt was aborted
        }

-    if (ROIInfo.length > 0)
+        if (ROIInfo.length > 0) {
            erg = CreateROI(_number, "analog", sel.selectedIndex, _roinew, 15, 30, ROIInfo[aktindex]["dx"], ROIInfo[aktindex]["dy"], ROIInfo[aktindex]["CCW"]=="true");
-    else
+        }
+        else {
            erg = CreateROI(_number, "analog", sel.selectedIndex, _roinew, 15, 30, 30, 30, false);
+        }

-    if (erg != "")
+        if (erg != "") {
            firework.launch(erg, 'danger', 30000);
-    else
+        }
+        else {
            UpdateROIs(_roinew);
-}
+        }
+    }

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

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

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

-function changelockSizes(){
+    function changelockSizes() {
        lockSizes = document.getElementById("lockSizes").checked;
        UpdateROIs(); 
-}
+    }

-function changeCCW(){
+    function changeCCW() {
        var sel = document.getElementById("Numbers_value1");
        var _number = sel.options[sel.selectedIndex].text;

        ROIInfo = getROIInfo("analog", _number);
        aktindex = parseInt(document.getElementById("index").value);

-    if (document.getElementById("CCW").checked)
+        if (document.getElementById("CCW").checked) {
            ROIInfo[aktindex]["CCW"] = "true";
-    else
+        }
+        else {
            ROIInfo[aktindex]["CCW"] = "false";
+        }
 	
        UpdateROIs();
+    }

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

-function SaveToConfig(){
+    function SaveToConfig() {
        if (confirm("Are you sure you want to save the new analog ROI configuration?")) {
            //_zwcat = getConfigCategory();
            cofcat["Analog"]["enabled"] = document.getElementById("Category_Analog_enabled").checked;
@@ -390,11 +399,9 @@ function SaveToConfig(){

            firework.launch('Configuration saved. It will get applied after next reboot', 'success', 5000);
        }
-}
+    }

-
-function ShowMultiplier()
-{
+    function ShowMultiplier() {
        var decimalShift = 0;
        var multiplier;
        var multiplier_decshift;
@@ -406,6 +413,7 @@ function ShowMultiplier()
        var sel = document.getElementById("Numbers_value1");
        var _number= sel.options[sel.selectedIndex].text;
        document.getElementById("decimalShift").value = 0;
+        
        for (var i = 0; i < NumberInfo.length; ++i) {
            if (NumberInfo[i]["name"] == _number) {
                if (NumberInfo[i]["PostProcessing"]["DecimalShift"]["enabled"]) {
@@ -419,11 +427,13 @@ function ShowMultiplier()
            multiplier = fixedDecimals = aktindex + 1;
            multiplier_decshift = fixedDecimals_decshift = multiplier - Number(decimalShift);

-        if (multiplier < 0)
+            if (multiplier < 0) {
                fixedDecimals = 0;
+            }

-        if (multiplier_decshift < 0)
+            if (multiplier_decshift < 0) {
                fixedDecimals_decshift = 0;
+            }

            document.getElementById("multiplier").value="x" + Number(10 ** (-1*multiplier)).toFixed(fixedDecimals);
            document.getElementById("multiplier_decshift").value="x" + Number(10 ** (-1*multiplier_decshift)).toFixed(fixedDecimals_decshift);
@@ -432,8 +442,9 @@ function ShowMultiplier()
            multiplier = ROIInfo.length - 1 - aktindex;
            multiplier_decshift = fixedDecimals_decshift = multiplier + Number(decimalShift);
        
-        if (multiplier_decshift > 0)
+            if (multiplier_decshift > 0) {
                fixedDecimals_decshift = 0;
+            }
        
            if (fixedDecimals_decshift < 0) {
                fixedDecimals_decshift = -1 * fixedDecimals_decshift;
@@ -442,19 +453,18 @@ function ShowMultiplier()
            document.getElementById("multiplier").value="x" + Number(10 ** multiplier).toFixed(0);
            document.getElementById("multiplier_decshift").value="x" + Number(10 ** multiplier_decshift).toFixed(fixedDecimals_decshift);
        }
-}
+    }


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

        ROIInfo = getROIInfo("analog", _number);
-//    _catzw = getConfigCategory();
+        // _catzw = getConfigCategory();

-    if (cofcat["Analog"]["enabled"] == false) 
-    {
+        if (cofcat["Analog"]["enabled"] == false) {
            document.getElementById("Category_Analog_enabled").checked = false;
            EnDisableAnalog();
            firework.launch('Analog ROI processing is disabled. Activate with checkbox if needed', 'warning', 10000);
@@ -474,6 +484,7 @@ function UpdateROIs(_sel){
            document.getElementById("refy").disabled = true;
            document.getElementById("refdy").disabled = true;
            document.getElementById("lockSizes").disabled = true;
+            document.getElementById("showall").disabled = true;    
            document.getElementById("lockAspectRatio").disabled = true;
            document.getElementById("CCW").disabled = true;
            document.getElementById("moveNext").disabled = true;
@@ -481,8 +492,7 @@ function UpdateROIs(_sel){
            document.getElementById("saveroi").disabled = false;
            return;
        }
-    else
-    {
+        else {
            document.getElementById("newROI").disabled = false;
            document.getElementById("deleteROI").disabled = false;
            document.getElementById("renameROI").disabled = false;
@@ -494,6 +504,7 @@ function UpdateROIs(_sel){
            document.getElementById("refy").disabled = false;
            document.getElementById("refdy").disabled = false;
            document.getElementById("lockSizes").disabled = false;
+            document.getElementById("showall").disabled = false;    
            document.getElementById("lockAspectRatio").disabled = false;
            document.getElementById("CCW").disabled = false;
            document.getElementById("saveroi").disabled = false;
@@ -504,8 +515,9 @@ function UpdateROIs(_sel){
            _index.remove(0);
        }

-    if (aktindex > ROIInfo.length)
+        if (aktindex > ROIInfo.length) {
            aktindex = ROIInfo.length-1;
+        }

        for (var i = 0; i < ROIInfo.length; ++i){
            var option = document.createElement("option");
@@ -513,12 +525,13 @@ function UpdateROIs(_sel){
            option.value = i;
            _index.add(option);
            if (typeof _sel !== 'undefined') {
-            if (option.text == _sel)
+                if (option.text == _sel) {
                    aktindex = i;
                }
            }
-    _index.selectedIndex = aktindex; 
+        }
 	
+        _index.selectedIndex = aktindex; 

        document.getElementById("movePrevious").disabled = false;
        if (aktindex == 0){
@@ -546,7 +559,7 @@ function UpdateROIs(_sel){
        rect.w = ROIInfo[aktindex]["dx"];
        rect.h = ROIInfo[aktindex]["dy"];
        draw();
-}
+    }
    
    function loadCanvas(dataURL) {
        var canvas = document.getElementById('canvas');
@@ -562,8 +575,8 @@ function UpdateROIs(_sel){
        imageObj.src = dataURL;
    }
    
-    
-        function getCoords(elem) { // crossbrowser version
+    function getCoords(elem) { 
+        // crossbrowser version
        var box = elem.getBoundingClientRect();
        var body = document.body;
        var docEl = document.documentElement;
@@ -576,16 +589,15 @@ function UpdateROIs(_sel){
        return { top: Math.round(top), left: Math.round(left) };
    }

-
    /* hash #description open the details part of the page */
    function openDescription() {
        if(window.location.hash) {
            var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
-            if(hash == 'description')
+            if(hash == 'description') {
                document.getElementById("desc_details").open = true;
            }
        }
-    
+    }
    
    function init() {
        openDescription();
@@ -604,8 +616,7 @@ function UpdateROIs(_sel){
        var all_dx_dy_Identical = true;
        if (ROIInfo.length > 1) {
            for (var i = 1; i < (ROIInfo.length); ++i) { // 2nd .. last ROI
-                    if (parseInt(ROIInfo[i].dx) != parseInt(ROIInfo[0].dx) ||
-                        parseInt(ROIInfo[i].dy) != parseInt(ROIInfo[0].dy)) { 
+                if (parseInt(ROIInfo[i].dx) != parseInt(ROIInfo[0].dx) || parseInt(ROIInfo[i].dy) != parseInt(ROIInfo[0].dy)) { 
                    all_dx_dy_Identical = false;
                    break;
                }
@@ -634,12 +645,11 @@ function UpdateROIs(_sel){
        context.clearRect(0,0,imageObj.width,imageObj.height);
        context.save();
        context.drawImage(imageObj, 0, 0);
-//            context.restore();
+        // context.restore();
    }  

-function UpdateNUMBERS(_sel){
+    function UpdateNUMBERS(_sel) {
        zw = getNUMBERInfo();
-
        index = 0;

        var _index = document.getElementById("Numbers_value1");
@@ -654,16 +664,17 @@ function UpdateNUMBERS(_sel){
            _index.add(option); 

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

        UpdateROIs();
-}
+    }

-function renameNumber(){
+    function renameNumber() {
        var sel = document.getElementById("Numbers_value1");
        var _delete= sel.options[sel.selectedIndex].text;
        var _numbernew = prompt("Please enter a new name for the selected number sequence", _delete);
@@ -672,42 +683,46 @@ function renameNumber(){
        }

        erg = RenameNUMBER(_delete, _numbernew);
-    if (erg != "")
-        firework.launch(erg, 'danger', 30000);
-    else
-        UpdateNUMBERS(_numbernew);
-}
 	    
-function newNumber(){
+        if (erg != "") {
+            firework.launch(erg, 'danger', 30000);
+        }
+        else {
+            UpdateNUMBERS(_numbernew);
+        }
+    }
+
+    function newNumber() {
        var _numbernew = prompt("Please enter a name for the new number sequence", "name");
        if (_numbernew === null) {
            return; //break out of the function early because prompt was aborted
        }

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

-
-function removeNumber(){
+    function removeNumber() {
        if (confirm("The entire number sequence will be removed (digit + analog parts). " +
                "To remove single ROI of the number sequence, use \"Delete ROI\" instead.\n" +
-                "Do you really want to proceed?")) 
-    {
+                "Do you really want to proceed?")) {
            var sel = document.getElementById("Numbers_value1");
            var _delete= sel.options[sel.selectedIndex].text;
            erg = DeleteNUMBER(_delete);
-        if (erg != "")
+            if (erg != "") {
                firework.launch(erg, 'danger', 30000);
+            }
            UpdateNUMBERS();
        }	    
-}
+    }

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

@@ -717,10 +732,11 @@ function drawTextBG(context, txt, x, y, padding) {

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

    function draw() {
-    if (typeof ROIInfo === 'undefined') { // During init, ROIInfo is not defined yet
+        if (typeof ROIInfo === 'undefined') { 
+            // During init, ROIInfo is not defined yet
            return;
        }
    
@@ -736,27 +752,23 @@ function drawTextBG(context, txt, x, y, padding) {
        context.fillStyle = "red";
        context.textAlign = "center";

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

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

-            for (var _nb = 0; _nb < ROIInfo.length; _nb++)
-            {
-                if (_nb != _number)
-                {
+            if (document.getElementById("showall").checked) {		
+                for (var _nb = 0; _nb < ROIInfo.length; _nb++) {
+                    if (_nb != _number) {
                        lw = 2;
                        context.lineWidth = lw;
                        context.strokeStyle = "#990000";
@@ -766,10 +778,12 @@ function drawTextBG(context, txt, x, y, padding) {
                        var dy = parseInt(ROIInfo[_nb].dy) + parseInt(lw);
                        context.strokeRect(x0, y0, dx, dy);
                    
-                    if (ROIInfo[_nb]["CCW"] != "true")
+                        if (ROIInfo[_nb]["CCW"] != "true") {
                           drawTextBG(context, ROIInfo[_nb]["name"], x0+dx/2-0.5, y0-13, 5);
-                    else
+                        }
+                        else {
                           drawTextBG(context, ROIInfo[_nb]["name"]+" (CCW)", x0+dx/2-0.5, y0-13, 5);
+                        }
                    
                        lw = 1;
                        var x0 = parseInt(ROIInfo[_nb].x) - parseInt(lw/2);
@@ -779,7 +793,7 @@ function drawTextBG(context, txt, x, y, padding) {
                        context.strokeRect(x0, y0, dx, dy); 
                        context.lineWidth = lw;
                        context.beginPath();
-//                    context.arc (x0+dx/2, y0+dy/2, dx/2, 0, 2 * Math.PI);
+                        // context.arc (x0+dx/2, y0+dy/2, dx/2, 0, 2 * Math.PI);
                        context.ellipse(x0+dx/2, y0+dy/2, dx/2, dy/2, 0, 0, 2 * Math.PI);
                        context.moveTo(x0+dx/2, y0);
                        context.lineTo(x0+dx/2, y0+dy);
@@ -788,6 +802,7 @@ function drawTextBG(context, txt, x, y, padding) {
                        context.stroke();  
                    }
                }
+            }

            lw = 4
            context.lineWidth = lw;
@@ -798,14 +813,16 @@ function drawTextBG(context, txt, x, y, padding) {
            var dy = parseInt(rect.h) + parseInt(lw);
            context.strokeRect(x0, y0, dx, dy);

-            if (ROIInfo[aktindex]["CCW"] != "true")
+            if (ROIInfo[aktindex]["CCW"] != "true") {
                drawTextBG(context, ROIInfo[aktindex]["name"], x0+dx/2, y0-11, 5);
-            else
+            }
+            else {
                drawTextBG(context, ROIInfo[aktindex]["name"] + " (CCW)", x0+dx/2, y0-11, 5);
+            }

            context.lineWidth = 1;
            context.beginPath();
-//            context.arc(x0+dx/2, y0+dy/2, dx/2, 0, 2 * Math.PI);
+            // context.arc(x0+dx/2, y0+dy/2, dx/2, 0, 2 * Math.PI);
            context.ellipse(x0+dx/2, y0+dy/2, dx/2, dy/2, 0, 0, 2 * Math.PI);
            context.moveTo(x0+dx/2, y0);
            context.lineTo(x0+dx/2, y0+dy);
@@ -819,7 +836,6 @@ function drawTextBG(context, txt, x, y, padding) {
        }
    }

-
    function mouseDown(e) {
        zw = getCoords(this)
        rect.startX = e.pageX - zw.left;
@@ -849,10 +865,10 @@ function drawTextBG(context, txt, x, y, padding) {
        if (drag) {
            zw = getCoords(this)        

-
            if (lockAspectRatio) {
                rect.h = (e.pageY - zw.top) - rect.startY;
-                rect.w = Math.round(rect.h * ROIInfo[aktindex]["ar"]);            }
+                rect.w = Math.round(rect.h * ROIInfo[aktindex]["ar"]);            
+            }
            else {
                rect.w = (e.pageX - zw.left) - rect.startX;
                rect.h = (e.pageY - zw.top) - rect.startY;
@@ -881,7 +897,7 @@ function drawTextBG(context, txt, x, y, padding) {
        }
    }

-    function valuemanualchanged(){
+    function valuemanualchanged() {
        if (!drag) {
            rect.w = document.getElementById("refdx").value;
            rect.h = document.getElementById("refdy").value;
@@ -897,7 +913,7 @@ function drawTextBG(context, txt, x, y, padding) {
        document.getElementById("saveroi").disabled = false;
    }

-    function valuemanualchangeddx(){
+    function valuemanualchangeddx() {
        if (!drag) {
            rect.w = document.getElementById("refdx").value;
            rect.h = document.getElementById("refdy").value;
@@ -913,8 +929,7 @@ function drawTextBG(context, txt, x, y, padding) {
        document.getElementById("saveroi").disabled = false;
    }

-
-    function renameROI(){
+    function renameROI() {
        var sel = document.getElementById("Numbers_value1");
        var _number= sel.options[sel.selectedIndex].text;
        sel = document.getElementById("index");
@@ -926,23 +941,21 @@ function drawTextBG(context, txt, x, y, padding) {
        }

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

-    function numberChanged()
-    {
+    function numberChanged() {
        aktindex = 0;
        UpdateROIs();
    }    

-
-
    init();

 </script>
-
 </body>
 </html>
--- a/sd-card/html/edit_digits.html
+++ b/sd-card/html/edit_digits.html
@@ -189,6 +189,10 @@
                <label for="lockSpaceEquidistant">Keep equidistance of <input type="number" name="space" id="space" step=1 onchange="valuemanualchangedspace()" tabindex=9> between all ROIs</label>
            </td>
        </tr>
+        <tr>
+            <td colspan="2"></td>
+            <td><input type="checkbox" id="showall" name="showall" value="1" onclick="draw()" checked tabindex=10><label for="showall">Show all ROIs</label></td>
+        </tr>
    </table>	
 </div>

@@ -201,7 +205,7 @@
        </colgroup>
        <tr>
            <td colspan="3" style="vertical-align: bottom;"><b>Reference Image:</b></td>
-            <td><input style="font-weight:bold;" class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save Config" tabindex=10></td>
+            <td><input style="font-weight:bold;" class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save Config" tabindex=11></td>
        </tr> 
        <tr>
            <td colspan="4"><canvas id="canvas" crossorigin></canvas></td>
@@ -241,18 +245,16 @@
        }
    }

-function EnDisableDigits() {
+    function EnDisableDigits() {
        isEnabled = document.getElementById("Category_Digits_enabled").checked;

        $("#div2").attr("disabled", "disabled").off('click');
        var x1=$("#div2").hasClass("disabledDiv");
        
-        if (isEnabled)
-        {
+        if (isEnabled) {
            $("#div2").removeClass("disabledDiv");
        }
-        else
-        {
+        else {
            $("#div2").addClass("disabledDiv");
        }
 		
@@ -261,16 +263,16 @@ function EnDisableDigits() {
        cofcat["Digits"]["enabled"] = isEnabled;
        document.getElementById("saveroi").disabled = false;
                
-        if (isEnabled)
-        {
+        if (isEnabled) {
            UpdateROIs();
        }
-}
+    }

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

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

-function deleteROI(){
+    function deleteROI() {
        if (!confirm("Delete the selected ROI?")) {
            return; //break out of the function early because prompt was aborted
        }

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

-function newROI() {
+    function newROI() {
        var sel = document.getElementById("Numbers_value1");
        var _number= sel.options[sel.selectedIndex].text;
        sel = document.getElementById("index");
@@ -322,11 +324,13 @@ function newROI() {
            erg = CreateROI(_number, "digit", sel.selectedIndex, _roinew, parseInt(ROIInfo[sel.selectedIndex].x) + parseInt(ROIInfo[sel.selectedIndex].dx) + space,
                parseInt(ROIInfo[sel.selectedIndex].y), ROIInfo[aktindex]["dx"], ROIInfo[aktindex]["dy"], 0);
        }
-    else
+        else {
            erg = CreateROI(_number, "digit", sel.selectedIndex, _roinew, 15, 30, 30, 51, 0);
+        }

-    if (erg != "")
+        if (erg != "") {
            firework.launch(erg, 'danger', 30000);
+        }
        else {
            UpdateROIs(_roinew);
            // Shift all ROIs on right side to the right
@@ -335,31 +339,31 @@ function newROI() {
            }
            draw();
        }
-}
+    }

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

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

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

-function changelockSizes(){
+    function changelockSizes() {
        lockSizes = document.getElementById("lockSizes").checked;
        UpdateROIs(); 
        valuemanualchangedspace();
@@ -367,9 +371,9 @@ function changelockSizes(){
        if (!lockSizes) {
            firework.launch("In most cases it's advised to keep the y, Δx and Δy identical!", 'warning', 10000);
        }
-}
+    }

-function changeLockSpaceEquidistant(){
+    function changeLockSpaceEquidistant() {
        lockSpaceEquidistant = document.getElementById("lockSpaceEquidistant").checked;
        if (!lockSpaceEquidistant) {
            document.getElementById("space").disabled = true;
@@ -378,15 +382,15 @@ function changeLockSpaceEquidistant(){
            document.getElementById("space").disabled = false;
        }
        UpdateROIs(); 
-}
+    }

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

-function SaveToConfig(){
+    function SaveToConfig() {
        if (confirm("Are you sure you want to save the new digit ROI configuration?")) {
            // _zwcat = getConfigCategory();
            cofcat["Digits"]["enabled"] = document.getElementById("Category_Digits_enabled").checked;
@@ -397,11 +401,9 @@ function SaveToConfig(){

            firework.launch('Configuration saved. It will get applied after next reboot', 'success', 5000);
        }
-}
+    }

-
-function ShowMultiplier()
-{
+    function ShowMultiplier() {
        var decimalShift = 0;
        var multiplier;
        var multiplier_decshift;
@@ -411,6 +413,7 @@ function ShowMultiplier()
        var sel = document.getElementById("Numbers_value1");
        var _number= sel.options[sel.selectedIndex].text;
        document.getElementById("decimalShift").value = 0;
+        
        for (var i = 0; i < NumberInfo.length; ++i) {
            if (NumberInfo[i]["name"] == _number) {
                if (NumberInfo[i]["PostProcessing"]["DecimalShift"]["enabled"]) {
@@ -423,8 +426,9 @@ function ShowMultiplier()
        multiplier = ROIInfo.length - 1 - aktindex;
        multiplier_decshift = fixedDecimals_decshift = multiplier + Number(decimalShift);

-    if (multiplier_decshift > 0)
+        if (multiplier_decshift > 0) {
            fixedDecimals_decshift = 0;
+        }

        if (fixedDecimals_decshift < 0) {
            fixedDecimals_decshift = -1*fixedDecimals_decshift;
@@ -432,19 +436,17 @@ function ShowMultiplier()
    
        document.getElementById("multiplier").value="x" + Number(10 ** multiplier).toFixed(0);
        document.getElementById("multiplier_decshift").value="x" + Number(10 ** multiplier_decshift).toFixed(fixedDecimals_decshift);
-}
+    }

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

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

-    if (cofcat["Digits"]["enabled"] == false) 
-    {
+        if (cofcat["Digits"]["enabled"] == false)  {
            document.getElementById("Category_Digits_enabled").checked = false;
            EnDisableDigits();
            firework.launch('Digit ROI processing is disabled. Activate with checkbox if needed', 'warning', 10000);
@@ -465,14 +467,14 @@ function UpdateROIs(_sel){
            document.getElementById("refdy").disabled = true;
            document.getElementById("lockSizes").disabled = true;
            document.getElementById("lockAspectRatio").disabled = true;
+            document.getElementById("showall").disabled = true;   
            document.getElementById("lockSpaceEquidistant").disabled = true;
            document.getElementById("moveNext").disabled = true;
            document.getElementById("movePrevious").disabled = true;
            document.getElementById("saveroi").disabled = false;
            return;
        }
-    else
-    {
+        else {
            document.getElementById("newROI").disabled = false;
            document.getElementById("deleteROI").disabled = false;
            document.getElementById("renameROI").disabled = false;
@@ -484,6 +486,7 @@ function UpdateROIs(_sel){
            document.getElementById("refy").disabled = false;
            document.getElementById("refdy").disabled = false;
            document.getElementById("lockSizes").disabled = false;
+            document.getElementById("showall").disabled = false;    
            document.getElementById("lockAspectRatio").disabled = false;
            document.getElementById("lockSpaceEquidistant").disabled = false;
            document.getElementById("saveroi").disabled = false;
@@ -494,21 +497,24 @@ function UpdateROIs(_sel){
            _index.remove(0);
        }

-    if (aktindex > ROIInfo.length)
+        if (aktindex > ROIInfo.length) {
            aktindex = ROIInfo.length-1;
+        }

        for (var i = 0; i < ROIInfo.length; ++i){
            var option = document.createElement("option");
            option.text = ROIInfo[i]["name"];
            option.value = i;
            _index.add(option);
+		
            if (typeof _sel !== 'undefined') {
-            if (option.text == _sel)
+                if (option.text == _sel) {
                    aktindex = i;
                }
            }
-    _index.selectedIndex = aktindex; 
+        }
 	    
+        _index.selectedIndex = aktindex; 

        document.getElementById("movePrevious").disabled = false;
        if (aktindex == 0){
@@ -526,6 +532,7 @@ function UpdateROIs(_sel){
        document.getElementById("lockSizes").checked = lockSizes;
        document.getElementById("lockSpaceEquidistant").checked = lockSpaceEquidistant;
        document.getElementById("space").value = space;
+	    
        if (!lockSpaceEquidistant) {
            document.getElementById("space").disabled = true;
        }
@@ -542,7 +549,7 @@ function UpdateROIs(_sel){
        rect.w = ROIInfo[aktindex]["dx"];
        rect.h = ROIInfo[aktindex]["dy"];
        draw();
-}
+    }
    
    function loadCanvas(dataURL) {
        var canvas = document.getElementById('canvas');
@@ -558,8 +565,8 @@ function UpdateROIs(_sel){
        imageObj.src = dataURL;
    }
    
-    
-        function getCoords(elem) { // crossbrowser version
+    function getCoords(elem) { 
+        // crossbrowser version
        var box = elem.getBoundingClientRect();
        var body = document.body;
        var docEl = document.documentElement;
@@ -572,16 +579,15 @@ function UpdateROIs(_sel){
        return { top: Math.round(top), left: Math.round(left) };
    }

-
    /* hash #description open the details part of the page */
    function openDescription() {
        if(window.location.hash) {
            var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
-            if(hash == 'description')
+            if(hash == 'description') {
                document.getElementById("desc_details").open = true;
            }
        }
-    
+    }
    
    function init() {
        openDescription();
@@ -596,7 +602,6 @@ function UpdateROIs(_sel){
        cofcat = getConfigCategory();
        UpdateNUMBERS();

-
        /* Check if the ROIs are equidistant. Only if not, untick the checkbox */
        if (ROIInfo.length > 1) {
            var distanceROI0_to_ROI1 = parseInt(ROIInfo[1].x) - (parseInt(ROIInfo[0].x) + parseInt(ROIInfo[0].dx)); // Distance between 1st and 2nd ROI
@@ -617,8 +622,10 @@ function UpdateROIs(_sel){
                }
            }
        }
+	    
        /* Check if the ROIs have same y, dy and dx. If so, tick the sync checkbox */
        var all_y_dx_dy_Identical = true;
+	    
        if (ROIInfo.length > 1) {
            for (var i = 1; i < (ROIInfo.length); ++i) { // 2nd .. last ROI
                if (parseInt(ROIInfo[i].y) != parseInt(ROIInfo[0].y) ||
@@ -650,87 +657,91 @@ function UpdateROIs(_sel){
        draw();
    }

-        function drawImage(){
+    function drawImage() {
        var canvas = document.getElementById('canvas');
        var context = canvas.getContext('2d');

        context.clearRect(0,0,imageObj.width,imageObj.height);
        context.save();
        context.drawImage(imageObj, 0, 0);
-//            context.restore();
+        // context.restore();
    }  

-function UpdateNUMBERS(_sel){
+    function UpdateNUMBERS(_sel) {
        zw = getNUMBERInfo();
-
        index = 0;

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

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

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

-function renameNumber(){
+    function renameNumber() {
        var sel = document.getElementById("Numbers_value1");
        var _delete= sel.options[sel.selectedIndex].text;
        var _numbernew = prompt("Please enter a new name for the selected number sequence", _delete);
+	    
        if (_numbernew === null) {
            return; //break out of the function early because prompt was aborted
        }

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

-function newNumber(){
+    function newNumber() {
        var _numbernew = prompt("Please enter a name for the new number sequence", "name");
        if (_numbernew === null) {
            return; //break out of the function early because prompt was aborted
        }

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

-
-function removeNumber(){
+    function removeNumber() {
        if (confirm("The entire number sequence will be removed (digit + analog parts). " +
                "To remove single ROI of the number sequence, use \"Delete ROI\" instead.\n" +
-                "Do you really want to proceed?")) 
-    {
+                "Do you really want to proceed?")) {
            var sel = document.getElementById("Numbers_value1");
            var _delete= sel.options[sel.selectedIndex].text;
            erg = DeleteNUMBER(_delete);
-        if (erg != "")
+            if (erg != "") {
                firework.launch(erg, 'danger', 30000);
+            }
            UpdateNUMBERS();
        }	    
-}
+    }

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

@@ -740,10 +751,9 @@ function drawTextBG(context, txt, x, y, padding) {

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

-
-function draw() {
+    function draw() {
        if (typeof ROIInfo === 'undefined') { // During init, ROIInfo is not defined yet
            return;
        }
@@ -756,17 +766,14 @@ function draw() {
            return;
        }

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

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

-            for (var _nb = 0; _nb < ROIInfo.length; _nb++)
-            {
-                if (_nb != _number)
-                {
+            if (document.getElementById("showall").checked) {
+                for (var _nb = 0; _nb < ROIInfo.length; _nb++) {
+                    if (_nb != _number) {
                        lw = 2;
                        context.lineWidth = lw;
                        context.strokeStyle = "#990000";
@@ -801,6 +807,7 @@ function draw() {
                        context.strokeRect(x0+dx*0.2, y0+dy*0.2, dx*0.6, dy*0.6);
                    }
                }
+            }

            lw = 4
            context.lineWidth = lw;
@@ -814,7 +821,6 @@ function draw() {
            context.lineWidth = 1;
            context.strokeRect(x0+dx*0.2, y0+dy*0.2, dx*0.6, dy*0.6);

-
            context.lineWidth = 2;
            context.beginPath();
            context.moveTo(x0, y0+dy/2);
@@ -864,7 +870,8 @@ function draw() {

            if (lockAspectRatio) {
                rect.h = (e.pageY - zw.top) - rect.startY;
-                rect.w = Math.round(rect.h * ROIInfo[aktindex]["ar"]);            }
+                rect.w = Math.round(rect.h * ROIInfo[aktindex]["ar"]);            
+            }
            else {
                rect.w = (e.pageX - zw.left) - rect.startX;
                rect.h = (e.pageY - zw.top) - rect.startY;
@@ -893,7 +900,7 @@ function draw() {
        }
    }

-    function valuemanualchanged(){
+    function valuemanualchanged() {
        if (ROIInfo.length == 0) {
            return;
        }
@@ -919,7 +926,7 @@ function draw() {
        document.getElementById("saveroi").disabled = false;
    }

-    function valuemanualchangeddx(){
+    function valuemanualchangeddx() {
        if (ROIInfo.length == 0) {
            return;
        }
@@ -945,7 +952,7 @@ function draw() {
        document.getElementById("saveroi").disabled = false;
    }

-    function valuemanualchangedspace(){
+    function valuemanualchangedspace() {
        if (!drag) {
           space = document.getElementById("space").value;
           valuemanualchanged();
@@ -978,7 +985,7 @@ function draw() {
        }
    }

-    function renameROI(){
+    function renameROI() {
        var sel = document.getElementById("Numbers_value1");
        var _number= sel.options[sel.selectedIndex].text;
        sel = document.getElementById("index");
@@ -990,22 +997,21 @@ function draw() {
        }

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

-    function numberChanged()
-    {
+    function numberChanged() {
        aktindex = 0;
        UpdateROIs();
    }    

-
    init();

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