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

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>