nodeskini 1.0.5 → 1.0.7

package/serveur/OSCandMidi.mjs

@@ -2,7 +2,7 @@
  * @fileOverview OSC and Midi control
  * <BR> See: http://www.indiana.edu/~emusic/cntrlnumb.html,
  * http://www.ccarh.org/courses/253/handout/controllers/
- * @copyright (C) 2022-2024 Bertrand Petit-Hédelin
+ * @copyright (C) 2022-2026 Bertrand Petit-Hédelin
  *
  *   This program is free software: you can redistribute it and/or modify
  *   it under the terms of the GNU General Public License as published by
@@ -17,7 +17,7 @@
  *   You should have received a copy of the GNU General Public License
  *   along with this program.  If not, see <https://www.gnu.org/licenses/>.
   * @author Bertrand Petit-Hédelin <bertrand@hedelin.fr>
- * @version 1.4
+ * @version 1.5
  */
 "use strict"
 import { createRequire } from 'module';
@@ -159,7 +159,7 @@ export function sendOSCProcessing(message, val1, val2) {
 }
 
 /**
- * Send a note on through OSC
+ * Send a note on through OSC or MIDI
  * @param  {number} bus
  * @param  {number} channel
  * @param  {number} note
@@ -178,6 +178,30 @@ export function sendNoteOn(bus, channel, note, velocity) {
   }
 };
 
+/**
+ * Send a note on through OSC or MIDI to activate a clip
+ * @param  {number} note
+ */
+export function convertAndActivateClip(note){
+  let buf;
+
+  if (debug1) console.log("INFO: LogosOSCandMidiLocal : convertAndActivateClip: sending MIDI: " + note);
+  let channel = Math.floor(note / 127) + 1;
+  note = note % 127;
+  if (channel > 15) {
+      if (debug1) console.log("ERR: LogosOSCandMidiLocal : convertAndActivateClip: Nombre de canaux midi dépassé.");
+          return -1;
+  }
+
+  if (directMidi) {
+    midiOutput.sendMessage([144 + channel, note, 100]);
+  } else {
+  buf = osc.toBuffer({ address: "/noteOn" , args: [ par.busMidiAbleton, channel, note, 127 ]  });    
+  return udp.send(buf, 0, buf.length, par.outportForMIDI, par.remoteIPAddressSound,
+    function(err) { if (err !== null) console.log("ERR: logosOSCandMidi: convertAndActivateClip: Erreur udp send: ", err); });
+  }
+};
+
 /**
  * Send a note off through OSC
  * @param  {number} bus

package/serveur/controleDAW.mjs

@@ -649,7 +649,8 @@ export function cleanQueues() {
   messageLog.type = "VIDAGE FILES ATTENTES";
   logInfoDAW(messageLog);
   if (debug) console.log("controleDAW: cleanQueues");
-  serv.broadcast(JSON.stringify({ type: "etatDeLaFileAttente", value: filesDattente }));
+  // Envoyer le même format que displayQueues() : un array vide car les files sont vidées
+  serv.broadcast(JSON.stringify({ type: "etatDeLaFileAttente", value: [] }));
 }
 
 /**

package/serveur/groupeClientsSons.mjs

@@ -67,7 +67,7 @@ var midimix;
 var orchestration;
 var groupesClient;
 export var matriceDesPossibles;
-var timerDivision; // Nombre de pulses par tick, doit rester undefined si pas à jour par les automates
+let timerDivision; // Nombre de pulses par tick, doit rester undefined si pas à jour par les automates
 var nbeDeGroupesSons = 0;
 var nombreDePatternsPossibleEnListe = [[1, 255]]; // init pour client memorySortable
 
@@ -81,6 +81,7 @@ var groupeName = "";
 // On créé ce fichier à partir du xml de Blockly
 var myReactOrchestration = "../myReact/orchestrationHH.mjs";
 var socketControleur;
+var socketQueueViewer;
 var computeScorePolicy = 0;
 var computeScoreClass = 0;
 
@@ -341,6 +342,7 @@ export function setComputeScoreClass(scoreClass) {
  * @param {number} timer division
  */
 export function setTimerDivision(timer) {
+  if(debug1) console.log("INFO: groupecliensSons: setTimerDivision:", timer);
   timerDivision = timer;
 }
 
@@ -352,6 +354,14 @@ export function setSocketControleur(socket) {
   socketControleur = socket;
 }
 
