Subversion Repositories f9daq

Rev

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