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


<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Belle II Particle Discovery</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 toProcess() {
   window.location.hash='#btnstart';
   //window.location.hash='#blocklyDiv';
}
 
function showDebug() {
   var btnstart = document.getElementById('btndebug');
   var div  = document.getElementById('results');
 
   if (btnstart.value=== "Show Text"){
     btnstart.value = "Hide Text";
     div.style.display = 'block';
   } else {
     btnstart.value = "Show Text";
     div.style.display = 'none';
   }
}
 
function showLicense() {
  window.location.href="license.html";
}
 
 
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" />' );
                  r.insertAdjacentHTML('beforeend','&nbsp;<input type="button" onclick="toProcess();"  class="mybutton" value="To Process" /><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 Particle Discovery: Describe process &rarr;Analyse &rarr;Fit results &rarr;Discover</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="saveBlockly();"  class="mybutton" value="Save Diagram" />
        <form style="display:inline;"><label for="file-input" class="mybutton" style="">Load Diagram</label>
        <input type="button" id="btndebug" onclick="showDebug();"  class="mybutton" value="Hide Text" />
        &nbsp;&nbsp;&nbsp;<input type="button" id="btnhelp" onclick="window.location.href='BelleIILabManual.pdf';"  class="mybutton"  value="Help" />
        &nbsp;&nbsp;&nbsp;<input type="button" id="btnabout" onclick="showLicense();"  class="mybutton"  value="About" />
        <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="results" style="border:1px solid #000; padding:10px; width:95%; height:80% ; overflow:auto; background:#eee;"></div>
  <br />
 <div id="blocklyDiv" style="height:900px; width:95%"></div><br />
 
  <script>
   
    document.getElementById('file-input').addEventListener('change', readSingleFile, false);
 
  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}
};
 
var workspace = Blockly.inject('blocklyDiv', options);
 
<?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>
<?php
$hostname = gethostname();
if ($hostname != "belle2.ijs.si") {
  echo "<a href='update.php'>Update code from the central server</a>";
}
?>
</body>
</html>
 

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

Subversion Repositories f9daq

(root)/belle2/masterclass/index.php – Rev 324 → 325