Subversion Repositories f9daq

Rev

Rev 266 | Rev 268 | 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> -->
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) {
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"});
55
        var r = document.getElementById('results');
56
        r.style.display = 'none';
57
        var r0 = document.getElementById('sbar');
58
        r0.style.display = 'none';
59
 
60
}
61
 
62
 
63
var cnt=0;
64
function startTask() {
65
 
66
        var r = document.getElementById('results');
67
        if ( r.style.display == 'none' ) switchTask();
68
        r.innerHTML = '';
266 f9daq 69
        document.getElementById('drawing').innerHTML = '';
193 f9daq 70
 
71
 
72
        Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
73
        var code = Blockly.JavaScript.workspaceToCode(workspace);
74
            code = code.replace(/\(|\)/gi, '');
75
 
76
        addLog(code + '<br>');
77
       //addLog(JSON.stringify(code)+ '<br>');
78
        es = new EventSource('runscript.php?code='  + code  );
79
 
80
       //a message is received
81
        es.addEventListener('message',EventListener);      
82
        es.addEventListener('error', function(e) {
83
        addLog('Error occurred');
84
        es.close();
85
    });
86
}
87
 
88
function EventListener(e) {
89
var result = JSON.parse( e.data );
90
 
91
        if(e.lastEventId == 'CLOSE') {
92
            addLog('Received CLOSE closing');
93
            es.close();
94
            var pBar = document.getElementById('progressor');
95
            pBar.value = pBar.max; //max out the progress bar
96
            var perc = document.getElementById('percentage');
97
            perc.innerHTML   =  "100%";
98
            perc.style.width = (Math.floor(pBar.clientWidth * (0.5)) + 15) + 'px';
99
        }   else {
100
            if(e.lastEventId == '0' ) {
101
              addLog(result.message);
102
            } else {
103
              if(e.lastEventId == '2' ) {
104
                showStat(result.message);
105
              } else {
106
                var jsonobj = JSROOT.parse(result.message);
107
                var sframe = 'rh'+ (cnt++);
108
                addLog('ROOT_JSON object '+ sframe );
266 f9daq 109
                //var r = document.getElementById('results');
110
                var r = document.getElementById('drawing');
111
                r.insertAdjacentHTML('beforeend', '<div id="' + sframe +'" style="width:60%; height:60%;"></div><br/>');
193 f9daq 112
 
113
                var frame = document.getElementById(sframe);
266 f9daq 114
                //JSROOT.draw(frame, jsonobj, "hist");
115
                JSROOT.draw(sframe, jsonobj, "hist");
116
                //addLog('JSON :' + JSON.stringify(jsonobj)+ '<br>');
117
 
193 f9daq 118
                frame.scrollIntoView();
119
              }
120
            }
121
            var pBar = document.getElementById('progressor');
122
            pBar.value = result.progress;
123
            var perc = document.getElementById('percentage');
124
            perc.innerHTML   = result.progress  + "%";
125
            perc.style.width = (Math.floor(pBar.clientWidth * (result.progress/100)) + 15) + 'px';
126
        }
127
}
128
 
129
 
130
 
131
function stopTask() {
132
    es.close();
133
    addLog('Interrupted');
134
}
135
 
136
 
137
 
138
    function switchTask() {
139
    var div  = document.getElementById('results');
140
    var divs  = document.getElementById('sbar');
141
    var div0 = document.getElementById('blocklyDiv');
142
 
143
    if (div.style.display !== 'none') {
144
        div.style.display = 'none';
145
        divs.style.display = 'none';
146
        div0.style.display = 'block';
147
    }
148
    else {
149
        div.style.display = 'block';
150
        divs.style.display = 'block';
151
        div0.style.display = 'none';
152
    }
153
 
154
  }
155
 
156
 
157
function readSingleFile(e) {
158
 
159
  var div0 = document.getElementById('blocklyDiv');
160
  if (div0.style.display === 'none') switchTask();
161
 
162
  var file = e.target.files[0];
163
  if (!file) {
164
   return;
165
  }
166
  var reader = new FileReader();
167
  reader.onload = function(e) {
168
    var contents = e.target.result;
169
    displayContents(contents);
170
 
171
  };
172
  reader.readAsText(file);
173
 
174
}
175
 
176
function displayContents(contents) {
177
 
178
workspace.clear();
179
var xml = Blockly.Xml.textToDom(contents);
180
Blockly.Xml.domToWorkspace(xml, workspace);
181
 
182
}
183
 
184
 
185
function loadDoc( url ) {
186
  var xhttp = new XMLHttpRequest();
187
  xhttp.onreadystatechange = function () {
188
     if (xhttp.readyState == 4 && xhttp.status == 200) {
189
        return xhttp.responseText;
190
     }
191
  }
192
  xhttp.open("GET", url, false); // !!! should be in synchronous mode 
193
  xhttp.send();
194
  return xhttp.onreadystatechange();
195
}
196
 
197
 function showCode() {
198
      // Generate JavaScript code and display it.
199
      Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
200
      var code = Blockly.JavaScript.workspaceToCode(workspace);
201
          //var code = Blockly.JSON.fromWorkspace( workspace ); 
202
          //var code =  Blockly.Xml.domToPrettyText(workspace );
203
      code = code.replace(/\(|\)/gi, '');
204
      console.log(code);
205
      console.log(code.length);  
206
      alert(code);
207
 
208
  }
