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

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