Subversion Repositories f9daq

Rev

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Belle II Masterclass</title>
  <link rel="stylesheet" type="text/css" href="masterclass.css">
  <script src="js/blockly_compressed.js"></script>
  <script src="js/blocks_compressed.js"></script>
  <script src="js/javascript_compressed.js"></script>
  <script src="js/en.js"></script>
  <script src="js/belle2_def.js"></script>
  <script src="js/belle2_gen.js"></script>  
  <script src="js/workspace.js"></script>
  <script src="js/FileSaver.min.js"></script>
  <script src="js/Blob.js"></script>

 
<!--  <script type="text/javascript" src="jsroot/scripts/JSRootCore.js?2d&onload=startGUI""></script>   -->
  <script type="text/javascript" src="https://root.cern/js/latest/scripts/JSRootCore.js?2d&onload=startGUI"></script>
  <script type = "text/javascript"      language = "javascript">
                 
var es;
function addLog(message) {
    var r = document.getElementById('results');
   //r.innerHTML += message + '<br>';
   r.insertAdjacentHTML('beforeend', message +'<br/>');
  // r.scrollTop = r.scrollHeight;
}

function showStat(message) {
    var r = document.getElementById('sbar');
    r.innerHTML = message ;
}



function startGUI() {
        // d3.select('html').style('height','100%');
        // d3.select('body').style({'min-height':'100%', 'margin':'0px', "overflow" :"hidden"});
        var r = document.getElementById('results');
        r.style.display = 'none';
        var r0 = document.getElementById('sbar');
        r0.style.display = 'none';

}


var cnt=0;
function startTask() {
       
        var r = document.getElementById('results');
        if ( r.style.display == 'none' ) switchTask();
        r.innerHTML = '';


        Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
        var code = Blockly.JavaScript.workspaceToCode(workspace);
            code = code.replace(/\(|\)/gi, '');
               
        addLog(code + '<br>');
       //addLog(JSON.stringify(code)+ '<br>');
        es = new EventSource('runscript.php?code='  + code  );
         
       //a message is received
        es.addEventListener('message',EventListener);      
        es.addEventListener('error', function(e) {
        addLog('Error occurred');
        es.close();
    });
}

function EventListener(e) {
var result = JSON.parse( e.data );

        if(e.lastEventId == 'CLOSE') {
            addLog('Received CLOSE closing');
            es.close();
            var pBar = document.getElementById('progressor');
            pBar.value = pBar.max; //max out the progress bar
            var perc = document.getElementById('percentage');
            perc.innerHTML   =  "100%";
            perc.style.width = (Math.floor(pBar.clientWidth * (0.5)) + 15) + 'px';
        }   else {
            if(e.lastEventId == '0' ) {
              addLog(result.message);
            } else {
              if(e.lastEventId == '2' ) {
                showStat(result.message);
              } else {
                var jsonobj = JSROOT.parse(result.message);
                var sframe = 'rh'+ (cnt++);
                addLog('ROOT_JSON object '+ sframe );
                var r = document.getElementById('results');
                r.insertAdjacentHTML('beforeend', '<div id="' + sframe +'" style="width:60%; height:60%;"></div>');
             
                var frame = document.getElementById(sframe);
                JSROOT.draw(frame, jsonobj, "hist");
                frame.scrollIntoView();
              }
            }
            var pBar = document.getElementById('progressor');
            pBar.value = result.progress;
            var perc = document.getElementById('percentage');
            perc.innerHTML   = result.progress  + "%";
            perc.style.width = (Math.floor(pBar.clientWidth * (result.progress/100)) + 15) + 'px';
        }
}


 
function stopTask() {
    es.close();
    addLog('Interrupted');
}

       
 
    function switchTask() {
    var div  = document.getElementById('results');
    var divs  = document.getElementById('sbar');
    var div0 = document.getElementById('blocklyDiv');

    if (div.style.display !== 'none') {
        div.style.display = 'none';
        divs.style.display = 'none';
        div0.style.display = 'block';
    }
    else {
        div.style.display = 'block';
        divs.style.display = 'block';
        div0.style.display = 'none';
    }

  }


function readSingleFile(e) {

  var div0 = document.getElementById('blocklyDiv');
  if (div0.style.display === 'none') switchTask();

  var file = e.target.files[0];
  if (!file) {
   return;
  }
  var reader = new FileReader();
  reader.onload = function(e) {
    var contents = e.target.result;
    displayContents(contents);

  };
  reader.readAsText(file);

}

function displayContents(contents) {

workspace.clear();
var xml = Blockly.Xml.textToDom(contents);
Blockly.Xml.domToWorkspace(xml, workspace);

}


