Subversion Repositories f9daq

Rev

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','&nbsp;<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 &rarr;Analyse &rarr;Fit results &rarr;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
        &nbsp;&nbsp;&nbsp;<input type="button" id="btnhelp" onclick="window.location.href='BelleIILabManual.pdf';"  class="mybutton"  value="Help" />
412
        &nbsp;&nbsp;&nbsp;<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>