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

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