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.innerHTML += message + '<br>';
   r.insertAdjacentHTML('beforeend', message +'<br/>');
  // r.scrollTop = r.scrollHeight;
}
 
function showStat(message) {
    var r = document.getElementById('sbar');
    r.innerHTML = message ;
}
 
 
 
function startGUI() {
        // d3.select('html').style('height','100%');
        // d3.select('body').style({'min-height':'100%', 'margin':'0px', "overflow" :"hidden"});
        var r = document.getElementById('results');
        r.style.display = 'none';
        var r0 = document.getElementById('sbar');
        r0.style.display = 'none';
 
}
 
 
var cnt=0;
function startTask() {
       
        var r = document.getElementById('results');
        if ( r.style.display == 'none' ) switchTask();
        r.innerHTML = '';
        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) {
var result = JSON.parse( e.data );
 
        if(e.lastEventId == 'CLOSE') {
            addLog('Received CLOSE closing');
            es.close();
            var pBar = document.getElementById('progressor');
            pBar.value = pBar.max; //max out the progress bar
            var perc = document.getElementById('percentage');
            perc.innerHTML   =  "100%";
            perc.style.width = (Math.floor(pBar.clientWidth * (0.5)) + 15) + 'px';
        }   else {
            if(e.lastEventId == '0' ) {
              addLog(result.message);
            } else {
              if(e.lastEventId == '2' ) {
                showStat(result.message);
              } else {
                var jsonobj = JSROOT.parse(result.message);
                var sframe = 'rh'+ (cnt++);
                addLog('ROOT_JSON object '+ sframe );
                //var r = document.getElementById('results');
                var r = document.getElementById('drawing');
                r.insertAdjacentHTML('beforeend', '<div id="' + sframe +'" style="width:60%; height:60%;"></div><br/>');
             
                var frame = document.getElementById(sframe);
                //JSROOT.draw(frame, jsonobj, "hist");
                JSROOT.draw(sframe, jsonobj, "hist");
                //addLog('JSON :' + JSON.stringify(jsonobj)+ '<br>');
 
                frame.scrollIntoView();
              }
            }
            var pBar = document.getElementById('progressor');
            pBar.value = result.progress;
            var perc = document.getElementById('percentage');
            perc.innerHTML   = result.progress  + "%";
            perc.style.width = (Math.floor(pBar.clientWidth * (result.progress/100)) + 15) + 'px';
        }
}
 
 
 
function stopTask() {
    es.close();
    addLog('Interrupted');
}
 
       
 
    function switchTask() {
    var div  = document.getElementById('results');
    var divs  = document.getElementById('sbar');
    var div0 = document.getElementById('blocklyDiv');
 
    if (div.style.display !== 'none') {
        div.style.display = 'none';
        divs.style.display = 'none';
        div0.style.display = 'block';
    }
    else {
        div.style.display = 'block';
        divs.style.display = 'block';
        div0.style.display = 'none';
    }
 
  }
 
 
function readSingleFile(e) {
 
  var div0 = document.getElementById('blocklyDiv');
  if (div0.style.display === 'none') switchTask();
 
  var file = e.target.files[0];
  if (!file) {
   return;
  }
  var reader = new FileReader();
  reader.onload = function(e) {
    var contents = e.target.result;
    displayContents(contents);
 
  };
  reader.readAsText(file);
 
}
 
