Changeset 13587

Timestamp:

05/07/12 20:45:06 (13 years ago)

Author:

tbretz

Message:

Improvements to the histogram display; some other little fixes and improvements

File:

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

trunk/FACT++/www/index.js

@@ +1 @@
+var debug = true;
+
 function $(id) { return document.getElementById(id); }
 function trim(str) { return str.replace("/^\s\s*/", '').replace("/\s\s*$/", ''); }
@@ -75 +77 @@
 
     var lines = text.split('\n');
+
+    if (lines.length==0)
+    {
+        alert("buildPage - received data empty.");
+        return;
+    }
 
     var table = $("table"+z);
@@ -124 +132 @@
     htd3.setAttribute("class", "tcell1");
     htd3.setAttribute("width", "1px");
+    hhtr.appendChild(htd3);
     hhtr.appendChild(htd0);
     hhtr.appendChild(htd1);
     hhtr.appendChild(htd2);
-    hhtr.appendChild(htd3);
 
     var div0 = document.createElement("div");
@@ -150 +158 @@
     sp2.setAttribute("data-color", "3");
     sp0.appendChild(document.createTextNode(" \u2022 "));
-    sp1.appendChild(document.createTextNode(lines.length>0?lines[0]:"n/a"));
+    sp1.appendChild(document.createTextNode(lines[0]));
     sp2.appendChild(document.createTextNode(" \u2022 "));
 
@@ -163 +171 @@
     htd0.appendChild(div0);
     htd1.appendChild(div1);
-    htd2.appendChild(div2);
-    htd3.appendChild(div3);
+    if (dz!=0/* && z+dz!=0*/)
+        htd2.appendChild(div2); // back
+    if (lines[0]!="FACT")
+        htd3.appendChild(div3); // home
 
     // -----------------------------------------------------
