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

Last change on this file since 17744 was 17744, checked in by tbretz, 11 years ago
Performance improvement in the example.
File size: 21.5 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
43 <script src="jshint.js"></script>
44 <script src="index.js"></script>
45
46 <link rel="stylesheet" href="index.css"/>
47</head>
48
49<body>
50
51<div id='tooltip' style="position:absolute;display:none;border:1px solid #fdd;padding;2px;background-color:#fee;opacity:0.8"></div>
52
53<div class="myaccordion" id="accordion5">
54 <h3><a href="#">Editor 1 (proc)</a></h3>
55 <div id="editorcontainer1fake" style="position:absolute;border:0;opacity:0"></div>
56</div>
57<div id="editorcontainer1" style="z-index:600;">
58 <form action="index.php" method="post" style="margin-bottom:0px">
59 <div id="textcontainer1">
60 <textarea id="editor1" name="editor1" type="textarea">
61return $.data[pixel];
62 </textarea>
63 </div>
64 <div class="ui-widget-content" style="background:#333;color:#eef;border-top-width:0;padding-top:2px;">
65 <input type="submit" value="Save"></input>
66 <input type="file" name="files[]" id="selectfile1"></input><output id="file1"></output>
67 </div>
68 </form>
69</div>
70
71<div class="myaccordion" id="accordion1">
72 <h3><a href="#">Editor 2 (main)</a></h3>
73 <div id="editorcontainer2fake" style="position:absolute;border:0;opacity:0"></div>
74</div>
75<div id="editorcontainer2">
76 <form action="index.php" method="post" style="margin-bottom:0px">
77 <div id="textcontainer2">
78 <textarea id="editor2" name="editor2" type="textarea">
79print("This output will go to the Console.\n");
80
81// The four first values of pixel 1
82var arr = [ $.data[1][0], $.data[1][1], $.data[1][2], $.data[1][3] ];
83print("Pixel 1: [ "+arr+" ]\n");
84
85// Get the maximum sample from each pixel
86var rc = [new Array(1440),new Array(1440)];
87for (var p=0; p<$.event.numPix; p++)
88{
89 var max = 0;
90 var idx = 0;
91 for (var s=5; s<$.event.numRoi-50; s++)
92 {
93 // spike suppression
94 var h = ($.data[p][s]-$.data[p][s-1]) + ($.data[p][s]-$.data[p][s+1]);
95
96 if ($.data[p][s]>max && h<20)
97 {
98 max = $.data[p][s];
99 idx = s;
100 }
101 }
102 rc[0][p]=max;
103 rc[1][p]=idx;
104}
105
106return rc;
107 </textarea>
108 </div>
109 <div class="ui-widget-content" style="background:#333;color:white;border-top-width:0;padding-top:2px;">
110 <input type="submit" value="Save"></input>
111 <input type="file" name="files[]" id="selectfile2"></input><output id="file2"></output>
112 </div>
113 </form>
114</div>
115
116<div class="myaccordion" id="accordion" style="margin-bottom:1ex">
117 <h3><a style="color:red" href="#">Runtime error</a></h3>
118 <div>
119 <pre id="error" style="color:red"></pre>
120 </div>
121 <h3><a href="#">Console</a></h3>
122 <div>
123 <pre style="color:green" id="console"></pre>
124 </div>
125 <h3><a href="#">Run info</a></h3>
126 <div>
127 <pre id="runinfo"></pre>
128 </div>
129 <h3><a href="#">Debug</a></h3>
130 <div id="debug">
131 </div>
132</div>
133
134<div class="ui-widget-content" style="background:#eee;margin-top:-10px">
135 <input id="submit" type="button" onclick="onSubmit();" value="Submit"></input>
136 <span style="float:right;white-space:nowrap;">
137 Run file:
138 <input id="file" style="width:100px"></input>
139 </span>
140 &nbsp;
141 <span style="white-space:nowrap">
142 Evt:
143 <input id="event" style="text-align:right;" type="number" onchange="onEvent();" value="0" min="0" max="0" step="1"></input>/<span id="numevents">---</span>
144 </span>
145 &nbsp;
146 <span style="white-space:nowrap">
147 Pix:
148 <input id="pixel" style="text-align:right;width:50px;" type="number" onchange="onPixel();" value="0" min="0" max="1439" step="1"></input>
149 </span>
150 &nbsp;
151 <span style="white-space:nowrap">
152 CBPX:
153 <input id="cbpx-c" style="text-align:right;width:30px;" type="number" onchange="onCBPX();" value="1" min="0" max="3" step="1"></input>
154 <input id="cbpx-b" style="text-align:right;width:30px;" type="number" onchange="onCBPX();" value="0" min="0" max="9" step="1"></input>
155 <input id="cbpx-p" style="text-align:right;width:30px;" type="number" onchange="onCBPX();" value="3" min="0" max="3" step="1"></input>
156 <input id="cbpx-x" style="text-align:right;width:30px;" type="number" onchange="onCBPX();" value="6" min="0" max="8" step="1"></input>
157 =
158 <input id="cbpx" style="text-align:right;width:50px;" type="number" onchange="onHW();" value="393" min="0" max="1439" step="1"></input>
159 </span>
160</div>
161
162<div class="myaccordion" id="accordion2">
163 <h3><a href="#">Camera display</a></h3>
164</div>
165<div id="cameracontainer" class="ui-widget-content">
166
167 <table width="100%">
168 <colgroup>
169 <col style="width:40%;">
170 <col style="width:20%;">
171 <col style="width:40%;">
172 </colgroup>
173 <tr>
174 <td>
175 <span style="white-space:nowrap">
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" type="checkbox" onclick="onCameraMinMaxOn(1);" checked="true"></input>
179 </span>
180 &nbsp;
181 <span style="white-space:nowrap">
182 Max:
183 <input id="cameramax1" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(1);" value="0" disabled="true"></input>
184 <input id="cameramaxon1" type="checkbox" onclick="onCameraMinMaxOn(1);" checked="true"></input>
185 </span>
186 </td>
187 <td style="text-align:center" id="eventinfo">
188 </td>
189 <td style="text-align:right">
190 <span style="white-space:nowrap">
191 Min:
192 <input id="cameramin2" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(2);" value="0" disabled="true"></input>
193 <input id="cameraminon2" type="checkbox" onclick="onCameraMinMaxOn(2);" checked="true"></input>
194 </span>
195 <span style="white-space:nowrap">
196 &nbsp;
197 Max:
198 <input id="cameramax2" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(2);" value="0" disabled="true"></input>
199 <input id="cameramaxon2" type="checkbox" onclick="onCameraMinMaxOn(2);" checked="true"></input>
200 </span>
201 </td>
202 <td>
203 </td>
204 </tr>
205 </table>
206
207 <table id="table" width="100%" border="0" style="border:0;margin:0;padding:0;">
208 <tr style="margin:0;padding:0;">
209 <td style="margin:0;padding:0;">
210 <table id="col1" border="0" style="margin:0;padding:0;">
211 <tr style="margin:0;padding:0;"><td style="margin:0;padding:0;" id="cont1"></tr>
212 <tr style="margin:0;padding:0;"><td style="margin:0;padding:0;" id="cont3"><canvas id="camera3" width="1" height="1"></canvas></td></tr>
213 </table>
214 </td>
215 <td style="margin:0;padding:0;" id="center"><canvas id="camera1" width="1" height="1"></canvas></td>
216 <td style="margin:0;padding:0;">
217 <table id="col3" border="0" style="margin:0;padding:0;">
218 <tr style="margin:0;padding:0;"><td style="margin:0;padding:0;" id="cont2"><canvas id="camera2" width="1" height="1"></canvas></td></tr>
219 <tr style="margin:0;padding:0;"><td style="margin:0;padding:0;" id="cont4"><canvas id="camera4" width="1" height="1"></canvas></td></tr>
220 </table>
221 </td>
222 </tr>
223 </table>
224
225 <table width="100%">
226 <colgroup>
227 <col style="width:40%;">
228 <col style="width:20%;">
229 <col style="width:40%;">
230 </colgroup>
231 <tr>
232 <td>
233 <span style="white-space:nowrap">
234 Min:
235 <input id="cameramin3" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(3);" value="0" disabled="true"></input>
236 <input id="cameraminon3" type="checkbox" onclick="onCameraMinMaxOn(3);" checked="true"></input>
237 </span>
238 &nbsp;
239 <span style="white-space:nowrap">
240 Max:
241 <input id="cameramax3" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(3);" value="0" disabled="true"></input>
242 <input id="cameramaxon3" type="checkbox" onclick="onCameraMinMaxOn(3);" checked="true"></input>
243 </span>
244 </td>
245 <td style="text-align:center;">
246 <input id="marker" type="checkbox" checked="true" onclick="onMarker();">Show pixel marker</input>
247 <!--Pixel value:
248 <input id="value" type="text" readonly="true" value="0" style="text-align:right;width:100px"></input>-->
249 </td>
250 <td style="text-align:right">
251 <span style="white-space:nowrap">
252 Min:
253 <input id="cameramin4" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(4);" value="0" disabled="true"></input>
254 <input id="cameraminon4" type="checkbox" onclick="onCameraMinMaxOn(4);" checked="true"></input>
255 </span>
256 <span style="white-space:nowrap">
257 &nbsp;
258 Max:
259 <input id="cameramax4" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(4);" value="0" disabled="true"></input>
260 <input id="cameramaxon4" type="checkbox" onclick="onCameraMinMaxOn(4);" checked="true"></input>
261 </span>
262 </td>
263 </tr>
264 </table>
265</div>
266
267<div class="myaccordion" id="accordion3">
268 <h3><a href="#">Waveform</a></h3>
269</div>
270<div id="waveformcontainer" class="ui-widget-content">
271 <div id="waveform" style="width:100%;height:300px;"></div>
272 <table style="width:100%">
273 <colgroup>
274 <col style="width:50%;">
275 <col style="width:50%;">
276 </colgroup>
277 <tr>
278 <td style="text-align:left">
279 <span style="white-space:nowrap;float:left">
280 Xmin:
281 <input id="waveformxmin" style="width:55px;text-align:right"type="number" onchange="onWaveformMinMax();" value="0" disabled="true"></input>
282 <input id="waveformxminon" type="checkbox" onclick="onWaveformMinMaxOn();" checked="true"></input>
283 &nbsp;
284 </span>
285 <span style="white-space:nowrap;float:left">
286 Xmax:
287 <input id="waveformxmax" style="width:55px;text-align:right"type="number" onchange="onWaveformMinMax();" value="0" disabled="true"></input>
288 <input id="waveformxmaxon" type="checkbox" onclick="onWaveformMinMaxOn();" checked="true"></input>
289 </span>
290 </td>
291 <td style="text-align:right">
292 <span style="white-space:nowrap;">
293 Ymin:
294 <input id="waveformmin" style="text-align:right"type="number" onchange="onWaveformMinMax();" value="0" disabled="true"></input>
295 <input id="waveformminon" type="checkbox" onclick="onWaveformMinMaxOn();" checked="true"></input>
296 </span>
297 <span style="white-space:nowrap;">
298 &nbsp;Ymax:
299 <input id="waveformmax" style="text-align:right"type="number" onchange="onWaveformMinMax();" value="0" disabled="true"></input>
300 <input id="waveformmaxon" type="checkbox" onclick="onWaveformMinMaxOn();" checked="true"></input>
301 </span>
302 </td>
303 </tr>
304 </table>
305</div>
306
307<div class="myaccordion" id="accordion6">
308 <h3><a href="#">Additional controls</a></h3>
309</div>
310<div id="ctrlcontainer" class="ui-widget-content">
311 <form id="controls" method="POST" style="margin-bottom:0">
312 <input id="getcamera" type="button" onclick="onGetCameras();" value="Get camera data"></input>
313 <input id="getwaveform" type="button" onclick="onGetWaveforms();" value="Get waveforms"></input>
314 <input id="data" name="data" type="hidden"></input>
315 </form>
316</div>
317
318<div class="myaccordion" id="accordion4">
319 <h3><a href="#">Help</a></h3>
320</div>
321<div id="helpcontainer" class="ui-widget-content" style="padding-left:40px;padding-right:40px;padding-bottom:40px;">
322<H1>HELP</H1>
323
324<H3>How does it work?</H3>
325When you submit a javascript to the server, it will be executed
326on a sandbox on the server. Before the event is loaded from a file
327and made available within the sandbox. Generally, the sandbox
328can easily be enhanced, e.g. with algorithms available in php.
329This can be done on request. After execution, the result returned
330by the script is then displayed in the camera display.
331
332<H3>Why Javascript?</H3>
333Simply for security reasons. To avoid tranferring the event to the client's
334browser, the script must be executed on the server side. Also Python
335and PHP offer the possibility to execute scripts within a program,
336they do not have any security feature to avoid for exmple access to the
337local disk. The V8 Javascript engine however, is very limited in
338functionality and therefore ideally suited for a sandboxed and
339therefore safe excution on the server. Any other solution is welcome.
340
341<H3>Javascript hints!</H3>
342Please note that in Javascript only basic data typed (number, etc)
343are copied in an assignment. In all other cases, only a reference
344is copied. For example, the following code snippet does not return 2
345as you might expect but 7!
346<pre>
347var arr = [ 0, 1, 2, 3 ];
348var cpy = arr;
349cpy[2] = 7;
350print(arr[2]);
351</pre>
352To avoid that, the global namespace implements a clone function.
353For exmaple, the following code snippet will return the expected output:
354<pre>
355var arr = [ 0, 1, 2, 3 ];
356var cpy = $.clone(arr);
357cpy[2] = 7;
358print(arr[2]);
359</pre>
360
361<H3>Javascript arrays</H3>
362Note that javascript arrays have some very powerful member functions.
363For a description see for example
364<A HREF="http://www.tutorialspoint.com/javascript/javascript_arrays_object.htm">here</A>
365or search google for function like <i>map</i> or <i>reduce</i>.
366
367<H3>The global object $</H3>
368
369The environment provides a global object (namesapce) called $ with the following members:
370<table>
371<tr><td>$.file.numEvents</td><td>Number of events in the file</td></tr>
372<tr><td>$.file.runStart</td><td>MJD of run start minus 40587 (unix time in days)</td></tr>
373<tr><td>$.file.runEnd</td><td>MJD of run end minus 40587 (unix time in days)</td></tr>
374<tr><td>$.file.drsFile</td><td>If this is a DRS calibration file, the step id, otherwise -1</td></tr>
375<tr><td>$.event</td><td>The event header information as obtained from the file</td></tr>
376<tr><td>$.event.numRoi</td><td>Number of samples per pixel</td></tr>
377<tr><td>$.event.numPix</td><td>Number of pixels</td></tr>
378<tr><td>$.event.eventNumber</td><td>Event number</td></tr>
379<tr><td>$.event.triggerNumber</td><td>Trigger number</td></tr>
380<tr><td>$.event.triggerType</td><td>Trigger type</td></tr>
381<tr><td>$.event.trigger</td><td>Decoded trigger information</td></tr>
382<tr><td>$.event.unixTime[2]</td><td>Timestamp when the event arrived at the event builder</td></tr>
383<tr><td>$.data[numPix][numRoi]</td><td>The event data</td></tr>
384<tr><td>$.nroi</td><td>Shortcut to $.event.numRoi</td></tr>
385<tr><td>$.npix</td><td>Shortcut to $.event.numPix</td></tr>
386<tr><td>$.trigger</td><td>Shortcut to $.event.trigger</td></tr>
387<tr><td>$.neighbors</td><td>Array of 1440 arrays each containing the corresponding neighbors</td></tr>
388</table>
389
390<H3>Stack traces</H3>
391Please note that due to some interna, the line numbers in the
392stack trace shown in case of runtime errors are by one line too high.
393
394<H3>Editor 1 (proc)</H3>
395
396<I>proc</I> can return an array with numRoi entries or an array with up to
397four sub-arrays each of nRoi entries. They will be displayed in the graph.
398The chosel pixel is available as <I>pixel</I>.
399The most simple is to just return the selected pixel data unprocssed:
400<pre>
401return $.data[pixel];
402</pre>
403
404<H3>Editor 2 (main)</H3>
405<I>main</I> should return extracted data per pixel. As <I>proc</I> it can
406return a single array or an array with up to four sub-arrays each with
407numPix entries. They are displayed in the camera displays. The function
408implemented as <I>proc</I> is accessible as <I>proc(i)</I> with <I>i</I>
409being available in <I>proc</I> as <I>pixel</I>. A very simple extractor
410could be to return just the sample at the trigger position
411<pre>
412var rc = [];
413for (var i=0; i<$.event.numPix; i++)
414 rc[i] = $.data[i][60];
415return rc;
416</pre>
417or taking the data pre-procesed by the code of the <I>proc</I>-function:
418<pre>
419var rc = [];
420for (var i=0; i<$.event.numPix; i++)
421 rc[i] = proc(i)[60];
422return rc;
423</pre>
424
425Note that the precise access to the result of proc might depend on what
426exactly is retruned by proc (an array, or an array with sub-arrays).
427
428Pixel which are not returned (<tt>undefind</tt> or <tt>null</tt>) are
429not displayed. This allows to show cleaned images as well or test
430image cleaning algorithms.
431
432<H3>What is the data?</H3>
433The data are all data files found in disks in La Palma (to be precise:
434on daq's disks). The data is raw-data but with the most recent
435DRS calibration (only the 1024-cell offset calibration)
436applied, while the application is done in intergers, i.e. the
437fractional part of the calibration constant is removed.
438(This is basically what is written in our FITS files as part of the
439lossless compression process). No spike or jump removal is applied.
440
441<H3>The editor</H3>
442Key bindings of the editor can be found at
443<A HREF="http://codemirror.net/doc/manual.html#commands">Codemirror</A>.
444In addition the following binding are defined: Tab - Auto indent;
445F11 - Switch to fullscreen; Esc - In fullscreen mode to
446leave fullscreen; Ctrl-r - replace; Ctrl-y - Delete the line under the cursor;
447Ctrl-. (dot) - Fold code; Ctrl-Down (cursor down) - Autocomplete.
448
449<H3>How to change the file?</H3>
450Start typing the date in the filename field. The available files
451will be filtered as you type. To select a file you need to select
452it fom the pull down.
453
454<H3>How to change the displayed pixel?</H3>
455Enter the pixel number on the corresponding field or its hwardware
456address. As soon as you acknowledge your change (e.g. remove focus
457by clicking somewhere else) the pixel contents gets displayed.
458
459<H3>How to Save/Load a script?</H3>
460To load a file choose a file fro your local hard drive via the
461file selection dialog. To save the contents of the editor, press
462Save.
463
464<H3>Submit</H3>
465If you have changed the script and you want to run it on the current event
466press Submit. The Javascript will be executed for this event on
467the server.
468
469<!--<H3>Autosubmit</H3>
470If Autosumit is enabled, the script will be submitted each time
471the file name or the event number is changed and executed.-->
472
473<H3>Pixel value</H3>
474To display the value returned for a pixel just click on the pixel.
475The value will be displayed in the Pixel field. This will also
476display the corresponding waveform in the graph.
477
478<H3>Min/max values</H3>
479Min and max values for the plot and the graph can be determined
480automatically or manully. To set the to a fixed value, enable the
481min and/or max field and enter the value of your choice. It will
482survive changing files, events or pixel.
483
484<H3>Why is loading the page so slow?</H3>
485The total contents of the javascript libraries is about 1MB which
486all have to be treasferred to the browser. In addition the loading
487and processing of the event takes up to 1s so that the loading
488time of the page might be untypically slow. Once finished,
489the amaount of code to load can be decreased.
490
491<H3>How to unzoom the plot?</H3>
492Double click on the plot.
493
494</div>
495
496
497</body>
498</html>
Note: See TracBrowser for help on using the repository browser.