Rev 343 | Details | Compare with Previous | Last modification | View Log | RSS feed
Rev | Author | Line No. | Line |
---|---|---|---|
193 | f9daq | 1 | <!DOCTYPE html> |
2 | <html> |
||
3 | <head> |
||
4 | <meta charset="utf-8"> |
||
325 | f9daq | 5 | <title>Belle II Particle Discovery</title> |
193 | f9daq | 6 | <link rel="stylesheet" type="text/css" href="masterclass.css"> |
7 | <script src="js/blockly_compressed.js"></script> |
||
8 | <script src="js/blocks_compressed.js"></script> |
||
9 | <script src="js/javascript_compressed.js"></script> |
||
10 | <script src="js/en.js"></script> |
||
11 | <script src="js/belle2_def.js"></script> |
||
12 | <script src="js/belle2_gen.js"></script> |
||
13 | <script src="js/workspace.js"></script> |
||
14 | <script src="js/FileSaver.min.js"></script> |
||
267 | f9daq | 15 | |
344 | f9daq | 16 | <link rel="shortcut icon" href="https://root.cern/js/latest/img/RootIcon.ico"/> |
17 | <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> |
||
18 | <link rel="stylesheet" type="text/css" href="style.css"> |
||
19 | |||
20 | <script src="JSRootExtend.js"></script> |
||
21 | <script src="https://code.jquery.com/jquery-1.12.4.js"></script> |
||
22 | <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> |
||
23 | <script src="polFitPanel.js"></script> |
||
24 | <script src="fminsearch.js"></script> |
||
25 | <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script> |
||
26 | <script type="text/javascript" src="displayFormula.js"></script> |
||
27 | <script type="text/x-mathjax-config"> |
||
28 | MathJax.Hub.Config({ |
||
29 | tex2jax: { |
||
30 | inlineMath: [["$","$"],["\\(","\\)"]] |
||
31 | } |
||
32 | }); |
||
33 | </script> |
||
34 | |||
35 | |||
267 | f9daq | 36 | <style> |
37 | table { |
||
38 | border-collapse: collapse; |
||
39 | width: 100%; |
||
40 | } |
||
41 | |||
42 | th, td { |
||
43 | padding: 0px; |
||
344 | f9daq | 44 | /*text-align: right;*/ |
267 | f9daq | 45 | } |
46 | |||
47 | tr:hover{background-color:#ffffff} |
||
48 | </style> |
||
49 | |||
193 | f9daq | 50 | <script src="js/Blob.js"></script> |
51 | |||
52 | |||
266 | f9daq | 53 | <!-- <script type="text/javascript" src="js/JSRootCore.js?2d&onload=startGUI""></script> --> |
270 | f9daq | 54 | <script type="text/javascript" src="https://root.cern/js/latest/scripts/JSRootCore.js?2d&onload=startGUI"></script> |
193 | f9daq | 55 | <script type = "text/javascript" language = "javascript"> |
56 | |||
57 | var es; |
||
58 | function addLog(message) { |
||
270 | f9daq | 59 | var r = document.getElementById('results'); |
193 | f9daq | 60 | r.insertAdjacentHTML('beforeend', message +'<br/>'); |
61 | } |
||
62 | |||
63 | function showStat(message) { |
||
64 | var r = document.getElementById('sbar'); |
||
65 | r.innerHTML = message ; |
||
66 | } |
||
67 | |||
68 | |||
69 | |||
70 | function startGUI() { |
||
71 | // d3.select('html').style('height','100%'); |
||
72 | // d3.select('body').style({'min-height':'100%', 'margin':'0px', "overflow" :"hidden"}); |
||
270 | f9daq | 73 | // var r = document.getElementById('results'); |
74 | // r.style.display = 'none'; |
||
193 | f9daq | 75 | var r0 = document.getElementById('sbar'); |
76 | r0.style.display = 'none'; |
||
270 | f9daq | 77 | JSROOT.gStyle.fOptFit = 1111; |
193 | f9daq | 78 | |
79 | } |
||
80 | |||
81 | |||
268 | f9daq | 82 | function fitpanel(oFormElement) |
83 | { |
||
84 | var xhr = new XMLHttpRequest(); |
||
85 | xhr.onreadystatechange = function() { |
||
86 | if(xhr.readyState == 4 && xhr.status == 200) { |
||
270 | f9daq | 87 | var event = JSON.parse(xhr.responseText); |
88 | var result = event.data; |
||
89 | var th1 = JSROOT.parse(result.message); |
||
90 | var hname = th1.fName; |
||
91 | var r = document.getElementById('drawing'); |
||
92 | if (document.getElementById(hname) == null ){ |
||
93 | r.insertAdjacentHTML('beforeend', '<div id="' + hname +'" style="width:80%; height:80%;"></div><br/>'); |
||
94 | } |
||
95 | var hframe = document.getElementById(hname); |
||
96 | hframe.innerHTML = ''; |
||
97 | // https://github.com/root-project/jsroot/issues/42 |
||
98 | |||
99 | JSROOT.draw(hname, th1, "hist"); |
||
100 | JSROOT.gStyle.fOptFit = 1111; |
||
101 | JSROOT.draw(hname, th1, "func"); |
||
268 | f9daq | 102 | |
270 | f9daq | 103 | |
104 | document.getElementById('data'+ hname).value=result.message; |
||
105 | //frame.scrollIntoView(); |
||
268 | f9daq | 106 | } |
107 | } |
||
108 | xhr.open (oFormElement.method, oFormElement.action, true); |
||
109 | |||
110 | var data = new FormData (oFormElement); |
||
111 | xhr.send (data); |
||
112 | |||
113 | return false; // Markus had to return true |
||
114 | } |
||
115 | |||
116 | |||
117 | |||
193 | f9daq | 118 | function startTask() { |
119 | |||
120 | var r = document.getElementById('results'); |
||
324 | f9daq | 121 | //if ( r.style.display == 'none' ) switchTask(); |
193 | f9daq | 122 | r.innerHTML = ''; |
302 | f9daq | 123 | var btnstart = document.getElementById('btnstart'); |
124 | btnstart.value= "Stop Analysis"; |
||
125 | |||
126 | |||
266 | f9daq | 127 | document.getElementById('drawing').innerHTML = ''; |
193 | f9daq | 128 | |
129 | Blockly.JavaScript.INFINITE_LOOP_TRAP = null; |
||
130 | var code = Blockly.JavaScript.workspaceToCode(workspace); |
||
131 | code = code.replace(/\(|\)/gi, ''); |
||
132 | |||
133 | addLog(code + '<br>'); |
||
134 | //addLog(JSON.stringify(code)+ '<br>'); |
||
135 | es = new EventSource('runscript.php?code=' + code ); |
||
136 | |||
137 | //a message is received |
||
138 | es.addEventListener('message',EventListener); |
||
139 | es.addEventListener('error', function(e) { |
||
343 | f9daq | 140 | //addLog('Error occurred'); |
302 | f9daq | 141 | stopTask(); |
142 | //es.close(); |
||
193 | f9daq | 143 | }); |
144 | } |
||
145 | |||
302 | f9daq | 146 | function startAction() { |
147 | var btnstart = document.getElementById('btnstart'); |
||
344 | f9daq | 148 | first = 0; |
302 | f9daq | 149 | if (btnstart.value=== "Stop Analysis"){ |
150 | stopTask(); |
||
151 | } else { |
||
152 | startTask(); |
||
153 | } |
||
154 | } |
||
324 | f9daq | 155 | |
156 | function toProcess() { |
||
157 | window.location.hash='#btnstart'; |
||
158 | //window.location.hash='#blocklyDiv'; |
||
159 | } |
||
160 | |||
161 | function showDebug() { |
||
162 | var btnstart = document.getElementById('btndebug'); |
||
163 | var div = document.getElementById('results'); |
||
164 | |||
165 | if (btnstart.value=== "Show Text"){ |
||
166 | btnstart.value = "Hide Text"; |
||
167 | div.style.display = 'block'; |
||
168 | } else { |
||
169 | btnstart.value = "Show Text"; |
||
170 | div.style.display = 'none'; |
||
171 | } |
||
172 | } |
||
173 | |||
174 | function showLicense() { |
||
175 | window.location.href="license.html"; |
||
176 | } |
||
177 | |||
178 | |||
193 | f9daq | 179 | function EventListener(e) { |
268 | f9daq | 180 | //addLog(JSON.stringify(e) ); |
181 | |||
193 | f9daq | 182 | var result = JSON.parse( e.data ); |
183 | |||
184 | if(e.lastEventId == 'CLOSE') { |
||
324 | f9daq | 185 | //addLog('Received CLOSE closing'); |
302 | f9daq | 186 | stopTask(); |
187 | // es.close(); |
||
188 | |||
193 | f9daq | 189 | var pBar = document.getElementById('progressor'); |
190 | pBar.value = pBar.max; //max out the progress bar |
||
191 | var perc = document.getElementById('percentage'); |
||
192 | perc.innerHTML = "100%"; |
||
193 | perc.style.width = (Math.floor(pBar.clientWidth * (0.5)) + 15) + 'px'; |
||
194 | } else { |
||
195 | if(e.lastEventId == '0' ) { |
||
196 | addLog(result.message); |
||
197 | } else { |
||
198 | if(e.lastEventId == '2' ) { |
||
199 | showStat(result.message); |
||
200 | } else { |
||
201 | var jsonobj = JSROOT.parse(result.message); |
||
268 | f9daq | 202 | var sframe = jsonobj.fName; |
203 | |||
204 | |||
324 | f9daq | 205 | //addLog('Histogram :'+ sframe ); |
206 | //var r = document.getElementById('results'); |
||
207 | var r = document.getElementById('drawing'); |
||
268 | f9daq | 208 | if (document.getElementById(sframe) == null ){ |
344 | f9daq | 209 | //console.log('insert HTML for', sframe) |
210 | r.insertAdjacentHTML('beforeend', '<div id="' + sframe +'" style="width:800px; height:500px"></div><br/>');//narise histogram |
||
211 | |||
268 | f9daq | 212 | r.insertAdjacentHTML('beforeend', '<div id="fit' + sframe +'" style="display: none"></div><br/>'); |
344 | f9daq | 213 | insertHTML(sframe); |
324 | f9daq | 214 | r.insertAdjacentHTML('beforeend','<input type="button" onclick="togglevisibility(\'fit'+sframe+'\');" class="mybutton" value="Show/Hide Fit Panel" />' ); |
215 | r.insertAdjacentHTML('beforeend',' <input type="button" onclick="toProcess();" class="mybutton" value="To Process" /><hr/>' ); |
||
344 | f9daq | 216 | |
268 | f9daq | 217 | //r.insertAdjacentHTML('beforeend', JSON.stringify(result.message)); |
218 | } |
||
193 | f9daq | 219 | var frame = document.getElementById(sframe); |
344 | f9daq | 220 | JSROOT.redraw(sframe, jsonobj, "hist", function(){ |
221 | initSliders(sframe); |
||
222 | }); |
||
223 | |||
224 | |||
266 | f9daq | 225 | |
193 | f9daq | 226 | frame.scrollIntoView(); |
227 | } |
||
228 | } |
||
229 | var pBar = document.getElementById('progressor'); |
||
230 | pBar.value = result.progress; |
||
231 | var perc = document.getElementById('percentage'); |
||
232 | perc.innerHTML = result.progress + "%"; |
||
233 | perc.style.width = (Math.floor(pBar.clientWidth * (result.progress/100)) + 15) + 'px'; |
||
234 | } |
||
235 | } |
||
236 | |||
237 | |||
238 | |||
239 | function stopTask() { |
||
240 | es.close(); |
||
324 | f9daq | 241 | //addLog('Task end'); |
302 | f9daq | 242 | var btnstart = document.getElementById('btnstart'); |
243 | |||
244 | btnstart.value= "Run Analysis"; |
||
245 | |||
193 | f9daq | 246 | } |
247 | |||
248 | |||
268 | f9daq | 249 | /* |
193 | f9daq | 250 | function switchTask() { |
251 | var div = document.getElementById('results'); |
||
252 | var divs = document.getElementById('sbar'); |
||
253 | var div0 = document.getElementById('blocklyDiv'); |
||
254 | |||
255 | if (div.style.display !== 'none') { |
||
256 | div.style.display = 'none'; |
||
257 | divs.style.display = 'none'; |
||
258 | div0.style.display = 'block'; |
||
259 | } |
||
260 | else { |
||
261 | div.style.display = 'block'; |
||
262 | divs.style.display = 'block'; |
||
263 | div0.style.display = 'none'; |
||
264 | } |
||
265 | |||
266 | } |
||
268 | f9daq | 267 | */ |
193 | f9daq | 268 | |
269 | |||
268 | f9daq | 270 | function togglevisibility( name ) { |
271 | var div = document.getElementById(name); |
||
272 | if (div.style.display !== 'none') { |
||
273 | div.style.display = 'none'; |
||
274 | } |
||
275 | else { |
||
276 | div.style.display = 'block'; |
||
277 | } |
||
278 | } |
||
279 | |||
280 | |||
193 | f9daq | 281 | function readSingleFile(e) { |
282 | |||
283 | var div0 = document.getElementById('blocklyDiv'); |
||
268 | f9daq | 284 | //if (div0.style.display === 'none') switchTask(); |
193 | f9daq | 285 | |
286 | var file = e.target.files[0]; |
||
287 | if (!file) { |
||
288 | return; |
||
289 | } |
||
290 | var reader = new FileReader(); |
||
291 | reader.onload = function(e) { |
||
292 | var contents = e.target.result; |
||
293 | displayContents(contents); |
||
294 | |||
295 | }; |
||
296 | reader.readAsText(file); |
||
297 | |||
298 | } |
||
299 | |||
300 | function displayContents(contents) { |
||
301 | |||
302 | workspace.clear(); |
||
303 | var xml = Blockly.Xml.textToDom(contents); |
||
304 | Blockly.Xml.domToWorkspace(xml, workspace); |
||
305 | |||
306 | } |
||
307 | |||
308 | |||
309 | function loadDoc( url ) { |
||
310 | var xhttp = new XMLHttpRequest(); |
||
311 | xhttp.onreadystatechange = function () { |
||
312 | if (xhttp.readyState == 4 && xhttp.status == 200) { |
||
313 | return xhttp.responseText; |
||
314 | } |
||
315 | } |
||
316 | xhttp.open("GET", url, false); // !!! should be in synchronous mode |
||
317 | xhttp.send(); |
||
318 | return xhttp.onreadystatechange(); |
||
319 | } |
||
320 | |||
321 | function showCode() { |
||
322 | // Generate JavaScript code and display it. |
||
323 | Blockly.JavaScript.INFINITE_LOOP_TRAP = null; |
||
324 | var code = Blockly.JavaScript.workspaceToCode(workspace); |
||
325 | //var code = Blockly.JSON.fromWorkspace( workspace ); |
||
326 | //var code = Blockly.Xml.domToPrettyText(workspace ); |
||
327 | code = code.replace(/\(|\)/gi, ''); |
||
328 | console.log(code); |
||
329 | console.log(code.length); |
||
330 | alert(code); |
||
331 | |||
332 | } |
||
333 | |||
334 | |||
335 | function saveBlockly(){ |
||
336 | // https://eligrey.com/blog/saving-generated-files-on-the-client-side/ |
||
337 | |||
338 | var xml = Blockly.Xml.workspaceToDom(workspace); |
||
339 | var txt = Blockly.Xml.domToText(xml); |
||
340 | |||
341 | // var txt=Blockly.Xml.domToPrettyText(Blockly.Xml.workspaceToDom(Blockly.mainWorkspace)); // exports workspace as pretty xml |
||
342 | console.log(txt); |
||
343 | var blob = new Blob([txt], {type: "text/xml"}); |
||
344 | saveAs(blob, "test.blab2"); |
||
345 | } |
||
346 | |||
347 | function loadBlockly(){ |
||
348 | Blockly.Xml.domToWorkspace(Blockly.mainWorkspace,$("#hiBlocks")[0]); // loads xml from dom into workspace |
||
349 | } |
||
350 | |||
351 | function runCode() { |
||
352 | // Generate JavaScript code and run it. |
||
353 | window.LoopTrap = 1000; |
||
354 | Blockly.JavaScript.INFINITE_LOOP_TRAP = |
||
355 | 'if (--window.LoopTrap == 0) throw "Infinite loop.";\n'; |
||
356 | var code = Blockly.JavaScript.workspaceToCode(workspace); |
||
357 | Blockly.JavaScript.INFINITE_LOOP_TRAP = null; |
||
358 | try { |
||
359 | eval(code); |
||
360 | } catch (e) { |
||
361 | alert(e); |
||
362 | } |
||
363 | } |
||
344 | f9daq | 364 | |
365 | Blockly.Blocks['simple_analysis'] = { |
||
366 | init: function() { |
||
367 | this.appendDummyInput() |
||
368 | .appendField("Belle II Masterclass"); |
||
369 | this.appendDummyInput() |
||
370 | .appendField("Number of events: ") |
||
371 | .appendField(new Blockly.FieldNumber(5000, 0), "neve"); |
||
372 | this.appendDummyInput() |
||
373 | .appendField("First event: ") |
||
374 | .appendField(new Blockly.FieldNumber(0, 0), "first"); |
||
375 | this.appendDummyInput() |
||
376 | .appendField("Data Source") |
||
377 | .appendField(new Blockly.FieldDropdown([ |
||
378 | <?php |
||
379 | $files = array_slice(scandir('../data/'), 2); |
||
380 | $cnt=0; |
||
381 | foreach($files as $f){ |
||
382 | echo "[\"$f\",\"$f\"],"; |
||
383 | $cnt++; |
||
384 | } |
||
385 | ?>]), "datasource"); |
||
386 | this.appendDummyInput() |
||
387 | .appendField("Print particle list?") |
||
388 | .appendField(new Blockly.FieldDropdown([["No", "0"], ["Yes", "1"]]), "print"); |
||
389 | this.appendValueInput("list") |
||
390 | .setCheck("particle list") |
||
391 | .appendField("Particle List"); |
||
392 | this.setColour(230); |
||
393 | this.setTooltip('Run the analysis, specify data source, number of events, first event and a list of particles to process.'); |
||
394 | this.setHelpUrl('http://belle2.jp/'); |
||
395 | } |
||
396 | }; |
||
193 | f9daq | 397 | |
344 | f9daq | 398 | |
193 | f9daq | 399 | </script> |
400 | |||
401 | </head> |
||
402 | <body> |
||
344 | f9daq | 403 | |
325 | f9daq | 404 | <h1>Belle II Particle Discovery: Describe process →Analyse →Fit results →Discover</h1> |
193 | f9daq | 405 | <!-- <input type="button" onclick="showCode();" class="mybutton" value="Show JavaScript" /> --> |
302 | f9daq | 406 | <input type="button" id="btnstart" onclick="startAction();" class="mybutton" value="Run Analysis" /> |
407 | |||
193 | f9daq | 408 | <input type="button" onclick="saveBlockly();" class="mybutton" value="Save Diagram" /> |
409 | <form style="display:inline;"><label for="file-input" class="mybutton" style="">Load Diagram</label> |
||
324 | f9daq | 410 | <input type="button" id="btndebug" onclick="showDebug();" class="mybutton" value="Hide Text" /> |
411 | <input type="button" id="btnhelp" onclick="window.location.href='BelleIILabManual.pdf';" class="mybutton" value="Help" /> |
||
412 | <input type="button" id="btnabout" onclick="showLicense();" class="mybutton" value="About" /> |
||
268 | f9daq | 413 | <input type="file" style="visibility:hidden;" id="file-input" onClick="this.form.reset()" data-buttonText="Load Diagram"/></form> |
414 | <br/> |
||
193 | f9daq | 415 | <progress id='progressor' value="0" max='100' style="width:95%"></progress> |
416 | <span id="percentage" style="text-align:right; display:block; margin-top:5px;">0</span> |
||
417 | <p id="sbar" ></div> |
||
418 | |||
419 | <br /> |
||
420 | |||
421 | <div id="results" style="border:1px solid #000; padding:10px; width:95%; height:80% ; overflow:auto; background:#eee;"></div> |
||
422 | <br /> |
||
324 | f9daq | 423 | <div id="blocklyDiv" style="height:900px; width:95%"></div><br /> |
193 | f9daq | 424 | |
425 | <script> |
||
426 | |||
427 | document.getElementById('file-input').addEventListener('change', readSingleFile, false); |
||
428 | |||
429 | var toolbox = loadDoc("toolbox.xml"); |
||
430 | |||
431 | var options = { |
||
432 | toolbox : toolbox, |
||
433 | collapse : true, |
||
434 | comments : true, |
||
435 | disable : true, |
||
436 | maxBlocks : Infinity, |
||
437 | trashcan : true, |
||
438 | horizontalLayout : false, |
||
439 | toolboxPosition : 'start', |
||
440 | css : true, |
||
441 | /* media : '../media/', */ |
||
442 | rtl : false, |
||
443 | scrollbars : true, |
||
444 | sounds : true, |
||
445 | oneBasedIndex : true, |
||
446 | zoom : { |
||
447 | controls : true, |
||
448 | wheel : true, |
||
449 | startScale : 1, |
||
450 | maxcale : 3, |
||
451 | minScale : 0.3 |
||
452 | }, |
||
453 | grid: |
||
454 | {spacing: 20, |
||
455 | length: 3, |
||
456 | colour: '#ccc', |
||
457 | snap: true} |
||
458 | }; |
||
459 | |||
460 | var workspace = Blockly.inject('blocklyDiv', options); |
||
461 | |||
462 | <?php |
||
463 | |||
464 | if (isset($_GET["decay"])){ |
||
465 | $decay = $_GET["decay"]; |
||
466 | } else { |
||
467 | $decay = "data/sample.blab2"; |
||
468 | } |
||
469 | // echo "var workspaceBlocks = loadDoc( \"$decay\");" |
||
470 | /* Load blocks to workspace. */ |
||
471 | echo "displayContents( loadDoc( \"$decay\"));" |
||
472 | |||
473 | ?> |
||
474 | |||
475 | //displayContents(workspaceBlocks); |
||
318 | f9daq | 476 | </script> |
477 | <div id="drawing"></div> |
||
478 | <?php |
||
479 | $hostname = gethostname(); |
||
480 | if ($hostname != "belle2.ijs.si") { |
||
481 | echo "<a href='update.php'>Update code from the central server</a>"; |
||
482 | } |
||
483 | ?> |
||
193 | f9daq | 484 | </body> |
485 | </html> |