Skip to content

GitLab

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

Add bottom expandable content area for the Arduino IDE output data.

parent 84b18b27
Hide whitespace changes
Inline Side-by-side
Showing with 264 additions and 52 deletions
ardublockly/ardublockly.css
View file @ d1c70fca
......@@ -31,7 +31,8 @@ body {
background-color: #00979C;
}
.arduino_teal_dark {
background-color: #00878F;
background-color: #006468;
/* background-color: #00878F; from community logo */
}
.arduino_teal_light {
background-color: #62AEB2;
......@@ -41,7 +42,8 @@ body {
}
.arduino_yellow {
background-color: rgba(255, 204, 51, 1);
/* background-color: #E5AD24; */
/* background-color: #FFCC33; */
/* background-color: #E5AD24; from community logo */
}
.arduino_brown {
background-color: #8C7965;
......@@ -102,20 +104,33 @@ ul.side-nav li.side-menu-end {
width: 100%;
background-color: #ffffff;
}
.height_transition {
transition: height 0.2s ease-out;
-ms-transition: height 0.2s ease-out;
-moz-transition: height 0.2s ease-out;
-webkit-transition: height 0.2s ease-out;
}
#blocks_panel {
padding: 0px;
position: relative!important;
position: relative !important;
-webkit-border-radius: 4px !important;
-moz-border-radius: 4px !important;
border-radius: 4px !important;
min-height: 480px;
height: -moz-calc(100vh - 150px); /* Firefox */
height: -webkit-calc(100vh - 150px); /* WebKit */
height: -o-calc(100vh - 150px); /* Opera */
height: calc(100vh - 150px); /* Standard */
}
.blocks_panel_large {
height: -moz-calc(100vh - 190px); /* Firefox */
height: -webkit-calc(100vh - 190px); /* WebKit */
height: -o-calc(100vh - 190px); /* Opera */
height: calc(100vh - 190px); /* Standard */
}
.blocks_panel_small {
height: -moz-calc(100vh - 390px); /* Firefox */
height: -webkit-calc(100vh - 390px); /* WebKit */
height: -o-calc(100vh - 390px); /* Opera */
height: calc(100vh - 390px); /* Standard */
}
#content_blocks {
margin: 0;
padding: 0;
......@@ -131,11 +146,20 @@ ul.side-nav li.side-menu-end {
overflow: scroll;
font-style: 0.2em !important;
min-height: 384px;
height: -moz-calc(100vh - 247px); /* Firefox */
height: -webkit-calc(100vh - 247px); /* WebKit */
height: -o-calc(100vh - 247px); /* Opera */
height: calc(100vh - 247px); /* Standard */
}
.content_xml_large {
height: -moz-calc(100vh - 286px); /* Firefox */
height: -webkit-calc(100vh - 286px); /* WebKit */
height: -o-calc(100vh - 286px); /* Opera */
height: calc(100vh - 286px); /* Standard */
}
.content_xml_small {
height: -moz-calc(100vh - 486px); /* Firefox */
height: -webkit-calc(100vh - 486px); /* WebKit */
height: -o-calc(100vh - 486px); /* Opera */
height: calc(100vh - 486px); /* Standard */
}
/* The materialize framework changes height of the div to show or hide */
/* the collapsible elements. */
......@@ -147,16 +171,123 @@ ul.side-nav li.side-menu-end {
font-family: monospace;
overflow: scroll;
font-style: 0.2em !important;
-moz-user-select: text;
-khtml-user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
user-select: text;
min-height: 388px;
height: -moz-calc(100vh - 243px); /* Firefox */
height: -webkit-calc(100vh - 243px); /* WebKit */
height: -o-calc(100vh - 243px); /* Opera */
height: calc(100vh - 243px); /* Standard */
}
.content_arduino_large {
height: -moz-calc(100vh - 280px); /* Firefox */
height: -webkit-calc(100vh - 280px); /* WebKit */
height: -o-calc(100vh - 280px); /* Opera */
height: calc(100vh - 280px); /* Standard */
}
.content_arduino_small {
height: -moz-calc(100vh - 480px); /* Firefox */
height: -webkit-calc(100vh - 480px); /* WebKit */
height: -o-calc(100vh - 480px); /* Opera */
height: calc(100vh - 480px); /* Standard */
}
/****************/
/* IDE output */
/****************/
.ide_output_wrapper {
width: 100%;
margin: 0;
padding: 0;
position: fixed;
bottom: -16px;
z-index: 10;
}
.ide_output_collapsible {
box-shadow: 0 0px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
border-left: 0;
border-right: 0;
}
.ide_output_header_normal {
background-color: #006468;
color: #ffffff;
-moz-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;;
-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;;
-webkit-transition: background-color 0.6s ease-in;
}
#content_ide_output {
resize: none;
outline: none;
border: none;
padding: 0px 5px;
font-family: monospace;
overflow: scroll;
font-style: 0.2em !important;
min-height: 200px;
max-height: 200px;
-moz-user-select: text;
-khtml-user-select: text;
-webkit-user-select: text;
-ms-user-select: text;
user-select: text;
background-color: #303030;
color: #ffffff;
}
/* IDE output content text formatting */
#content_ide_output .arduino_dialog_success {
color: #00979C; /* arduino light teal */
font-size: 1.2rem;
margin: 16px 0px 8px 0px;
}
#content_ide_output .arduino_dialog_failure {
color: #E47128; /* arduino orange */
font-size: 1.2rem;
margin: 16px 0px 8px 0px;
}
#content_ide_output .arduino_dialog_out {
color: #ffffff;
font-size: 0.9rem;
}
#content_ide_output .arduino_dialog_out_error {
color: #E47128; /* arduino orange */
font-size: 0.9rem;
padding-top: 8px;
display: block;
}
/* Spacer is used to not leave any content behind the collapsible header */
#ide_output_spacer {
height: 40px;
}
@media only screen and (min-width: 0) {
#ide_output_spacer {
height: 20px;
}
}
@media only screen and (min-width: 601px) {
#ide_output_spacer {
height: 30px;
}
}
@media only screen and (min-width: 993px) {
#ide_output_spacer {
height: 40px;
}
}
......
ardublockly/ardublockly.js
View file @ d1c70fca
......@@ -84,7 +84,7 @@ ArduinoMaterial.bindActionFunctions_ = function() {
ArduinoMaterial.bindClick_(
'button_toggle_toolbox', ArduinoMaterial.toogleToolbox);
// Settings fields
// Settings modal input field listeners
ArduinoMaterial.bindClick_('settings_compiler_location', function() {
ArduServerCompiler.requestNewCompilerLocation(
ArduinoMaterial.setCompilerLocationHtml);
......@@ -95,17 +95,6 @@ ArduinoMaterial.bindActionFunctions_ = function() {
});
};
/**
* Binds the event listeners relevant to the page design.
* @private
*/
ArduinoMaterial.bindDesignEventListeners_ = function() {
window.addEventListener(
'resize', ArduinoMaterial.resizeBlocklyWorkspace, false);
document.getElementById('xml_collapsible_header').addEventListener(
'click', ArduinoMaterial.buttonLoadXmlCodeDisplay);
};
/**
* Binds the event listeners relevant to Blockly.
* @private
......@@ -414,7 +403,7 @@ ArduinoMaterial.sendCode = function() {
ArduinoMaterial.sendCodeReturn = function(dataBack) {
ArduinoMaterial.runButtonSpinner(false);
if (dataBack != null) {
ArduinoMaterial.arduinoIdeModal(dataBack);
ArduinoMaterial.arduinoIdeOutput(dataBack);
} else {
// If the element is Null, then Ardublockly server is not running
ArduinoMaterial.openNotConnectedModal();
......
ardublockly/ardublockly_design.js
View file @ d1c70fca
......@@ -48,6 +48,21 @@ ArduinoMaterial.materializeJsInit = function() {
});
};
/**
* Binds the event listeners relevant to the page design.
* @private
*/
ArduinoMaterial.bindDesignEventListeners_ = function() {
window.addEventListener(
'resize', ArduinoMaterial.resizeBlocklyWorkspace, false);
document.getElementById('xml_collapsible_header').addEventListener(
'click', ArduinoMaterial.buttonLoadXmlCodeDisplay);
document.getElementById('ide_output_collapsible_header').addEventListener(
'click', function() {
ArduinoMaterial.contentHeightToggle();
});
};
/**
* Sets the spinner around the play button ON or OFF.
* @param {!boolean} active True turns ON the spinner, false OFF.
......@@ -103,7 +118,7 @@ ArduinoMaterial.showToolboxButtonState = function(toolboxVisible) {
};
/**
* Resizes the container for Blockly and forces a re-render of the SVG.
* Resizes the container for Blockly.
*/
ArduinoMaterial.resizeBlocklyWorkspace = function() {
var contentBlocks = document.getElementById('content_blocks');
......@@ -174,11 +189,10 @@ 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.
*/
ArduinoMaterial.arduinoIdeModal = function(bodyEl) {
$('#arduino_dialog_body').text('');
$('#arduino_dialog_body').append(bodyEl);
$('#arduino_dialog').openModal();
window.location.hash = '';
ArduinoMaterial.arduinoIdeOutput = function(bodyEl) {
$('#content_ide_output').text('');
$('#content_ide_output').append(bodyEl);
ArduinoMaterial.highlightIdeHeader();
};
/**
......@@ -226,6 +240,68 @@ ArduinoMaterial.sketchNameSizeEffect = function() {
sketchNameInput.blur(correctInput);
};
/**
* Creates a highlight animation to the Arduino IDE output header.
*/
ArduinoMaterial.highlightIdeHeader = function() {
var header = document.getElementById('ide_output_collapsible_header');
var h = 'ide_output_header_highlight';
var n = 'ide_output_header_normal';
header.className = header.className.replace(/ide_output_header_\S+/, h);
setTimeout(function() {
header.className = header.className.replace(/ide_output_header_\S+/, n);
setTimeout(function() {
header.className = header.className.replace(/ide_output_header_\S+/, h);
setTimeout(function() {
header.className = header.className.replace(/ide_output_header_\S+/, n);
}, 500);
}, 500);
}, 500);
};
/**
* Controls the height of the block and collapsible content between 2 states
* using CSS classes.
* It's state is dependent on the state of the IDE output collapsible. The
* collapsible functionality from Materialize framework adds the active class,
* so this class is consulted to shrink or expand the content height.
* @param {!Boolean} shrinkIt Indicates if the contents should be shrunk.
*/
ArduinoMaterial.contentHeightToggle = function() {
var outputHeader = document.getElementById('ide_output_collapsible_header');
var blocks = document.getElementById('blocks_panel');
var arduino = document.getElementById('content_arduino');
var xml = document.getElementById('content_xml');
// Blockly doesn't resize with CSS3 transitions enabled, so do it manually
var timerId = setInterval(function () {
Blockly.fireUiEvent(window, 'resize');
}, 15);
setTimeout(function() {
clearInterval(timerId);
}, 400);
// Apart from checking if the output is visible, do not bother to shrink in
// small screens as the minimum height of the content will kick in and cause
// the content to be behind the IDE output data anyway.
if (outputHeader.className.match('active') && $(window).height() > 850) {
blocks.className = "content height_transition blocks_panel_small";
arduino.className = "content height_transition content_arduino_small";
xml.className = "content height_transition content_xml_small";
} else {
blocks.className = "content height_transition blocks_panel_large";
arduino.className = "content height_transition content_arduino_large";
xml.className = "content height_transition content_xml_large";
}
// If the height transition CSS is left then blockly does not resize
setTimeout(function() {
blocks.className = blocks.className.replace('height_transition', '');
arduino.className= arduino.className.replace('height_transition', '');
xml.className= xml.className.replace('height_transition', '');
}, 400);
};
/**
* Compute the absolute coordinates and dimensions of an HTML element.
* @param {!Element} element Element to match.
......
ardublocklyserver/js/ArduServerCompiler.js → ardublockly/ardublocklyserver_ajax.js
View file @ d1c70fca
......@@ -127,7 +127,7 @@ ArduServerCompiler.createElementFromJson = function(json_data) {
element = document.createElement('input');
element.setAttribute('type', 'text');
element.setAttribute('value', parsed_json.display_text);
}else if (parsed_json.element == 'dropdown') {
} else if (parsed_json.element == 'dropdown') {
// Drop down list of unknown length with a selected item
element = document.createElement('select');
element.name = parsed_json.response_type;
......
ardublockly/classic/index.html
View file @ d1c70fca
......@@ -44,7 +44,7 @@
<!-- Load Blockly's language strings -->
<script src="../../blockly/msg/js/en.js"></script>
<!-- Arduino Server Compiler -->
<script src="../../ardublocklyserver/js/ArduServerCompiler.js"></script>
<script src="../ardublocklyserver_ajax.js"></script>
<!-- Prettify -->
<link rel="stylesheet" href="../../blockly/demos/prettify.css">
<script src="../../blockly/demos/prettify.js"></script>
......
ardublockly/index.html
View file @ d1c70fca
......@@ -7,11 +7,9 @@
<link rel="icon" href="img/favicon.ico">
<title>Ardublockly</title>
<!-- Materialize CSS -->
<!-- Materialize, Prettify, and Ardublockly CSS -->
<link href="materialize/materialize.css" rel="stylesheet" media="screen,projection">
<!-- Prettify CSS -->
<link rel="stylesheet" href="../blockly/demos/prettify.css">
<!-- Ardublockly CSS -->
<link href="ardublockly.css" rel="stylesheet" media="screen,projection">
<!-- Ardublockly - For now uncompressed files -->
......@@ -53,7 +51,7 @@
</head>
<body>
<!-- Horizonal Navigation bar -->
<!-- Horizontal Navigation bar -->
<nav class="nav-fixed arduino_teal">
<div class="nav-wrapper container">
<a class="button-collapse" href="#" data-activates="slide-out" id="button-collapse"><i class="mdi-navigation-menu"></i>
......@@ -148,31 +146,51 @@
</div>
</div>
<!-- End of loader circle -->
<div class="card-panel white z-depth-1" id="blocks_panel">
<div id="content_blocks" class="content"></div>
<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>
</div>
</div>
</div>
<div class="col s12 m12 l4">
<ul class="collapsible z-depth-1" data-collapsible="accordion">
<li>
<div class="collapsible-header active"><span class="collapsible_logo">{ }</span>Arduino Source Code</div>
<div class="collapsible-header active">
<span class="collapsible_logo">{ }</span>Arduino Source Code
</div>
<div class="collapsible-body">
<pre id="content_arduino" class="content"></pre>
<pre id="content_arduino" class="content content_height_transition content_arduino_large"></pre>
</div>
</li>
<li>
<div class="collapsible-header" id="xml_collapsible_header"><span class="collapsible_logo">&#60; &#62;</span>Blocks XML</div>
<div class="collapsible-body" style="position:relative" id="xml_collapsible_body">
<div class="collapsible-header" id="xml_collapsible_header">
<span class="collapsible_logo">&#60; &#62;</span>Blocks XML
</div>
<div class="collapsible-body" style="position:relative" id="xml_collapsible_body">
<a class="btn-floating btn-large waves-effect waves-light arduino_teal z-depth-1-half" id="button_load_xml"><i class="mdi-action-extension"></i></a>
<textarea id="content_xml" class="content" wrap="soft"></textarea>
<textarea id="content_xml" class="content content_height_transition content_xml_large" wrap="soft"></textarea>
</div>
</li>
</ul>
</div>
<br><br>
</div>
</div>
<!-- IDE Output content -->
<div class="ide_output_wrapper">
<ul class="collapsible ide_output_collapsible" data-collapsible="expandable">
<li>
<div id="ide_output_collapsible_header" class="collapsible-header ide_output_header_normal">
<i class="mdi-action-swap-vert Medium" style="font-size: 2.2rem;"></i> Arduino IDE output
</div>
<div class="collapsible-body">
<div id="content_ide_output" class="content"></div>
</div>
</li>
</ul>
</div>
<div id="ide_output_spacer"></div>
<!-- Settings: Displayed as a Materialize Modal (android dialog) -->
<div id="settings_dialog" class="modal modal-fixed-footer">
<div class="modal-content">
......@@ -262,10 +280,8 @@
<script src="js_libs/diff.js"></script>
<!-- Prettify JS -->
<script src="../blockly/demos/prettify.js"></script>
<!-- Arduino Server Compiler Ajax JS -->
<script src="../ardublocklyserver/js/ArduServerCompiler.js"></script>
<!-- Ardublockly app -->
<link href="ardublockly.css" rel="stylesheet" media="screen,projection">
<script src="ardublocklyserver_ajax.js"></script>
<script src="ardublockly_design.js"></script>
<script src="ardublockly_blockly.js"></script>
<script src="ardublockly.js"></script>
......
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