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

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