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 = '';
        var btnstart = document.getElementById('btnstart');
        btnstart.value= "Stop Analysis";
       
       
        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');
        stopTask();
        //es.close();
    });
}
 
function startAction() {
   var btnstart = document.getElementById('btnstart');
   if (btnstart.value=== "Stop Analysis"){
     stopTask();
   } else {
     startTask();
   }
}
function EventListener(e) {
//addLog(JSON.stringify(e) );
 
var result = JSON.parse( e.data );
 
        if(e.lastEventId == 'CLOSE') {
            addLog('Received CLOSE closing');
            stopTask();
//            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('Task end');
    var btnstart = document.getElementById('btnstart');
   
    btnstart.value= "Run Analysis";
 
}
 
       
/*
    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" id="btnstart" onclick="startAction();"  class="mybutton" value="Run Analysis" />
 
     
<!--         <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 275	Rev 302
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	var btnstart = document.getElementById('btnstart');
-		104	btnstart.value= "Stop Analysis";
-		105
-		106
103	document.getElementById('drawing').innerHTML = '';	107	document.getElementById('drawing').innerHTML = '';
104		-
105		108
106	Blockly.JavaScript.INFINITE_LOOP_TRAP = null;	109	Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
107	var code = Blockly.JavaScript.workspaceToCode(workspace);	110	var code = Blockly.JavaScript.workspaceToCode(workspace);
108	code = code.replace(/\(\|\)/gi, '');	111	code = code.replace(/\(\|\)/gi, '');
109		112
110	addLog(code + '<br>');	113	addLog(code + '<br>');
111	//addLog(JSON.stringify(code)+ '<br>');	114	//addLog(JSON.stringify(code)+ '<br>');
112	es = new EventSource('runscript.php?code=' + code );	115	es = new EventSource('runscript.php?code=' + code );
113		116
114	//a message is received	117	//a message is received
115	es.addEventListener('message',EventListener);	118	es.addEventListener('message',EventListener);
116	es.addEventListener('error', function(e) {	119	es.addEventListener('error', function(e) {
117	addLog('Error occurred');	120	addLog('Error occurred');
-		121	stopTask();
118	es.close();	122	//es.close();
119	});	123	});
120	}	124	}
121		125
-		126	function startAction() {
-		127	var btnstart = document.getElementById('btnstart');
-		128	if (btnstart.value=== "Stop Analysis"){
-		129	stopTask();
-		130	} else {
-		131	startTask();
-		132	}
-		133	}
122	function EventListener(e) {	134	function EventListener(e) {
123	//addLog(JSON.stringify(e) );	135	//addLog(JSON.stringify(e) );
124		136
125	var result = JSON.parse( e.data );	137	var result = JSON.parse( e.data );
126		138
127	if(e.lastEventId == 'CLOSE') {	139	if(e.lastEventId == 'CLOSE') {
128	addLog('Received CLOSE closing');	140	addLog('Received CLOSE closing');
-		141	stopTask();
129	es.close();	142	// es.close();
-		143
130	var pBar = document.getElementById('progressor');	144	var pBar = document.getElementById('progressor');
131	pBar.value = pBar.max; //max out the progress bar	145	pBar.value = pBar.max; //max out the progress bar
132	var perc = document.getElementById('percentage');	146	var perc = document.getElementById('percentage');
133	perc.innerHTML = "100%";	147	perc.innerHTML = "100%";
134	perc.style.width = (Math.floor(pBar.clientWidth * (0.5)) + 15) + 'px';	148	perc.style.width = (Math.floor(pBar.clientWidth * (0.5)) + 15) + 'px';
135	} else {	149	} else {
136	if(e.lastEventId == '0' ) {	150	if(e.lastEventId == '0' ) {
137	addLog(result.message);	151	addLog(result.message);
138	} else {	152	} else {
139	if(e.lastEventId == '2' ) {	153	if(e.lastEventId == '2' ) {
140	showStat(result.message);	154	showStat(result.message);
141	} else {	155	} else {
142	var jsonobj = JSROOT.parse(result.message);	156	var jsonobj = JSROOT.parse(result.message);
143	var sframe = jsonobj.fName;	157	var sframe = jsonobj.fName;
144		158
145		159
146	addLog('Histogram :'+ sframe );	160	addLog('Histogram :'+ sframe );
147	var r = document.getElementById('results');	161	var r = document.getElementById('results');
148	//var r = document.getElementById('drawing');	162	//var r = document.getElementById('drawing');
149	if (document.getElementById(sframe) == null ){	163	if (document.getElementById(sframe) == null ){
150	r.insertAdjacentHTML('beforeend', '<div id="' + sframe +'" style="width:1000px; height:600px"></div><br/>');	164	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/>');	165	r.insertAdjacentHTML('beforeend', '<div id="fit' + sframe +'" style="display: none"></div><br/>');
152	var fit = document.getElementById('fit'+ sframe);	166	var fit = document.getElementById('fit'+ sframe);
153	mform ='<form method="post" action="th1fit.php" onsubmit="return fitpanel(this);">';	167	mform ='<form method="post" action="th1fit.php" onsubmit="return fitpanel(this);">';
154	mform += ' Function:<input type="text" size="20" value="gaus" name="fitfun" /><br/>';	168	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" />';	169	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/>';	170	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/>';	171	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" />';	172	mform += ' <input id="data'+ sframe +'" type="hidden" value="'+ result.message +'" name="data" />';
159	mform += ' <input type="hidden" value="'+ sframe +'" name="name" />';	173	mform += ' <input type="hidden" value="'+ sframe +'" name="name" />';
160	mform += ' <input class="mybutton" type="submit" value=" Fit "/>';	174	mform += ' <input class="mybutton" type="submit" value=" Fit "/>';
161	mform += '</form>';	175	mform += '</form>';
162	fit.insertAdjacentHTML('beforeend', '<div id="param' + sframe +'"></div><br/>');	176	fit.insertAdjacentHTML('beforeend', '<div id="param' + sframe +'"></div><br/>');
163	fit.insertAdjacentHTML('beforeend', mform);	177	fit.insertAdjacentHTML('beforeend', mform);
164	r.insertAdjacentHTML('beforeend','<input type="button" onclick="togglevisibility(\'fit'+sframe+'\');" class="mybutton" value="Show/Hide Fit Panel" /><hr/>' );	178	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;	179	document.getElementById('data'+ sframe).value=result.message;
166	//r.insertAdjacentHTML('beforeend', JSON.stringify(result.message));	180	//r.insertAdjacentHTML('beforeend', JSON.stringify(result.message));
167	}	181	}
168	var frame = document.getElementById(sframe);	182	var frame = document.getElementById(sframe);
169		183
170	JSROOT.redraw(sframe, jsonobj, "hist");	184	JSROOT.redraw(sframe, jsonobj, "hist");
171		185
172		186
173	frame.scrollIntoView();	187	frame.scrollIntoView();
174	}	188	}
175	}	189	}
176	var pBar = document.getElementById('progressor');	190	var pBar = document.getElementById('progressor');
177	pBar.value = result.progress;	191	pBar.value = result.progress;
178	var perc = document.getElementById('percentage');	192	var perc = document.getElementById('percentage');
179	perc.innerHTML = result.progress + "%";	193	perc.innerHTML = result.progress + "%";
180	perc.style.width = (Math.floor(pBar.clientWidth * (result.progress/100)) + 15) + 'px';	194	perc.style.width = (Math.floor(pBar.clientWidth * (result.progress/100)) + 15) + 'px';
181	}	195	}
182	}	196	}
183		197
184		198
185		199
186	function stopTask() {	200	function stopTask() {
187	es.close();	201	es.close();
188	addLog(~~'Interrupted'~~);	202	addLog('Task end');
-		203	var btnstart = document.getElementById('btnstart');
-		204
-		205	btnstart.value= "Run Analysis";
-		206
189	}	207	}
190		208
191		209
192	/*	210	/*
193	function switchTask() {	211	function switchTask() {
194	var div = document.getElementById('results');	212	var div = document.getElementById('results');
195	var divs = document.getElementById('sbar');	213	var divs = document.getElementById('sbar');
196	var div0 = document.getElementById('blocklyDiv');	214	var div0 = document.getElementById('blocklyDiv');
197		215
198	if (div.style.display !== 'none') {	216	if (div.style.display !== 'none') {
199	div.style.display = 'none';	217	div.style.display = 'none';
200	divs.style.display = 'none';	218	divs.style.display = 'none';
201	div0.style.display = 'block';	219	div0.style.display = 'block';
202	}	220	}
203	else {	221	else {
204	div.style.display = 'block';	222	div.style.display = 'block';
205	divs.style.display = 'block';	223	divs.style.display = 'block';
206	div0.style.display = 'none';	224	div0.style.display = 'none';
207	}	225	}
208		226
209	}	227	}
210	*/	228	*/
211		229
212		230
213	function togglevisibility( name ) {	231	function togglevisibility( name ) {
214	var div = document.getElementById(name);	232	var div = document.getElementById(name);
215	if (div.style.display !== 'none') {	233	if (div.style.display !== 'none') {
216	div.style.display = 'none';	234	div.style.display = 'none';
217	}	235	}
218	else {	236	else {
219	div.style.display = 'block';	237	div.style.display = 'block';
220	}	238	}
221	}	239	}
222		240
223		241
224	function readSingleFile(e) {	242	function readSingleFile(e) {
225		243
226	var div0 = document.getElementById('blocklyDiv');	244	var div0 = document.getElementById('blocklyDiv');
227	//if (div0.style.display === 'none') switchTask();	245	//if (div0.style.display === 'none') switchTask();
228		246
229	var file = e.target.files[0];	247	var file = e.target.files[0];
230	if (!file) {	248	if (!file) {
231	return;	249	return;
232	}	250	}
233	var reader = new FileReader();	251	var reader = new FileReader();
234	reader.onload = function(e) {	252	reader.onload = function(e) {
235	var contents = e.target.result;	253	var contents = e.target.result;
236	displayContents(contents);	254	displayContents(contents);
237		255
238	};	256	};
239	reader.readAsText(file);	257	reader.readAsText(file);
240		258
241	}	259	}
242		260
243	function displayContents(contents) {	261	function displayContents(contents) {
244		262
245	workspace.clear();	263	workspace.clear();
246	var xml = Blockly.Xml.textToDom(contents);	264	var xml = Blockly.Xml.textToDom(contents);
247	Blockly.Xml.domToWorkspace(xml, workspace);	265	Blockly.Xml.domToWorkspace(xml, workspace);
248		266
249	}	267	}
250		268
251		269
252	function loadDoc( url ) {	270	function loadDoc( url ) {
253	var xhttp = new XMLHttpRequest();	271	var xhttp = new XMLHttpRequest();
254	xhttp.onreadystatechange = function () {	272	xhttp.onreadystatechange = function () {
255	if (xhttp.readyState == 4 && xhttp.status == 200) {	273	if (xhttp.readyState == 4 && xhttp.status == 200) {
256	return xhttp.responseText;	274	return xhttp.responseText;
257	}	275	}
258	}	276	}
259	xhttp.open("GET", url, false); // !!! should be in synchronous mode	277	xhttp.open("GET", url, false); // !!! should be in synchronous mode
260	xhttp.send();	278	xhttp.send();
261	return xhttp.onreadystatechange();	279	return xhttp.onreadystatechange();
262	}	280	}
263		281
264	function showCode() {	282	function showCode() {
265	// Generate JavaScript code and display it.	283	// Generate JavaScript code and display it.
266	Blockly.JavaScript.INFINITE_LOOP_TRAP = null;	284	Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
267	var code = Blockly.JavaScript.workspaceToCode(workspace);	285	var code = Blockly.JavaScript.workspaceToCode(workspace);
268	//var code = Blockly.JSON.fromWorkspace( workspace );	286	//var code = Blockly.JSON.fromWorkspace( workspace );
269	//var code = Blockly.Xml.domToPrettyText(workspace );	287	//var code = Blockly.Xml.domToPrettyText(workspace );
270	code = code.replace(/\(\|\)/gi, '');	288	code = code.replace(/\(\|\)/gi, '');
271	console.log(code);	289	console.log(code);
272	console.log(code.length);	290	console.log(code.length);
273	alert(code);	291	alert(code);
274		292
275	}	293	}
276		294
277		295
278	function saveBlockly(){	296	function saveBlockly(){
279	// https://eligrey.com/blog/saving-generated-files-on-the-client-side/	297	// https://eligrey.com/blog/saving-generated-files-on-the-client-side/
280		298
281	var xml = Blockly.Xml.workspaceToDom(workspace);	299	var xml = Blockly.Xml.workspaceToDom(workspace);
282	var txt = Blockly.Xml.domToText(xml);	300	var txt = Blockly.Xml.domToText(xml);
283		301
284	// var txt=Blockly.Xml.domToPrettyText(Blockly.Xml.workspaceToDom(Blockly.mainWorkspace)); // exports workspace as pretty xml	302	// var txt=Blockly.Xml.domToPrettyText(Blockly.Xml.workspaceToDom(Blockly.mainWorkspace)); // exports workspace as pretty xml
285	console.log(txt);	303	console.log(txt);
286	var blob = new Blob([txt], {type: "text/xml"});	304	var blob = new Blob([txt], {type: "text/xml"});
287	saveAs(blob, "test.blab2");	305	saveAs(blob, "test.blab2");
288	}	306	}
289		307
290	function loadBlockly(){	308	function loadBlockly(){
291	Blockly.Xml.domToWorkspace(Blockly.mainWorkspace,$("#hiBlocks")[0]); // loads xml from dom into workspace	309	Blockly.Xml.domToWorkspace(Blockly.mainWorkspace,$("#hiBlocks")[0]); // loads xml from dom into workspace
292	}	310	}
293		311
294	function runCode() {	312	function runCode() {
295	// Generate JavaScript code and run it.	313	// Generate JavaScript code and run it.
296	window.LoopTrap = 1000;	314	window.LoopTrap = 1000;
297	Blockly.JavaScript.INFINITE_LOOP_TRAP =	315	Blockly.JavaScript.INFINITE_LOOP_TRAP =
298	'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';	316	'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
299	var code = Blockly.JavaScript.workspaceToCode(workspace);	317	var code = Blockly.JavaScript.workspaceToCode(workspace);
300	Blockly.JavaScript.INFINITE_LOOP_TRAP = null;	318	Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
301	try {	319	try {
302	eval(code);	320	eval(code);
303	} catch (e) {	321	} catch (e) {
304	alert(e);	322	alert(e);
305	}	323	}
306	}	324	}
307		325
308		326
309	</script>	327	</script>
310		328
311	</head>	329	</head>
312	<body>	330	<body>
313	<h1>Belle II Masterclass: Describe process →Run analysis →Fit results →Save/load process locally</h1>	331	<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" /> -->	332	<!-- <input type="button" onclick="showCode();" class="mybutton" value="Show JavaScript" /> -->
315	<input type="button" onclick="~~startTask~~();" class="mybutton" value="Run Analysis" />	333	<input type="button" id="btnstart" onclick="startAction();" class="mybutton" value="Run Analysis" />
316	<input type="button" onclick="stopTask();" class="mybutton" value="Interrupt" />	-
-		334
317	<!-- <input type="button" onclick="switchTask();" class="mybutton" value="Switch between Diagram and Results" /> -->	335	<!-- <input type="button" onclick="switchTask();" class="mybutton" value="Switch between Diagram and Results" /> -->
318	<input type="button" onclick="saveBlockly();" class="mybutton" value="Save Diagram" />	336	<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>	337	<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>	338	<input type="file" style="visibility:hidden;" id="file-input" onClick="this.form.reset()" data-buttonText="Load Diagram"/></form>
321	<br/>	339	<br/>
322	<progress id='progressor' value="0" max='100' style="width:95%"></progress>	340	<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>	341	<span id="percentage" style="text-align:right; display:block; margin-top:5px;">0</span>
324	<p id="sbar" ></div>	342	<p id="sbar" ></div>
325		343
326	<br />	344	<br />
327		345
328	<div id="blocklyDiv" style="height:500px; width:95%"></div><br />	346	<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>	347	<div id="results" style="border:1px solid #000; padding:10px; width:95%; height:80% ; overflow:auto; background:#eee;"></div>
330	<br />	348	<br />
331		349
332	<script>	350	<script>
333		351
334	document.getElementById('file-input').addEventListener('change', readSingleFile, false);	352	document.getElementById('file-input').addEventListener('change', readSingleFile, false);
335		353
336	// var toolbox = document.getElementById("toolbox");	354	// var toolbox = document.getElementById("toolbox");
337	var toolbox = loadDoc("toolbox.xml");	355	var toolbox = loadDoc("toolbox.xml");
338		356
339	var options = {	357	var options = {
340	toolbox : toolbox,	358	toolbox : toolbox,
341	collapse : true,	359	collapse : true,
342	comments : true,	360	comments : true,
343	disable : true,	361	disable : true,
344	maxBlocks : Infinity,	362	maxBlocks : Infinity,
345	trashcan : true,	363	trashcan : true,
346	horizontalLayout : false,	364	horizontalLayout : false,
347	toolboxPosition : 'start',	365	toolboxPosition : 'start',
348	css : true,	366	css : true,
349	/* media : '../media/', */	367	/* media : '../media/', */
350	rtl : false,	368	rtl : false,
351	scrollbars : true,	369	scrollbars : true,
352	sounds : true,	370	sounds : true,
353	oneBasedIndex : true,	371	oneBasedIndex : true,
354	zoom : {	372	zoom : {
355	controls : true,	373	controls : true,
356	wheel : true,	374	wheel : true,
357	startScale : 1,	375	startScale : 1,
358	maxcale : 3,	376	maxcale : 3,
359	minScale : 0.3	377	minScale : 0.3
360	},	378	},
361	grid:	379	grid:
362	{spacing: 20,	380	{spacing: 20,
363	length: 3,	381	length: 3,
364	colour: '#ccc',	382	colour: '#ccc',
365	snap: true}	383	snap: true}
366	};	384	};
367		385
368	/* Inject your workspace */	386	/* Inject your workspace */
369	var workspace = Blockly.inject('blocklyDiv', options);	387	var workspace = Blockly.inject('blocklyDiv', options);
370		388
371	/* Load Workspace Blocks from XML to workspace. Remove all code below if no blocks to load */	389	/* Load Workspace Blocks from XML to workspace. Remove all code below if no blocks to load */
372		390
373	/* TODO: Change workspace blocks XML ID if necessary. Can export workspace blocks XML from Workspace Factory. */	391	/* TODO: Change workspace blocks XML ID if necessary. Can export workspace blocks XML from Workspace Factory. */
374	//var workspaceBlocks = document.getElementById("workspaceBlocks");	392	//var workspaceBlocks = document.getElementById("workspaceBlocks");
375	/* Load blocks to workspace. */	393	/* Load blocks to workspace. */
376	// Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);	394	// Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);
377		395
378	<?php	396	<?php
379		397
380	if (isset($_GET["decay"])){	398	if (isset($_GET["decay"])){
381	$decay = $_GET["decay"];	399	$decay = $_GET["decay"];
382	} else {	400	} else {
383	$decay = "data/sample.blab2";	401	$decay = "data/sample.blab2";
384	}	402	}
385	// echo "var workspaceBlocks = loadDoc( \"$decay\");"	403	// echo "var workspaceBlocks = loadDoc( \"$decay\");"
386	/* Load blocks to workspace. */	404	/* Load blocks to workspace. */
387	echo "displayContents( loadDoc( \"$decay\"));"	405	echo "displayContents( loadDoc( \"$decay\"));"
388		406
389	?>	407	?>
390		408
391	//displayContents(workspaceBlocks);	409	//displayContents(workspaceBlocks);
392		410
393		411
394		412
395	</script>	413	</script>
396	<div id="drawing"></div>	414	<div id="drawing"></div>
397	</body>	415	</body>
398	<a href="update.php">Update code</a>	416	<a href="update.php">Update code</a>
399	</html>	417	</html>
400		418

Subversion Repositories f9daq

(root)/belle2/masterclass/index.php @ 319 – Rev 275 → 302