Index: trunk/FACT++/www/index.js
===================================================================
--- trunk/FACT++/www/index.js	(revision 13464)
+++ trunk/FACT++/www/index.js	(revision 13470)
@@ -1,43 +1,3 @@
-function onload(load)
-{
-    var W = window.innerWidth;
-    var H = window.innerHeight;
-
-    document.getElementById("canvas").width  = 1;
-    document.getElementById("canvas").height = 1;
-
-    var tw = document.getElementById('table').offsetWidth;
-    var th = document.getElementById('table').offsetHeight;
-
-    var margin = (W-tw)*2;
-
-    var cw =     tw;// - margin;
-    var ch = H - th - margin;
-
-    document.getElementById("canvas").width  = cw;
-    document.getElementById("canvas").height = ch;
-
-    // ------ debug -----
-    document.getElementById('debug').innerHTML = "";
-    document.getElementById('debug').innerHTML += "|W="+W+"/"+H;
-    document.getElementById('debug').innerHTML += "|T="+tw+"/"+th;
-    document.getElementById('debug').innerHTML += "|C="+cw+"/"+ch;
-
-    if (!load)
-        return;
-
-    refresh_text();
-    refresh_graphics();
-}
-
-function onresize() 
-{
-    onload();
-}
-
-function refresh_text()
-{
-    var xmlHttp = null;
-
+/*
     try { xmlHttp = new XMLHttpRequest(); }
     catch(e)
@@ -54,6 +14,30 @@
         }
     }
-
-    xmlHttp.open('POST', 'status.txt', true);
+    */
+
+function $(id) { return document.getElementById(id); }
+function trim(str) { return str.replace("/^\s\s*/", '').replace("/\s\s*$/", ''); }
+function valid(str) { if (str==undefined) return false; if (str.length==0) return false; return true;}
+
+function onload()
+{
+    loadPage("fact");
+
+    refresh_text();
+    refresh_graphics();
+}
+
+function loadPage(name, z)
+{
+    var xmlHttp = null;
+
+    try { xmlHttp = new XMLHttpRequest(); }
+    catch(e)
+    {
+        alert("Your browser doesn't support dynamic reload.");
+        return;
+    }
+
+    xmlHttp.open('POST', name+'.table', true);
 
     xmlHttp.onreadystatechange =
@@ -62,13 +46,287 @@
             if (xmlHttp.readyState == 4)
             {
-                if (xmlHttp.status==0)
+                if (xmlHttp.status!=0 && xmlHttp.status!=200)
                 {
-                    setTimeout("refresh_text()", 3000);
+                    alert("ERROR[0] - HTTP request '"+name+".table': "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
+                    //setTimeout("loadPage('+name+')", 5000);
+                    /****** invalidate ******/
                     return;
                 }
-                // Handle 404 (not found)
-                if (xmlHttp.status!=200)
+
+                //changePage(name, xmlHttp.resposeText);
+
+                //slideOut(name, xmlHttp.responseText);
+
+                displayPage(name, xmlHttp.responseText, 1);
+                onresize(true);
+            }
+        };
+
+    xmlHttp.send(null);
+}
+
+
+function displayPage(name, text, z)
+{
+    var table = $("tbody"+z);
+
+    table.setAttribute("data-file", "");
+
+    while (table.hasChildNodes())
+        table.removeChild(table.lastChild);
+
+    var lines = text.split('\n');
+
+    if (lines.length>0)
+    {
+        var newe = document.createElement("span");
+        newe.innerHTML = lines[0];
+        $("title").replaceChild(newe, $("title").lastChild);
+    }
+
+    var counter = 1;
+    for (var i=1; i<lines.length; i++)
+    {
+        lines[i] = trim(lines[i]);
+
+        if (lines[i].length==0 || lines[i][0] == '#')
+            continue;
+
+        var cols = lines[i].split(':');
+        if (cols.length != 3 && cols.length !=4)
+        {
+            alert("Size mismatch #"+i+": "+lines[i]);
+            continue;
+        }
+
+        if (cols[1].substring(0, 7)=="canvas=")
+        {
+            var tr = document.createElement("tr");
+            tr.setAttribute("class", "row");
+            tr.setAttribute("style", "margin:0;padding:0;");
+
+            var td = document.createElement("td");
+            td.setAttribute("class",   "container");
+            td.setAttribute("id",      "container");
+            td.setAttribute("onclick", "save();");
+            td.setAttribute("colspan", "3");
+            tr.appendChild(td);
+
+            var canv = document.createElement("canvas");
+            canv.setAttribute("id",     "canvas");
+            canv.setAttribute("width",  "1");
+            canv.setAttribute("height", "1");
+            canv.setAttribute("data-file", cols[1].substring(7));
+            td.appendChild(canv);
+
+            table.appendChild(tr);
+            continue;
+        }
+
+        var tr = document.createElement("tr");
+        tr.setAttribute("class", "row");
+        //tr.setAttribute("id",    cols[0]+"_row");
+
+        var td0 = document.createElement("td");
+        td0.setAttribute("class", "tcol0");
+        if (valid(cols[0]))
+            td0.appendChild(document.createTextNode("<"));
+        tr.appendChild(td0);
+
+        var td1 = document.createElement("td");
+        td1.setAttribute("class", "tcol1");
+        td1.setAttribute("width", "100%");
+        if (valid(cols[0]))
+            td1.setAttribute("onclick", "loadPage('"+cols[0]+"');");
+        if (valid(cols[3]))
+            td1.setAttribute("onclick", "loadPage('"+cols[3]+"');");
+        tr.appendChild(td1);
+
+        var td2 = document.createElement("td");
+        td2.setAttribute("class", "tcol2");
+        if (valid(cols[3]))
+            td2.appendChild(document.createTextNode(">"));
+        tr.appendChild(td2);
+
+        var tab = document.createElement("table");
+        tab.setAttribute("width", "100%");
+        td1.appendChild(tab);
+
+        var innertr = document.createElement("tr");
+        tab.appendChild(innertr);
+
+        var cell1 = document.createElement("td");
+        cell1.setAttribute("class", "tcell1");
+        //cell1.setAttribute("id",    cols[0]+"_title");
+        cell1.appendChild(document.createTextNode(cols[1]));
+
+        var cell2 = document.createElement("td");
+        cell2.setAttribute("class", "tcell2");
+        cell2.setAttribute("id",    "data"+counter);
+        cell2.setAttribute("data-form",  cols[2]);
+        cell2.appendChild(document.createTextNode("---"));
+
+        innertr.appendChild(cell1);
+        innertr.appendChild(cell2);
+
+        table.appendChild(tr);
+
+        counter++;
+    }
+
+
+    // ---------------------------------------
+
+    if ($("canvas") == null)
+    {
+        /*
+        tr = document.createElement("tr");
+        tr.setAttribute("class", "row");
+
+        td = document.createElement("td");
+        td.setAttribute("id",      "debug");
+        td.setAttribute("colspan", "3");
+        td.setAttribute("height", "100%");
+        tr.appendChild(td);
+
+        table.appendChild(tr);*/
+    }
+
+    tr = document.createElement("tr");
+    tr.setAttribute("class", "row");
+
+    td = document.createElement("td");
+    td.setAttribute("id",      "debug");
+    td.setAttribute("colspan", "3");
+    tr.appendChild(td);
+
+    table.appendChild(tr);
+
+    table.setAttribute("data-file", name);
+}
+
+function onresize(load)
+{
+    var W = window.innerWidth;
+    var H = window.innerHeight;
+
+    var canv = $("canvas");
+
+    if (canv != undefined)
+    {
+        canv.width  = 1;
+        canv.height = 1;
+    }
+
+    var tw = $('table').offsetWidth;
+    var th = $('table').offsetHeight;
+
+    var tx = $('table').offsetLeft;
+    var ty = $('table').offsetTop;
+
+    //var margin = (W-tw)*2;
+
+    var cw =     tw - 2*tx;
+    var ch = H - th - 2*ty;
+
+    if (canv != undefined)
+    {
+        canv.width  = cw;
+        canv.height = ch-ty;
+    }
+
+    // ------ debug -----
+    $('debug').innerHTML = "";
+    $('debug').innerHTML += "|x="+tx+"/"+ty;
+    $('debug').innerHTML += "|W="+W +"/"+H;
+    $('debug').innerHTML += "|T="+tw+"/"+th;
+    $('debug').innerHTML += "|C="+cw+"/"+ch;
+}
+
+var intervalSlideOut = null;
+
+function changePage(newpage)
+{
+    var z = $("body").dataset.visible;
+    $('table').style.position="fixed";
+    intervalSlideOut = setInterval("doSlideOut('"+newpage+"')", 100);
+}
+
+function doSlideOut(newpage)
+{
+    var W = window.innerWidth;
+    var x = $('table').offsetLeft;
+
+    var ix = parseInt(x);
+    if (ix>W)
+    {
+        clearInterval(intervalSlideOut);
+        slideIn();
+        return;
+    }
+
+    ix += W/10;
+
+    $('table').style.left=ix+"px";
+
+//    timeoutSlideOut = setTimeout("slideOut()", 100);
+}
+
+function slideIn()
+{
+    var W = window.innerWidth;
+    var x = $('table').offsetLeft;
+
+    var ix = parseInt(x);
+    if (ix==0)
+    {
+        $('table').style.position="";
+        // restart refersh!
+        return;
+    }
+
+    ix -= W/10;
+    if (ix<0)
+        ix = 0;
+
+    $('table').style.left=ix+"px";
+
+    setTimeout("slideIn()", 100);
+}
+
+function refresh_text()
+{
+    // Is sliding?
+    if ($('table').style.position=="fixed")
+        return;
+
+    var z=$("body").dataset.visible;
+
+    var fname = $("tbody"+z).dataset.file;
+    if (!valid(fname))
+    {
+        setTimeout("refresh_text()", 1000);
+        return;
+    }
+
+    var xmlHttp = null;
+
+    try { xmlHttp = new XMLHttpRequest(); }
+    catch(e)
+    {
+        alert("Your browser doesn't support dynamic reload.");
+        return;
+    }
+
+    xmlHttp.open('POST', fname+'.txt', true);
+
+    xmlHttp.onreadystatechange =
+        function ()
+        {
+            if (xmlHttp.readyState == 4)
+            {
+                if (this.status!=0 && this.status!=200)
                 {
-                    alert("HTTP request error: "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
+                    alert("ERROR[1] - HTTP request '"+fname+".txt': "+this.statusText+" ["+this.status+"]");
                     setTimeout("refresh_text()", 10000);
                     /****** invalidate ******/
@@ -76,5 +334,6 @@
                 }
 
-                process_status(xmlHttp.responseText);
+                //alert("ok");
+                process_status(fname, this.responseText);
                 setTimeout("refresh_text()", 3000);
             }
@@ -84,18 +343,7 @@
 }
 
-function valid(str)
-{
-    if (str==undefined)
-        return false;
-
-    if (str.length==0)
-        return false;
-
-    return true;
-}
-
 function strike(id, status)
 {
-    var e = document.getElementById(id);
+    var e = $(id);
     if (!e)
         return;
@@ -109,5 +357,5 @@
 function gray(id, str)
 {
-    var e = document.getElementById(id);
+    var e = $(id);
     if (!e)
         return;
@@ -128,18 +376,13 @@
 var date0 = null;
 
-function process_status(result)
-{
-    var temp    = 1;
-    var dew     = 2;
-    var gusts   = 3;
-    var voltmed = 4;
-    var curmed  = 5;
-    var curmax  = 6;
-    var drive   = 7;
-    var zd      = 8;
-    var az      = 9;
+function process_status(fname, result)
+{
+    var z=$("body").dataset.visible;
+    if ($("tbody"+z).dataset.file != fname)
+        return;
 
     var tokens = result.split('\n');
 
+    // ----------------------------------------------------
     var date1 = new Date();
 
@@ -159,75 +402,32 @@
     date0 = date2;
 
-    gray("drive",   tokens[drive]);
-    gray("temp",    tokens[temp]);
-    gray("volt",    tokens[voltmed]);
-    gray("current", tokens[curmed]);
-
-    document.getElementById("time").innerHTML =
+    // ----------------------------------------------------
+
+    for (var line=1; line<tokens.length; line++)
+    {
+        var e = $("data"+line);
+        if (e == undefined)
+            continue;
+
+        var form = e.dataset.form;
+        if (form==undefined)
+            continue;
+
+        var cols = tokens[line].split('\t');
+        for (var col=1; col<cols.length; col++)
+            form = form.replace("\$"+(col-1), cols[col].length==0 ? "--" : cols[col]);
+
+        var newe = document.createElement("div");
+        newe.innerHTML = form;
+        e.replaceChild(newe, e.lastChild);
+
+        e.parentNode.parentNode.parentNode.parentNode.style.background=cols[0];
+    }
+
+    $("time").innerHTML =
         "&middot;&nbsp;"+date0.toUTCString()+"&nbsp;&middot;";//getUTCFullYear()+"/"+date0.getUTCMonth()+"/"+date0.getUTCDate()+" "+date0.getUTCHours()+":"+date0.getUTCMinutes()+":"+date0.getUTCSeconds()+"."+date0.getUTCMilliseconds();
 
-    document.getElementById("system").innerHTML =
-        "---";
-
-    if (valid(tokens[drive])) document.getElementById("drive").innerHTML =
-        tokens[drive]+" ["+tokens[zd]+" "+tokens[az]+"]";
-
-    if (valid(tokens[temp]))
-    {
-        document.getElementById("temp").innerHTML =
-            tokens[temp]+"&deg;C ["+tokens[dew]+"&deg;C]";
-        document.getElementById("aux").innerHTML =
-            tokens[gusts]+" km/h";
-
-        document.getElementById("temp_row").style.background="#fff8f0";
-        if (parseFloat(tokens[temp])-parseFloat(tokens[dew])>0.3)
-            document.getElementById("temp_row").style.background="#fffff0";
-        if (parseFloat(tokens[temp])-parseFloat(tokens[dew])>0.7)
-            document.getElementById("temp_row").style.background="#f0fff0";
-
-        document.getElementById("aux_row").style.background="#fff8f0";
-        if (parseFloat(tokens[gusts])<50)
-            document.getElementById("aux_row").style.background="#fffff0";
-        if (parseFloat(tokens[gusts])<35)
-            document.getElementById("aux_row").style.background="#f0fff0";
-    }
-    else
-    {
-        document.getElementById("temp_row").style.background="#ffffff";
-        document.getElementById("aux_row").style.background="#ffffff";
-    }
-
-
-    if (valid(tokens[voltmed]))
-    {
-        document.getElementById("bias").innerHTML =
-            tokens[curmed]+"&micro;A / "+tokens[curmax]+"&micro;A"+
-            " ["+tokens[voltmed]+"V]";
-
-        if (parseFloat(tokens[voltmed])>1)
-            document.getElementById("bias_row").style.background="#f0f0f0";
-        else
-            document.getElementById("bias_row").style.background="#fff0f0";
-    }
-    else
-    {
-        document.getElementById("bias_row").style.background="#ffffff";
-    }
-
-    document.getElementById("localtime").innerHTML = "&middot;&nbsp;"+date1.toLocaleString()+"&nbsp;&middot;";//ISOlocalDateStr();//ltoString();
-/*
-    if (tokens[1]=="Taking Data")
-        document.getElementById("row1").style.background="#d0f0d0";
-    else
-        document.getElementById("row1").style.background="#ffffff";
-
-    if (tokens[2]=="Tracking")
-        document.getElementById("row2").style.background="#d0f0d0";
-    else
-        document.getElementById("row2").style.background="#ffffff";
-
-    document.getElementById("volt").style.textColor="#808080";
-    document.getElementById("row2").style.textColor="#808080";
-    */
+    $("localtime").innerHTML =
+        "&middot;&nbsp;"+date1.toLocaleString()+"&nbsp;&middot;";//ISOlocalDateStr();//ltoString();
 }
 
@@ -235,45 +435,20 @@
 // http://www.netmagazine.com/tutorials/learning-basics-html5-canvas
 // http://www.alistapart.com/articles/responsive-web-design/
-/*
-function decode_base64(s)
-{
-    var e={};
-    var i,k;
-    var v=[];
-    var r='';
-    var w=String.fromCharCode;
-
-    var n=[[65,91],[97,123],[48,58],[47,48],[43,44]];
-
-    for (z in n)
-    {
-        for(i=n[z][0]; i<n[z][1]; i++)
-        {
-            v.push(w(i));
-        }
-    }
-
-    for(i=0;i<64;i++)
-    {
-        e[v[i]]=i;
-    }
-
-    for(i=0;i<s.length;i+=72)
-    {
-        var b=0,c,x,l=0,o=s.substring(i,i+72);
-        for(x=0;x<o.length;x++)
-        {
-            c=e[o.charAt(x)];b=(b<<6)+c;l+=6;
-            while(l>=8)
-            {
-                r+=w((b>>>(l-=8))%256);
-            }
-        }
-    }
-    return r;
-}*/
 
 function refresh_graphics()
 {
+    // Is sliding?
+    if ($('table').style.position=="fixed")
+        return;
+
+    var canvas = $("canvas");
+
+    var fname = canvas==null ? "" : $("canvas").dataset.file;
+    if (!valid(fname))
+    {
+        setTimeout("refresh_graphics()", 1000);
+        return;
+    }
+
     var xmlHttp = null;
 
@@ -293,6 +468,5 @@
     }
 
-    xmlHttp.open('POST', 'fadcontrol-eventdata.bin', true);
-
+    xmlHttp.open('POST', fname, true);
     xmlHttp.onload =
         function ()
@@ -300,7 +474,7 @@
             if (xmlHttp.readyState == 4)
             {
-                if (xmlHttp.status!=200)
+                if (xmlHttp.status!=0 && xmlHttp.status!=200)
                 {
-                    alert("HTTP request error: "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
+                    alert("ERROR[2] - Request '"+fname+"': "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
                     setTimeout("refresh_text()", 10000);
                     //****** invalidate ******
@@ -374,5 +548,5 @@
 function drawPix(x, y, col)
 {
-    var canv = document.getElementById("canvas");
+    var canv = $("canvas");
 
     var cw = canv.width;
@@ -396,5 +570,7 @@
         return;
 
-    var canv = document.getElementById("canvas");
+    var canv = $("canvas");
+    if (canv == undefined)
+        return;
 
     var cw = canv.width;
@@ -503,5 +679,5 @@
 function save()
 {
-    var canvas = document.getElementById("canvas");
+    var canvas = $("canvas");
     var img    = canvas.toDataURL("image/png");