Subversion Repositories f9daq

Rev

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