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 →Run analysis →Fit results →Save/load process locally</h1> |
331 | <h1>Belle II Masterclass: Describe process →Run analysis →Fit results →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 |