Update edit_reference.html (#2914)

On the ref image page, when a cam setting gets changed, disable the save button to enforce creating a new image first

sd-card/html/edit_reference.html

@@ -174,12 +174,12 @@
             <td>
                 <label for="zoom" id="labelzoom">Enable zoom: <b>*)</b></label></td>
             <td>
-                <input type="checkbox" id="zoom" name="zoom" value="0"></td>
+                <input type="checkbox" id="zoom" name="zoom" value="0" onchange="cameraParameterChanged()"></td>
                 <td>$TOOLTIP_TakeImage_Zoom</td>
             <td>
                 <label for="zoomoffsetx">Zoom offset X: <b>*)</b></label></td>
             <td>
-                <input required type="number" id="zoomoffsetx" name="zoomoffsetx" value="0" min="0" max="1280" step="1"
+                <input required type="number" id="zoomoffsetx" name="zoomoffsetx" value="0" min="0" max="1280" step="1" onchange="cameraParameterChanged()"
                         oninput="(!validity.rangeOverflow||(value=1280)) && (!validity.rangeUnderflow||(value=0)) && 
                             (!validity.stepMismatch||(value=parseInt(this.value)));">
             </td>
@@ -189,7 +189,7 @@
             <td>
                 <label for="zoommode" id="labelzoommode">Zoom mode: <b>*)</b></label></td>
             <td>
-                <input required type="number" id="zoommode" name="zoommode" value="0" min="0" max="1" step="1"
+                <input required type="number" id="zoommode" name="zoommode" value="0" min="0" max="1" step="1" onchange="cameraParameterChanged()"
                         oninput="(!validity.rangeOverflow||(value=1)) && (!validity.rangeUnderflow||(value=0)) && 
                             (!validity.stepMismatch||(value=parseInt(this.value)));">
             </td>
@@ -197,7 +197,7 @@
             <td>
                 <label for="zoomoffsety">Zoom offset Y: <b>*)</b></label></td>
             <td>
-                <input required type="number" id="zoomoffsety" name="zoomoffsety" value="0" min="0" max="960" step="1"
+                <input required type="number" id="zoomoffsety" name="zoomoffsety" value="0" min="0" max="960" step="1" onchange="cameraParameterChanged()"
                         oninput="(!validity.rangeOverflow||(value=960)) && (!validity.rangeUnderflow||(value=0)) && 
                             (!validity.stepMismatch||(value=parseInt(this.value)));">
             </td>
@@ -207,13 +207,13 @@
             <td>
                 <label for="mirror" id="labelmirror">Mirror image:</label></td>
             <td>
-                <input type="checkbox" id="mirror" name="mirror" value="1" onchange="drawRotated()"></td>
+                <input type="checkbox" id="mirror" name="mirror" value="1" onchange="cameraParameterChangedDR()"></td>
                 <td>$TOOLTIP_Alignment_InitialMirror</td>
             <td>
                 <class id="TakeImage_LEDIntensity_text" style="color:black;">LED intensity: <b>*)</b></class>
             </td>
             <td>
-                <input required style="clear: both" type="number" id="TakeImage_LEDIntensity_value1" size="13" value="0"  min="0" max="100" 
+                <input required style="clear: both" type="number" id="TakeImage_LEDIntensity_value1" size="13" value="0"  min="0" max="100" onchange="cameraParameterChanged()" 
                     oninput="(!validity.rangeOverflow||(value=100)) && (!validity.rangeUnderflow||(value=0)) && 
                         (!validity.stepMismatch||(value=parseInt(this.value)));">
             </td>
@@ -223,13 +223,14 @@
             <td>
                 <label for="flip" id="labelflip">Flip image size:</label></td>
             <td>
-                <input type="checkbox" id="flip" name="flip" value="1" onchange="drawRotated()"></td>
+                <input type="checkbox" id="flip" name="flip" value="1" onchange="cameraParameterChangedDR()"></td>
                 <td>$TOOLTIP_Alignment_FlipImageSize</td>
             <td>
                 <class id="TakeImage_Brightness_text" style="color:black;">Brightness: <b>*)</b></class>
             </td>
             <td>
-                <input style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_Brightness_value1" size="13" value=0  min="-2" max="2" oninput="this.nextElementSibling.value = this.value">
+                <input style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_Brightness_value1" size="13" value=0  min="-2" max="2" onchange="cameraParameterChanged()" 
+			oninput="this.nextElementSibling.value = this.value">
                 <output id="TakeImage_Brightness_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
             </td>
             <td>$TOOLTIP_TakeImage_Brightness</td>
@@ -237,7 +238,7 @@
         <tr>
             <td><label for="prerotateangle">Rotation angle:</label></td>
             <td>
-                <input required type="number" id="prerotateangle" name="prerotateangle" value="0" min="-360" max="360" onchange="drawRotated()"
+                <input required type="number" id="prerotateangle" name="prerotateangle" value="0" min="-360" max="360" onchange="cameraParameterChangedDR()"
                         oninput="(!validity.rangeOverflow||(value=360)) && (!validity.rangeUnderflow||(value=-360)) && 
                             (!validity.stepMismatch||(value=parseInt(this.value)));">degree
                 </td>
@@ -246,7 +247,8 @@
                 <class id="TakeImage_Contrast_text" style="color:black;">Contrast: <b>*)</b></class>
             </td>
             <td>
