Subversion Repositories f9daq

Rev

Rev 268 | Rev 270 | 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/>';
269 f9daq 79
        mtext +='<table border="0" width="50%" >';
268 f9daq 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" />';
269 f9daq 170
mform += '  max:<input type="text" size="2"  value="20"   name="max" />';
268 f9daq 171
mform += '  Function:<input type="text"  size="5"  value="gaus"    name="fitfun" />';
269 f9daq 172
mform += '  Initial parameters<input type="text" size="5" value=""    name="prm" />';
268 f9daq 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>';
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);
268 f9daq 183
 
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();
202
    addLog('Interrupted');
203
}
204
 
205
 
268 f9daq 206
/*
193 f9daq 207
    function switchTask() {
208
    var div  = document.getElementById('results');
209
    var divs  = document.getElementById('sbar');
210
    var div0 = document.getElementById('blocklyDiv');
211
 
212
    if (div.style.display !== 'none') {
213
        div.style.display = 'none';
214
        divs.style.display = 'none';
215
        div0.style.display = 'block';
216
    }
217
    else {
218
        div.style.display = 'block';
219
        divs.style.display = 'block';
220
        div0.style.display = 'none';
221
    }
222
 
223
  }
268 f9daq 224
*/
193 f9daq 225
 
226
 
268 f9daq 227
function togglevisibility( name ) {
228
    var div  = document.getElementById(name);
229
    if (div.style.display !== 'none') {
230
        div.style.display = 'none';
231
    }
232
    else {
233
        div.style.display = 'block';
234
    }
235
}
236
 
237
 
193 f9daq 238
function readSingleFile(e) {
239
 
240
  var div0 = document.getElementById('blocklyDiv');
268 f9daq 241
  //if (div0.style.display === 'none') switchTask();
193 f9daq 242
 
243
  var file = e.target.files[0];
244
  if (!file) {
245
   return;
246
  }
247
  var reader = new FileReader();
248
  reader.onload = function(e) {
249
    var contents = e.target.result;
250
    displayContents(contents);
251
 
252
  };
253
  reader.readAsText(file);
254
 
255
}
256
 
257
function displayContents(contents) {
258
 
259
workspace.clear();
260
var xml = Blockly.Xml.textToDom(contents);
261
Blockly.Xml.domToWorkspace(xml, workspace);
262
 
263
}
264
 
265
 
266
function loadDoc( url ) {
267
  var xhttp = new XMLHttpRequest();
268
  xhttp.onreadystatechange = function () {
269
     if (xhttp.readyState == 4 && xhttp.status == 200) {
270
        return xhttp.responseText;
271
     }
272
  }
273
  xhttp.open("GET", url, false); // !!! should be in synchronous mode 
274
  xhttp.send();
275
  return xhttp.onreadystatechange();
276
}
277
 
278
 function showCode() {
279
      // Generate JavaScript code and display it.
280
      Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
281
      var code = Blockly.JavaScript.workspaceToCode(workspace);
282
          //var code = Blockly.JSON.fromWorkspace( workspace ); 
283
          //var code =  Blockly.Xml.domToPrettyText(workspace );
284
      code = code.replace(/\(|\)/gi, '');
285
      console.log(code);
286
      console.log(code.length);  
287
      alert(code);
288
 
289
  }
290
 
291
 
292
  function saveBlockly(){
293
    //  https://eligrey.com/blog/saving-generated-files-on-the-client-side/
294
 
295
    var xml = Blockly.Xml.workspaceToDom(workspace);
296
    var txt = Blockly.Xml.domToText(xml);
297
 
298
//  var txt=Blockly.Xml.domToPrettyText(Blockly.Xml.workspaceToDom(Blockly.mainWorkspace)); // exports workspace as pretty xml
299
  console.log(txt);
300
  var blob = new Blob([txt], {type: "text/xml"});
301
  saveAs(blob, "test.blab2");
302
  }
303
 
304
  function loadBlockly(){
305
    Blockly.Xml.domToWorkspace(Blockly.mainWorkspace,$("#hiBlocks")[0]); // loads xml from dom into workspace  
306
  }
307
 
