source: trunk/FACT++/www/index.js@ 13497

Last change on this file since 13497 was 13496, checked in by tbretz, 13 years ago
Added simple graph drawing.
File size: 18.6 KB
Line 
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
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", 0);
25}
26
27function loadPage(name, z)
28{
29 var xmlHttp = null;
30
31 try { xmlHttp = new XMLHttpRequest(); }
32 catch(e)
33 {
34 alert("Your browser doesn't support dynamic reload.");
35 return;
36 }
37
38 xmlHttp.open('POST', name+'.table', true);
39
40 xmlHttp.onreadystatechange =
41 function ()
42 {
43 if (xmlHttp.readyState == 4)
44 {
45 if (xmlHttp.status!=0 && xmlHttp.status!=200)
46 {
47 alert("ERROR[0] - HTTP request '"+name+".table': "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
48 //setTimeout("loadPage('+name+')", 5000);
49 /****** invalidate ******/
50 return;
51 }
52
53 buildPage(name, xmlHttp.responseText, (z+1)%2);
54 changePage(z);
55
56 //changePage(name, xmlHttp.resposeText);
57 //slideOut(name, xmlHttp.responseText);
58 //displayPage(name, xmlHttp.responseText);
59 //onresize(true);
60 }
61 };
62
63 xmlHttp.send(null);
64}
65
66
67function buildPage(name, text, z)
68{
69 var table = $("table"+z);
70 table.setAttribute("data-file", "");
71
72 var p = table.tBodies.length==3 ? 1 : 0;
73
74 var tbody = $("table"+z).tBodies[p];
75
76 while (tbody.hasChildNodes())
77 tbody.removeChild(tbody.lastChild);
78
79 var lines = text.split('\n');
80
81 if (lines.length>0)
82 {
83 /*
84 var newe = document.createElement("span");
85 newe.innerHTML = lines[0];
86 var title = $("table"+z).tHead.rows[0].cells[0].childNodes[0].childNodes[1];
87 title.replaceChild(newe, title.lastChild);
88 */
89
90 //var x = title.lastChild;
91 //title.removeChild(title.lastChild);
92 //title.appendChild(newe);
93
94 var newe = document.createElement("span");
95 newe.innerHTML = lines[0];
96 var title = $("title"+z);//.innerHtml = lines[0];
97 title.replaceChild(newe, title.lastChild);
98 }
99
100 var counter = 1;
101 for (var i=1; i<lines.length; i++)
102 {
103 lines[i] = trim(lines[i]);
104
105 if (lines[i].length==0 || lines[i][0] == '#')
106 continue;
107
108 var cols = lines[i].split(':');
109 if (cols.length != 3 && cols.length !=4)
110 {
111 alert("Size mismatch #"+i+": '"+lines[i]+"' N(cols)="+cols.length);
112 continue;
113 }
114
115 if (cols[1].substring(0, 7)=="canvas=")
116 {
117 var tr = document.createElement("tr");
118 tr.setAttribute("class", "row");
119 tr.setAttribute("style", "margin:0;padding:0;");
120
121 var td = document.createElement("td");
122 td.setAttribute("class", "container");
123 td.setAttribute("id", "container");
124 td.setAttribute("onclick", "save();");
125 td.setAttribute("colspan", "3");
126 tr.appendChild(td);
127
128 var canv = document.createElement("canvas");
129 canv.setAttribute("id", "canvas"+z);
130 canv.setAttribute("width", "1");
131 canv.setAttribute("height", "1");
132 canv.setAttribute("data-file", cols[1].substring(7));
133 canv.setAttribute("style", "display:none;");
134 td.appendChild(canv);
135
136 var img = document.createElement("img");
137 img.setAttribute("id", "image"+z);
138 img.setAttribute("width", "1");
139 img.setAttribute("height", "1");
140 td.appendChild(img);
141
142 tbody.appendChild(tr);
143 continue;
144 }
145
146 var tr = document.createElement("tr");
147 tr.setAttribute("class", "row");
148 if (valid(cols[0]))
149 tr.setAttribute("onclick", "this.style.background='#ccb'; loadPage('"+cols[0]+"',"+z+");");
150 if (valid(cols[3]))
151 tr.setAttribute("onclick", "this.style.background='#ccb'; loadPage('"+cols[3]+"',"+z+");");
152 //tr.setAttribute("id", cols[0]+"_row");
153
154 var td0 = document.createElement("td");
155 td0.setAttribute("class", "tcol0");
156 if (valid(cols[0]))
157 td0.appendChild(document.createTextNode("<"));
158 tr.appendChild(td0);
159
160 var td1 = document.createElement("td");
161 td1.setAttribute("class", "tcol1");
162 td1.setAttribute("width", "100%");
163 tr.appendChild(td1);
164
165 var td2 = document.createElement("td");
166 td2.setAttribute("class", "tcol2");
167 if (valid(cols[3]))
168 td2.appendChild(document.createTextNode(">"));
169 tr.appendChild(td2);
170
171 var tab = document.createElement("table");
172 tab.setAttribute("width", "100%");
173 td1.appendChild(tab);
174
175 var innertr = document.createElement("tr");
176 tab.appendChild(innertr);
177
178 var cell1 = document.createElement("td");
179 cell1.setAttribute("class", "tcell1");
180 //cell1.setAttribute("id", cols[0]+"_title");
181 cell1.appendChild(document.createTextNode(cols[1]));
182
183 var cell2 = document.createElement("td");
184 cell2.setAttribute("class", "tcell2");
185 cell2.setAttribute("id", "data"+counter);
186 cell2.setAttribute("data-form", cols[2]);
187 cell2.appendChild(document.createTextNode("---"));
188
189 innertr.appendChild(cell1);
190 innertr.appendChild(cell2);
191
192 tbody.appendChild(tr);
193
194 counter++;
195 }
196
197
198 // ---------------------------------------
199
200 if ($("canvas") == null)
201 {
202 /*
203 tr = document.createElement("tr");
204 tr.setAttribute("class", "row");
205
206 td = document.createElement("td");
207 td.setAttribute("id", "debug");
208 td.setAttribute("colspan", "3");
209 td.setAttribute("height", "100%");
210 tr.appendChild(td);
211
212 table.appendChild(tr);*/
213 }
214
215 tr = document.createElement("tr");
216 tr.setAttribute("class", "row");
217
218 td = document.createElement("td");
219 td.setAttribute("id", "debug");
220 td.setAttribute("colspan", "3");
221 tr.appendChild(td);
222
223 tbody.appendChild(tr);
224
225 table.setAttribute("data-file", name);
226}
227
228function onresize()
229{
230 var z = $("body").getAttribute("data-visible");
231
232 var img = $("image"+z);
233 var canv = $("canvas"+z);
234 if (img == undefined || canv == undefined)
235 return;
236
237 var W = window.innerWidth;
238 var H = window.innerHeight;
239
240 img.width = 1;
241 img.height = 1;
242
243 img.width = W;
244 img.height += H - $("table"+z).offsetHeight;
245
246 canv.width = img.width;
247 canv.height = img.height;
248
249 // ------ debug -----
250 $('debug').innerHTML = "";
251 $('debug').innerHTML += "|W="+W +"/"+H;
252}
253
254var intervalSlide = null;
255
256function changePage(z)
257{
258 // No page displayed yet
259 if ($("table0").style.display=="none" && $("table1").style.display=="none")
260 {
261 $("table1").style.display="";
262 $("body").setAttribute("data-visible", "1");
263
264 onresize();
265
266 refresh_text();
267 refresh_graphics();
268 return;
269 }
270
271 intervalSlide = setInterval("doSlideOut("+z+")", 25);
272}
273
274function doSlideOut(z)
275{
276 var table = $("table"+z);
277
278 var W = window.innerWidth;
279 var x = table.offsetLeft;
280
281 var ix = parseInt(x, 10);
282 if (ix>W)
283 {
284 clearInterval(intervalSlide);
285
286 table.style.display="none";
287
288 z = (z+1)%2;
289 table = $("table"+z);
290
291 table.style.display="";
292 table.style.left = window.innerWidth+"px";
293
294 $("body").setAttribute("data-visible", z);
295 onresize();
296
297 intervalSlide = setInterval("doSlideIn("+z+")", 25);
298 return;
299 }
300
301 ix += W/10;
302 table.style.left=ix+"px";
303}
304
305function doSlideIn(z)
306{
307 var table = $("table"+z);
308
309 var W = window.innerWidth;
310 var x = table.offsetLeft;
311
312 var ix = parseInt(x, 10);
313 if (ix==0)
314 {
315 clearInterval(intervalSlide);
316 return;
317 }
318
319 ix -= W/10;
320 if (ix<0)
321 ix = 0;
322
323 table.style.left=ix+"px";
324}
325
326function refresh_text()
327{
328 var z=$("body").getAttribute("data-visible");
329 var table = $("table"+z);
330
331 // Is sliding or no file defined?
332 var fname = table.getAttribute("data-file");
333 if (table.offsetLeft>0 || !valid(fname))
334 {
335 setTimeout("refresh_text()", 1000);
336 return;
337 }
338
339 var xmlHttp = null;
340
341 try { xmlHttp = new XMLHttpRequest(); }
342 catch(e)
343 {
344 alert("Your browser doesn't support dynamic reload.");
345 return;
346 }
347
348 xmlHttp.open('POST', fname+'.txt', true);
349
350 xmlHttp.onreadystatechange =
351 function ()
352 {
353 if (xmlHttp.readyState == 4)
354 {
355 if (xmlHttp.status!=0 && xmlHttp.status!=200)
356 {
357 alert("ERROR[1] - HTTP request '"+fname+".txt': "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
358 setTimeout("refresh_text()", 10000);
359 return;
360 }
361
362 update_text(fname, xmlHttp.responseText);
363 setTimeout("refresh_text()", 3000);
364 }
365 };
366
367 xmlHttp.send(null);
368}
369
370function strike(e, status)
371{
372 if (!e)
373 return;
374
375 if (status == false)
376 e.style.textDecoration="line-through";
377 else
378 e.style.textDecoration="";
379}
380
381function gray(id, str)
382{
383 var e = $(id);
384 if (!e)
385 return;
386
387 if (valid(str) == true)
388 {
389 e.style.color="#000";
390 e.style.textDecoration="";
391 }
392 else
393 {
394 e.style.color="#daa";
395 e.style.textDecoration="line-through";
396 }
397
398}
399
400var date0 = null;
401
402function update_text(fname, result)
403{
404 var z=$("body").getAttribute("data-visible");
405 var table = $("table"+z);
406
407 if (table.getAttribute("data-file") != fname)
408 return;
409
410 var tokens = result.split('\n');
411
412 // ----------------------------------------------------
413
414 var time = $("reporttime"+z);
415 var ltime = $("localtime"+z);
416
417 var date1 = new Date();
418
419 if (tokens[0].length!=13)
420 {
421 if (date0 != null)
422 strike(time, date0.getTime()+60000>date1.getTime());
423 // FIXME: Reset display to "---" values -- no connection
424 return;
425 }
426
427 var date2 = new Date();
428 date2.setTime(tokens[0]);
429
430 strike(time, date2.getTime()+60000>date1.getTime());
431
432 date0 = date2;
433
434 time.innerHTML =
435 "&middot;&nbsp;"+date0.toUTCString()+"&nbsp;&middot;";//getUTCFullYear()+"/"+date0.getUTCMonth()+"/"+date0.getUTCDate()+" "+date0.getUTCHours()+":"+date0.getUTCMinutes()+":"+date0.getUTCSeconds()+"."+date0.getUTCMilliseconds();
436 ltime.innerHTML =
437 "&middot;&nbsp;"+date1.toLocaleString()+"&nbsp;&middot;";//ISOlocalDateStr();//ltoString();
438
439 // ----------------------------------------------------
440
441 var p = table.tBodies.length==3 ? 1 : 0;
442 var tbody = table.tBodies[p];
443
444 for (var line=1; line<tokens.length; line++)
445 {
446 var c = tbody.rows[line-1].cells[1];
447 if (c == undefined)
448 continue;
449
450 var e = c.childNodes[0].rows[0].cells[1];
451 if (e == undefined)
452 continue;
453
454 var form = e.getAttribute("data-form");
455 if (form==undefined)
456 continue;
457
458 var cols = tokens[line].split('\t');
459 for (var col=1; col<cols.length; col++)
460 form = form.replace("\$"+(col-1), cols[col].length==0 ? "--" : cols[col]);
461
462 var newe = document.createElement("div");
463 newe.innerHTML = form;
464 e.replaceChild(newe, e.lastChild);
465
466 e.parentNode.parentNode.parentNode.parentNode.style.background=cols[0];
467 }
468}
469
470// http://billmill.org/static/canvastutorial/index.html
471// http://www.netmagazine.com/tutorials/learning-basics-html5-canvas
472// http://www.alistapart.com/articles/responsive-web-design/
473
474function refresh_graphics()
475{
476 var z = $("body").getAttribute("data-visible");
477
478 var canvas = $("canvas"+z);
479
480 // Is sliding or no data file defined?
481 var fname = canvas==null ? "" : canvas.getAttribute("data-file");
482 if ($("table"+z).offsetLeft>0|| !valid(fname))
483 {
484 setTimeout("refresh_graphics()", 1000);
485 return;
486 }
487
488 var xmlHttp = null;
489
490 try { xmlHttp = new XMLHttpRequest(); }
491 catch(e)
492 {
493 alert("Your browser doesn't support dynamic reload.");
494 return;
495 }
496
497 xmlHttp.open('POST', fname, true);
498 xmlHttp.onload =
499 function ()
500 {
501 if (xmlHttp.readyState == 4)
502 {
503 if (xmlHttp.status!=0 && xmlHttp.status!=200)
504 {
505 alert("ERROR[2] - Request '"+fname+"': "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
506 setTimeout("refresh_text()", 10000);
507 //****** invalidate ******
508 return;
509 }
510
511 process_eventdata(xmlHttp.responseText);
512 setTimeout("refresh_graphics()", 5000)
513 }
514 };
515
516 xmlHttp.send(null);
517}
518
519
520function hueToRGB(hue)
521{
522 hue /= 3;
523 hue %= 6;
524
525 if (hue<1) return parseInt(255*hue, 10);
526 if (hue<3) return parseInt(255, 10);
527 if (hue<4) return parseInt(255*(4-hue), 10);
528
529/*
530 if (hue<1*5/4) return parseInt(255*hue*4/5);
531 if (hue<2*5/4) return parseInt(255);
532 if (hue<3*5/4) return parseInt(255*(3*5/4-hue)*4/5);
533*/
534/*
535 if (hue<1.5) return parseInt(255*hue/1.5);
536 if (hue<3.0) return parseInt(255);
537 if (hue<4.5) return parseInt(255*(4.5-hue)/1.5);
538*/
539 return 0.
540}
541
542function hueToHex(flt)
543{
544 var s = hueToRGB(flt).toString(16);
545 return s.length==2 ? s : "0"+s;
546}
547
548function HLStoRGB(hue)
549{
550 hue *= 14;
551
552 var sr = hueToHex(20-hue);
553 var sg = hueToHex(14-hue);
554 var sb = hueToHex(26-hue);
555
556 return sr+sg+sb;
557}
558
559
560function color(col)
561{
562 if (col==65533)
563 col = 0;
564
565 var hue = col/128;
566 return HLStoRGB(hue);
567}
568
569function toHex(str, idx)
570{
571 var ch = str[idx].toString(16);
572 return ch.length==2 ? ch : "0"+ch;
573}
574
575function drawPix(x, y, col)
576{
577 var z = $("body").getAttribute("data-visible");
578 var canv = $("canvas"+z);
579
580 var cw = canv.width;
581 var ch = canv.height;
582
583 var w = Math.min(cw/28, ch/28);
584
585 var ctx = canv.getContext("2d");
586
587 ctx.beginPath();
588 ctx.arc(x*w*2+cw/2, y*w*2+ch/2, w, 0, Math.PI*2, true);
589 ctx.lineWidth = 0;
590 ctx.fillStyle = "#"+color(col);
591 ctx.fill();
592 ctx.closePath();
593}
594function drawCam(data)
595{
596 drawPix(0, 0, data.charCodeAt(0));
597
598 var gsSin60 = Math.sqrt(3)/2;
599
600 var cnt = 1;
601 for (var ring=1; ring<=7; ring++)
602 {
603 for (var s=0; s<6; s++)
604 {
605 for (var i=1; i<=ring; i++)
606 {
607 var x=0.;
608 var y=0.;
609
610 switch (s)
611 {
612 case 0: x = ring-i*0.5; y = i*gsSin60; break;
613 case 1: x = ring*0.5-i; y = ring*gsSin60; break;
614 case 2: x = -(ring+i)*0.5; y = (ring-i)*gsSin60; break;
615 case 3: x = 0.5*i-ring; y = -i*gsSin60; break;
616 case 4: x = i-ring*0.5; y = -ring*gsSin60; break;
617 case 5: x = (ring+i)*0.5; y = (-ring+i)*gsSin60; break;
618 }
619
620 if (Math.sqrt(x*x+y*y)>6.7)
621 continue;
622 if (ring==7 && i==6 && s==0)
623 continue;
624 if (ring==7 && i==1 && s==1)
625 continue;
626 if (ring==7 && i==6 && s==3)
627 continue;
628 if (ring==7 && i==1 && s==4)
629 continue;
630
631 // Rotate by 60deg
632 var px = gsSin60*x - 0.5*y;
633 var py = gsSin60*y + 0.5*x;
634
635 drawPix(px, py, data.charCodeAt(cnt));
636 cnt++;
637 }
638 }
639 }
640}
641
642function drawCamLegend(canv)
643{
644 var cw = canv.width;
645 var ch = canv.height;
646
647 var ctx = canv.getContext("2d");
648
649 ctx.font = "8pt Arial";
650 ctx.textAlign = "right";
651 ctx.textBaseline = "top";
652
653 ctx.strokeStyle = "#"+color(0);
654 ctx.strokeText("-2.0V", cw-5, 135);
655
656 ctx.strokeStyle = "#"+color(16);
657 ctx.strokeText("-1.5V", cw-5, 120);
658
659 ctx.strokeStyle = "#"+color(32);
660 ctx.strokeText("-1.0V", cw-5, 105);
661
662 ctx.strokeStyle = "#"+color(48);
663 ctx.strokeText("-0.5V", cw-5, 90);
664
665 ctx.strokeStyle = "#"+color(64);
666 ctx.strokeText("0V", cw-5, 70);
667
668 ctx.strokeStyle = "#"+color(80);
669 ctx.strokeText("0.5V", cw-5, 50);
670
671 ctx.strokeStyle = "#"+color(86);
672 ctx.strokeText("1.0V", cw-5, 35);
673
674 ctx.strokeStyle = "#"+color(102);
675 ctx.strokeText("1.5V", cw-5, 20);
676
677 ctx.strokeStyle = "#"+color(127);
678 ctx.strokeText("2.0V", cw-5, 5);
679}
680
681function drawGraph(canv, data)
682{
683 var cw = canv.width;
684 var ch = canv.height;
685
686 var ctx = canv.getContext("2d");
687
688 var dx = 15;
689 var dy = 15;
690
691 var dw = 5;
692
693 var nx = 20;
694 var ny = 10;
695
696 var w = cw-2*dx;
697 var h = ch-2*dy;
698
699 ctx.strokeStyle = "#808080";
700
701 ctx.beginPath();
702 ctx.moveTo(dx, ch-dy-data.charCodeAt(0)/128*h);
703 for (var i=1; i<data.length; i++)
704 ctx.lineTo(dx+w/data.length*i, ch-dy-data.charCodeAt(i)/128*h);
705 ctx.lineTo(dx+w, ch-dy);
706 ctx.lineTo(dx, ch-dy);
707 ctx.fillStyle = "#"+color(100);
708 ctx.fill();
709 ctx.stroke();
710 ctx.closePath();
711
712 ctx.strokeStyle = "#000000";
713
714 ctx.beginPath();
715
716 ctx.moveTo(dx, dy);
717 ctx.lineTo(dx, ch-dy);
718 ctx.lineTo(cw-dx, ch-dy);
719
720 for (var i=0; i<nx; i++)
721 {
722 ctx.moveTo(dx+w/nx*i, ch-dy-dw);
723 ctx.lineTo(dx+w/nx*i, ch-dy+dw);
724 }
725 for (var i=0; i<ny; i++)
726 {
727 ctx.moveTo(dx-dw, dy+h/ny*i);
728 ctx.lineTo(dx+dw, dy+h/ny*i);
729 }
730 ctx.stroke();
731 ctx.closePath();
732}
733
734function process_eventdata(result)
735{
736 if (result.length!=160)
737 return;
738
739 var z = $("body").getAttribute("data-visible");
740 var canv = $("canvas"+z);
741 if (canv == undefined)
742 return;
743
744 var ctx = canv.getContext("2d");
745 ctx.clearRect(0, 0, canv.width, canv.height);
746
747 drawGraph(canv, result);
748
749 drawCam(result);
750 drawCamLegend(canv);
751
752 var img = $("image"+z);
753 img.src = canv.toDataURL("image/png");
754}
755/*
756function save()
757{
758 var canvas = $("canvas");
759 var img = canvas.toDataURL("image/png");
760
761 img = img.replace("image/png", "image/octet-stream");
762
763 document.location.href = img;
764}
765*/
766
767window['onload'] = onload;
Note: See TracBrowser for help on using the repository browser.