v0.7.6 UI enhancement

BlocklyDuino · Oct 15, 2020 · f356631 · f356631
1 parent 9cdaa7a
commit f356631
Show file tree

Hide file tree

Showing 18 changed files with 229 additions and 45 deletions.
diff --git 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
@@ -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
@@ -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 = "";
+			};
+		}
+}
 ;
diff --git 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>';
diff --git 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
@@ -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
@@ -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
@@ -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');
     }