Subversion Repositories f9daq

Rev

Rev 302 | Rev 324 | Go to most recent revision | Only display areas with differences | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed

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