Rev 302 | Rev 324 | Go to most recent revision | 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"> |
||
5 | <title>Belle II Masterclass</title> |
||
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 | |
16 | <style> |
||
17 | table { |
||
18 | border-collapse: collapse; |
||
19 | width: 100%; |
||
20 | } |
||
21 | |||
22 | th, td { |
||
23 | padding: 0px; |
||
24 | text-align: right; |
||
25 | } |
||
26 | |||
27 | tr:hover{background-color:#ffffff} |
||
28 | </style> |
||
29 | |||
193 | f9daq | 30 | <script src="js/Blob.js"></script> |
31 | |||
32 | |||
266 | f9daq | 33 | <!-- <script type="text/javascript" src="js/JSRootCore.js?2d&onload=startGUI""></script> --> |
270 | f9daq | 34 | <script type="text/javascript" src="https://root.cern/js/latest/scripts/JSRootCore.js?2d&onload=startGUI"></script> |
193 | f9daq | 35 | <script type = "text/javascript" language = "javascript"> |
36 | |||
37 | var es; |
||
38 | function addLog(message) { |
||
270 | f9daq | 39 | var r = document.getElementById('results'); |
193 | f9daq | 40 | r.insertAdjacentHTML('beforeend', message +'<br/>'); |
41 | } |
||
42 | |||
43 | function showStat(message) { |
||
44 | var r = document.getElementById('sbar'); |
||
45 | r.innerHTML = message ; |
||
46 | } |
||
47 | |||
48 | |||
49 | |||
50 | function startGUI() { |
||
51 | // d3.select('html').style('height','100%'); |
||
52 | // d3.select('body').style({'min-height':'100%', 'margin':'0px', "overflow" :"hidden"}); |
||
270 | f9daq | 53 | // var r = document.getElementById('results'); |
54 | // r.style.display = 'none'; |
||
193 | f9daq | 55 | var r0 = document.getElementById('sbar'); |
56 | r0.style.display = 'none'; |
||
270 | f9daq | 57 | JSROOT.gStyle.fOptFit = 1111; |
193 | f9daq | 58 | |
59 | } |
||
60 | |||
61 | |||
268 | f9daq | 62 | function fitpanel(oFormElement) |
63 | { |
||
64 | var xhr = new XMLHttpRequest(); |
||
65 | xhr.onreadystatechange = function() { |
||
66 | if(xhr.readyState == 4 && xhr.status == 200) { |
||
270 | f9daq | 67 | var event = JSON.parse(xhr.responseText); |
68 | var result = event.data; |
||
69 | var th1 = JSROOT.parse(result.message); |
||
70 | var hname = th1.fName; |
||
71 | var r = document.getElementById('drawing'); |
||
72 | if (document.getElementById(hname) == null ){ |
||
73 | r.insertAdjacentHTML('beforeend', '<div id="' + hname +'" style="width:80%; height:80%;"></div><br/>'); |
||
74 | } |
||
75 | var hframe = document.getElementById(hname); |
||
76 | hframe.innerHTML = ''; |
||
77 | // https://github.com/root-project/jsroot/issues/42 |
||
78 | |||
79 | JSROOT.draw(hname, th1, "hist"); |
||
80 | JSROOT.gStyle.fOptFit = 1111; |
||
81 | JSROOT.draw(hname, th1, "func"); |
||
268 | f9daq | 82 | |
270 | f9daq | 83 | |
84 | document.getElementById('data'+ hname).value=result.message; |
||
85 | //frame.scrollIntoView(); |
||
268 | f9daq | 86 | } |
87 | } |
||
88 | xhr.open (oFormElement.method, oFormElement.action, true); |
||
89 | |||
90 | var data = new FormData (oFormElement); |
||
91 | xhr.send (data); |
||
92 | |||
93 | return false; // Markus had to return true |
||
94 | } |
||
95 | |||
96 | |||
97 | |||
193 | f9daq | 98 | function startTask() { |
99 | |||
100 | var r = document.getElementById('results'); |
||
101 | if ( r.style.display == 'none' ) switchTask(); |
||
102 | r.innerHTML = ''; |
||
302 | f9daq | 103 | var btnstart = document.getElementById('btnstart'); |
104 | btnstart.value= "Stop Analysis"; |
||
105 | |||
106 | |||
266 | f9daq | 107 | document.getElementById('drawing').innerHTML = ''; |
193 | f9daq | 108 | |
109 | Blockly.JavaScript.INFINITE_LOOP_TRAP = null; |
||
110 | var code = Blockly.JavaScript.workspaceToCode(workspace); |
||
111 | code = code.replace(/\(|\)/gi, ''); |
||
112 | |||
113 | addLog(code + '<br>'); |
||
114 | //addLog(JSON.stringify(code)+ '<br>'); |
||
115 | es = new EventSource('runscript.php?code=' + code ); |
||
116 | |||
117 | //a message is received |
||
118 | es.addEventListener('message',EventListener); |
||
119 | es.addEventListener('error', function(e) { |
||
120 | addLog('Error occurred'); |
||
302 | f9daq | 121 | stopTask(); |
122 | //es.close(); |
||
193 | f9daq | 123 | }); |
124 | } |
||
125 | |||
302 | f9daq | 126 | function startAction() { |
127 | var btnstart = document.getElementById('btnstart'); |
||
128 | if (btnstart.value=== "Stop Analysis"){ |
||
129 | stopTask(); |
||
130 | } else { |
||
131 | startTask(); |
||
132 | } |
||
133 | } |
||
193 | f9daq | 134 | function EventListener(e) { |
268 | f9daq | 135 | //addLog(JSON.stringify(e) ); |
136 | |||
193 | f9daq | 137 | var result = JSON.parse( e.data ); |
138 | |||
139 | if(e.lastEventId == 'CLOSE') { |
||
140 | addLog('Received CLOSE closing'); |
||
302 | f9daq | 141 | stopTask(); |
142 | // es.close(); |
||
143 | |||
193 | f9daq | 144 | var pBar = document.getElementById('progressor'); |
145 | pBar.value = pBar.max; //max out the progress bar |
||
146 | var perc = document.getElementById('percentage'); |
||
147 | perc.innerHTML = "100%"; |
||
148 | perc.style.width = (Math.floor(pBar.clientWidth * (0.5)) + 15) + 'px'; |
||
149 | } else { |
||
150 | if(e.lastEventId == '0' ) { |
||
151 | addLog(result.message); |
||
152 | } else { |
||
153 | if(e.lastEventId == '2' ) { |
||
154 | showStat(result.message); |
||
155 | } else { |
||
156 | var jsonobj = JSROOT.parse(result.message); |
||
268 | f9daq | 157 | var sframe = jsonobj.fName; |
158 | |||
159 | |||
160 | addLog('Histogram :'+ sframe ); |
||
161 | var r = document.getElementById('results'); |
||
162 | //var r = document.getElementById('drawing'); |
||
163 | if (document.getElementById(sframe) == null ){ |
||
164 | r.insertAdjacentHTML('beforeend', '<div id="' + sframe +'" style="width:1000px; height:600px"></div><br/>'); |
||
165 | r.insertAdjacentHTML('beforeend', '<div id="fit' + sframe +'" style="display: none"></div><br/>'); |
||
166 | var fit = document.getElementById('fit'+ sframe); |
||
167 | mform ='<form method="post" action="th1fit.php" onsubmit="return fitpanel(this);">'; |
||
270 | f9daq | 168 | mform += ' Function:<input type="text" size="20" value="gaus" name="fitfun" /><br/>'; |
268 | f9daq | 169 | mform += ' Range: min=<input type="text" size="2" value="0" name="min" />'; |
270 | f9daq | 170 | mform += ' max=<input type="text" size="2" value="20" name="max" /><br/>'; |
171 | mform += ' Initial parameters (separated by ,)<input type="text" size="20" value="" name="prm" /><br/>'; |
||
268 | f9daq | 172 | mform += ' <input id="data'+ sframe +'" type="hidden" value="'+ result.message +'" name="data" />'; |
173 | mform += ' <input type="hidden" value="'+ sframe +'" name="name" />'; |
||
270 | f9daq | 174 | mform += ' <input class="mybutton" type="submit" value=" Fit "/>'; |
268 | f9daq | 175 | mform += '</form>'; |
269 | f9daq | 176 | fit.insertAdjacentHTML('beforeend', '<div id="param' + sframe +'"></div><br/>'); |
268 | f9daq | 177 | fit.insertAdjacentHTML('beforeend', mform); |
178 | r.insertAdjacentHTML('beforeend','<input type="button" onclick="togglevisibility(\'fit'+sframe+'\');" class="mybutton" value="Show/Hide Fit Panel" /><hr/>' ); |
||
179 | document.getElementById('data'+ sframe).value=result.message; |
||
180 | //r.insertAdjacentHTML('beforeend', JSON.stringify(result.message)); |
||
181 | } |
||
193 | f9daq | 182 | var frame = document.getElementById(sframe); |
270 | f9daq | 183 | |
268 | f9daq | 184 | JSROOT.redraw(sframe, jsonobj, "hist"); |
185 | |||
266 | f9daq | 186 | |
193 | f9daq | 187 | frame.scrollIntoView(); |
188 | } |
||
189 | } |
||
190 | var pBar = document.getElementById('progressor'); |
||
191 | pBar.value = result.progress; |
||
192 | var perc = document.getElementById('percentage'); |
||
193 | perc.innerHTML = result.progress + "%"; |
||
194 | perc.style.width = (Math.floor(pBar.clientWidth * (result.progress/100)) + 15) + 'px'; |
||
195 | } |
||
196 | } |
||
197 | |||
198 | |||
199 | |||
200 | function stopTask() { |
||
201 | es.close(); |
||
302 | f9daq | 202 | addLog('Task end'); |
203 | var btnstart = document.getElementById('btnstart'); |
||
204 | |||
205 | btnstart.value= "Run Analysis"; |
||
206 | |||
193 | f9daq | 207 | } |
208 | |||
209 | |||
268 | f9daq | 210 | /* |
193 | f9daq | 211 | function switchTask() { |
212 | var div = document.getElementById('results'); |
||
213 | var divs = document.getElementById('sbar'); |
||
214 | var div0 = document.getElementById('blocklyDiv'); |
||
215 | |||
216 | if (div.style.display !== 'none') { |
||
217 | div.style.display = 'none'; |
||
218 | divs.style.display = 'none'; |
||
219 | div0.style.display = 'block'; |
||
220 | } |
||
221 | else { |
||
222 | div.style.display = 'block'; |
||
223 | divs.style.display = 'block'; |
||
224 | div0.style.display = 'none'; |
||
225 | } |
||
226 | |||
227 | } |
||
268 | f9daq | 228 | */ |
193 | f9daq | 229 | |
230 | |||
268 | f9daq | 231 | function togglevisibility( name ) { |
232 | var div = document.getElementById(name); |
||
233 | if (div.style.display !== 'none') { |
||
234 | div.style.display = 'none'; |
||
235 | } |
||
236 | else { |
||
237 | div.style.display = 'block'; |
||
238 | } |
||
239 | } |
||
240 | |||
241 | |||
193 | f9daq | 242 | function readSingleFile(e) { |
243 | |||
244 | var div0 = document.getElementById('blocklyDiv'); |
||
268 | f9daq | 245 | //if (div0.style.display === 'none') switchTask(); |
193 | f9daq | 246 | |
247 | var file = e.target.files[0]; |
||
248 | if (!file) { |
||
249 | return; |
||
250 | } |
||
251 | var reader = new FileReader(); |
||
252 | reader.onload = function(e) { |
||
253 | var contents = e.target.result; |
||
254 | displayContents(contents); |
||
255 | |||
256 | }; |
||
257 | reader.readAsText(file); |
||
258 | |||
259 | } |
||
260 | |||
261 | function displayContents(contents) { |
||
262 | |||
263 | workspace.clear(); |
||
264 | var xml = Blockly.Xml.textToDom(contents); |
||
265 | Blockly.Xml.domToWorkspace(xml, workspace); |
||
266 | |||
267 | } |
||
268 | |||
269 | |||
270 | function loadDoc( url ) { |
||
271 | var xhttp = new XMLHttpRequest(); |
||
272 | xhttp.onreadystatechange = function () { |
||
273 | if (xhttp.readyState == 4 && xhttp.status == 200) { |
||
274 | return xhttp.responseText; |
||
275 | } |
||
276 | } |
||
277 | xhttp.open("GET", url, false); // !!! should be in synchronous mode |
||
278 | xhttp.send(); |
||
279 | return xhttp.onreadystatechange(); |
||
280 | } |
||
281 | |||
282 | function showCode() { |
||
283 | // Generate JavaScript code and display it. |
||
284 | Blockly.JavaScript.INFINITE_LOOP_TRAP = null; |
||
285 | var code = Blockly.JavaScript.workspaceToCode(workspace); |
||
286 | //var code = Blockly.JSON.fromWorkspace( workspace ); |
||
287 | //var code = Blockly.Xml.domToPrettyText(workspace ); |
||
288 | code = code.replace(/\(|\)/gi, ''); |
||
289 | console.log(code); |
||
290 | console.log(code.length); |
||
291 | alert(code); |
||
292 | |||
293 | } |
||
294 | |||
295 | |||
296 | function saveBlockly(){ |
||
297 | // https://eligrey.com/blog/saving-generated-files-on-the-client-side/ |
||
298 | |||
299 | var xml = Blockly.Xml.workspaceToDom(workspace); |
||
300 | var txt = Blockly.Xml.domToText(xml); |
||
301 | |||
302 | // var txt=Blockly.Xml.domToPrettyText(Blockly.Xml.workspaceToDom(Blockly.mainWorkspace)); // exports workspace as pretty xml |
||
303 | console.log(txt); |
||
304 | var blob = new Blob([txt], {type: "text/xml"}); |
||
305 | saveAs(blob, "test.blab2"); |
||
306 | } |
||
307 | |||
308 | function loadBlockly(){ |
||
309 | Blockly.Xml.domToWorkspace(Blockly.mainWorkspace,$("#hiBlocks")[0]); // loads xml from dom into workspace |
||
310 | } |
||
311 | |||
312 | function runCode() { |
||
313 | // Generate JavaScript code and run it. |
||
314 | window.LoopTrap = 1000; |
||
315 | Blockly.JavaScript.INFINITE_LOOP_TRAP = |
||
316 | 'if (--window.LoopTrap == 0) throw "Infinite loop.";\n'; |
||
317 | var code = Blockly.JavaScript.workspaceToCode(workspace); |
||
318 | Blockly.JavaScript.INFINITE_LOOP_TRAP = null; |
||
319 | try { |
||
320 | eval(code); |
||
321 | } catch (e) { |
||
322 | alert(e); |
||
323 | } |
||
324 | } |
||
325 | |||
326 | |||
327 | </script> |
||
328 | |||
329 | </head> |
||
330 | <body> |
||
268 | f9daq | 331 | <h1>Belle II Masterclass: Describe process →Run analysis →Fit results →Save/load process locally</h1> |
193 | f9daq | 332 | <!-- <input type="button" onclick="showCode();" class="mybutton" value="Show JavaScript" /> --> |
302 | f9daq | 333 | <input type="button" id="btnstart" onclick="startAction();" class="mybutton" value="Run Analysis" /> |
334 | |||
268 | f9daq | 335 | <!-- <input type="button" onclick="switchTask();" class="mybutton" value="Switch between Diagram and Results" /> --> |
193 | f9daq | 336 | <input type="button" onclick="saveBlockly();" class="mybutton" value="Save Diagram" /> |
337 | <form style="display:inline;"><label for="file-input" class="mybutton" style="">Load Diagram</label> |
||
268 | f9daq | 338 | <input type="file" style="visibility:hidden;" id="file-input" onClick="this.form.reset()" data-buttonText="Load Diagram"/></form> |
339 | <br/> |
||
193 | f9daq | 340 | <progress id='progressor' value="0" max='100' style="width:95%"></progress> |
341 | <span id="percentage" style="text-align:right; display:block; margin-top:5px;">0</span> |
||
342 | <p id="sbar" ></div> |
||
343 | |||
344 | <br /> |
||
345 | |||
346 | <div id="blocklyDiv" style="height:500px; width:95%"></div><br /> |
||
347 | <div id="results" style="border:1px solid #000; padding:10px; width:95%; height:80% ; overflow:auto; background:#eee;"></div> |
||
348 | <br /> |
||
349 | |||
350 | <script> |
||
351 | |||
352 | document.getElementById('file-input').addEventListener('change', readSingleFile, false); |
||
353 | |||
354 | var toolbox = loadDoc("toolbox.xml"); |
||
355 | |||
356 | var options = { |
||
357 | toolbox : toolbox, |
||
358 | collapse : true, |
||
359 | comments : true, |
||
360 | disable : true, |
||
361 | maxBlocks : Infinity, |
||
362 | trashcan : true, |
||
363 | horizontalLayout : false, |
||
364 | toolboxPosition : 'start', |
||
365 | css : true, |
||
366 | /* media : '../media/', */ |
||
367 | rtl : false, |
||
368 | scrollbars : true, |
||
369 | sounds : true, |
||
370 | oneBasedIndex : true, |
||
371 | zoom : { |
||
372 | controls : true, |
||
373 | wheel : true, |
||
374 | startScale : 1, |
||
375 | maxcale : 3, |
||
376 | minScale : 0.3 |
||
377 | }, |
||
378 | grid: |
||
379 | {spacing: 20, |
||
380 | length: 3, |
||
381 | colour: '#ccc', |
||
382 | snap: true} |
||
383 | }; |
||
384 | |||
385 | var workspace = Blockly.inject('blocklyDiv', options); |
||
386 | |||
387 | <?php |
||
388 | |||
389 | if (isset($_GET["decay"])){ |
||
390 | $decay = $_GET["decay"]; |
||
391 | } else { |
||
392 | $decay = "data/sample.blab2"; |
||
393 | } |
||
394 | // echo "var workspaceBlocks = loadDoc( \"$decay\");" |
||
395 | /* Load blocks to workspace. */ |
||
396 | echo "displayContents( loadDoc( \"$decay\"));" |
||
397 | |||
398 | ?> |
||
399 | |||
400 | //displayContents(workspaceBlocks); |
||
318 | f9daq | 401 | </script> |
402 | <div id="drawing"></div> |
||
403 | <?php |
||
404 | $hostname = gethostname(); |
||
405 | if ($hostname != "belle2.ijs.si") { |
||
406 | echo "<a href='update.php'>Update code from the central server</a>"; |
||
407 | } |
||
408 | ?> |
||
193 | f9daq | 409 | </body> |
410 | </html> |