make outer background dark, make sure the image is loaded before we draw it to the...

diff --git a/index.html b/index.html
index bd31f68121ae5c0929fb4da5efa6a59ff8f6eac9..f5c42dcef4cd73fb25c287b19f594832895491c1 100644 (file)
--- a/index.html
+++ b/index.html
@@ -54,7 +54,8 @@ 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();">
+<input type="checkbox" id="proportional" checked="true"
+       onchange="checkProportions();">
 <label for="proportional">proportional</label>
 
 <br><br>Maximum of iterations:

diff --git a/js/mandelbrot.js b/js/mandelbrot.js
index fad30134a9eeb917a109c8af5839dc63440f8238..f90abca0665ee1223d984f85d93ac7aaa99eebe6 100644 (file)
--- a/js/mandelbrot.js
+++ b/js/mandelbrot.js
@@ -29,7 +29,7 @@ function Startup() {
 
   var initTile = new Image();
   initTile.src = "style/initial-overview.png";
-  gMainContext.drawImage(initTile, 0, 0);
+  initTile.onload = function() { gMainContext.drawImage(initTile, 0, 0); };
 }
 
 function initDB() {
@@ -160,18 +160,18 @@ function setVal(aName, aValue) {
   switch (aName) {
     case "image.width":
     case "image.height":
-      gPrefs.set(aName, value);
-      document.getElementById(aName.replace(".", "_")).value = value;
+      gPrefs.set(aName, aValue);
+      document.getElementById(aName.replace(".", "_")).value = aValue;
       break;
     case "last_image.Cr_*":
-      gPrefs.set("Cr_min", Cr_min);
-      gPrefs.set("Cr_max", Cr_max);
+      gPrefs.set("Cr_min", aValue.Cr_min);
+      gPrefs.set("Cr_max", aValue.Cr_max);
       document.getElementById("Cr_min").value = aValue.Cr_min;
       document.getElementById("Cr_max").value = aValue.Cr_max;
       break;
     case "last_image.Ci_*":
-      gPrefs.set("Ci_min", Ci_min);
-      gPrefs.set("Ci_max", Ci_max);
+      gPrefs.set("Ci_min", aValue.Ci_min);
+      gPrefs.set("Ci_max", aValue.Ci_max);
       document.getElementById("Ci_min").value = aValue.Ci_min;
       document.getElementById("Ci_max").value = aValue.Ci_max;
       break;
@@ -182,10 +182,10 @@ function setVal(aName, aValue) {
       setAlgorithm(aValue);
       break;
    case "color_palette":
-      setPalette(valueaValue);
+      setPalette(aValue);
       break;
    case "syncProportions":
-      gPrefs.set(aName, value);
+      gPrefs.set(aName, aValue);
       document.getElementById("proportional").value = aValue;
       break;
   }

diff --git a/manifest.appcache b/manifest.appcache
index 1a6d09f1073e84215e5585dcd00f78d34f13fe85..1f1ceb01e4972c8def648340b98f90c52e8c1c27 100644 (file)
--- a/manifest.appcache
+++ b/manifest.appcache
@@ -11,3 +11,4 @@ style/mandelbrotIcon32.png
 style/plain-overview.png
 
 NETWORK:
+

diff --git a/style/mandelbrot.css b/style/mandelbrot.css
index 4c0af96f90a633782d4ca2e26da2b45da25936a7..339ad551b8f017788d716f96e04376013d246145 100644 (file)
--- a/style/mandelbrot.css
+++ b/style/mandelbrot.css
@@ -4,6 +4,8 @@
 
 body {
   font-family: sans-serif;
+  background-color: #222222;
+  color: #FFFFFF;
 }
 
 h1 {
@@ -26,6 +28,15 @@ h1 {
 #settings {
   display: none;
   background-color: rgba(255, 255, 255, .8);
+  color: #000000;
+  border-radius: 3px;
+  border: 1px solid #FFFFFF;
+}
+
+#settings > legend {
+  background-color: #FFFFFF;
+  color: #000000;
+  border-radius: 3px;
 }
 
 #mainArea {
@@ -34,7 +45,7 @@ h1 {
 }
 
 #mbrotImage {
-  background-color: lightblue;
+  background-color: #444444;
 }
 
 @media screen and (max-width: 500px) {