Add additional IDE action buttons with nice in/out effect.

ardublockly/ardublockly.css

@@ -212,21 +212,21 @@ ul.side-nav li.side-menu-end {
   background-color: #006468;
   color: #ffffff;
   -moz-transition: background-color 0.6s ease-in;;
-  -o-transition: background-color 0.6s ease-in;;
+  -o-transition: background-color 0.6s ease-in;
   -webkit-transition: background-color 0.6s ease-in;
 }
 .ide_output_header_highlight {
   background-color: #62AEB2;
   color: #ffffff;
   -moz-transition: background-color 0.6s ease-in;;
-  -o-transition: background-color 0.6s ease-in;;
+  -o-transition: background-color 0.6s ease-in;
   -webkit-transition: background-color 0.6s ease-in;
 }
 .ide_output_header_error {
   background-color: #E47128;
   color: #ffffff;
   -moz-transition: background-color 0.6s ease-in;;
-  -o-transition: background-color 0.6s ease-in;;
+  -o-transition: background-color 0.6s ease-in;
   -webkit-transition: background-color 0.6s ease-in;
 }
 
@@ -294,23 +294,58 @@ ul.side-nav li.side-menu-end {
 /*************/
 /*  Buttons  */
 /*************/
-#button_run {
+#ide_buttons_wrapper {
   position: absolute;
   right: 25px;
   top: -20px;
+  height: 55px;
+  width: 160px;
+  z-index: 12;
+}
+#button_run {
+  position: absolute;
+  right: 0px;
+  top: 0px;
+  background-color: #E47128;  /* Arduino orange */
 }
 #button_run:hover {
   background-color: rgba(255, 204, 51, 1);  /* Arduino yellow */
 }
 .run_loader {
   position: absolute !important;
-  right: 25px !important;
-  top: -20px !important;
+  right: 0px !important;
+  top: 0px !important;
   width: 56px !important;
   height: 56px !important; 
   z-index: 5;
 }
 
+#button_verify {
+  position: absolute;
+  right: 72px;
+  top: 10px;
+  background-color: #00979C;  /* Arduino teal */
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0.3s linear, opacity 0.3s linear;
+}
+#button_verify:hover {
+  background-color: #62AEB2;  /* Arduino teal light */
+}
+
+#button_open_ide {
+  position: absolute;
+  right: 126px;
+  top: 10px;
+  background-color: rgba(255, 204, 51, 1);  /* Arduino yellow */
+  visibility: hidden;
+  opacity: 0;
+  transition: visibility 0.3s linear, opacity 0.3s linear;
+}
+#button_open_ide:hover {
+  background-color: rgba(255, 220, 110, 1);  /* Lighter Arduino yellow */
+}
+
 #button_load_xml {
   position: absolute;
   right: 36px;
@@ -318,6 +353,25 @@ ul.side-nav li.side-menu-end {
   display: none;
 }
 
