Ignore:
Timestamp:
05/12/12 00:03:50 (13 years ago)
Author:
tbretz
Message:
Many simplifications; invalidation of graphics if report is too late; limits from binary file; no double use of xmlHttp; removed old obsolete sliding code
File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r13642 r13664  
    189189function onload()
    190190{
    191     var xmlHttp = null;
    192    
    193     try { xmlHttp = new XMLHttpRequest(); }
     191    try { new XMLHttpRequest(); }
    194192    catch(e)
    195193    {
    … …  
    218216function loadPage(name, z, dz)
    219217{
    220     var xmlHttp = new XMLHttpRequest();
    221     xmlHttp.open('POST', name+'.table', true);
    222     xmlHttp.onload = function ()
    223     {
    224         if (xmlHttp.status!=200)
     218    var xmlPage = new XMLHttpRequest();
     219    xmlPage.open('POST', name+'.table', true);
     220    xmlPage.onload = function ()
     221    {
     222        if (xmlPage.status!=200)
    225223        {
    226             alert("ERROR[0] - HTTP request '"+name+".table': "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
     224            alert("ERROR[0] - HTTP request '"+name+".table': "+xmlPage.statusText+" ["+xmlPage.status+"]");
    227225            //setTimeout("loadPage('+name+')", 5000);
    228226            /****** invalidate ******/
    … …  
    230228        }
    231229
    232         buildPage(name, xmlHttp.responseText, z, dz);
     230        buildPage(name, xmlPage.responseText, z, dz);
    233231        changePage(z, z+dz);
    234232
    … …  
    239237    };
    240238
    241     xmlHttp.send(null);
     239    xmlPage.send(null);
    242240
    243241    location.hash = name;
    … …  
    264262
    265263    table = document.createElement("table");
    266     table.setAttribute("class",       "tborder");
    267     table.setAttribute("id",          "table"+z);
    268     table.setAttribute("border",      "0");
    269     table.setAttribute("cellspacing", "0");
    270     table.setAttribute("cellpadding", "6");
    271     table.setAttribute("width",       "100%");
     264    table.setAttribute("class", "tborder");
     265    table.id = "table"+z;
     266    table.border = 0;
     267    table.cellspacing = 0;
     268    table.cellpadding = "6px";
     269    table.width = "100%";
    272270    table.setAttribute("style",       "overflow:hidden;position:fixed;top:0px;left:"+window.innerWidth+"px;");
    273271
    … …  
    275273
    276274    var th = document.createElement("thead");
    277     th.setAttribute("colspan", "3");
    278     th.setAttribute("width",   "100%");
     275    th.colSpan = 3;
     276    th.width = "100%";
    279277    table.appendChild(th);
    280278
    … …  
    283281
    284282    var htd = document.createElement("td");
    285     htd.setAttribute("class",   "thead");
    286     htd.setAttribute("colspan", "3");
    287     htd.setAttribute("width",   "100%");
     283    htd.setAttribute("class", "thead");
     284    htd.colSpan = 3;
     285    htd.width = "100%";
    288286    htr.appendChild(htd);
    289287
    … …  
    291289
    292290    var htab = document.createElement("table");
    293     htab.setAttribute("width", "100%");
     291    htab.width = "100%";
    294292    htd.appendChild(htab);
    295293
    … …  
    327325    var sp1 = document.createElement("span");
    328326    var sp2 = document.createElement("span");
    329     sp0.setAttribute("id", "ldot" +z);
    330     sp1.setAttribute("id", "title"+z);
    331     sp2.setAttribute("id", "rdot" +z);
     327    sp0.id = "ldot" +z;
     328    sp1.id = "title"+z;
     329    sp2.id = "rdot" +z;
    332330    sp0.setAttribute("data-color", "3");
    333331    sp2.setAttribute("data-color", "3");
    … …  
    341339
    342340    div1.setAttribute("style", "font-size:small;");
    343     div1.setAttribute("id", "reporttime"+z);
     341    div1.id = "reporttime"+z;
    344342    div1.appendChild(document.createTextNode("---"));
    345343
    … …  
    366364    var ftd = document.createElement("td");
    367365    ftd.setAttribute("class",   "tfoot");
    368     ftd.setAttribute("width",   "100%");
    369     ftd.setAttribute("colspan", "3");
     366    ftd.width = "100%";
     367    ftd.colSpan = 3;
    370368    ftr.appendChild(ftd);
    371369
    372370    var ftab = document.createElement("table");
    373     ftab.setAttribute("width", "100%");
     371    ftab.width = "100%";
    374372    ftd.appendChild(ftab);
    375373
    … …  
    388386    fdiv0.setAttribute("style", "font-size:x-large;");
    389387    fdiv1.setAttribute("style", "font-size:small;");
    390     fdiv1.setAttribute("id",    "localtime"+z);
     388    fdiv1.id = "localtime"+z;
    391389
    392390    fdiv0.appendChild(document.createTextNode("logbook"));
    … …  
    409407        if (cols.length != 3 && cols.length !=4)
    410408        {
    411             alert("Size mismatch #"+i+": '"+lines[i]+"' N(cols)="+cols.length);
     409            alert("Wrong number of columns in line #"+i+" in '"+name+"': '"+lines[i]+"' N(cols)="+cols.length);
    412410            continue;
    413411        }
    … …  
    424422
    425423            var td = document.createElement("td");
    426             td.setAttribute("class",   "container");
    427             td.setAttribute("id",      "container");
    428             //td.setAttribute("onclick", "save();");
    429             td.setAttribute("colspan", "3");
     424            td.setAttribute("class", "container");
     425            td.id = "container";
     426            td.colSpan = 3;
    430427            tr.appendChild(td);
    431428
    432429            var canv = document.createElement("canvas");
    433             canv.setAttribute("id",     "canvas"+z);
    434             canv.setAttribute("width",  "1");
    435             canv.setAttribute("height", "1");
     430            canv.id = "canvas"+z;
     431            canv.width = "1";
     432            canv.height = "1";
     433            //canv.onclick = function() { save(); }
    436434            canv.setAttribute("data-type", check[0]);
    437435            canv.setAttribute("data-file", data[0]);
    438436            canv.setAttribute("data-data", cols[1].substring(check[0].length+data[0].length+2));
    439             canv.setAttribute("style", "display:none;");
     437//            canv.setAttribute("style", "display:none;");
    440438            td.appendChild(canv);
    441439
    442440            var img = document.createElement("img");
    443441            img.src = "dummy.png";//needed in firefox
    444             img.setAttribute("id",    "image"+z);
    445             img.setAttribute("style", "width:1px;height:1px;");
     442            img.id = "image"+z;
     443            img.setAttribute("style", "width:1px;height:1px;display:none;");
    446444            td.appendChild(img);
    447445
    … …  
    471469        var td1 = document.createElement("td");
    472470        td1.setAttribute("class", "tcol1");
    473         td1.setAttribute("width", "100%");
     471        td1.width = "100%";
    474472        tr.appendChild(td1);
    475473
    476474        var td2 = document.createElement("td");
    477475        td2.setAttribute("class", "tcol2");
    478         td2.setAttribute("width", "18px");
     476        td2.width = "18px";
    479477        if (valid(cols[3]))
    480478        {
    … …  
    487485
    488486        var tab = document.createElement("table");
    489         tab.setAttribute("width", "100%");
     487        tab.width = "100%";
    490488        td1.appendChild(tab);
    491489
    … …  
    499497
    500498        var cell2 = document.createElement("td");
     499        cell2.id = "data"+counter;
    501500        cell2.setAttribute("class", "tcell2");
    502         cell2.setAttribute("id",    "data"+counter);
    503501        cell2.setAttribute("data-form",  cols[2]);
    504502        cell2.appendChild(document.createTextNode("---"));
    … …  
    515513    if (debug == true)
    516514    {
    517 
    518515        tr = document.createElement("tr");
    519516        tr.setAttribute("class", "row");
    520517
    521518        td = document.createElement("td");
    522         td.setAttribute("id", "debug"+z);
    523         td.setAttribute("colspan", "3");
     519        td.id = "debug"+z;
     520        td.colSpan = 3;
    524521        tr.appendChild(td);
    525522
    … …  
    559556
    560557    if ($("table"+z).offsetHeight == H || cnt==2)
    561         return;
     558    {
     559        // ------ debug -----
     560        if (debug == true)
     561        {
     562            $('debug'+z).innerHTML = "";
     563            $('debug'+z).innerHTML += "|W="+W +"/"+H;
     564            $('debug'+z).innerHTML += "|H="+h+"/"+$("table"+z).offsetHeight+"/"+img.offsetHeight;
     565            $('debug'+z).innerHTML += "|I="+img.style.height+"+"+H+"-"+h;
     566        }
     567        return;
     568    }
    562569
    563570    resizeimpl(z, ++cnt);
    … …  
    567574{
    568575    resizeimpl(z, 0);
    569 
    570     // ------ debug -----
    571     if (debug == true)
    572     {
    573         $('debug'+z).innerHTML = "";
    574         $('debug'+z).innerHTML += "|W="+W +"/"+H;
    575         $('debug'+z).innerHTML += "|H="+h+"/"+$("table"+z).offsetHeight+"/"+img.offsetHeight;
    576         $('debug'+z).innerHTML += "|I="+img.style.height+"+"+H+"-"+h;
    577     }
    578576}
    579577
    … …  
    598596    }
    599597
    600     //intervalSlide = setInterval("doSlideOut("+z+")", 25);
    601 
    602     //var k = (z+1)%2;
    603     //$("table"+k).style.display="";
    604     //$("table"+z).style.display="";
    605     //$("table"+k).style.zIndex="0";
    606     //$("table"+z).style.zIndex="1";
    607     //$("table"+k).style.left=0;
    608     //$("table"+z).style.left=0;
    609     //$("table"+k).style.backgroundColor = "#ffffff";
    610     //$("table"+z).style.backgroundColor = "#ffffff";
    611     //doresize(k);
    612     //intervalSlide = setInterval("doSlide("+z+",1)", 50);
     598    var W = window.innerWidth;
     599    if (W==0)
     600    {
     601        $("table"+newz).style.left="0px";
     602        $("body").setAttribute("data-visible", newz);
     603        $("body").removeChild($("table"+oldz));
     604        return;
     605    }
    613606
    614607    if (newz>oldz)
    615         $("table"+newz).style.left=window.innerWidth+"px";
     608        $("table"+newz).style.left = W+"px";
    616609    else
    617         $("table"+newz).style.left=(-window.innerWidth-1)+"px";
     610        $("table"+newz).style.left = (-W-1)+"px";
    618611
    619612    //window.clearTimeout(timeoutText);
    … …  
    662655    t1.style.left = x1+"px";
    663656}
    664 
    665 /*
    666 function doSlide(z, dir)
    667 {
    668     var k = (z+1)%2;
    669 
    670     var W = window.innerWidth;
    671 
    672     var tz = $("table"+z);
    673     var tk = $("table"+k);
    674 
    675     var xz = tz.offsetLeft;
    676     var xk = tk.offsetLeft;
    677 
    678     var ixz = parseInt(xz, 10);
    679     var ikz = parseInt(xk, 10);
    680 
    681     ixz += dir*W/10;
    682     ikz -= dir*W/10;
    683 
    684     tz.style.left = parseInt(ixz, 10)+"px";
    685     tk.style.left = parseInt(ikz, 10)+"px";
    686 
    687     if (ixz>W/2)
    688     {
    689         clearInterval(intervalSlide);
    690 
    691         $("table"+k).style.zIndex="1";
    692         $("table"+z).style.zIndex="0";
    693 
    694         $("body").setAttribute("data-visible", k);
    695         doresize(k);
    696 
    697         intervalSlide = setInterval("doSlide("+z+",-1)", 50);
    698     }
    699     if (ikz>0)
    700     {
    701         clearInterval(intervalSlide);
    702 
    703         tz.style.left = 0;
    704         tk.style.left = 0;
    705 
    706         tz.style.display="none";
    707     }
    708 }
    709 
    710 
    711 function doSlideOut(z)
    712 {
    713     var table = $("table"+z);
    714 
    715     var W = window.innerWidth;
    716     var x = table.offsetLeft;
    717 
    718     var ix = parseInt(x, 10);
    719     if (ix>W)
    720     {
    721         clearInterval(intervalSlide);
    722 
    723         table.style.display="none";
    724 
    725         z = (z+1)%2;
    726         table = $("table"+z);
    727 
    728         table.style.display="";
    729         table.style.left = window.innerWidth+"px";
    730 
    731         $("body").setAttribute("data-visible", z);
    732         doresize(z);
    733 
    734         intervalSlide = setInterval("doSlideIn("+z+")", 25);
    735         return;
    736     }
    737 
    738     ix += W/10;
    739     table.style.left=ix+"px";
    740 }
    741 
    742 function doSlideIn(z)
    743 {
    744     var table = $("table"+z);
    745 
    746     var W = window.innerWidth;
    747     var x = table.offsetLeft;
    748 
    749     var ix = parseInt(x, 10);
    750 
    751     ix -= W/10;
    752     if (ix<0)
    753         ix = 0;
    754 
    755     table.style.left=ix+"px";
    756 
    757     if (ix<=0)
    758     {
    759         clearInterval(intervalSlide);
    760         return;
    761     }
    762 }
    763 */
    764657
    765658var timeoutText = null;
    … …  
    775668    if (isSliding() || !valid(fname))
    776669    {
     670        // invalidate?
    777671        timeoutText = setTimeout(refresh_text, 1000);
    778672        return;
    779673    }
    780674
    781     var xmlHttp = new XMLHttpRequest();
    782     xmlHttp.open('POST', fname+'.txt', true);
    783     xmlHttp.onload = function ()
    784     {
    785         if (xmlHttp.status!=200)
     675    var xmlText = new XMLHttpRequest();
     676    xmlText.open('POST', fname+'.txt', true);
     677    xmlText.onload = function ()
     678    {
     679        if (xmlText.status!=200)
    786680        {
    787             alert("ERROR[1] - HTTP request '"+fname+".txt': "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
     681            alert("ERROR[1] - HTTP request '"+fname+".txt': "+xmlText.statusText+" ["+xmlText.status+"]");
    788682            timeoutText = setTimeout(refresh_text, 10000);
    789683            return;
    … …  
    793687        {
    794688            cycleCol($("ldot"+z));
    795             update_text(fname, xmlHttp.responseText);
     689            update_text(fname, xmlText.responseText);
    796690        }
    797691        timeoutText = setTimeout(refresh_text, 3000);
    798692    };
    799     xmlHttp.send(null);
     693    xmlText.send(null);
    800694}
    801695
    … …  
    811705}
    812706
     707/*
    813708function gray(id, str)
    814709{
    … …  
    827722        e.style.textDecoration="line-through";
    828723    }
    829 
    830 }
    831 
     724}
     725*/
    832726var date0 = null;
    833727
    … …  
    878772    for (var line=1; line<tokens.length; line++)
    879773    {
     774        if (tokens[line].length==0)
     775            continue;
     776
    880777        var c = tbody.rows[line-1].cells[1];
    881778        if (c == undefined)
    … …  
    919816    if (isSliding() || !valid(fname))
    920817    {
     818        // invalidate?
    921819        timeoutGraphics = setTimeout(refresh_graphics, 1000);
    922820        return;
    923821    }
    924822
    925     var xmlHttp = new XMLHttpRequest();
    926     xmlHttp.open('POST', fname, true);
    927     xmlHttp.onload = function()
    928     {
    929         if (xmlHttp.status!=200)
     823    var xmlGfx = new XMLHttpRequest();
     824    xmlGfx.open('POST', fname, true);
     825    xmlGfx.onload = function()
     826    {
     827        if (xmlGfx.status!=200)
    930828        {
    931             alert("ERROR[2] - Request '"+fname+"': "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
     829            alert("ERROR[2] - Request '"+fname+"': "+xmlGfx.statusText+" ["+xmlGfx.status+"]");
    932830            timeoutGraphics = setTimeout(refresh_graphics, 10000);
    933831            //****** invalidate ******
    … …  
    938836        {
    939837            cycleCol($("rdot"+z));
    940             process_eventdata(xmlHttp.responseText);
     838            process_eventdata(xmlGfx.responseText);
    941839        }
    942840        timeoutGraphics = setTimeout(refresh_graphics, 5000)
    943841    };
    944     xmlHttp.send(null);
     842    xmlGfx.send(null);
    945843}
    946844
    … …  
    1074972    if (data.length!=40 && data.length!=160 && data.length!=320 && data.length!=1440)
    1075973    {
    1076         alert("Data length mismatch ("+data.length+")");
     974        alert("Camera - Received data has invalid size ("+data.length+"b)");
    1077975        return;
    1078976    }
    … …  
    11491047}
    11501048
    1151 function drawCamLegend(canv)
    1152 {
    1153     var vals = canv.getAttribute("data-data").split("/");
    1154 
    1155     var v0 = parseFloat(vals[0]);
    1156     var v1 = parseFloat(vals[1]);
     1049function drawCamLegend(canv, min, max)
     1050{
     1051    var unit = canv.getAttribute("data-data");//.split("/");
     1052    if (unit.length>0)
     1053        unit = " "+unit;
     1054
     1055    var v0 = parseFloat(min);
     1056    var v1 = parseFloat(max);
    11571057
    11581058    var diff = v1-v0;
    … …  
    11671067    ctx.textBaseline = "top";
    11681068
    1169     for (var i=0; i<9; i++)
     1069    for (var i=0; i<11; i++)
    11701070    {
    11711071        ctx.strokeStyle = "#"+color(16*i);
    1172         ctx.strokeText((v0+diff*i/8)+vals[2], cw-5, 135-i*15);
    1173     }
    1174 }
    1175 
    1176 function drawGraph(canv, data)
    1177 {
     1072        ctx.strokeText((v0+diff*i/10)+unit, cw-5, 120-i*12);
     1073    }
     1074}
     1075
     1076function drawGraph(canv, min, max, data)
     1077{
     1078    var unit = canv.getAttribute("data-data");//.split("/");
     1079    if (unit.length>0)
     1080        unit = " "+unit;
     1081
    11781082    var cw = canv.width;
    11791083    var ch = canv.height;
    … …  
    11811085    var ctx = canv.getContext("2d");
    11821086
    1183     var vals = canv.getAttribute("data-data").split("/");
    1184 
    11851087    var dw = 3;  // tick width
    11861088
    … …  
    11901092    ctx.textAlign = "right";
    11911093
    1192     var dim0 = ctx.measureText(vals[0]);
    1193     var dim1 = ctx.measureText(vals[1]);
    1194 
    1195     var tw = vals.length>=2 ? Math.max(dim0.width, dim1.width)+dw+2 : 0;
    1196 
    1197     var ml = vals.length>=2 ? 5+tw   : 10; // margin left
    1198     var mr = 10;                           // margin right
    1199 
    1200     var mt = vals.length>=2 ? fs/2+5 : 5; // margin top
    1201     var mb = vals.length>=2 ? fs/2+4 : 5; // margin bottom
     1094    var dim0 = ctx.measureText(min+unit);
     1095    var dim1 = ctx.measureText(max+unit);
     1096
     1097    var tw = Math.max(dim0.width, dim1.width)+dw+2;
     1098
     1099    var ml = 5+tw; // margin left
     1100    var mr = 10;   // margin right
     1101
     1102    var mt = fs/2+5; // margin top
     1103    var mb = fs/2+4; // margin bottom
    12021104
    12031105    var nx = 20;
    … …  
    12621164    ctx.closePath();
    12631165
    1264     if (vals.length>=2)
    1265     {
    1266         ctx.textBaseline = "bottom";
    1267         ctx.strokeText(vals[0], ml-dw-2, ch-1);
    1268 
    1269         ctx.textBaseline = "top";
    1270         ctx.strokeText(vals[1], ml-dw-2, 0);
    1271     }
    1272 }
     1166    ctx.textBaseline = "bottom";
     1167    ctx.strokeText(min+unit, ml-dw-2, ch-1);
     1168
     1169    ctx.textBaseline = "top";
     1170    ctx.strokeText(max+unit, ml-dw-2, 0);
     1171}
     1172
     1173var gfxtime0 = null;
    12731174
    12741175function process_eventdata(result)
    12751176{
     1177    if (result.length==0)
     1178        return;
     1179
    12761180    var z = $("body").getAttribute("data-visible");
    12771181    var canv = $("canvas"+z);
    … …  
    12841188    ctx.clearRect(0, 0, canv.width, canv.height);
    12851189
     1190    var data = result.split('\n');
     1191    if (result.length<3)
     1192        return;
     1193
     1194    var l = data[0].length+1+data[1].length+1;
     1195
    12861196    switch (type)
    12871197    {
    1288     case "hist":   drawGraph(canv, result); break;
    1289     //case "camera": drawCam(result);     break;
    1290     case "camera": drawFullCam(result); drawCamLegend(canv); break;
    1291     }
    1292 
    1293     $("image"+z).src = canv.toDataURL("image/png");
    1294 }
    1295 
    1296 /*
     1198        //case "camera": drawCam(result);     break;
     1199    case "hist":
     1200        drawGraph(canv, data[0], data[1], result.substr(l));
     1201        break;
     1202    case "camera":
     1203        drawFullCam(result.substr(l));
     1204        drawCamLegend(canv, data[0], data[1]);
     1205        break;
     1206    }
     1207
     1208    var date = new Date();
     1209    if (gfxtime0 != null && gfxdate0.getTime()+60000>date.getTime())
     1210    {
     1211        ctx.fillStyle = "rgba(255, 255, 255, 0.75)";
     1212        ctx.fillRect(0, 0, canv.width, canv.height);
     1213    }
     1214
     1215    //$("image"+z).src = canv.toDataURL("image/png");
     1216}
     1217
    12971218function save()
    12981219{
    … …  
    13061227    document.location.href = img;
    13071228}
    1308 */
     1229
    13091230window['onload'] = onload;
Note: See TracChangeset for help on using the changeset viewer.