Subversion Repositories f9daq

Rev

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