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

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