function displayContents(contents) {
 
workspace.clear();
var xml = Blockly.Xml.textToDom(contents);
Blockly.Xml.domToWorkspace(xml, workspace);
 
}
 
 
function loadDoc( url ) {
  var xhttp = new XMLHttpRequest();
  xhttp.onreadystatechange = function () {
     if (xhttp.readyState == 4 && xhttp.status == 200) {
        return xhttp.responseText;
     }
  }
  xhttp.open("GET", url, false); // !!! should be in synchronous mode 
  xhttp.send();
  return xhttp.onreadystatechange();
}
 
 function showCode() {
      // Generate JavaScript code and display it.
      Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
      var code = Blockly.JavaScript.workspaceToCode(workspace);
          //var code = Blockly.JSON.fromWorkspace( workspace ); 
          //var code =  Blockly.Xml.domToPrettyText(workspace );
      code = code.replace(/\(|\)/gi, '');
      console.log(code);
      console.log(code.length);  
      alert(code);
 
  }
 
 
  function saveBlockly(){
    //  https://eligrey.com/blog/saving-generated-files-on-the-client-side/
 
    var xml = Blockly.Xml.workspaceToDom(workspace);
    var txt = Blockly.Xml.domToText(xml);
   
//  var txt=Blockly.Xml.domToPrettyText(Blockly.Xml.workspaceToDom(Blockly.mainWorkspace)); // exports workspace as pretty xml
  console.log(txt);
  var blob = new Blob([txt], {type: "text/xml"});
  saveAs(blob, "test.blab2");
  }
 
  function loadBlockly(){
    Blockly.Xml.domToWorkspace(Blockly.mainWorkspace,$("#hiBlocks")[0]); // loads xml from dom into workspace  
  }
 
    function runCode() {
      // Generate JavaScript code and run it.
      window.LoopTrap = 1000;
      Blockly.JavaScript.INFINITE_LOOP_TRAP =
          'if (--window.LoopTrap == 0) throw "Infinite loop.";\n';
      var code = Blockly.JavaScript.workspaceToCode(workspace);
      Blockly.JavaScript.INFINITE_LOOP_TRAP = null;
      try {
        eval(code);
      } catch (e) {
        alert(e);
      }
    }
   
 
 
 
 
 
  </script>
                 
</head>
<body>
  <h1>Belle II Masterclass: Define process &rarr;Analyse data &rarr;Visualise results &rarr;Save/load process locally</h1>
<!--        <input type="button" onclick="showCode();"  class="mybutton" value="Show JavaScript" /> -->
        <input type="button" onclick="startTask();"  class="mybutton" value="Run Analysis" />
        <input type="button" onclick="stopTask();"  class="mybutton" value="Interrupt" />
        <input type="button" onclick="switchTask();"  class="mybutton" value="Switch between Diagram and Results" />
        <input type="button" onclick="saveBlockly();"  class="mybutton" value="Save Diagram" />
        <form style="display:inline;"><label for="file-input" class="mybutton" style="">Load Diagram</label>
          <input type="file" style="visibility:hidden;" id="file-input" onClick="this.form.reset()" data-buttonText="Load Diagram"/></form>
        <br />
       
       
 
        <progress id='progressor' value="0" max='100' style="width:95%"></progress>  
        <span id="percentage" style="text-align:right; display:block; margin-top:5px;">0</span>
        <p id="sbar" ></div>     
 
 
        <br />
 
 <div id="blocklyDiv" style="height:500px; width:95%"></div><br />
 <div id="results" style="border:1px solid #000; padding:10px; width:95%; height:80% ; overflow:auto; background:#eee;"></div>
  <br />
 
  <script>
   
    document.getElementById('file-input').addEventListener('change', readSingleFile, false);
 
//  var toolbox = document.getElementById("toolbox");
  var toolbox = loadDoc("toolbox.xml");
 
var options = {
        toolbox : toolbox,
        collapse : true,
        comments : true,
        disable : true,
        maxBlocks : Infinity,
        trashcan : true,
        horizontalLayout : false,
        toolboxPosition : 'start',
        css : true,
/*      media : '../media/', */
        rtl : false,
        scrollbars : true,
        sounds : true,
        oneBasedIndex : true,
        zoom : {
                controls : true,
                wheel : true,
                startScale : 1,
                maxcale : 3,
                minScale : 0.3
  },
  grid:
  {spacing: 20,
  length: 3,
  colour: '#ccc',
  snap: true}
};
 
/* Inject your workspace */
var workspace = Blockly.inject('blocklyDiv', options);
 
/* Load Workspace Blocks from XML to workspace. Remove all code below if no blocks to load */
 
/* TODO: Change workspace blocks XML ID if necessary. Can export workspace blocks XML from Workspace Factory. */
//var workspaceBlocks = document.getElementById("workspaceBlocks"); 
/* Load blocks to workspace. */
//    Blockly.Xml.domToWorkspace(workspaceBlocks, workspace);
 
<?php
 
 if (isset($_GET["decay"])){
   $decay =  $_GET["decay"];
 } else  {
   $decay = "data/sample.blab2";
 }
// echo "var workspaceBlocks = loadDoc( \"$decay\");"
/* Load blocks to workspace. */
 echo "displayContents( loadDoc( \"$decay\"));"
 
?>
 
//displayContents(workspaceBlocks);
   
 
 
</script>
<div id="drawing" style="width:800px; height:600px"></div>
</body>
</html>
 

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

Subversion Repositories f9daq

(root)/belle2/masterclass/index.php – Rev 266 → 267