From 1a8ed080310658b2511b4bbb920665851a7ed5f5 Mon Sep 17 00:00:00 2001
From: michael <Heinrich-Tuning@web.de>
Date: Thu, 15 Feb 2024 23:07:22 +0100
Subject: [PATCH 1/2] Update edit_reference.html

---
 sd-card/html/edit_reference.html | 50 ++++++++++++++++++++------------
 1 file changed, 32 insertions(+), 18 deletions(-)

diff --git a/sd-card/html/edit_reference.html b/sd-card/html/edit_reference.html
index 47c1006a4..4cbea9fa1 100644
--- a/sd-card/html/edit_reference.html
+++ b/sd-card/html/edit_reference.html
@@ -174,12 +174,12 @@ <h2>Reference Image and Camera Settings</h2>
             <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="changeSettingValue()"></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="changeSettingValue()"
                         oninput="(!validity.rangeOverflow||(value=1280)) && (!validity.rangeUnderflow||(value=0)) && 
                             (!validity.stepMismatch||(value=parseInt(this.value)));">
             </td>
@@ -189,7 +189,7 @@ <h2>Reference Image and Camera Settings</h2>
             <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="changeSettingValue()"
                         oninput="(!validity.rangeOverflow||(value=1)) && (!validity.rangeUnderflow||(value=0)) && 
                             (!validity.stepMismatch||(value=parseInt(this.value)));">
             </td>
@@ -197,7 +197,7 @@ <h2>Reference Image and Camera Settings</h2>
             <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="changeSettingValue()"
                         oninput="(!validity.rangeOverflow||(value=960)) && (!validity.rangeUnderflow||(value=0)) && 
                             (!validity.stepMismatch||(value=parseInt(this.value)));">
             </td>
@@ -207,13 +207,13 @@ <h2>Reference Image and Camera Settings</h2>
             <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="changeSettingValueDR()"></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="changeSettingValue()" 
                     oninput="(!validity.rangeOverflow||(value=100)) && (!validity.rangeUnderflow||(value=0)) && 
                         (!validity.stepMismatch||(value=parseInt(this.value)));">
             </td>
@@ -223,13 +223,14 @@ <h2>Reference Image and Camera Settings</h2>
             <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="changeSettingValueDR()"></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="changeSettingValue()" 
+			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 @@ <h2>Reference Image and Camera Settings</h2>
         <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="changeSettingValueDR()"
                         oninput="(!validity.rangeOverflow||(value=360)) && (!validity.rangeUnderflow||(value=-360)) && 
                             (!validity.stepMismatch||(value=parseInt(this.value)));">degree
                 </td>
@@ -246,7 +247,8 @@ <h2>Reference Image and Camera Settings</h2>
                 <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="changeSettingValue()" 
+			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 @@ <h2>Reference Image and Camera Settings</h2>
         <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="changeSettingValueDR()"
                         oninput="(!validity.rangeOverflow||(value=1)) && (!validity.rangeUnderflow||(value=-1)) && 
                             (!validity.stepMismatch||(value=parseInt(this.value)));">degree
             </td>
@@ -263,7 +265,8 @@ <h2>Reference Image and Camera Settings</h2>
                 <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="changeSettingValue()" 
+			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 @@ <h2>Reference Image and Camera Settings</h2>
             <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="changeSettingValue()"></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="changeSettingValue()"></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="changeSettingValueDR()"></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="changeSettingValue()" 
+			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 @@ <h2>Reference Image and Camera Settings</h2>
             <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="changeSettingValue()"></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="changeSettingValue()" 
+			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 @@ <h2>Reference Image and Camera Settings</h2>
             }
         }
 
