From 5d56a513a8ece482f7223dfb8946d8c464f48170 Mon Sep 17 00:00:00 2001
From: Robert Kaiser <robert@widebook.box.kairo.at>
Date: Sun, 28 Oct 2012 23:15:59 +0100
Subject: [PATCH] add image size and scale entries and make them be syched back
 and forth

---
 index.html           | 34 +++++++++++++++++++----
 js/mandelbrot.js     | 65 +++++++++++++++++++++++++++++++++++++-------
 manifest.appcache    |  1 -
 style/mandelbrot.css | 10 +++++++
 4 files changed, 94 insertions(+), 16 deletions(-)

diff --git a/index.html b/index.html
index 2614c7c..bd31f68 100644
--- a/index.html
+++ b/index.html
@@ -27,13 +27,37 @@
 <fieldset id="settings"><legend>Image data</legend>
 Image coordinates:
 <br>Real:
-Min: <input id="Cr_min" value="-2.0" maxlength="6" size="6" type="text">
-Max: <input id="Cr_max" value="1.0" maxlength="6" size="6" type="text">
+<br>Min:
+<input id="Cr_min" value="-2.0" maxlength="10" size="10" type="text"
+       onchange="checkISValue(this, 'coord'); recalcCoord('Cr', 'scale');">
+Max:
+<input id="Cr_max" value="1.0" maxlength="10" size="10" type="text"
+       onchange="checkISValue(this, 'coord'); recalcCoord('Cr', 'scale');">
+Scale:
+<input id="Cr_scale" value="3.0" maxlength="10" size="10" type="text"
+       onchange="checkISValue(this, 'coord'); recalcCoord('Cr', 'max');">
 <br>Imag:
-Min: <input id="Ci_min" value="-1.5" maxlength="6" size="6" type="text">
-Max: <input id="Ci_max" value="1.5" maxlength="6" size="6" type="text">
+<br>Min:
+<input id="Ci_min" value="-1.5" maxlength="10" size="10" type="text"
+       onchange="checkISValue(this, 'coord'); recalcCoord('Ci', 'scale');">
+Max:
+<input id="Ci_max" value="1.5" maxlength="10" size="10" type="text"
+       onchange="checkISValue(this, 'coord'); recalcCoord('Ci', 'scale');">
+Scale:
+<input id="Ci_scale" value="3.0" maxlength="10" size="10" type="text"
+       onchange="checkISValue(this, 'coord'); recalcCoord('Ci', 'max');">
 
-<br>Maximum of iterations:
+<br><br>Image size:
+<br>Width:
+<input id="image_width" value="300" maxlength="4" size="4" type="number"
+       onchange="checkISValue(this, 'dim'); recalcCoord('Ci', 'scale');">
+Height:
+<input id="image_height" value="300" maxlength="4" size="4" type="number"
+       onchange="checkISValue(this, 'dim'); recalcCoord('Cr', 'scale');">
+<input type="checkbox" id="proportional" onchange="checkProportions();">
+<label for="proportional">proportional</label>
+
+<br><br>Maximum of iterations:
 <select id="iterMax">
 <option value="50">50</option>
 <option value="100">100</option>
diff --git a/js/mandelbrot.js b/js/mandelbrot.js
index 3278e70..fad3013 100644
--- a/js/mandelbrot.js
+++ b/js/mandelbrot.js
@@ -191,6 +191,56 @@ function setVal(aName, aValue) {
   }
 }
 
+function checkISValue(textbox, type) {
+  if (type == "coord") {
+    textbox.value = roundCoord(parseFloat(textbox.value));
+  }
+  else if (type == "dim") {
+    textbox.value = parseInt(textbox.value);
+  }
+}
+
+function recalcCoord(coord, target) {
+  var othercoord = (coord == "Ci") ? "Cr" : "Ci";
+  var owndim = (coord == "Ci") ? "height" : "width";
+  var otherdim = (coord == "Ci") ? "width" : "height";
+  var myscale;
+  if (target == "scale") {
+    myscale =
+      parseFloat(document.getElementById(coord + "_max").value) -
+      parseFloat(document.getElementById(coord + "_min").value);
+    document.getElementById(coord + "_scale").value = roundCoord(myscale);
+  }
+  else if (target == 'max') {
+    var mymax =
+      parseFloat(document.getElementById(coord + "_min").value) +
+      parseFloat(document.getElementById(coord + "_scale").value);
+    document.getElementById(coord + "_max").value = roundCoord(mymax);
+    myscale = document.getElementById(coord + "_scale").value;
+  }
+  if (document.getElementById("proportional").checked) {
+    var otherscale = myscale *
+      document.getElementById("image_" + otherdim).value /
+      document.getElementById("image_" + owndim).value;
+    document.getElementById(othercoord + "_scale").value = roundCoord(otherscale);
+    var othermax =
+      parseFloat(document.getElementById(othercoord + "_min").value) +
+      parseFloat(document.getElementById(othercoord + "_scale").value);
+    document.getElementById(othercoord + "_max").value = roundCoord(othermax);
+  }
+}
+
+function checkProportions() {
+  if (!document.getElementById("proportional").checked) {
+    recalcCoord("Cr", "scale");
+  }
+}
+
+function roundCoord(floatval) {
+  // We should round to 10 decimals here or so
+  return parseFloat(floatval.toFixed(10));
+}
+
 function adjustCoordsAndDraw(aC_min, aC_max) {
   var iWidth = getAdjustVal("image.width");
   var iHeight = getAdjustVal("image.height");
@@ -249,16 +299,8 @@ function drawImage() {
   var iterMax = getAdjustVal("iteration_max");
   var algorithm = getAdjustVal("use_algorithm");
 
-  var iWidth = canvas.width;
-  if ((iWidth < 10) || (iWidth > 5000)) {
-    iWidth = 300;
-    canvas.width = iWidth;
-  }
-  var iHeight = canvas.height;
-  if ((iHeight < 10) || (iHeight > 5000)) {
-    iHeight = 300;
-    canvas.height = iHeight;
-  }
+  var iWidth = getAdjustVal("image.width");
+  var iHeight = getAdjustVal("image.height");
 
   gCurrentImageData = {
     C_min: new complex(Cr_min, Ci_min),
@@ -268,6 +310,9 @@ function drawImage() {
     iterMax: iterMax
   };
 
+  canvas.width = iWidth;
+  canvas.height = iHeight;
+
   context.fillStyle = "rgba(255, 255, 255, 127)";
   context.fillRect(0, 0, canvas.width, canvas.height);
 
diff --git a/manifest.appcache b/manifest.appcache
index 1f1ceb0..1a6d09f 100644
--- a/manifest.appcache
+++ b/manifest.appcache
@@ -11,4 +11,3 @@ style/mandelbrotIcon32.png
 style/plain-overview.png
 
 NETWORK:
-
diff --git a/style/mandelbrot.css b/style/mandelbrot.css
index f375a14..4c0af96 100644
--- a/style/mandelbrot.css
+++ b/style/mandelbrot.css
@@ -14,8 +14,18 @@ h1 {
   position: absolute;
 }
 
+#overlayArea:-moz-system-metric(touch-enabled) {
+  font-size: 3mozmm;
+}
+
+#overlayArea input[type="button"]:-moz-system-metric(touch-enabled),
+#overlayArea select:-moz-system-metric(touch-enabled) {
+  font-size: 3mozmm;
+}
+
 #settings {
   display: none;
+  background-color: rgba(255, 255, 255, .8);
 }
 
 #mainArea {
-- 
2.35.3