Subversion Repositories f9daq

Rev

Rev 343 | 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 Particle Discovery</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.   <link rel="shortcut icon" href="https://root.cern/js/latest/img/RootIcon.ico"/>
  17.   <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  18.   <link rel="stylesheet" type="text/css" href="style.css">
  19.  
  20.   <script src="JSRootExtend.js"></script>
  21.   <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  22.   <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  23.   <script src="polFitPanel.js"></script>
  24.   <script src="fminsearch.js"></script>
  25.   <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/MathJax.js?config=TeX-MML-AM_CHTML"></script>
  26.   <script type="text/javascript" src="displayFormula.js"></script>
  27.   <script type="text/x-mathjax-config">
  28.     MathJax.Hub.Config({
  29.       tex2jax: {
  30.         inlineMath: [["$","$"],["\\(","\\)"]]
  31.       }
  32.     });
  33.   </script>
  34.  
  35.  
  36. <style>
  37. table {
  38.     border-collapse: collapse;
  39.     width: 100%;
  40. }
  41.  
  42. th, td {
  43.     padding: 0px;
  44.     /*text-align: right;*/
  45. }
  46.  
  47. tr:hover{background-color:#ffffff}
  48. </style>
  49.  
  50.   <script src="js/Blob.js"></script>
  51.  
  52.  
  53. <!-- <script type="text/javascript" src="js/JSRootCore.js?2d&onload=startGUI""></script> -->
  54.    <script type="text/javascript" src="https://root.cern/js/latest/scripts/JSRootCore.js?2d&onload=startGUI"></script>  
  55.   <script type = "text/javascript"      language = "javascript">
  56.                  
  57. var es;
  58. function addLog(message) {
  59.    var r = document.getElementById('results');
  60.    r.insertAdjacentHTML('beforeend', message +'<br/>');
  61. }
  62.  
  63. function showStat(message) {
  64.     var r = document.getElementById('sbar');
  65.     r.innerHTML = message ;
  66. }
  67.  
  68.  
  69.  
  70. function startGUI() {
  71.         // d3.select('html').style('height','100%');
  72.         // d3.select('body').style({'min-height':'100%', 'margin':'0px', "overflow" :"hidden"});
  73.         //        var r = document.getElementById('results');
  74.         //        r.style.display = 'none';
  75.         var r0 = document.getElementById('sbar');
  76.         r0.style.display = 'none';
  77.         JSROOT.gStyle.fOptFit = 1111;
  78.  
  79. }
  80.  
  81.  
  82. function fitpanel(oFormElement)
  83. {
  84.   var xhr = new XMLHttpRequest();
  85.   xhr.onreadystatechange = function() {
  86.     if(xhr.readyState == 4 && xhr.status == 200) {
  87.         var event  = JSON.parse(xhr.responseText);        
  88.         var result = event.data;
  89.         var th1    = JSROOT.parse(result.message);
  90.         var hname  = th1.fName;
  91.         var r      = document.getElementById('drawing');
  92.         if (document.getElementById(hname) == null ){
  93.           r.insertAdjacentHTML('beforeend', '<div id="' + hname +'" style="width:80%; height:80%;"></div><br/>');
  94.         }
  95.         var hframe = document.getElementById(hname);
  96.         hframe.innerHTML = '';
  97. //        https://github.com/root-project/jsroot/issues/42
  98.        
  99.         JSROOT.draw(hname, th1, "hist");
  100.         JSROOT.gStyle.fOptFit = 1111;
  101.         JSROOT.draw(hname, th1, "func");
  102.  
  103.        
  104.         document.getElementById('data'+ hname).value=result.message;
  105.         //frame.scrollIntoView();
  106.     }
  107.   }
  108.   xhr.open (oFormElement.method, oFormElement.action, true);
  109.  
  110.   var data = new FormData (oFormElement);  
  111.   xhr.send (data);
  112.  
  113.   return false; // Markus had to return true
  114. }
  115.  
  116.  
  117.  
  118. function startTask() {
  119.        
  120.         var r = document.getElementById('results');
  121.         //if ( r.style.display == 'none' ) switchTask();
  122.         r.innerHTML = '';
  123.         var btnstart = document.getElementById('btnstart');
  124.         btnstart.value= "Stop Analysis";
  125.        
  126.        
  127.         document.getElementById('drawing').innerHTML = '';
  128.  
  129.         Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
  130.         var code = Blockly.JavaScript.workspaceToCode(workspace);
  131.             code = code.replace(/\(|\)/gi, '');
  132.                
  133.         addLog(code + '<br>');
  134.        //addLog(JSON.stringify(code)+ '<br>');
  135.         es = new EventSource('runscript.php?code='  + code  );
  136.          
  137.        //a message is received
  138.         es.addEventListener('message',EventListener);      
  139.         es.addEventListener('error', function(e) {
  140.         //addLog('Error occurred');
  141.         stopTask();
  142.         //es.close();
  143.     });
  144. }
  145.  
  146. function startAction() {
  147.    var btnstart = document.getElementById('btnstart');
  148.    first = 0;
  149.    if (btnstart.value=== "Stop Analysis"){
  150.      stopTask();
  151.    } else {
  152.      startTask();
  153.    }
  154. }
  155.  
  156. function toProcess() {
  157.    window.location.hash='#btnstart';
  158.    //window.location.hash='#blocklyDiv';
  159. }
  160.  
  161. function showDebug() {
  162.    var btnstart = document.getElementById('btndebug');
  163.    var div  = document.getElementById('results');
  164.  
  165.    if (btnstart.value=== "Show Text"){
  166.      btnstart.value = "Hide Text";
  167.      div.style.display = 'block';
  168.    } else {
  169.      btnstart.value = "Show Text";
  170.      div.style.display = 'none';
  171.    }
  172. }
  173.  
  174. function showLicense() {
  175.   window.location.href="license.html";
  176. }
  177.  
  178.  
  179. function EventListener(e) {
  180. //addLog(JSON.stringify(e) );
  181.  
  182. var result = JSON.parse( e.data );
  183.  
  184.         if(e.lastEventId == 'CLOSE') {
  185.             //addLog('Received CLOSE closing');
  186.             stopTask();
  187. //            es.close();
  188.            
  189.             var pBar = document.getElementById('progressor');
  190.             pBar.value = pBar.max; //max out the progress bar
  191.             var perc = document.getElementById('percentage');
  192.             perc.innerHTML   =  "100%";
  193.             perc.style.width = (Math.floor(pBar.clientWidth * (0.5)) + 15) + 'px';
  194.         }   else {
  195.             if(e.lastEventId == '0' ) {
  196.               addLog(result.message);
  197.             } else {
  198.               if(e.lastEventId == '2' ) {
  199.                 showStat(result.message);
  200.               } else {
  201.                 var jsonobj = JSROOT.parse(result.message);
  202.                 var sframe = jsonobj.fName;
  203.                
  204.        
  205.                 //addLog('Histogram :'+ sframe );
  206.                 //var r = document.getElementById('results');
  207.                 var r = document.getElementById('drawing');
  208.                 if (document.getElementById(sframe) == null ){
  209.                   //console.log('insert HTML for', sframe)
  210.                   r.insertAdjacentHTML('beforeend', '<div id="' + sframe +'" style="width:800px; height:500px"></div><br/>');//narise histogram
  211.                  
  212.                   r.insertAdjacentHTML('beforeend', '<div id="fit' + sframe +'" style="display: none"></div><br/>');
  213.                   insertHTML(sframe);
  214.                   r.insertAdjacentHTML('beforeend','<input type="button" onclick="togglevisibility(\'fit'+sframe+'\');"  class="mybutton" value="Show/Hide Fit Panel" />' );
  215.                   r.insertAdjacentHTML('beforeend','&nbsp;<input type="button" onclick="toProcess();"  class="mybutton" value="To Process" /><hr/>' );
  216.                  
  217.                   //r.insertAdjacentHTML('beforeend', JSON.stringify(result.message));
  218.                 }
  219.                 var frame = document.getElementById(sframe);
  220.                 JSROOT.redraw(sframe, jsonobj, "hist", function(){
  221.                   initSliders(sframe);
  222.                 });
  223.                
  224.                
  225.  
  226.                 frame.scrollIntoView();
  227.               }
  228.             }
  229.             var pBar = document.getElementById('progressor');
  230.             pBar.value = result.progress;
  231.             var perc = document.getElementById('percentage');
  232.             perc.innerHTML   = result.progress  + "%";
  233.             perc.style.width = (Math.floor(pBar.clientWidth * (result.progress/100)) + 15) + 'px';
  234.         }
  235. }
  236.  
  237.  
  238.  
  239. function stopTask() {
  240.     es.close();
  241.     //addLog('Task end');
  242.     var btnstart = document.getElementById('btnstart');
  243.    
  244.     btnstart.value= "Run Analysis";
  245.  
  246. }
  247.  
  248.        
  249. /*
  250.     function switchTask() {
  251.     var div  = document.getElementById('results');
  252.     var divs  = document.getElementById('sbar');
  253.     var div0 = document.getElementById('blocklyDiv');
  254.  
  255.     if (div.style.display !== 'none') {
  256.         div.style.display = 'none';
  257.         divs.style.display = 'none';
  258.         div0.style.display = 'block';
  259.     }
  260.     else {
  261.         div.style.display = 'block';
  262.         divs.style.display = 'block';
  263.         div0.style.display = 'none';
  264.     }
  265.  
  266.   }
  267. */
  268.  
  269.  
  270. function togglevisibility( name ) {
  271.     var div  = document.getElementById(name);
  272.     if (div.style.display !== 'none') {
  273.         div.style.display = 'none';
  274.     }
  275.     else {
  276.         div.style.display = 'block';
  277.     }
  278. }
  279.  
  280.  
  281. function readSingleFile(e) {
  282.  
  283.   var div0 = document.getElementById('blocklyDiv');
  284.   //if (div0.style.display === 'none') switchTask();
  285.  
  286.   var file = e.target.files[0];
  287.   if (!file) {
  288.    return;
  289.   }
  290.   var reader = new FileReader();
  291.   reader.onload = function(e) {
  292.     var contents = e.target.result;
  293.     displayContents(contents);
  294.  
  295.   };
  296.   reader.readAsText(file);
  297.  
  298. }
  299.  
  300. function displayContents(contents) {
  301.  
  302. workspace.clear();
  303. var xml = Blockly.Xml.textToDom(contents);
  304. Blockly.Xml.domToWorkspace(xml, workspace);
  305.  
  306. }
  307.  
  308.  
  309. function loadDoc( url ) {
  310.   var xhttp = new XMLHttpRequest();
  311.   xhttp.onreadystatechange = function () {
  312.      if (xhttp.readyState == 4 && xhttp.status == 200) {
  313.         return xhttp.responseText;
  314.      }
  315.   }
  316.   xhttp.open("GET", url, false); // !!! should be in synchronous mode
  317.   xhttp.send();
  318.   return xhttp.onreadystatechange();
  319. }
  320.  
  321.  function showCode() {
  322.       // Generate JavaScript code and display it.
  323.       Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
  324.       var code = Blockly.JavaScript.workspaceToCode(workspace);
  325.           //var code = Blockly.JSON.fromWorkspace( workspace );
  326.           //var code =  Blockly.Xml.domToPrettyText(workspace );
  327.       code = code.replace(/\(|\)/gi, '');
  328.       console.log(code);
  329.       console.log(code.length);  
  330.       alert(code);
  331.  
  332.   }
  333.  
  334.  
  335.   function saveBlockly(){
  336.     //  https://eligrey.com/blog/saving-generated-files-on-the-client-side/
  337.  
  338.     var xml = Blockly.Xml.workspaceToDom(workspace);
  339.     var txt = Blockly.Xml.domToText(xml);
  340.    
  341. //  var txt=Blockly.Xml.domToPrettyText(Blockly.Xml.workspaceToDom(Blockly.mainWorkspace)); // exports workspace as pretty xml
  342.   console.log(txt);
  343.   var blob = new Blob([txt], {type: "text/xml"});
  344.   saveAs(blob, "test.blab2");
  345.   }
  346.  
  347.   function loadBlockly(){
  348.     Blockly.Xml.domToWorkspace(Blockly.mainWorkspace,$("#hiBlocks")[0]); // loads xml from dom into workspace  
  349.   }
  350.  
  351.     function runCode() {
  352.       // Generate JavaScript code and run it.
  353.       window.LoopTrap = 1000;
  354.       Blockly.JavaScript.INFINITE_LOOP_TRAP =
  355.           'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
  356.       var code = Blockly.JavaScript.workspaceToCode(workspace);
  357.       Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
  358.       try {
  359.         eval(code);
  360.       } catch (e) {
  361.         alert(e);
  362.       }
  363.     }
  364.      
  365. Blockly.Blocks['simple_analysis'] = {
  366.   init: function() {
  367.     this.appendDummyInput()
  368.         .appendField("Belle II Masterclass");
  369.     this.appendDummyInput()
  370.         .appendField("Number of events: ")
  371.         .appendField(new Blockly.FieldNumber(5000, 0), "neve");
  372.     this.appendDummyInput()
  373.         .appendField("First event: ")
  374.         .appendField(new Blockly.FieldNumber(0, 0), "first");
  375.     this.appendDummyInput()
  376.         .appendField("Data Source")
  377.         .appendField(new Blockly.FieldDropdown([
  378. <?php
  379. $files = array_slice(scandir('../data/'), 2);
  380. $cnt=0;
  381. foreach($files as $f){
  382.   echo "[\"$f\",\"$f\"],";
  383.   $cnt++;
  384. }
  385. ?>]), "datasource");
  386.     this.appendDummyInput()
  387.         .appendField("Print particle list?")
  388.         .appendField(new Blockly.FieldDropdown([["No", "0"], ["Yes", "1"]]), "print");
  389.     this.appendValueInput("list")
  390.         .setCheck("particle list")
  391.         .appendField("Particle List");
  392.     this.setColour(230);
  393.     this.setTooltip('Run the analysis, specify data source, number of events, first event and a list of particles to process.');
  394.     this.setHelpUrl('http://belle2.jp/');
  395.   }
  396. };
  397.  
  398.  
  399.   </script>
  400.                  
  401. </head>
  402. <body>
  403.  
  404.   <h1>Belle II Particle Discovery: Describe process &rarr;Analyse &rarr;Fit results &rarr;Discover</h1>
  405. <!--        <input type="button" onclick="showCode();"  class="mybutton" value="Show JavaScript" /> -->
  406.         <input type="button" id="btnstart" onclick="startAction();"  class="mybutton" value="Run Analysis" />
  407.      
  408.         <input type="button" onclick="saveBlockly();"  class="mybutton" value="Save Diagram" />
  409.         <form style="display:inline;"><label for="file-input" class="mybutton" style="">Load Diagram</label>
  410.         <input type="button" id="btndebug" onclick="showDebug();"  class="mybutton" value="Hide Text" />
  411.         &nbsp;&nbsp;&nbsp;<input type="button" id="btnhelp" onclick="window.location.href='BelleIILabManual.pdf';"  class="mybutton"  value="Help" />
  412.         &nbsp;&nbsp;&nbsp;<input type="button" id="btnabout" onclick="showLicense();"  class="mybutton"  value="About" />
  413.         <input type="file" style="visibility:hidden;" id="file-input" onClick="this.form.reset()" data-buttonText="Load Diagram"/></form>
  414.         <br/>
  415.         <progress id='progressor' value="0" max='100' style="width:95%"></progress>  
  416.         <span id="percentage" style="text-align:right; display:block; margin-top:5px;">0</span>
  417.         <p id="sbar" ></div>     
  418.  
  419.         <br />
  420.  
  421.  <div id="results" style="border:1px solid #000; padding:10px; width:95%; height:80% ; overflow:auto; background:#eee;"></div>
  422.   <br />
  423.  <div id="blocklyDiv" style="height:900px; width:95%"></div><br />
  424.  
  425.   <script>
  426.    
  427.     document.getElementById('file-input').addEventListener('change', readSingleFile, false);
  428.  
  429.   var toolbox = loadDoc("toolbox.xml");
  430.  
  431. var options = {
  432.         toolbox : toolbox,
  433.         collapse : true,
  434.         comments : true,
  435.         disable : true,
  436.         maxBlocks : Infinity,
  437.         trashcan : true,
  438.         horizontalLayout : false,
  439.         toolboxPosition : 'start',
  440.         css : true,
  441. /*      media : '../media/', */
  442.         rtl : false,
  443.         scrollbars : true,
  444.         sounds : true,
  445.         oneBasedIndex : true,
  446.         zoom : {
  447.                 controls : true,
  448.                 wheel : true,
  449.                 startScale : 1,
  450.                 maxcale : 3,
  451.                 minScale : 0.3
  452.   },
  453.   grid:
  454.   {spacing: 20,
  455.   length: 3,
  456.   colour: '#ccc',
  457.   snap: true}
  458. };
  459.  
  460. var workspace = Blockly.inject('blocklyDiv', options);
  461.  
  462. <?php
  463.  
  464.  if (isset($_GET["decay"])){
  465.    $decay =  $_GET["decay"];
  466.  } else  {
  467.    $decay = "data/sample.blab2";
  468.  }
  469. // echo "var workspaceBlocks = loadDoc( \"$decay\");"
  470. /* Load blocks to workspace. */
  471.  echo "displayContents( loadDoc( \"$decay\"));"
  472.  
  473. ?>
  474.  
  475. //displayContents(workspaceBlocks);
  476.     </script>
  477.  <div id="drawing"></div>
  478. <?php
  479. $hostname = gethostname();
  480. if ($hostname != "belle2.ijs.si") {
  481.   echo "<a href='update.php'>Update code from the central server</a>";
  482. }
  483. ?>
  484. </body>
  485. </html>
  486.