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

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