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

Last change on this file since 13568 was 13568, checked in by tbretz, 12 years ago
Many more changes and improvements; mainly made everything dynamic so that more fancy menus are possible; added back and home button.
File size: 25.4 KB
Line 
1function $(id) { return document.getElementById(id); }
2function trim(str) { return str.replace("/^\s\s*/", '').replace("/\s\s*$/", ''); }
3function valid(str) { if (str==undefined) return false; if (str.length==0) return false; return true;}
4function isSliding() { var z = $("body").getAttribute("data-visible"); return $("table"+z).offsetLeft!=0; }
5
6function cycleCol(el)
7{
8 var col = el.getAttribute("data-color");
9 col++;
10 col %= 31;
11 el.setAttribute("data-color", col);
12 if (col>16)
13 col = 31-col;
14 var hex = col.toString(16);
15 el.style.color = "#"+hex+"0"+hex+"0"+hex+"f";
16}
17
18function onload()
19{
20 try { xmlHttp = new XMLHttpRequest(); }
21 catch(e)
22 {
23 alert("Your browser doesn't support dynamic reload.");
24 return;
25 }
26
27 /*
28 alert("0 -- "+navigator.appCodeName+"\n"+
29 "1 -- "+navigator.appName+"\n"+
30 "2 -- "+navigator.appVersion+"\n"+
31 "3 -- "+navigator.platform+"\n"+
32 "4 -- "+navigator.userAgent);
33 */
34 loadPage("fact", 0, 0);
35}
36
37function onresize()
38{
39 var z = $("body").getAttribute("data-visible");
40 doresize(z);
41}
42
43function loadPage(name, z, dz)
44{
45 var xmlHttp = new XMLHttpRequest();
46 xmlHttp.open('POST', name+'.table', true);
47 xmlHttp.onload = function ()
48 {
49 if (xmlHttp.status!=200)
50 {
51 alert("ERROR[0] - HTTP request '"+name+".table': "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
52 //setTimeout("loadPage('+name+')", 5000);
53 /****** invalidate ******/
54 return;
55 }
56
57 buildPage(name, xmlHttp.responseText, z, dz);
58 changePage(z, z+dz);
59
60 //changePage(name, xmlHttp.resposeText);
61 //slideOut(name, xmlHttp.responseText);
62 //displayPage(name, xmlHttp.responseText);
63 //onresize(true);
64 };
65
66 xmlHttp.send(null);
67}
68
69
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
78 var table = $("table"+z);
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);
214
215 var counter = 1;
216 for (var i=1; i<lines.length; i++)
217 {
218 lines[i] = trim(lines[i]);
219
220 if (lines[i].length==0 || lines[i][0] == '#')
221 continue;
222
223 var cols = lines[i].split(':');
224 if (cols.length != 3 && cols.length !=4)
225 {
226 alert("Size mismatch #"+i+": '"+lines[i]+"' N(cols)="+cols.length);
227 continue;
228 }
229
230 var check = cols[1].split("=");
231
232 if (check.length>1 && (check[0]=="camera" || check[0]=="hist"))
233 {
234 var data = cols[1].substring(check[0].length+1).split("/");
235
236 var tr = document.createElement("tr");
237 tr.setAttribute("class", "row");
238 //tr.setAttribute("style", "margin:0;padding:0;");
239
240 var td = document.createElement("td");
241 td.setAttribute("class", "container");
242 td.setAttribute("id", "container");
243 //td.setAttribute("onclick", "save();");
244 td.setAttribute("colspan", "3");
245 tr.appendChild(td);
246
247 var canv = document.createElement("canvas");
248 canv.setAttribute("id", "canvas"+z);
249 canv.setAttribute("width", "1");
250 canv.setAttribute("height", "1");
251 canv.setAttribute("data-type", check[0]);
252 canv.setAttribute("data-file", data[0]);
253 canv.setAttribute("data-data", cols[1].substring(check[0].length+data[0].length+2));
254 canv.setAttribute("style", "display:none;");
255 td.appendChild(canv);
256
257 var img = document.createElement("img");
258 img.src = "dummy.png";//needed in firefox
259 img.setAttribute("id", "image"+z);
260 img.setAttribute("style", "width:1px;height:1px;");
261 td.appendChild(img);
262
263 tbody.appendChild(tr);
264 continue;
265 }
266
267 var tr = document.createElement("tr");
268 tr.setAttribute("class", "row");
269 if (valid(cols[0]))
270 tr.setAttribute("onclick", "this.style.background='#ccb'; loadPage('"+cols[0]+"',"+z+",-1);");
271 if (valid(cols[3]))
272 tr.setAttribute("onclick", "this.style.background='#ccb'; loadPage('"+cols[3]+"',"+z+",+1);");
273 //tr.setAttribute("id", cols[0]+"_row");
274
275 var td0 = document.createElement("td");
276 td0.setAttribute("class", "tcol0");
277 if (valid(cols[0]))
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 }
284 tr.appendChild(td0);
285
286 var td1 = document.createElement("td");
287 td1.setAttribute("class", "tcol1");
288 td1.setAttribute("width", "100%");
289 tr.appendChild(td1);
290
291 var td2 = document.createElement("td");
292 td2.setAttribute("class", "tcol2");
293 td2.setAttribute("width", "18px");
294 if (valid(cols[3]))
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 }
301 tr.appendChild(td2);
302
303 var tab = document.createElement("table");
304 tab.setAttribute("width", "100%");
305 td1.appendChild(tab);
306
307 var innertr = document.createElement("tr");
308 tab.appendChild(innertr);
309
310 var cell1 = document.createElement("td");
311 cell1.setAttribute("class", "tcell1");
312 //cell1.setAttribute("id", cols[0]+"_title");
313 cell1.appendChild(document.createTextNode(cols[1]));
314
315 var cell2 = document.createElement("td");
316 cell2.setAttribute("class", "tcell2");
317 cell2.setAttribute("id", "data"+counter);
318 cell2.setAttribute("data-form", cols[2]);
319 cell2.appendChild(document.createTextNode("---"));
320
321 innertr.appendChild(cell1);
322 innertr.appendChild(cell2);
323
324 tbody.appendChild(tr);
325
326 counter++;
327 }
328
329 // ---------------------------------------
330
331 tr = document.createElement("tr");
332 tr.setAttribute("class", "row");
333
334 td = document.createElement("td");
335 td.setAttribute("id", "debug");
336 td.setAttribute("colspan", "3");
337 tr.appendChild(td);
338
339 tbody.appendChild(tr);
340
341 // ---------------------------------------
342
343 table.setAttribute("data-file", name);
344 doresize(z);
345}
346
347function doresize(z)
348{
349 var img = $("image"+z);
350 var canv = $("canvas"+z);
351 if (img == undefined || canv == undefined)
352 return;
353
354 var h = $("table"+z).offsetHeight;
355 if (h == 0)
356 return;
357
358 var W = window.innerWidth;
359 var H = window.innerHeight;
360
361 var ih = H - h + parseInt(img.style.height, 10);
362
363 img.style.width = W +"px";
364 img.style.height= ih+"px";
365
366 canv.width = W;
367 canv.height = ih;
368
369 // ------ debug -----
370
371 $('debug').innerHTML = "";
372 $('debug').innerHTML += "|W="+W +"/"+H;
373 $('debug').innerHTML += "|H="+h+"/"+$("table"+z).offsetHeight+"/"+img.offsetHeight;
374 $('debug').innerHTML += "|I="+img.style.height+"+"+H+"-"+h;
375}
376
377var intervalSlide = null;
378
379function changePage(oldz, newz)
380{
381 // No page displayed yet
382 if (oldz==newz)
383 {
384 $("table"+newz).style.left="0px";
385 $("body").setAttribute("data-visible", newz);
386
387 doresize(0);
388
389 //setInterval(refresh_text, 1000);
390 //setInterval(refresh_graphics, 5000);
391
392 refresh_text();
393 refresh_graphics();
394 return;
395 }
396
397 //intervalSlide = setInterval("doSlideOut("+z+")", 25);
398
399 //var k = (z+1)%2;
400 //$("table"+k).style.display="";
401 //$("table"+z).style.display="";
402 //$("table"+k).style.zIndex="0";
403 //$("table"+z).style.zIndex="1";
404 //$("table"+k).style.left=0;
405 //$("table"+z).style.left=0;
406 //$("table"+k).style.backgroundColor = "#ffffff";
407 //$("table"+z).style.backgroundColor = "#ffffff";
408 //doresize(k);
409 //intervalSlide = setInterval("doSlide("+z+",1)", 50);
410
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)
421{
422 var W = window.innerWidth;
423
424 var t0 = $("table"+oldz);
425 var t1 = $("table"+newz);
426
427 var x0 = t0.offsetLeft;
428 var x1 = t1.offsetLeft;
429
430 if (newz<oldz)
431 {
432 x0 += W/5;
433 x1 += W/5;
434 }
435
436 if (newz>oldz)
437 {
438 x0 -= W/5;
439 x1 -= W/5;
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";
452}
453
454/*
455function doSlide(z, dir)
456{
457 var k = (z+1)%2;
458
459 var W = window.innerWidth;
460
461 var tz = $("table"+z);
462 var tk = $("table"+k);
463
464 var xz = tz.offsetLeft;
465 var xk = tk.offsetLeft;
466
467 var ixz = parseInt(xz, 10);
468 var ikz = parseInt(xk, 10);
469
470 ixz += dir*W/10;
471 ikz -= dir*W/10;
472
473 tz.style.left = parseInt(ixz, 10)+"px";
474 tk.style.left = parseInt(ikz, 10)+"px";
475
476 if (ixz>W/2)
477 {
478 clearInterval(intervalSlide);
479
480 $("table"+k).style.zIndex="1";
481 $("table"+z).style.zIndex="0";
482
483 $("body").setAttribute("data-visible", k);
484 doresize(k);
485
486 intervalSlide = setInterval("doSlide("+z+",-1)", 50);
487 }
488 if (ikz>0)
489 {
490 clearInterval(intervalSlide);
491
492 tz.style.left = 0;
493 tk.style.left = 0;
494
495 tz.style.display="none";
496 }
497}
498
499
500function doSlideOut(z)
501{
502 var table = $("table"+z);
503
504 var W = window.innerWidth;
505 var x = table.offsetLeft;
506
507 var ix = parseInt(x, 10);
508 if (ix>W)
509 {
510 clearInterval(intervalSlide);
511
512 table.style.display="none";
513
514 z = (z+1)%2;
515 table = $("table"+z);
516
517 table.style.display="";
518 table.style.left = window.innerWidth+"px";
519
520 $("body").setAttribute("data-visible", z);
521 doresize(z);
522
523 intervalSlide = setInterval("doSlideIn("+z+")", 25);
524 return;
525 }
526
527 ix += W/10;
528 table.style.left=ix+"px";
529}
530
531function doSlideIn(z)
532{
533 var table = $("table"+z);
534
535 var W = window.innerWidth;
536 var x = table.offsetLeft;
537
538 var ix = parseInt(x, 10);
539
540 ix -= W/10;
541 if (ix<0)
542 ix = 0;
543
544 table.style.left=ix+"px";
545
546 if (ix<=0)
547 {
548 clearInterval(intervalSlide);
549 return;
550 }
551}
552*/
553
554function refresh_text()
555{
556 var z=$("body").getAttribute("data-visible");
557 var table = $("table"+z);
558
559 // Is sliding or no file defined?
560 var fname = table.getAttribute("data-file");
561 if (isSliding() || !valid(fname))
562 {
563 setTimeout(refresh_text, 1000);
564 return;
565 }
566
567 var xmlHttp = new XMLHttpRequest();
568 xmlHttp.open('POST', fname+'.txt', true);
569 xmlHttp.onload = function ()
570 {
571 if (xmlHttp.status!=200)
572 {
573 alert("ERROR[1] - HTTP request '"+fname+".txt': "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
574 setTimeout(refresh_text, 10000);
575 return;
576 }
577
578 if (!isSliding())
579 {
580 cycleCol($("ldot"+z));
581 update_text(fname, xmlHttp.responseText);
582 }
583 setTimeout(refresh_text, 3000);
584 };
585 xmlHttp.send(null);
586}
587
588function strike(e, status)
589{
590 if (!e)
591 return;
592
593 if (!status)
594 e.style.textDecoration="line-through";
595 else
596 e.style.textDecoration="";
597}
598
599function gray(id, str)
600{
601 var e = $(id);
602 if (!e)
603 return;
604
605 if (valid(str))
606 {
607 e.style.color="#000";
608 e.style.textDecoration="";
609 }
610 else
611 {
612 e.style.color="#daa";
613 e.style.textDecoration="line-through";
614 }
615
616}
617
618var date0 = null;
619
620function update_text(fname, result)
621{
622 var z=$("body").getAttribute("data-visible");
623 var table = $("table"+z);
624
625 if (table.getAttribute("data-file") != fname)
626 return;
627
628 var tokens = result.split('\n');
629
630 // ----------------------------------------------------
631
632 var time = $("reporttime"+z);
633 var ltime = $("localtime"+z);
634
635 var date1 = new Date();
636
637 if (tokens[0].length!=13)
638 {
639 if (date0 != null)
640 strike(time, date0.getTime()+60000>date1.getTime());
641 // FIXME: Reset display to "---" values -- no connection
642 return;
643 }
644
645 var date2 = new Date();
646 date2.setTime(tokens[0]);
647
648 strike(time, date2.getTime()+60000>date1.getTime());
649
650 date0 = date2;
651
652 var utc = date0.toUTCString();
653
654 time.innerHTML =
655 "&#8226;&nbsp;"+utc.substr(utc.length-12, 8)+"&nbsp;UTC&nbsp;&#8226;"
656 ltime.innerHTML =
657 "&#8226;&nbsp;"+date1.toLocaleString()+"&nbsp;&#8226;";
658
659 // ----------------------------------------------------
660
661 var p = table.tBodies.length==3 ? 1 : 0;
662 var tbody = table.tBodies[p];
663
664 for (var line=1; line<tokens.length; line++)
665 {
666 var c = tbody.rows[line-1].cells[1];
667 if (c == undefined)
668 continue;
669
670 var e = c.childNodes[0].rows[0].cells[1];
671 if (e == undefined)
672 continue;
673
674 var form = e.getAttribute("data-form");
675 if (form==undefined)
676 continue;
677
678 var cols = tokens[line].split('\t');
679 for (var col=1; col<cols.length; col++)
680 form = form.replace("\$"+(col-1), cols[col].length==0 ? "--" : cols[col]);
681
682 if (cols.length<=1)
683 form = "---";
684
685 var newe = document.createElement("div");
686 newe.innerHTML = form;
687 e.replaceChild(newe, e.lastChild);
688
689 e.parentNode.parentNode.parentNode.parentNode.style.background=cols[0];
690 }
691}
692
693// http://billmill.org/static/canvastutorial/index.html
694// http://www.netmagazine.com/tutorials/learning-basics-html5-canvas
695// http://www.alistapart.com/articles/responsive-web-design/
696
697function refresh_graphics()
698{
699 var z = $("body").getAttribute("data-visible");
700
701 var canvas = $("canvas"+z);
702
703 // Is sliding or no data file defined?
704 var fname = canvas==null ? "" : canvas.getAttribute("data-file");
705 if (isSliding() || !valid(fname))
706 {
707 setTimeout(refresh_graphics, 1000);
708 return;
709 }
710
711 var xmlHttp = new XMLHttpRequest();
712 xmlHttp.open('POST', fname, true);
713 xmlHttp.onload = function()
714 {
715 if (xmlHttp.status!=200)
716 {
717 alert("ERROR[2] - Request '"+fname+"': "+xmlHttp.statusText+" ["+xmlHttp.status+"]");
718 setTimeout(refresh_text, 10000);
719 //****** invalidate ******
720 return;
721 }
722
723 if (!isSliding())
724 {
725 cycleCol($("rdot"+z));
726 process_eventdata(xmlHttp.responseText);
727 }
728 setTimeout(refresh_graphics, 5000)
729 };
730 xmlHttp.send(null);
731}
732
733
734function hueToRGB(hue)
735{
736 hue /= 3;
737 hue %= 6;
738
739 if (hue<1) return parseInt(255*hue, 10);
740 if (hue<3) return parseInt(255, 10);
741 if (hue<4) return parseInt(255*(4-hue), 10);
742
743/*
744 if (hue<1*5/4) return parseInt(255*hue*4/5);
745 if (hue<2*5/4) return parseInt(255);
746 if (hue<3*5/4) return parseInt(255*(3*5/4-hue)*4/5);
747*/
748/*
749 if (hue<1.5) return parseInt(255*hue/1.5);
750 if (hue<3.0) return parseInt(255);
751 if (hue<4.5) return parseInt(255*(4.5-hue)/1.5);
752*/
753 return 0.
754}
755
756function hueToHex(flt)
757{
758 var s = hueToRGB(flt).toString(16);
759 return s.length==2 ? s : "0"+s;
760}
761
762function HLStoRGB(hue)
763{
764 hue *= 14;
765
766 var sr = hueToHex(20-hue);
767 var sg = hueToHex(14-hue);
768 var sb = hueToHex(26-hue);
769
770 return sr+sg+sb;
771}
772
773
774function color(col)
775{
776 if (col==65533)
777 col = 0;
778
779 var hue = col/128;
780 return HLStoRGB(hue);
781}
782
783function toHex(str, idx)
784{
785 var ch = str[idx].toString(16);
786 return ch.length==2 ? ch : "0"+ch;
787}
788
789function drawHex(ctx, x, y, col)
790{
791 ctx.fillStyle = "#"+color(col);
792
793 ctx.save();
794
795 ctx.translate(x, y);
796 ctx.scale(1/2, 1/3);
797
798 ctx.beginPath();
799 ctx.moveTo( 1, 1);
800 ctx.lineTo( 0, 2);
801 ctx.lineTo(-1, 1);
802 ctx.lineTo(-1, -1);
803 ctx.lineTo( 0, -2);
804 ctx.lineTo( 1, -1);
805 ctx.fill();
806
807 ctx.restore();
808}
809
810function drawDisc(ctx, x, y, r, col)
811{
812 ctx.fillStyle = "#"+color(col);
813
814 ctx.save();
815
816 ctx.translate(x, y);
817
818 ctx.beginPath();
819 ctx.arc(0, 0, r, 0, Math.PI*2, true);
820 ctx.fill();
821
822 ctx.restore();
823}
824
825function beginDrawCam(scale)
826{
827 var z = $("body").getAttribute("data-visible");
828 var canv = $("canvas"+z);
829
830 var w = Math.min(canv.width/scale, canv.height/scale);
831
832 var ctx = canv.getContext("2d");
833
834 ctx.save();
835 ctx.translate(canv.width/2, canv.height/2);
836 ctx.scale(w*2, w*2);
837
838 return ctx;
839}
840
841function position(s, ring, i)
842{
843 switch (s)
844 {
845 case 0: this.x = ring - i*0.5; this.y = + i; break;
846 case 1: this.x = ring*0.5 - i; this.y = ring ; break;
847 case 2: this.x = -ring*0.5 - i*0.5; this.y = ring - i; break;
848 case 3: this.x = -ring + i*0.5; this.y = - i; break;
849 case 4: this.x = -ring*0.5 + i; this.y = -ring ; break;
850 case 5: this.x = ring*0.5 + i*0.5; this.y = -ring + i; break;
851 }
852
853 this.d = function() { return this.x*this.x + this.y*this.y*3/4; }
854}
855
856function drawFullCam(data)
857{
858 var ctx = beginDrawCam(80.5);
859 ctx.rotate(Math.PI/2);
860
861 ctx.scale(1, Math.sqrt(3)/2);
862
863 drawHex(ctx, -0.5, 0, data.charCodeAt(0));
864
865 var cnt = 1;
866 for (var ring=1; ring<24; ring++)
867 {
868 for (var s=0; s<6; s++)
869 {
870 for (var i=1; i<=ring; i++)
871 {
872 var pos = new position(s, ring, i);
873 if (pos.d() - pos.x > 395.75)
874 continue;
875
876 drawHex(ctx, pos.x-0.5, -pos.y, data.charCodeAt(cnt++));
877 }
878 }
879 }
880
881 drawHex(ctx, -6.5, 22, data.charCodeAt(1438));
882 drawHex(ctx, -6.5, -22, data.charCodeAt(1439));
883
884 ctx.restore();
885}
886
887function drawCam(data)
888{
889 var ctx = beginDrawCam(27);
890 ctx.rotate(Math.PI/6);
891 ctx.scale(1, Math.sqrt(3)/2);
892
893 drawHex(ctx, 0, 0, data.charCodeAt(0));
894
895 var cnt = 1;
896 for (var ring=1; ring<=7; ring++)
897 {
898 for (var s=0; s<6; s++)
899 {
900 for (var i=1; i<=ring; i++)
901 {
902 var pos = new position(s, ring, i);
903 if (pos.d() > 44)
904 continue;
905
906 if (ring==7)
907 {
908 if (i==6 && (s==0 || s==3))
909 continue;
910 if (i==1 && (s==1 || s==4))
911 continue;
912 }
913
914 drawHex(ctx, pos.x, pos.y, data.charCodeAt(cnt++));
915 }
916 }
917 }
918
919 ctx.restore();
920}
921
922function drawCamLegend(canv)
923{
924 var vals = canv.getAttribute("data-data").split("/");
925 var diff = vals[1]-vals[0];
926
927 var cw = canv.width;
928 var ch = canv.height;
929
930 var ctx = canv.getContext("2d");
931
932 ctx.font = "8pt Arial";
933 ctx.textAlign = "right";
934 ctx.textBaseline = "top";
935
936 for (var i=0; i<9; i++)
937 {
938 ctx.strokeStyle = "#"+color(16*i);
939 ctx.strokeText((vals[1]-diff*i/8)+vals[2], cw-5, 135-i*15);
940 }
941}
942
943function drawGraph(canv, data)
944{
945 var cw = canv.width;
946 var ch = canv.height;
947
948 var ctx = canv.getContext("2d");
949
950 var dx = 15;
951 var dy = 15;
952
953 var dw = 5;
954
955 var nx = 20;
956 var ny = 10;
957
958 var w = cw-2*dx;
959 var h = ch-2*dy;
960
961 ctx.strokeStyle = "#808080";
962
963 ctx.beginPath();
964 ctx.moveTo(dx, ch-dy-data.charCodeAt(0)/128*h);
965 for (var i=1; i<data.length; i++)
966 ctx.lineTo(dx+w/data.length*i, ch-dy-data.charCodeAt(i)/128*h);
967 ctx.lineTo(dx+w, ch-dy);
968 ctx.lineTo(dx, ch-dy);
969 ctx.fillStyle = "#"+color(100);
970 ctx.fill();
971 ctx.stroke();
972 ctx.closePath();
973
974 ctx.strokeStyle = "#000000";
975
976 ctx.beginPath();
977
978 ctx.moveTo(dx, dy);
979 ctx.lineTo(dx, ch-dy);
980 ctx.lineTo(cw-dx, ch-dy);
981
982 for (var i=0; i<nx; i++)
983 {
984 ctx.moveTo(dx+w/nx*i, ch-dy-dw);
985 ctx.lineTo(dx+w/nx*i, ch-dy+dw);
986 }
987 for (var i=0; i<ny; i++)
988 {
989 ctx.moveTo(dx-dw, dy+h/ny*i);
990 ctx.lineTo(dx+dw, dy+h/ny*i);
991 }
992 ctx.stroke();
993 ctx.closePath();
994}
995
996function process_eventdata(result)
997{
998 if (result.length!=160)
999 return;
1000
1001 var z = $("body").getAttribute("data-visible");
1002 var canv = $("canvas"+z);
1003 if (canv == undefined)
1004 return;
1005
1006 var type = canv.getAttribute("data-type");
1007
1008 var ctx = canv.getContext("2d");
1009 ctx.clearRect(0, 0, canv.width, canv.height);
1010
1011 switch (type)
1012 {
1013 case "hist": drawGraph(canv, result); break;
1014 //case "camera": drawCam(result); break;
1015 case "camera": drawFullCam(result); drawCamLegend(canv); break;
1016 }
1017
1018 $("image"+z).src = canv.toDataURL("image/png");
1019}
1020
1021/*
1022function save()
1023{
1024 var z = $("body").getAttribute("data-visible");
1025
1026 var canvas = $("canvas"+z);
1027 var img = canvas.toDataURL("image/png");
1028
1029 img = img.replace("image/png", "image/octet-stream");
1030
1031 document.location.href = img;
1032}
1033*/
1034window['onload'] = onload;
Note: See TracBrowser for help on using the repository browser.