Added dimensions to info box

Author: cslarsen

mandelbrot.html

@@ -82,6 +82,7 @@
       }
 
       #infoBox {
+        text-align:right;
         z-index: 10;
         position: absolute;
         right: 5px;
@@ -93,6 +94,7 @@
         text-shadow: none;
 
         font-family: sans-serif;
+        font-size:8pt;
       }
 
       #description table {
@@ -231,7 +233,7 @@ <h1>The Mandelbrot Set</h1>
     </div>
 
     <div id="infoBox">
-      <small><span id="infoText"></span></small>
+      <span id="infoText"></span>
     </div>
 
     <script type="text/javascript" src="mandelbrot.js">

mandelbrot.js

@@ -49,6 +49,19 @@ function updateHashTag(samples, iterations)
                   'colorScheme=' + scheme;
 }
 
+/*
+ * Update small info box in lower right hand side
+ */
+function updateInfoBox()
+{
+  // Update infobox
+  $('infoBox').innerHTML =
+    'x<sub>0</sub>=' + xRange[0] + ' y<sub>0</sub>=' + yRange[0] + ' ' +
+    'x<sub>1</sub>=' + xRange[1] + ' y<sub>1</sub>=' + yRange[1] + ' ' +
+    'w&#10799;h=' + canvas.width + 'x' + canvas.height + ' '
+        + (canvas.width*canvas.height/1000000.0).toFixed(1) + 'MP';
+}
+
 /*
  * Parse URL hash tag, returns whether we should redraw.
  */
@@ -214,11 +227,7 @@ function draw(pickColor, superSamples)
   var Ci_step = (yRange[1] - yRange[0]) / (0.5 + (canvas.height-1));
 
   updateHashTag(superSamples, steps);
-
-  // Update infobox
-  $('infoBox').innerHTML =
-    'x<sub>0</sub>=' + xRange[0] + ' y<sub>0</sub>=' + yRange[0] + ' ' +
-    'x<sub>1</sub>=' + xRange[1] + ' y<sub>1</sub>=' + yRange[1];
+  updateInfoBox();
 
   // Only enable one render at a time
   renderId += 1;