From f35663188bb749cdbc44096f3c37c76b5eb6ec26 Mon Sep 17 00:00:00 2001
From: SebCanet <canet.s@free.fr>
Date: Thu, 15 Oct 2020 10:35:22 +0200
Subject: [PATCH] v0.7.6 UI enhancement

---
 CHANGELOG.txt                                |  5 ++
 blocklyduino/css/overload.css                |  2 +-
 blocklyduino/js/boards.js                    | 61 +++++++++++++++++++-
 blocklyduino/toolbox/toolbox_blocklyduino.js | 23 ++++----
 css/UI.css                                   | 36 ++++++++++--
 index.html                                   | 17 +++---
 js/blockly/playground.js                     |  4 +-
 js/buttons_functions.js                      |  7 ++-
 js/dialog.js                                 | 44 ++++++++++++--
 js/init.js                                   |  4 +-
 js/toolbox.js                                | 57 ++++++++++++++++++
 msg/UI_ar.js                                 |  2 +-
 msg/UI_ca.js                                 |  2 +-
 msg/UI_de.js                                 |  2 +-
 msg/UI_en.js                                 |  2 +-
 msg/UI_es.js                                 |  2 +-
 msg/UI_fr.js                                 |  2 +-
 msg/UI_ja.js                                 |  2 +-
 18 files changed, 229 insertions(+), 45 deletions(-)
 create mode 100644 js/toolbox.js

diff --git a/CHANGELOG.txt b/CHANGELOG.txt
index 0f0dfad..f4a7bd4 100644
--- a/CHANGELOG.txt
+++ b/CHANGELOG.txt
@@ -1,3 +1,8 @@
+v0.7.6 2020-10-15
+- fix UI bugs
+- add toolbox sorting through list in URL (index.html?toolboxids=SERVO)
+- COM port selection is inside list COM port modal 
+
 v0.7.5, 2020-10-07
 - upate Blockly core to v3.20200924.2
 - bug fix on screenshot