+/**
+ * Set the queueViewer socket
+ * @param {socket} queueViewer socket
+ */
+export function setSocketQueueViewer(socket) {
+  socketQueueViewer = socket;
+}
+
 /**
  * Call the reset of the rcoehstration matrix.
  */
@@ -490,7 +500,7 @@ export function informSelecteurOnMenuChange(groupe, sons, status) {
 }
 
 /**
- * To display the tick on the controler client.
+ * To display the tick on the controler and queueViewer clients.
  * @param {number} tick 
  */
 export function setTickOnControler(tick) {
@@ -505,6 +515,19 @@ export function setTickOnControler(tick) {
     } else {
       if (debug) console.log("ERR: groupecliensSons: informControleur: socketControleur not ready;", socketControleur.readyState);
     }
+  }
+
+     // Send the tick to queueViewer.
+  if (socketQueueViewer !== undefined) {
+    if (socketQueueViewer.readyState == 1) {
+      try {
+        socketQueueViewer.send(JSON.stringify(message));
+      } catch (err) {
+        if (debug) console.log("ERR: groupecliensSons: send setTickAutomate to queueViewer", err);
+      }
+    } else {
+      if (debug) console.log("ERR: groupecliensSons: informControleur: socketControleur not ready;", socketControleur.readyState);
+    }
   }
 }
 
