Rev 267 | Rev 269 | Go to most recent revision | Show entire file | Ignore whitespace | Details | Blame | Last modification | View Log | RSS feed
Rev 267 | Rev 268 | ||
---|---|---|---|
Line 29... | Line 29... | ||
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? |
34 | <script type="text/javascript" src="https://root.cern/js/latest/scripts/JSRootCore.js?more2d&math&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'); |
Line 50... | Line 50... | ||
50 | 50 | ||
51 | 51 | ||
52 | function startGUI() { |
52 | function startGUI() { |
53 | // d3.select('html').style('height','100%'); |
53 | // d3.select('html').style('height','100%'); |
54 | // d3.select('body').style({'min-height':'100%', 'margin':'0px', "overflow" :"hidden"}); |
54 | // d3.select('body').style({'min-height':'100%', 'margin':'0px', "overflow" :"hidden"}); |
55 |
|
55 | // var r = document.getElementById('results'); |
56 |
|
56 | // r.style.display = 'none'; |
57 | var r0 = document.getElementById('sbar'); |
57 | var r0 = document.getElementById('sbar'); |
58 | r0.style.display = 'none'; |
58 | r0.style.display = 'none'; |
59 | 59 | ||
60 | } |
60 | } |
61 | 61 | ||
62 | 62 | ||
- | 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/>'; |
|
- | 79 | mtext +='<table border="0" >'; |
|
- | 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/>'; |
|
63 |
|
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 | ||
64 | function startTask() { |
112 | function startTask() { |
65 | 113 | ||
66 | var r = document.getElementById('results'); |
114 | var r = document.getElementById('results'); |
67 | if ( r.style.display == 'none' ) switchTask(); |
115 | if ( r.style.display == 'none' ) switchTask(); |
68 | r.innerHTML = ''; |
116 | r.innerHTML = ''; |
Line 81... | Line 129... | ||
81 | es.addEventListener('message',EventListener); |
129 | es.addEventListener('message',EventListener); |
82 | es.addEventListener('error', function(e) { |
130 | es.addEventListener('error', function(e) { |
83 | addLog('Error occurred'); |
131 | addLog('Error occurred'); |
84 | es.close(); |
132 | es.close(); |
85 | }); |
133 | }); |
86 | } |
134 | } |
87 | 135 | ||
88 | function EventListener(e) { |
136 | function EventListener(e) { |
- | 137 | //addLog(JSON.stringify(e) ); |
|
- | 138 | ||
89 | var result = JSON.parse( e.data ); |
139 | var result = JSON.parse( e.data ); |
90 | 140 | ||
91 | if(e.lastEventId == 'CLOSE') { |
141 | if(e.lastEventId == 'CLOSE') { |
92 | addLog('Received CLOSE closing'); |
142 | addLog('Received CLOSE closing'); |
93 | es.close(); |
143 | es.close(); |
94 | var pBar = document.getElementById('progressor'); |
144 | var pBar = document.getElementById('progressor'); |
Line 102... | Line 152... | ||
102 | } else { |
152 | } else { |
103 | if(e.lastEventId == '2' ) { |
153 | if(e.lastEventId == '2' ) { |
104 | showStat(result.message); |
154 | showStat(result.message); |
105 | } else { |
155 | } else { |
106 | var jsonobj = JSROOT.parse(result.message); |
156 | var jsonobj = JSROOT.parse(result.message); |
107 | var sframe = |
157 | var sframe = jsonobj.fName; |
- | 158 | ||
- | 159 | ||
108 | addLog( |
160 | addLog('Histogram :'+ sframe ); |
109 |
|
161 | var r = document.getElementById('results'); |
110 |
|
162 | //var r = document.getElementById('drawing'); |
- | 163 | if (document.getElementById(sframe) == null ){ |
|
111 | r.insertAdjacentHTML('beforeend' |
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" />'; |
|
- | 170 | mform += ' max:<input type="text" size="2" value="10" name="max" />'; |
|
- | 171 | mform += ' Function:<input type="text" size="5" value="gaus" name="fitfun" />'; |
|
- | 172 | mform += ' Initial parameters<input type="text" size="5" value="1;2;3" name="prm" />'; |
|
- | 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>'; |
|
- | 176 | ||
- | 177 | fit.insertAdjacentHTML('beforeend', mform); |
|
- | 178 | fit.insertAdjacentHTML('beforeend', '<div id="param' + sframe +'"></div><br/>'); |
|
- | 179 | r.insertAdjacentHTML('beforeend','<input type="button" onclick="togglevisibility(\'fit'+sframe+'\');" class="mybutton" value="Show/Hide Fit Panel" /><hr/>' ); |
|
- | 180 | document.getElementById('data'+ sframe).value=result.message; |
|
- | 181 | //r.insertAdjacentHTML('beforeend', JSON.stringify(result.message)); |
|
112 | 182 | } |
|
113 | var frame = document.getElementById(sframe); |
183 | var frame = document.getElementById(sframe); |
114 |
|
184 | |
115 | JSROOT. |
185 | JSROOT.redraw(sframe, jsonobj, "hist"); |
116 |
|
186 | |
117 | 187 | ||
118 | frame.scrollIntoView(); |
188 | frame.scrollIntoView(); |
119 | } |
189 | } |
120 | } |
190 | } |
121 | var pBar = document.getElementById('progressor'); |
191 | var pBar = document.getElementById('progressor'); |
Line 132... | Line 202... | ||
132 | es.close(); |
202 | es.close(); |
133 | addLog('Interrupted'); |
203 | addLog('Interrupted'); |
134 | } |
204 | } |
135 | 205 | ||
136 | 206 | ||
137 | 207 | /* |
|
138 | function switchTask() { |
208 | function switchTask() { |
139 | var div = document.getElementById('results'); |
209 | var div = document.getElementById('results'); |
140 | var divs = document.getElementById('sbar'); |
210 | var divs = document.getElementById('sbar'); |
141 | var div0 = document.getElementById('blocklyDiv'); |
211 | var div0 = document.getElementById('blocklyDiv'); |
142 | 212 | ||
143 |
|
213 | if (div.style.display !== 'none') { |
144 | div.style.display = 'none'; |
214 | div.style.display = 'none'; |
145 | divs.style.display = 'none'; |
215 | divs.style.display = 'none'; |
146 | div0.style.display = 'block'; |
216 | div0.style.display = 'block'; |
147 |
|
217 | } |
148 |
|
218 | else { |
149 | div |
219 | div.style.display = 'block'; |
150 | divs.style.display = 'block'; |
220 | divs.style.display = 'block'; |
151 | div0.style.display = 'none'; |
221 | div0.style.display = 'none'; |
152 |
|
222 | } |
153 | 223 | ||
154 | } |
224 | } |
- | 225 | */ |
|
- | 226 | ||
- | 227 | ||
- | 228 | function togglevisibility( name ) { |
|
- | 229 | var div = document.getElementById(name); |
|
- | 230 | if (div.style.display !== 'none') { |
|
- | 231 | div.style.display = 'none'; |
|
- | 232 | } |
|
- | 233 | else { |
|
- | 234 | div.style.display = 'block'; |
|
- | 235 | } |
|
- | 236 | } |
|
155 | 237 | ||
156 | 238 | ||
157 | function readSingleFile(e) { |
239 | function readSingleFile(e) { |
158 | 240 | ||
159 | var div0 = document.getElementById('blocklyDiv'); |
241 | var div0 = document.getElementById('blocklyDiv'); |
160 |
|
242 | //if (div0.style.display === 'none') switchTask(); |
161 | 243 | ||
162 | var file = e.target.files[0]; |
244 | var file = e.target.files[0]; |
163 | if (!file) { |
245 | if (!file) { |
164 | return; |
246 | return; |
165 | } |
247 | } |
Line 236... | Line 318... | ||
236 | } catch (e) { |
318 | } catch (e) { |
237 | alert(e); |
319 | alert(e); |
238 | } |
320 | } |
239 | } |
321 | } |
240 | 322 | ||
241 | - | ||
242 | - | ||
243 | - | ||
244 | - | ||
245 | 323 | ||
246 | </script> |
324 | </script> |
247 | 325 | ||
248 | </head> |
326 | </head> |
249 | <body> |
327 | <body> |
250 | <h1>Belle II Masterclass: |
328 | <h1>Belle II Masterclass: Describe process →Run analysis →Fit results →Save/load process locally</h1> |
251 | <!-- <input type="button" onclick="showCode();" class="mybutton" value="Show JavaScript" /> --> |
329 | <!-- <input type="button" onclick="showCode();" class="mybutton" value="Show JavaScript" /> --> |
252 | <input type="button" onclick="startTask();" class="mybutton" value="Run Analysis" /> |
330 | <input type="button" onclick="startTask();" class="mybutton" value="Run Analysis" /> |
253 | <input type="button" onclick="stopTask();" class="mybutton" value="Interrupt" /> |
331 | <input type="button" onclick="stopTask();" class="mybutton" value="Interrupt" /> |
254 |
|
332 | <!-- <input type="button" onclick="switchTask();" class="mybutton" value="Switch between Diagram and Results" /> --> |
255 | <input type="button" onclick="saveBlockly();" class="mybutton" value="Save Diagram" /> |
333 | <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> |
334 | <form style="display:inline;"><label for="file-input" class="mybutton" style="">Load Diagram</label> |
257 |
|
335 | <input type="file" style="visibility:hidden;" id="file-input" onClick="this.form.reset()" data-buttonText="Load Diagram"/></form> |
258 | <br |
336 | <br/> |
259 | - | ||
260 | - | ||
261 | - | ||
262 | <progress id='progressor' value="0" max='100' style="width:95%"></progress> |
337 | <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> |
338 | <span id="percentage" style="text-align:right; display:block; margin-top:5px;">0</span> |
264 | <p id="sbar" ></div> |
339 | <p id="sbar" ></div> |
265 | 340 | ||
266 | - | ||
267 | <br /> |
341 | <br /> |
268 | 342 | ||
269 | <div id="blocklyDiv" style="height:500px; width:95%"></div><br /> |
343 | <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> |
344 | <div id="results" style="border:1px solid #000; padding:10px; width:95%; height:80% ; overflow:auto; background:#eee;"></div> |
271 | <br /> |
345 | <br /> |
Line 332... | Line 406... | ||
332 | //displayContents(workspaceBlocks); |
406 | //displayContents(workspaceBlocks); |
333 | 407 | ||
334 | 408 | ||
335 | 409 | ||
336 | </script> |
410 | </script> |
337 | <div id="drawing |
411 | <div id="drawing"></div> |
338 | </body> |
412 | </body> |
339 | </html> |
413 | </html> |