Lock sizes and keep X spaces equidistant (#1339)

* keep y, dx and dy identical

* added alert

* .

* add button to make X soaces equidistant

* .

* .

* add checkbox to synchronize dx and dy

sd-card/html/edit_analog.html

@@ -107,7 +107,7 @@ th, td {
 		</td>
 		<td>                
             <input class="button" type="submit" id="renameROI" name="renameROI" onclick="renameROI()" value="Rename">  
-		<td>
+        </td>
 		<td>
 		<input class="move" type="submit" id="moveNext" onclick="moveNext()" value="move Next">
 		<input class="move" type="submit" id="movePrevious" onclick="movePrevious()" value="move Previous">  
@@ -115,20 +115,24 @@ th, td {
 	  </tr>
 	  <tr>
         <td>x: <input type="number" name="refx" id="refx" step=1 onchange="valuemanualchanged()" tabindex=2></td>	  
-		<td>dx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchangeddx()" tabindex=4></td>
+		<td>Δx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchangeddx()" tabindex=4></td>
-		<td rowspan="1"><label for="lockAR"> Lock aspect ratio: </label><input type="checkbox" id="lockAR" name="lockAR" value="1" onclick="changelockAR()" checked tabindex=6></td>
+		<td><label for="lockAR"> Lock aspect ratio: </label><input type="checkbox" id="lockAR" name="lockAR" value="1" onclick="changelockAR()" checked tabindex=6></td>
 	  </tr>
 	  <tr>
 		<td>y: <input type="number" name="refy" id="refy" step=1 onchange="valuemanualchanged()" tabindex=3></td>	
-		<td>dy: <input type="number" name="refdy" id="refdy" step=1 onchange="valuemanualchanged()" tabindex=5></td>
+		<td>Δy: <input type="number" name="refdy" id="refdy" step=1 onchange="valuemanualchanged()" tabindex=5></td>
-		<td rowspan="1"><label for="CCW"> Counter-Clockwise Rotation: </label><input type="checkbox" id="CCW" name="CCW" value="0" onclick="changeCCW()" unchecked tabindex=7></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>
 	  </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>
+      </tr>
 	</table>			 
 </div>	 
 
 	<table>
 	  <tr>
-		<td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save all to Config.ini" tabindex=8></td>
+		<td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save all to Config.ini" tabindex=9></td>
 	  </tr>  
 	  <tr>
                 <td><button class="button" id="reboot" type="button" onclick="doReboot()">Reboot to activate saved config</button></td>
@@ -150,6 +154,7 @@ th, td {
             ROIInfo,
             enhanceCon = false;
             lockAR = true;
+            lockSizes = true;
             basepath = "http://192.168.178.26";
     
 function doReboot() {
@@ -247,6 +252,10 @@ function changelockAR(){
     lockAR = document.getElementById("lockAR").checked;
 }
 
+function changelockSizes(){
+    lockSizes = document.getElementById("lockSizes").checked;
+}
+
 function changeCCW(){
     var sel = document.getElementById("Numbers_value1");
     var _number = sel.options[sel.selectedIndex].text;
@@ -342,6 +351,7 @@ function UpdateROIs(_sel){
     }  
     
     document.getElementById("lockAR").checked = lockAR;
+    document.getElementById("lockSizes").checked = lockSizes;
        
     document.getElementById("refx").value = ROIInfo[aktindex]["x"];
     document.getElementById("refy").value = ROIInfo[aktindex]["y"];  
@@ -480,6 +490,19 @@ function removeNumber(){
         {
             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)
+                    {
+                        ROIInfo[_nb].dy = rect.h;
+                        ROIInfo[_nb].dx = rect.w;
+                    }
+                }
+            }
+
             for (var _nb = 0; _nb < ROIInfo.length; _nb++)
             {
                 if (_nb != _number)

sd-card/html/edit_digits.html

@@ -105,20 +105,26 @@ th, td {
 	  </tr>
 	  <tr>
         <td>x: <input type="number" name="refx" id="refx" step=1 onchange="valuemanualchanged()" tabindex=2></td>	  
-		<td>dx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchangeddx()" tabindex=4></td>
+		<td>Δx: <input type="number" name="refdx" id="refdx" step=1 onchange="valuemanualchangeddx()" tabindex=4></td>
-		<td rowspan="2"><label for="lockAR"> Lock aspect ratio </label><input type="checkbox" id="lockAR" name="lockAR" value="1" onclick="changelockAR()" checked tabindex=6> </td>
+		<td><label for="lockAR"> Lock aspect ratio </label><input type="checkbox" id="lockAR" name="lockAR" value="1" onclick="changelockAR()" checked tabindex=6> </td>
 	  </tr>
 	  <tr>
 		<td>y: <input type="number" name="refy" id="refy" step=1 onchange="valuemanualchanged()" tabindex=3></td>	
-		<td>dy: <input type="number" name="refdy" id="refdy" step=1 onchange="valuemanualchanged()" tabindex=5></td>
+		<td>Δy: <input type="number" name="refdy" id="refdy" step=1 onchange="valuemanualchanged()" tabindex=5></td>
-	  </tr>
+        <td><label for="lockSizes"> Synchronize y, Δx and Δy between ROIs</label><input type="checkbox" id="lockSizes" name="lockSizes" value="1" onclick="changelockSizes()" checked tabindex=7> </td>
+    </tr>
+    <tr>
+      <td colspan="2"></td>
+      <td >
+        <button class="button" type="button" id="makeX_SpaceEquidistant" name="makeX_SpaceEquidistant" onclick="makeX_SpaceEquidistant()">Make all X spaces between ROIs equidistant</botton></td>
+    </tr>
     </table>	
     
 </div>
 			 
 	<table>
 	  <tr>
-		<td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save all to Config.ini" tabindex=7></td>
+		<td><input class="button" type="submit" id="saveroi" name="saveroi" onclick="SaveToConfig()" value="Save all to Config.ini" tabindex=9></td>
 	  </tr> 
 	  <tr>
                 <td><button class="button" id="reboot" type="button" onclick="doReboot()">Reboot to activate saved config</button></td>
@@ -141,7 +147,8 @@ th, td {
             ROIInfo,
             enhanceCon = false;
             lockAR = true;
-            basepath = "http://192.168.178.26";
+            lockSizes = true;
+            basepath = "http://192.168.1.151";
 
     function doReboot() {
         if (confirm("Are you sure you want to reboot? Did you save the config?")) {
@@ -239,6 +246,14 @@ function changelockAR(){
     lockAR = document.getElementById("lockAR").checked;
 }
 
+function changelockSizes(){
+    lockSizes = document.getElementById("lockSizes").checked;
+
+    if (!lockSizes) {
+        alert("For best results it is (in most cases) advised to keep the y, Δx and Δy identical!");
+    }
+}
+
 function ChangeSelection(){
     aktindex = parseInt(document.getElementById("index").value);
 //    lockAR = true;
@@ -322,6 +337,7 @@ function UpdateROIs(_sel){
     }  
     
     document.getElementById("lockAR").checked = lockAR;
+    document.getElementById("lockSizes").checked = lockSizes;
        
     document.getElementById("refx").value = ROIInfo[aktindex]["x"];
     document.getElementById("refy").value = ROIInfo[aktindex]["y"];  
@@ -455,6 +471,20 @@ function draw() {
         {
             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)
+                    {
+                        ROIInfo[_nb].y = rect.startY;
+                        ROIInfo[_nb].dy = rect.h;
+                        ROIInfo[_nb].dx = rect.w;
+                    }
+                }
+            }
+
             for (var _nb = 0; _nb < ROIInfo.length; _nb++)
             {
                 if (_nb != _number)
@@ -492,6 +522,7 @@ function draw() {
             ROIInfo[aktindex]["y"] = rect.startY;       
             ROIInfo[aktindex]["dx"] = rect.w;       
             ROIInfo[aktindex]["dy"] = rect.h;       
+
         }
     }
 
@@ -573,6 +604,7 @@ function draw() {
         if (!drag) {
             rect.w = document.getElementById("refdx").value;
             rect.h = document.getElementById("refdy").value;
+
             if (lockAR) {
                 rect.w = Math.round(rect.h * ROIInfo[aktindex]["ar"]);
                 document.getElementById("refdx").value = rect.w;
@@ -588,6 +620,7 @@ function draw() {
         if (!drag) {
             rect.w = document.getElementById("refdx").value;
             rect.h = document.getElementById("refdy").value;
+
             if (lockAR) {
                 rect.h = Math.round(rect.w / ROIInfo[aktindex]["ar"]);
                 document.getElementById("refdy").value = rect.h;
@@ -599,6 +632,39 @@ function draw() {
         }
     }
 
+    // Make all X spaces equidistant
+    function makeX_SpaceEquidistant() {
+        if (ROIInfo.length == 1) { // Only one number
+            return;
+        }
+
+        var sel = document.getElementById("index");
+        var _number = sel.selectedIndex;
+        var space;
+
+        if (_number == 0) { // First number, use space to next one as reference
+            space = ROIInfo[1].x - parseInt(ROIInfo[0].x) - parseInt(ROIInfo[0].dx);
+
+            for (var _nb = 1; _nb < ROIInfo.length; _nb++) {
+                ROIInfo[_nb].x = parseInt(ROIInfo[_nb-1].x)  + parseInt(ROIInfo[_nb-1].dx) + space;
+            }
+        }
+        else { // In between, use space to previous one as reference
+            space = ROIInfo[_number].x - ROIInfo[_number-1].x -  ROIInfo[_number-1].dx;
+
+
+            for (var _nb = _number - 1; _nb >= 0 ; _nb--) { // left side
+                ROIInfo[_nb].x = parseInt(ROIInfo[_nb+1].x) - parseInt(ROIInfo[_nb].dx) - space;
+            }
+
+            for (var _nb = _number + 1; _nb < ROIInfo.length; _nb++) { // right side
+                ROIInfo[_nb].x = parseInt(ROIInfo[_nb-1].x) + parseInt(ROIInfo[_nb-1].dx) + space;
+            }
+        }
+
+        draw();
+    }
+
     function renameROI(){
         var sel = document.getElementById("Numbers_value1");
         var _number= sel.options[sel.selectedIndex].text;