Ignore:
Timestamp:
04/30/12 14:23:11 (12 years ago)
Author:
tbretz
Message:
Many updates.
File:
1 edited

Legend:

Unmodified
Added
Removed

  • trunk/FACT++/www/index.js

    r13464 r13470  
    1 function onload(load)
    2 {
    3     var W = window.innerWidth;
    4     var H = window.innerHeight;
    5 
    6     document.getElementById("canvas").width  = 1;
    7     document.getElementById("canvas").height = 1;
    8 
    9     var tw = document.getElementById('table').offsetWidth;
    10     var th = document.getElementById('table').offsetHeight;
    11 
    12     var margin = (W-tw)*2;
    13 
    14     var cw =     tw;// - margin;
    15     var ch = H - th - margin;
    16 
    17     document.getElementById("canvas").width  = cw;
    18     document.getElementById("canvas").height = ch;
    19 
    20     // ------ debug -----
    21     document.getElementById('debug').innerHTML = "";
    22     document.getElementById('debug').innerHTML += "|W="+W+"/"+H;
    23     document.getElementById('debug').innerHTML += "|T="+tw+"/"+th;
    24     document.getElementById('debug').innerHTML += "|C="+cw+"/"+ch;
    25 
    26     if (!load)
    27         return;
    28 
    29     refresh_text();
    30     refresh_graphics();
    31 }
    32 
    33 function onresize()
    34 {
    35     onload();
    36 }
    37 
    38 function refresh_text()
    39 {
    40     var xmlHttp = null;
    41 
     1/*
    422    try { xmlHttp = new XMLHttpRequest(); }
    433    catch(e)
    … …  
    5414        }
    5515    }
    56 
    57     xmlHttp.open('POST', 'status.txt', true);
     16    */
     17
     18function $(id) { return document.getElementById(id); }
     19function trim(str) { return str.replace("/^\s\s*/", '').replace("/\s\s*$/", ''); }
     20function valid(str) { if (str==undefined) return false; if (str.length==0) return false; return true;}
     21
     22function onload()
     23{
     24    loadPage("fact");
     25
     26    refresh_text();
     27    refresh_graphics();
     28}
     29
     30function loadPage(name, z)
     31{
     32    var xmlHttp = null;
     33
     34    try { xmlHttp = new XMLHttpRequest(); }
     35    catch(e)
     36    {
     37        alert("Your browser doesn't support dynamic reload.");
     38        return;
     39    }
     40
     41    xmlHttp.open('POST', name+'.table', true);
    5842
    5943    xmlHttp.onreadystatechange =
    … …  
    6246            if (xmlHttp.readyState == 4)
    6347            {
    64                 if (xmlHttp.status==0)
     48                if (xmlHttp.status!=0 && xmlHttp.status!=200)
    6549                {
    66                     setTimeout("refresh_text()", 3000);
     50                    alert("ERROR[0] - HTTP request '"+name+".table': "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
     51                    //setTimeout("loadPage('+name+')", 5000);
     52                    /****** invalidate ******/
    6753                    return;
    6854                }
    69                 // Handle 404 (not found)
    70                 if (xmlHttp.status!=200)
     55
     56                //changePage(name, xmlHttp.resposeText);
     57
     58                //slideOut(name, xmlHttp.responseText);
     59
     60                displayPage(name, xmlHttp.responseText, 1);
     61                onresize(true);
     62            }
     63        };
     64
     65    xmlHttp.send(null);
     66}
     67
     68
     69function displayPage(name, text, z)
     70{
     71    var table = $("tbody"+z);
     72
     73    table.setAttribute("data-file", "");
     74
     75    while (table.hasChildNodes())
     76        table.removeChild(table.lastChild);
     77
     78    var lines = text.split('\n');
     79
     80    if (lines.length>0)
     81    {
     82        var newe = document.createElement("span");
     83        newe.innerHTML = lines[0];
     84        $("title").replaceChild(newe, $("title").lastChild);
     85    }
     86
     87    var counter = 1;
     88    for (var i=1; i<lines.length; i++)
     89    {
     90        lines[i] = trim(lines[i]);
     91
     92        if (lines[i].length==0 || lines[i][0] == '#')
     93            continue;
     94
     95        var cols = lines[i].split(':');
     96        if (cols.length != 3 && cols.length !=4)
     97        {
     98            alert("Size mismatch #"+i+": "+lines[i]);
     99            continue;
     100        }
     101
     102        if (cols[1].substring(0, 7)=="canvas=")
     103        {
     104            var tr = document.createElement("tr");
     105            tr.setAttribute("class", "row");
     106            tr.setAttribute("style", "margin:0;padding:0;");
     107
     108            var td = document.createElement("td");
     109            td.setAttribute("class",   "container");
     110            td.setAttribute("id",      "container");
     111            td.setAttribute("onclick", "save();");
     112            td.setAttribute("colspan", "3");
     113            tr.appendChild(td);
     114
     115            var canv = document.createElement("canvas");
     116            canv.setAttribute("id",     "canvas");
     117            canv.setAttribute("width",  "1");
     118            canv.setAttribute("height", "1");
     119            canv.setAttribute("data-file", cols[1].substring(7));
     120            td.appendChild(canv);
     121
     122            table.appendChild(tr);
     123            continue;
     124        }
     125
     126        var tr = document.createElement("tr");
     127        tr.setAttribute("class", "row");
     128        //tr.setAttribute("id",    cols[0]+"_row");
     129
     130        var td0 = document.createElement("td");
     131        td0.setAttribute("class", "tcol0");
     132        if (valid(cols[0]))
     133            td0.appendChild(document.createTextNode("<"));
     134        tr.appendChild(td0);
     135
     136        var td1 = document.createElement("td");
     137        td1.setAttribute("class", "tcol1");
     138        td1.setAttribute("width", "100%");
     139        if (valid(cols[0]))
     140            td1.setAttribute("onclick", "loadPage('"+cols[0]+"');");
     141        if (valid(cols[3]))
     142            td1.setAttribute("onclick", "loadPage('"+cols[3]+"');");
     143        tr.appendChild(td1);
     144
     145        var td2 = document.createElement("td");
     146        td2.setAttribute("class", "tcol2");
     147        if (valid(cols[3]))
     148            td2.appendChild(document.createTextNode(">"));
     149        tr.appendChild(td2);
     150
     151        var tab = document.createElement("table");
     152        tab.setAttribute("width", "100%");
     153        td1.appendChild(tab);
     154
     155        var innertr = document.createElement("tr");
     156        tab.appendChild(innertr);
     157
     158        var cell1 = document.createElement("td");
     159        cell1.setAttribute("class", "tcell1");
     160        //cell1.setAttribute("id",    cols[0]+"_title");
     161        cell1.appendChild(document.createTextNode(cols[1]));
     162
     163        var cell2 = document.createElement("td");
     164        cell2.setAttribute("class", "tcell2");
     165        cell2.setAttribute("id",    "data"+counter);
     166        cell2.setAttribute("data-form",  cols[2]);
     167        cell2.appendChild(document.createTextNode("---"));
     168
     169        innertr.appendChild(cell1);
     170        innertr.appendChild(cell2);
     171
     172        table.appendChild(tr);
     173
     174        counter++;
     175    }
     176
     177
     178    // ---------------------------------------
     179
     180    if ($("canvas") == null)
     181    {
     182        /*
     183        tr = document.createElement("tr");
     184        tr.setAttribute("class", "row");
     185
     186        td = document.createElement("td");
     187        td.setAttribute("id",      "debug");
     188        td.setAttribute("colspan", "3");
     189        td.setAttribute("height", "100%");
     190        tr.appendChild(td);
     191
     192        table.appendChild(tr);*/
     193    }
     194
     195    tr = document.createElement("tr");
     196    tr.setAttribute("class", "row");
     197
     198    td = document.createElement("td");
     199    td.setAttribute("id",      "debug");
     200    td.setAttribute("colspan", "3");
     201    tr.appendChild(td);
     202
     203    table.appendChild(tr);
     204
     205    table.setAttribute("data-file", name);
     206}
     207
     208function onresize(load)
     209{
     210    var W = window.innerWidth;
     211    var H = window.innerHeight;
     212
     213    var canv = $("canvas");
     214
     215    if (canv != undefined)
     216    {
     217        canv.width  = 1;
     218        canv.height = 1;
     219    }
     220
     221    var tw = $('table').offsetWidth;
     222    var th = $('table').offsetHeight;
     223
     224    var tx = $('table').offsetLeft;
     225    var ty = $('table').offsetTop;
     226
     227    //var margin = (W-tw)*2;
     228
     229    var cw =     tw - 2*tx;
     230    var ch = H - th - 2*ty;
     231
     232    if (canv != undefined)
     233    {
     234        canv.width  = cw;
     235        canv.height = ch-ty;
     236    }
     237
     238    // ------ debug -----
     239    $('debug').innerHTML = "";
     240    $('debug').innerHTML += "|x="+tx+"/"+ty;
     241    $('debug').innerHTML += "|W="+W +"/"+H;
     242    $('debug').innerHTML += "|T="+tw+"/"+th;
     243    $('debug').innerHTML += "|C="+cw+"/"+ch;
     244}
     245
     246var intervalSlideOut = null;
     247
     248function changePage(newpage)
     249{
     250    var z = $("body").dataset.visible;
     251    $('table').style.position="fixed";
     252    intervalSlideOut = setInterval("doSlideOut('"+newpage+"')", 100);
     253}
     254
     255function doSlideOut(newpage)
     256{
     257    var W = window.innerWidth;
     258    var x = $('table').offsetLeft;
     259
     260    var ix = parseInt(x);
     261    if (ix>W)
     262    {
     263        clearInterval(intervalSlideOut);
     264        slideIn();
     265        return;
     266    }
     267
     268    ix += W/10;
     269
     270    $('table').style.left=ix+"px";
     271
     272//    timeoutSlideOut = setTimeout("slideOut()", 100);
     273}
     274
     275function slideIn()
     276{
     277    var W = window.innerWidth;
     278    var x = $('table').offsetLeft;
     279
     280    var ix = parseInt(x);
     281    if (ix==0)
     282    {
     283        $('table').style.position="";
     284        // restart refersh!
     285        return;
     286    }
     287
     288    ix -= W/10;
     289    if (ix<0)
     290        ix = 0;
     291
     292    $('table').style.left=ix+"px";
     293
     294    setTimeout("slideIn()", 100);
     295}
     296
     297function refresh_text()
     298{
     299    // Is sliding?
     300    if ($('table').style.position=="fixed")
     301        return;
     302
     303    var z=$("body").dataset.visible;
     304
     305    var fname = $("tbody"+z).dataset.file;
     306    if (!valid(fname))
     307    {
     308        setTimeout("refresh_text()", 1000);
     309        return;
     310    }
     311
     312    var xmlHttp = null;
     313
     314    try { xmlHttp = new XMLHttpRequest(); }
     315    catch(e)
     316    {
     317        alert("Your browser doesn't support dynamic reload.");
     318        return;
     319    }
     320
     321    xmlHttp.open('POST', fname+'.txt', true);
     322
     323    xmlHttp.onreadystatechange =
     324        function ()
     325        {
     326            if (xmlHttp.readyState == 4)
     327            {
     328                if (this.status!=0 && this.status!=200)
    71329                {
    72                     alert("HTTP request error: "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
     330                    alert("ERROR[1] - HTTP request '"+fname+".txt': "+this.statusText+" ["+this.status+"]");
    73331                    setTimeout("refresh_text()", 10000);
    74332                    /****** invalidate ******/
    … …  
    76334                }
    77335
    78                 process_status(xmlHttp.responseText);
     336                //alert("ok");
     337                process_status(fname, this.responseText);
    79338                setTimeout("refresh_text()", 3000);
    80339            }
    … …  
    84343}
    85344
    86 function valid(str)
    87 {
    88     if (str==undefined)
    89         return false;
    90 
    91     if (str.length==0)
    92         return false;
    93 
    94     return true;
    95 }
    96 
    97345function strike(id, status)
    98346{
    99     var e = document.getElementById(id);
     347    var e = $(id);
    100348    if (!e)
    101349        return;
    … …  
    109357function gray(id, str)
    110358{
    111     var e = document.getElementById(id);
     359    var e = $(id);
    112360    if (!e)
    113361        return;
    … …  
    128376var date0 = null;
    129377
    130 function process_status(result)
    131 {
    132     var temp    = 1;
    133     var dew     = 2;
    134     var gusts   = 3;
    135     var voltmed = 4;
    136     var curmed  = 5;
    137     var curmax  = 6;
    138     var drive   = 7;
    139     var zd      = 8;
    140     var az      = 9;
     378function process_status(fname, result)
     379{
     380    var z=$("body").dataset.visible;
     381    if ($("tbody"+z).dataset.file != fname)
     382        return;
    141383
    142384    var tokens = result.split('\n');
    143385
     386    // ----------------------------------------------------
    144387    var date1 = new Date();
    145388
    … …  
    159402    date0 = date2;
    160403
    161     gray("drive",   tokens[drive]);
    162     gray("temp",    tokens[temp]);
    163     gray("volt",    tokens[voltmed]);
    164     gray("current", tokens[curmed]);
    165 
    166     document.getElementById("time").innerHTML =
     404    // ----------------------------------------------------
     405
     406    for (var line=1; line<tokens.length; line++)
     407    {
     408        var e = $("data"+line);
     409        if (e == undefined)
     410            continue;
     411
     412        var form = e.dataset.form;
     413        if (form==undefined)
     414            continue;
     415
     416        var cols = tokens[line].split('\t');
     417        for (var col=1; col<cols.length; col++)
     418            form = form.replace("\$"+(col-1), cols[col].length==0 ? "--" : cols[col]);
     419
     420        var newe = document.createElement("div");
     421        newe.innerHTML = form;
     422        e.replaceChild(newe, e.lastChild);
     423
     424        e.parentNode.parentNode.parentNode.parentNode.style.background=cols[0];
     425    }
     426
     427    $("time").innerHTML =
    167428        "&middot;&nbsp;"+date0.toUTCString()+"&nbsp;&middot;";//getUTCFullYear()+"/"+date0.getUTCMonth()+"/"+date0.getUTCDate()+" "+date0.getUTCHours()+":"+date0.getUTCMinutes()+":"+date0.getUTCSeconds()+"."+date0.getUTCMilliseconds();
    168429
    169     document.getElementById("system").innerHTML =
    170         "---";
    171 
    172     if (valid(tokens[drive])) document.getElementById("drive").innerHTML =
    173         tokens[drive]+" ["+tokens[zd]+" "+tokens[az]+"]";
    174 
    175     if (valid(tokens[temp]))
    176     {
    177         document.getElementById("temp").innerHTML =
    178             tokens[temp]+"&deg;C ["+tokens[dew]+"&deg;C]";
    179         document.getElementById("aux").innerHTML =
    180             tokens[gusts]+" km/h";
    181 
    182         document.getElementById("temp_row").style.background="#fff8f0";
    183         if (parseFloat(tokens[temp])-parseFloat(tokens[dew])>0.3)
    184             document.getElementById("temp_row").style.background="#fffff0";
    185         if (parseFloat(tokens[temp])-parseFloat(tokens[dew])>0.7)
    186             document.getElementById("temp_row").style.background="#f0fff0";
    187 
    188         document.getElementById("aux_row").style.background="#fff8f0";
    189         if (parseFloat(tokens[gusts])<50)
    190             document.getElementById("aux_row").style.background="#fffff0";
    191         if (parseFloat(tokens[gusts])<35)
    192             document.getElementById("aux_row").style.background="#f0fff0";
    193     }
    194     else
    195     {
    196         document.getElementById("temp_row").style.background="#ffffff";
    197         document.getElementById("aux_row").style.background="#ffffff";
    198     }
    199 
    200 
    201     if (valid(tokens[voltmed]))
    202     {
    203         document.getElementById("bias").innerHTML =
    204             tokens[curmed]+"&micro;A / "+tokens[curmax]+"&micro;A"+
    205             " ["+tokens[voltmed]+"V]";
    206 
    207         if (parseFloat(tokens[voltmed])>1)
    208             document.getElementById("bias_row").style.background="#f0f0f0";
    209         else
    210             document.getElementById("bias_row").style.background="#fff0f0";
    211     }
    212     else
    213     {
    214         document.getElementById("bias_row").style.background="#ffffff";
    215     }
    216 
    217     document.getElementById("localtime").innerHTML = "&middot;&nbsp;"+date1.toLocaleString()+"&nbsp;&middot;";//ISOlocalDateStr();//ltoString();
    218 /*
    219     if (tokens[1]=="Taking Data")
    220         document.getElementById("row1").style.background="#d0f0d0";
    221     else
    222         document.getElementById("row1").style.background="#ffffff";
    223 
    224     if (tokens[2]=="Tracking")
    225         document.getElementById("row2").style.background="#d0f0d0";
    226     else
    227         document.getElementById("row2").style.background="#ffffff";
    228 
    229     document.getElementById("volt").style.textColor="#808080";
    230     document.getElementById("row2").style.textColor="#808080";
    231     */
     430    $("localtime").innerHTML =
     431        "&middot;&nbsp;"+date1.toLocaleString()+"&nbsp;&middot;";//ISOlocalDateStr();//ltoString();
    232432}
    233433
    … …  
    235435// http://www.netmagazine.com/tutorials/learning-basics-html5-canvas
    236436// http://www.alistapart.com/articles/responsive-web-design/
    237 /*
    238 function decode_base64(s)
    239 {
    240     var e={};
    241     var i,k;
    242     var v=[];
    243     var r='';
    244     var w=String.fromCharCode;
    245 
    246     var n=[[65,91],[97,123],[48,58],[47,48],[43,44]];
    247 
    248     for (z in n)
    249     {
    250         for(i=n[z][0]; i<n[z][1]; i++)
    251         {
    252             v.push(w(i));
    253         }
    254     }
    255 
    256     for(i=0;i<64;i++)
    257     {
    258         e[v[i]]=i;
    259     }
    260 
    261     for(i=0;i<s.length;i+=72)
    262     {
    263         var b=0,c,x,l=0,o=s.substring(i,i+72);
    264         for(x=0;x<o.length;x++)
    265         {
    266             c=e[o.charAt(x)];b=(b<<6)+c;l+=6;
    267             while(l>=8)
    268             {
    269                 r+=w((b>>>(l-=8))%256);
    270             }
    271         }
    272     }
    273     return r;
    274 }*/
    275437
    276438function refresh_graphics()
    277439{
     440    // Is sliding?
     441    if ($('table').style.position=="fixed")
     442        return;
     443
     444    var canvas = $("canvas");
     445
     446    var fname = canvas==null ? "" : $("canvas").dataset.file;
     447    if (!valid(fname))
     448    {
     449        setTimeout("refresh_graphics()", 1000);
     450        return;
     451    }
     452
    278453    var xmlHttp = null;
    279454
    … …  
    293468    }
    294469
    295     xmlHttp.open('POST', 'fadcontrol-eventdata.bin', true);
    296 
     470    xmlHttp.open('POST', fname, true);
    297471    xmlHttp.onload =
    298472        function ()
    … …  
    300474            if (xmlHttp.readyState == 4)
    301475            {
    302                 if (xmlHttp.status!=200)
     476                if (xmlHttp.status!=0 && xmlHttp.status!=200)
    303477                {
    304                     alert("HTTP request error: "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
     478                    alert("ERROR[2] - Request '"+fname+"': "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
    305479                    setTimeout("refresh_text()", 10000);
    306480                    //****** invalidate ******
    … …  
    374548function drawPix(x, y, col)
    375549{
    376     var canv = document.getElementById("canvas");
     550    var canv = $("canvas");
    377551
    378552    var cw = canv.width;
    … …  
    396570        return;
    397571
    398     var canv = document.getElementById("canvas");
     572    var canv = $("canvas");
     573    if (canv == undefined)
     574        return;
    399575
    400576    var cw = canv.width;
    … …  
    503679function save()
    504680{
    505     var canvas = document.getElementById("canvas");
     681    var canvas = $("canvas");
    506682    var img    = canvas.toDataURL("image/png");
    507683
Note: See TracChangeset for help on using the changeset viewer.