don't display h1, add a viewport tag, paint an initial image with explanations of...
authorRobert Kaiser <robert@widebook.box.kairo.at>
Sun, 28 Oct 2012 19:35:27 +0000 (20:35 +0100)
committerRobert Kaiser <robert@widebook.box.kairo.at>
Sun, 28 Oct 2012 19:35:27 +0000 (20:35 +0100)
index.html
js/mandelbrot.js
manifest.appcache
style/initial-overview.png [new file with mode: 0644]
style/mandelbrot.css
style/plain-overview.png [new file with mode: 0644]

index 525a3eb4e1cb301556fabbb6031e00037332cea0..2614c7c690c1b4751eaa21ecc3237c4e2fd85dcb 100644 (file)
@@ -6,6 +6,9 @@
 <html manifest="manifest.appcache">
 <head>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
+  <!-- try to counts default scaling on mobile, see 
+       https://developer.mozilla.org/en/Mobile/Viewport_meta_tag -->
+  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=.6667, maximum-scale=.6667">
   <title>KaiRo.at Mandelbrot Web</title>
   <script src="js/mandelbrot.js"></script>
   <link rel="stylesheet" href="style/mandelbrot.css">
index 7f6c38ed6c36a89534af2b1421718cc39fa4a793..385ff2eeb7c0ce7d6f16cfce02e35dfa1c5fec08 100644 (file)
@@ -2,21 +2,28 @@
  * License, v. 2.0. If a copy of the MPL was not distributed with this file,
  * You can obtain one at http://mozilla.org/MPL/2.0/. */
 
+var gMainCanvas, gMainContext;
 var gColorPalette = [];
 var gStartTime = 0;
 var gCurrentImageData;
 var gLastImageData;
 
 function Startup() {
-  var img = document.getElementById("mbrotImage");
-  img.addEventListener("mouseup", imgEvHandler, false);
-  img.addEventListener("mousedown", imgEvHandler, false);
-  img.addEventListener("mousemove", imgEvHandler, false);
-  img.addEventListener("touchstart", imgEvHandler, false);
-  img.addEventListener("touchend", imgEvHandler, false);
-  img.addEventListener("touchcancel", imgEvHandler, false);
-  img.addEventListener("touchleave", imgEvHandler, false);
-  img.addEventListener("touchmove", imgEvHandler, false);
+  gMainCanvas = document.getElementById("mbrotImage");
+  gMainContext = gMainCanvas.getContext("2d");
+
+  gMainCanvas.addEventListener("mouseup", imgEvHandler, false);
+  gMainCanvas.addEventListener("mousedown", imgEvHandler, false);
+  gMainCanvas.addEventListener("mousemove", imgEvHandler, false);
+  gMainCanvas.addEventListener("touchstart", imgEvHandler, false);
+  gMainCanvas.addEventListener("touchend", imgEvHandler, false);
+  gMainCanvas.addEventListener("touchcancel", imgEvHandler, false);
+  gMainCanvas.addEventListener("touchleave", imgEvHandler, false);
+  gMainCanvas.addEventListener("touchmove", imgEvHandler, false);
+
+  var initTile = new Image();
+  initTile.src = "style/initial-overview.png";
+  gMainContext.drawImage(initTile, 0, 0);
 }
 
 function getAdjustVal(aName) {
@@ -173,8 +180,8 @@ function adjustCoordsAndDraw(aC_min, aC_max) {
 }
 
 function drawImage() {
-  var canvas = document.getElementById("mbrotImage");
-  var context = canvas.getContext("2d");
+  var canvas = gMainCanvas;
+  var context = gMainContext;
 
   document.getElementById("calcTime").textContent = "--";
 
index 985e6b0e913a5dfe6a9309b33b3fbda923c82069..1f1ceb01e4972c8def648340b98f90c52e8c1c27 100644 (file)
@@ -4,9 +4,11 @@ CACHE MANIFEST
 index.html
 manifest.webapp
 js/mandelbrot.js
+style/initial-overview.png
 style/mandelbrot.css
 style/mandelbrotIcon16.png
 style/mandelbrotIcon32.png
+style/plain-overview.png
 
 NETWORK:
 
diff --git a/style/initial-overview.png b/style/initial-overview.png
new file mode 100644 (file)
index 0000000..13683a2
Binary files /dev/null and b/style/initial-overview.png differ
index 04bc96068a887b163ef9b119a442b423bbf81baa..f375a14a215a070599b2f2777e37b55a41bfd203 100644 (file)
@@ -6,6 +6,10 @@ body {
   font-family: sans-serif;
 }
 
+h1 {
+  display: none;
+}
+
 #overlayArea {
   position: absolute;
 }
diff --git a/style/plain-overview.png b/style/plain-overview.png
new file mode 100644 (file)
index 0000000..be3c347
Binary files /dev/null and b/style/plain-overview.png differ