-                <input style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_Contrast_value1" size="13" value=0  min="-2" max="2" oninput="this.nextElementSibling.value = this.value">
+                <input style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_Contrast_value1" size="13" value=0  min="-2" max="2" onchange="cameraParameterChanged()" 
+			oninput="this.nextElementSibling.value = this.value">
                 <output id="TakeImage_Contrast_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
             </td>
             <td>$TOOLTIP_TakeImage_Contrast</td>
@@ -254,7 +256,7 @@
         <tr>
             <td><label for="finerotate">(Fine-tune):</label></td>
             <td>
-                <input required type="number" id="finerotate" name="finerotate" value=0.0 min="-1" max="1" step="0.1" onchange="drawRotated()"
+                <input required type="number" id="finerotate" name="finerotate" value=0.0 min="-1" max="1" step="0.1" onchange="cameraParameterChangedDR()"
                         oninput="(!validity.rangeOverflow||(value=1)) && (!validity.rangeUnderflow||(value=-1)) && 
                             (!validity.stepMismatch||(value=parseInt(this.value)));">degree
             </td>
@@ -263,7 +265,8 @@
                 <class id="TakeImage_Saturation_text" style="color:black;">Saturation: <b>*)</b></class>
             </td>
             <td>
-                <input  style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_Saturation_value1" size="13" value=0 min="-2" max="2" oninput="this.nextElementSibling.value = this.value">
+                <input  style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_Saturation_value1" size="13" value=0 min="-2" max="2" onchange="cameraParameterChanged()" 
+			oninput="this.nextElementSibling.value = this.value">
                 <output id="TakeImage_Saturation_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
             </td>
             <td>$TOOLTIP_TakeImage_Saturation</td>
@@ -272,25 +275,26 @@
             <td>
                 <label for="grayscale" id="labelgrayscale">Grayscale: <b>*)</b></label></td>
             <td>
-                <input type="checkbox" id="grayscale" name="grayscale" value="0"></td>
+                <input type="checkbox" id="grayscale" name="grayscale" value="0" onchange="cameraParameterChanged()"></td>
                 <td>$TOOLTIP_TakeImage_Grayscale</td>
             <td>
                 <label for="aec2" id="labelaec2">Auto Exposure Control 2: <b>*)</b></label></td>
             <td>
-                <input type="checkbox" id="aec2" name="aec2" value="0"></td>
+                <input type="checkbox" id="aec2" name="aec2" value="0" onchange="cameraParameterChanged()"></td>
                 <td>$TOOLTIP_TakeImage_Aec2</td>
         </tr>
         <tr class="expert">
             <td>
                 <label for="negative" id="labelnegative">Negative: <b>*)</b></label></td>
             <td>
-                <input type="checkbox" id="negative" name="negative" value="0" onchange="drawRotated()"></td>
+                <input type="checkbox" id="negative" name="negative" value="0" onchange="cameraParameterChangedDR()"></td>
             <td>$TOOLTIP_TakeImage_Negative</td>
             <td>
                 <class id="TakeImage_AutoExposureLevel_text" style="color:black;">Auto Exposure Level: <b>*)</b></class>
             </td>
             <td>
-                <input  style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_AutoExposureLevel_value1" size="13" value=0 min="-2" max="2" oninput="this.nextElementSibling.value = this.value">
+                <input  style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_AutoExposureLevel_value1" size="13" value=0 min="-2" max="2" onchange="cameraParameterChanged()" 
+			oninput="this.nextElementSibling.value = this.value">
                 <output id="TakeImage_AutoExposureLevel_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
             </td>
             <td>$TOOLTIP_TakeImage_AutoExposureLevel</td>
@@ -299,13 +303,14 @@
             <td>
                 <label for="FixedExposure" id="labelFixedExposure">FixedExposure: <b>*)</b></label></td>
             <td>
-                <input type="checkbox" id="FixedExposure" name="FixedExposure" value="0"></td>
+                <input type="checkbox" id="FixedExposure" name="FixedExposure" value="0" onchange="cameraParameterChanged()"></td>
             <td>$TOOLTIP_TakeImage_FixedExposure</td>
             <td>
                 <class id="TakeImage_Sharpness_text" style="color:black;">Sharpness: <b>*)</b></class>
             </td>
             <td>
-                <input style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_Sharpness_value1" size="13" value=0  min="-4" max="3" oninput="this.nextElementSibling.value = this.value">
+                <input style="clear: both; width: 80%;vertical-align:middle" type="range" id="TakeImage_Sharpness_value1" size="13" value=0  min="-4" max="3" onchange="cameraParameterChanged()" 
+			oninput="this.nextElementSibling.value = this.value">
                 <output id="TakeImage_Sharpness_value1_output" style="vertical-align:middle; min-width:15px; padding-right:5px; text-align:right; float:left">0</output>
             </td>
             <td>$TOOLTIP_TakeImage_Sharpness</td>
@@ -357,6 +362,15 @@
             }
         }
 
+        function cameraParameterChanged() {
+            document.getElementById("savereferenceimage").disabled = true;		
+        }
+
+        function cameraParameterChangedDR() {
+            document.getElementById("savereferenceimage").disabled = true;
+            drawRotated();
+        }
+
         // Create New Reference, Update Image
         function doTakeReference(){            
             document.getElementById("overlay").style.display = "block";