Subversion Repositories f9daq

Rev

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