@@ -884,6 +907,7 @@ export async function makeOneAutomatePossibleMachine() {
   if (debug) console.log("groupeClientsSons.js: makeOneAutomatePossibleMachine", par.groupesDesSons);
   
   try {
+    //C'est l'import qui compile le code HH en machine HipHop.js
     const orchestration = await import(myReactOrchestration + '?foo=bar' + tempIndex);
     tempIndex++;
     orchestration.setServ(serv, DAW, this, oscMidiLocal, midimix);   
@@ -891,7 +915,7 @@ export async function makeOneAutomatePossibleMachine() {
 
     makeSignalsListeners(machine);
     
-    if (debug) console.log("------------- groupecliensSons: makeOneAutomatePossibleMachine:machine: ", machine);
+    if (debug) console.log("------------- groupecliensSons: makeOneAutomatePossibleMachine:par: ", par);
     
     return machine;
   } catch (err) {

package/serveur/ipConfig.json

@@ -19,6 +19,6 @@
   "outportProcessing": 10000,
   "outportLumiere": 7700,
   "inportLumiere": 9000,
-  "sessionPath": "./pieces/opus/",
-  "piecePath" : "./pieces/opus/"
+  "sessionPath": "./pieces/etudesHarmonie/",
+  "piecePath" : "./pieces/etudesHarmonie/"
 }

package/serveur/skiniParametres.js

@@ -1,5 +1,5 @@
 
-// Generated by Skini: Tue Dec 23 2025 18:00:58 GMT+0100 (heure normale d’Europe centrale)
+// Generated by Skini: Thu May 28 2026 10:24:15 GMT+0200 (heure d’été d’Europe centrale)
 "use strict"
 
 // A utiliser si Processing en passerelle
@@ -19,8 +19,8 @@ exports.english = true;
   Si ces valeurs ne sont pas données c'est celle qui
   sont dans le simulateur qui sont utilisées
 ************************************/
-exports.tempoMax = 500; // En ms
-exports.tempoMin = 400; // En ms
+exports.tempoMax = 3000; // En ms
+exports.tempoMin = 2900; // En ms
 exports.limiteDureeAttente = 33; // En pulsations
 
 /********************************************************
@@ -54,7 +54,7 @@ Si autre ... à créer...
 ATTENTION: NE JAMAIS UTILISER EN SITUATION D'INTERACTION SI L'ALGORITHME
 PEUT SUPPRIMER DES PATTERNS DES FIFOs
 *****************************************/
-exports.algoGestionFifo = 0;
+exports.algoGestionFifo = 2;
 exports.shufflePatterns = false;
 /*****************************************************************************
 
@@ -83,13 +83,58 @@ exports.synchroSkini = false;
 exports.timer = 500;
 exports.gameOSCSignals = false;
 
-exports.sensorOSC = true;
-exports.tempoSensorsInit = [100,100,100,100,20,20,20,20,20,20,20,20];
-exports.sensorsSensibilities = [200,200,200,200,200,5,5,5,5,5,5,5];
+exports.sensorOSC = false;
+exports.tempoSensorsInit = [0,0,0,0,0,0,0,0,0,0,0,0];
+exports.sensorsSensibilities = [5,5,5,5,5,5,5,5,5,5,5,5];
 
 const groupesDesSons = [
-  [ "toto",1, "group",100,100,3,"",[],1 ],
-  [ "titi",2, "group",200,200,3,"",[],1 ],
-  [ "tutu",2, "group",300,300,3,"",[],1 ],
+  [ "PianoC",0, "group",100,100,5,"#5F6262",[],1 ],
+  [ "PianoEb",1, "group",200,100,5,"#5F6262",[],1 ],
+  [ "PianoFmin",2, "group",300,100,5,"#5F6262",[],1 ],
+  [ "FluteC1",3, "tank",400,100,1,"#5F6262",[],1 ],
+  [ "FluteC2",5, "tank",,,1,"",[],1 ],
+  [ "FluteC3",6, "tank",,,1,"",[],1 ],
+  [ "FluteC4",7, "tank",,,1,"",[],1 ],
+  [ "FluteC5",8, "tank",,,1,"",[],1 ],
+  [ "FluteC6",9, "tank",,,1,"",[],1 ],
+  [ "FluteC7",10, "tank",,,1,"",[],1 ],
+  [ "FluteC8",11, "tank",,,1,"",[],1 ],
+  [ "FluteC9",12, "tank",,,1,"",[],1 ],
+  [ "FluteC10",13, "tank",,,1,"",[],1 ],
+  [ "FluteC11",14, "tank",,,1,"",[],1 ],
+  [ "FluteC12",15, "tank",,,1,"",[],1 ],
+  [ "FluteC13",16, "tank",,,1,"",[],1 ],
+  [ "FluteC14",17, "tank",,,1,"",[],1 ],
+  [ "FluteC15",18, "tank",,,1,"",[],1 ],
+  [ "FluteEb1",19, "tank",100,200,2,"#BCA104",[],1 ],
+  [ "FluteEb2",20, "tank",,,2,"",[],1 ],
+  [ "FluteEb3",21, "tank",,,2,"",[],1 ],
+  [ "FluteEb4",22, "tank",,,2,"",[],1 ],
+  [ "FluteEb5",23, "tank",,,2,"#039879",[],1 ],
+  [ "FluteEb6",24, "tank",,,2,"#039879",[],1 ],
+  [ "FluteEb7",25, "tank",,,2,"#039879",[],1 ],
+  [ "FluteEb8",26, "tank",,,2,"",[],1 ],
+  [ "FluteEb9",27, "tank",,,2,"",[],1 ],
+  [ "FluteEb10",28, "tank",,,2,"",[],1 ],
+  [ "FluteEb11",29, "tank",,,2,"",[],1 ],
+  [ "FluteEb12",30, "tank",,,2,"",[],1 ],
+  [ "FluteEb13",31, "tank",,,2,"",[],1 ],
+  [ "FluteEb14",32, "tank",,,2,"",[],1 ],
+  [ "FluteEb15",33, "tank",,,2,"",[],1 ],
+  [ "FluteFmin1",34, "tank",200,200,3,"#BCA104",[],1 ],
+  [ "FluteFmin2",35, "tank",,,3,"",[],1 ],
+  [ "FluteFmin3",36, "tank",,,3,"",[],1 ],
+  [ "FluteFmin4",37, "tank",,,3,"",[],1 ],
+  [ "FluteFmin5",38, "tank",,,3,"",[],1 ],
+  [ "FluteFmin6",39, "tank",,,3,"",[],1 ],
+  [ "FluteFmin7",40, "tank",,,3,"",[],1 ],
+  [ "FluteFmin8",41, "tank",,,3,"",[],1 ],
+  [ "FluteFmin9",42, "tank",,,3,"",[],1 ],
+  [ "FluteFmin10",43, "tank",,,3,"",[],1 ],
+  [ "FluteFmin11",44, "tank",,,3,"",[],1 ],
+  [ "FluteFmin12",45, "tank",,,3,"",[],1 ],
+  [ "FluteFmin13",46, "tank",,,3,"",[],1 ],
+  [ "FluteFmin14",47, "tank",,,3,"",[],1 ],
+  [ "FluteFmin15",48, "tank",,,3,"",[],1 ],
   ];
 exports.groupesDesSons = groupesDesSons;

package/serveur/utilsSkini.mjs

@@ -31,7 +31,7 @@ let debug1 = true;
 export function creationInterfacesOUT(groupes) {
   if (groupes !== undefined) {
     return groupes.map(function (k) {
-         return k[0] + "OUT";
+      return k[0] + "OUT";
     })
   };
 }

package/serveur/websocketServer.mjs

@@ -265,6 +265,7 @@ let offsetDivision = 0;
 let compteurDivisionMesure = 0;
 let nbeDeGroupesSons = 0;
 let socketControleur;
+let socketQueueViewer;
 let groupeName = "";
 let automatePossibleMachine;
 
@@ -1326,7 +1327,8 @@ maybe an hiphop compile Error`);
           }));
           break;
 
-        /*	    case "DAWStartClip":
+        /* Pas à jour dans la version node.js
+        case "DAWStartClip":
                 pseudo = msgRecu.pseudo;
                 if (msgRecu.clipChoisi === undefined ) break; // Protection si pas de selection sur le client
                     if (debug) console.log("Web Socket Serveur: DAWStartClip: clipChoisi", msgRecu.clipChoisi, " pour ID: ", msgRecu.id);
@@ -1361,8 +1363,8 @@ maybe an hiphop compile Error`);
               messageLog.pseudo = msgRecu.pseudo;
               messageLog.text = msg.text;
               logInfoSocket(messageLog);
-              break;*/
-
+              break;
+        */
         case "dureeDuTickHorlogeMidi": // Reçu de Processing chaque 24 pulses de l'horloge Midi (une noire)
           receivedTickFromSynchro();
           break;
@@ -1871,6 +1873,14 @@ maybe an hiphop compile Error`);
           ws.id = msgRecu.id;
           if (debug) console.log("INFO: websocketserbeur: startSpectateur: ", msgRecu.id);
 
+          // On ne permet donc qu'un seul queueViewer.
+          if (msgRecu.text === "queueViewer") {
+            if (debug1) console.log("INFO: webSocketServeur: startSpectateur: un queueViewer connecté");
+            socketQueueViewer = ws;
+            groupesClientSon.setSocketQueueViewer(ws);
+            break; // Pas besoin d'aller plus loin dans ce cas
+          }
+
           // On ne permet donc qu'un seul controleur.
           // Attention: La connexion d'un deuxième contrôleur, fait perdre la première et réinitialise la matrice des possible.
           if (msgRecu.text === "controleur") {
@@ -1882,7 +1892,7 @@ maybe an hiphop compile Error`);
               type: "skiniParametres",
               value: par
             }));