209
 
210
 
211
  function saveBlockly(){
212
    //  https://eligrey.com/blog/saving-generated-files-on-the-client-side/
213
 
214
    var xml = Blockly.Xml.workspaceToDom(workspace);
215
    var txt = Blockly.Xml.domToText(xml);
216
 
217
//  var txt=Blockly.Xml.domToPrettyText(Blockly.Xml.workspaceToDom(Blockly.mainWorkspace)); // exports workspace as pretty xml
218
  console.log(txt);
219
  var blob = new Blob([txt], {type: "text/xml"});
220
  saveAs(blob, "test.blab2");
221
  }
222
 
223
  function loadBlockly(){
224
    Blockly.Xml.domToWorkspace(Blockly.mainWorkspace,$("#hiBlocks")[0]); // loads xml from dom into workspace  
225
  }
226
 
227
    function runCode() {
228
      // Generate JavaScript code and run it.
229
      window.LoopTrap = 1000;
230
      Blockly.JavaScript.INFINITE_LOOP_TRAP =
231
          'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
232
      var code = Blockly.JavaScript.workspaceToCode(workspace);
233
      Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
234
      try {
235
        eval(code);
236
      } catch (e) {
237
        alert(e);
238
      }
239
    }
240
 
241
 
242
 
243
 
244
 
245
 
246
  </script>
247
 
248
</head>
249
<body>
250
  <h1>Belle II Masterclass: Define process &rarr;Analyse data &rarr;Visualise results &rarr;Save/load process locally</h1>
251
<!--        <input type="button" onclick="showCode();"  class="mybutton" value="Show JavaScript" /> -->
252
        <input type="button" onclick="startTask();"  class="mybutton" value="Run Analysis" />
253
        <input type="button" onclick="stopTask();"  class="mybutton" value="Interrupt" />
254
        <input type="button" onclick="switchTask();"  class="mybutton" value="Switch between Diagram and Results" />
255
        <input type="button" onclick="saveBlockly();"  class="mybutton" value="Save Diagram" />
256
        <form style="display:inline;"><label for="file-input" class="mybutton" style="">Load Diagram</label>
257
          <input type="file" style="visibility:hidden;" id="file-input" onClick="this.form.reset()" data-buttonText="Load Diagram"/></form>
258
        <br />
259
 
260
 
261
 
262
        <progress id='progressor' value="0" max='100' style="width:95%"></progress>  
263
        <span id="percentage" style="text-align:right; display:block; margin-top:5px;">0</span>
264
        <p id="sbar" ></div>     
265
 
266
 
267
        <br />
268
 
269
 <div id="blocklyDiv" style="height:500px; width:95%"></div><br />
270
 <div id="results" style="border:1px solid #000; padding:10px; width:95%; height:80% ; overflow:auto; background:#eee;"></div>
271
  <br />
272
 
273
  <script>
274
 
275
    document.getElementById('file-input').addEventListener('change', readSingleFile, false);
276
 
277
//  var toolbox = document.getElementById("toolbox");
278
  var toolbox = loadDoc("toolbox.xml");
279
 
280
var options = {
281
        toolbox : toolbox,
282
        collapse : true,
283
        comments : true,
284
        disable : true,
285
        maxBlocks : Infinity,
286
        trashcan : true,
287
        horizontalLayout : false,
288
        toolboxPosition : 'start',
289
        css : true,
290
/*      media : '../media/', */
291
        rtl : false,
292
        scrollbars : true,
293
        sounds : true,
294
        oneBasedIndex : true,
295
        zoom : {
296
                controls : true,
297
                wheel : true,
298
                startScale : 1,
299
                maxcale : 3,
300
                minScale : 0.3
301
  },
302
  grid:
303
  {spacing: 20,
304
  length: 3,
305
  colour: '#ccc',
306
  snap: true}
307
};
308
 
309
/* Inject your workspace */
310
var workspace = Blockly.inject('blocklyDiv', options);
311
 
312
/* Load Workspace Blocks from XML to workspace. Remove all code below if no blocks to load */
313
 
314
/* TODO: Change workspace blocks XML ID if necessary. Can export workspace blocks XML from Workspace Factory. */
315
//var workspaceBlocks = document.getElementById("workspaceBlocks"); 
316
/* Load blocks to workspace. */
317
//    Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);
318
 
319
<?php
320
 
321
 if (isset($_GET["decay"])){
322
   $decay =  $_GET["decay"];
323
 } else  {
324
   $decay = "data/sample.blab2";
325
 }
326
// echo "var workspaceBlocks = loadDoc( \"$decay\");"
327
/* Load blocks to workspace. */
328
 echo "displayContents( loadDoc( \"$decay\"));"
329
 
330
?>
331
 
332
//displayContents(workspaceBlocks);
333
 
334
 
335
 
336
</script>
266 f9daq 337
<div id="drawing" style="width:800px; height:600px"></div>
193 f9daq 338
</body>
339
</html>