Subversion Repositories f9daq

Rev

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