+/* These floating buttons needs to be at a higher z index than card when */
+/* floating and lower when clicked.  */
+#button_run:hover,
+#button_open_ide:hover,
+#button_verify:hover,
+#button_load_xml:hover {
+  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
+}
+#button_run:active,
+#button_open_ide:active,
+#button_verify:active,
+#button_load_xml:active {
+  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
+}
+
 .button_toggle_toolbox_on {
   position: absolute;
   margin: 0 !important;
@@ -346,6 +400,54 @@ ul.side-nav li.side-menu-end {
   z-index: 5;
 }
 
+/*************************/
+/*  New spinner colours  */
+/*************************/
+.spinner-orange {
+  border-color: #E47128;
+}
+.active .spinner-layer.spinner-orange {
+  /* durations: 4 * ARCTIME */
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+.spinner-dark-teal {
+  border-color: #00878F;
+}
+.active .spinner-layer.spinner-dark-teal {
+  /* durations: 4 * ARCTIME */
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+.spinner-yellow {
+  border-color: rgba(255, 204, 51, 1);
+}
+.active .spinner-layer.spinner-yellow {
+  /* durations: 4 * ARCTIME */
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+.spinner-light-teal {
+  border-color: #62AEB2;
+}
+.active .spinner-layer.spinner-light-teal {
+  /* durations: 4 * ARCTIME */
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
+.spinner-purple {
+  border-color: #8e24aa;
+}
+.active .spinner-layer.spinner-purple {
+  /* durations: 4 * ARCTIME */
+  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
+}
+
 
 /************************/
 /*  Modals and content  */
@@ -403,79 +505,6 @@ ul.side-nav li.side-menu-end {
 }
 
 
-/*******************************/
-/*  Clean 50:50 same row divs  */
-/*******************************/
-.two_halves_container {
-  width: 100%; 
-  padding: 0;
-  margin: 0;
-}
-.two_halves_left {
-  padding: 0;
-  margin: 0;
-  border: none;
-  width: 49%;
-  float: right;
-}
-.two_halves_right {
-  padding: 0;
-  margin: 0;
-  border: none;
-  width: 50%;
-  float: right;
-}
-
-
-/*************************/
-/*  New spinner colours  */
-/*************************/
-.spinner-orange {
-  border-color: #E47128;
-}
-.active .spinner-layer.spinner-orange {
-  /* durations: 4 * ARCTIME */
-  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, blue-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-}
-
-.spinner-dark-teal {
-  border-color: #00878F;
-}
-.active .spinner-layer.spinner-dark-teal {
-  /* durations: 4 * ARCTIME */
-  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-}
-
-.spinner-yellow {
-  border-color: rgba(255, 204, 51, 1);
-}
-.active .spinner-layer.spinner-yellow {
-  /* durations: 4 * ARCTIME */
-  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, yellow-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-}
-
-.spinner-light-teal {
-  border-color: #62AEB2;
-}
-.active .spinner-layer.spinner-light-teal {
-  /* durations: 4 * ARCTIME */
-  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, green-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-}
-
-.spinner-purple {
-  border-color: #8e24aa;
-}
-.active .spinner-layer.spinner-purple {
-  /* durations: 4 * ARCTIME */
-  -webkit-animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-  animation: fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both, red-fade-in-out 5332ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-}
-
-
 /*****************/
 /*  Sketch name  */
 /*****************/
@@ -538,6 +567,7 @@ ul.side-nav li.side-menu-end {
   margin-right: 1rem;
 }
 
+/* Colours for the new and deleted code highlighting */
 .code_highlight_new {
   background-color: rgba(255, 204, 51, 0.5); /* Arduino yellow 50% */
 }
@@ -545,6 +575,28 @@ ul.side-nav li.side-menu-end {
   background-color: #FDBEBE;
 }
 
+/* Clean 50:50 same row divs */
+.two_halves_container {
+  width: 100%; 
+  padding: 0;
+  margin: 0;
+}
+.two_halves_left {
+  padding: 0;
+  margin: 0;
+  border: none;
+  width: 49%;
+  float: right;
+}
+.two_halves_right {
+  padding: 0;
+  margin: 0;
+  border: none;
+  width: 50%;
+  float: right;
+}
+
+
 /*****************************/
 /*  Overwriting Blockly CSS  */
 /*****************************/
@@ -628,11 +680,11 @@ ul.side-nav li.side-menu-end {
   stroke-width: 0px !important;
 }
 
-/* Edit select yellow colour to Arduino yellow, seems to be that colour already
+/* Edit select yellow colour to Arduino yellow. */
+/* Edited out because it seems to be that colour already.
 .blocklyHighlightedConnectionPath {
   stroke: rgba(255, 204, 51, 1) !important;
 }
-
 .blocklySelected>.blocklyPath {
   stroke: rgba(255, 204, 51, 1) !important;
 }
@@ -732,7 +784,7 @@ ul.side-nav li ul li ul li {
   }
 } */
 
-/* Increase the size of Materialize Modal in small res */
+/* Increase the size of Materialize Modal in small resolutions */
 @media only screen and (max-width : 600px) {
   .modal {
     width: 80% !important;
@@ -754,19 +806,6 @@ ul.side-nav li ul li ul li {
   font-size: 2rem !important;
 }
 
-/* Button needs to be at a higher z index than */
-/* card when floating and lower when clicked.  */
-#button_run:hover {
-  -webkit-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-  -moz-box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-  box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-}
-#button_run:active {
-  -webkit-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-  -moz-box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
-}
-
 /* Circle clipper (loading animation) thickness */
 .circle-clipper .circle {
     border-width: 4px !important;

ardublockly/ardublockly.js

@@ -78,7 +78,12 @@ ArduinoMaterial.bindActionFunctions_ = function() {
       ArduinoMaterial.loadServerXmlFile('examples/stepper_knob.xml')});
 
   // Floating buttons
-  ArduinoMaterial.bindClick_('button_run', ArduinoMaterial.sendCode);
+  ArduinoMaterial.bindClick_('button_run',
+      ArduinoMaterial.sendCode);
+  ArduinoMaterial.bindClick_('button_verify',
+      ArduinoMaterial.functionNotImplemented);
+  ArduinoMaterial.bindClick_('button_open_ide',
+      ArduinoMaterial.functionNotImplemented);
   ArduinoMaterial.bindClick_('button_load_xml',
       ArduinoMaterial.XmlTextareaToBlocks);
   ArduinoMaterial.bindClick_(

ardublockly/ardublockly_design.js

@@ -53,14 +53,24 @@ ArduinoMaterial.materializeJsInit = function() {
  * @private
  */
 ArduinoMaterial.bindDesignEventListeners_ = function() {
+  // Resize blockly workspace on window resize
   window.addEventListener(
       'resize', ArduinoMaterial.resizeBlocklyWorkspace, false);
+  // Display/hide the XML load button when the XML collapsible header is clicked
   document.getElementById('xml_collapsible_header').addEventListener(
       'click', ArduinoMaterial.buttonLoadXmlCodeDisplay);
+  // Toggle the content height on click to the IDE output collapsible header
   document.getElementById('ide_output_collapsible_header').addEventListener(
       'click', function() {
         ArduinoMaterial.contentHeightToggle();
       });
+  // Display/hide the additional IDE buttons when mouse over/out of play button
+  $("#button_run").mouseenter(function () {
+      ArduinoMaterial.showExtraIdeButtons(true);
+  });
+  $("#ide_buttons_wrapper").mouseleave(function () {
+      ArduinoMaterial.showExtraIdeButtons(false); 
+  });
 };
 
 /**
@@ -96,6 +106,39 @@ ArduinoMaterial.buttonLoadXmlCodeDisplay = function() {
   }, 500); 
 };
 
+/**
+ * Displays or hides the addition Arduino IDE action buttons.
+ * Hide/display effects done with CCS3 transitions on visibility and opacity.
+ * @param {!boolean} show Indicates if the extra buttons are to be shown.
+ */
+ArduinoMaterial.showExtraIdeButtons = function(show) {
+  var openIdeButton = document.getElementById('button_open_ide');
+  var verifyButton = document.getElementById('button_verify');
+  if (show) {
+    // prevent previously set time-out to hide buttons while trying to show them
+    clearTimeout(ArduinoMaterial.outHoldtimeoutHandle);
+    clearTimeout(ArduinoMaterial.hidetimeoutHandle);
+    verifyButton.style.visibility = 'visible';
+    verifyButton.style.opacity = '1';
+    ArduinoMaterial.showtimeoutHandle = setTimeout(function() {
+      openIdeButton.style.visibility = 'visible';
+      openIdeButton.style.opacity = '1';
+    }, 50);
+  } else {
+    // As the mouse out can be accidental, only hide them after a delay 
+    ArduinoMaterial.outHoldtimeoutHandle = setTimeout(function() {
+      // Prevent show time-out to affect the hiding of the buttons 
+      clearTimeout(ArduinoMaterial.showtimeoutHandle);
+      openIdeButton.style.visibility = 'hidden';
+      openIdeButton.style.opacity = '0';
+      ArduinoMaterial.hidetimeoutHandle = setTimeout(function() {
+        verifyButton.style.visibility = 'hidden';
+        verifyButton.style.opacity = '0';
+      }, 50);
+    }, 200);
+  }
+};
+
 /**
  * Sets the class and content of the toolbox View and Hide button.
  * @param {!boolean} toolboxVisible Indicates if the toolbox visibility.
@@ -117,26 +160,6 @@ ArduinoMaterial.showToolboxButtonState = function(toolboxVisible) {
   }
 };
 
-/**
- * Resizes the container for Blockly. 
- */
-ArduinoMaterial.resizeBlocklyWorkspace = function() {
-  var contentBlocks = document.getElementById('content_blocks');
-  var wrapperPanelSize =
-      ArduinoMaterial.getBBox_(document.getElementById('blocks_panel'));
-
-  contentBlocks.style.top = wrapperPanelSize.y + 'px';
-  contentBlocks.style.left = wrapperPanelSize.x + 'px';
-  // Height and width need to be set, read back, then set again to
-  // compensate for scrollbars.
-  contentBlocks.style.height = wrapperPanelSize.height + 'px';
-  contentBlocks.style.height =
-      (2 * wrapperPanelSize.height - contentBlocks.offsetHeight) + 'px';
-  contentBlocks.style.width = wrapperPanelSize.width + 'px';
-  contentBlocks.style.width =
-      (2 * wrapperPanelSize.width - contentBlocks.offsetWidth) + 'px';
-};
-
 /**
  * Resizes the toolbox button to toggle its visibility to the width of the
  * toolbox.
@@ -158,6 +181,26 @@ ArduinoMaterial.resizeToggleToolboxBotton = function() {
   }
 };
 
+/**
+ * Resizes the container for Blockly. 
+ */
+ArduinoMaterial.resizeBlocklyWorkspace = function() {
+  var contentBlocks = document.getElementById('content_blocks');
+  var wrapperPanelSize =
+      ArduinoMaterial.getBBox_(document.getElementById('blocks_panel'));
+
+  contentBlocks.style.top = wrapperPanelSize.y + 'px';
+  contentBlocks.style.left = wrapperPanelSize.x + 'px';
+  // Height and width need to be set, read back, then set again to
+  // compensate for scrollbars.
+  contentBlocks.style.height = wrapperPanelSize.height + 'px';
+  contentBlocks.style.height =
+      (2 * wrapperPanelSize.height - contentBlocks.offsetHeight) + 'px';
+  contentBlocks.style.width = wrapperPanelSize.width + 'px';
+  contentBlocks.style.width =
+      (2 * wrapperPanelSize.width - contentBlocks.offsetWidth) + 'px';
+};
+
 /**
  * Sets the text for a "Materialize Modal" (like an android Dialog) to have
  * alert-like HTML messages.
@@ -186,13 +229,15 @@ ArduinoMaterial.materialAlert = function(title, body, confirm, callback) {
 };
 
 /**
- * Populates the Arduino output data modal and opens it.
- * @param {!element} bodyEl HTML to include into dialog content.
+ * Populates the Arduino IDE output content area and visually highlights it
+ * to call for the user attention.
+ * @param {!element} bodyEl HTML to include into IDE output content area.
  */
 ArduinoMaterial.arduinoIdeOutput = function(bodyEl) {
-  $('#content_ide_output').text('');
-  $('#content_ide_output').append(bodyEl);
-  ArduinoMaterial.highlightIdeHeader();
+  var ideOuputContent = document.getElementById('content_ide_output');
+  ideOuputContent.innerHTML = '';
+  ideOuputContent.appendChild(bodyEl);
+  ArduinoMaterial.highlightIdeOutputHeader();
 };
 
 /**
@@ -243,7 +288,7 @@ ArduinoMaterial.sketchNameSizeEffect = function() {
 /**
  * Creates a highlight animation to the Arduino IDE output header.
  */
-ArduinoMaterial.highlightIdeHeader = function() {
+ArduinoMaterial.highlightIdeOutputHeader = function() {
   var header = document.getElementById('ide_output_collapsible_header');
   var h = 'ide_output_header_highlight';
   var n = 'ide_output_header_normal';

ardublockly/index.html

@@ -104,9 +104,13 @@
   <div class="container">
     <div class="row">
       <div class="col s12 m12 l8" style="position:relative">
+        <!-- Toolbox visibility button -->
         <a id="button_toggle_toolbox" class="waves-effect waves-light btn-flat button_toggle_toolbox_off"><i id="button_toggle_toolbox_icon" class="mdi-action-visibility-off"></i></a>
+        <!-- Arduino IDE action buttons -->
+        <div id="ide_buttons_wrapper">
+          <a id="button_open_ide" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half"><i class="mdi-action-open-in-browser"></i></a>
+          <a id="button_verify" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half"><i class="mdi-navigation-check"></i></a>
           <a id="button_run" class="waves-effect waves-light waves-circle btn-floating btn-large arduino_orange z-depth-1-half"><i class="mdi-av-play-arrow"></i></a>
-        <!-- Begging of loader circle -->
           <div id="button_run_spinner" class="preloader-wrapper active run_loader" style="display:none">
             <div class="spinner-layer spinner-orange">
               <div class="circle-clipper left">
@@ -145,7 +149,8 @@
               </div>
             </div>
           </div>
-        <!-- End of loader circle -->
+        </div>
+        <!-- Blockly Panel -->
         <div class="card-panel white" style="padding: 0">
           <div id="blocks_panel" class="content blocks_panel_large">
             <div id="content_blocks" class="content z-depth-1"></div>