Skip to content

GitLab

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

Add functionality to IDE button for quick access.

parent 4a52d8a9
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 250 additions and 110 deletions
ardublockly/ardublockly.css
View file @ f67e48d8
......@@ -301,29 +301,21 @@ ul.side-nav li.side-menu-end {
width: 160px;
z-index: 12;
}
#button_run {
#button_ide_large {
position: absolute;
right: 0px;
top: 0px;
background-color: #E47128; /* Arduino orange */
}
#button_run:hover {
background-color: rgba(255, 204, 51, 1); /* Arduino yellow */
width: 55px;
height: 55px;
}
.run_loader {
position: absolute !important;
right: 0px !important;
top: 0px !important;
width: 56px !important;
height: 56px !important;
z-index: 5;
#button_ide_large i {
font-size: 2.4rem !important;
line-height: 55px;
}
#button_verify {
#button_ide_middle {
position: absolute;
right: 72px;
top: 10px;
background-color: #00979C; /* Arduino teal */
visibility: hidden;
opacity: 0;
-moz-transition: visibility 0.3s linear, opacity 0.3s linear;
......@@ -331,15 +323,10 @@ ul.side-nav li.side-menu-end {
-o-transition: visibility 0.3s linear, opacity 0.3s linear;
transition: visibility 0.3s linear, opacity 0.3s linear;
}
#button_verify:hover {
background-color: #62AEB2; /* Arduino teal light */
}
#button_open_ide {
#button_ide_left {
position: absolute;
right: 126px;
top: 10px;
background-color: rgba(255, 204, 51, 1); /* Arduino yellow */
visibility: hidden;
opacity: 0;
-moz-transition: visibility 0.3s linear, opacity 0.3s linear;
......@@ -347,8 +334,18 @@ ul.side-nav li.side-menu-end {
-o-transition: visibility 0.3s linear, opacity 0.3s linear;
transition: visibility 0.3s linear, opacity 0.3s linear;
}
#button_open_ide:hover {
background-color: rgba(255, 220, 110, 1); /* Lighter Arduino yellow */
#button_ide_large:hover:before,
#button_ide_middle:hover:before,
#button_ide_left:hover:before {
content: "";
display: block;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(255,255,255, 0.25);
transition: all .3s linear;
}
#button_load_xml {
......@@ -360,17 +357,17 @@ ul.side-nav li.side-menu-end {
/* 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_ide_large:hover,
#button_ide_middle:hover,
#button_ide_left: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_ide_large:active,
#button_ide_middle:active,
#button_ide_left: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);
......@@ -411,9 +408,17 @@ ul.side-nav li.side-menu-end {
}
/*************************/
/* New spinner colours */
/*************************/
/*****************************/
/* Spinner and new colours */
/*****************************/
.ide_loader {
position: absolute !important;
right: 0px !important;
top: 0px !important;
width: 56px !important;
height: 56px !important;
z-index: 5;
}
.spinner-orange {
border-color: #E47128;
}
......@@ -422,7 +427,6 @@ ul.side-nav li.side-menu-end {
-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;
}
......@@ -431,7 +435,6 @@ ul.side-nav li.side-menu-end {
-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);
}
......@@ -440,7 +443,6 @@ ul.side-nav li.side-menu-end {
-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;
}
......@@ -449,7 +451,6 @@ ul.side-nav li.side-menu-end {
-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;
}
......@@ -811,13 +812,19 @@ ul.side-nav li ul li ul li {
.mdi-action-visibility-off {
font-size: 1.5rem !important;
}
#button_run .mdi-av-play-arrow {
font-size: 2.5rem !important;
#button_ide_large .mdi-av-play-arrow,
#button_ide_large .mdi-navigation-check,
#button_ide_large .mdi-action-open-in-browser {
}
#button_load_xml .mdi-action-extension {
font-size: 2rem !important;
}
/* Why the hell does button large has a predefined background colour !! */
.btn-large:hover {
background-color: inherit;
}
/* Circle clipper (loading animation) thickness */
.circle-clipper .circle {
border-width: 4px !important;
......
ardublockly/ardublockly.js
View file @ f67e48d8
This diff is collapsed.
ardublockly/ardublockly_design.js
View file @ f67e48d8
......@@ -67,7 +67,7 @@ Ardublockly.bindDesignEventListeners = function() {
});
// Display/hide the additional IDE buttons when mouse over/out of play button
$('#button_run').mouseenter(function() {
$('#button_ide_large').mouseenter(function() {
Ardublockly.showExtraIdeButtons(true);
});
$('#ide_buttons_wrapper').mouseleave(function() {
......@@ -75,23 +75,6 @@ Ardublockly.bindDesignEventListeners = function() {
});
};
/**
* Shows or hides the spinner around the play button.
* @param {!boolean} active True turns ON the spinner, false OFF.
*/
Ardublockly.runButtonSpinner = function(active) {
var spinner = document.getElementById('button_run_spinner');
var buttonEl = document.getElementById('button_run');
var buttonClass = buttonEl.className;
if (active) {
spinner.style.display = 'block';
buttonEl.className = buttonClass.replace('arduino_orange', 'grey');
} else {
spinner.style.display = 'none';
buttonEl.className = buttonClass.replace('grey', 'arduino_orange');
}
};
/**
* Displays or hides the 'load textarea xml' button based on the state of the
* collapsible 'xml_collapsible_body'.
......@@ -109,39 +92,103 @@ Ardublockly.buttonLoadXmlCodeDisplay = function() {
}, 400);
};
/**
* Changes the IDE launch buttons based on the option indicated in the argument.
* Uses jQuery.
* @param {!string} value One of the 3 possible values from the drop down select
* in the settings modal: 'upload', 'verify', or 'open'.
*/
Ardublockly.changeIdeButtonsDesign = function(value) {
var buttonLeft = document.getElementById('button_ide_left');
var iconLeft = document.getElementById('button_ide_left_icon');
var buttonMiddle = document.getElementById('button_ide_middle');
var iconMiddle = document.getElementById('button_ide_middle_icon');
var buttonLarge = document.getElementById('button_ide_large');
var iconLarge = document.getElementById('button_ide_large_icon');
if (value === 'upload') {
buttonLeft.className =
buttonLeft.className.replace(/arduino_\S+/, 'arduino_yellow');
iconLeft.className = 'mdi-action-open-in-browser';
buttonMiddle.className =
buttonMiddle.className.replace(/arduino_\S+/, 'arduino_teal');
iconMiddle.className = 'mdi-navigation-check';
buttonLarge.className =
buttonLarge.className.replace(/arduino_\S+/, 'arduino_orange');
iconLarge.className = 'mdi-av-play-arrow';
} else if (value === 'verify') {
buttonLeft.className =
buttonLeft.className.replace(/arduino_\S+/, 'arduino_yellow');
iconLeft.className = 'mdi-action-open-in-browser';
buttonMiddle.className =
buttonMiddle.className.replace(/arduino_\S+/, 'arduino_orange');
iconMiddle.className = 'mdi-av-play-arrow';
buttonLarge.className =
buttonLarge.className.replace(/arduino_\S+/, 'arduino_teal');
iconLarge.className = 'mdi-navigation-check';
} else if (value === 'open') {
buttonLeft.className =
buttonLeft.className.replace(/arduino_\S+/, 'arduino_teal');
iconLeft.className = 'mdi-navigation-check';
buttonMiddle.className =
buttonMiddle.className.replace(/arduino_\S+/, 'arduino_orange');
iconMiddle.className = 'mdi-av-play-arrow';
buttonLarge.className =
buttonLarge.className.replace(/arduino_\S+/, 'arduino_yellow');
iconLarge.className = 'mdi-action-open-in-browser';
}
};
/**
* Displays or hides the additional 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.
*/
Ardublockly.showExtraIdeButtons = function(show) {
var openIdeButton = document.getElementById('button_open_ide');
var verifyButton = document.getElementById('button_verify');
var IdeButtonLeft = document.getElementById('button_ide_left');
var IdeButtonMiddle = document.getElementById('button_ide_middle');
if (show) {
// prevent previously set time-out to hide buttons while trying to show them
clearTimeout(Ardublockly.outHoldtimeoutHandle);
clearTimeout(Ardublockly.hidetimeoutHandle);
verifyButton.style.visibility = 'visible';
verifyButton.style.opacity = '1';
IdeButtonMiddle.style.visibility = 'visible';
IdeButtonMiddle.style.opacity = '1';
Ardublockly.showtimeoutHandle = setTimeout(function() {
openIdeButton.style.visibility = 'visible';
openIdeButton.style.opacity = '1';
IdeButtonLeft.style.visibility = 'visible';
IdeButtonLeft.style.opacity = '1';
}, 50);
} else {
// As the mouse out can be accidental, only hide them after a delay
Ardublockly.outHoldtimeoutHandle = setTimeout(function() {
// Prevent show time-out to affect the hiding of the buttons
clearTimeout(Ardublockly.showtimeoutHandle);
openIdeButton.style.visibility = 'hidden';
openIdeButton.style.opacity = '0';
IdeButtonLeft.style.visibility = 'hidden';
IdeButtonLeft.style.opacity = '0';
Ardublockly.hidetimeoutHandle = setTimeout(function() {
verifyButton.style.visibility = 'hidden';
verifyButton.style.opacity = '0';
IdeButtonMiddle.style.visibility = 'hidden';
IdeButtonMiddle.style.opacity = '0';
}, 50);
}, 200);
}
};
/**
* Shows or hides the spinner around the large IDE button.
* @param {!boolean} active True turns ON the spinner, false OFF.
*/
Ardublockly.largeIdeButtonSpinner = function(active) {
var spinner = document.getElementById('button_ide_large_spinner');
var buttonIdeLarge = document.getElementById('button_ide_large');
var buttonClass = buttonIdeLarge.className;
if (active) {
spinner.style.display = 'block';
buttonIdeLarge.className = buttonIdeLarge.className + ' grey';
} else {
spinner.style.display = 'none';
buttonIdeLarge.className = buttonClass.replace(' grey', '');
}
};
/**
* Sets the toolbox HTML element to be display or not and change the visibility
* button to reflect the new state.
......@@ -182,12 +229,17 @@ Ardublockly.displayToolbox = function(show) {
buttonIcon.className = buttonIcon.className.replace(visOn, visOff);
toolbox.animate(
{height: document.getElementById('content_blocks').style.height}, 300,
function() { $('#toolboxButtonScreen').remove(); });
function() {
Blockly.fireUiEvent(window, 'resize');
$('#toolboxButtonScreen').remove();
});
} else {
buttonIcon.className = buttonIcon.className.replace(visOff, visOn);
toolbox.animate({height: 38}, 300, function() {
button.className = button.className.replace(classOff, classOn);
toolbox.fadeOut(350, 'linear', function() {
Blockly.fireUiEvent(window, 'resize');
setTimeout(function() { toolbox.height(38); }, 100);
$('#toolboxButtonScreen').remove();
});
});
......
ardublockly/ardublocklyserver_ajax.js
View file @ f67e48d8
......@@ -25,8 +25,7 @@ ArdublocklyServer.ajaxPostForm = function(url, params, callback) {
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200) {
var el = ArdublocklyServer.createElementFromJson(request.responseText);
callback(el);
callback(request.responseText);
} else if (request.status == 405) {
// return a null element which will be dealt with in the front end
callback(null);
......@@ -60,8 +59,7 @@ ArdublocklyServer.ajaxPostPlain = function(url, data, callback) {
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200) {
var el = ArdublocklyServer.createElementFromJson(request.responseText);
callback(el);
callback(request.responseText);
} else if (request.status == 405) {
// return a null element which will be dealt with in the front end
callback(null);
......
ardublockly/index.html
View file @ f67e48d8
......@@ -108,10 +108,10 @@
<a id="button_toggle_toolbox" class="waves-effect waves-light btn-flat button_toggle_toolbox_off" style="display: none"><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>
<div id="button_run_spinner" class="preloader-wrapper active run_loader" style="display:none">
<a id="button_ide_left" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_yellow"><i id="button_ide_left_icon" class="mdi-action-open-in-browser"></i></a>
<a id="button_ide_middle" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_teal"><i id="button_ide_middle_icon" class="mdi-navigation-check"></i></a>
<a id="button_ide_large" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_orange"><i id="button_ide_large_icon" class="mdi-av-play-arrow"></i></a>
<div id="button_ide_large_spinner" class="preloader-wrapper active ide_loader" style="display:none">
<div class="spinner-layer spinner-orange">
<div class="circle-clipper left">
<div class="circle"></div>
......@@ -196,7 +196,7 @@
</div>
<div id="ide_output_spacer"></div>
<!-- Settings: Displayed as a Materialize Modal (android dialog) -->
<!-- Settings: Displayed as a Materialize Modal -->
<div id="settings_dialog" class="modal modal-fixed-footer">
<div class="modal-content">
<h4>Settings</h4>
......@@ -211,9 +211,7 @@
<div class="settings_div">
<label>Arduino Board:</label>
<select name="settings_board" id="board">
<option value="uno">Uno</option>
<option value="leonardo">Leonardo</option>
<option value="mega">Mega</option>
<option value="uno">Boards unknown</option>
</select>
</div>
<div class="settings_div">
......@@ -223,10 +221,11 @@
</select>
</div>
<div class="settings_div">
<label>IDE:</label> <br>
<label>Default IDE button:</label> <br>
<select name="settings_ide" id="ide_settings">
<option value="ide_upload">Compile</option>
<option value="ide_only">Load</option>
<option value="verify">Verify sketch</option>
<option value="open">Open sketch in IDE </option>
<option value="upload">Compile and Upload sketch</option>
</select>
</div>
</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