Subversion Repositories f9daq

Rev

Rev 267 | Rev 269 | Go to most recent revision | Blame | Compare with Previous | Last modification | View Log | RSS feed

  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.  
  16. <style>
  17. table {
  18.     border-collapse: collapse;
  19.     width: 100%;
  20. }
  21.  
  22. th, td {
  23.     padding: 0px;
  24.     text-align: right;
  25. }
  26.  
  27. tr:hover{background-color:#ffffff}
  28. </style>
  29.  
  30.   <script src="js/Blob.js"></script>
  31.  
  32.  
  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?more2d&math&onload=startGUI"></script>        
  35.   <script type = "text/javascript"      language = "javascript">
  36.                  
  37. var es;
  38. function addLog(message) {
  39.     var r = document.getElementById('results');
  40.    //r.innerHTML += message + '<br>';
  41.    r.insertAdjacentHTML('beforeend', message +'<br/>');
  42.   // r.scrollTop = r.scrollHeight;
  43. }
  44.  
  45. function showStat(message) {
  46.     var r = document.getElementById('sbar');
  47.     r.innerHTML = message ;
  48. }
  49.  
  50.  
  51.  
  52. function startGUI() {
  53.         // d3.select('html').style('height','100%');
  54.         // d3.select('body').style({'min-height':'100%', 'margin':'0px', "overflow" :"hidden"});
  55. //        var r = document.getElementById('results');
  56. //        r.style.display = 'none';
  57.         var r0 = document.getElementById('sbar');
  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);
  103.  
  104.   var data = new FormData (oFormElement);  
  105.   xhr.send (data);
  106.  
  107.   return false; // Markus had to return true
  108. }
  109.  
  110.  
  111.  
  112. function startTask() {
  113.        
  114.         var r = document.getElementById('results');
  115.         if ( r.style.display == 'none' ) switchTask();
  116.         r.innerHTML = '';
  117.         document.getElementById('drawing').innerHTML = '';
  118.  
  119.  
  120.         Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
  121.         var code = Blockly.JavaScript.workspaceToCode(workspace);
  122.             code = code.replace(/\(|\)/gi, '');
  123.                
  124.         addLog(code + '<br>');
  125.        //addLog(JSON.stringify(code)+ '<br>');
  126.         es = new EventSource('runscript.php?code='  + code  );
  127.          
  128.        //a message is received
  129.         es.addEventListener('message',EventListener);      
  130.         es.addEventListener('error', function(e) {
  131.         addLog('Error occurred');
  132.         es.close();
  133.     });
  134. }
  135.  
  136. function EventListener(e) {
  137. //addLog(JSON.stringify(e) );
  138.  
  139. var result = JSON.parse( e.data );
  140.  
  141.         if(e.lastEventId == 'CLOSE') {
  142.             addLog('Received CLOSE closing');
  143.             es.close();
  144.             var pBar = document.getElementById('progressor');
  145.             pBar.value = pBar.max; //max out the progress bar
  146.             var perc = document.getElementById('percentage');
  147.             perc.innerHTML   =  "100%";
  148.             perc.style.width = (Math.floor(pBar.clientWidth * (0.5)) + 15) + 'px';
  149.         }   else {
  150.             if(e.lastEventId == '0' ) {
  151.               addLog(result.message);
  152.             } else {
  153.               if(e.lastEventId == '2' ) {
  154.                 showStat(result.message);
  155.               } else {
  156.                 var jsonobj = JSROOT.parse(result.message);
  157.                 var sframe = jsonobj.fName;
  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.                 }
  183.                 var frame = document.getElementById(sframe);
  184.          
  185.                 JSROOT.redraw(sframe, jsonobj, "hist");
  186.                
  187.  
  188.                 frame.scrollIntoView();
  189.               }
  190.             }
  191.             var pBar = document.getElementById('progressor');
  192.             pBar.value = result.progress;
  193.             var perc = document.getElementById('percentage');
  194.             perc.innerHTML   = result.progress  + "%";
  195.             perc.style.width = (Math.floor(pBar.clientWidth * (result.progress/100)) + 15) + 'px';
  196.         }
  197. }
  198.  
  199.  
  200.  
  201. function stopTask() {
  202.     es.close();
  203.     addLog('Interrupted');
  204. }
  205.  
  206.        
  207. /*
  208.     function switchTask() {
  209.     var div  = document.getElementById('results');
  210.     var divs  = document.getElementById('sbar');
  211.     var div0 = document.getElementById('blocklyDiv');
  212.  
  213.     if (div.style.display !== 'none') {
  214.         div.style.display = 'none';
  215.         divs.style.display = 'none';
  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';
  232.     }
  233.     else {
  234.         div.style.display = 'block';
  235.     }
  236. }
  237.  
  238.  
  239. function readSingleFile(e) {
  240.  
  241.   var div0 = document.getElementById('blocklyDiv');
  242.   //if (div0.style.display === 'none') switchTask();
  243.  
  244.   var file = e.target.files[0];
  245.   if (!file) {
  246.    return;
  247.   }
  248.   var reader = new FileReader();
  249.   reader.onload = function(e) {
  250.     var contents = e.target.result;
  251.     displayContents(contents);
  252.  
  253.   };
  254.   reader.readAsText(file);
  255.  
  256. }
  257.  
  258. function displayContents(contents) {
  259.  
  260. workspace.clear();
  261. var xml = Blockly.Xml.textToDom(contents);
  262. Blockly.Xml.domToWorkspace(xml, workspace);
  263.  
  264. }
  265.  
  266.  
  267. function loadDoc( url ) {
  268.   var xhttp = new XMLHttpRequest();
  269.   xhttp.onreadystatechange = function () {
  270.      if (xhttp.readyState == 4 && xhttp.status == 200) {
  271.         return xhttp.responseText;
  272.      }
  273.   }
  274.   xhttp.open("GET", url, false); // !!! should be in synchronous mode
  275.   xhttp.send();
  276.   return xhttp.onreadystatechange();
  277. }
  278.  
  279.  function showCode() {
  280.       // Generate JavaScript code and display it.
  281.       Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
  282.       var code = Blockly.JavaScript.workspaceToCode(workspace);
  283.           //var code = Blockly.JSON.fromWorkspace( workspace );
  284.           //var code =  Blockly.Xml.domToPrettyText(workspace );
  285.       code = code.replace(/\(|\)/gi, '');
  286.       console.log(code);
  287.       console.log(code.length);  
  288.       alert(code);
  289.  
  290.   }
  291.  
  292.  
  293.   function saveBlockly(){
  294.     //  https://eligrey.com/blog/saving-generated-files-on-the-client-side/
  295.  
  296.     var xml = Blockly.Xml.workspaceToDom(workspace);
  297.     var txt = Blockly.Xml.domToText(xml);
  298.    
  299. //  var txt=Blockly.Xml.domToPrettyText(Blockly.Xml.workspaceToDom(Blockly.mainWorkspace)); // exports workspace as pretty xml
  300.   console.log(txt);
  301.   var blob = new Blob([txt], {type: "text/xml"});
  302.   saveAs(blob, "test.blab2");
  303.   }
  304.  
  305.   function loadBlockly(){
  306.     Blockly.Xml.domToWorkspace(Blockly.mainWorkspace,$("#hiBlocks")[0]); // loads xml from dom into workspace  
  307.   }
  308.  
  309.     function runCode() {
  310.       // Generate JavaScript code and run it.
  311.       window.LoopTrap = 1000;
  312.       Blockly.JavaScript.INFINITE_LOOP_TRAP =
  313.           'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
  314.       var code = Blockly.JavaScript.workspaceToCode(workspace);
  315.       Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
  316.       try {
  317.         eval(code);
  318.       } catch (e) {
  319.         alert(e);
  320.       }
  321.     }
  322.    
  323.  
  324.   </script>
  325.                  
  326. </head>
  327. <body>
  328.   <h1>Belle II Masterclass: Describe process &rarr;Run analysis &rarr;Fit results &rarr;Save/load process locally</h1>
  329. <!--        <input type="button" onclick="showCode();"  class="mybutton" value="Show JavaScript" /> -->
  330.         <input type="button" onclick="startTask();"  class="mybutton" value="Run Analysis" />
  331.         <input type="button" onclick="stopTask();"  class="mybutton" value="Interrupt" />
  332. <!--         <input type="button" onclick="switchTask();"  class="mybutton" value="Switch between Diagram and Results" /> -->
  333.         <input type="button" onclick="saveBlockly();"  class="mybutton" value="Save Diagram" />
  334.         <form style="display:inline;"><label for="file-input" class="mybutton" style="">Load Diagram</label>
  335.         <input type="file" style="visibility:hidden;" id="file-input" onClick="this.form.reset()" data-buttonText="Load Diagram"/></form>
  336.         <br/>
  337.         <progress id='progressor' value="0" max='100' style="width:95%"></progress>  
  338.         <span id="percentage" style="text-align:right; display:block; margin-top:5px;">0</span>
  339.         <p id="sbar" ></div>     
  340.  
  341.         <br />
  342.  
  343.  <div id="blocklyDiv" style="height:500px; width:95%"></div><br />
  344.  <div id="results" style="border:1px solid #000; padding:10px; width:95%; height:80% ; overflow:auto; background:#eee;"></div>
  345.   <br />
  346.  
  347.   <script>
  348.    
  349.     document.getElementById('file-input').addEventListener('change', readSingleFile, false);
  350.  
  351. //  var toolbox = document.getElementById("toolbox");
  352.   var toolbox = loadDoc("toolbox.xml");
  353.  
  354. var options = {
  355.         toolbox : toolbox,
  356.         collapse : true,
  357.         comments : true,
  358.         disable : true,
  359.         maxBlocks : Infinity,
  360.         trashcan : true,
  361.         horizontalLayout : false,
  362.         toolboxPosition : 'start',
  363.         css : true,
  364. /*      media : '../media/', */
  365.         rtl : false,
  366.         scrollbars : true,
  367.         sounds : true,
  368.         oneBasedIndex : true,
  369.         zoom : {
  370.                 controls : true,
  371.                 wheel : true,
  372.                 startScale : 1,
  373.                 maxcale : 3,
  374.                 minScale : 0.3
  375.   },
  376.   grid:
  377.   {spacing: 20,
  378.   length: 3,
  379.   colour: '#ccc',
  380.   snap: true}
  381. };
  382.  
  383. /* Inject your workspace */
  384. var workspace = Blockly.inject('blocklyDiv', options);
  385.  
  386. /* Load Workspace Blocks from XML to workspace. Remove all code below if no blocks to load */
  387.  
  388. /* TODO: Change workspace blocks XML ID if necessary. Can export workspace blocks XML from Workspace Factory. */
  389. //var workspaceBlocks = document.getElementById("workspaceBlocks");
  390. /* Load blocks to workspace. */
  391. //    Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);
  392.  
  393. <?php
  394.  
  395.  if (isset($_GET["decay"])){
  396.    $decay =  $_GET["decay"];
  397.  } else  {
  398.    $decay = "data/sample.blab2";
  399.  }
  400. // echo "var workspaceBlocks = loadDoc( \"$decay\");"
  401. /* Load blocks to workspace. */
  402.  echo "displayContents( loadDoc( \"$decay\"));"
  403.  
  404. ?>
  405.  
  406. //displayContents(workspaceBlocks);
  407.    
  408.  
  409.  
  410. </script>
  411. <div id="drawing"></div>
  412. </body>
  413. </html>
  414.