Changeset 13470
- Timestamp:
- 04/30/12 14:23:11 (13 years ago)
- 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 /* 42 2 try { xmlHttp = new XMLHttpRequest(); } 43 3 catch(e) … … 54 14 } 55 15 } 56 57 xmlHttp.open('POST', 'status.txt', true); 16 */ 17 18 function $(id) { return document.getElementById(id); } 19 function trim(str) { return str.replace("/^\s\s*/", '').replace("/\s\s*$/", ''); } 20 function valid(str) { if (str==undefined) return false; if (str.length==0) return false; return true;} 21 22 function onload() 23 { 24 loadPage("fact"); 25 26 refresh_text(); 27 refresh_graphics(); 28 } 29 30 function 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); 58 42 59 43 xmlHttp.onreadystatechange = … … 62 46 if (xmlHttp.readyState == 4) 63 47 { 64 if (xmlHttp.status ==0)48 if (xmlHttp.status!=0 && xmlHttp.status!=200) 65 49 { 66 setTimeout("refresh_text()", 3000); 50 alert("ERROR[0] - HTTP request '"+name+".table': "+xmlHttp.statusText+" ["+xmlHttp.status+"]"); 51 //setTimeout("loadPage('+name+')", 5000); 52 /****** invalidate ******/ 67 53 return; 68 54 } 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 69 function 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 208 function 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 246 var intervalSlideOut = null; 247 248 function changePage(newpage) 249 { 250 var z = $("body").dataset.visible; 251 $('table').style.position="fixed"; 252 intervalSlideOut = setInterval("doSlideOut('"+newpage+"')", 100); 253 } 254 255 function 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 275 function 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 297 function 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) 71 329 { 72 alert(" HTTP request error: "+xmlHttp.statusText+" ["+xmlHttp.status+"]");330 alert("ERROR[1] - HTTP request '"+fname+".txt': "+this.statusText+" ["+this.status+"]"); 73 331 setTimeout("refresh_text()", 10000); 74 332 /****** invalidate ******/ … … 76 334 } 77 335 78 process_status(xmlHttp.responseText); 336 //alert("ok"); 337 process_status(fname, this.responseText); 79 338 setTimeout("refresh_text()", 3000); 80 339 } … … 84 343 } 85 344 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 97 345 function strike(id, status) 98 346 { 99 var e = document.getElementById(id);347 var e = $(id); 100 348 if (!e) 101 349 return; … … 109 357 function gray(id, str) 110 358 { 111 var e = document.getElementById(id);359 var e = $(id); 112 360 if (!e) 113 361 return; … … 128 376 var date0 = null; 129 377 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; 378 function process_status(fname, result) 379 { 380 var z=$("body").dataset.visible; 381 if ($("tbody"+z).dataset.file != fname) 382 return; 141 383 142 384 var tokens = result.split('\n'); 143 385 386 // ---------------------------------------------------- 144 387 var date1 = new Date(); 145 388 … … 159 402 date0 = date2; 160 403 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 = 167 428 "· "+date0.toUTCString()+" ·";//getUTCFullYear()+"/"+date0.getUTCMonth()+"/"+date0.getUTCDate()+" "+date0.getUTCHours()+":"+date0.getUTCMinutes()+":"+date0.getUTCSeconds()+"."+date0.getUTCMilliseconds(); 168 429 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]+"°C ["+tokens[dew]+"°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]+"µA / "+tokens[curmax]+"µ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 = "· "+date1.toLocaleString()+" ·";//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 "· "+date1.toLocaleString()+" ·";//ISOlocalDateStr();//ltoString(); 232 432 } 233 433 … … 235 435 // http://www.netmagazine.com/tutorials/learning-basics-html5-canvas 236 436 // 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 }*/275 437 276 438 function refresh_graphics() 277 439 { 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 278 453 var xmlHttp = null; 279 454 … … 293 468 } 294 469 295 xmlHttp.open('POST', 'fadcontrol-eventdata.bin', true); 296 470 xmlHttp.open('POST', fname, true); 297 471 xmlHttp.onload = 298 472 function () … … 300 474 if (xmlHttp.readyState == 4) 301 475 { 302 if (xmlHttp.status!= 200)476 if (xmlHttp.status!=0 && xmlHttp.status!=200) 303 477 { 304 alert(" HTTP request error: "+xmlHttp.statusText+" ["+xmlHttp.status+"]");478 alert("ERROR[2] - Request '"+fname+"': "+xmlHttp.statusText+" ["+xmlHttp.status+"]"); 305 479 setTimeout("refresh_text()", 10000); 306 480 //****** invalidate ****** … … 374 548 function drawPix(x, y, col) 375 549 { 376 var canv = document.getElementById("canvas");550 var canv = $("canvas"); 377 551 378 552 var cw = canv.width; … … 396 570 return; 397 571 398 var canv = document.getElementById("canvas"); 572 var canv = $("canvas"); 573 if (canv == undefined) 574 return; 399 575 400 576 var cw = canv.width; … … 503 679 function save() 504 680 { 505 var canvas = document.getElementById("canvas");681 var canvas = $("canvas"); 506 682 var img = canvas.toDataURL("image/png"); 507 683
Note:
See TracChangeset
for help on using the changeset viewer.