source: trunk/FACT++/www/viewer/index.html@ 17816

Last change on this file since 17816 was 17814, checked in by tbretz, 11 years ago
Some small layout improevemnts; added Grid-checkbox
File size: 28.0 KB
Line 
1<!DOCTYLE HTML>
2<html>
3<head>
4 <link rel="stylesheet" href="jquery-ui-1.10.4.custom/css/smoothness/jquery-ui-1.10.4.custom.min.css"/>
5 <script src="jquery-2.1.0.min.js"></script>
6 <script src="jquery-ui-1.10.4.custom/js/jquery-ui-1.10.4.custom.min.js"></script>
7
8 <link rel="stylesheet" href="codemirror-4.1/lib/codemirror.css"/>
9 <!--<link rel="stylesheet" href="codemirror-4.1/theme/myblackboard.css"/>-->
10 <!--<link rel="stylesheet" href="codemirror-4.1/theme/blackboard.css">-->
11 <!--<link rel="stylesheet" href="codemirror-4.1/theme/3024-night.css">-->
12 <link rel="stylesheet" href="codemirror-4.1/addon/display/fullscreen.css"/>
13 <link rel="stylesheet" href="codemirror-4.1/addon/dialog/dialog.css"/>
14 <link rel="stylesheet" href="codemirror-4.1/addon/fold/foldgutter.css"/>
15 <link rel="stylesheet" href="codemirror-4.1/addon/lint/lint.css"/>
16 <script src="codemirror-4.1.min.js"></script>
17 <!--
18 <script src="codemirror-4.1/lib/codemirror.js"></script>
19 <script src="codemirror-4.1/mode/javascript/javascript.js"></script>
20 <script src="codemirror-4.1/addon/selection/active-line.js"></script>
21 <script src="codemirror-4.1/addon/fold/brace-fold.js"></script>
22 <script src="codemirror-4.1/addon/runmode/colorize.js"></script>
23 <script src="codemirror-4.1/addon/fold/comment-fold.js"></script>
24 <script src="codemirror-4.1/addon/dialog/dialog.js"></script>
25 <script src="codemirror-4.1/addon/fold/foldcode.js"></script>
26 <script src="codemirror-4.1/addon/fold/foldgutter.js"></script>
27 <script src="codemirror-4.1/addon/display/fullscreen.js"></script>
28 <script src="codemirror-4.1/addon/hint/javascript-hint.js"></script>
29 <script src="codemirror-4.1/addon/lint/lint.js"></script>
30 <script src="codemirror-4.1/addon/lint/javascript-lint.js"></script>
31 <script src="codemirror-4.1/addon/search/match-highlighter.js"></script>
32 <script src="codemirror-4.1/addon/edit/matchbrackets.js"></script>
33 <script src="codemirror-4.1/addon/runmode/runmode.js"></script>
34 <script src="codemirror-4.1/addon/search/search.js"></script>
35 <script src="codemirror-4.1/addon/search/searchcursor.js"></script>
36 <script src="codemirror-4.1/addon/hint/show-hint.js"></script>
37 -->
38 <script src="flot-0.8.3/jquery.flot.min.js"></script>
39 <script src="flot-0.8.3/jquery.flot.selection.min.js"></script>
40 <script src="flot-0.8.3/jquery.flot.symbol.min.js"></script>
41 <script src="flot-0.8.3/jquery.flot.resize.js"></script>
42 <script src="jshint.js"></script>
43 <script src="index.js"></script>
44
45 <link rel="stylesheet" href="index.css"/>
46</head>
47
48<body>
49
50<div id='tooltip' style="z-index:1000;position:absolute;display:none;border:1px solid #fdd;padding;2px;background-color:#fee;opacity:0.8"></div>
51
52<div class="myaccordion" id="accordion5">
53 <h3><a href="#">Editor 1 (proc)</a></h3>
54 <div id="editorcontainer1fake" style="position:absolute;border:0;opacity:0"></div>
55</div>
56<div id="editorcontainer1" style="z-index:600;">
57 <form action="index.php" method="post" style="margin-bottom:0px">
58 <div id="textcontainer1">
59 <textarea id="editor1" name="editor1" type="textarea">
60return $.data[pixel];
61 </textarea>
62 </div>
63 <div class="ui-widget-content" style="background:#333;color:#eef;border-top-width:0;padding-top:2px;">
64 <input type="submit" value="Save"></input>
65 <input type="file" name="files[]" id="selectfile1"></input><output id="file1"></output>
66 </div>
67 </form>
68</div>
69
70<div class="myaccordion" id="accordion1">
71 <h3><a href="#">Editor 2 (main)</a></h3>
72 <div id="editorcontainer2fake" style="position:absolute;border:0;opacity:0"></div>
73</div>
74<div id="editorcontainer2">
75 <form action="index.php" method="post" style="margin-bottom:0px">
76 <div id="textcontainer2">
77 <textarea id="editor2" name="editor2" type="textarea">
78print("This output will go to the virtual Console.\n");
79
80// The four first values of pixel 1
81var arr = [ $.data[1][0], $.data[1][1], $.data[1][2], $.data[1][3] ];
82print("Pixel 1: [ "+arr+" ]\n");
83
84// Get the maximum sample from each pixel
85var rc = [new Array(1440),new Array(1440)];
86for (var p=0; p<$.event.numPix; p++)
87{
88 var max = 0;
89 var idx = -1;
90 for (var s=5; s<$.event.numRoi-60; s++)
91 {
92 // spike suppression
93 var h = ($.data[p][s]-$.data[p][s-1]) + ($.data[p][s]-$.data[p][s+1]);
94
95 if ($.data[p][s]>max && h<20)
96 {
97 max = $.data[p][s];
98 idx = s;
99 }
100 }
101 rc[0][p]=idx<0 ? null : max;
102 rc[1][p]=idx<0 ? null : idx;
103}
104
105return rc;
106 </textarea>
107 </div>
108 <div class="ui-widget-content" style="background:#333;color:white;border-top-width:0;padding-top:2px;">
109 <input type="submit" value="Save"></input>
110 <input type="file" name="files[]" id="selectfile2"></input><output id="file2"></output>
111 </div>
112 </form>
113</div>
114
115<div class="myaccordion" id="accordion" style="margin-bottom:1ex">
116 <h3><a style="color:red" href="#">Runtime error</a></h3>
117 <div>
118 <pre id="error" style="color:red"></pre>
119 </div>
120 <h3><a href="#">Console</a></h3>
121 <div>
122 <pre style="color:green" id="console"></pre>
123 </div>
124 <h3><a href="#">Run info</a></h3>
125 <div>
126 <pre id="runinfo"></pre>
127 </div>
128 <h3><a href="#">Debug</a></h3>
129 <div id="debug">
130 </div>
131</div>
132
133<div class="ui-widget-content" style="background:#eee;margin-top:-10px">
134 <input id="submit" type="button" onclick="onSubmit();" value="Submit"></input>
135 <span style="float:right;white-space:nowrap;">
136 Cal:
137 <input id="calibrated" type="checkbox" onclick="onSubmit();"></input>
138 Run:
139 <input id="file" style="width:100px"></input>
140 </span>
141 &nbsp;
142 <span style="white-space:nowrap">
143 Evt:
144 <input id="event" style="text-align:right;" type="number" onchange="onEvent();" value="0" min="0" max="0" step="1"></input>/<span id="numevents">---</span>
145 </span>
146 &nbsp;
147 <span style="white-space:nowrap">
148 Pix:
149 <input id="pixel" style="text-align:right;width:50px;" type="number" onchange="onPixel();" value="0" min="0" max="1439" step="1"></input>
150 </span>
151 &nbsp;
152 <span style="white-space:nowrap">
153 CBPX:
154 <input id="cbpx-c" style="text-align:right;width:30px;" type="number" onchange="onCBPX();" value="1" min="0" max="3" step="1"></input>
155 <input id="cbpx-b" style="text-align:right;width:30px;" type="number" onchange="onCBPX();" value="0" min="0" max="9" step="1"></input>
156 <input id="cbpx-p" style="text-align:right;width:30px;" type="number" onchange="onCBPX();" value="3" min="0" max="3" step="1"></input>
157 <input id="cbpx-x" style="text-align:right;width:30px;" type="number" onchange="onCBPX();" value="6" min="0" max="8" step="1"></input>
158 =
159 <input id="cbpx" style="text-align:right;width:50px;" type="number" onchange="onHW();" value="393" min="0" max="1439" step="1"></input>
160 </span>
161</div>
162
163<div class="myaccordion" id="accordion2">
164 <h3><a href="#">Camera display</a></h3>
165</div>
166<div id="cameracontainer" class="ui-widget-content">
167 <table width="100%">
168 <colgroup>
169 <col style="width:38.5%;">
170 <col style="width:23%;">
171 <col style="width:38.5%;">
172 </colgroup>
173 <tr>
174 <td>
175 <span style="white-space:nowrap;margin-right:2px;">
176 Min
177 <input id="cameramin1" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(1);" value="0" disabled="true"></input>
178 <input id="cameraminon1" style="margin-left:0px;" type="checkbox" onclick="onCameraMinMaxOn(1);" checked="true"></input>
179 </span>
180 <span style="white-space:nowrap">
181 Max
182 <input id="cameramax1" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(1);" value="0" disabled="true"></input>
183 <input id="cameramaxon1" style="margin-left:0px;" type="checkbox" onclick="onCameraMinMaxOn(1);" checked="true"></input>
184 </span>
185 </td>
186 <td style="text-align:center" id="eventinfo">
187 </td>
188 <td style="text-align:right">
189 <span style="white-space:nowrap">
190 Min
191 <input id="cameramin2" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(2);" value="0" disabled="true"></input>
192 <input id="cameraminon2" style="margin-left:0px;" type="checkbox" onclick="onCameraMinMaxOn(2);" checked="true"></input>
193 </span>
194 <span style="white-space:nowrap;margin-left:2px;">
195 Max
196 <input id="cameramax2" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(2);" value="0" disabled="true"></input>
197 <input id="cameramaxon2" style="margin-left:0px;" type="checkbox" onclick="onCameraMinMaxOn(2);" checked="true"></input>
198 </span>
199 </td>
200 <td>
201 </td>
202 </tr>
203 </table>
204
205 <table id="table" width="100%" border="0" style="border:0;margin:0;padding:0;">
206 <tr style="margin:0;padding:0;">
207 <td style="margin:0;padding:0;">
208 <table border="0" style="margin:0;padding:0;">
209 <tr style="margin:0;padding:0;"><td style="margin:0;padding:0;" id="contcamera1"></tr>
210 <tr style="margin:0;padding:0;"><td style="margin:0;padding:0;" id="contcamera3"><canvas id="camera3" width="1" height="1"></canvas></td></tr>
211 </table>
212 </td>
213 <td style="margin:0;padding:0;" id="centercamera"><canvas id="camera1" width="1" height="1"></canvas></td>
214 <td style="margin:0;padding:0;">
215 <table border="0" style="margin:0;padding:0;">
216 <tr style="margin:0;padding:0;"><td style="margin:0;padding:0;" id="contcamera2"><canvas id="camera2" width="1" height="1"></canvas></td></tr>
217 <tr style="margin:0;padding:0;"><td style="margin:0;padding:0;" id="contcamera4"><canvas id="camera4" width="1" height="1"></canvas></td></tr>
218 </table>
219 </td>
220 </tr>
221 </table>
222
223 <table width="100%">
224 <colgroup>
225 <col style="width:38.5%;">
226 <col style="width:23%;">
227 <col style="width:38.5%;">
228 </colgroup>
229 <tr>
230 <td>
231 <span style="white-space:nowrap;margin-right:2px;">
232 Min
233 <input id="cameramin3" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(3);" value="0" disabled="true"></input>
234 <input id="cameraminon3" style="margin-left:0px;" type="checkbox" onclick="onCameraMinMaxOn(3);" checked="true"></input>
235 </span>
236 <span style="white-space:nowrap">
237 Max
238 <input id="cameramax3" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(3);" value="0" disabled="true"></input>
239 <input id="cameramaxon3" style="margin-left:0px;" type="checkbox" onclick="onCameraMinMaxOn(3);" checked="true"></input>
240 </span>
241 </td>
242 <td style="text-align:center;">
243 <span style="white-space:nowrap;margin-left:1px;margin-right:1px;"><input id="grid" type="checkbox" onclick="refreshCameras();" checked="true">Grid</input></span>
244 <span style="white-space:nowrap;margin-left:1px;margin-right:1px;"><input id="marker" type="checkbox" onclick="refreshCameras();" checked="true">Marker</input></span>
245 <span style="white-space:nowrap;margin-left:1px;margin-right:1px;"><input id="image" type="checkbox" onclick="refreshCameras();">Image</input></span>
246 <!--Pixel value:
247 <input id="value" type="text" readonly="true" value="0" style="text-align:right;width:100px"></input>-->
248 </td>
249 <td style="text-align:right">
250 <span style="white-space:nowrap">
251 Min
252 <input id="cameramin4" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(4);" value="0" disabled="true"></input>
253 <input id="cameraminon4" style="margin-left:0px;" type="checkbox" onclick="onCameraMinMaxOn(4);" checked="true"></input>
254 </span>
255 <span style="white-space:nowrap;margin-left:2px;">
256 Max
257 <input id="cameramax4" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(4);" value="0" disabled="true"></input>
258 <input id="cameramaxon4" style="margin-left:0px;" type="checkbox" onclick="onCameraMinMaxOn(4);" checked="true"></input>
259 </span>
260 </td>
261 </tr>
262 </table>
263</div>
264
265<div class="myaccordion" id="accordion7">
266 <h3><a href="#">Histograms</a></h3>
267</div>
268<div id="histcontainer" class="ui-widget-content">
269 <table width="100%">
270 <colgroup>
271 <col style="width:40%;">
272 <col style="width:20%;">
273 <col style="width:40%;">
274 </colgroup>
275 <tr>
276 <td>
277 <span style="white-space:nowrap;margin-right:2px;">
278 Min
279 <input id="histmin1" style="text-align:right;width:100px;" type="number" onchange="onHistMinMax(1);" value="0" disabled="true"></input>
280 <input id="histminon1" style="margin-left:0px;" type="checkbox" onclick="onHistMinMaxOn(1);" checked="true"></input>
281 </span>
282 <span style="white-space:nowrap">
283 Max
284 <input id="histmax1" style="text-align:right;width:100px;" type="number" onchange="onHistMinMax(1);" value="0" disabled="true"></input>
285 <input id="histmaxon1" style="margin-left:0px;" type="checkbox" onclick="onHistMinMaxOn(1);" checked="true"></input>
286 </span>
287 </td>
288 <td style="text-align:center" id="eventinfo">
289 </td>
290 <td style="text-align:right">
291 <span style="white-space:nowrap">
292 Min
293 <input id="histmin2" style="text-align:right;width:100px;" type="number" onchange="onHistMinMax(2);" value="0" disabled="true"></input>
294 <input id="histminon2" style="margin-left:0px;" type="checkbox" onclick="onHistMinMaxOn(2);" checked="true"></input>
295 </span>
296 <span style="white-space:nowrap;margin-left:2px;">
297 Max
298 <input id="histmax2" style="text-align:right;width:100px;" type="number" onchange="onHistMinMax(2);" value="0" disabled="true"></input>
299 <input id="histmaxon2" style="margin-left:0px;" type="checkbox" onclick="onHistMinMaxOn(2);" checked="true"></input>
300 </span>
301 </td>
302 <td>
303 </td>
304 </tr>
305 </table>
306
307 <table id="table" width="100%" border="0" style="border:0;margin:0;padding:0;">
308 <tr style="margin:0;padding:0;">
309 <td style="margin:0;padding:0;">
310 <table border="0" style="margin:0;padding:0;">
311 <tr style="margin:0;padding:0;"><td style="margin:0;padding:0;" id="conthist1"></tr>
312 <tr style="margin:0;padding:0;"><td style="margin:0;padding:0;" id="conthist3"><div style="width:1px;height:1px;" id="hist3"></div></td></tr>
313 </table>
314 </td>
315 <td style="margin:0;padding:0;" id="centerhist"><div style="width:1px;height:1px;" id="hist1"></div></td>
316 <td style="margin:0;padding:0;">
317 <table border="0" style="margin:0;padding:0;">
318 <tr style="margin:0;padding:0;"><td style="margin:0;padding:0;" id="conthist2"><div style="width:1px;height:1px;" id="hist2"></div></td></tr>
319 <tr style="margin:0;padding:0;"><td style="margin:0;padding:0;" id="conthist4"><div style="width:1px;height:1px;" id="hist4"></div></td></tr>
320 </table>
321 </td>
322 </tr>
323 </table>
324
325 <table width="100%">
326 <colgroup>
327 <col style="width:50%;">
328 <col style="width:50%;">
329 </colgroup>
330 <tr>
331 <td>
332 <span style="white-space:nowrap;margin-right:2px;">
333 Min
334 <input id="histmin3" style="text-align:right;width:100px;" type="number" onchange="onHistMinMax(3);" value="0" disabled="true"></input>
335 <input id="histminon3" style="margin-left:0px;" type="checkbox" onclick="onHistMinMaxOn(3);" checked="true"></input>
336 </span>
337 <span style="white-space:nowrap">
338 Max
339 <input id="histmax3" style="text-align:right;width:100px;" type="number" onchange="onHistMinMax(3);" value="0" disabled="true"></input>
340 <input id="histmaxon3" style="margin-left:0px;" type="checkbox" onclick="onHistMinMaxOn(3);" checked="true"></input>
341 </span>
342 </td>
343 <td style="text-align:right">
344 <span style="white-space:nowrap">
345 Min
346 <input id="histmin4" style="text-align:right;width:100px;" type="number" onchange="onHistMinMax(4);" value="0" disabled="true"></input>
347 <input id="histminon4" style="margin-left:0px;" type="checkbox" onclick="onHistMinMaxOn(4);" checked="true"></input>
348 </span>
349 <span style="white-space:nowrap;margin-left:2px;">
350 Max
351 <input id="histmax4" style="text-align:right;width:100px;" type="number" onchange="onHistMinMax(4);" value="0" disabled="true"></input>
352 <input id="histmaxon4" style="margin-left:0px;" type="checkbox" onclick="onHistMinMaxOn(4);" checked="true"></input>
353 </span>
354 </td>
355 </tr>
356 </table>
357</div>
358
359<div class="myaccordion" id="accordion3">
360 <h3><a href="#">Waveform</a></h3>
361</div>
362<div id="waveformcontainer" class="ui-widget-content">
363 <div id="waveform" style="width:100%;height:300px;"></div>
364 <table style="width:100%">
365 <colgroup>
366 <col style="width:33%;">
367 <col style="width:66%;">
368 </colgroup>
369 <tr>
370 <td style="text-align:left;margin-right:2px;">
371 <span style="white-space:nowrap;float:left">
372 Xmin
373 <input id="waveformxmin" style="width:55px;text-align:right"type="number" onchange="onWaveformMinMax();" value="0" disabled="true"></input>
374 <input id="waveformxminon" style="margin-left:0px;" type="checkbox" onclick="onWaveformMinMaxOn();" checked="true"></input>
375 </span>
376 <span style="white-space:nowrap;float:left">
377 Xmax
378 <input id="waveformxmax" style="width:55px;text-align:right"type="number" onchange="onWaveformMinMax();" value="0" disabled="true"></input>
379 <input id="waveformxmaxon" style="margin-left:0px;" type="checkbox" onclick="onWaveformMinMaxOn();" checked="true"></input>
380 </span>
381 </td>
382 <td style="text-align:right">
383 <span style="white-space:nowrap;">
384 Ymin
385 <input id="waveformmin" style="text-align:right"type="number" onchange="onWaveformMinMax();" value="0" disabled="true"></input>
386 <input id="waveformminon" style="margin-left:0px;" type="checkbox" onclick="onWaveformMinMaxOn();" checked="true"></input>
387 </span>
388 <span style="white-space:nowrap;margin-left:2px;">
389 Ymax
390 <input id="waveformmax" style="text-align:right"type="number" onchange="onWaveformMinMax();" value="0" disabled="true"></input>
391 <input id="waveformmaxon" style="margin-left:0px;" type="checkbox" onclick="onWaveformMinMaxOn();" checked="true"></input>
392 </span>
393 </td>
394 </tr>
395 </table>
396</div>
397
398<div class="myaccordion" id="accordion6">
399 <h3><a href="#">Additional controls</a></h3>
400</div>
401<div id="ctrlcontainer" class="ui-widget-content">
402 <form id="controls" method="POST" style="margin-bottom:0">
403 <input id="getcamera" type="button" onclick="onGetCameras();" value="Get camera data"></input>
404 <input id="getwaveform" type="button" onclick="onGetWaveforms();" value="Get waveforms"></input>
405 <input id="data" name="data" type="hidden"></input>
406 </form>
407</div>
408
409<div class="myaccordion" id="accordion4">
410 <h3><a href="#">Help</a></h3>
411</div>
412<div id="helpcontainer" class="ui-widget-content" style="padding-left:40px;padding-right:40px;padding-bottom:40px;">
413<H1>HELP</H1>
414
415<H3>How does it work?</H3>
416When you submit a javascript to the server, it will be executed
417on a sandbox on the server. Before the event is loaded from a file
418and made available within the sandbox. Generally, the sandbox
419can easily be enhanced, e.g. with algorithms available in php.
420This can be done on request. After execution, the result returned
421by the script is then displayed in the camera display.
422
423<H3>Why Javascript?</H3>
424Simply for security reasons. To avoid tranferring the event to the client's
425browser, the script must be executed on the server side. Also Python
426and PHP offer the possibility to execute scripts within a program,
427they do not have any security feature to avoid for exmple access to the
428local disk. The V8 Javascript engine however, is very limited in
429functionality and therefore ideally suited for a sandboxed and
430therefore safe excution on the server. Any other solution is welcome.
431
432<H3>Javascript hints!</H3>
433Please note that in Javascript only basic data typed (number, etc)
434are copied in an assignment. In all other cases, only a reference
435is copied. For example, the following code snippet does not return 2
436as you might expect but 7!
437<pre>
438var arr = [ 0, 1, 2, 3 ];
439var cpy = arr;
440cpy[2] = 7;
441print(arr[2]);
442</pre>
443To avoid that, the global namespace implements a clone function.
444For exmaple, the following code snippet will return the expected output:
445<pre>
446var arr = [ 0, 1, 2, 3 ];
447var cpy = $.clone(arr);
448cpy[2] = 7;
449print(arr[2]);
450</pre>
451
452<H3>Javascript arrays</H3>
453Note that javascript arrays have some very powerful member functions.
454For a description see for example
455<A HREF="http://www.tutorialspoint.com/javascript/javascript_arrays_object.htm">here</A>
456or search google for function like <i>map</i> or <i>reduce</i>.
457
458<H3>The global object $</H3>
459
460The environment provides a global object (namesapce) called $ with the following members:
461<table>
462<tr><td>$.file.numEvents</td><td>Number of events in the file</td></tr>
463<tr><td>$.file.runStart</td><td>MJD of run start minus 40587 (unix time in days)</td></tr>
464<tr><td>$.file.runEnd</td><td>MJD of run end minus 40587 (unix time in days)</td></tr>
465<tr><td>$.file.drsFile</td><td>If this is a DRS calibration file, the step id, otherwise -1</td></tr>
466<tr><td>$.event</td><td>The event header information as obtained from the file</td></tr>
467<tr><td>$.event.numRoi</td><td>Number of samples per pixel</td></tr>
468<tr><td>$.event.numPix</td><td>Number of pixels</td></tr>
469<tr><td>$.event.eventNumber</td><td>Event number</td></tr>
470<tr><td>$.event.triggerNumber</td><td>Trigger number</td></tr>
471<tr><td>$.event.triggerType</td><td>Trigger type</td></tr>
472<tr><td>$.event.trigger</td><td>Decoded trigger information</td></tr>
473<tr><td>$.event.unixTime[2]</td><td>Timestamp when the event arrived at the event builder</td></tr>
474<tr><td>$.data[numPix][numRoi]</td><td>The event data</td></tr>
475<tr><td>$.nroi</td><td>Shortcut to $.event.numRoi</td></tr>
476<tr><td>$.npix</td><td>Shortcut to $.event.numPix</td></tr>
477<tr><td>$.trigger</td><td>Shortcut to $.event.trigger</td></tr>
478<tr><td>$.neighbors</td><td>Array of 1440 arrays each containing the corresponding neighbors</td></tr>
479<tr><td>$.map</td><td>Array of 1440 entries (software index) containing the hardware indices.</td></tr>
480<tr><td>$.geom</td><td>Array of 1440 entries. Each an array with two entries, x and y. The distance between two neighbors is 1.</td></tr>
481<tr><td>$.dist(i,j)</td><td>Calculated the distance of two pixels in degree.</td></tr>
482<tr><td>$.conv</td><td>Conversion factor to convert geom and dist to degree.</td></tr>
483</table>
484
485<H3>Stack traces</H3>
486Please note that due to some interna, the line numbers in the
487stack trace shown in case of runtime errors are by one line too high.
488
489<H3>Editor 1 (proc)</H3>
490
491<I>proc</I> can return an array with numRoi entries or an array with up to
492four sub-arrays each of nRoi entries. They will be displayed in the graph.
493The chosel pixel is available as <I>pixel</I>.
494The most simple is to just return the selected pixel data unprocssed:
495<pre>
496return $.data[pixel];
497</pre>
498
499<H3>Editor 2 (main)</H3>
500<I>main</I> should return extracted data per pixel. As <I>proc</I> it can
501return a single array or an array with up to four sub-arrays each with
502numPix entries. They are displayed in the camera displays. The function
503implemented as <I>proc</I> is accessible as <I>proc(i)</I> with <I>i</I>
504being available in <I>proc</I> as <I>pixel</I>. A very simple extractor
505could be to return just the sample at the trigger position
506<pre>
507var rc = [];
508for (var i=0; i<$.event.numPix; i++)
509 rc[i] = $.data[i][60];
510return rc;
511</pre>
512or taking the data pre-procesed by the code of the <I>proc</I>-function:
513<pre>
514var rc = [];
515for (var i=0; i<$.event.numPix; i++)
516 rc[i] = proc(i)[60];
517return rc;
518</pre>
519
520Note that the precise access to the result of proc might depend on what
521exactly is retruned by proc (an array, or an array with sub-arrays).
522
523Pixel which are not returned (<tt>undefind</tt> or <tt>null</tt>) are
524not displayed. This allows to show cleaned images as well or test
525image cleaning algorithms.
526
527<H3>What is the data?</H3>
528The data are all data files found in disks in La Palma (to be precise:
529on daq's disks). The data is raw-data but with the most recent
530DRS calibration (only the 1024-cell offset calibration)
531applied, while the application is done in intergers, i.e. the
532fractional part of the calibration constant is removed.
533(This is basically what is written in our FITS files as part of the
534lossless compression process). No spike or jump removal is applied.
535
536<H3>The editor</H3>
537Key bindings of the editor can be found at
538<A HREF="http://codemirror.net/doc/manual.html#commands">Codemirror</A>.
539In addition the following binding are defined: Tab - Auto indent;
540F11 - Switch to fullscreen; Esc - In fullscreen mode to
541leave fullscreen; Ctrl-r - replace; Ctrl-y - Delete the line under the cursor;
542Ctrl-. (dot) - Fold code; Ctrl-Down (cursor down) - Autocomplete.
543
544<H3>How to change the file?</H3>
545Start typing the date in the filename field. The available files
546will be filtered as you type. To select a file you need to select
547it fom the pull down.
548
549<H3>How to change the displayed pixel?</H3>
550Enter the pixel number on the corresponding field or its hwardware
551address. As soon as you acknowledge your change (e.g. remove focus
552by clicking somewhere else) the pixel contents gets displayed.
553
554<H3>How to Save/Load a script?</H3>
555To load a file choose a file fro your local hard drive via the
556file selection dialog. To save the contents of the editor, press
557Save.
558
559<H3>Submit</H3>
560If you have changed the script and you want to run it on the current event
561press Submit. The Javascript will be executed for this event on
562the server.
563
564<!--<H3>Autosubmit</H3>
565If Autosumit is enabled, the script will be submitted each time
566the file name or the event number is changed and executed.-->
567
568<H3>Pixel value</H3>
569To display the value returned for a pixel just click on the pixel.
570The value will be displayed in the Pixel field. This will also
571display the corresponding waveform in the graph.
572
573<H3>Min/max values</H3>
574Min and max values for the plot and the graph can be determined
575automatically or manully. To set the to a fixed value, enable the
576min and/or max field and enter the value of your choice. It will
577survive changing files, events or pixel.
578
579<H3>What is the meaning of the image?</H3>
580The image is a representation of the first and second moment of the
581distribution of the pixel values. The first moment is the center-of-gravity
582of the distirbution, the major and minor axis represent the standard
583deviation around the center-of-gravity (<i>width</I> and <i>length</I>).
584The line represents an estimate for the distance of the center-of-gravity
585to the origin of the primary particle (<i>disp</i>). Due to the lack
586of more information, it is a very simple estimate using
587disp=1.42*(1-width/length).
588
589<H3>Why is loading the page so slow?</H3>
590The total contents of the javascript libraries is about 1MB which
591all have to be treasferred to the browser. In addition the loading
592and processing of the event takes up to 1s so that the loading
593time of the page might be untypically slow. Once finished,
594the amaount of code to load can be decreased.
595
596<H3>How to unzoom the plot?</H3>
597Double click on the plot.
598
599</div>
600
601
602</body>
603</html>
Note: See TracBrowser for help on using the repository browser.