+        function changeSettingValue() {
+            document.getElementById("savereferenceimage").disabled = true;		
+        }
+
+        function changeSettingValueDR() {
+            document.getElementById("savereferenceimage").disabled = true;
+            drawRotated();
+        }
+
         // Create New Reference, Update Image
         function doTakeReference(){            
             document.getElementById("overlay").style.display = "block";

From 7b0a8932a7d8c97412d3088cd32c62c507c6b771 Mon Sep 17 00:00:00 2001
From: michael <Heinrich-Tuning@web.de>
Date: Fri, 16 Feb 2024 00:00:35 +0100
Subject: [PATCH 2/2] Update edit_reference.html

cameraParameterChanged
cameraParameterChangedDR
---
 sd-card/html/edit_reference.html | 40 ++++++++++++++++----------------
 1 file changed, 20 insertions(+), 20 deletions(-)

diff --git a/sd-card/html/edit_reference.html b/sd-card/html/edit_reference.html
index 4cbea9fa1..84efe305b 100644
--- a/sd-card/html/edit_reference.html
+++ b/sd-card/html/edit_reference.html
@@ -174,12 +174,12 @@ <h2>Reference Image and Camera Settings</h2>
             <td>
                 <label for="zoom" id="labelzoom">Enable zoom: <b>*)</b></label></td>
             <td>
-                <input type="checkbox" id="zoom" name="zoom" value="0" onchange="changeSettingValue()"></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" onchange="changeSettingValue()"
+                <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 @@ <h2>Reference Image and Camera Settings</h2>
             <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" onchange="changeSettingValue()"
+                <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 @@ <h2>Reference Image and Camera Settings</h2>
             <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" onchange="changeSettingValue()"
+                <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 @@ <h2>Reference Image and Camera Settings</h2>
             <td>
                 <label for="mirror" id="labelmirror">Mirror image:</label></td>
             <td>
-                <input type="checkbox" id="mirror" name="mirror" value="1" onchange="changeSettingValueDR()"></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" onchange="changeSettingValue()" 
+                <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,13 @@ <h2>Reference Image and Camera Settings</h2>
             <td>
                 <label for="flip" id="labelflip">Flip image size:</label></td>
             <td>
-                <input type="checkbox" id="flip" name="flip" value="1" onchange="changeSettingValueDR()"></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" onchange="changeSettingValue()" 
+                <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>
@@ -238,7 +238,7 @@ <h2>Reference Image and Camera Settings</h2>
         <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="changeSettingValueDR()"
+                <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>
@@ -247,7 +247,7 @@ <h2>Reference Image and Camera Settings</h2>
                 <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" onchange="changeSettingValue()" 
+                <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>
@@ -256,7 +256,7 @@ <h2>Reference Image and Camera Settings</h2>
         <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="changeSettingValueDR()"
+                <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>
@@ -265,7 +265,7 @@ <h2>Reference Image and Camera Settings</h2>
                 <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" onchange="changeSettingValue()" 
+                <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>
@@ -275,25 +275,25 @@ <h2>Reference Image and Camera Settings</h2>
             <td>
                 <label for="grayscale" id="labelgrayscale">Grayscale: <b>*)</b></label></td>
             <td>
-                <input type="checkbox" id="grayscale" name="grayscale" value="0" onchange="changeSettingValue()"></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" onchange="changeSettingValue()"></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="changeSettingValueDR()"></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" onchange="changeSettingValue()" 
+                <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>
@@ -303,13 +303,13 @@ <h2>Reference Image and Camera Settings</h2>
             <td>
                 <label for="FixedExposure" id="labelFixedExposure">FixedExposure: <b>*)</b></label></td>
             <td>
-                <input type="checkbox" id="FixedExposure" name="FixedExposure" value="0" onchange="changeSettingValue()"></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" onchange="changeSettingValue()" 
+                <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>
@@ -362,11 +362,11 @@ <h2>Reference Image and Camera Settings</h2>
             }
         }
 
-        function changeSettingValue() {
+        function cameraParameterChanged() {
             document.getElementById("savereferenceimage").disabled = true;		
         }
 
-        function changeSettingValueDR() {
+        function cameraParameterChangedDR() {
             document.getElementById("savereferenceimage").disabled = true;
             drawRotated();
         }