diff --git a/blocklyduino/css/overload.css b/blocklyduino/css/overload.css
index 7b526ec..0fdea4c 100644
--- a/blocklyduino/css/overload.css
+++ b/blocklyduino/css/overload.css
@@ -18,7 +18,7 @@ body {
 .config_content {
     background-color: #006468;
 }
-.modal-header {
+.modal-header, .modal-footer {
     background-color: #006468;
 }
 .accordion {
diff --git a/blocklyduino/js/boards.js b/blocklyduino/js/boards.js
index e5ad9bd..822bcfa 100644
--- a/blocklyduino/js/boards.js
+++ b/blocklyduino/js/boards.js
@@ -17,7 +17,7 @@ goog.provide('Blockly.Boards');
 profile.default = profile["none"][0];
 
 /**
- * Sets board
+ * Set board when click in board modal
  */
 Code.setBoard = function () {
     var boardId = Code.getStringParamFromUrl('board', '');
@@ -26,10 +26,33 @@ Code.setBoard = function () {
     }
     document.getElementById('boardMenu').value = boardId;
     profile.default = profile[boardId][0];
+	// change tooltip & info when a board is selected
+	if (boardId != "none") {
+		document.getElementById('boardButton').classList.add('active');
+		document.getElementById('boardButton').title = profile["default"].description;
+		document.getElementById('boardButton').onmouseover = function () {
+			document.getElementById("content_hoverButton").textContent = profile["default"].description;
+		};
+		document.getElementById('boardButton').onmouseout = function () {
+			document.getElementById("content_hoverButton").textContent = "";
+		};
+	}
+		else {
+			document.getElementById('boardButton').classList.remove('active');
+			document.getElementById('boardButton').title = MSG['boardButtonSpan'];
+			document.getElementById('boardButton').onmouseover = function () {
+				document.getElementById("content_hoverButton").textContent = MSG['boardButtonSpan'];
+			};
+			document.getElementById('boardButton').onmouseout = function () {
+				document.getElementById("content_hoverButton").textContent = "";
+			};
+		}
 };
 
-function changeBoard() {
-    // var boardMenu = document.getElementById('boardMenu');
+/**
+ * Set board throught URL
+ */
+Code.changeBoard = function ()  {
     var boardMenu = document.getElementById('boardDescriptionSelector');
     var newBoard = encodeURIComponent(boardMenu.options[boardMenu.selectedIndex].value);
     var search = window.location.search;
@@ -43,4 +66,36 @@ function changeBoard() {
     profile["default"] = profile[newBoard][0];
     window.location = window.location.protocol + '//' + window.location.host + window.location.pathname + search;
 }
+;
+
+/**
+ * Set COM port
+ */
+Code.setPort = function ()  {
+    var serialPortMenu = document.getElementById('serialMenu');
+    var newPort = encodeURIComponent(serialPortMenu.options[serialPortMenu.selectedIndex].value);
+	console.log(newPort);
+	document.getElementById('overlayForModals').style.display = "none";
+	document.getElementById('portListModal').classList.remove('show');
+	if (newPort != 'none') {
+		document.getElementById('serialButton').classList.add('active');
+		document.getElementById('serialButton').title = newPort;
+		document.getElementById('serialButton').onmouseover = function () {
+			document.getElementById("content_hoverButton").textContent = newPort;
+		};
+		document.getElementById('serialButton').onmouseout = function () {
+			document.getElementById("content_hoverButton").textContent = "";
+		}
+	}
+		else {
+			document.getElementById('serialButton').classList.remove('active');
+			document.getElementById('serialButton').title = MSG['serialButtonSpan'];
+			document.getElementById('serialButton').onmouseover = function () {
+				document.getElementById("content_hoverButton").textContent = MSG['serialButtonSpan'];
+			};
+			document.getElementById('serialButton').onmouseout = function () {
+				document.getElementById("content_hoverButton").textContent = "";
+			};
+		}
+}
 ;
\ No newline at end of file
diff --git a/blocklyduino/toolbox/toolbox_blocklyduino.js b/blocklyduino/toolbox/toolbox_blocklyduino.js
index 9bd6bdd..83f6837 100644
--- a/blocklyduino/toolbox/toolbox_blocklyduino.js
+++ b/blocklyduino/toolbox/toolbox_blocklyduino.js
@@ -15,7 +15,7 @@ BLOCKLY_TOOLBOX_XML['toolboxblocklyduino'] =
 // From XML string/file, replace ^\s?(\s*)?(<.*>)$ with \+$1'$2'
 // Tweak first and last line.
 '<xml xmlns="https://developers.google.com/blockly/xml" id="blocklyToolbox">'
-+ '<category name="%{BKY_CATLOGIC}" categorystyle="logic_category">'
++ '<category name="%{BKY_CATLOGIC}" categorystyle="logic_category" toolboxitemid="CAT_LOGIC">'
 +   '<block type="controls_if"></block>'
 +   '<block type="logic_compare"></block>'
 +   '<block type="logic_operation"></block>'
@@ -25,7 +25,7 @@ BLOCKLY_TOOLBOX_XML['toolboxblocklyduino'] =
 +   '<block type="logic_ternary"></block>'
 +   '<block type="controls_switch"></block>'
 + '</category>'
-+ '<category name="%{BKY_CATLOOPS}" categorystyle="loop_category">'
++ '<category name="%{BKY_CATLOOPS}" categorystyle="loop_category" toolboxitemid="CAT_LOOPS">'
 +   '<block type="controls_repeat_ext">'
 +     '<value name="TIMES">'
 +       '<shadow type="math_number">'
@@ -55,7 +55,7 @@ BLOCKLY_TOOLBOX_XML['toolboxblocklyduino'] =
 +   '<block type="controls_forEach"></block>'
 +   '<block type="controls_flow_statements"></block>'
 + '</category>'
-+ '<category name="%{BKY_CATMATH}" categorystyle="math_category">'
++ '<category name="%{BKY_CATMATH}" categorystyle="math_category" toolboxitemid="CAT_MATH">'
 +   '<block type="math_number" gap="32">'
 +     '<field name="NUM">123</field>'
 +   '</block>'
@@ -143,7 +143,7 @@ BLOCKLY_TOOLBOX_XML['toolboxblocklyduino'] =
 +     '</value>'
 +   '</block>'
 + '</category>'
-+ '<category name="%{BKY_CATTEXT}" categorystyle="text_category">'
++ '<category name="%{BKY_CATTEXT}" categorystyle="text_category" toolboxitemid="CAT_TEXT">'
 +   '<block type="text"></block>'
 +   '<block type="text_join"></block>'
 +   '<block type="text_append">'
@@ -245,7 +245,7 @@ BLOCKLY_TOOLBOX_XML['toolboxblocklyduino'] =
 +     '</value>'
 +   '</block>'
 + '</category>'
-+ '<category name="%{BKY_CATLISTS}" categorystyle="list_category">'
++ '<category name="%{BKY_CATLISTS}" categorystyle="list_category" toolboxitemid="CAT_LIST">'
 +   '<block type="lists_create_with">'
 +     '<mutation items="0"></mutation>'
 +   '</block>'
@@ -297,7 +297,7 @@ BLOCKLY_TOOLBOX_XML['toolboxblocklyduino'] =
 +   '<block type="lists_sort"></block>'
 +   '<block type="lists_reverse"></block>'
 + '</category>'
-+ '<category name="%{BKY_CATCOLOUR}" categorystyle="colour_category">'
++ '<category name="%{BKY_CATCOLOUR}" categorystyle="colour_category" toolboxitemid="CAT_COLOUR">'
 +   '<block type="colour_picker"></block>'
 +   '<block type="colour_random"></block>'
 +   '<block type="colour_rgb">'
@@ -336,14 +336,14 @@ BLOCKLY_TOOLBOX_XML['toolboxblocklyduino'] =
 +   '</block>'
 + '</category>'
 + '<sep></sep>'
-+ '<category name="%{BKY_CATVARIABLES}" categorystyle="variable_category">'
++ '<category name="%{BKY_CATVARIABLES}" categorystyle="variable_category" toolboxitemid="CAT_VARIABLES">'
 +    '<category name="%{BKY_CAT_VAR_NUM}" categorystyle="variable_category" custom="VARIABLE_TYPED_NUM"></category>'
 +    '<category name="%{BKY_CAT_VAR_TEXT}" categorystyle="variable_category" custom="VARIABLE_TYPED_TEXT"></category>'
 +    '<category name="%{BKY_CAT_VAR_BOOLEAN}" categorystyle="variable_category" custom="VARIABLE_TYPED_BOOLEAN"></category>'
 + '</category>'
-+ '<category name="%{BKY_CATFUNCTIONS}" categorystyle="procedure_category" custom="PROCEDURE"></category>'
++ '<category name="%{BKY_CATFUNCTIONS}" categorystyle="procedure_category" custom="PROCEDURE" toolboxitemid="CAT_FUNCTIONS"></category>'
 +    '<sep></sep>'
-+    '<category name="%{BKY_CAT_ARDUINO}" categorystyle="arduino_category">'
++    '<category name="%{BKY_CAT_ARDUINO}" categorystyle="arduino_category" toolboxitemid="ARDUINO_IO">'
 +        '<category name="%{BKY_CAT_ARDUINO_IO}" categorystyle="arduino_category">'
 +            '<block type="board_base_inout_buildin_led"></block>'
 +            '<block type="board_base_inout_digital_write"></block>'
@@ -385,7 +385,7 @@ BLOCKLY_TOOLBOX_XML['toolboxblocklyduino'] =
 +           '<block type="board_serial_flush"></block>'
 +        '</category>'
 +    '</category>'
-+    '<category name="%{BKY_CAT_SEEED}" categorystyle="seeed_category">'
++    '<category name="%{BKY_CAT_SEEED}" categorystyle="seeed_category" toolboxitemid="SEEED">'
 +        '<category name="%{BKY_CAT_GROVE}" categorystyle="grove_category">'
 +            '<category name="%{BKY_CAT_GROVE_IO}" categorystyle="grove_category">'
 +                '<block type="grove_led"></block>'
@@ -430,7 +430,7 @@ BLOCKLY_TOOLBOX_XML['toolboxblocklyduino'] =
 +            '</category>'
 +        '</category>'
 +    '</category>'
-+    '<category name="%{BKY_CAT_SERVO}" categorystyle="servo_category">'
++    '<category name="%{BKY_CAT_SERVO}" categorystyle="servo_category" toolboxitemid="SERVO">'
 +        '<block type="servo_move">'
 +            '<value name="DEGREE">'
 +               '<shadow type="math_number">'
@@ -440,4 +440,5 @@ BLOCKLY_TOOLBOX_XML['toolboxblocklyduino'] =
 +        '</block>'
 +        '<block type="servo_read_degrees"></block>'
 +    '</category>'
++ '<category name="END" categorystyle="board_category" disabled="true" hidden="true" toolboxitemid="END"></category>'
 + '</xml>';
\ No newline at end of file
diff --git a/css/UI.css b/css/UI.css
index 57b75e2..bd83e3c 100644
--- a/css/UI.css
+++ b/css/UI.css
@@ -192,6 +192,24 @@ td.tabMiddle {
     z-index: 10;
     color: #fff;
 }
+/* modal buttons */
+#boardListModalDialogOkay{
+    border: none;
+    font-size: x-large;
+    background-color: #4CAF50;
+    border-radius: 12px;
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+    margin: 5px;
+    position: relative;
+    left: 88px;
+}
+#portListModalDialogOkay{
+    border: none;
+    font-size: large;
+    background-color: #4CAF50;
+    border-radius: 12px;
+    box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
+}
 
 /* Content blocks */
 .content_wrapper {
@@ -223,6 +241,7 @@ td.tabMiddle {
     height: 100%;
     min-width: 10px;
 }
+    
 /* side panel */
 .side_content {
     min-width: 10px;
@@ -324,9 +343,12 @@ td.tabMiddle {
     float: right;
     font-size: 28px;
     font-weight: bold;
+    -ms-transform: translateY(-20%);
+    transform: translateY(-20%);
 }
 .closeModal:hover,
 .closeModal:focus {
+    color: #FFCC00;
     text-decoration: none;
     cursor: pointer;
 }
@@ -345,15 +367,17 @@ td.tabMiddle {
 }
 /* Modal Footer */
 .modal-footer {
-    padding: 2px 16px;
-    background-color: #5cb85c;
+    padding: 10px;
     color: white;
+    -webkit-border-radius: 15px !important;
+    -moz-border-radius: 15px !important;
+    border-top-left-radius: 15px !important;
+    border-top-right-radius: 15px !important;
 }
 
 /* Modal board selector information */
 #boardDescriptionSelector {
     overflow: auto;
-    width: 200px;
 }
 #hideSelectScrollbar {
     display: inline-block;
@@ -363,7 +387,6 @@ td.tabMiddle {
 }
 #hideSelectScrollbar > select {
     padding: 10px;
-    margin: -5px -20px -5px -5px;
 }
 #board_mini_picture_div {
     position:absolute;
@@ -393,6 +416,11 @@ td.tabMiddle {
     font-size: large;
     font-weight: bold;
 }
+/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
+.active, .collapsibleButton:hover {
+    background-color: #FFCC00;
+    color: #000000;
+}
 /* Style the collapsible content. Note: hidden by default */
 .collapsibleContent {
     visibility: hidden;
diff --git a/index.html b/index.html
index df04979..268fff6 100644
--- a/index.html
+++ b/index.html
@@ -177,9 +177,6 @@
                             <option value="arduino_yun">Arduino Yùn</option>
                             <option value="lilypad">LilyPad</option>
                         </select>
-                        <select id="serialMenu" style='display:none'>
-                            <option value="none">...</option>
-                        </select>
                         <br>
                         <span id="languageSpan" class="UIText">...</span>
                         <select id="languageMenu"></select>
@@ -334,7 +331,7 @@
                         </select>
                     </div>
                 </div>
-                <button id="boardListModalDialogOkay" onclick="changeBoard()" style="border: none; font-size: xx-large; background-color: #4CAF50; border-radius: 12px; box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19); margin: 5px; position: relative; left: 68px;">&#10004;</button>
+                <button id="boardListModalDialogOkay" onclick="Code.changeBoard()">&#10004;</button>
                 <button type="button" class="collapsibleButton">Details</button>
                 <div class="collapsibleContent" id="collapsibleContent">
                     <span id="boardModal_connect">Connecteur</span><span id="boardModal_connect_span" class="modalBoard_info">...</span><br>
@@ -363,9 +360,12 @@
                 </div>
                 <div class="modal-body" id="portListModalBody">
                 </div>
-                <!-- <div class="modal-footer"> -->
-                <!-- <h3>Modal Footer</h3> -->
-                <!-- </div> -->
+                <div class="modal-footer">
+                    <select id="serialMenu">
+                        <option value="none">...</option>
+                    </select>
+                    <button id="portListModalDialogOkay" onclick="Code.setPort()">&#10004;</button>
+                </div>
             </div>
         </div>
     </body>
@@ -395,6 +395,7 @@
     <script src="./js/buttons_functions.js"></script>
     <script src="./js/dialog.js"></script>
     <script src="./js/renderingConstant.js"></script>
+    <script src="./js/toolbox.js"></script>
     <script src="./@blockly/demos/custom-dialogs/custom-dialog.js"></script>
     <!-- blocklyduino libraries of external functions -->
     <script src="./js/ace/ace.js" charset="utf-8"></script>
@@ -433,8 +434,8 @@
     <script src="./blocklyduino/themes/themes_categories.js" async></script>
     <script src="./blocklyduino/themes/themes_components_override.js" async></script>
     <!-- blocklyduino external toolbox hacked -->
-    <script src="./blocklyduino/toolbox/toolbox_blocklyduino.js"></script>
     <script src="./blocklyduino/toolbox/toolbox_standard.js"></script>
+    <script src="./blocklyduino/toolbox/toolbox_blocklyduino.js"></script>
     <script>
         ace.require("ace/ext/language_tools");
         var editor = ace.edit("content_code");
diff --git a/js/blockly/playground.js b/js/blockly/playground.js
index 140432e..ad52975 100644
--- a/js/blockly/playground.js
+++ b/js/blockly/playground.js
@@ -125,16 +125,18 @@ function fontSpacingPageModify(classToModify, spacingToModify) {
 }
 
 function setOnOffLine() {
-    // Set UI to differentiate server vs local copy.
+    // Set background colour to differentiate server vs local copy.
     if (location.protocol === 'file:') {
         document.getElementById('verifyButton').disabled = false;
         document.getElementById('serialButton').disabled = false;
+        document.getElementById('serialMenu').display = true;
         document.getElementById('uploadButton').disabled = false;
         document.getElementById('serialConnectButton').disabled = false;
         document.getElementById('serialMenu').disabled = false;
     } else {
         document.getElementById('verifyButton').disabled = true;
         document.getElementById('serialButton').disabled = true;
+        document.getElementById('serialMenu').display = true;
         document.getElementById('uploadButton').disabled = true;
         document.getElementById('serialConnectButton').disabled = true;
         document.getElementById('serialMenu').disabled = true;
diff --git a/js/buttons_functions.js b/js/buttons_functions.js
index d568637..df62197 100644
--- a/js/buttons_functions.js
+++ b/js/buttons_functions.js
@@ -118,6 +118,11 @@ Code.boardsListModalShow = function () {
 Code.portsListModalShow = function () {
     document.getElementById('overlayForModals').style.display = "block";
     document.getElementById('portListModal').classList.add('show');
+    var portValue = document.getElementById("serialMenu").value;
+    if (portValue !== 'none') {
+        document.getElementById("serialMenu").selectedIndex = portValue;
+        document.getElementById("serialMenu").value = portValue;
+    }
     window.addEventListener('click', Code.portsListModalHide, 'once');
 };
 document.getElementById("closeModalBoards").onclick = function () {
@@ -136,7 +141,7 @@ Code.boardsListModalHide = function (event) {
     }
 };
 Code.portsListModalHide = function (event) {
-    if (!document.getElementById('boardListModal').contains(event.target)) {
+    if (!document.getElementById('portListModal').contains(event.target)) {
         document.getElementById('overlayForModals').style.display = "none";
         document.getElementById('portListModal').classList.remove('show');
     }
diff --git a/js/dialog.js b/js/dialog.js
index 4b10a1c..8850146 100644
--- a/js/dialog.js
+++ b/js/dialog.js
@@ -55,6 +55,44 @@ function dragElement(elmnt) {
     }
 };
 
+// Simulate jQuery selector « $ »
+// return a matrix if an element has right class
+if (!document.getElementsByClassName ) {
+  document.getElementsByClassName = function(cl, tag) {
+    var els, matches = [],
+      i = 0, len,
+      regex = new RegExp('(?:\\s|^)' + cl + '(?:\\s|$)');
+      els = document.getElementsByTagName(tag || "*");
+      if ( !els[0] ) return false;
+      for ( len = els.length; i < len; i++ ) {
+        if ( els[i].className.match(regex) ) {
+          matches.push( els[i]);
+        }
+      }      
+      return matches;
+  };
+}
+ 
+// Validate id, class, or tag.
+var $ = function(el, tag) {
+  var firstChar = el.charAt(0);
+  if ( document.querySelectorAll ) return document.querySelectorAll(el);
+  switch ( firstChar ) {
+    case "#": return document.getElementById(el.slice(1) );
+    case ".": return document.getElementsByClassName(el.slice(1), tag );
+    default : return document.getElementsByTagName(el);
+  }
+};
+
+// Usage
+// $('#conteneur');
+// Retourne un élément de classe « maClasse »
+// $('.maClasse');
+// Retourne un élément DIV de classe « maClasse »
+// $('.maClasse', 'div');
+// Retourne tous les éléments P
+// $('p');
+
 /*
  * Javascript function for collapsible content in modal
  */
@@ -134,12 +172,6 @@ document.getElementById('redoButton').onmouseover = function () {
 document.getElementById('redoButton').onmouseout = function () {
     document.getElementById("content_hoverButton").textContent = "";
 };
-document.getElementById('boardButton').onmouseover = function () {
-    document.getElementById("content_hoverButton").textContent = MSG['boardButtonSpan'];
-};
-document.getElementById('boardButton').onmouseout = function () {
-    document.getElementById("content_hoverButton").textContent = "";
-};
 document.getElementById('verifyButton').onmouseover = function () {
     document.getElementById("content_hoverButton").textContent = MSG['verifyButton_span'];
 };
diff --git a/js/init.js b/js/init.js
index 2e92ced..ffe9dba 100644
--- a/js/init.js
+++ b/js/init.js
@@ -108,7 +108,7 @@ Code.init = function () {
             drag: true,
             wheel: false
         },
-        toolbox: BLOCKLY_TOOLBOX_XML['toolboxblocklyduino'],
+        toolbox: Code.buildToolbox(),
         toolboxPosition: 'start',
         renderer: renderer,
         zoom: {
@@ -120,7 +120,6 @@ Code.init = function () {
             scaleSpeed: 1.1
         }
     });
-
     //button callback register with functions
     Code.workspace.registerButtonCallback('createVarBtnInt', createVarBtnIntCallBack);
     Code.workspace.registerButtonCallback('createVarBtnFloat', createVarBtnFloatCallBack);
@@ -294,7 +293,6 @@ Code.initLanguage = function () {
     document.getElementById('codeEditorColorSpan').textContent = MSG['codeEditorColorSpan'];
     document.getElementById('themeSpan').textContent = MSG['themeSpan'];
     document.getElementById('renderSpan').textContent = MSG['renderSpan'];
-    document.getElementById('boardButton').title = MSG['boardButtonSpan'];
     document.getElementById('serialButton').title = MSG['serialButtonSpan'];
     document.getElementById('fullScreenButton').title = MSG['fullScreenButton_span'];
     document.getElementById('undoButton').title = MSG['undoButton_span'];
diff --git a/js/toolbox.js b/js/toolbox.js
new file mode 100644
index 0000000..53b1009
--- /dev/null
+++ b/js/toolbox.js
@@ -0,0 +1,57 @@
+/**
+ * @license
+ * Copyright 2020 Sébastien CANET
+ * SPDX-License-Identifier: BSD-3-Clause
+ */
+
+/**
+ * @fileoverview Intercept data to modify toolbox for user
+ * @author scanet@libreduc.cc (Sébastien CANET)
+ */
+
+
+/**
+ * Build the xml using toolboxes checked in config modal and stored in session
+ */
+Code.buildToolbox = function() {
+	var toolboxXml = BLOCKLY_TOOLBOX_XML['toolboxblocklyduino'];
+	// set the toolbox from url parameters
+	var toolboxIds = Code.getStringParamFromUrl('toolboxids', '');	
+	// set the default toolbox if none
+	if (toolboxIds === undefined || toolboxIds === "")
+		toolboxIds = 'CAT_LOGIC,CAT_LOOPS,CAT_MATH,CAT_TEXT,CAT_LIST,CAT_COLOUR,CAT_VARIABLES,CAT_FUNCTIONS';
+		else toolboxIds += ',CAT_LOGIC,CAT_LOOPS,CAT_MATH,CAT_TEXT,CAT_LIST,CAT_COLOUR,CAT_VARIABLES,CAT_FUNCTIONS';
+	//save config in local browser storage
+	window.localStorage.toolboxids = toolboxIds;
+	//parser on xml
+	parser = new DOMParser();
+	var xmlDoc = parser.parseFromString(toolboxXml,"text/xml");
+	var xmlValue = '<xml id="blocklyToolbox">';	
+	var xmlids = toolboxIds.split(",");
+	// var maxiNodes = xmlDoc.children[0].childNodes.length;
+	var i = 0;
+	while(xmlDoc.getElementsByTagName("category")[i].getAttribute('toolboxitemid') != "END") {
+		if (xmlDoc.getElementsByTagName("category")[i].getAttribute('toolboxitemid') != "null")
+			for (var j = 0; j < xmlids.length; j++) {
+				if (xmlDoc.getElementsByTagName("category")[i].getAttribute('toolboxitemid') == xmlids[j]) {
+					xmlValue += xmlDoc.getElementsByTagName("category")[i].outerHTML;
+				}
+			}
+		i++;
+	}
+	xmlValue += '</xml>';
+	return xmlValue;
+};
+
+/**
+ * Change toolbox definition
+ */
+Code.changeToolboxDefinition =  function (){
+	Code.loadToolboxDefinition($("#toolboxes").val());
+	Code.openConfigToolbox();
+}; 
+
+Code.changeLevelToolboxDefinition =  function (level){
+	Code.loadToolboxDefinition(level);
+	Code.openConfigToolbox();
+}; 
diff --git a/msg/UI_ar.js b/msg/UI_ar.js
index d6b3529..e2323a0 100644
--- a/msg/UI_ar.js
+++ b/msg/UI_ar.js
@@ -63,7 +63,7 @@ var MSG = {
         '<p style="text-align: left;">Official documentation: <a href="https://developers.google.com/blockly/guides/configure/web/keyboard-nav" rel="nofollow">Blockly developers</a>.</p>' +
         '<p style="text-align: left;">Wiki: <a href="http://www.libreduc.cc/wiki">on LibrEduc</a>.</p>' +
         '<p style="text-align: left;">A bug? Post it here: <a href="https://github.com/BlocklyDuino/BlocklyDuino-v2/issues">on Github</a>.</p>' +
-        '<p style="text-align: center;">v0.7.5 - license GNU GPL version 3',
+        '<p style="text-align: center;">v0.7.6 - license GNU GPL version 3',
     editorReadOnlyToggle_span: "code editor writable or read-only",
     copyCodeButton_span: "copy code to clipboard",
     accessibilitySpan: "enable Accessibility Mode",
diff --git a/msg/UI_ca.js b/msg/UI_ca.js
index 385e739..efdfd11 100644
--- a/msg/UI_ca.js
+++ b/msg/UI_ca.js
@@ -63,7 +63,7 @@ var MSG = {
         '<p style="text-align: left;">Official documentation: <a href="https://developers.google.com/blockly/guides/configure/web/keyboard-nav" rel="nofollow">Blockly developers</a>.</p>' +
         '<p style="text-align: left;">Wiki: <a href="http://www.libreduc.cc/wiki">on LibrEduc</a>.</p>' +
         '<p style="text-align: left;">A bug? Post it here: <a href="https://github.com/BlocklyDuino/BlocklyDuino-v2/issues">on Github</a>.</p>' +
-        '<p style="text-align: center;">v0.7.5 - license GNU GPL version 3',
+        '<p style="text-align: center;">v0.7.6 - license GNU GPL version 3',
     editorReadOnlyToggle_span: "code editor writable or read-only",
     copyCodeButton_span: "Copia codi a  porta-retalls",
     accessibilitySpan: "habilita mode accessibilitat",
diff --git a/msg/UI_de.js b/msg/UI_de.js
index 0e2cae3..51c62e2 100644
--- a/msg/UI_de.js
+++ b/msg/UI_de.js
@@ -63,7 +63,7 @@ var MSG = {
         '<p style="text-align: left;">Official documentation: <a href="https://developers.google.com/blockly/guides/configure/web/keyboard-nav" rel="nofollow">Blockly developers</a>.</p>' +
         '<p style="text-align: left;">Wiki: <a href="http://www.libreduc.cc/wiki">on LibrEduc</a>.</p>' +
         '<p style="text-align: left;">A bug? Post it here: <a href="https://github.com/BlocklyDuino/BlocklyDuino-v2/issues">on Github</a>.</p>' +
-        '<p style="text-align: center;">v0.7.5 - license GNU GPL version 3',
+        '<p style="text-align: center;">v0.7.6 - license GNU GPL version 3',
     editorReadOnlyToggle_span: "code editor writable or read-only",
     copyCodeButton_span: "copy code to clipboard",
     accessibilitySpan: "Enable Accessibility Mode",
diff --git a/msg/UI_en.js b/msg/UI_en.js
index d6b3529..e2323a0 100644
--- a/msg/UI_en.js
+++ b/msg/UI_en.js
@@ -63,7 +63,7 @@ var MSG = {
         '<p style="text-align: left;">Official documentation: <a href="https://developers.google.com/blockly/guides/configure/web/keyboard-nav" rel="nofollow">Blockly developers</a>.</p>' +
         '<p style="text-align: left;">Wiki: <a href="http://www.libreduc.cc/wiki">on LibrEduc</a>.</p>' +
         '<p style="text-align: left;">A bug? Post it here: <a href="https://github.com/BlocklyDuino/BlocklyDuino-v2/issues">on Github</a>.</p>' +
-        '<p style="text-align: center;">v0.7.5 - license GNU GPL version 3',
+        '<p style="text-align: center;">v0.7.6 - license GNU GPL version 3',
     editorReadOnlyToggle_span: "code editor writable or read-only",
     copyCodeButton_span: "copy code to clipboard",
     accessibilitySpan: "enable Accessibility Mode",
diff --git a/msg/UI_es.js b/msg/UI_es.js
index bd70d48..8143a43 100644
--- a/msg/UI_es.js
+++ b/msg/UI_es.js
@@ -63,7 +63,7 @@ var MSG = {
         '<p style="text-align: left;">Official documentation: <a href="https://developers.google.com/blockly/guides/configure/web/keyboard-nav" rel="nofollow">Blockly developers</a>.</p>' +
         '<p style="text-align: left;">Wiki: <a href="http://www.libreduc.cc/wiki">on LibrEduc</a>.</p>' +
         '<p style="text-align: left;">A bug? Post it here: <a href="https://github.com/BlocklyDuino/BlocklyDuino-v2/issues">on Github</a>.</p>' +
-        '<p style="text-align: center;">v0.7.5 - license GNU GPL version 3',
+        '<p style="text-align: center;">v0.7.6 - license GNU GPL version 3',
     editorReadOnlyToggle_span: "code editor writable or read-only",
     copyCodeButton_span: "Copia código a  portapapeles",
     accessibilitySpan: "habilita modo accesibilidad",
diff --git a/msg/UI_fr.js b/msg/UI_fr.js
index 61f02c9..3598958 100644
--- a/msg/UI_fr.js
+++ b/msg/UI_fr.js
@@ -63,7 +63,7 @@ var MSG = {
         '<p style="text-align: left;">Documentation officielle : <a href="https://developers.google.com/blockly/guides/configure/web/keyboard-nav" rel="nofollow">développeurs Blockly</a>.</p>' +
         '<p style="text-align: left;">Wiki : <a href="http://www.libreduc.cc/wiki">chez LibrEduc</a>.</p>' +
         '<p style="text-align: left;">Un bug ? Merci d\'écrire ici : <a href="https://github.com/BlocklyDuino/BlocklyDuino-v2/issues">sur Github</a>.</p>' +
-        '<p style="text-align: center;">v0.7.5 - licence GNU GPL version 3',
+        '<p style="text-align: center;">v0.7.6 - licence GNU GPL version 3',
     editorReadOnlyToggle_span: "éditeur de code en lecture seule ou non",
     copyCodeButton_span: "copier le code dans le presse papiers",
     accessibilitySpan: "activer le contrôle clavier",
diff --git a/msg/UI_ja.js b/msg/UI_ja.js
index 50daf04..c2793ff 100644
--- a/msg/UI_ja.js
+++ b/msg/UI_ja.js
@@ -63,7 +63,7 @@ var MSG = {
         '<p style="text-align: left;">Official documentation: <a href="https://developers.google.com/blockly/guides/configure/web/keyboard-nav" rel="nofollow">Blockly developers</a>.</p>' +
         '<p style="text-align: left;">Wiki: <a href="http://www.libreduc.cc/wiki">on LibrEduc</a>.</p>' +
         '<p style="text-align: left;">A bug? Post it here: <a href="https://github.com/BlocklyDuino/BlocklyDuino-v2/issues">on Github</a>.</p>' +
-        '<p style="text-align: center;">v0.7.5 - license GNU GPL version 3',
+        '<p style="text-align: center;">v0.7.6 - license GNU GPL version 3',
     editorReadOnlyToggle_span: "code editor writable or read-only",
     copyCodeButton_span: "copy code to clipboard",
     accessibilitySpan: "Enable Accessibility Mode",