Skip to content

GitLab

A
ardublockly
Commit 06a6e7ef authored by carlosperate's avatar carlosperate
Browse files
Options

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

parent 72911408
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 262 additions and 168 deletions
ardublockly/ardublockly.css
View file @ 06a6e7ef
This diff is collapsed.
ardublockly/ardublockly.js
View file @ 06a6e7ef
...@@ -78,7 +78,12 @@ ArduinoMaterial.bindActionFunctions_ = function() { ...@@ -78,7 +78,12 @@ ArduinoMaterial.bindActionFunctions_ = function() {
ArduinoMaterial.loadServerXmlFile('examples/stepper_knob.xml')}); ArduinoMaterial.loadServerXmlFile('examples/stepper_knob.xml')});
// Floating buttons // 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.bindClick_('button_load_xml',
ArduinoMaterial.XmlTextareaToBlocks); ArduinoMaterial.XmlTextareaToBlocks);
ArduinoMaterial.bindClick_( ArduinoMaterial.bindClick_(
......
ardublockly/ardublockly_design.js
View file @ 06a6e7ef
...@@ -29,17 +29,17 @@ ArduinoMaterial.materializeJsInit = function() { ...@@ -29,17 +29,17 @@ ArduinoMaterial.materializeJsInit = function() {
$(document).ready(function() { $(document).ready(function() {
// Navigation bar // Navigation bar
$('.button-collapse').sideNav({ $('.button-collapse').sideNav({
menuWidth: 240, menuWidth: 240,
activationWidth: 70, activationWidth: 70,
edge: 'left'}); edge: 'left'});
// Drop down menus // Drop down menus
$('.dropdown-button').dropdown({hover: false}); $('.dropdown-button').dropdown({hover: false});
// Overlay content panels using modals (android dialogs) // Overlay content panels using modals (android dialogs)
$('.modal-trigger').leanModal({ $('.modal-trigger').leanModal({
dismissible: true, dismissible: true,
opacity: .5, opacity: .5,
in_duration: 200, in_duration: 200,
out_duration: 250 out_duration: 250
}); });
// Pop-up tool tips // Pop-up tool tips
$('.tooltipped').tooltip({'delay': 50}); $('.tooltipped').tooltip({'delay': 50});
...@@ -53,13 +53,23 @@ ArduinoMaterial.materializeJsInit = function() { ...@@ -53,13 +53,23 @@ ArduinoMaterial.materializeJsInit = function() {
* @private * @private
*/ */
ArduinoMaterial.bindDesignEventListeners_ = function() { ArduinoMaterial.bindDesignEventListeners_ = function() {
// Resize blockly workspace on window resize
window.addEventListener( window.addEventListener(
'resize', ArduinoMaterial.resizeBlocklyWorkspace, false); 'resize', ArduinoMaterial.resizeBlocklyWorkspace, false);
// Display/hide the XML load button when the XML collapsible header is clicked
document.getElementById('xml_collapsible_header').addEventListener( document.getElementById('xml_collapsible_header').addEventListener(
'click', ArduinoMaterial.buttonLoadXmlCodeDisplay); 'click', ArduinoMaterial.buttonLoadXmlCodeDisplay);
// Toggle the content height on click to the IDE output collapsible header
document.getElementById('ide_output_collapsible_header').addEventListener( document.getElementById('ide_output_collapsible_header').addEventListener(
'click', function() { 'click', function() {
ArduinoMaterial.contentHeightToggle(); 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() { ...@@ -96,6 +106,39 @@ ArduinoMaterial.buttonLoadXmlCodeDisplay = function() {
}, 500); }, 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. * Sets the class and content of the toolbox View and Hide button.
* @param {!boolean} toolboxVisible Indicates if the toolbox visibility. * @param {!boolean} toolboxVisible Indicates if the toolbox visibility.
...@@ -117,26 +160,6 @@ ArduinoMaterial.showToolboxButtonState = function(toolboxVisible) { ...@@ -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 * Resizes the toolbox button to toggle its visibility to the width of the
* toolbox. * toolbox.
...@@ -158,6 +181,26 @@ ArduinoMaterial.resizeToggleToolboxBotton = function() { ...@@ -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 * Sets the text for a "Materialize Modal" (like an android Dialog) to have
* alert-like HTML messages. * alert-like HTML messages.
...@@ -186,13 +229,15 @@ ArduinoMaterial.materialAlert = function(title, body, confirm, callback) { ...@@ -186,13 +229,15 @@ ArduinoMaterial.materialAlert = function(title, body, confirm, callback) {
}; };
/** /**
* Populates the Arduino output data modal and opens it. * Populates the Arduino IDE output content area and visually highlights it
* @param {!element} bodyEl HTML to include into dialog content. * to call for the user attention.
* @param {!element} bodyEl HTML to include into IDE output content area.
*/ */
ArduinoMaterial.arduinoIdeOutput = function(bodyEl) { ArduinoMaterial.arduinoIdeOutput = function(bodyEl) {
$('#content_ide_output').text(''); var ideOuputContent = document.getElementById('content_ide_output');
$('#content_ide_output').append(bodyEl); ideOuputContent.innerHTML = '';
ArduinoMaterial.highlightIdeHeader(); ideOuputContent.appendChild(bodyEl);
ArduinoMaterial.highlightIdeOutputHeader();
}; };
/** /**
...@@ -243,7 +288,7 @@ ArduinoMaterial.sketchNameSizeEffect = function() { ...@@ -243,7 +288,7 @@ ArduinoMaterial.sketchNameSizeEffect = function() {
/** /**
* Creates a highlight animation to the Arduino IDE output header. * 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 header = document.getElementById('ide_output_collapsible_header');
var h = 'ide_output_header_highlight'; var h = 'ide_output_header_highlight';
var n = 'ide_output_header_normal'; var n = 'ide_output_header_normal';
......
ardublockly/index.html
View file @ 06a6e7ef
...@@ -97,55 +97,60 @@ ...@@ -97,55 +97,60 @@
</li> </li>
</ul> </ul>
</li> </li>
<li class="no-padding side-menu-end">&nbsp;</li> <li class="no-padding side-menu-end">&nbsp;</li>
</ul> </ul>
<!-- Content --> <!-- Content -->
<div class="container"> <div class="container">
<div class="row"> <div class="row">
<div class="col s12 m12 l8" style="position:relative"> <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> <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>
<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> <!-- Arduino IDE action buttons -->
<!-- Begging of loader circle --> <div id="ide_buttons_wrapper">
<div id="button_run_spinner" class="preloader-wrapper active run_loader" style="display:none"> <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>
<div class="spinner-layer spinner-orange"> <a id="button_verify" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half"><i class="mdi-navigation-check"></i></a>
<div class="circle-clipper left"> <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>
<div class="circle"></div> <div id="button_run_spinner" class="preloader-wrapper active run_loader" style="display:none">
</div><div class="gap-patch"> <div class="spinner-layer spinner-orange">
<div class="circle"></div> <div class="circle-clipper left">
</div><div class="circle-clipper right"> <div class="circle"></div>
<div class="circle"></div> </div><div class="gap-patch">
<div class="circle"></div>
</div><div class="circle-clipper right">
<div class="circle"></div>
</div>
</div> </div>
</div> <div class="spinner-layer spinner-dark-teal">
<div class="spinner-layer spinner-dark-teal"> <div class="circle-clipper left">
<div class="circle-clipper left"> <div class="circle"></div>
<div class="circle"></div> </div><div class="gap-patch">
</div><div class="gap-patch"> <div class="circle"></div>
<div class="circle"></div> </div><div class="circle-clipper right">
</div><div class="circle-clipper right"> <div class="circle"></div>
<div class="circle"></div> </div>
</div> </div>
</div> <div class="spinner-layer spinner-yellow">
<div class="spinner-layer spinner-yellow"> <div class="circle-clipper left">
<div class="circle-clipper left"> <div class="circle"></div>
<div class="circle"></div> </div><div class="gap-patch">
</div><div class="gap-patch"> <div class="circle"></div>
<div class="circle"></div> </div><div class="circle-clipper right">
</div><div class="circle-clipper right"> <div class="circle"></div>
<div class="circle"></div> </div>
</div> </div>
</div> <div class="spinner-layer spinner-light-teal">
<div class="spinner-layer spinner-light-teal"> <div class="circle-clipper left">
<div class="circle-clipper left"> <div class="circle"></div>
<div class="circle"></div> </div><div class="gap-patch">
</div><div class="gap-patch"> <div class="circle"></div>
<div class="circle"></div> </div><div class="circle-clipper right">
</div><div class="circle-clipper right"> <div class="circle"></div>
<div class="circle"></div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- End of loader circle --> <!-- Blockly Panel -->
<div class="card-panel white" style="padding: 0"> <div class="card-panel white" style="padding: 0">
<div id="blocks_panel" class="content blocks_panel_large"> <div id="blocks_panel" class="content blocks_panel_large">
<div id="content_blocks" class="content z-depth-1"></div> <div id="content_blocks" class="content z-depth-1"></div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment