WebSVN – f9daq – Diff – /belle2/masterclass/index.php


<!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>
 
<style>
table {
    border-collapse: collapse;
    width: 100%;
}
 
th, td {
    padding: 0px;
    text-align: right;
}
 
tr:hover{background-color:#ffffff}
</style>
 
  <script src="js/Blob.js"></script>
 
 
<!-- <script type="text/javascript" src="js/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.insertAdjacentHTML('beforeend', message +'<br/>');
}
 
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';
        JSROOT.gStyle.fOptFit = 1111;
 
}
 
 
function fitpanel(oFormElement)
{
  var xhr = new XMLHttpRequest();
  xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 && xhr.status == 200) {
        var event  = JSON.parse(xhr.responseText);        
        var result = event.data;
        var th1    = JSROOT.parse(result.message);
        var hname  = th1.fName;
        var r      = document.getElementById('drawing');
        if (document.getElementById(hname) == null ){
          r.insertAdjacentHTML('beforeend', '<div id="' + hname +'" style="width:80%; height:80%;"></div><br/>');
        }
        var hframe = document.getElementById(hname);
        hframe.innerHTML = '';
//        https://github.com/root-project/jsroot/issues/42
       
        JSROOT.draw(hname, th1, "hist");
        JSROOT.gStyle.fOptFit = 1111;
        JSROOT.draw(hname, th1, "func");
 
       
        document.getElementById('data'+ hname).value=result.message;
        //frame.scrollIntoView();
    }
  }
  xhr.open (oFormElement.method, oFormElement.action, true);
 
  var data = new FormData (oFormElement);  
  xhr.send (data);
 
  return false; // Markus had to return true
}
 
 
 
function startTask() {
       
        var r = document.getElementById('results');
        if ( r.style.display == 'none' ) switchTask();
        r.innerHTML = '';
        document.getElementById('drawing').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) {
//addLog(JSON.stringify(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 = jsonobj.fName;
               
       
                addLog('Histogram :'+ sframe );
                var r = document.getElementById('results');
                //var r = document.getElementById('drawing');
                if (document.getElementById(sframe) == null ){
                  r.insertAdjacentHTML('beforeend', '<div id="' + sframe +'" style="width:1000px; height:600px"></div><br/>');
                  r.insertAdjacentHTML('beforeend', '<div id="fit' + sframe +'" style="display: none"></div><br/>');
                  var fit = document.getElementById('fit'+ sframe);
mform ='<form method="post" action="th1fit.php" onsubmit="return fitpanel(this);">';
mform += '  Function:<input type="text"  size="20"  value="gaus"    name="fitfun" /><br/>';
mform += '  Range: min=<input type="text" size="2" value="0"   name="min" />';
mform += '  max=<input type="text" size="2"  value="20"   name="max" /><br/>';
mform += '  Initial parameters (separated by ,)<input type="text" size="20" value=""    name="prm" /><br/>';
mform += '  <input id="data'+ sframe +'" type="hidden" value="'+ result.message +'" name="data" />';
mform += '  <input type="hidden" value="'+ sframe +'"    name="name" />';
mform += '  <input class="mybutton" type="submit" value="  Fit  "/>';
mform += '</form>';
                  fit.insertAdjacentHTML('beforeend', '<div id="param' + sframe +'"></div><br/>');
                  fit.insertAdjacentHTML('beforeend', mform);
                  r.insertAdjacentHTML('beforeend','<input type="button" onclick="togglevisibility(\'fit'+sframe+'\');"  class="mybutton" value="Show/Hide Fit Panel" /><hr/>' );
                  document.getElementById('data'+ sframe).value=result.message;
                  //r.insertAdjacentHTML('beforeend', JSON.stringify(result.message));
                }
                var frame = document.getElementById(sframe);
       
                JSROOT.redraw(sframe, 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 togglevisibility( name ) {
    var div  = document.getElementById(name);
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
}
 
 
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: Describe process &rarr;Run analysis &rarr;Fit 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>
<div id="drawing"></div>
</body>
<a href="update.php">Update code</a>
</html>
 

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

Subversion Repositories f9daq

(root)/belle2/masterclass/index.php – Rev 270 → 275