Rev 318 | Rev 325 | 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'); |
||
| 324 | f9daq | 101 | //if ( r.style.display == 'none' ) switchTask(); |
| 193 | f9daq | 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 | } |
||
| 324 | f9daq | 134 | |
| 135 | function toProcess() { |
||
| 136 | window.location.hash='#btnstart'; |
||
| 137 | //window.location.hash='#blocklyDiv'; |
||
| 138 | } |
||
| 139 | |||
| 140 | function showDebug() { |
||
| 141 | var btnstart = document.getElementById('btndebug'); |
||
| 142 | var div = document.getElementById('results'); |
||
| 143 | |||
| 144 | if (btnstart.value=== "Show Text"){ |
||
| 145 | btnstart.value = "Hide Text"; |
||
| 146 | div.style.display = 'block'; |
||
| 147 | } else { |
||
| 148 | btnstart.value = "Show Text"; |
||
| 149 | div.style.display = 'none'; |
||
| 150 | } |
||
| 151 | } |
||
| 152 | |||
| 153 | function showLicense() { |
||
| 154 | window.location.href="license.html"; |
||
| 155 | } |
||
| 156 | |||
| 157 | |||
| 193 | f9daq | 158 | function EventListener(e) { |
| 268 | f9daq | 159 | //addLog(JSON.stringify(e) ); |
| 160 | |||
| 193 | f9daq | 161 | var result = JSON.parse( e.data ); |
| 162 | |||
| 163 | if(e.lastEventId == 'CLOSE') { |
||
| 324 | f9daq | 164 | //addLog('Received CLOSE closing'); |
| 302 | f9daq | 165 | stopTask(); |
| 166 | // es.close(); |
||
| 167 | |||
| 193 | f9daq | 168 | var pBar = document.getElementById('progressor'); |
| 169 | pBar.value = pBar.max; //max out the progress bar |
||
| 170 | var perc = document.getElementById('percentage'); |
||
| 171 | perc.innerHTML = "100%"; |
||
| 172 | perc.style.width = (Math.floor(pBar.clientWidth * (0.5)) + 15) + 'px'; |
||
| 173 | } else { |
||
| 174 | if(e.lastEventId == '0' ) { |
||
| 175 | addLog(result.message); |
||
| 176 | } else { |
||
| 177 | if(e.lastEventId == '2' ) { |
||
| 178 | showStat(result.message); |
||
| 179 | } else { |
||
| 180 | var jsonobj = JSROOT.parse(result.message); |
||
| 268 | f9daq | 181 | var sframe = jsonobj.fName; |
| 182 | |||
| 183 | |||
| 324 | f9daq | 184 | //addLog('Histogram :'+ sframe ); |
| 185 | //var r = document.getElementById('results'); |
||
| 186 | var r = document.getElementById('drawing'); |
||
| 268 | f9daq | 187 | if (document.getElementById(sframe) == null ){ |
| 188 | r.insertAdjacentHTML('beforeend', '<div id="' + sframe +'" style="width:1000px; height:600px"></div><br/>'); |
||
| 189 | r.insertAdjacentHTML('beforeend', '<div id="fit' + sframe +'" style="display: none"></div><br/>'); |
||
| 190 | var fit = document.getElementById('fit'+ sframe); |
||
| 191 | mform ='<form method="post" action="th1fit.php" onsubmit="return fitpanel(this);">'; |
||
| 270 | f9daq | 192 | mform += ' Function:<input type="text" size="20" value="gaus" name="fitfun" /><br/>'; |
| 268 | f9daq | 193 | mform += ' Range: min=<input type="text" size="2" value="0" name="min" />'; |
| 270 | f9daq | 194 | mform += ' max=<input type="text" size="2" value="20" name="max" /><br/>'; |
| 195 | mform += ' Initial parameters (separated by ,)<input type="text" size="20" value="" name="prm" /><br/>'; |
||
| 268 | f9daq | 196 | mform += ' <input id="data'+ sframe +'" type="hidden" value="'+ result.message +'" name="data" />'; |
| 197 | mform += ' <input type="hidden" value="'+ sframe +'" name="name" />'; |
||
| 270 | f9daq | 198 | mform += ' <input class="mybutton" type="submit" value=" Fit "/>'; |
| 268 | f9daq | 199 | mform += '</form>'; |
| 269 | f9daq | 200 | fit.insertAdjacentHTML('beforeend', '<div id="param' + sframe +'"></div><br/>'); |
| 268 | f9daq | 201 | fit.insertAdjacentHTML('beforeend', mform); |
| 324 | f9daq | 202 | r.insertAdjacentHTML('beforeend','<input type="button" onclick="togglevisibility(\'fit'+sframe+'\');" class="mybutton" value="Show/Hide Fit Panel" />' ); |
| 203 | r.insertAdjacentHTML('beforeend',' <input type="button" onclick="toProcess();" class="mybutton" value="To Process" /><hr/>' ); |
||
| 268 | f9daq | 204 | document.getElementById('data'+ sframe).value=result.message; |
| 205 | //r.insertAdjacentHTML('beforeend', JSON.stringify(result.message)); |
||
| 206 | } |
||
| 193 | f9daq | 207 | var frame = document.getElementById(sframe); |
| 270 | f9daq | 208 | |
| 268 | f9daq | 209 | JSROOT.redraw(sframe, jsonobj, "hist"); |
| 210 | |||
| 266 | f9daq | 211 | |
| 193 | f9daq | 212 | frame.scrollIntoView(); |
| 213 | } |
||
| 214 | } |
||
| 215 | var pBar = document.getElementById('progressor'); |
||
| 216 | pBar.value = result.progress; |
||
| 217 | var perc = document.getElementById('percentage'); |
||
| 218 | perc.innerHTML = result.progress + "%"; |
||
| 219 | perc.style.width = (Math.floor(pBar.clientWidth * (result.progress/100)) + 15) + 'px'; |
||
| 220 | } |
||
| 221 | } |
||
| 222 | |||
| 223 | |||
| 224 | |||
| 225 | function stopTask() { |
||
| 226 | es.close(); |
||
| 324 | f9daq | 227 | //addLog('Task end'); |
| 302 | f9daq | 228 | var btnstart = document.getElementById('btnstart'); |
| 229 | |||
| 230 | btnstart.value= "Run Analysis"; |
||
| 231 | |||
| 193 | f9daq | 232 | } |
| 233 | |||
| 234 | |||
| 268 | f9daq | 235 | /* |
| 193 | f9daq | 236 | function switchTask() { |
| 237 | var div = document.getElementById('results'); |
||
| 238 | var divs = document.getElementById('sbar'); |
||
| 239 | var div0 = document.getElementById('blocklyDiv'); |
||
| 240 | |||
| 241 | if (div.style.display !== 'none') { |
||
| 242 | div.style.display = 'none'; |
||
| 243 | divs.style.display = 'none'; |
||
| 244 | div0.style.display = 'block'; |
||
| 245 | } |
||
| 246 | else { |
||
| 247 | div.style.display = 'block'; |
||
| 248 | divs.style.display = 'block'; |
||
| 249 | div0.style.display = 'none'; |
||
| 250 | } |
||
| 251 | |||
| 252 | } |
||
| 268 | f9daq | 253 | */ |
| 193 | f9daq | 254 | |
| 255 | |||
| 268 | f9daq | 256 | function togglevisibility( name ) { |
| 257 | var div = document.getElementById(name); |
||
| 258 | if (div.style.display !== 'none') { |
||
| 259 | div.style.display = 'none'; |
||
| 260 | } |
||
| 261 | else { |
||
| 262 | div.style.display = 'block'; |
||
| 263 | } |
||
| 264 | } |
||
| 265 | |||
| 266 | |||
| 193 | f9daq | 267 | function readSingleFile(e) { |
| 268 | |||
| 269 | var div0 = document.getElementById('blocklyDiv'); |
||
| 268 | f9daq | 270 | //if (div0.style.display === 'none') switchTask(); |
| 193 | f9daq | 271 | |
| 272 | var file = e.target.files[0]; |
||
| 273 | if (!file) { |
||
| 274 | return; |
||
| 275 | } |
||
| 276 | var reader = new FileReader(); |
||
| 277 | reader.onload = function(e) { |
||
| 278 | var contents = e.target.result; |
||
| 279 | displayContents(contents); |
||
| 280 | |||
| 281 | }; |
||
| 282 | reader.readAsText(file); |
||
| 283 | |||
| 284 | } |
||
| 285 | |||
| 286 | function displayContents(contents) { |
||
| 287 | |||
| 288 | workspace.clear(); |
||
| 289 | var xml = Blockly.Xml.textToDom(contents); |
||
| 290 | Blockly.Xml.domToWorkspace(xml, workspace); |
||
| 291 | |||
| 292 | } |
||
| 293 | |||
| 294 | |||
| 295 | function loadDoc( url ) { |
||
| 296 | var xhttp = new XMLHttpRequest(); |
||
| 297 | xhttp.onreadystatechange = function () { |
||
| 298 | if (xhttp.readyState == 4 && xhttp.status == 200) { |
||
| 299 | return xhttp.responseText; |
||
| 300 | } |
||
| 301 | } |
||
| 302 | xhttp.open("GET", url, false); // !!! should be in synchronous mode |
||
| 303 | xhttp.send(); |
||
| 304 | return xhttp.onreadystatechange(); |
||
| 305 | } |
||
| 306 | |||
| 307 | function showCode() { |
||
| 308 | // Generate JavaScript code and display it. |
||
| 309 | Blockly.JavaScript.INFINITE_LOOP_TRAP = null; |
||
| 310 | var code = Blockly.JavaScript.workspaceToCode(workspace); |
||
| 311 | //var code = Blockly.JSON.fromWorkspace( workspace ); |
||
| 312 | //var code = Blockly.Xml.domToPrettyText(workspace ); |
||
| 313 | code = code.replace(/\(|\)/gi, ''); |
||
| 314 | console.log(code); |
||
| 315 | console.log(code.length); |
||
| 316 | alert(code); |
||
| 317 | |||
| 318 | } |
||
| 319 | |||
| 320 | |||
| 321 | function saveBlockly(){ |
||
| 322 | // https://eligrey.com/blog/saving-generated-files-on-the-client-side/ |
||
| 323 | |||
| 324 | var xml = Blockly.Xml.workspaceToDom(workspace); |
||
| 325 | var txt = Blockly.Xml.domToText(xml); |
||
| 326 | |||
| 327 | // var txt=Blockly.Xml.domToPrettyText(Blockly.Xml.workspaceToDom(Blockly.mainWorkspace)); // exports workspace as pretty xml |
||
| 328 | console.log(txt); |
||
| 329 | var blob = new Blob([txt], {type: "text/xml"}); |
||
| 330 | saveAs(blob, "test.blab2"); |
||
| 331 | } |
||
| 332 | |||
| 333 | function loadBlockly(){ |
||
| 334 | Blockly.Xml.domToWorkspace(Blockly.mainWorkspace,$("#hiBlocks")[0]); // loads xml from dom into workspace |
||
| 335 | } |
||
| 336 | |||
| 337 | function runCode() { |
||
| 338 | // Generate JavaScript code and run it. |
||
| 339 | window.LoopTrap = 1000; |
||
| 340 | Blockly.JavaScript.INFINITE_LOOP_TRAP = |
||
| 341 | 'if (--window.LoopTrap == 0) throw "Infinite loop.";\n'; |
||
| 342 | var code = Blockly.JavaScript.workspaceToCode(workspace); |
||
| 343 | Blockly.JavaScript.INFINITE_LOOP_TRAP = null; |
||
| 344 | try { |
||
| 345 | eval(code); |
||
| 346 | } catch (e) { |
||
| 347 | alert(e); |
||
| 348 | } |
||
| 349 | } |
||
| 350 | |||
| 351 | |||
| 352 | </script> |
||
| 353 | |||
| 354 | </head> |
||
| 355 | <body> |
||
| 268 | f9daq | 356 | <h1>Belle II Masterclass: Describe process →Run analysis →Fit results →Save/load process locally</h1> |
| 193 | f9daq | 357 | <!-- <input type="button" onclick="showCode();" class="mybutton" value="Show JavaScript" /> --> |
| 302 | f9daq | 358 | <input type="button" id="btnstart" onclick="startAction();" class="mybutton" value="Run Analysis" /> |
| 359 | |||
| 193 | f9daq | 360 | <input type="button" onclick="saveBlockly();" class="mybutton" value="Save Diagram" /> |
| 361 | <form style="display:inline;"><label for="file-input" class="mybutton" style="">Load Diagram</label> |
||
| 324 | f9daq | 362 | <input type="button" id="btndebug" onclick="showDebug();" class="mybutton" value="Hide Text" /> |
| 363 | <input type="button" id="btnhelp" onclick="window.location.href='BelleIILabManual.pdf';" class="mybutton" value="Help" /> |
||
| 364 | <input type="button" id="btnabout" onclick="showLicense();" class="mybutton" value="About" /> |
||
| 268 | f9daq | 365 | <input type="file" style="visibility:hidden;" id="file-input" onClick="this.form.reset()" data-buttonText="Load Diagram"/></form> |
| 366 | <br/> |
||
| 193 | f9daq | 367 | <progress id='progressor' value="0" max='100' style="width:95%"></progress> |
| 368 | <span id="percentage" style="text-align:right; display:block; margin-top:5px;">0</span> |
||
| 369 | <p id="sbar" ></div> |
||
| 370 | |||
| 371 | <br /> |
||
| 372 | |||
| 373 | <div id="results" style="border:1px solid #000; padding:10px; width:95%; height:80% ; overflow:auto; background:#eee;"></div> |
||
| 374 | <br /> |
||
| 324 | f9daq | 375 | <div id="blocklyDiv" style="height:900px; width:95%"></div><br /> |
| 193 | f9daq | 376 | |
| 377 | <script> |
||
| 378 | |||
| 379 | document.getElementById('file-input').addEventListener('change', readSingleFile, false); |
||
| 380 | |||
| 381 | var toolbox = loadDoc("toolbox.xml"); |
||
| 382 | |||
| 383 | var options = { |
||
| 384 | toolbox : toolbox, |
||
| 385 | collapse : true, |
||
| 386 | comments : true, |
||
| 387 | disable : true, |
||
| 388 | maxBlocks : Infinity, |
||
| 389 | trashcan : true, |
||
| 390 | horizontalLayout : false, |
||
| 391 | toolboxPosition : 'start', |
||
| 392 | css : true, |
||
| 393 | /* media : '../media/', */ |
||
| 394 | rtl : false, |
||
| 395 | scrollbars : true, |
||
| 396 | sounds : true, |
||
| 397 | oneBasedIndex : true, |
||
| 398 | zoom : { |
||
| 399 | controls : true, |
||
| 400 | wheel : true, |
||
| 401 | startScale : 1, |
||
| 402 | maxcale : 3, |
||
| 403 | minScale : 0.3 |
||
| 404 | }, |
||
| 405 | grid: |
||
| 406 | {spacing: 20, |
||
| 407 | length: 3, |
||
| 408 | colour: '#ccc', |
||
| 409 | snap: true} |
||
| 410 | }; |
||
| 411 | |||
| 412 | var workspace = Blockly.inject('blocklyDiv', options); |
||
| 413 | |||
| 414 | <?php |
||
| 415 | |||
| 416 | if (isset($_GET["decay"])){ |
||
| 417 | $decay = $_GET["decay"]; |
||
| 418 | } else { |
||
| 419 | $decay = "data/sample.blab2"; |
||
| 420 | } |
||
| 421 | // echo "var workspaceBlocks = loadDoc( \"$decay\");" |
||
| 422 | /* Load blocks to workspace. */ |
||
| 423 | echo "displayContents( loadDoc( \"$decay\"));" |
||
| 424 | |||
| 425 | ?> |
||
| 426 | |||
| 427 | //displayContents(workspaceBlocks); |
||
| 318 | f9daq | 428 | </script> |
| 429 | <div id="drawing"></div> |
||
| 430 | <?php |
||
| 431 | $hostname = gethostname(); |
||
| 432 | if ($hostname != "belle2.ijs.si") { |
||
| 433 | echo "<a href='update.php'>Update code from the central server</a>"; |
||
| 434 | } |
||
| 435 | ?> |
||
| 193 | f9daq | 436 | </body> |
| 437 | </html> |