Subversion Repositories f9daq

Rev

Rev 266 | Rev 268 | 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?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.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. var cnt=0;
  64. function startTask() {
  65.        
  66.         var r = document.getElementById('results');
  67.         if ( r.style.display == 'none' ) switchTask();
  68.         r.innerHTML = '';
  69.         document.getElementById('drawing').innerHTML = '';
  70.  
  71.  
  72.         Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
  73.         var code = Blockly.JavaScript.workspaceToCode(workspace);
  74.             code = code.replace(/\(|\)/gi, '');
  75.                
  76.         addLog(code + '<br>');
  77.        //addLog(JSON.stringify(code)+ '<br>');
  78.         es = new EventSource('runscript.php?code='  + code  );
  79.          
  80.        //a message is received
  81.         es.addEventListener('message',EventListener);      
  82.         es.addEventListener('error', function(e) {
  83.         addLog('Error occurred');
  84.         es.close();
  85.     });
  86. }
  87.  
  88. function EventListener(e) {
  89. var result = JSON.parse( e.data );
  90.  
  91.         if(e.lastEventId == 'CLOSE') {
  92.             addLog('Received CLOSE closing');
  93.             es.close();
  94.             var pBar = document.getElementById('progressor');
  95.             pBar.value = pBar.max; //max out the progress bar
  96.             var perc = document.getElementById('percentage');
  97.             perc.innerHTML   =  "100%";
  98.             perc.style.width = (Math.floor(pBar.clientWidth * (0.5)) + 15) + 'px';
  99.         }   else {
  100.             if(e.lastEventId == '0' ) {
  101.               addLog(result.message);
  102.             } else {
  103.               if(e.lastEventId == '2' ) {
  104.                 showStat(result.message);
  105.               } else {
  106.                 var jsonobj = JSROOT.parse(result.message);
  107.                 var sframe = 'rh'+ (cnt++);
  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.              
  113.                 var frame = document.getElementById(sframe);
  114.                 //JSROOT.draw(frame, jsonobj, "hist");
  115.                 JSROOT.draw(sframe, jsonobj, "hist");
  116.                 //addLog('JSON :' + JSON.stringify(jsonobj)+ '<br>');
  117.  
  118.                 frame.scrollIntoView();
  119.               }
  120.             }
  121.             var pBar = document.getElementById('progressor');
  122.             pBar.value = result.progress;
  123.             var perc = document.getElementById('percentage');
  124.             perc.innerHTML   = result.progress  + "%";
  125.             perc.style.width = (Math.floor(pBar.clientWidth * (result.progress/100)) + 15) + 'px';
  126.         }
  127. }
  128.  
  129.  
  130.  
  131. function stopTask() {
  132.     es.close();
  133.     addLog('Interrupted');
  134. }
  135.  
  136.        
  137.  
  138.     function switchTask() {
  139.     var div  = document.getElementById('results');
  140.     var divs  = document.getElementById('sbar');
  141.     var div0 = document.getElementById('blocklyDiv');
  142.  
  143.     if (div.style.display !== 'none') {
  144.         div.style.display = 'none';
  145.         divs.style.display = 'none';
  146.         div0.style.display = 'block';
  147.     }
  148.     else {
  149.         div.style.display = 'block';
  150.         divs.style.display = 'block';
  151.         div0.style.display = 'none';
  152.     }
  153.  
  154.   }
  155.  
  156.  
  157. function readSingleFile(e) {
  158.  
  159.   var div0 = document.getElementById('blocklyDiv');
  160.   if (div0.style.display === 'none') switchTask();
  161.  
  162.   var file = e.target.files[0];
  163.   if (!file) {
  164.    return;
  165.   }
  166.   var reader = new FileReader();
  167.   reader.onload = function(e) {
  168.     var contents = e.target.result;
  169.     displayContents(contents);
  170.  
  171.   };
  172.   reader.readAsText(file);
  173.  
  174. }
  175.  
  176. function displayContents(contents) {
  177.  
  178. workspace.clear();
  179. var xml = Blockly.Xml.textToDom(contents);
  180. Blockly.Xml.domToWorkspace(xml, workspace);
  181.  
  182. }
  183.  
  184.  
  185. function loadDoc( url ) {
  186.   var xhttp = new XMLHttpRequest();
  187.   xhttp.onreadystatechange = function () {
  188.      if (xhttp.readyState == 4 && xhttp.status == 200) {
  189.         return xhttp.responseText;
  190.      }
  191.   }
  192.   xhttp.open("GET", url, false); // !!! should be in synchronous mode
  193.   xhttp.send();
  194.   return xhttp.onreadystatechange();
  195. }
  196.  
  197.  function showCode() {
  198.       // Generate JavaScript code and display it.
  199.       Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
  200.       var code = Blockly.JavaScript.workspaceToCode(workspace);
  201.           //var code = Blockly.JSON.fromWorkspace( workspace );
  202.           //var code =  Blockly.Xml.domToPrettyText(workspace );
  203.       code = code.replace(/\(|\)/gi, '');
  204.       console.log(code);
  205.       console.log(code.length);  
  206.       alert(code);
  207.  
  208.   }
  209.  
  210.  
  211.   function saveBlockly(){
  212.     //  https://eligrey.com/blog/saving-generated-files-on-the-client-side/
  213.  
  214.     var xml = Blockly.Xml.workspaceToDom(workspace);
  215.     var txt = Blockly.Xml.domToText(xml);
  216.    
  217. //  var txt=Blockly.Xml.domToPrettyText(Blockly.Xml.workspaceToDom(Blockly.mainWorkspace)); // exports workspace as pretty xml
  218.   console.log(txt);
  219.   var blob = new Blob([txt], {type: "text/xml"});
  220.   saveAs(blob, "test.blab2");
  221.   }
  222.  
  223.   function loadBlockly(){
  224.     Blockly.Xml.domToWorkspace(Blockly.mainWorkspace,$("#hiBlocks")[0]); // loads xml from dom into workspace  
  225.   }
  226.  
  227.     function runCode() {
  228.       // Generate JavaScript code and run it.
  229.       window.LoopTrap = 1000;
  230.       Blockly.JavaScript.INFINITE_LOOP_TRAP =
  231.           'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
  232.       var code = Blockly.JavaScript.workspaceToCode(workspace);
  233.       Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
  234.       try {
  235.         eval(code);
  236.       } catch (e) {
  237.         alert(e);
  238.       }
  239.     }
  240.    
  241.  
  242.  
  243.  
  244.  
  245.  
  246.   </script>
  247.                  
  248. </head>
  249. <body>
  250.   <h1>Belle II Masterclass: Define process &rarr;Analyse data &rarr;Visualise results &rarr;Save/load process locally</h1>
  251. <!--        <input type="button" onclick="showCode();"  class="mybutton" value="Show JavaScript" /> -->
  252.         <input type="button" onclick="startTask();"  class="mybutton" value="Run Analysis" />
  253.         <input type="button" onclick="stopTask();"  class="mybutton" value="Interrupt" />
  254.         <input type="button" onclick="switchTask();"  class="mybutton" value="Switch between Diagram and Results" />
  255.         <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>
  257.           <input type="file" style="visibility:hidden;" id="file-input" onClick="this.form.reset()" data-buttonText="Load Diagram"/></form>
  258.         <br />
  259.        
  260.        
  261.  
  262.         <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>
  264.         <p id="sbar" ></div>     
  265.  
  266.  
  267.         <br />
  268.  
  269.  <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>
  271.   <br />
  272.  
  273.   <script>
  274.    
  275.     document.getElementById('file-input').addEventListener('change', readSingleFile, false);
  276.  
  277. //  var toolbox = document.getElementById("toolbox");
  278.   var toolbox = loadDoc("toolbox.xml");
  279.  
  280. var options = {
  281.         toolbox : toolbox,
  282.         collapse : true,
  283.         comments : true,
  284.         disable : true,
  285.         maxBlocks : Infinity,
  286.         trashcan : true,
  287.         horizontalLayout : false,
  288.         toolboxPosition : 'start',
  289.         css : true,
  290. /*      media : '../media/', */
  291.         rtl : false,
  292.         scrollbars : true,
  293.         sounds : true,
  294.         oneBasedIndex : true,
  295.         zoom : {
  296.                 controls : true,
  297.                 wheel : true,
  298.                 startScale : 1,
  299.                 maxcale : 3,
  300.                 minScale : 0.3
  301.   },
  302.   grid:
  303.   {spacing: 20,
  304.   length: 3,
  305.   colour: '#ccc',
  306.   snap: true}
  307. };
  308.  
  309. /* Inject your workspace */
  310. var workspace = Blockly.inject('blocklyDiv', options);
  311.  
  312. /* Load Workspace Blocks from XML to workspace. Remove all code below if no blocks to load */
  313.  
  314. /* TODO: Change workspace blocks XML ID if necessary. Can export workspace blocks XML from Workspace Factory. */
  315. //var workspaceBlocks = document.getElementById("workspaceBlocks");
  316. /* Load blocks to workspace. */
  317. //    Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);
  318.  
  319. <?php
  320.  
  321.  if (isset($_GET["decay"])){
  322.    $decay =  $_GET["decay"];
  323.  } else  {
  324.    $decay = "data/sample.blab2";
  325.  }
  326. // echo "var workspaceBlocks = loadDoc( \"$decay\");"
  327. /* Load blocks to workspace. */
  328.  echo "displayContents( loadDoc( \"$decay\"));"
  329.  
  330. ?>
  331.  
  332. //displayContents(workspaceBlocks);
  333.    
  334.  
  335.  
  336. </script>
  337. <div id="drawing" style="width:800px; height:600px"></div>
  338. </body>
  339. </html>
  340.