Changeset 13568


Ignore:
Timestamp:
05/05/12 19:26:06 (13 years ago)
Author:
tbretz
Message:
Many more changes and improvements; mainly made everything dynamic so that more fancy menus are possible; added back and home button.
Location:
trunk/FACT++/www
Files:
2 edited

Legend:

Unmodified
Added
Removed

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

    r13527 r13568  
    1 <!--<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional"
    2        "http://www.w3.org/TR/html4/loose.dtd">-->
    31<!DOCTYPE HTML>
    42<html>
    … …  
    119</head>
    1210
    13 <body id="body" onload="onload();" onresize="onresize();" data-visible='0'>
    14 
    15 <table id="table0" border="0" cellspacing="0" cellpadding="6" class="tborder" width="100%" style="overflow:hidden;position:fixed;top:0;left:0;display:none;" >
    16   <thead>
    17     <tr>
    18       <td class="thead" colspan="3" width="100%">
    19       <table width="100%"><tr>
    20           <td class="tcell1"><font size="+2"><span id="ldot0" data-col="3">&#8226;</span>&nbsp;<a href="forumdisplay.php?fid=1" id="title0">FACT</a>&nbsp;<span id="rdot0" data-col="3">&#8226;</span></font></td>
    21           <td class="tcell2"><font size="-2" id="reporttime0">---</font></td>
    22         </tr></table>
    23       </td>
    24     </tr>
    25   </thead>
    26   <tbody></tbody>
    27   <tfoot>
    28     <tr>
    29       <td class="tfoot" width="100%" colspan="3">
    30        <table width="100%"><tr>
    31           <td class="tcell1"><font size="+2"><A HREF="/logbook">logbook</A></font></td>
    32           <td class="tcell2"><font size="-2" id="localtime0">booting...</font></td>
    33         </tr></table>
    34       </td>
    35     </tr>
    36   </tfoot>
    37 </table>
    38 
    39 <table id="table1" border="0" cellspacing="0" cellpadding="6" class="tborder" width="100%" style="overflow:hidden;position:fixed;top:0;left:0;display:none;" >
    40   <thead>
    41     <tr>
    42       <td class="thead" colspan="3" width="100%">
    43       <table width="100%"><tr>
    44           <td class="tcell1"><font size="+2"><span id="ldot1" data-col="3">&#8226;</span>&nbsp;<a href="forumdisplay.php?fid=1" id="title1">FACT</a>&nbsp;<span id="rdot1" data-col="3">&#8226;</span></font></td>
    45           <td class="tcell2"><font size="-2" id="reporttime1">---</font></td>
    46         </tr></table>
    47       </td>
    48     </tr>
    49   </thead>
    50   <tbody></tbody>
    51   <tfoot>
    52     <tr>
    53       <td class="tfoot" width="100%" colspan="3">
    54        <table width="100%"><tr>
    55           <td class="tcell1"><font size="+2"><A HREF="/logbook">logbook</A></font></td>
    56           <td class="tcell2"><font size="-2" id="localtime1">booting...</font></td>
    57         </tr></table>
    58       </td>
    59     </tr>
    60   </tfoot>
    61 </table>
    62 
    63 </body>
     11<body id="body" onload="onload();" onresize="onresize();"/>
    6412</html>

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

    r13567 r13568  
    1 /*
    2     try { xmlHttp = new XMLHttpRequest(); }
    3     catch(e)
    4     {
    5         try { xmlHttp  = new ActiveXObject("Microsoft.XMLHTTP"); }
    6         catch(e)
    7         {
    8             try { xmlHttp  = new ActiveXObject("Msxml2.XMLHTTP"); }
    9             catch(e)
    10             {
    11                 alert("Your browser doesn't support dynamic reload.");
    12                 return;
    13             }
    14         }
    15     }
    16     */
    17 
    181function $(id) { return document.getElementById(id); }
    192function trim(str) { return str.replace("/^\s\s*/", '').replace("/\s\s*$/", ''); }
    203function valid(str) { if (str==undefined) return false; if (str.length==0) return false; return true;}
    21 function isSliding(){ return $("table0").offsetLeft!=0 && $("table1").offsetLeft!=0; }
     4function isSliding() { var z = $("body").getAttribute("data-visible"); return $("table"+z).offsetLeft!=0; }
     5
    226function cycleCol(el)
    237{
    24     var col = el.getAttribute("data-col");
     8    var col = el.getAttribute("data-color");
    259    col++;
    2610    col %= 31;
    27     el.setAttribute("data-col", col);
     11    el.setAttribute("data-color", col);
    2812    if (col>16)
    2913        col = 31-col;
    … …  
    4832          "4 -- "+navigator.userAgent);
    4933          */
    50     loadPage("fact", 0);
     34    loadPage("fact", 0, 0);
    5135}
    5236
    … …  
    5741}
    5842
    59 function loadPage(name, z)
     43function loadPage(name, z, dz)
    6044{
    6145    var xmlHttp = new XMLHttpRequest();
    … …  
    7155        }
    7256
    73         buildPage(name, xmlHttp.responseText, (z+1)%2);
    74         changePage(z);
     57        buildPage(name, xmlHttp.responseText, z, dz);
     58        changePage(z, z+dz);
    7559
    7660        //changePage(name, xmlHttp.resposeText);
    … …  
    8468
    8569
    86 function buildPage(name, text, z)
    87 {
     70function buildPage(name, text, oldz, dz)
     71{
     72    var fname = dz==0 ? "fact" : $("table"+oldz).getAttribute("data-file");
     73
     74    var z = oldz + dz;
     75
     76    var lines = text.split('\n');
     77
    8878    var table = $("table"+z);
    89     var p = table.tBodies.length==3 ? 1 : 0;
    90 
    91     var tbody = $("table"+z).tBodies[p];
    92 
    93     while (tbody.hasChildNodes())
    94         tbody.removeChild(tbody.lastChild);
    95 
    96     var lines = text.split('\n');
    97 
    98     if (lines.length>0)
    99     {
    100         /*
    101         var newe = document.createElement("span");
    102         newe.innerHTML = lines[0];
    103         var title = $("table"+z).tHead.rows[0].cells[0].childNodes[0].childNodes[1];
    104         title.replaceChild(newe, title.lastChild);
    105         */
    106 
    107         //var x = title.lastChild;
    108         //title.removeChild(title.lastChild);
    109         //title.appendChild(newe);
    110 
    111         var newe = document.createElement("span");
    112         newe.innerHTML = lines[0];
    113         var title = $("title"+z);//.innerHtml = lines[0];
    114         title.replaceChild(newe, title.lastChild);
    115     }
     79    if (table != undefined)
     80        $("body").removeChild(table);
     81
     82    table = document.createElement("table");
     83    table.setAttribute("class",       "tborder");
     84    table.setAttribute("id",          "table"+z);
     85    table.setAttribute("border",      "0");
     86    table.setAttribute("cellspacing", "0");
     87    table.setAttribute("cellpadding", "6");
     88    table.setAttribute("width",       "100%");
     89    table.setAttribute("style",       "overflow:hidden;position:fixed;top:0px;left:"+window.innerWidth+"px;");
     90
     91    // -----------------------------------------------------
     92
     93    var th = document.createElement("thead");
     94    th.setAttribute("colspan", "3");
     95    th.setAttribute("width",   "100%");
     96    table.appendChild(th);
     97
     98    var htr = document.createElement("tr");
     99    th.appendChild(htr);
     100
     101    var htd = document.createElement("td");
     102    htd.setAttribute("class",   "thead");
     103    htd.setAttribute("colspan", "3");
     104    htd.setAttribute("width",   "100%");
     105    htr.appendChild(htd);
     106
     107    // -------------
     108
     109    var htab = document.createElement("table");
     110    htab.setAttribute("width", "100%");
     111    htd.appendChild(htab);
     112
     113    var hhtr = document.createElement("tr");
     114    htab.appendChild(hhtr);
     115
     116    var htd0 = document.createElement("td");
     117    var htd1 = document.createElement("td");
     118    var htd2 = document.createElement("td");
     119    var htd3 = document.createElement("td");
     120    htd0.setAttribute("class", "tcell1");
     121    htd1.setAttribute("class", "tcell2");
     122    htd2.setAttribute("class", "tcell1");
     123    htd2.setAttribute("width", "1px");
     124    htd3.setAttribute("class", "tcell1");
     125    htd3.setAttribute("width", "1px");
     126    hhtr.appendChild(htd0);
     127    hhtr.appendChild(htd1);
     128    hhtr.appendChild(htd2);
     129    hhtr.appendChild(htd3);
     130
     131    var div0 = document.createElement("div");
     132    var div1 = document.createElement("div");
     133    var div2 = document.createElement("div");
     134    var div3 = document.createElement("div");
     135    div0.setAttribute("style", "font-size:x-large;");
     136    div2.setAttribute("class", "icon_white");
     137    div2.setAttribute("onclick","this.style.backgroundColor='rgba(0,0,0,0.77)'; loadPage('"+fname+"',"+z+","+(-dz)+");");
     138    div2.setAttribute("style", "background-position:-396px 50%;");
     139    div3.setAttribute("class", "icon_white");
     140    div3.setAttribute("onclick","this.style.backgroundColor='rgba(0,0,0,0.77)'; loadPage('fact',"+z+","+(-z)+");");
     141    div3.setAttribute("style", "background-position:-575px 50%;");
     142
     143    var sp0 = document.createElement("span");
     144    var sp1 = document.createElement("span");
     145    var sp2 = document.createElement("span");
     146    sp0.setAttribute("id", "ldot" +z);
     147    sp1.setAttribute("id", "title"+z);
     148    sp2.setAttribute("id", "rdot" +z);
     149    sp0.setAttribute("data-color", "3");
     150    sp2.setAttribute("data-color", "3");
     151    sp0.appendChild(document.createTextNode(" \u2022 "));
     152    sp1.appendChild(document.createTextNode(lines.length>0?lines[0]:"n/a"));
     153    sp2.appendChild(document.createTextNode(" \u2022 "));
     154
     155    div0.appendChild(sp0);
     156    div0.appendChild(sp1);
     157    div0.appendChild(sp2);
     158
     159    div1.setAttribute("style", "font-size:small;");
     160    div1.setAttribute("id", "reporttime"+z);
     161    div1.appendChild(document.createTextNode("---"));
     162
     163    htd0.appendChild(div0);
     164    htd1.appendChild(div1);
     165    htd2.appendChild(div2);
     166    htd3.appendChild(div3);
     167
     168    // -----------------------------------------------------
     169
     170    var tbody = document.createElement("tbody");
     171    table.appendChild(tbody);
     172
     173    // -----------------------------------------------------
     174
     175    var tf = document.createElement("tfoot");
     176    table.appendChild(tf);
     177
     178    var ftr = document.createElement("tr");
     179    tf.appendChild(ftr);
     180
     181    var ftd = document.createElement("td");
     182    ftd.setAttribute("class",   "tfoot");
     183    ftd.setAttribute("width",   "100%");
     184    ftd.setAttribute("colspan", "3");
     185    ftr.appendChild(ftd);
     186
     187    var ftab = document.createElement("table");
     188    ftab.setAttribute("width", "100%");
     189    ftd.appendChild(ftab);
     190
     191    var ftd0 = document.createElement("td");
     192    var ftd1 = document.createElement("td");
     193
     194    ftd0.setAttribute("class", "tcell1");
     195    ftd1.setAttribute("class", "tcell2");
     196
     197    ftab.appendChild(ftd0);
     198    ftab.appendChild(ftd1);
     199
     200    var fdiv0 = document.createElement("div");
     201    var fdiv1 = document.createElement("div");
     202
     203    fdiv0.setAttribute("style", "font-size:x-large;");
     204    fdiv1.setAttribute("style", "font-size:small;");
     205    fdiv1.setAttribute("id",    "localtime"+z);
     206
     207    fdiv0.appendChild(document.createTextNode("logbook"));
     208    fdiv1.appendChild(document.createTextNode("loading..."));
     209
     210    ftd0.appendChild(fdiv0);
     211    ftd1.appendChild(fdiv1);
     212
     213    $("body").appendChild(table);
    116214
    117215    var counter = 1;
    … …  
    130228        }
    131229
    132         /*
    133          <span class="ui-icon ui-icon-arrow-r ui-icon-shadow">
    134     -webkit-box-shadow: rgba(255, 255, 255, 0.398438) 0px 1px 0px 0px;
    135 background-attachment: scroll;
    136 background-clip: border-box;
    137 background-color: rgba(0, 0, 0, 0.398438);
    138 background-image: url(http://code.jquery.com/mobile/1.1.0/images/icons-18-white.png);
    139 background-origin: padding-box;
    140 background-position: -60px 50%;
    141 background-repeat: no-repeat;
    142 box-shadow: rgba(255, 255, 255, 0.398438) 0px 1px 0px 0px;
    143 margin-bottom: 0px;
    144 margin-left: 0px;
    145 margin-right: 0px;
    146 margin-top: -9px;
    147 padding: 0;
    148 position: absolute;
    149 right: 10px;
    150 top: 50%;
    151 white-space: nowrap;
    152 width: 18px;
    153 height: 18px;
    154 zoom: 1;
    155          </span>
    156          */
    157 
    158230        var check = cols[1].split("=");
    159231
    … …  
    164236            var tr = document.createElement("tr");
    165237            tr.setAttribute("class", "row");
    166             tr.setAttribute("style", "margin:0;padding:0;");
     238            //tr.setAttribute("style", "margin:0;padding:0;");
    167239
    168240            var td = document.createElement("td");
    … …  
    184256
    185257            var img = document.createElement("img");
    186             img.setAttribute("id",     "image"+z);
    187             img.setAttribute("width",  "1");
    188             img.setAttribute("height", "1");
     258            img.src = "dummy.png";//needed in firefox
     259            img.setAttribute("id",    "image"+z);
     260            img.setAttribute("style", "width:1px;height:1px;");
    189261            td.appendChild(img);
    190262
    … …  
    196268        tr.setAttribute("class", "row");
    197269        if (valid(cols[0]))
    198             tr.setAttribute("onclick", "this.style.background='#ccb'; loadPage('"+cols[0]+"',"+z+");");
     270            tr.setAttribute("onclick", "this.style.background='#ccb'; loadPage('"+cols[0]+"',"+z+",-1);");
    199271        if (valid(cols[3]))
    200             tr.setAttribute("onclick", "this.style.background='#ccb'; loadPage('"+cols[3]+"',"+z+");");
     272            tr.setAttribute("onclick", "this.style.background='#ccb'; loadPage('"+cols[3]+"',"+z+",+1);");
    201273        //tr.setAttribute("id",    cols[0]+"_row");
    202274
    … …  
    204276        td0.setAttribute("class", "tcol0");
    205277        if (valid(cols[0]))
    206             td0.appendChild(document.createTextNode("<"));
     278        {
     279            var sp = document.createElement("div");
     280            sp.setAttribute("class", "icon_gray");
     281            sp.setAttribute("style", "background-position: -144px 50%;");
     282            td0.appendChild(sp);
     283        }
    207284        tr.appendChild(td0);
    208285
    … …  
    214291        var td2 = document.createElement("td");
    215292        td2.setAttribute("class", "tcol2");
     293        td2.setAttribute("width", "18px");
    216294        if (valid(cols[3]))
    217             td2.appendChild(document.createTextNode(">"));
     295        {
     296            var sp = document.createElement("div");
     297            sp.setAttribute("class", "icon_gray");
     298            sp.setAttribute("style", "background-position: -108px 50%;");
     299            td2.appendChild(sp);
     300        }
    218301        tr.appendChild(td2);
    219302
    … …  
    276359    var H = window.innerHeight;
    277360
    278     var ih = img.height + H - h;
     361    var ih = H - h + parseInt(img.style.height, 10);
    279362
    280363    img.style.width = W +"px";
    … …  
    285368
    286369    // ------ debug -----
     370
    287371    $('debug').innerHTML = "";
    288372    $('debug').innerHTML += "|W="+W +"/"+H;
    289     $('debug').innerHTML += "|H="+h+"/"+$("table"+z).offsetHeight;
    290     $('debug').innerHTML += "|I="+ih;
     373    $('debug').innerHTML += "|H="+h+"/"+$("table"+z).offsetHeight+"/"+img.offsetHeight;
     374    $('debug').innerHTML += "|I="+img.style.height+"+"+H+"-"+h;
    291375}
    292376
    293377var intervalSlide = null;
    294378
    295 function changePage(z)
     379function changePage(oldz, newz)
    296380{
    297381    // No page displayed yet
    298     if ($("table0").style.display=="none" && $("table1").style.display=="none")
    299     {
    300         $("table0").style.display="";
    301         $("table1").style.display="";
    302 
    303         $("table0").style.left=window.innerWidth+"px";
    304         $("table1").style.left="0px";
    305 
    306         $("body").setAttribute("data-visible", "1");
    307 
    308         doresize(1);
     382    if (oldz==newz)
     383    {
     384        $("table"+newz).style.left="0px";
     385        $("body").setAttribute("data-visible", newz);
     386
     387        doresize(0);
    309388
    310389        //setInterval(refresh_text, 1000);
    … …  
    330409    //intervalSlide = setInterval("doSlide("+z+",1)", 50);
    331410
    332     $("body").setAttribute("data-visible", (z+1)%2);
    333     intervalSlide = setInterval(doShift, 75, z);
    334 }
    335 
    336 function doShift(z)
     411    if (newz>oldz)
     412        $("table"+newz).style.left=window.innerWidth+"px";
     413    else
     414        $("table"+newz).style.left=(-window.innerWidth-1)+"px";
     415
     416    $("body").setAttribute("data-visible", newz);
     417    intervalSlide = setInterval(doShift, 75, oldz, newz);
     418}
     419
     420function doShift(oldz, newz)
    337421{
    338422    var W = window.innerWidth;
    339423
    340     var t0 = $("table0");
    341     var t1 = $("table1");
     424    var t0 = $("table"+oldz);
     425    var t1 = $("table"+newz);
    342426
    343427    var x0 = t0.offsetLeft;
    344428    var x1 = t1.offsetLeft;
    345429
    346     if (/*x1<0 && x0>=0 &&*/ z==0)
     430    if (newz<oldz)
    347431    {
    348432        x0 += W/5;
    349433        x1 += W/5;
    350 
    351         if (x1>=0)
    352         {
    353             x0 = W;
    354             x1 = 0;
    355 
    356             clearInterval(intervalSlide);
    357         }
    358     }
    359 
    360     if (/*x0>0 && x1<=0 &&*/ z==1)
     434    }
     435
     436    if (newz>oldz)
    361437    {
    362438        x0 -= W/5;
    363439        x1 -= W/5;
    364 
    365         if (x0<=0)
    366         {
    367             x0 = 0;
    368             x1 = -W-1;
    369 
    370             clearInterval(intervalSlide);
    371         }
    372     }
    373 
    374     t0.style.left = parseInt(x0, 10)+"px";
    375     t1.style.left = parseInt(x1, 10)+"px";
     440    }
     441
     442    if ((newz<oldz && x1>=0) || (newz>oldz && x1<=0))
     443    {
     444        clearInterval(intervalSlide);
     445        $("body").removeChild(t0);
     446        t1.style.left = "0px";
     447        return;
     448    }
     449
     450    t0.style.left = x0+"px";
     451    t1.style.left = x1+"px";
    376452}
    377453
    … …  
    574650    date0 = date2;
    575651
     652    var utc = date0.toUTCString();
     653
    576654    time.innerHTML =
    577         "&#8226;&nbsp;"+date0.toUTCString()+"&nbsp;&#8226;";//getUTCFullYear()+"/"+date0.getUTCMonth()+"/"+date0.getUTCDate()+" "+date0.getUTCHours()+":"+date0.getUTCMinutes()+":"+date0.getUTCSeconds()+"."+date0.getUTCMilliseconds();
     655        "&#8226;&nbsp;"+utc.substr(utc.length-12, 8)+"&nbsp;UTC&nbsp;&#8226;"
    578656    ltime.innerHTML =
    579         "&#8226;&nbsp;"+date1.toLocaleString()+"&nbsp;&#8226;";//ISOlocalDateStr();//ltoString();
     657        "&#8226;&nbsp;"+date1.toLocaleString()+"&nbsp;&#8226;";
    580658
    581659    // ----------------------------------------------------
    … …  
    780858    var ctx = beginDrawCam(80.5);
    781859    ctx.rotate(Math.PI/2);
     860
    782861    ctx.scale(1, Math.sqrt(3)/2);
    783862
    … …  
    843922function drawCamLegend(canv)
    844923{
    845     //alert(canv.getAttribute("data-data"));
    846 
    847924    var vals = canv.getAttribute("data-data").split("/");
    848925    var diff = vals[1]-vals[0];
    … …  
    862939        ctx.strokeText((vals[1]-diff*i/8)+vals[2], cw-5, 135-i*15);
    863940    }
    864     /*
    865     ctx.strokeStyle = "#"+color(16);
    866     ctx.strokeText("-1.5V", cw-5, 120);
    867 
    868     ctx.strokeStyle = "#"+color(32);
    869     ctx.strokeText("-1.0V", cw-5, 105);
    870 
    871     ctx.strokeStyle = "#"+color(48);
    872     ctx.strokeText("-0.5V", cw-5, 90);
    873 
    874     ctx.strokeStyle = "#"+color(64);
    875     ctx.strokeText("0V", cw-5, 70);
    876 
    877     ctx.strokeStyle = "#"+color(80);
    878     ctx.strokeText("0.5V", cw-5, 50);
    879 
    880     ctx.strokeStyle = "#"+color(86);
    881     ctx.strokeText("1.0V", cw-5, 35);
    882 
    883     ctx.strokeStyle = "#"+color(102);
    884     ctx.strokeText("1.5V", cw-5, 20);
    885 
    886     ctx.strokeStyle = "#"+color(127);
    887     ctx.strokeText("2.0V", cw-5, 5); */
    888941}
    889942
    … …  
    939992    ctx.stroke();
    940993    ctx.closePath();
    941 
    942994}
    943995
Note: See TracChangeset for help on using the changeset viewer.