Ignore:
Timestamp:
05/24/12 21:22:09 (13 years ago)
Author:
tbretz
Message:
Optimizations; simplifications; some layout cosmetics
File:
1 edited

Legend:

Unmodified
Added
Removed

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

    r13881 r13886  
    160160*/
    161161function $(id) { return document.getElementById(id); }
     162function $new(name) { return document.createElement(name); }
     163function $txt(txt) { return document.createTextNode(txt); }
    162164function trim(str) { return str.replace("/^\s\s*/", '').replace("/\s\s*$/", ''); }
    163165function valid(str) { if (str==undefined) return false; if (str.length==0) return false; return true;}
    164166function isSliding() { var z = $("body").getAttribute("data-visible"); return $("table"+z).offsetLeft!=0; }
    165 function htmlDecode(input) { var e = document.createElement('div'); e.innerHTML = input; return e.childNodes[0].nodeValue; }
     167function htmlDecode(input) { var e = $new('div'); e.innerHTML = input; return e.childNodes[0].nodeValue; }
     168function setUTC(el, time) { var str = time.toUTCString(); var utc = str.substr(str.length-12, 8); el.innerHTML = "• "+utc+" UTC •"; }
    166169
    167170function cycleCol(el)
    … …  
    352355        $("body").removeChild(table);
    353356
    354     table = document.createElement("table");
     357    table = $new("table");
    355358    table.setAttribute("class", "tborder");
    356359    table.id = "table"+z;
    … …  
    364367    // -----------------------------------------------------
    365368
    366     var th = document.createElement("thead");
     369    var th = $new("thead");
    367370    th.colSpan = 3;
    368371    th.width = "100%";
    369372    table.appendChild(th);
    370373
    371     var htr = document.createElement("tr");
     374    var htr = $new("tr");
    372375    th.appendChild(htr);
    373376
    374     var htd = document.createElement("td");
     377    var htd = $new("td");
    375378    htd.setAttribute("class", "thead");
    376379    htd.colSpan = 3;
    … …  
    380383    // -------------
    381384
    382     var htab = document.createElement("table");
     385    var htab = $new("table");
    383386    htab.width = "100%";
    384387    htd.appendChild(htab);
    385388
    386     var hhtr = document.createElement("tr");
     389    var hhtr = $new("tr");
    387390    htab.appendChild(hhtr);
    388391
    389     var htd0 = document.createElement("td");
    390     var htd1 = document.createElement("td");
    391     var htd2 = document.createElement("td");
    392     var htd3 = document.createElement("td");
    393     var htd4 = document.createElement("td");
     392    var htd0 = $new("td");
     393    var htd1 = $new("td");
     394    var htd2 = $new("td");
     395    var htd3 = $new("td");
     396    var htd4 = $new("td");
    394397    htd0.setAttribute("class", "tcell1");
    395398    htd1.setAttribute("class", "tcell2");
    … …  
    411414    htd4.style.verticalAlign = "middle";
    412415*/
    413     var div1 = document.createElement("div");
    414     var div2 = document.createElement("div");
    415     var div3 = document.createElement("div");
    416     var div4 = document.createElement("div");
     416    var div1 = $new("div");
     417    var div2 = $new("div");
     418    var div3 = $new("div");
     419    var div4 = $new("div");
    417420    div4.id = "warn"+z;
    418421    div2.setAttribute("class", "icon_white");
    419     div3.setAttribute("class", "icon_white");
    420422    div4.setAttribute("class", "icon_color");
    421423    div2.setAttribute("style", "background-position:-396px 50%;");
    422     div3.setAttribute("style", "background-position:-575px 50%;");
    423424    div4.setAttribute("style", "display:none;background-position:-12px -12px;");
    424     div3.onclick = function() { this.style.backgroundColor='rgba(0,0,0,0.77)'; loadPage('fact',  z,  -1); }
    425425    div2.onclick = function() { this.style.backgroundColor='rgba(0,0,0,0.77)'; loadPage(fname,   z, -dz); }
    426426    div4.onclick = function() { this.style.backgroundColor='rgba(0,0,0,0.77)'; loadPage('error', z,  +1); }
    427427
    428     var sp0 = document.createElement("span");
    429     var sp1 = document.createElement("span");
    430     var sp2 = document.createElement("span");
     428    if (name=="fact")
     429    {
     430        div3.setAttribute("class", "icon_color");
     431        div3.setAttribute("style", "background-position:-58px -146px;");
     432    }
     433    else
     434    {
     435        div3.setAttribute("class", "icon_white");
     436        div3.setAttribute("style", "background-position:-575px 50%;");
     437        div3.onclick = function() { this.style.backgroundColor='rgba(0,0,0,0.77)'; loadPage('fact',  z,  -1); }
     438    }
     439
     440    var sp0 = $new("span");
     441    var sp1 = $new("span");
     442    var sp2 = $new("span");
    431443    sp0.id = "ldot" +z;
    432444    sp1.id = "title"+z;
    … …  
    435447    sp0.setAttribute("data-color", "3");
    436448    sp2.setAttribute("data-color", "3");
    437     sp0.appendChild(document.createTextNode(" \u2022 "));
    438     sp1.appendChild(document.createTextNode(title));
    439     sp2.appendChild(document.createTextNode(" \u2022 "));
     449    sp0.appendChild($txt(" \u2022 "));
     450    sp1.appendChild($txt(title));
     451    sp2.appendChild($txt(" \u2022 "));
    440452    if (is_cmd)
    441453    {
    … …  
    450462    div1.setAttribute("style", "font-size:small;");
    451463    div1.id = "reporttime"+z;
    452     div1.appendChild(document.createTextNode("---"));
     464    div1.appendChild($txt("---"));
    453465
    454466    div1.onclick = function() { this.style.backgroundColor='rgba(0,0,0,0.77)'; sendCommand('stop'); this.style.backgroundColor=''; }
    … …  
    461473    if (dz!=0/* && z+dz!=0*/)
    462474        htd2.appendChild(div2); // back
    463     if (lines[0]!="FACT")
    464         htd3.appendChild(div3); // home
     475    htd3.appendChild(div3); // home
    465476    htd4.appendChild(div4);     // Warning
    466477
    467478    // -----------------------------------------------------
    468479
    469     var tbody = document.createElement("tbody");
     480    var tbody = $new("tbody");
    470481    table.appendChild(tbody);
    471482
    472483    // -----------------------------------------------------
    473484
    474     var tf = document.createElement("tfoot");
     485    var tf = $new("tfoot");
    475486    table.appendChild(tf);
    476487
    477     var ftr = document.createElement("tr");
     488    var ftr = $new("tr");
    478489    tf.appendChild(ftr);
    479490
    480     var ftd = document.createElement("td");
     491    var ftd = $new("td");
    481492    ftd.setAttribute("class",   "tfoot");
    482493    ftd.width = "100%";
    … …  
    484495    ftr.appendChild(ftd);
    485496
    486     var ftab = document.createElement("table");
     497    var ftab = $new("table");
    487498    ftab.width = "100%";
    488499    ftd.appendChild(ftab);
    489500
    490     var ftdH = document.createElement("td");
    491     var ftd0 = document.createElement("td");
    492     var ftd1 = document.createElement("td");
    493     var ftd2 = document.createElement("td");
    494     var ftd3 = document.createElement("td");
     501    var ftdH = $new("td");
     502    var ftd0 = $new("td");
     503    var ftd1 = $new("td");
     504    var ftd2 = $new("td");
     505    var ftd3 = $new("td");
    495506    ftdH.setAttribute("width", "1px");
    496507    ftd2.setAttribute("width", "1px");
    … …  
    509520    ftab.appendChild(ftd3);
    510521
    511     var fdivH = document.createElement("div");
    512     var fdiv0 = document.createElement("span");
    513     var fdiv1 = document.createElement("span");
    514     var fdiv2 = document.createElement("div");
    515     var fdiv3 = document.createElement("div");
     522    var fdivH = $new("div");
     523    var fdiv0 = $new("span");
     524    var fdiv1 = $new("span");
     525    var fdiv2 = $new("div");
     526    var fdiv3 = $new("div");
    516527    ftd0.style.paddingLeft = "5px";
    517 
    518     fdivH.setAttribute("class", "icon_white");
     528    fdiv2.id="cmd"+z;
     529
    519530    fdiv2.setAttribute("class", "icon_white");
    520531    fdiv3.setAttribute("class", "icon_white");
    521     fdivH.setAttribute("style", "background-position:-611px 50%;");
    522532    fdiv2.setAttribute("style", "background-position:-72px 50%;");
    523     fdivH.onclick = function() { this.style.backgroundColor='rgba(0,0,0,0.77)'; loadPage('help-'+name, z, +1); }
    524533    fdiv2.onclick = function() { this.style.backgroundColor='rgba(0,0,0,0.77)'; sendCommand('stop'); this.style.backgroundColor=''; }
    525534    if (is_cmd)
    … …  
    533542        fdiv3.setAttribute("style", "background-position:-288px 50%;");
    534543    }
     544
     545    if (name.substr(0, 5)=="help-")
     546    {
     547        fdivH.setAttribute("class", "icon_color");
     548        fdivH.setAttribute("style", "background-position:-408px -57px;");
     549    }
     550    else
     551    {
     552        fdivH.setAttribute("class", "icon_white");
     553        fdivH.setAttribute("style", "background-position:-611px 50%;");
     554        fdivH.onclick = function() { this.style.backgroundColor='rgba(0,0,0,0.77)'; loadPage('help-'+name, z, +1); }
     555    }
     556
    535557
    536558    fdiv0.setAttribute("style", "font-size:large;");
    … …  
    538560    fdiv1.id = "localtime"+z;
    539561
    540     fdiv0.appendChild(document.createTextNode("logbook"));
    541     fdiv1.appendChild(document.createTextNode("loading..."));
     562    fdiv0.appendChild($txt("logbook"));
     563    fdiv1.appendChild($txt("loading..."));
    542564
    543565    ftdH.appendChild(fdivH);
    … …  
    571593            var data = cols[1].substring(check[0].length+1).split("/");
    572594
    573             var tr = document.createElement("tr");
     595            var tr = $new("tr");
    574596            tr.setAttribute("class", "row");
    575597            //tr.setAttribute("style", "margin:0;padding:0;");
    576598
    577             var td = document.createElement("td");
     599            var td = $new("td");
    578600            td.setAttribute("class", "container");
    579601            td.id = "container";
    … …  
    581603            tr.appendChild(td);
    582604
    583             var canv = document.createElement("canvas");
     605            var canv = $new("canvas");
    584606            canv.id = "canvas"+z;
    585607            canv.width = "1";
    … …  
    592614            td.appendChild(canv);
    593615
    594             var img = document.createElement("img");
     616            var img = $new("img");
    595617            img.src = "img/dummy.png";//needed in firefox
    596618            img.id = "image"+z;
    … …  
    602624        }
    603625
    604         var tr = document.createElement("tr");
     626        var tr = $new("tr");
    605627        tr.setAttribute("class", "row");
    606628        if (valid(cols[0]))
    … …  
    609631            tr.setAttribute("onclick", "this.style.background='#ccb'; loadPage('"+cols[3]+"', "+z+", +1);");
    610632
    611         var td0 = document.createElement("td");
     633        var td0 = $new("td");
    612634        td0.setAttribute("class", "tcol0");
    613635        tr.appendChild(td0);
    … …  
    615637        if (check.length>0 && check[0]=="image")
    616638        {
    617             var img = document.createElement("img");
     639            var img = $new("img");
    618640            img.style.width="100%";
    619641            img.src = check[1];
    … …  
    629651        if (valid(cols[0]))
    630652        {
    631             var sp = document.createElement("div");
     653            var sp = $new("div");
    632654            sp.setAttribute("class", "icon_black");
    633655            sp.setAttribute("style", "background-position: -144px 50%;");
    … …  
    635657        }
    636658
    637         var td1 = document.createElement("td");
     659        var td1 = $new("td");
    638660        td1.setAttribute("class", "tcol1");
    639661        td1.width = "100%";
    640662        tr.appendChild(td1);
    641663
    642         var td2 = document.createElement("td");
     664        var td2 = $new("td");
    643665        td2.setAttribute("class", "tcol2");
    644666        td2.width = "18px";
    … …  
    646668        if (valid(cols[3]))
    647669        {
    648             var sp = document.createElement("div");
     670            var sp = $new("div");
    649671            sp.setAttribute("class", "icon_black");
    650672            sp.setAttribute("style", "background-position: -108px 50%;");
    … …  
    653675        tr.appendChild(td2);
    654676
    655         var tab = document.createElement("table");
     677        var tab = $new("table");
    656678        tab.width = "100%";
    657679        td1.appendChild(tab);
    658680
    659         var innertr = document.createElement("tr");
     681        var innertr = $new("tr");
    660682        tab.appendChild(innertr);
    661683
    662         var cell1 = document.createElement("td");
     684        var cell1 = $new("td");
    663685        cell1.setAttribute("class", "tcell1");
    664686
    665         var cell2 = document.createElement("td");
     687        var cell2 = $new("td");
    666688        cell2.setAttribute("class", valid(cols[1]) ? "tcell2" : "tcell2l");
    667689
    668690        if (check.length==0 || check[0]!="input")
    669691        {
    670             var div = document.createElement("div");
     692            var div = $new("div");
    671693            div.innerHTML = cols[1];
    672694            cell1.appendChild(div);
    673             //cell1.appendChild(document.createTextNode(cols[1]));
     695            //cell1.appendChild($txt(cols[1]));
    674696
    675697            if (cols.length>2 && cols[2].length>0)
    … …  
    677699                cell2.id = "data"+z+"-"+counter;
    678700                cell2.setAttribute("data-form",  cols[2]);
    679                 cell2.appendChild(document.createTextNode("---"));
     701                cell2.appendChild($txt("---"));
    680702                counter++;
    681703            }
    … …  
    690712                alert("Argument name missing for'"+check[1]+"'");
    691713
    692             var div = document.createElement("div");
     714            var div = $new("div");
    693715            div.innerHTML = opt[0];
    694716            cell1.appendChild(div);
    695             //cell1.appendChild(document.createTextNode(opt[0]));
    696 
    697             var input = document.createElement("input");
     717            //cell1.appendChild($txt(opt[0]));
     718
     719            var input = $new("input");
    698720            input.name = opt[1];
    699721            input.type = "text";
    … …  
    713735    if (true)
    714736    {
    715         tr = document.createElement("tr");
     737        tr = $new("tr");
    716738        tr.setAttribute("class", "row");
    717739
    718         td = document.createElement("td");
     740        td = $new("td");
    719741        td.colSpan = "3";
    720742        tr.appendChild(td);
    721743
    722         var sp = document.createElement("div");
     744        var sp = $new("div");
    723745        sp.setAttribute("class", "icon_color");
    724746        sp.setAttribute("style", "background-position: -144px -14px;");
    725747        td.appendChild(sp);
    726748
    727         sp = document.createElement("div");
     749        sp = $new("div");
    728750        sp.setAttribute("class", "icon_color");
    729751        sp.setAttribute("style", "background-position: -56px -14px;");
    … …  
    738760    if (debug == true)
    739761    {
    740         tr = document.createElement("tr");
     762        tr = $new("tr");
    741763        tr.setAttribute("class", "row");
    742764
    743         td = document.createElement("td");
     765        td = $new("td");
    744766        td.id = "debug"+z;
    745767        td.colSpan = 3;
    … …  
    923945{
    924946    var z=$("body").getAttribute("data-visible");
    925     var table = $("table"+z);
    926 
    927     // Is sliding or no file defined?
    928     var fname = table.getAttribute("data-file");
    929     if (isSliding() || !valid(fname))
    930     {
     947
     948    var fname = $("table"+z).getAttribute("data-file");
     949
     950    var is_help = fname.substr(0,5)=="help-";
     951
     952    // Is sliding, no file defined or just help text?
     953    if (isSliding() || !valid(fname) || is_help)
     954    {
     955        if (is_help)
     956        {
     957            setUTC($("localtime"+z), new Date());
     958            $("reporttime"+z).innerHTML="";
     959        }
     960
    931961        // invalidate?
    932962        timeoutText = setTimeout(refresh_text, 1000);
    … …  
    9981028        rtime.style.color = "";
    9991029
    1000     var str_file = stamp.toUTCString();
    1001     var str_now  = now.toUTCString();
    1002 
    1003     var utc_file = str_file.substr(str_file.length-12, 8);
    1004     var utc_now  = str_now.substr(str_now.length-12, 8);
    1005 
    1006     rtime.innerHTML = "• "+utc_file+" UTC •"
    1007     ltime.innerHTML = "• "+utc_now +" UTC •";
    1008 
    1009     $("warn"+z).style.display = header.length<2 || header[1]=='0' ? "none" : "";
     1030    setUTC(rtime, stamp);
     1031    setUTC(ltime, now);
     1032
     1033    // ----------------------------------------------------
     1034
     1035    $("warn"+z).style.display = header.length>=2 && header[1]=='1' ? "" : "none";
     1036
     1037    if (header.length==3)
     1038        $("cmd"+z).style.backgroundColor = header[2]=='1' ? "darkgreen" : "darkred";
    10101039
    10111040    // ----------------------------------------------------
    … …  
    10191048            continue;
    10201049
    1021         var e = document.getElementById("data"+z+"-"+line);
     1050        var e = $("data"+z+"-"+line);
    10221051        if (e == undefined)
    10231052            continue;
    … …  
    10411070        form = form.replace(/--:--:--/g, "<pre>  </pre> <pre>  </pre> <pre>  </pre>");
    10421071
    1043         var newe = document.createElement("div");
     1072        var newe = $new("div");
    10441073        newe.innerHTML = form;
    10451074        e.replaceChild(newe, e.lastChild);
    … …  
    11001129    if (hue<4) return parseInt(255*(4-hue), 10);
    11011130
    1102 /*
    1103     if (hue<1*5/4) return parseInt(255*hue*4/5);
    1104     if (hue<2*5/4) return parseInt(255);
    1105     if (hue<3*5/4) return parseInt(255*(3*5/4-hue)*4/5);
    1106 */
    1107 /*
    1108     if (hue<1.5) return parseInt(255*hue/1.5);
    1109     if (hue<3.0) return parseInt(255);
    1110     if (hue<4.5) return parseInt(255*(4.5-hue)/1.5);
    1111 */
    11121131    return 0.
    11131132}
    … …  
    11291148    return sr+sg+sb;
    11301149}
    1131 
    11321150
    11331151function color(col)
    … …  
    12961314function drawCamLegend(canv, data)
    12971315{
     1316    var unit = htmlDecode(canv.getAttribute("data-data"));
     1317
    12981318    var umin = data[1];
    12991319    var umax = data[2];
    13001320
    1301     var unit = htmlDecode(canv.getAttribute("data-data"));
    1302     //unit = unit.replace("&deg;",   "\u00B0");
    1303     //unit = unit.replace("&micro;", "\u00B5");
    1304     //unit = unit.replace("&sup2;",  "\u00B2");
    1305     //unit = unit.replace("&sup3;",  "\u00B3");
    1306 
    1307     var min = data[3]+unit
    1308     var med = data[4]+unit;
    1309     var max = data[5]+unit;
     1321    var min  = data[3]+unit
     1322    var med  = data[4]+unit;
     1323    var max  = data[5]+unit;
    13101324
    13111325    var v0 = parseFloat(umin);
    … …  
    13451359    var unit = htmlDecode(canv.getAttribute("data-data"));//.split("/");
    13461360
    1347     //unit = unit.replace("&deg;",   "\u00B0");
    1348     //unit = unit.replace("&micro;", "\u00B5");
    1349     //unit = unit.replace("&sup2;",  "\u00B2");
    1350     //unit = unit.replace("&sup3;",  "\u00B3");
    1351 
    13521361    var umin = vals[1]+unit;
    13531362    var umax = vals[2]+unit;
    … …  
    13611370
    13621371    var dw = 3;  // tick width
    1363 
    13641372    var fs = 8;  // font size
    13651373
    … …  
    14931501    if (tm.getTime()+60000<now.getTime())
    14941502    {
    1495         ctx.fillStyle = "rgba(255, 255, 255, 0.85)";
     1503        ctx.fillStyle = "rgba(255, 255, 255, 0.75)";
    14961504        ctx.fillRect(0, 0, canv.width, canv.height);
    14971505    }
Note: See TracChangeset for help on using the changeset viewer.