Enhance ROI pages (#2161)

* Check if the ROIs are equidistant. Only if not, untick the checkbox

* renaming

* Check if the ROIs have same y, dy and dx. If so, tick the sync checkbox

* only allow editing space when box is checked

* fix sync check

* show inner frame on all ROIs

* cleanup

* Check if the ROIs have same dy and dx. If so, tick the sync checkbox

* checkbox position

* renaming

* renaming

* show inner frame and cross hairs on all ROIs

* update ROIs on ticking checkboxes

* show timezone hint

* fix deleting last ROI

* cleanup

---------

Co-authored-by: CaCO3 <caco@ruinelli.ch>

sd-card/html/common.js

@@ -1,7 +1,7 @@
  
 /* The UI can also be run locally, but you have to set the IP of your devide accordingly.
  * And you also might have to disable CORS in your webbrowser! */
-var domainname_for_testing = "192.168.178.62";
+var domainname_for_testing = "192.168.1.153";
 
 
 

sd-card/html/edit_analog.html

@@ -85,9 +85,6 @@ th, td {
             <tr>
                 <class id="Numbers_text" style="color:black;"><b>Number: </b></class>
                 <select id="Numbers_value1" onchange="numberChanged()">
-                    <option value="0" selected>default</option>
-                    <option value="1" >NT</option>
-                    <option value="2" >HT</option>
                 </select>
                 <input class="move" type="submit" id="renameNumber" name="renameNumber" onclick="renameNumber()" value="Rename">  
                 <input class="move" type="submit" id="newNumber" name="newNumber" onclick="newNumber()" value="New">  
@@ -105,8 +102,6 @@ th, td {
 	  <tr>
 		<td>
 			<select id="index" name="index" onchange="ChangeSelection()" tabindex=1>
-			  <option value="0" selected>ROI 0</option>
-			  <option value="1" >ROI 1</option>
             </select>
 		</td>
 		<td>                
@@ -120,16 +115,16 @@ th, td {
 	  <tr>
         <td>x: <input type="number" name="refx" id="refx" step=1 onchange="valuemanualchanged()" tabindex=2></td>	  
 		<td>Δx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchangeddx()" tabindex=4></td>
-		<td><label for="lockAR"> Lock aspect ratio: </label><input type="checkbox" id="lockAR" name="lockAR" value="1" onclick="changelockAR()" checked tabindex=6></td>
+		<td><input type="checkbox" id="lockAspectRatio" name="lockAspectRatio" value="1" onclick="changelockAspectRatio()" checked tabindex=6><label for="lockAspectRatio"> Lock aspect ratio</label></td>
 	  </tr>
 	  <tr>
 		<td>y: <input type="number" name="refy" id="refy" step=1 onchange="valuemanualchanged()" tabindex=3></td>	
 		<td>Δy: <input type="number" name="refdy" id="refdy" step=1 onchange="valuemanualchanged()" tabindex=5></td>
-		<td><label for="lockSizes"> Synchronize Δx and Δy between ROIs</label><input type="checkbox" id="lockSizes" name="lockSizes" value="1" onclick="changelockSizes()" checked tabindex=7></td>
+		<td><input type="checkbox" id="lockSizes" name="lockSizes" value="1" onclick="changelockSizes()" checked tabindex=7><label for="lockSizes"> Synchronize Δx and Δy between ROIs</label></td>
 	  </tr>
       <tr>
         <td colspan="2"></td>
-        <td><label for="CCW"> Counter-Clockwise Rotation: </label><input type="checkbox" id="CCW" name="CCW" value="0" onclick="changeCCW()" unchecked tabindex=8></td>
+        <td><input type="checkbox" id="CCW" name="CCW" value="0" onclick="changeCCW()" unchecked tabindex=8><label for="CCW"> Counter-Clockwise Rotation: </label></td>
       </tr>
 	</table>			 
 </div>	 
@@ -159,8 +154,8 @@ th, td {
             cofcat,
             param,
             enhanceCon = false;
-            lockAR = true;
+            lockAspectRatio = true;
-            lockSizes = true;
+            lockSizes = false;
             domainname = getDomainname();
 
     
@@ -222,6 +217,7 @@ function deleteROI(){
         aktindex = ROIInfo.length - 1;
     }
     UpdateROIs();
+    draw();
 }
 
 function newROI(){
@@ -259,12 +255,13 @@ function moveNext(){
     UpdateROIs();    
 }
 
-function changelockAR(){
+function changelockAspectRatio(){
-    lockAR = document.getElementById("lockAR").checked;
+    lockAspectRatio = document.getElementById("lockAspectRatio").checked;
 }
 
 function changelockSizes(){
     lockSizes = document.getElementById("lockSizes").checked;
+    UpdateROIs(); 
 }
 
 function changeCCW(){
@@ -283,7 +280,7 @@ function changeCCW(){
 
 function ChangeSelection(){
     aktindex = parseInt(document.getElementById("index").value);
-//    lockAR = true;
+//    lockAspectRatio = true;
     UpdateROIs();
 }
 
@@ -317,6 +314,7 @@ function UpdateROIs(_sel){
         document.getElementById("newROI").disabled = false;
         document.getElementById("deleteROI").disabled = true;
         document.getElementById("index").disabled = true;
+        document.getElementById("saveroi").disabled = true;
         document.getElementById("renameROI").disabled = true;
         document.getElementById("moveNext").disabled = true;
         document.getElementById("movePrevious").disabled = true;
@@ -361,7 +359,7 @@ function UpdateROIs(_sel){
         document.getElementById("moveNext").disabled = true;
     }  
     
-    document.getElementById("lockAR").checked = lockAR;
+    document.getElementById("lockAspectRatio").checked = lockAspectRatio;
     document.getElementById("lockSizes").checked = lockSizes;
        
     document.getElementById("refx").value = ROIInfo[aktindex]["x"];
@@ -419,6 +417,29 @@ function UpdateROIs(_sel){
             param = getConfigParameters(); 
             cofcat = getConfigCategory();
             UpdateNUMBERS();
+
+			/* Check if the ROIs have same dy and dx. If so, tick the sync checkbox */
+            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)) { 
+                        all_dx_dy_Identical = false;
+						break;
+                    }
+                }
+			}
+
+            if (all_dx_dy_Identical) {
+                lockSizes = true;
+                console.log("All ROI have the same dX and dY, ticking the sync checkbox!");
+                document.getElementById("lockSizes").checked = lockSizes;
+            }
+            else {
+                console.log("Not all ROI have the same dX and dY, unticking the sync checkbox!");
+            }
+
+
             drawImage();
             draw();
         }
@@ -511,10 +532,16 @@ function drawTextBG(context, txt, x, y, padding) {
         return;
     }
 
+
+    
         var canvas = document.getElementById('canvas');
         var context = canvas.getContext('2d');
         context.drawImage(imageObj, 0, 0);
 
+        if (ROIInfo.length == 0) {
+            return;
+        } 
+
         context.font = "15px Arial";
         context.fillStyle = "red";
         context.textAlign = "center";
@@ -540,7 +567,7 @@ function drawTextBG(context, txt, x, y, padding) {
             {
                 if (_nb != _number)
                 {
-                    lw = 1;
+                    lw = 2;
                     context.lineWidth = lw;
                     context.strokeStyle = "#990000";
                     var x0 = parseInt(ROIInfo[_nb].x) - parseInt(lw/2);
@@ -549,12 +576,24 @@ function drawTextBG(context, txt, x, y, padding) {
                     var dy = parseInt(ROIInfo[_nb].dy) + parseInt(lw);
                     context.strokeRect(x0, y0, dx, dy);
                     drawTextBG(context, ROIInfo[_nb]["name"], x0+dx/2-0.5, y0-13, 5);
+
+                    lw = 1;
+                    var x0 = parseInt(ROIInfo[_nb].x) - parseInt(lw/2);
+                    var y0 = parseInt(ROIInfo[_nb].y) - parseInt(lw/2);
+                    var dx = parseInt(ROIInfo[_nb].dx) + parseInt(lw);
+                    var dy = parseInt(ROIInfo[_nb].dy) + parseInt(lw);
+                    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.moveTo(x0+dx/2, y0);
+                    context.lineTo(x0+dx/2, y0+dy);
+                    context.moveTo(x0, y0+dy/2);
+                    context.lineTo(x0+dx, y0+dy/2);
+                    context.stroke();  
                 }
-
             }
 
-
-
             lw = 4
             context.lineWidth = lw;
             context.strokeStyle = "#FF0000";
@@ -622,7 +661,7 @@ function drawTextBG(context, txt, x, y, padding) {
             zw = getCoords(this)        
 
 
-            if (lockAR) {
+            if (lockAspectRatio) {
                 rect.h = (e.pageY - zw.top) - rect.startY;
                 rect.w = Math.round(rect.h * ROIInfo[aktindex]["ar"]);            }
             else {
@@ -657,7 +696,7 @@ function drawTextBG(context, txt, x, y, padding) {
         if (!drag) {
             rect.w = document.getElementById("refdx").value;
             rect.h = document.getElementById("refdy").value;
-            if (lockAR) {
+            if (lockAspectRatio) {
                 rect.w = Math.round(rect.h * ROIInfo[aktindex]["ar"]);
                 document.getElementById("refdx").value = rect.w;
             }
@@ -672,7 +711,7 @@ function drawTextBG(context, txt, x, y, padding) {
         if (!drag) {
             rect.w = document.getElementById("refdx").value;
             rect.h = document.getElementById("refdy").value;
-            if (lockAR) {
+            if (lockAspectRatio) {
                 rect.h = Math.round(rect.w / ROIInfo[aktindex]["ar"]);
                 document.getElementById("refdy").value = rect.h;
             }

sd-card/html/edit_config_param.html

@@ -1309,6 +1309,7 @@ textarea {
 			</td>
 			<td>
 				<input type="text" id="System_TimeZone_value1">
+				<p>Use <a href="timezones.html" target="_blank">timezones.html</a> to find your correct settings.</p>
 			</td>
 			<td>$TOOLTIP_System_TimeZone</td>
 		</tr>

sd-card/html/edit_digits.html

@@ -81,9 +81,6 @@ th, td {
             <tr>
                 <class id="Numbers_text" style="color:black;"><b>Number:</b> </class>
                 <select id="Numbers_value1" onchange="numberChanged()">
-                    <option value="0" selected>default</option>
-                    <option value="1" >NT</option>
-                    <option value="2" >HT</option>
                 </select>
                 <input class="move" type="submit" id="renameNumber" name="renameNumber" onclick="renameNumber()" value="Rename">  
                 <input class="move" type="submit" id="newNumber" name="newNumber" onclick="newNumber()" value="New">  
@@ -101,8 +98,6 @@ th, td {
 	  <tr>
 		<td>
 			<select id="index" name="index" onchange="ChangeSelection()" tabindex=1>
-			  <option value="0" selected>ROI 0</option>
-			  <option value="1" >ROI 1</option>
 			</select>
 		</td>
 		<td>                
@@ -115,7 +110,7 @@ th, td {
 	  <tr>
         <td>x: <input type="number" name="refx" id="refx" step=1 onchange="valuemanualchanged()" tabindex=2></td>	  
 		<td>Δx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchangeddx()" tabindex=4></td>
-		<td><input type="checkbox" id="lockAR" name="lockAR" value="1" onclick="changelockAR()" checked tabindex=6><label for="lockAR"> Lock aspect ratio </label></td>
+		<td><input type="checkbox" id="lockAspectRatio" name="lockAspectRatio" value="1" onclick="changelockAspectRatio()" checked tabindex=6><label for="lockAspectRatio"> Lock aspect ratio </label></td>
 	  </tr>
 	  <tr>
 		<td>y: <input type="number" name="refy" id="refy" step=1 onchange="valuemanualchanged()" tabindex=3></td>	
@@ -154,8 +149,8 @@ th, td {
             cofcat,
             param,
             enhanceCon = false;
-            lockAR = true;
+            lockAspectRatio = true;
-            lockSizes = true;
+            lockSizes = false;
             lockSpaceEquidistant = true;
             space = 3;
             domainname = getDomainname();
@@ -269,12 +264,14 @@ function moveNext(){
     valuemanualchanged();
 }
 
-function changelockAR(){
+function changelockAspectRatio(){
-    lockAR = document.getElementById("lockAR").checked;
+    lockAspectRatio = document.getElementById("lockAspectRatio").checked;
 }
 
 function changelockSizes(){
     lockSizes = document.getElementById("lockSizes").checked;
+    UpdateROIs(); 
+    valuemanualchangedspace();
 
     if (!lockSizes) {
         firework.launch("For best results it is in most cases advised to keep the y, Δx and Δy identical!", 'warning', 10000);
@@ -283,11 +280,18 @@ function changelockSizes(){
 
 function changeLockSpaceEquidistant(){
     lockSpaceEquidistant = document.getElementById("lockSpaceEquidistant").checked;
+    if (!lockSpaceEquidistant) {
+        document.getElementById("space").disabled = true;
+    }
+    else {
+        document.getElementById("space").disabled = false;
+    }
+    UpdateROIs(); 
 }
 
 function ChangeSelection(){
     aktindex = parseInt(document.getElementById("index").value);
-//    lockAR = true;
+//    lockAspectRatio = true;
     UpdateROIs();
 }
 
@@ -367,10 +371,16 @@ function UpdateROIs(_sel){
         document.getElementById("moveNext").disabled = true;
     }  
     
-    document.getElementById("lockAR").checked = lockAR;
+    document.getElementById("lockAspectRatio").checked = lockAspectRatio;
     document.getElementById("lockSizes").checked = lockSizes;
     document.getElementById("lockSpaceEquidistant").checked = lockSpaceEquidistant;
     document.getElementById("space").value = space;
+    if (!lockSpaceEquidistant) {
+        document.getElementById("space").disabled = true;
+    }
+    else {
+        document.getElementById("space").disabled = false;
+    }
        
     document.getElementById("refx").value = ROIInfo[aktindex]["x"];
     document.getElementById("refy").value = ROIInfo[aktindex]["y"];  
@@ -423,8 +433,53 @@ 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
+				//console.log("0->1: " + distanceROI0_to_ROI1);
+				for (var i = 1; i < (ROIInfo.length - 1); ++i) { // 2nd .. 2nd-last ROI
+					//console.log(i + "->" + i+1 + ": " + (parseInt(ROIInfo[i+1].x) - (parseInt(ROIInfo[i].x) + parseInt(ROIInfo[i].dx))));
+					if (distanceROI0_to_ROI1 != (parseInt(ROIInfo[i+1].x) - (parseInt(ROIInfo[i].x) + parseInt(ROIInfo[i].dx)))) {
+						console.log("Not equidistant, unticking the checkbox!");
+						lockSpaceEquidistant = false;
+    					document.getElementById("lockSpaceEquidistant").checked = lockSpaceEquidistant;
+                        if (!lockSpaceEquidistant) {
+                            document.getElementById("space").disabled = true;
+                        }
+                        else {
+                            document.getElementById("space").disabled = false;
+                        }
+						break;
+					}
+				}
+			}
+			/* 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) ||
+                        parseInt(ROIInfo[i].dx) != parseInt(ROIInfo[0].dx) ||
+                        parseInt(ROIInfo[i].dy) != parseInt(ROIInfo[0].dy)) { 
+                        all_y_dx_dy_Identical = false;
+						break;
+                    }
+                }
+			}
+
+            if (all_y_dx_dy_Identical) {
+                lockSizes = true;
+                console.log("All ROI have the same Y, dX and dY, ticking the sync checkbox!");
+                document.getElementById("lockSizes").checked = lockSizes;
+            }
+            else {
+                console.log("Not all ROI have the same Y, dX and dY, unticking the sync checkbox!");
+            }
+
+            if (ROIInfo.length > 1) {
                 space = ROIInfo[1].x - parseInt(ROIInfo[0].x) - parseInt(ROIInfo[0].dx);
                 document.getElementById("space").value = space;
+            }
 
             drawImage();
             draw();
@@ -558,8 +613,19 @@ function draw() {
                     var dy = parseInt(ROIInfo[_nb].dy) + parseInt(lw);
                     context.strokeRect(x0, y0, dx, dy);
                     drawTextBG(context, ROIInfo[_nb]["name"], x0+dx/2, y0-12, 5);
-                }
 
+                    lw = 1
+                    var x0 = parseInt(ROIInfo[_nb].x) - parseInt(lw/2);
+                    var y0 = parseInt(ROIInfo[_nb].y) - parseInt(lw/2);
+                    var dx = parseInt(ROIInfo[_nb].dx) + parseInt(lw);
+                    var dy = parseInt(ROIInfo[_nb].dy) + parseInt(lw);
+                    context.lineWidth = lw;
+                    context.beginPath();
+                    context.moveTo(x0, y0+dy/2);
+                    context.lineTo(x0+dx, y0+dy/2);
+                    context.stroke();   
+                    context.strokeRect(x0+dx*0.2, y0+dy*0.2, dx*0.6, dy*0.6);
+                }
             }
 
             lw = 4
@@ -635,7 +701,7 @@ function draw() {
                 return;
             }
 
-            if (lockAR) {
+            if (lockAspectRatio) {
                 rect.h = (e.pageY - zw.top) - rect.startY;
                 rect.w = Math.round(rect.h * ROIInfo[aktindex]["ar"]);            }
             else {
@@ -675,7 +741,7 @@ function draw() {
             rect.w = document.getElementById("refdx").value;
             rect.h = document.getElementById("refdy").value;
 
-            if (lockAR) {
+            if (lockAspectRatio) {
                 rect.w = Math.round(rect.h * ROIInfo[aktindex]["ar"]);
                 document.getElementById("refdx").value = rect.w;
             }
@@ -700,7 +766,7 @@ function draw() {
             rect.w = document.getElementById("refdx").value;
             rect.h = document.getElementById("refdy").value;
 
-            if (lockAR) {
+            if (lockAspectRatio) {
                 rect.h = Math.round(rect.w / ROIInfo[aktindex]["ar"]);
                 document.getElementById("refdy").value = rect.h;
             }