Subversion Repositories f9daq

Rev

Rev 302 | 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');
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 &rarr;Run analysis &rarr;Fit results &rarr;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>