Index: trunk/FACT++/www/index.js
===================================================================
--- trunk/FACT++/www/index.js	(revision 13495)
+++ trunk/FACT++/www/index.js	(revision 13496)
@@ -592,39 +592,12 @@
     ctx.closePath();
 }
-
-function process_eventdata(result)
-{
-    if (result.length!=160)
-        return;
-
-    var z = $("body").getAttribute("data-visible");
-    var canv = $("canvas"+z);
-    if (canv == undefined)
-        return;
-
-    var cw = canv.width;
-    var ch = canv.height;
-
-    var ctx = canv.getContext("2d");
-
-    ctx.clearRect(0, 0, cw, ch);
-/*
-    ctx.beginPath();
-    ctx.strokeStyle = "#000000";
-    ctx.moveTo(0, 0);
-    ctx.lineTo(0, ch);
-    ctx.lineTo(cw, ch);
-    ctx.lineTo(cw, 0);
-    ctx.lineTo(0, 0);
-    ctx.stroke();
-    ctx.closePath();
-    */
-
-    drawPix(0, 0, result.charCodeAt(0));
+function drawCam(data)
+{
+    drawPix(0, 0, data.charCodeAt(0));
 
     var gsSin60 = Math.sqrt(3)/2;
 
     var cnt = 1;
-    for (var ring=1; ring<=30; ring++)
+    for (var ring=1; ring<=7; ring++)
     {
         for (var s=0; s<6; s++)
@@ -657,19 +630,20 @@
 
                 // Rotate by 60deg
-                var px = Math.sin(Math.PI/3)*x - Math.cos(Math.PI/3)*y;
-                var py = Math.cos(Math.PI/3)*x + Math.sin(Math.PI/3)*y;
-
-                drawPix(px, py, result.charCodeAt(cnt));
+                var px = gsSin60*x - 0.5*y;
+                var py = gsSin60*y + 0.5*x;
+
+                drawPix(px, py, data.charCodeAt(cnt));
                 cnt++;
-
-                if (cnt==159)
-                    break;
             }
-            if (cnt==159)
-                break;
         }
-        if (cnt==159)
-            break;
-    }
+    }
+}
+
+function drawCamLegend(canv)
+{
+    var cw = canv.width;
+    var ch = canv.height;
+
+    var ctx = canv.getContext("2d");
 
     ctx.font         = "8pt Arial";
@@ -703,8 +677,79 @@
     ctx.strokeStyle = "#"+color(127);
     ctx.strokeText("2.0V", cw-5, 5);
+}
+
+function drawGraph(canv, data)
+{
+    var cw = canv.width;
+    var ch = canv.height;
+
+    var ctx = canv.getContext("2d");
+
+    var dx = 15;
+    var dy = 15;
+
+    var dw =  5;
+
+    var nx = 20;
+    var ny = 10;
+
+    var w = cw-2*dx;
+    var h = ch-2*dy;
+
+    ctx.strokeStyle = "#808080";
+
+    ctx.beginPath();
+    ctx.moveTo(dx, ch-dy-data.charCodeAt(0)/128*h);
+    for (var i=1; i<data.length; i++)
+        ctx.lineTo(dx+w/data.length*i, ch-dy-data.charCodeAt(i)/128*h);
+    ctx.lineTo(dx+w, ch-dy);
+    ctx.lineTo(dx,   ch-dy);
+    ctx.fillStyle = "#"+color(100);
+    ctx.fill();
+    ctx.stroke();
+    ctx.closePath();
+
+    ctx.strokeStyle = "#000000";
+
+    ctx.beginPath();
+
+    ctx.moveTo(dx,    dy);
+    ctx.lineTo(dx,    ch-dy);
+    ctx.lineTo(cw-dx, ch-dy);
+
+    for (var i=0; i<nx; i++)
+    {
+        ctx.moveTo(dx+w/nx*i, ch-dy-dw);
+        ctx.lineTo(dx+w/nx*i, ch-dy+dw);
+    }
+    for (var i=0; i<ny; i++)
+    {
+        ctx.moveTo(dx-dw, dy+h/ny*i);
+        ctx.lineTo(dx+dw, dy+h/ny*i);
+    }
+    ctx.stroke();
+    ctx.closePath();
+}
+
+function process_eventdata(result)
+{
+    if (result.length!=160)
+        return;
+
+    var z = $("body").getAttribute("data-visible");
+    var canv = $("canvas"+z);
+    if (canv == undefined)
+        return;
+
+    var ctx = canv.getContext("2d");
+    ctx.clearRect(0, 0, canv.width, canv.height);
+
+    drawGraph(canv, result);
+
+    drawCam(result);
+    drawCamLegend(canv);
 
     var img = $("image"+z);
     img.src = canv.toDataURL("image/png");
-
 }
 /*