adding boards & description modal

blocklyduino/css/blocklyduino.css

@@ -7,15 +7,10 @@ and open the template in the editor.
     Created on : 7 févr. 2020, 21:14:02
     Author     : Sebastien Canet <[email protected]>
 */
-/* 
-    From Blockly demo code : style.css
-    From Blockly demo keyboard navigation : keyboard_nav.css
-*/
-
 #separator {
     cursor: col-resize;
-    background-color: #ccc;
-    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='none' stroke='black'/></svg>");
+    background-color: #006468;
+    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='30'><path d='M2 0 v30 M5 0 v30 M8 0 v30' fill='white' stroke='white'/></svg>");
     background-repeat: no-repeat;
     background-position: center;
     width: 15px;
@@ -26,15 +21,17 @@ and open the template in the editor.
     -ms-user-select: none;
     user-select: none;
 }
-
+.blocklyTrash,
+.blocklyZoom > image {
+    opacity: 1 !important;
+}
 .TitleText {
     vertical-align: middle;
     color: #FFFFFF;
     font-size: x-large;
     font-weight: bold;
     padding-left: 5px;
 }
-
 /* Table */
 .table_wrapper {
     height: -moz-calc(100%);
@@ -76,7 +73,7 @@ table table {
     width: 100%;
 }
 td {
-    padding: 0;
+    padding: 2px;
     vertical-align: middle;
 }
 #content_hoverButton {
@@ -259,4 +256,156 @@ td.tabMiddle {
 /* Colours for the new code highlighting in code peek */
 .new_code_highlight {
   background-color: #FFF200; /* same color as blockly highlight */
+}
+
+ /* The boards list modal (background) */
+.modal {
+    position: fixed; /* Stay in place */
+    z-index: 200; /* Sit on top */
+    width: 700px; /* Full width */
+    height: 650px; /* Full height */
+    /* Firefox */
+    left: -moz-calc(50% - 350px);
+    /* WebKit */
+    left: -webkit-calc(50% - 350px);
+    /* Opera */
+    left: -o-calc(50% - 350px);
+    /* Standard */
+    left: calc(50% - 350px);
+    overflow: auto; /* Enable scroll if needed */
+    top: -100%;
+    opacity: 0;
+    transition: top 0.5s, opacity 0.4s;
+}
+.overlay{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 100;
+  background-color: rgba(0,0,0,0.5); /*dim the background*/
+}
+.modal.show {
+    /* Firefox */
+    top: -moz-calc(50% - 325px);
+    /* WebKit */
+    top: -webkit-calc(50% - 325px);
+    /* Opera */
+    top: -o-calc(50% - 325px);
+    /* Standard */
+    top: calc(50% - 325px);
+    opacity: 1;
+}
+/* Modal Content/Box */
+.modal-content {
+    position: relative;
+    background-color: #fefefe;
+    -webkit-border-radius: 15px !important;
+    -moz-border-radius: 15px !important;
+    border-radius: 15px !important;
+    padding: 5px;
+    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
+}
+/* The Close Button */
+.closeModal {
+    color: #FFFFFF;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+}
+.closeModal:hover,
+.closeModal:focus {
+    color: #FFCC00;
+    text-decoration: none;
+    cursor: pointer;
+}
+/* Modal Header */
+.modal-header {
+    padding: 10px;
+    background-color: #006468;
+    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 Body */
+.modal-body {
+    padding: 5px;
+}
+/* Modal Footer */
+.modal-footer {
+    padding: 2px 16px;
+    background-color: #5cb85c;
+    color: white;
+}
+
+/* Modal board selector information */
+#boardDescriptionSelector {
+    overflow: auto;
+    width: 200px;
+}
+#hideSelectScrollbar {
+  display: inline-block;
+  vertical-align: top;
+  overflow: hidden;
+  border: solid grey 1px;
+}
+#hideSelectScrollbar > select {
+  padding: 10px;
+  margin: -5px -20px -5px -5px;
+}
+#arduino_mini_picture_div {
+	position:absolute;
+	right:65px;
+	width:166px;
+	height:266px;
+}
+#arduino_board_mini_picture {
+    text-align: center;
+	width:166px;
+	height:266px;
+    object-fit: contain;
+}
+.modalBoard_info {
+    left: 230px;
+    position: absolute;
+}
+/* collapsible content inside div */
+.collapsibleButton {
+  background-color: #006468;
+  color: #FFFFFF;
+  cursor: pointer;
+  padding: 10px;
+  width: 100%;
+  border: none;
+  text-align: left;
+  outline: none;
+  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;
+  padding: 0 18px;
+  background-color: white;
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.1s ease-out;
+}
+.collapsibleButton:after {
+  content: '\02795'; /* Unicode character for "plus" sign (+) */
+  float: left;
+  padding-right: 5px;
+  transition: 0.1s ease-out;
+}
+.active:after {
+  transform: rotateZ(45deg);
+  transition: 0.1s ease-out;
 }

blocklyduino/generators/arduino/addon/servo.js

@@ -27,22 +27,6 @@ goog.provide('Blockly.Arduino.servo');
 
 goog.require('Blockly.Arduino');
 
-/*
- //servo
- #include <Servo.h>
-
- Servo servo_11;
-
- void setup() {
- servo_11.attach(11);
- }
-
- void loop() {
- servo_11.write(0);
-
- servo_11.write(150); //0~180
- }
- */
 Blockly.Arduino['servo_move'] = function (block) {
     var dropdown_pin = block.getFieldValue('PIN');
     var value_degree = Blockly.Arduino.valueToCode(block, 'DEGREE', Blockly.Arduino.ORDER_ATOMIC);