-            break;
+            break; // Pas besoin d'aller plus loin dans ce cas
           }
 
           if (msgRecu.text === "pieceParameters") {

package/skini.mjs

@@ -130,6 +130,10 @@ function startSkini() {
     res.sendFile(path.join(__dirname + '/client/parametrage/parametrage.html'));
   });
 
+  app.get('/queueViewer', function (req, res) {
+    res.sendFile(path.join(__dirname + '/client/queueViewer/queue.html'));
+  });
+
   var port = ipConfig.webserveurPort;
   var addressServer = ipConfig.serverIPAddress;
   app.listen(port, () => {

package/blocklySkini/archive/blocklyControleur.js

@@ -1,87 +0,0 @@
-"use hiphop"
-"use hopscript"
-
-require.lang = "hopscript";
-require("./scripts/surLeServeurSkini.js", "hiphop");
-var par = require('../serveur/logosParametres');
-
-// Services dans d'autres fichiers, il faut aussi les déclarer ici
-service printServeurFromBlockly();
-service getFileBlockly();
-service saveBlocksServer();
-service generateHHcode();
-
-//console.log( "For Blockly, gGo to \"http://localhost:%d/hop/block\"", hop.port );
-
-service block() {
-    return <html>
-    <head>
-    	<link rel="stylesheet" href=${require.resolve("./styles/index.css")}>
-    	<script src="hiphop" lang="hopscript"/>
-    	// Déclarations nécessaires pour faire les requires sur le client.
-    	<script src="./scripts/hiphop_blocks.js" lang="hiphop"/>
-    	<script src="./scripts/main2.js" lang="hiphop"/>
-    	<script src='./clientControleurBlocly.js' lang='hopscript'/>
-      	<script src='../serveur/logosParametres' lang='hopscript'/>
-        <meta charset="UTF-8" name="viewport" />
-  		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-  		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-
-	<title>Blockly and Hop.js</title>
-    </head>
-    ~{
-    	var mainProg, clientControleur, printServeur;
-        window.onload = function() {
-        	// Require correspondant aux déclarations ci-dessus
-        	require('./scripts/hiphop_blocks.js', "hiphop");
-        	mainProg = require('./scripts/main2.js');
-        	clientControleur = require('./clientControleurBlocly.js');
-        	printServeur = ${printServeurFromBlockly};
-        	console.log("mainprog");
-        	printServeur("-- Blockly for Skini started --").post();
-        	mainProg.init();
-        	clientControleur.init(${hop.port}, ${par});
-        }
-    }
-	<body>
-		<table>
-			<thead>
-				<tr>
-					<td>
-					  <header class="mdl-color--cyan-500">
-					    <h1 class="mode-maker">Orchestration Skini</h1>
-					    <div id="menubar">
-	   						<label for="loadFile" class="small button">Select Blockly File</label>
-    						<input type="file" id="loadFile" onchange=~{mainProg.loadBlocks();} />
-
-							<button class="small button" id="buttonSave" onclick=~{mainProg.saveBlocksAndGenerateHH();} >Save Blocks</button>
-							<input class="inputText" type="text" id="saveFile" />
-							<input class="inputText" type="text" id="consoleArea" />
-
-							<button class="small button" id="buttonLoadAbleton1" onclick=~{clientControleur.loadAbleton(1);} >ORCH1</button>
-							<button class="small button" id="buttonLoadAbleton2" onclick=~{clientControleur.loadAbleton(2);} >ORCH2</button>
-							<button class="small button" id="buttonLoadAbleton3" onclick=~{clientControleur.loadAbleton(3);} >ORCH3</button>
-
-							<button  id="buttonStopAutomate" class="small button" style="display:none"  onclick=~{clientControleur.stopAutomate();} >AUT OFF</button>
-      						<button  id="buttonStartAutomate" class="small button"  onclick=~{clientControleur.startAutomate();} >AUT ON</button>
-
-				        </div>
-					  </header>
-					</td>
-				</tr>
-			</thead>
-			<tbody>	
-				<tr>
-					<td id="blocklyArea"></td>
-				</tr>
-			</tbody>
-		</table>
-
-		<div id="blocklyDiv" style="position: absolute"></div>
-	  	<script src=${block.resource("./blockly/blockly.min.js")}></script>
-		<script src=${block.resource("./blockly/javascript_compressed.js")}></script>
-	</body>
-   	</html>
-};
-exports.block = block;
-

package/blocklySkini/archive/blocklySkini.js

@@ -1,84 +0,0 @@
-/**************************************************
-
-Editeur Skini en ligne avec Blockly
-
-© Copyright 2017-2021, Bertrand Petit-Hédelin
-
-****************************************************/
-
-"use hiphop"
-"use hopscript"
-
-require.lang = "hopscript";
-require("./scripts/surLeServeurSkini.js", "hiphop");
-
-// Services dans d'autres fichiers, il faut aussi les déclarer ici
-service printServeurFromBlockly();
-service getFileBlockly();
-service saveBlocksServer();
-service generateHHcode();
-
-//console.log( "For Blockly, gGo to \"http://localhost:%d/hop/block\"", hop.port );
-
-service block() {
-    return <html>
-    <head>
-    	<link rel="stylesheet" href=${require.resolve("./styles/index.css")}>
-    	<script src="hiphop" lang="hopscript"/>
-    	// Déclarations nécessaires pour faire les requires sur le client.
-    	<script src="./scripts/hiphop_blocks.js" lang="hiphop"/>
-    	<script src="./scripts/main2.js" lang="hiphop"/>
-        <meta charset="UTF-8" name="viewport" />
-  		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-  		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Blockly and Hop.js</title>
-    </head>
-    ~{
-    	var mainProg;
-        window.onload = function() {
-        	// Require correspondant aux déclarations ci-dessus
-        	require('./scripts/hiphop_blocks.js', "hiphop");
-        	mainProg = require('./scripts/main2.js');
-        	var printServeur = ${printServeurFromBlockly};
-        	console.log("mainprog");
-        	printServeur("-- Blockly for Skini started --").post();
-        	mainProg.init();
-        }
-    }
-	<body>
-		<table>
-			<thead>
-				<tr>
-					<td>
-					  <header class="mdl-color--cyan-500">
-					    <h1 class="mode-maker">Orchestration Skini</h1>
-					    <div id="menubar">
-					    	<!--
-							<button class="small button" id="buttonGenerate" onclick=~{mainProg.save();} >Generate HipHop</button>
-							-->
-	   						<label for="loadFile" class="small button">Select Blockly File</label>
-    						<input type="file" id="loadFile" onchange=~{mainProg.loadBlocks();} />
-
-							<button class="small button" id="buttonSave" onclick=~{mainProg.saveBlocksAndGenerateHH();} >Save Blocks</button>
-							<input class="inputText" type="text" id="saveFile" />
-							<input class="inputText" type="text" id="consoleArea" />
-				        </div>
-					  </header>
-					</td>
-				</tr>
-			</thead>
-			<tbody>	
-				<tr>
-					<td id="blocklyArea"></td>
-				</tr>
-			</tbody>
-		</table>
-
-		<div id="blocklyDiv" style="position: absolute"></div>
-	  	<script src=${block.resource("./blockly/blockly.min.js")}></script>
-		<script src=${block.resource("./blockly/javascript_compressed.js")}></script>
-	</body>
-   	</html>
-};
-exports.block = block;
-

package/blocklySkini/archive/blocklyhop.js

@@ -1,75 +0,0 @@
-"use hiphop"
-"use hopscript"
-
-require.lang = "hopscript";
-require("./scripts/surLeServeur.js", "hiphop");
-
-
-// Services dans d'autres fichiers, il faut aussi les déclarer ici
-service printServeur();
-//service executeHHServeur();
-
-console.log( "Go to \"http://localhost:%d/hop/block\"", hop.port );
-
-service block() {
-    return <html>
-    <head>
-    	<link rel="stylesheet" href=${require.resolve("./styles/index.css")}>
-    	<script src="hiphop" lang="hopscript"/>
-    	// Déclarations nécessaires pour faire les requires sur le client.
-    	<script src="./scripts/hiphop_blocks.js" lang="hiphop"/>
-    	<script src="./scripts/main2.js" lang="hiphop"/>
-        <meta charset="UTF-8" name="viewport" />
-  		<meta http-equiv="X-UA-Compatible" content="IE=edge">
-  		<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<title>Blockly and Hop.js</title>
-    </head>
-    ~{
-    	var mainProg;
-        window.onload = function() {
-        	// Require correspondant aux déclarations ci-dessus
-        	require('./scripts/hiphop_blocks.js', "hiphop");
-        	mainProg = require('./scripts/main2.js');
-        	var printServeur = ${printServeur};
-        	console.log("mainprog");
-        	printServeur("declaration").post();
-        	mainProg.init();
-        }
-    }
-	<body>
-		<table>
-			<tbody>
-				<tr>
-					<td>
-					  <header class="mdl-color--cyan-500">
-					    <h1 class="mode-maker">HipHop Orchestration</h1>
-					    <div id="menubar">
-							<button class="small button" id="buttonGenerate" onclick=~{mainProg.save();} >Generate HipHop</button>
-
-			          		<button class="small button" id="runButton" onclick=~{mainProg.runHH();} >Run HipHop</button>
-							<input class="inputText" type="text" id="signalsHH" style="max-width:400px" />
-
-    						<label for="loadFile" class="small button">Select File</label>
-    						<input type="file" id="loadFile" onchange=~{mainProg.loadBlocks();} />
-
-							<button class="small button" id="buttonSave" onclick=~{mainProg.saveBlocks();} >Save Blocks</button>
-							<input class="inputText" type="text" id="saveFile" style="max-width:400px" />
-				        </div>
-					  </header>
-					</td>
-				</tr>
-				<tr>
-					<td id="blocklyArea">
-					</td>
-				</tr>
-			</tbody>
-		</table>
-
-		<div id="blocklyDiv" style="position: absolute"></div>
-	  	<script src=${block.resource("./blockly/blockly.min.js")}></script>
-		<script src=${block.resource("./blockly/javascript_compressed.js")}></script>
-	</body>
-   	</html>
-};
-exports.block = block;
-