source: trunk/FACT++/www/viewer/index.js@ 17703

Last change on this file since 17703 was 17700, checked in by tbretz, 12 years ago
First version of a web based event viewer.
File size: 30.5 KB
Line 
1'use strict';
2
3// display 'Wait'
4
5var editor1;
6var editor2;
7var plot;
8
9function debug(txt)
10{
11 var dbg = document.getElementById("debug");
12 dbg.appendChild(document.createTextNode(txt));
13 dbg.appendChild(document.createElement("br"));
14}
15
16function setupAccordion(accordion, container, inactive)
17{
18 function onAccordion(event, ui)
19 {
20 if (ui.oldHeader.length==0)
21 $(container).slideDown(400);
22 else
23 $(container).slideUp(400);
24 }
25
26 var config = { collapsible: true };
27
28 if (inactive)
29 {
30 config.active = false;
31 $(container).hide();
32 }
33
34 var acc = $(accordion);
35
36 acc.accordion(config);
37 acc.on("accordionbeforeactivate", onAccordion);
38}
39
40function onResize(event, ui)
41{
42 if (!ui.size)
43 return;
44
45 $(event.target.id).css({marginRight:'2px'});
46
47 var editor = event.target.id=="textcontainer1" ? editor1 : editor2;
48
49 editor.setSize("100%", ui.size.height);
50 editor.refresh();
51}
52
53function onResizeCenter(event, ui)
54{
55 var w = document.getElementById("cameracontainer").clientWidth/4;
56
57 var offy = 0;
58 var offx = 5;
59
60 var cont = document.getElementById("center").childNodes[0];
61
62 var nn;
63 if (cont)
64 {
65 nn = parseInt(cont.id[cont.id.length-1]);
66
67 document.getElementById("camera"+nn).height=parseInt(w*2);
68 document.getElementById("camera"+nn).width=parseInt(w*2);
69 }
70
71 if (nn!=1)
72 {
73 document.getElementById("camera1").height=parseInt(w)-offy;
74 document.getElementById("camera1").width=parseInt(w)-offx;
75 }
76
77 if (nn!=2)
78 {
79 document.getElementById("camera2").height=parseInt(w)-offy;
80 document.getElementById("camera2").width=parseInt(w)-offx;
81 }
82
83 if (nn!=3)
84 {
85 document.getElementById("camera3").height=parseInt(w)-offy;
86 document.getElementById("camera3").width=parseInt(w)-offx;
87 }
88
89 if (nn!=4)
90 {
91 document.getElementById("camera4").height=parseInt(w)-offy;
92 document.getElementById("camera4").width=parseInt(w)-offx;
93 }
94
95 document.getElementById("center").width=parseInt(w*2);
96
97 document.getElementById("cont1").width=parseInt(w);
98 document.getElementById("cont2").width=parseInt(w);
99 document.getElementById("cont3").width=parseInt(w);
100 document.getElementById("cont4").width=parseInt(w);
101
102 document.getElementById("cont1").height=parseInt(w);
103 document.getElementById("cont2").height=parseInt(w);
104 document.getElementById("cont3").height=parseInt(w);
105 document.getElementById("cont4").height=parseInt(w);
106
107 drawFullCam("camera1");
108 drawFullCam("camera2");
109 drawFullCam("camera3");
110 drawFullCam("camera4");
111}
112
113function createEditor(textarea)
114{
115 var editor;
116
117 var config =
118 {
119 //value: "function myScript(){return 100;}\n",
120 mode: { name: "text/typescript", globalVars: true },
121 lineNumbers: true,
122 styleActiveLine: true,
123 matchBrackets: true,
124 indentUnit: 4,
125 foldGutter: true,
126 gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"],
127 extraKeys: {
128 //"Ctrl-D": "duplicateLine",
129 //"Alt--": "goToBracket",
130 //"Ctrl-H": "findPrev",
131 "Ctrl-Down": "autocomplete",
132 "Tab": "indentAuto",
133 "Ctrl-Y": "deleteLine",
134 "Ctrl-.": function(cm) {
135 cm.foldCode(cm.getCursor());
136 },
137 "F11": function(cm) {
138 editor.setOption("fullScreen", !editor.getOption("fullScreen"));
139 },
140 "Ctrl-R": function(cm) {
141 editor.execCommand("replace");
142 },
143 "Esc": function(cm) {
144 if (editor.getOption("fullScreen")) editor.setOption("fullScreen", false);
145 },
146 "Enter": function(cm) {
147 editor.execCommand("indentAuto");
148 editor.execCommand("newlineAndIndent");
149 },
150 }
151
152 };
153
154 editor = CodeMirror.fromTextArea(document.getElementById(textarea), config);
155 editor.setOption("theme", "blackboard");
156
157 return editor;
158}
159
160function colorizeHTML(textarea)
161{
162 var config =
163 {
164 //value: "function myScript(){return 100;}\n",
165 mode: { name: "text/typescript", globalVars: true },
166 readOnly: true,
167 };
168
169 CodeMirror.fromTextArea(document.getElementById(textarea), config);
170}
171
172function disableControls(disabled)
173{
174 $('#event').prop('disabled', disabled);
175 $('#pixel').prop('disabled', disabled);
176 $('#cbpx').prop('disabled', disabled);
177 $('#cbpx-c').prop('disabled', disabled);
178 $('#cbpx-b').prop('disabled', disabled);
179 $('#cbpx-p').prop('disabled', disabled);
180 $('#cbpx-x').prop('disabled', disabled);
181 $('#file').prop('disabled', disabled);
182}
183
184function onReady()
185{
186 //$('input,select').keypress(function(event) { return event.keyCode != 13; });
187
188 //colorizeHTML("code0");
189 //colorizeHTML("code1");
190
191 $("#accordion").accordion({collapsible:true,active:false,heightStyle:'content'});
192 $("#accordion").find('h3').filter(':contains(Runtime)').hide();
193 if (location.href.search('debug')==-1)
194 $("#accordion").find('h3').filter(':contains(Debug)').hide();
195
196 $("#textcontainer1").resizable({handles:"s",autoHide:true,});
197 $("#textcontainer1").on("resize", onResize);
198
199 $("#textcontainer2").resizable({handles:"s",autoHide:true,});
200 $("#textcontainer2").on("resize", onResize);
201
202 $("#cameracontainer").on("resize", onResizeCenter);
203 onResizeCenter();
204
205 $("#cont1").click(onClickNew);
206 $("#cont2").click(onClickNew);
207 $("#cont3").click(onClickNew);
208 $("#cont4").click(onClickNew);
209
210 $("#camera1").click(onClick);
211 $("#camera2").click(onClick);
212 $("#camera3").click(onClick);
213 $("#camera4").click(onClick);
214
215 editor1 = createEditor("editor1");
216 editor2 = createEditor("editor2");
217
218 setupAccordion('#accordion5', '#editorcontainer1', true);
219 setupAccordion('#accordion1', '#editorcontainer2');
220
221 $('#accordion5').on("accordionactivate", function() { $('#editorcontainer1fake').hide(); editor1.refresh(); });
222 $('#accordion1').on("accordionactivate", function() { $('#editorcontainer2fake').hide(); editor2.refresh(); });
223
224 setupAccordion('#accordion2', '#cameracontainer');
225 setupAccordion('#accordion3', '#waveformcontainer');
226 setupAccordion('#accordion4', '#helpcontainer', true);
227
228 $("#selectfile1").on('change', onFile);
229 $("#selectfile2").on('change', onFile);
230
231 $(document).ajaxStart(function() { disableControls(true) }).ajaxStop(function() { disableControls(false); });
232
233
234 $.ajax({
235 type: "POST",
236 cache: false,
237 url: "index.php",
238 success: onFilelistReceived,
239 error: function(xhr) { if (xhr.status==0) alert("ERROR[0] - Request failed!"); else alert("ERROR[0] - "+xhr.statusText+" ["+xhr.status+"]"); }
240 });
241}
242
243function onFileSelect(event, ui)
244{
245 onSubmit(ui.item.value);
246}
247
248function onFilelistReceived(result)
249{
250 var dbg = document.getElementById("debug");
251
252 var pre = document.createElement("pre");
253 pre.appendChild(document.createTextNode(rc));
254 dbg.appendChild(pre);
255
256 var rc;
257 try
258 {
259 rc = JSON.parse(result);
260 }
261 catch (e)
262 {
263 alert("ERROR[0] - Decoding answer:\n"+e);
264 return;
265 }
266
267 $("#file").autocomplete({source: rc, select: onFileSelect} );
268 document.getElementById("file").value = "2014/04/17-181";
269
270 onSubmit("2014/04/17-181");
271}
272
273function setZoom(xfrom, xto, yfrom, yto)
274{
275 var xaxis = plot.getXAxes()[0];
276 var yaxis = plot.getYAxes()[0];
277
278 if (xfrom!==undefined)
279 xaxis.options.min = xfrom;
280 if (xto!==undefined)
281 xaxis.options.max = xto;
282
283 if (yfrom!==undefined)
284 yaxis.options.min = yfrom;
285 if (yto!==undefined)
286 yaxis.options.max = yto;
287
288 plot.setupGrid();
289 plot.draw();
290 plot.clearSelection();
291}
292
293function processCameraData(id, data)
294{
295 var canv = document.getElementById(id);
296
297 canv.dataAbs = [ ];
298 for (var i=0; i<1440; i++)
299 if (data[i]!==undefined && data[i]!==null)
300 canv.dataAbs[i] = data[i];
301
302 canv.min = Math.min.apply(Math, canv.dataAbs.filter(function(e){return !isNaN(e)}));
303 canv.max = Math.max.apply(Math, canv.dataAbs.filter(function(e){return !isNaN(e)}));
304
305 canv.dataRel = [ ];
306 for (var i=0; i<1440; i++)
307 if (data[i]!==undefined && data[i]!==null)
308 canv.dataRel[i] = (data[i]-canv.min)/canv.max;
309
310 var n = id[id.length-1];
311
312 if (document.getElementById("cameraminon"+n).checked)
313 document.getElementById("cameramin"+n).value = canv.min;
314 if (document.getElementById("cameramaxon"+n).checked)
315 document.getElementById("cameramax"+n).value = canv.max;
316
317 onCameraMinMax(n);
318}
319
320
321function onDataReceived(rc)
322{
323 var dbg = document.getElementById("debug");
324
325 var pre = document.createElement("pre");
326 pre.appendChild(document.createTextNode(rc));
327 dbg.appendChild(pre);
328
329 try
330 {
331 rc = JSON.parse(rc);
332 }
333 catch (e)
334 {
335 alert("ERROR[1] - Decoding answer:\n"+e);
336 return;
337 }
338
339 document.getElementById("event").max = rc.event.numEvents;
340 var el = document.getElementById("numevents");
341 if (el.firstChild)
342 el.removeChild(el.firstChild);
343 el.appendChild(document.createTextNode(rc.event.numEvents));
344
345 if (rc.timeJs)
346 {
347 var err = document.getElementById("error");
348 while (err.lastChild)
349 err.removeChild(err.lastChild);
350
351 $("#accordion").accordion("option", "active", false);
352 $("#accordion").find('h3').filter(':contains(Runtime)').hide();
353
354 var con = document.getElementById("console");
355 while (con.lastChild)
356 con.removeChild(con.lastChild);
357 }
358
359
360 if (rc.err)
361 {
362 err.appendChild(document.createTextNode("Javascript runtime exception: "+rc.err.file+":"+rc.err.lineNumber));
363 err.appendChild(document.createTextNode("\n"));
364 err.appendChild(document.createTextNode(rc.err.sourceLine));
365 err.appendChild(document.createTextNode("\n"));
366 err.appendChild(document.createTextNode(rc.err.trace));
367
368 var editor = rc.err.file=="main" ? editor2 : editor1;
369 editor.setCursor(rc.err.lineNumber-1, 1);
370
371 $("#accordion").find('h3').filter(':contains(Runtime)').show();
372 $("#accordion").accordion("option", "active", 0);
373 }
374
375 var canv = document.getElementById("camera1");
376
377 if (rc.debug!==undefined)
378 {
379 con.appendChild(document.createTextNode(rc.debug));
380
381 debug("return "+JSON.stringify(rc.ret));
382 debug("");
383 debug("Execution times:");
384 debug("TimeJS="+(rc.timeJs*1000).toFixed(2)+"ms");
385 }
386
387 if (rc.ret!==undefined && Array.isArray(rc.ret))
388 {
389 if (!Array.isArray(rc.ret[0]))
390 processCameraData("camera1", rc.ret);
391 else
392 processCameraData("camera1", rc.ret[0]);
393
394 if (rc.ret.length>1)
395 processCameraData("camera2", rc.ret[1]);
396
397 if (rc.ret.length>2)
398 processCameraData("camera3", rc.ret[2]);
399
400 if (rc.ret.length>3)
401 processCameraData("camera4", rc.ret[3]);
402 }
403
404 if (canv.dataAbs && rc.event)
405 document.getElementById("value").value = canv.dataAbs[rc.event.pixel];
406
407 debug("TimePhp="+(rc.timePhp*1000).toFixed(1)+"ms");
408
409 if (Array.isArray(rc.waveform))
410 {
411 var waveform = document.getElementById("waveform");
412
413 var data = [[],[],[],[]];
414
415 var min = [];
416 var max = [];
417 if (Array.isArray(rc.waveform) && rc.waveform.length==rc.event.numRoi)
418 {
419 min.push(Math.min.apply(Math, rc.waveform));
420 max.push(Math.max.apply(Math, rc.waveform));
421
422 for (var i=0; i<rc.event.numRoi; i++)
423 data[0][i] = [ i, rc.waveform[i] ];
424 }
425
426 for (var j=0; j<4; j++)
427 {
428 var ref = rc.waveform[j];
429
430 if (Array.isArray(ref) && ref.length==rc.event.numRoi)
431 {
432 min.push(Math.min.apply(Math, ref));
433 max.push(Math.max.apply(Math, ref));
434
435 for (var i=0; i<rc.event.numRoi; i++)
436 data[j][i] = [ i, ref ];
437
438 }
439 }
440
441 waveform.ymin = Math.min.apply(Math, min);
442 waveform.ymax = Math.max.apply(Math, max);
443 waveform.xmin = 0;
444 waveform.xmax = rc.event.numRoi;
445
446 if (document.getElementById("waveformminon").checked)
447 document.getElementById("waveformmin").value = waveform.ymin;
448 if (document.getElementById("waveformmaxon").checked)
449 document.getElementById("waveformmax").value = waveform.ymax;
450
451 var ymin = document.getElementById("waveformminon").checked ? waveform.ymin : parseInt(document.getElementById("waveformmin").value);
452 var ymax = document.getElementById("waveformmaxon").checked ? waveform.ymax : parseInt(document.getElementById("waveformmax").value);
453
454 var opts =
455 {
456 xaxis: {
457 min: waveform.xmin-1,
458 max: waveform.xmax+1,
459 },
460 yaxis: {
461 min: ymin-5,
462 max: ymax+5,
463 },
464 series: {
465 lines: {
466 show: true
467 },
468 points: {
469 show: true,
470 symbol: 'cross',
471 }
472 },
473 selection: {
474 mode: "xy"
475 },
476 grid: {
477 hoverable: true,
478 }
479 };
480
481 plot = $.plot("#waveform", data, opts);
482
483 waveform = $('#waveform');
484 waveform.bind("plotselected", function (event, ranges)
485 {
486 setZoom(ranges.xaxis.from, ranges.xaxis.to,
487 ranges.yaxis.from, ranges.yaxis.to);
488 });
489
490 waveform.dblclick(function ()
491 {
492 var waveform = document.getElementById("waveform");
493 setZoom(waveform.xmin-1, waveform.xmax+1, waveform.ymin-5, waveform.ymax+5);
494 });
495 waveform.bind("plothover", function (event, pos, item)
496 {
497 if (!item)
498 {
499 $("#tooltip").fadeOut(100);
500 return;
501 }
502
503 var x = item.datapoint[0].toFixed(2);
504 var y = item.datapoint[1].toFixed(2);
505 //item.series.label
506
507 var tooltip = $("#tooltip");
508 tooltip.html(parseInt(x) + " / " + y);
509 tooltip.css({top: item.pageY-20, left: item.pageX+5});
510 tooltip.fadeIn(200);
511 });
512 }
513
514 //$("#accordion").accordion("refresh");
515}
516
517function onSubmit(file, pixelOnly)
518{
519 if (!file)
520 file = document.getElementById("file").value;
521
522 var dbg = document.getElementById("debug");
523 while (dbg.lastChild)
524 dbg.removeChild(dbg.lastChild);
525
526 var event = document.getElementById("event").value;
527 var pixel = document.getElementById("pixel").value;
528 var source1 = editor1.getValue();
529 var source2 = editor2.getValue();
530
531 var uri = "file="+file+"&event="+event+"&pixel="+map[pixel];
532 uri += "&source1="+encodeURIComponent(source1);
533 uri += "&source2="+encodeURIComponent(source2);
534
535 $.ajax({
536 type: "POST",
537 cache: false,
538 url: "index.php",
539 data: uri,
540 success: onDataReceived,
541 error: function(xhr) { if (xhr.status==0) alert("ERROR[1] - Request failed!"); else alert("ERROR[1] - "+xhr.statusText+" ["+xhr.status+"]"); }
542 });
543}
544
545function onFile(event, ui)
546{
547 var f = event.target.files[0];
548 if (!f)
549 return;
550
551 if (!f.type.match('text/plain') && !f.type.match('application/javascript'))
552 {
553 alert("ERROR - Unknown file type.");
554 return;
555 }
556
557 var id = event.target.id;
558 var editor = id[id.length-1]=='1' ? editor1 : editor2;
559
560 var reader = new FileReader();
561
562 // Closure to capture the file information.
563 reader.onload = (function(theFile) { return function(e) { editor.setValue(e.target.result); }; })(f);
564 // onloadstart
565 // onloadend
566 // onprogress
567
568 // Read in the text file
569 reader.readAsText(f);
570}
571
572function onEvent()
573{
574 onSubmit();
575}
576
577function onPixel()
578{
579 var p = parseInt(document.getElementById("pixel").value);
580
581 var cbpx = map[p];
582
583 document.getElementById("cbpx-c").value = parseInt((cbpx/360));
584 document.getElementById("cbpx-b").value = parseInt((cbpx/36)%10);
585 document.getElementById("cbpx-p").value = parseInt((cbpx/9)%4);
586 document.getElementById("cbpx-x").value = parseInt((cbpx%9));
587 document.getElementById("cbpx").value = parseInt(cbpx);
588
589 onSubmit("", true);
590}
591
592function onCBPX()
593{
594 var c = parseInt(document.getElementById("cbpx-c").value);
595 var b = parseInt(document.getElementById("cbpx-b").value);
596 var p = parseInt(document.getElementById("cbpx-p").value);
597 var x = parseInt(document.getElementById("cbpx-x").value);
598
599 var cbpx = c*360 + b*36 + p*9 + x;
600
601 document.getElementById("cbpx").value = parseInt(cbpx);
602 document.getElementById("pixel").value = map.indexOf(cbpx);
603
604 onSubmit("", true);
605}
606
607function onHW()
608{
609 var cbpx = parseInt(document.getElementById("cbpx").value);;
610
611 document.getElementById("cbpx-c").value = parseInt((cbpx/360));
612 document.getElementById("cbpx-b").value = parseInt((cbpx/36)%10);
613 document.getElementById("cbpx-p").value = parseInt((cbpx/9)%4);
614 document.getElementById("cbpx-x").value = parseInt((cbpx%9));
615
616 document.getElementById("pixel").value = map.indexOf(cbpx);
617
618 onSubmit("", true);
619}
620
621function isInside(x, y, mouse)
622{
623 var dist = Math.sqrt((mouse.x-x)*(mouse.x-x)+(mouse.y-y)*(mouse.y-y));
624 return dist<0.5;
625
626 /*
627 ctx.translate(x, y);
628 ctx.scale(1/2, 1/3);
629
630 ctx.beginPath();
631 ctx.moveTo( 1, 1);
632 ctx.lineTo( 0, 2);
633 ctx.lineTo(-1, 1);
634 ctx.lineTo(-1, -1);
635 ctx.lineTo( 0, -2);
636 ctx.lineTo( 1, -1);
637 ctx.fill();
638
639 ctx.restore();
640 */
641}
642
643function getIndex(id, mouse)
644{
645 var canv = document.getElementById(id);
646
647 var scale = 83;
648
649 var w = Math.min(canv.width/scale, canv.height/scale);
650
651 //ctx.translate(canv.width/2, canv.height/2);
652 //ctx.scale(w*2, w*2);
653 //ctx.scale(1, Math.sqrt(3)/2);
654 //ctx.translate(-0.5, 0);
655
656 mouse.x -= canv.width/2;
657 mouse.y -= canv.height/2;
658 mouse.x /= w*2;
659 mouse.y /= w*2;
660 mouse.y /= Math.sqrt(3)/2;
661 mouse.x -= -0.5;
662
663 if (isInside(0, 0, mouse))
664 return 0;
665
666 var cnt = 1;
667 for (var ring=1; ring<24; ring++)
668 {
669 for (var s=0; s<6; s++)
670 {
671 for (var i=1; i<=ring; i++)
672 {
673 var pos = new Position(s, ring, i);
674 if (pos.d() - pos.x > 395.75)
675 continue;
676
677 if (isInside(pos.x, pos.y, mouse))
678 return cnt;
679 cnt++;
680 }
681 }
682 }
683
684 if (isInside(7, -22, mouse))
685 return 1438;
686 if (isInside(7, 22, mouse))
687 return 1439;
688
689 return -1;
690}
691
692var inprogress = 0;
693function moveAnimate(n, target)
694{
695 if (inprogress==n || inprogress<0)
696 return;
697
698 inprogress = target ? -n : n;
699
700 var element = $("#camera"+n); //Allow passing in either a JQuery object or selector
701 var newParent = $(target ? target : "#cont"+n); //Allow passing in either a JQuery object or selector
702
703 var oldOffset = element.offset();
704
705 var newOffset = newParent.offset();
706
707 var w = newParent.width();
708 var h = newParent.height();
709
710 var temp = element.appendTo('body');
711 temp.css('position', 'absolute')
712 .css('left', oldOffset.left)
713 .css('top', oldOffset.top)
714 .css('zIndex', 400);
715
716 temp.animate( {'top': newOffset.top, 'left':newOffset.left, 'width':w, 'height': h},
717 'slow', function()
718 {
719 temp = temp.appendTo(newParent);
720 temp.css('position', 'default');
721 temp.css('width', 'default');
722 temp.css('height', 'default');
723 temp.css('left', '0');
724 temp.css('top', '0');
725
726 var canv = document.getElementById("camera"+n);
727
728 canv.width = w;
729 canv.height = h;
730
731 drawFullCam("camera"+n);
732
733 inprogress = 0;
734 });
735}
736
737function onClickNew(event)
738{
739 var id = event.target.id;
740 var n = parseInt(id[id.length-1]);
741
742 if (id.substr(0, 3)=="cam")
743 {
744 var cont = document.getElementById("center").childNodes[0];
745 if (cont)
746 {
747 var nn = parseInt(cont.id[cont.id.length-1]);
748 moveAnimate(nn);
749 }
750 moveAnimate(n, "#center");
751
752 }
753 else
754 moveAnimate(n);
755}
756
757function onClick(event)
758{
759 var cont = document.getElementById("center").childNodes[0];
760 if (!cont)
761 return;
762
763 if (cont.id!=event.target.id)
764 return;
765
766 var mouse = getClickPosition();
767 var index = getIndex(event.target.id, mouse);
768
769 if (index<0)
770 return;
771
772 document.getElementById("pixel").value = index;
773
774 onPixel();
775}
776
777function getClickPosition(event)
778{
779 var event = window.event;
780
781 if (event.offsetX !== undefined && event.offsetY !== undefined)
782 return { x: event.offsetX, y: event.offsetY };
783
784 return { x: event.layerX, y: event.layerY };
785}
786
787function onCameraMinMax(n)
788{
789 var canv = document.getElementById("camera"+n);
790
791 canv.zmin = document.getElementById("cameramin"+n).value;
792 canv.zmax = document.getElementById("cameramax"+n).value;
793
794 drawFullCam("camera"+n);
795}
796
797function onCameraMinMaxOn(n)
798{
799 var canv = document.getElementById("camera"+n);
800
801 var redraw;
802 if (document.getElementById("cameraminon"+n).checked)
803 {
804 document.getElementById("cameramin"+n).setAttribute("disabled", "true");
805 document.getElementById("cameramin"+n).value = canv.min;
806 redraw = true;
807 }
808 else
809 document.getElementById("cameramin"+n).removeAttribute("disabled");
810
811 if (document.getElementById("cameramaxon"+n).checked)
812 {
813 document.getElementById("cameramax"+n).setAttribute("disabled", "true");
814 document.getElementById("cameramax"+n).value = canv.max;
815 redraw = true;
816 }
817 else
818 document.getElementById("cameramax"+n).removeAttribute("disabled");
819
820 if (redraw)
821 onCameraMinMax(n);
822}
823
824function onWaveformMinMax()
825{
826 var wf = document.getElementById("waveform");
827
828 var xmin, xmax, ymin, ymax;
829
830 var redraw;
831 if (!document.getElementById("waveformminon").checked)
832 ymin = document.getElementById("waveformmin").value;
833 if (!document.getElementById("waveformmaxon").checked)
834 ymax = document.getElementById("waveformmax").value;
835
836 setZoom(xmin, xmax, ymin, ymax);
837
838}
839
840function onWaveformMinMaxOn()
841{
842 var wf = document.getElementById("waveform");
843
844 var xmin, xmax, ymin, ymax;
845
846 var redraw;
847 if (document.getElementById("waveformminon").checked)
848 {
849 document.getElementById("waveformmin").setAttribute("disabled", "true");
850 document.getElementById("waveformmin").value = wf.ymin;
851 ymin = wf.ymin-5;
852 }
853 else
854 document.getElementById("waveformmin").removeAttribute("disabled");
855
856 if (document.getElementById("waveformmaxon").checked)
857 {
858 document.getElementById("waveformmax").setAttribute("disabled", "true");
859 document.getElementById("waveformmax").value = wf.ymax;
860 ymax = wf.ymax+5;
861 }
862 else
863 document.getElementById("waveformmax").removeAttribute("disabled");
864
865 setZoom(xmin, xmax, ymin, ymax);
866}
867
868//document.addEventListener("click", getClickPosition, false);
869
870$(document).ready(onReady);
871
872// ================================== Pixel mapping =================================================
873
874var codedMap = "966676:6:A;68656364626Y?\\?;A=A<AGADAN4K4i5g5h5o506W?Z?]?_?>A@A?AJAIAFACAM4J4H4f5d5e5l5m5n516X?[?^?N?P?AA1ABAVAUAKAHAEAO4L4I4G4E4c5a5b5M6j5k5V6Y6\\6_6G?J?O?Q?S?2A4A3AYAXAWAbA_AnAkAhA3404F4D4B4`5^5_5J6K6L6S6T6W6Z6]6E?H?K?M?R?T?V?5A7A6A\\A[AZAeAdAaA^AmAjAgA24o3m3C4A4?4]5[5\\5G6H6I6P6Q6R6U6X6[6^6F?I?L?<?>?U?;@=@8Ah@9AMALA]ABCACfAcA`AoAlAiA4414n3l3<4@4>425Z5X5Y5D6E6F698N6O608E8H8K8H>K>N>?>B>=???A?<@>@@@i@k@j@PAOANAECDCCC<C9CZCWCTC=3:3734313=4;4943515o4W5U5V5A6B6C6687888m7n7C8F8I8F>I>L>=>@>C>E>@?B?D??@A@C@l@n@m@SARAQAHCGCFC?C>C;C8CYCVCSC<393633303n2:4846405n4l4T5R5S5>6?6@6384858j7k7l7o7D8G8J8G>J>M>>>A>D>4>6>C?3?5?B@2@4@o@_@0ALBKBTA0CoBIC8D7D@C=C:C[CXCUC>3;3835323o2m2k27454j3m4k4i4Q5O5P5C7<6=6g71828o8h7i7S9<8?8B8Q>T>W>@=C=F=e<h<5>7>9>4?6?8?3@5@7@`@b@a@OBNBMB3C2C1C;D:D9D_D\\DQCNCKCF3C3@3>2;282Z1W1l2j2h2k3i3g3j4h4f4N5L5M5@7A7B7d7e7f7l8m8n8P9Q9:8=8@8O>R>U>>=A=D=c<f<i<k<8>:><>7?9?;?6@8@:@c@e@d@RBQBPB6C5C4C>D=D<DbDaD^D[DPCMCJCE3B3?3=2:272Y1V1T1i2g2e2h3f3d3g4e4c4K5I5J5=7>7?7a7b7c7i8j8k8M9N9O9R9;8>8A8P>S>V>?=B=E=d<g<j<Z<\\<;>k=m=:?j>l>9@i?k?f@V@g@CBBBSBgBfB7CoCnC?DSDRDcD`D]DRCOCLCG3D3A3?2<292[1X1U1S1Q1f2d2b2e3c3a3d4b4`4H5F5G5:7;7<7^7_7`7f8g8h8J9K9L97:::=:@:C:F:I:I=L=O=7=:===n<1=[<]<_<l=n=0>k>m>o>j?l?n?W@Y@X@FBEBDBjBiBhB2D1D0DVDUDTDCE@EOELEIEXEUERE5222o1l1i1f1c1`1R1P1N1c2a2_2b3`3^3a4_4]4<5:5;5778797[7\\7]7c8d8e8G9H9I94:5:8:;:>:A:D:G:G=J=M=5=8=;=l<o<2=4=^<`<b<o=1>3>n>0?2?m?o?1@Z@\\@[@IBHBGBmBlBkB5D4D3DYDXDWDFEEEBE?ENEKEHEWETEQE4212n1k1h1e1b1_1]1O1M1K1`2^2\\2_3]3[3^4\\4Z4957585475767X7Y7Z7`8a8b8D9E9F91:2:3:6:9:<:?:B:E:H:H=K=N=6=9=<=m<0=3=d;f;a<H<J<2>b=d=1?a>c>0@`?b?]@D@^@:B9BJB^B]BnBfCeC6DJDIDZDnDmDGEDEAEPEMEJEYEVESE623202m1j1g1d1a1^1\\1[0L1J1?1]2[2Y2\\3Z3X3[4Y4W4654555172737U7V7W7]8^8_8A9B9C9e9o90:n9g:j:m:L:O:R:U:X:[:];`;c;T;W;Z;7<9<e;g;i;I<K<M<c=e=g=b>d>f>a?c?e?E@G@F@=B<B;BaB`B_BiChCgCMDLDKD1E0EoD9E7E<F9F6FaE^E[EjEgEdER0O0L0I0F0C0n0l0\\0Z0X0@1>1<1Z2X2V2Y3W3U3X4V4T4E5C5D5n6o607R7S7T7Z8[8\\8>9?9@9b9c9d9l9m9e:h:k:J:M:P:S:V:Y:[;^;a;R;U;X;6<8<:<;<h;j;l;L<N<P<f=h=j=e>g>i>d?f?h?N@Q@H@@B?B>BdBcBbBlCkCjCPDODND4E3E2E;E:E8E6E;F8F5F`E]EZEiEfEcEQ0N0K0H0E0B0m0k0j0Y0W0U0=1;191W2U2S2V3T3R3U4S4Q4B5@5A5k6l6m6O7P7Q7W8X8Y8;9<9=9_9`9a9j9k9\\:_:f:i:l:K:N:Q:T:W:Z:\\;_;b;S;V;Y;C<E<G<<<m;k;1<2<O<Q<S<i=[=P=h>X>Z>g?M@O@R@U@S@J@I@AB1B0BeBTB\\CmCAD@DQDiDhD5EdD<E4F2F0F=F:F7FbE_E\\EkEhEeES0P0M0J0G0D011o0h0g0e0V0T0`0:181Q2T2R2H2S3Q3P3R4P4K3?5=5>5c6i6j6h6M7N7L7U8V8T899:9W9]9^9\\9g9h9i9]:`:c:5;2;o:>;;;8;P;M;J;G;D;A;?<A<D<F<=<><n;o;3<5<R<T<Y=Z=Q=R=Y>[>\\>^>P@T@L@K@5B4B3B2BVBUB^C]CCDBDkDjDfDeD>E=E3F1FnElE@FCFFFIFLFOF;0>0A0205080513101i0f0d0c0b0_0I1H1D1P2O2G2F2D2O3N3M3J3H3a6b6e6f6g6I7J7K7R8S8397989V9Y9Z9[9f9^:a:d:4;1;n:=;:;7;O;L;I;F;C;@;@<B<0<4<U<V<X<`=]=\\=S=U=W=]>_>`>8B7B6BZBXBWB_CaC`CFDEDDDlDgDoEmE>FAFDFGFJFMF90<0?0003060714121a0^0]0G1C1B1N2L2E2C2B2@2L3I3`6d6E7F7G7H7O8Q8192969T9U9X96;3;0;?;<;9;Q;N;K;H;E;B;W<Y<^=_=a=T=V=X=\\B[BYBdCcCbCHDGD?FBFEFHFKFNF:0=0@0104070F1E1A1M2K2J2I2A2D7L8M8N8P809495961b:";
875var map = new Array(1440);
876
877// first: decode the pixel mapping!
878var sum = 1036080;
879for (var i=0; i<1440; i++)
880{
881 var d0 = codedMap.charCodeAt(i*2) -48;
882 var d1 = codedMap.charCodeAt(i*2+1)-48;
883
884 map[i] = d0 | (d1<<6);
885 sum -= map[i];
886}
887if (sum!=0)
888 alert("Pixel mapping table corrupted!");
889
890// ================================== Camera Display ================================================
891
892function hueToRGB(hue)
893{
894 hue /= 3;
895 hue %= 6;
896
897 if (hue<1) return parseInt(255*hue, 10);
898 if (hue<3) return parseInt(255, 10);
899 if (hue<4) return parseInt(255*(4-hue), 10);
900
901 return 0.
902}
903
904function hueToHex(flt)
905{
906 var s = hueToRGB(flt).toString(16);
907 return s.length==2 ? s : "0"+s;
908}
909
910function HLStoRGB(hue)
911{
912 if (isNaN(hue))
913 return "fff";
914
915 if (hue<0)
916 return "eef"; // 555
917
918 if (hue>1)
919 return "700"; // 666
920
921 hue *= 14;
922
923 var sr = hueToHex(20-hue);
924 var sg = hueToHex(14-hue);
925 var sb = hueToHex(26-hue);
926
927 return sr+sg+sb;
928}
929
930function drawHex(ctx, x, y, col, min, max)
931{
932 if (col===undefined || col===null)
933 return;
934
935 var lvl = (col-min)/(max-min);
936
937 ctx.fillStyle = "#"+HLStoRGB(lvl);
938
939 ctx.save();
940
941 ctx.translate(x, y);
942 ctx.scale(1/2, 1/3);
943
944 ctx.beginPath();
945 ctx.moveTo( 1, 1);
946 ctx.lineTo( 0, 2);
947 ctx.lineTo(-1, 1);
948 ctx.lineTo(-1, -1);
949 ctx.lineTo( 0, -2);
950 ctx.lineTo( 1, -1);
951 ctx.fill();
952
953 ctx.restore();
954}
955
956function Position(s, ring, i)
957{
958 switch (s)
959 {
960 case 1: this.x = ring - i*0.5; this.y = + i; break;
961 case 2: this.x = ring*0.5 - i; this.y = ring ; break;
962 case 3: this.x = -ring*0.5 - i*0.5; this.y = ring - i; break;
963 case 4: this.x = -ring + i*0.5; this.y = - i; break;
964 case 5: this.x = -ring*0.5 + i; this.y = -ring ; break;
965 case 0: this.x = ring*0.5 + i*0.5; this.y = -ring + i; break;
966 }
967 this.d = (function () { return this.x*this.x + this.y*this.y*3/4; });
968}
969
970function drawFullCam(id)
971{
972 var canv = document.getElementById(id);
973 if (!canv)
974 return;
975
976 var ctx = canv.getContext("2d");
977
978 ctx.clearRect(0, 0, canv.width, canv.height);
979
980 // ======================= Draw Graphics ======================
981
982 var data = canv.dataRel;
983 if (!data)
984 return;
985
986 var min = (canv.zmin-canv.min)/canv.max;
987 var max = (canv.zmax-canv.min)/canv.max;
988
989 var scale = 83;
990
991 var w = Math.min(canv.width/scale, canv.height/scale);
992
993 ctx.save();
994 ctx.translate(canv.width/2, canv.height/2);
995 ctx.scale(w*2, w*2);
996 // ctx.rotate(Math.PI/3);
997
998 ctx.scale(1, Math.sqrt(3)/2);
999 ctx.translate(-0.5, 0);
1000
1001 drawHex(ctx, 0, 0, data[map[0]], min, max);
1002
1003 var cnt = 1;
1004 for (var ring=1; ring<24; ring++)
1005 {
1006 for (var s=0; s<6; s++)
1007 {
1008 for (var i=1; i<=ring; i++)
1009 {
1010 var pos = new Position(s, ring, i);
1011 if (pos.d() - pos.x > 395.75)
1012 continue;
1013
1014 drawHex(ctx, pos.x, pos.y, data[map[cnt]], min, max);
1015 cnt++;
1016 }
1017 }
1018 }
1019
1020 drawHex(ctx, 7, -22, data[map[1438]], min, max);
1021 drawHex(ctx, 7, 22, data[map[1439]], min, max);
1022
1023 ctx.restore();
1024
1025 // ======================= Draw Legend ======================
1026
1027 var lmin = parseFloat(canv.min).toFixed(1);
1028 var lmax = parseFloat(canv.max).toFixed(1);
1029
1030 var v0 = parseFloat(canv.zmin);
1031 var v1 = parseFloat(canv.zmax);
1032
1033 var diff = v1-v0;
1034
1035 var cw = canv.width;
1036 //var ch = canv.height;
1037
1038 ctx.font = "8pt Arial";
1039 ctx.textAlign = "right";
1040 ctx.textBaseline = "top";
1041
1042 for (var i=0; i<11; i++)
1043 {
1044 ctx.strokeStyle = "#"+HLStoRGB(i/10);
1045 ctx.strokeText((v0+diff*i/10).toPrecision(3), cw-5, 125-i*12);
1046 }
1047
1048 var mw = Math.max(ctx.measureText(lmin).width,
1049 ctx.measureText(lmax).width);
1050
1051 ctx.textBaseline = "top";
1052 ctx.strokeStyle = "#000";
1053
1054 //ctx.strokeText(min, 5+mw, 5+24);
1055 ctx.strokeText(lmin, 5+mw, 5+12);
1056 ctx.strokeText(lmax, 5+mw, 5);
1057}
1058
Note: See TracBrowser for help on using the repository browser.