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

Last change on this file since 17726 was 17723, checked in by tbretz, 12 years ago
Some more help text.
File size: 19.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="#">Debug</a></h3>
122 <div id="debug">
123 </div>
124</div>
125
126<div class="ui-widget-content" style="background:#eee;margin-top:-10px">
127 <input id="submit" type="button" onclick="onSubmit();" value="Submit"></input>
128 <span style="float:right;white-space:nowrap;">
129 Run file:
130 <input id="file" style="width:100px"></input>
131 </span>
132 &nbsp;
133 <span style="white-space:nowrap">
134 Evt:
135 <input id="event" style="text-align:right;" type="number" onchange="onEvent();" value="0" min="0" max="0" step="1"></input>/<span id="numevents">---</span>
136 </span>
137 &nbsp;
138 <span style="white-space:nowrap">
139 Pix:
140 <input id="pixel" style="text-align:right;width:50px;" type="number" onchange="onPixel();" value="0" min="0" max="1439" step="1"></input>
141 </span>
142 &nbsp;
143 <span style="white-space:nowrap">
144 CBPX:
145 <input id="cbpx-c" style="text-align:right;width:30px;" type="number" onchange="onCBPX();" value="1" min="0" max="3" step="1"></input>
146 <input id="cbpx-b" style="text-align:right;width:30px;" type="number" onchange="onCBPX();" value="0" min="0" max="9" step="1"></input>
147 <input id="cbpx-p" style="text-align:right;width:30px;" type="number" onchange="onCBPX();" value="3" min="0" max="3" step="1"></input>
148 <input id="cbpx-x" style="text-align:right;width:30px;" type="number" onchange="onCBPX();" value="6" min="0" max="8" step="1"></input>
149 =
150 <input id="cbpx" style="text-align:right;width:50px;" type="number" onchange="onHW();" value="393" min="0" max="1439" step="1"></input>
151 </span>
152</div>
153
154<div class="myaccordion" id="accordion2">
155 <h3><a href="#">Camera display</a></h3>
156</div>
157<div id="cameracontainer" class="ui-widget-content">
158
159 <table width="100%">
160 <colgroup>
161 <col style="width:50%;">
162 <col style="width:50%;">
163 </colgroup>
164 <tr>
165 <td>
166 <span style="white-space:nowrap">
167 Min:
168 <input id="cameramin1" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(1);" value="0" disabled="true"></input>
169 <input id="cameraminon1" type="checkbox" onclick="onCameraMinMaxOn(1);" checked="true"></input>
170 </span>
171 &nbsp;
172 <span style="white-space:nowrap">
173 Max:
174 <input id="cameramax1" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(1);" value="0" disabled="true"></input>
175 <input id="cameramaxon1" type="checkbox" onclick="onCameraMinMaxOn(1);" checked="true"></input>
176 </span>
177 </td>
178 <td style="text-align:right">
179 <span style="white-space:nowrap">
180 Min:
181 <input id="cameramin2" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(2);" value="0" disabled="true"></input>
182 <input id="cameraminon2" type="checkbox" onclick="onCameraMinMaxOn(2);" checked="true"></input>
183 </span>
184 <span style="white-space:nowrap">
185 &nbsp;
186 Max:
187 <input id="cameramax2" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(2);" value="0" disabled="true"></input>
188 <input id="cameramaxon2" type="checkbox" onclick="onCameraMinMaxOn(2);" checked="true"></input>
189 </span>
190 </td>
191 <td>
192 </td>
193 </tr>
194 </table>
195
196 <table id="table" width="100%" border="0" style="border:0;margin:0;padding:0;">
197 <tr style="margin:0;padding:0;">
198 <td style="margin:0;padding:0;">
199 <table id="col1" border="0" style="margin:0;padding:0;">
200 <tr style="margin:0;padding:0;"><td style="margin:0;padding:0;" id="cont1"></tr>
201 <tr style="margin:0;padding:0;"><td style="margin:0;padding:0;" id="cont3"><canvas id="camera3" width="1" height="1"></canvas></td></tr>
202 </table>
203 </td>
204 <td style="margin:0;padding:0;" id="center"><canvas id="camera1" width="1" height="1"></canvas></td>
205 <td style="margin:0;padding:0;">
206 <table id="col3" border="0" style="margin:0;padding:0;">
207 <tr style="margin:0;padding:0;"><td style="margin:0;padding:0;" id="cont2"><canvas id="camera2" width="1" height="1"></canvas></td></tr>
208 <tr style="margin:0;padding:0;"><td style="margin:0;padding:0;" id="cont4"><canvas id="camera4" width="1" height="1"></canvas></td></tr>
209 </table>
210 </td>
211 </tr>
212 </table>
213
214 <table width="100%">
215 <colgroup>
216 <col style="width:40%;">
217 <col style="width:20%;">
218 <col style="width:40%;">
219 </colgroup>
220 <tr>
221 <td>
222 <span style="white-space:nowrap">
223 Min:
224 <input id="cameramin3" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(3);" value="0" disabled="true"></input>
225 <input id="cameraminon3" type="checkbox" onclick="onCameraMinMaxOn(3);" checked="true"></input>
226 </span>
227 &nbsp;
228 <span style="white-space:nowrap">
229 Max:
230 <input id="cameramax3" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(3);" value="0" disabled="true"></input>
231 <input id="cameramaxon3" type="checkbox" onclick="onCameraMinMaxOn(3);" checked="true"></input>
232 </span>
233 </td>
234 <td style="text-align:center;">
235 Pixel value:
236 <input id="value" type="text" readonly="true" value="0" style="text-align:right;width:100px"></input>
237 </td>
238 <td style="text-align:right">
239 <span style="white-space:nowrap">
240 Min:
241 <input id="cameramin4" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(4);" value="0" disabled="true"></input>
242 <input id="cameraminon4" type="checkbox" onclick="onCameraMinMaxOn(4);" checked="true"></input>
243 </span>
244 <span style="white-space:nowrap">
245 &nbsp;
246 Max:
247 <input id="cameramax4" style="text-align:right;width:100px;" type="number" onchange="onCameraMinMax(4);" value="0" disabled="true"></input>
248 <input id="cameramaxon4" type="checkbox" onclick="onCameraMinMaxOn(4);" checked="true"></input>
249 </span>
250 </td>
251 </tr>
252 </table>
253</div>
254
255<div class="myaccordion" id="accordion3">
256 <h3><a href="#">Waveform</a></h3>
257</div>
258<div id="waveformcontainer" class="ui-widget-content">
259 <div id="waveform" style="width:100%;height:300px;"></div>
260 <div style="text-align:center;margin-bottom:2px">
261 Min:
262 <input id="waveformmin" style="text-align:right"type="number" onchange="onWaveformMinMax();" value="0" disabled="true"></input>
263 <input id="waveformminon" type="checkbox" onclick="onWaveformMinMaxOn();" checked="true"></input>
264 Max:
265 <input id="waveformmax" style="text-align:right"type="number" onchange="onWaveformMinMax();" value="0" disabled="true"></input>
266 <input id="waveformmaxon" type="checkbox" onclick="onWaveformMinMaxOn();" checked="true"></input>
267 </div>
268</div>
269
270<div id='tooltip' style="position:absolute;display:none;border:1px solid #fdd;padding;2px;background-color:#fee;opacity:0.8"></div>
271
272<div class="myaccordion" id="accordion4">
273 <h3><a href="#">Help</a></h3>
274</div>
275<div id="helpcontainer" class="ui-widget-content" style="padding-left:40px;padding-right:40px;padding-bottom:40px;">
276<H1>HELP</H1>
277
278<H3>How does it work?</H3>
279When you submit a javascript to the server, it will be executed
280on a sandbox on the server. Before the event is loaded from a file
281and made available within the sandbox. Generally, the sandbox
282can easily be enhanced, e.g. with algorithms available in php.
283This can be done on request. After execution, the result returned
284by the script is then displayed in the camera display.
285
286<H3>Why Javascript?</H3>
287Simply for security reasons. To avoid tranferring the event to the client's
288browser, the script must be executed on the server side. Also Python
289and PHP offer the possibility to execute scripts within a program,
290they do not have any security feature to avoid for exmple access to the
291local disk. The V8 Javascript engine however, is very limited in
292functionality and therefore ideally suited for a sandboxed and
293therefore safe excution on the server. Any other solution is welcome.
294
295<H3>Javascript hints!</H3>
296Please note that in Javascript only basic data typed (number, etc)
297are copied in an assignment. In all other cases, only a reference
298is copied. For example, the following code snippet does not return 2
299as you might expect but 7!
300<pre><!--<textarea id="code0" style="height:auto;overflow-x:auto;overflow-y:hidden;">-->
301var arr = [ 0, 1, 2, 3 ];
302var cpy = arr;
303cpy[2] = 7;
304print(arr[2]);
305</pre><!--</textarea>-->
306To avoid that, the global namespace implements a clone function.
307For exmaple, the following code snippet will return the expected output:
308<pre><!--<textarea id="code1">-->
309var arr = [ 0, 1, 2, 3 ];
310var cpy = $.clone(arr);
311cpy[2] = 7;
312print(arr[2]);
313</pre><!--</textarea>-->
314
315<H3>Javascript arrays</H3>
316Note that javascript arrays have some very powerful member functions.
317For a description see for example
318<A HREF="http://www.tutorialspoint.com/javascript/javascript_arrays_object.htm">here</A>
319or search google for function like <i>map</i> or <i>reduce</i>.
320
321<H3>The global object $</H3>
322
323The environment provides a global object (namesapce) called $ with the following members:
324<table>
325<tr><td>$.event</td><td>The event header information as obtained from the file</td></tr>
326<tr><td>$.event.numEvents</td><td>Number of events in the file</td></tr>
327<tr><td>$.event.numRoi</td><td>Number of samples per pixel</td></tr>
328<tr><td>$.event.numPix</td><td>Number of pixels</td></tr>
329<tr><td>$.event.eventNumber</td><td>Event number</td></tr>
330<tr><td>$.event.triggerNumber</td><td>Trigger number</td></tr>
331<tr><td>$.event.triggerType</td><td>Trigger type</td></tr>
332<tr><td>$.event.unixTime[2]</td><td>Timestamp when the event arrived at the event builder</td></tr>
333<tr><td>$.data[numPix][numRoi]</td><td>Theevent data</td></tr>
334</table>
335
336<H3>Stack traces</H3>
337Please note that due to some interna, the line numbers in the
338stack trace shown in case of runtime errors are by one line too high.
339
340<H3>Editor 1 (proc)</H3>
341
342<I>proc</I> can return an array with numRoi entries or an array with up to
343four sub-arrays each of nRoi entries. They will be displayed in the graph.
344The chosel pixel is available as <I>pixel</I>.
345The most simple is to just return the selected pixel data unprocssed:
346<pre>
347return $.data[pixel];
348</pre>
349
350<H3>Editor 2 (main)</H3>
351<I>main</I> should return extracted data per pixel. As <I>proc</I> it can
352return a single array or an array with up to four sub-arrays each with
353numPix entries. They are displayed in the camera displays. The function
354implemented as <I>proc</I> is accessible as <I>proc(i)</I> with <I>i</I>
355being available in <I>proc</I> as <I>pixel</I>. A very simple extractor
356could be to return just the sample at the trigger position
357<pre>
358var rc = [];
359for (var i=0; i<$.event.numPix; i++)
360 rc[i] = $.data[i][60];
361return rc;
362</pre>
363or taking the data pre-procesed by the code of the <I>proc</I>-function:
364<pre>
365var rc = [];
366for (var i=0; i<$.event.numPix; i++)
367 rc[i] = proc(i)[60];
368return rc;
369</pre>
370
371Note that the precise access to the result of proc might depend on what
372exactly is retruned by proc (an array, or an array with sub-arrays).
373
374Pixel which are not returned (<tt>undefind</tt> or <tt>null</tt>) are
375not displayed. This allows to show cleaned images as well or test
376image cleaning algorithms.
377
378<H3>What is the data?</H3>
379The data are all data files found in disks in La Palma (to be precise:
380on daq's disks). The data is raw-data but with the most recent
381DRS calibration (only the 1024-cell offset calibration)
382applied, while the application is done in intergers, i.e. the
383fractional part of the calibration constant is removed.
384(This is basically what is written in our FITS files as part of the
385lossless compression process). No spike or jump removal is applied.
386
387<H3>The editor</H3>
388Key bindings of the editor can be found at
389<A HREF="http://codemirror.net/doc/manual.html#commands">Codemirror</A>.
390In addition the following binding are defined: Tab - Auto indent;
391F11 - Switch to fullscreen; Esc - In fullscreen mode to
392leave fullscreen; Ctrl-r - replace; Ctrl-y - Delete the line under the cursor;
393Ctrl-. (dot) - Fold code; Ctrl-Down (cursor down) - Autocomplete.
394
395<H3>How to change the file?</H3>
396Start typing the date in the filename field. The available files
397will be filtered as you type. To select a file you need to select
398it fom the pull down.
399
400<H3>How to change the displayed pixel?</H3>
401Enter the pixel number on the corresponding field or its hwardware
402address. As soon as you acknowledge your change (e.g. remove focus
403by clicking somewhere else) the pixel contents gets displayed.
404
405<H3>How to Save/Load a script?</H3>
406To load a file choose a file fro your local hard drive via the
407file selection dialog. To save the contents of the editor, press
408Save.
409
410<H3>Submit</H3>
411If you have changed the script and you want to run it on the current event
412press Submit. The Javascript will be executed for this event on
413the server.
414
415<!--<H3>Autosubmit</H3>
416If Autosumit is enabled, the script will be submitted each time
417the file name or the event number is changed and executed.-->
418
419<H3>Pixel value</H3>
420To display the value returned for a pixel just click on the pixel.
421The value will be displayed in the Pixel field. This will also
422display the corresponding waveform in the graph.
423
424<H3>Min/max values</H3>
425Min and max values for the plot and the graph can be determined
426automatically or manully. To set the to a fixed value, enable the
427min and/or max field and enter the value of your choice. It will
428survive changing files, events or pixel.
429
430<H3>Why is loading the page so slow?</H3>
431The total contents of the javascript libraries is about 1MB which
432all have to be treasferred to the browser. In addition the loading
433and processing of the event takes up to 1s so that the loading
434time of the page might be untypically slow. Once finished,
435the amaount of code to load can be decreased.
436
437<H3>How to unzoom the plot?</H3>
438Double click on the plot.
439
440</div>
441
442
443</body>
444</html>
Note: See TracBrowser for help on using the repository browser.