function loadDoc( url ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
     if (xhttp.readyState == 4 && xhttp.status == 200) {
        return xhttp.responseText;
     }
  }
  xhttp.open("GET", url, false); // !!! should be in synchronous mode
  xhttp.send();
  return xhttp.onreadystatechange();
}

 function showCode() {
      // Generate JavaScript code and display it.
      Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
      var code = Blockly.JavaScript.workspaceToCode(workspace);
          //var code = Blockly.JSON.fromWorkspace( workspace );
          //var code =  Blockly.Xml.domToPrettyText(workspace );
      code = code.replace(/\(|\)/gi, '');
      console.log(code);
      console.log(code.length);  
      alert(code);
 
  }


  function saveBlockly(){
    //  https://eligrey.com/blog/saving-generated-files-on-the-client-side/

    var xml = Blockly.Xml.workspaceToDom(workspace);
    var txt = Blockly.Xml.domToText(xml);
   
//  var txt=Blockly.Xml.domToPrettyText(Blockly.Xml.workspaceToDom(Blockly.mainWorkspace)); // exports workspace as pretty xml
  console.log(txt);
  var blob = new Blob([txt], {type: "text/xml"});
  saveAs(blob, "test.blab2");
  }

  function loadBlockly(){
    Blockly.Xml.domToWorkspace(Blockly.mainWorkspace,$("#hiBlocks")[0]); // loads xml from dom into workspace  
  }

    function runCode() {
      // Generate JavaScript code and run it.
      window.LoopTrap = 1000;
      Blockly.JavaScript.INFINITE_LOOP_TRAP =
          'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
      var code = Blockly.JavaScript.workspaceToCode(workspace);
      Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
      try {
        eval(code);
      } catch (e) {
        alert(e);
      }
    }
   





  </script>
                 
</head>
<body>
  <h1>Belle II Masterclass: Define process &rarr;Analyse data &rarr;Visualise results &rarr;Save/load process locally</h1>
<!--        <input type="button" onclick="showCode();"  class="mybutton" value="Show JavaScript" /> -->
        <input type="button" onclick="startTask();"  class="mybutton" value="Run Analysis" />
        <input type="button" onclick="stopTask();"  class="mybutton" value="Interrupt" />
        <input type="button" onclick="switchTask();"  class="mybutton" value="Switch between Diagram and Results" />
        <input type="button" onclick="saveBlockly();"  class="mybutton" value="Save Diagram" />
        <form style="display:inline;"><label for="file-input" class="mybutton" style="">Load Diagram</label>
          <input type="file" style="visibility:hidden;" id="file-input" onClick="this.form.reset()" data-buttonText="Load Diagram"/></form>
        <br />
       
       

        <progress id='progressor' value="0" max='100' style="width:95%"></progress>  
        <span id="percentage" style="text-align:right; display:block; margin-top:5px;">0</span>
        <p id="sbar" ></div>     

 
        <br />

 <div id="blocklyDiv" style="height:500px; width:95%"></div><br />
 <div id="results" style="border:1px solid #000; padding:10px; width:95%; height:80% ; overflow:auto; background:#eee;"></div>
  <br />
 
  <script>
   
    document.getElementById('file-input').addEventListener('change', readSingleFile, false);

//  var toolbox = document.getElementById("toolbox");
  var toolbox = loadDoc("toolbox.xml");

var options = {
        toolbox : toolbox,
        collapse : true,
        comments : true,
        disable : true,
        maxBlocks : Infinity,
        trashcan : true,
        horizontalLayout : false,
        toolboxPosition : 'start',
        css : true,
/*      media : '../media/', */
        rtl : false,
        scrollbars : true,
        sounds : true,
        oneBasedIndex : true,
        zoom : {
                controls : true,
                wheel : true,
                startScale : 1,
                maxcale : 3,
                minScale : 0.3
  },
  grid:
  {spacing: 20,
  length: 3,
  colour: '#ccc',
  snap: true}
};

/* Inject your workspace */
var workspace = Blockly.inject('blocklyDiv', options);

/* Load Workspace Blocks from XML to workspace. Remove all code below if no blocks to load */

/* TODO: Change workspace blocks XML ID if necessary. Can export workspace blocks XML from Workspace Factory. */
//var workspaceBlocks = document.getElementById("workspaceBlocks");
/* Load blocks to workspace. */
//    Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);

<?php

 if (isset($_GET["decay"])){
   $decay =  $_GET["decay"];
 } else  {
   $decay = "data/sample.blab2";
 }
// echo "var workspaceBlocks = loadDoc( \"$decay\");"
/* Load blocks to workspace. */
 echo "displayContents( loadDoc( \"$decay\"));"

?>

//displayContents(workspaceBlocks);
   


</script>

</body>
</html>