Button to hide other red Digit Frames (#2907)

Button to hide other red Digit Frames for easier setup, implements #2680

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) { 
-        function getCoords(elem) { // crossbrowser version
+        // 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) ||
+                if (parseInt(ROIInfo[i].dx) != parseInt(ROIInfo[0].dx) || parseInt(ROIInfo[i].dy) != parseInt(ROIInfo[0].dy)) { 
-                        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)
+                if (zw[i]["name"] == _sel) {
-                index = i
+                   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++)
+                for (var _nb = 0; _nb < ROIInfo.length; _nb++) {
-                {
+                    if (_nb != _number) {
-                    if (_nb != _number)
-                    {
                         ROIInfo[_nb].dy = rect.h;
                         ROIInfo[_nb].dx = rect.w;
                     }
                 }
             }
 
-            for (var _nb = 0; _nb < ROIInfo.length; _nb++)
+            if (document.getElementById("showall").checked) {		
-            {
+                for (var _nb = 0; _nb < ROIInfo.length; _nb++) {
-                if (_nb != _number)
+                    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>

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) { 
-        function getCoords(elem) { // crossbrowser version
+        // 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)
+                if (zw[i]["name"] == _sel) {
-                index = i
+                    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++)
+                for (var _nb = 0; _nb < ROIInfo.length; _nb++) {
-                {
+                    if (_nb != _number) {
-                    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 (document.getElementById("showall").checked) {
-            {
+                for (var _nb = 0; _nb < ROIInfo.length; _nb++) {
-                if (_nb != _number)
+                    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>