Changeset 13563 for trunk/FACT++/www

Timestamp:

05/04/12 19:53:20 (13 years ago)

Author:

tbretz

Message:

Fixed a problem with firefox; added drawing of the full camera; use translations for drawing; replaced discs by hexagons

File:

• trunk/FACT++/www/index.js (modified) (5 diffs)

trunk/FACT++/www/index.js

@@ -243 +243 @@
         return;
 
+    var h = $("table"+z).offsetHeight;
+    if (h == 0)
+        return;
+
     var W = window.innerWidth;
     var H = window.innerHeight;
 
-    //img.width  = 1;
-    //img.height = 1;
-
-    var h = $("table"+z).offsetHeight;
-
-    //alert(img.height+"/"+img.offsetHeight+"/"+img.parentNode.offsetHeight);
-
-    // Be aware that this is recursive!
-    img.width   = W;
-    img.height += H - h;
-
-    canv.width  = img.width;
-    canv.height = img.height;
+    var ih = img.height + H - h;
+
+    img.style.width = W +"px";
+    img.style.height= ih+"px";
+
+    canv.width  = W;
+    canv.height = ih;
 
     // ------ debug -----
@@ -264 +262 @@
     $('debug').innerHTML += "|W="+W +"/"+H;
     $('debug').innerHTML += "|H="+h+"/"+$("table"+z).offsetHeight;
+    $('debug').innerHTML += "|I="+ih;
 }
 
@@ -708 +707 @@
 }
 
-function drawPix(x, y, col)
-{
-    var z = $("body").getAttribute("data-visible");
+function drawHex(ctx, x, y, col)
+{
+    ctx.fillStyle = "#"+color(col);
+
+    ctx.save();
+
+    ctx.translate(x, y);
+    ctx.scale(1/2, Math.sqrt(3)/6);
+
+    ctx.beginPath();
+    ctx.moveTo( 1,  1);
+    ctx.lineTo( 0,  2);
+    ctx.lineTo(-1,  1);
+    ctx.lineTo(-1, -1);
+    ctx.lineTo( 0, -2);
+    ctx.lineTo( 1, -1);
+    ctx.fill();
+
+    ctx.restore();
+}
+
+function drawDisc(ctx, x, y, r, col)
+{
+    ctx.fillStyle = "#"+color(col);
+
+    ctx.save();
+
+    ctx.translate(x, y);
+
+    ctx.beginPath();
+    ctx.arc(0, 0, r, 0, Math.PI*2, true);
+    ctx.fill();
+
+    ctx.restore();
+}
+
+function beginDrawCam(scale)
+{
+    var z    = $("body").getAttribute("data-visible");
     var canv = $("canvas"+z);
 
-    var cw = canv.width;
-    var ch = canv.height;
-
-    var w = Math.min(cw/28, ch/28);
-
-    var ctx  = canv.getContext("2d");
-
-    ctx.beginPath();
-    ctx.arc(x*w*2+cw/2, y*w*2+ch/2, w, 0, Math.PI*2, true);
-    ctx.lineWidth = 0;
-    ctx.fillStyle = "#"+color(col);
-    ctx.fill();
-    ctx.closePath();
-}
+    var w = Math.min(canv.width/scale, canv.height/scale);
+
+    var ctx = canv.getContext("2d");
+
+    ctx.save();
+    ctx.translate(canv.width/2, canv.height/2);
+    ctx.scale(w*2, w*2);
+
+    return ctx;
+}
+
+function drawFullCam(data)
+{
+    var ctx = beginDrawCam(80);
+
+    drawHex(ctx, -0.5, 0, data.charCodeAt(0));
+
+    var gsSin60 = Math.sqrt(3)/2;
+
+    var cnt  = 1;
+    for (var ring=1; ring<=23; ring++)
+    {
+        for (var s=0; s<6; s++)
+        {
+            for (var i=1; i<=ring; i++)
+            {
+                var x=0.;
+                var y=0.;
+
+                switch (s)
+                {
+                case 0: x = ring-i*0.5;    y = i*gsSin60;         break;
+                case 1: x = ring*0.5-i;    y = ring*gsSin60;      break;
+                case 2: x = -(ring+i)*0.5; y = (ring-i)*gsSin60;  break;
+                case 3: x = 0.5*i-ring;    y = -i*gsSin60;        break;
+                case 4: x = i-ring*0.5;    y = -ring*gsSin60;     break;
+                case 5: x = (ring+i)*0.5;  y = (-ring+i)*gsSin60; break;
+                }
+
+                if (x*x + y*y - x > 395.75)
+                    continue;
+
+                drawHex(ctx, x-0.5, -y, data.charCodeAt(cnt));
+                cnt++;
+
+                if (cnt!=1416)
+                    continue;
+
+                drawHex(ctx, -6.5, -y, data.charCodeAt(1438));
+                drawHex(ctx, -6.5,  y, data.charCodeAt(1439));
+            }
+        }
+    }
+
+    ctx.restore();
+}
+
 function drawCam(data)
 {
-    drawPix(0, 0, data.charCodeAt(0));
+    var ctx = beginDrawCam(28);
+    ctx.rotate(Math.PI/6);
+
+    drawHex(ctx, 0, 0, data.charCodeAt(0));
 
     var gsSin60 = Math.sqrt(3)/2;
@@ -764 +845 @@
                     continue;
 
-                // Rotate by 60deg
-                var px = gsSin60*x - 0.5*y;
-                var py = gsSin60*y + 0.5*x;
-
-                drawPix(px, py, data.charCodeAt(cnt));
+                drawHex(ctx, x, y, data.charCodeAt(cnt));
                 cnt++;
             }
         }
     }
+
+    ctx.restore();
 }
 
@@ -882 +961 @@
     drawGraph(canv, result);
 
-    drawCam(result);
-    drawCamLegend(canv);
+//    drawCam(result);
+//    drawFullCam(result);
+//    drawFullCam(result);
+//    drawCamLegend(canv);
 
     $("image"+z).src = canv.toDataURL("image/png");