@@ -278 +288 @@
         {
             var sp = document.createElement("div");
-            sp.setAttribute("class", "icon_gray");
+            sp.setAttribute("class", "icon_black");
             sp.setAttribute("style", "background-position: -144px 50%;");
             td0.appendChild(sp);
@@ -295 +305 @@
         {
             var sp = document.createElement("div");
-            sp.setAttribute("class", "icon_gray");
+            sp.setAttribute("class", "icon_black");
             sp.setAttribute("style", "background-position: -108px 50%;");
             td2.appendChild(sp);
@@ -332 +342 @@
     tr.setAttribute("class", "row");
 
-    td = document.createElement("td");
-    td.setAttribute("id", "debug");
-    td.setAttribute("colspan", "3");
-    tr.appendChild(td);
+    if (debug == true)
+    {
+        td = document.createElement("td");
+        td.setAttribute("id", "debug"+z);
+        td.setAttribute("colspan", "3");
+        tr.appendChild(td);
+    }
 
     tbody.appendChild(tr);
@@ -347 +360 @@
 function doresize(z)
 {
+    // 393 / 482    488/482 / 200   200+482-488
     var img  = $("image"+z);
     var canv = $("canvas"+z);
@@ -368 +382 @@
 
     // ------ debug -----
-
-    $('debug').innerHTML = "";
-    $('debug').innerHTML += "|W="+W +"/"+H;
-    $('debug').innerHTML += "|H="+h+"/"+$("table"+z).offsetHeight+"/"+img.offsetHeight;
-    $('debug').innerHTML += "|I="+img.style.height+"+"+H+"-"+h;
+    if (debug == true)
+    {
+        $('debug'+z).innerHTML = "";
+        $('debug'+z).innerHTML += "|W="+W +"/"+H;
+        $('debug'+z).innerHTML += "|H="+h+"/"+$("table"+z).offsetHeight+"/"+img.offsetHeight;
+        $('debug'+z).innerHTML += "|I="+img.style.height+"+"+H+"-"+h;
+    }
 }
 
@@ -414 +430 @@
         $("table"+newz).style.left=(-window.innerWidth-1)+"px";
 
+    //window.clearTimeout(timeoutText);
+    //window.clearTimeout(timeoutGraphics);
+
     $("body").setAttribute("data-visible", newz);
     intervalSlide = setInterval(doShift, 75, oldz, newz);
@@ -420 +439 @@
 function doShift(oldz, newz)
 {
-    var W = window.innerWidth;
-
     var t0 = $("table"+oldz);
     var t1 = $("table"+newz);
 
+    if (t0.style.display=="none")
+    {
+        clearInterval(intervalSlide);
+        $("body").removeChild(t0);
+        return;
+    }
+
     var x0 = t0.offsetLeft;
     var x1 = t1.offsetLeft;
 
+    var W = window.innerWidth;
+
     if (newz<oldz)
     {
@@ -442 +468 @@
     if ((newz<oldz && x1>=0) || (newz>oldz && x1<=0))
     {
-        clearInterval(intervalSlide);
-        $("body").removeChild(t0);
-        t1.style.left = "0px";
-        return;
+        t0.style.display="none";
+        x1 = 0;
     }
 
@@ -552 +576 @@
 */
 
+var timeoutText = null;
+
 function refresh_text()
 {
@@ -561 +587 @@
     if (isSliding() || !valid(fname))
     {
-        setTimeout(refresh_text, 1000);
+        timeoutText = setTimeout(refresh_text, 1000);
         return;
     }
@@ -572 +598 @@
         {
             alert("ERROR[1] - HTTP request '"+fname+".txt': "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
-            setTimeout(refresh_text, 10000);
+            timeoutText = setTimeout(refresh_text, 10000);
             return;
         }
@@ -581 +607 @@
             update_text(fname, xmlHttp.responseText);
         }
-        setTimeout(refresh_text, 3000);
+        timeoutText = setTimeout(refresh_text, 3000);
     };
     xmlHttp.send(null);
@@ -705 +731 @@
     if (isSliding() || !valid(fname))
     {
-        setTimeout(refresh_graphics, 1000);
+        timeoutGraphics = setTimeout(refresh_graphics, 1000);
         return;
     }
@@ -716 +742 @@
         {
             alert("ERROR[2] - Request '"+fname+"': "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
-            setTimeout(refresh_text, 10000);
+            timeoutGraphics = setTimeout(refresh_graphics, 10000);
             //****** invalidate ******
             return;
@@ -726 +752 @@
             process_eventdata(xmlHttp.responseText);
         }
-        setTimeout(refresh_graphics, 5000)
+        timeoutGraphics = setTimeout(refresh_graphics, 5000)
     };
     xmlHttp.send(null);
@@ -937 +963 @@
     {
         ctx.strokeStyle = "#"+color(16*i);
-        ctx.strokeText((vals[1]-diff*i/8)+vals[2], cw-5, 135-i*15);
+        ctx.strokeText((vals[0]-diff*(i-8)/8)+vals[2], cw-5, 135-i*15);
     }
 }
@@ -948 +974 @@
     var ctx = canv.getContext("2d");
 
-    var dx = 15;
-    var dy = 15;
-
-    var dw =  5;
+    var vals = canv.getAttribute("data-data").split("/");
+
+    var dw =  3;    // tick width
+
+    var fs = 8;  // font size
+
+    ctx.font      = fs+"pt Arial";
+    ctx.textAlign = "right";
+
+    var dim0 = ctx.measureText(vals[0]);
+    var dim1 = ctx.measureText(vals[1]);
+
+    var tw = vals.length>=2 ? Math.max(dim0.width, dim1.width)+dw+2 : 0;
+
+    var ml = vals.length>=2 ? 5+tw   : 10; // margin left
+    var mr = 10;                           // margin right
+
+    var mt = vals.length>=2 ? fs/2+5 : 5; // margin top
+    var mb = vals.length>=2 ? fs/2+4 : 5; // margin bottom
 
     var nx = 20;
     var ny = 10;
 
-    var w = cw-2*dx;
-    var h = ch-2*dy;
+    var w = cw-ml-mr;
+    var h = ch-mt-mb;
 
     ctx.strokeStyle = "#808080";
 
+    // --- data ---
     ctx.beginPath();
-    ctx.moveTo(dx, ch-dy-data.charCodeAt(0)/128*h);
+    ctx.moveTo(ml, ch-mb-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.lineTo(ml+w/(data.length-1)*i, ch-mb-data.charCodeAt(i)/128*h);
+
+    // --- finalize data ---
+    ctx.lineTo(cw-mr, ch-mb);
+    ctx.lineTo(ml,    ch-mb);
     ctx.fillStyle = "#"+color(100);
+    ctx.stroke();
     ctx.fill();
+
+    ctx.strokeStyle = "#000000";
+
+    ctx.beginPath();
+
+    // --- axes ---
+    ctx.moveTo(ml,    mt);
+    ctx.lineTo(ml,    ch-mb);
+    ctx.lineTo(cw-mr, ch-mb);
+
+    for (var i=0; i<nx; i++)
+    {
+        ctx.moveTo(ml+w/nx*i, ch-mb-dw);
+        ctx.lineTo(ml+w/nx*i, ch-mb+dw);
+    }
+    for (var i=0; i<ny; i++)
+    {
+        ctx.moveTo(ml-dw, mb+h/ny*i);
+        ctx.lineTo(ml+dw, mb+h/ny*i);
+    }
     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();
+    if (vals.length>=2)
+    {
+        ctx.textBaseline = "bottom";
+        ctx.strokeText(vals[0], ml-dw-2, ch-1);
+
+        ctx.textBaseline = "top";
+        ctx.strokeText(vals[1], ml-dw-2, 0);
+    }
 }
 
 function process_eventdata(result)
 {
-    if (result.length!=160)
-        return;
-
     var z = $("body").getAttribute("data-visible");
     var canv = $("canvas"+z);