Subversion Repositories f9daq

Rev

Rev 267 | Rev 269 | Go to most recent revision | Show entire file | Regard 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?2d&onload=startGUI"></script>  
 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 
        var r = document.getElementById('results');
 55 
//        var r = document.getElementById('results');
56 
        r.style.display = 'none';
 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 
 
- 
 
 60 
}
- 
 
 61 
 
- 
 
 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/>';
- 
 
 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);
59 
 
 103 
 
- 
 
 104 
  var data = new FormData (oFormElement);  
- 
 
 105 
  xhr.send (data);
- 
 
 106 
 
- 
 
 107 
  return false; // Markus had to return true
60 
}
 108 
}
61 
 
 109 
 
62 
 
 110 
 
63 
var cnt=0;
 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 84... Line 132...
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();
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 = 'rh'+ (cnt++);
 157 
                var sframe = jsonobj.fName;
108 
                addLog('ROOT_JSON object '+ sframe );
 - 
 
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/>');
 - 
 
112 
             
 158 
               
- 
 
 159 
       
- 
 
 160 
                addLog('Histogram :'+ sframe );
- 
 
 161 
                var r = document.getElementById('results');
- 
 
 162 
                //var r = document.getElementById('drawing');
- 
 
 163 
                if (document.getElementById(sframe) == null ){
- 
 
 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));
- 
 
 182 
                }
113 
                var frame = document.getElementById(sframe);
 183 
                var frame = document.getElementById(sframe);
114 
                //JSROOT.draw(frame, jsonobj, "hist");
 184 
         
115 
                JSROOT.draw(sframe, jsonobj, "hist");
 185 
                JSROOT.redraw(sframe, jsonobj, "hist");
116 
                //addLog('JSON :' + JSON.stringify(jsonobj)+ '<br>');
 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');
122 
            pBar.value = result.progress;
 192 
            pBar.value = result.progress;
123 
            var perc = document.getElementById('percentage');
 193 
            var perc = document.getElementById('percentage');
124 
            perc.innerHTML   = result.progress  + "%";
 194 
            perc.innerHTML   = result.progress  + "%";
125 
            perc.style.width = (Math.floor(pBar.clientWidth * (result.progress/100)) + 15) + 'px';
 195 
            perc.style.width = (Math.floor(pBar.clientWidth * (result.progress/100)) + 15) + 'px';
126 
        }
 196 
        }
127 
}
 197 
}
128 
 
 198 
 
129 
 
 199 
 
130 
 
 200 
 
131 
function stopTask() {
 201 
function stopTask() {
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 
    if (div.style.display !== 'none') {
 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';
- 
 
 217 
    }
- 
 
 218 
    else {
- 
 
 219 
        div.style.display = 'block';
- 
 
 220 
        divs.style.display = 'block';
- 
 
 221 
        div0.style.display = 'none';
- 
 
 222 
    }
- 
 
 223 
 
- 
 
 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';
147 
    }
 232 
    }
148 
    else {
 233 
    else {
149 
        div.style.display = 'block';
 234 
        div.style.display = 'block';
150 
        divs.style.display = 'block';
 - 
 
151 
        div0.style.display = 'none';
 - 
 
152 
    }
 235 
    }
153 
 
 - 
 
154 
  }
 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 
  if (div0.style.display === 'none') switchTask();
 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 208... Line 290...
208 
  }
 290 
  }
209 
 
 291 
 
210 
 
 292 
 
211 
  function saveBlockly(){
 293 
  function saveBlockly(){
212 
    //  https://eligrey.com/blog/saving-generated-files-on-the-client-side/
 294 
    //  https://eligrey.com/blog/saving-generated-files-on-the-client-side/
213 
 
 295 
 
214 
    var xml = Blockly.Xml.workspaceToDom(workspace);
 296 
    var xml = Blockly.Xml.workspaceToDom(workspace);
215 
    var txt = Blockly.Xml.domToText(xml);
 297 
    var txt = Blockly.Xml.domToText(xml);
216 
   
 298 
   
217 
//  var txt=Blockly.Xml.domToPrettyText(Blockly.Xml.workspaceToDom(Blockly.mainWorkspace)); // exports workspace as pretty xml
 299 
//  var txt=Blockly.Xml.domToPrettyText(Blockly.Xml.workspaceToDom(Blockly.mainWorkspace)); // exports workspace as pretty xml
218 
  console.log(txt);
 300 
  console.log(txt);
Line 234... Line 316...
234 
      try {
 316 
      try {
235 
        eval(code);
 317 
        eval(code);
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: Define process &rarr;Analyse data &rarr;Visualise results &rarr;Save/load process locally</h1>
 328 
  <h1>Belle II Masterclass: Describe process &rarr;Run analysis &rarr;Fit results &rarr;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 
        <input type="button" onclick="switchTask();"  class="mybutton" value="Switch between Diagram and Results" />
 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 
          <input type="file" style="visibility:hidden;" id="file-input" onClick="this.form.reset()" data-buttonText="Load Diagram"/></form>
 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 
 
 - 
 
266 
 
 340 
 
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>
Line 332... Line 406...
332 
//displayContents(workspaceBlocks);
 406 
//displayContents(workspaceBlocks);
333 
   
 407 
   
334 
 
 408 
 
335 
 
 409 
 
336 
</script>
 410 
</script>
337 
<div id="drawing" style="width:800px; height:600px"></div>
 411 
<div id="drawing"></div>
338 
</body>
 412 
</body>
339 
</html>
 413 
</html>