308
    function runCode() {
309
      // Generate JavaScript code and run it.
310
      window.LoopTrap = 1000;
311
      Blockly.JavaScript.INFINITE_LOOP_TRAP =
312
          'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
313
      var code = Blockly.JavaScript.workspaceToCode(workspace);
314
      Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
315
      try {
316
        eval(code);
317
      } catch (e) {
318
        alert(e);
319
      }
320
    }
321
 
322
 
323
  </script>
324
 
325
</head>
326
<body>
268 f9daq 327
  <h1>Belle II Masterclass: Describe process &rarr;Run analysis &rarr;Fit results &rarr;Save/load process locally</h1>
193 f9daq 328
<!--        <input type="button" onclick="showCode();"  class="mybutton" value="Show JavaScript" /> -->
329
        <input type="button" onclick="startTask();"  class="mybutton" value="Run Analysis" />
330
        <input type="button" onclick="stopTask();"  class="mybutton" value="Interrupt" />
268 f9daq 331
<!--         <input type="button" onclick="switchTask();"  class="mybutton" value="Switch between Diagram and Results" /> -->
193 f9daq 332
        <input type="button" onclick="saveBlockly();"  class="mybutton" value="Save Diagram" />
333
        <form style="display:inline;"><label for="file-input" class="mybutton" style="">Load Diagram</label>
268 f9daq 334
        <input type="file" style="visibility:hidden;" id="file-input" onClick="this.form.reset()" data-buttonText="Load Diagram"/></form>
335
        <br/>
193 f9daq 336
        <progress id='progressor' value="0" max='100' style="width:95%"></progress>  
337
        <span id="percentage" style="text-align:right; display:block; margin-top:5px;">0</span>
338
        <p id="sbar" ></div>     
339
 
340
        <br />
341
 
342
 <div id="blocklyDiv" style="height:500px; width:95%"></div><br />
343
 <div id="results" style="border:1px solid #000; padding:10px; width:95%; height:80% ; overflow:auto; background:#eee;"></div>
344
  <br />
345
 
346
  <script>
347
 
348
    document.getElementById('file-input').addEventListener('change', readSingleFile, false);
349
 
350
//  var toolbox = document.getElementById("toolbox");
351
  var toolbox = loadDoc("toolbox.xml");
352
 
353
var options = {
354
        toolbox : toolbox,
355
        collapse : true,
356
        comments : true,
357
        disable : true,
358
        maxBlocks : Infinity,
359
        trashcan : true,
360
        horizontalLayout : false,
361
        toolboxPosition : 'start',
362
        css : true,
363
/*      media : '../media/', */
364
        rtl : false,
365
        scrollbars : true,
366
        sounds : true,
367
        oneBasedIndex : true,
368
        zoom : {
369
                controls : true,
370
                wheel : true,
371
                startScale : 1,
372
                maxcale : 3,
373
                minScale : 0.3
374
  },
375
  grid:
376
  {spacing: 20,
377
  length: 3,
378
  colour: '#ccc',
379
  snap: true}
380
};
381
 
382
/* Inject your workspace */
383
var workspace = Blockly.inject('blocklyDiv', options);
384
 
385
/* Load Workspace Blocks from XML to workspace. Remove all code below if no blocks to load */
386
 
387
/* TODO: Change workspace blocks XML ID if necessary. Can export workspace blocks XML from Workspace Factory. */
388
//var workspaceBlocks = document.getElementById("workspaceBlocks"); 
389
/* Load blocks to workspace. */
390
//    Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);
391
 
392
<?php
393
 
394
 if (isset($_GET["decay"])){
395
   $decay =  $_GET["decay"];
396
 } else  {
397
   $decay = "data/sample.blab2";
398
 }
399
// echo "var workspaceBlocks = loadDoc( \"$decay\");"
400
/* Load blocks to workspace. */
401
 echo "displayContents( loadDoc( \"$decay\"));"
402
 
403
?>
404
 
405
//displayContents(workspaceBlocks);
406
 
407
 
408
 
409
</script>
268 f9daq 410
<div id="drawing"></div>
193 f9daq 411
</body>
412
</html>