Skip to content

GitLab

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

Added side panel with real time code generation to Arduino App: 

Added extra buttons with icon to load and save blocks and to access the settings. The functions for this buttons are not yet implemented.
parent 12b7dd96
Show whitespace changes
Inline Side-by-side
Showing with 351 additions and 71 deletions
apps/arduino/arduino.js
View file @ b7ffa86c
...@@ -3,18 +3,11 @@ ...@@ -3,18 +3,11 @@
* *
* Based on the "Code" app developed by: fraser@google.com (Neil Fraser) * Based on the "Code" app developed by: fraser@google.com (Neil Fraser)
* *
* @fileoverview JavaScript for Blockly's Arduino Code application. * @fileoverview JavaScript for ArduBlockly's Arduino Code application.
*/ */
'use strict'; 'use strict';
// Supported languages.
//BlocklyApps.LANGUAGES =
// ['en'];
//BlocklyApps.LANG = BlocklyApps.getLang();
//document.write('<script src="generated/' + BlocklyApps.LANG + '.js"></script>\n');
/** /**
* Create a namespace for the application. * Create a namespace for the application.
*/ */
...@@ -54,19 +47,20 @@ Arduino.tabClick = function(clickedName) { ...@@ -54,19 +47,20 @@ Arduino.tabClick = function(clickedName) {
} }
} }
// Deselect the button, and ensure side pannel is hidden
Arduino.peekCode(false);
// Deselect all tabs and hide all panes. // Deselect all tabs and hide all panes.
for (var i = 0; i < Arduino.TABS_.length; i++) { for (var i = 0; i < Arduino.TABS_.length; i++) {
var name = Arduino.TABS_[i]; var name = Arduino.TABS_[i];
document.getElementById('tab_' + name).className = 'taboff'; document.getElementById('tab_' + name).className = 'taboff';
document.getElementById('content_' + name).style.visibility = 'hidden'; document.getElementById('content_' + name).style.display = 'none';
} }
// Select the active tab. // Select the active tab and panel
Arduino.selected = clickedName; Arduino.selected = clickedName;
document.getElementById('tab_' + clickedName).className = 'tabon'; document.getElementById('tab_' + clickedName).className = 'tabon';
// Show the selected pane. document.getElementById('content_' + clickedName).style.display = 'block';
document.getElementById('content_' + clickedName).style.visibility =
'visible';
Arduino.renderContent(); Arduino.renderContent();
Blockly.fireUiEvent(window, 'resize'); Blockly.fireUiEvent(window, 'resize');
}; };
...@@ -98,9 +92,8 @@ Arduino.renderContent = function() { ...@@ -98,9 +92,8 @@ Arduino.renderContent = function() {
* Initialize Blockly. Called on page load. * Initialize Blockly. Called on page load.
*/ */
Arduino.init = function() { Arduino.init = function() {
//BlocklyApps.init(); Arduino.adjustViewport();
var rtl = BlocklyApps.isRtl();
var container = document.getElementById('content_area'); var container = document.getElementById('content_area');
var onresize = function(e) { var onresize = function(e) {
var bBox = BlocklyApps.getBBox_(container); var bBox = BlocklyApps.getBBox_(container);
...@@ -116,9 +109,9 @@ Arduino.init = function() { ...@@ -116,9 +109,9 @@ Arduino.init = function() {
el.style.width = (2 * bBox.width - el.offsetWidth) + 'px'; el.style.width = (2 * bBox.width - el.offsetWidth) + 'px';
} }
// Make the 'Blocks' tab line up with the toolbox. // Make the 'Blocks' tab line up with the toolbox.
if (Blockly.Toolbox.width) { if (Blockly.mainWorkspace.toolbox_.width) {
document.getElementById('tab_blocks').style.minWidth = document.getElementById('tab_blocks').style.minWidth =
(Blockly.Toolbox.width - 38) + 'px'; (Blockly.mainWorkspace.toolbox_.width - 38) + 'px';
// Account for the 19 pixel margin and on each side. // Account for the 19 pixel margin and on each side.
} }
}; };
...@@ -127,7 +120,7 @@ Arduino.init = function() { ...@@ -127,7 +120,7 @@ Arduino.init = function() {
var toolbox = document.getElementById('toolbox'); var toolbox = document.getElementById('toolbox');
Blockly.inject(document.getElementById('content_blocks'), Blockly.inject(document.getElementById('content_blocks'),
{path: '../../', {path: '../../',
rtl: rtl, rtl: false,
toolbox: toolbox}); toolbox: toolbox});
//BlocklyApps.loadBlocks(''); //BlocklyApps.loadBlocks('');
...@@ -140,26 +133,33 @@ Arduino.init = function() { ...@@ -140,26 +133,33 @@ Arduino.init = function() {
Arduino.tabClick(Arduino.selected); Arduino.tabClick(Arduino.selected);
Blockly.fireUiEvent(window, 'resize'); Blockly.fireUiEvent(window, 'resize');
BlocklyApps.bindClick('trashButton', // Binding buttons
function() {Arduino.discard(); Arduino.renderContent();}); BlocklyApps.bindClick('trashButton', Arduino.discard);
BlocklyApps.bindClick('runButton', Arduino.loadToArduino); BlocklyApps.bindClick('runButton', Arduino.loadToArduino);
BlocklyApps.bindClick('peekCode',Arduino.peekCode);
// Binding tabs
for (var i = 0; i < Arduino.TABS_.length; i++) { for (var i = 0; i < Arduino.TABS_.length; i++) {
var name = Arduino.TABS_[i]; var name = Arduino.TABS_[i];
BlocklyApps.bindClick('tab_' + name, BlocklyApps.bindClick('tab_' + name,
function(name_) {return function() {Arduino.tabClick(name_);};}(name)); function(name_) {return function() {Arduino.tabClick(name_);};}(name));
} }
// Lazy-load the syntax-highlighting.
window.setTimeout(BlocklyApps.importPrettify, 1);
}; };
window.addEventListener('load', Arduino.init);
/**
window.addEventListener('load', Arduino.init); * Fixes viewport for small screens.
*/
Arduino.adjustViewport = function() {
var viewport = document.querySelector('meta[name="viewport"]');
if (viewport && screen.availWidth < 725) {
viewport.setAttribute('content',
'width=725, initial-scale=.35, user-scalable=no');
}
}
/** /**
* Execute the user's code. * Load and execute the user's code to the Arduino.
*/ */
Arduino.loadToArduino = function() { Arduino.loadToArduino = function() {
// TODO // TODO
...@@ -175,4 +175,84 @@ Arduino.discard = function() { ...@@ -175,4 +175,84 @@ Arduino.discard = function() {
Blockly.mainWorkspace.clear(); Blockly.mainWorkspace.clear();
window.location.hash = ''; window.location.hash = '';
} }
Arduino.renderContent();
}; };
/**
* Loads/unloads the side div with a code peek
*/
Arduino.peek_code = false;
Arduino.peekCode = function(visible) {
var peek_code_button = document.getElementById('peekCode');
var code_peek_content = document.getElementById('arduino_code_peek');
if(visible == true) {
Arduino.peek_code = false;
} else if(visible == false) {
Arduino.peek_code = true;
}
if(Arduino.peek_code == false) {
Arduino.peek_code = true;
peek_code_button.className = "notext secondary";
Arduino.sideContent(true);
code_peek_content.style.display = 'inline-block';
// Regenerate arduino code and ensure every click does as well
Arduino.renderArduinoPeak();
Blockly.addChangeListener(Arduino.renderArduinoPeak);
} else {
Arduino.peek_code = false;
peek_code_button.className = "notext";
code_peek_content.style.display = 'none';
Arduino.sideContent(false);
// Remove action listeners. TODO: track listener so that first time does not
// crashes
//Blockly.removeChangeListener(renderArduinoPeak);
}
};
/**
* Configure the Block panel to display content on the right
* @param {string} content_name Name of the content div
* @param {boolean} visible Indicated if the content should be shown or hidden
*/
Arduino.sideContent = function(visible) {
var side_content = document.getElementById('side_content');
var block_content = document.getElementById('content_blocks');
// Deselect all tabs and hide all panes.
for (var i = 0; i < Arduino.TABS_.length; i++) {
var name = Arduino.TABS_[i];
document.getElementById('tab_' + name).className = 'taboff';
document.getElementById('content_' + name).style.display = 'none';
}
if(visible == true) {
// Rearrange panels for blocks and side contents
block_content.style.display = 'inline-block';
document.getElementById('tab_blocks').className = 'tabon';
block_content.className = 'content content_blocks_side';
side_content.style.display = 'inline-block';
} else {
// Restore to original state
side_content.style.display = 'none';
block_content.className = 'content content_blocks';
// Select the active tab and panel
document.getElementById('tab_' + Arduino.selected).className = 'tabon';
document.getElementById('content_' + Arduino.selected).style.display = 'block';
}
Blockly.fireUiEvent(window, 'resize');
Arduino.renderContent();
}
/**
* Updates the arduino code in the pre area based on the blocks
*/
Arduino.renderArduinoPeak = function() {
var code_peak_pre = document.getElementById('arduino_pre');
code_peak_pre.textContent = Blockly.Arduino.workspaceToCode();
if (typeof prettyPrintOne == 'function') {
code_peak_pre.innerHTML = prettyPrintOne(code_peak_pre.innerHTML, 'cpp');
}
}
apps/arduino/icons.png
View replaced file @ 12b7dd96 View file @ b7ffa86c
apps/arduino/icons.png

546 Bytes | W: | H:

apps/arduino/icons.png

1.64 KB | W: | H:

apps/arduino/icons.png
apps/arduino/icons.png
apps/arduino/icons.png
apps/arduino/icons.png
  • 2-up
  • Swipe
  • Onion skin
apps/arduino/index.html
View file @ b7ffa86c
...@@ -4,15 +4,16 @@ ...@@ -4,15 +4,16 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="google" value="notranslate"> <meta name="google" value="notranslate">
<title>Blockly : Arduino Code</title> <title>Blockly : Arduino Code</title>
<link rel="stylesheet" type="text/css" href="../common.css"> <!--link rel="stylesheet" type="text/css" href="../common.css"-->
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="style.css">
<!--script type="text/javascript" src="../_soy/soyutils.js"></script--> <link rel="stylesheet" href="../../demos/prettify.css">
<script src="../../demos/prettify.js"></script>
<script src="../common.js"></script> <script src="../common.js"></script>
<script src="arduino.js"></script> <script src="arduino.js"></script>
<!--script src="../../blockly_compressed.js"></script--> <!--script src="../../blockly_compressed.js"></script-->
<script src="../../blockly_uncompressed.js"></script> <script src="../../blockly_uncompressed.js"></script>
<!--script src="../../blocks_compressed.js"></script--> <!--script src="../../blocks_compressed.js"></script-->
<script src="../../blocks/logic.js"></script> <script src="../../blocks/logic.js"></script>
<script src="../../blocks/loops.js"></script> <script src="../../blocks/loops.js"></script>
<script src="../../blocks/math.js"></script> <script src="../../blocks/math.js"></script>
...@@ -64,19 +65,6 @@ ...@@ -64,19 +65,6 @@
</div> </div>
<table width="100%" height="100%"> <table width="100%" height="100%">
<tr>
<td>
<h1>
<span id="title">
<a href="https://developers.google.com/blockly/">Blockly</a> &gt;
<span id="title">Arduino</span>
</span>
</h1>
</td>
<td class="farSide">
<select id="languageMenu"></select>
</td>
</tr>
<tr> <tr>
<td colspan=2> <td colspan=2>
<table width="100%"> <table width="100%">
...@@ -87,14 +75,25 @@ ...@@ -87,14 +75,25 @@
<td class="tabmin">&nbsp;</td> <td class="tabmin">&nbsp;</td>
<td id="tab_xml" class="taboff">XML</td> <td id="tab_xml" class="taboff">XML</td>
<td class="tabmax"> <td class="tabmax">
<button id="trashButton" class="notext" title="Discard all blocks"> <button id="peekCode" class="notext" title="Toggle the code view on the side">
<img src='../../media/1x1.gif' class="trash icon21"> <div class="button_text">
<span>Code Peek</span>
</div>
</button> </button>
<button id="linkButton" class="notext" title="Save and link to blocks"> <button id="" class="notext" title="Load blocks">
<img src='../../media/1x1.gif' class="link icon21"> <img src='../../media/1x1.gif' class="icon21 load ">
</button>
<button id="" class="notext" title="Save blocks">
<img src='../../media/1x1.gif' class="icon21 save">
</button>
<button id="" class="notext" title="Open the Settings">
<img src='../../media/1x1.gif' class="icon21 settings">
</button>
<button id="trashButton" class="notext" title="Discard all blocks">
<img src='../../media/1x1.gif' class="icon21 trash">
</button> </button>
<button id="runButton" class="notext primary" title="Run the program defined by the blocks in the workspace"> <button id="runButton" class="notext primary" title="Run the program defined by the blocks in the workspace">
<img src='../../media/1x1.gif' class="run icon21"> <img src='../../media/1x1.gif' class="icon21 run">
</button> </button>
</td> </td>
</tr> </tr>
...@@ -102,7 +101,19 @@ ...@@ -102,7 +101,19 @@
</td> </td>
</tr> </tr>
<tr> <tr>
<td height="99%" colspan=2 id="content_area"> <td colspan="2" height="99%" style="position:relative;">
<div id="content_area" class="content_area">
<div id="content_blocks" class="content content_blocks"></div>
<div id="side_content" class="side_content">
<div id="arduino_code_peek">
<pre id="arduino_pre">
<!--code id="arduino_code" class="language-arduino">code goes here</code-->
</pre>
</div>
</div>
<pre id="content_arduino" class="content content_arduino"></pre>
<textarea id="content_xml" class="content content_xml" wrap="off"></textarea>
</div>
</td> </td>
</tr> </tr>
</table> </table>
...@@ -305,10 +316,6 @@ ...@@ -305,10 +316,6 @@
</category> </category>
</xml> </xml>
<div id="content_blocks" class="content"></div>
<pre id="content_arduino" class="content"></pre>
<textarea id="content_xml" class="content" wrap="off"></textarea>
<div id="dialogShadow" class="dialogAnimate"></div> <div id="dialogShadow" class="dialogAnimate"></div>
<div id="dialogBorder"></div> <div id="dialogBorder"></div>
<div id="dialog"></div> <div id="dialog"></div>
......
apps/arduino/style.css
View file @ b7ffa86c
/* General HTML */
html, body { html, body {
height: 100%; height: 100%;
} }
body { body {
background-color: #fff;
font-family: sans-serif;
margin: 0; margin: 0;
border: 0;
overflow: hidden; overflow: hidden;
padding: 20px;
/* Firefox */
height: -moz-calc(100% - 40px);
/* WebKit */
height: -webkit-calc(100% - 40px);
/* Opera */
height: -o-calc(100% - 40px);
/* Standard */
height: calc(100% - 40px);
} }
h1 { h1 {
font-weight: normal;
font-size: 140%;
margin-left: 5px; margin-left: 5px;
margin-right: 5px; margin-right: 5px;
} }
a:hover {
color: #f00;
}
html[dir="RTL"] .farSide {
text-align: left;
}
/* Tabs */ /* Tabs */
#tabRow>td { #tabRow>td {
...@@ -18,10 +39,12 @@ td.tabon { ...@@ -18,10 +39,12 @@ td.tabon {
border-bottom-color: #ddd !important; border-bottom-color: #ddd !important;
background-color: #ddd; background-color: #ddd;
padding: 5px 19px; padding: 5px 19px;
vertical-align: middle;
} }
td.taboff { td.taboff {
cursor: pointer; cursor: pointer;
padding: 5px 19px; padding: 5px 19px;
vertical-align: middle;
} }
td.taboff:hover { td.taboff:hover {
background-color: #eee; background-color: #eee;
...@@ -44,6 +67,7 @@ html[dir=rtl] td.tabmax { ...@@ -44,6 +67,7 @@ html[dir=rtl] td.tabmax {
text-align: left; text-align: left;
} }
/* Table */
table { table {
border-collapse: collapse; border-collapse: collapse;
margin: 0; margin: 0;
...@@ -54,39 +78,135 @@ td { ...@@ -54,39 +78,135 @@ td {
padding: 0; padding: 0;
vertical-align: top; vertical-align: top;
} }
/* Content blocks */
.content { .content {
visibility: hidden; width: 100%;
height: 100%;
margin: 0; margin: 0;
padding: 1ex; padding: 0;
position: absolute; border: 0px solid #ccc;
direction: ltr; direction: ltr;
display: none;
}
.content_area {
/* Firefox */
width: -moz-calc(100%)!important;
/* WebKit */
width: -webkit-calc(100%)!important;
/* Opera */
width: -o-calc(100%)!important;
/* Standard */
width: calc(100%)!important;
height: 100%!important;
padding: 0;
margin: 0;
border-width: 0px 1px 1px 1px;
border-style: solid;
border-color: #ccc;
background-color: #eee;
position: absolute;
overflow: hidden;
}
.content_blocks{
width: 100%!important;
height: 100%!important;
overflow: hidden;
}
.content_blocks_side {
/* Firefox */
width: -moz-calc(100% - 350px)!important;
/* WebKit */
width: -webkit-calc(100% - 350px)!important;
/* Opera */
width: -o-calc(100% - 350px)!important;
/* Standard */
width: calc(100% - 350px)!important;
overflow: hidden;
float: left;
} }
pre.content { pre.content {
overflow: scroll; overflow: scroll;
} }
#content_blocks {
padding: 0;
}
.blocklySvg { .blocklySvg {
border-top: none !important; border-top: none !important;
} }
#content_xml { .side_content {
width: 350px;
height: 100%;
right: 0px;
bottom: 0px;
float: right;
padding: 0;
margin: 0;
border: 0;
background-color: #eee;
overflow: scroll!important;
display: none;
}
.arduino_code_peek {
height: 100%;
}
pre.arduino_code_peek ,
code.arduino_code_peek {
border: 0!important;
overflow: visible;
white-space: pre!important;
}
.content_xml {
resize: none; resize: none;
outline: none; outline: none;
border: none; border: none;
font-family: monospace; font-family: monospace;
overflow: scroll; overflow: scroll;
} }
#languageMenu {
vertical-align: top;
margin-top: 15px;
margin-right: 15px;
}
/* Buttons */ /* Buttons */
button { button {
padding: 1px 10px; padding: 5px;
margin: 1px 5px; margin: 5px 5px 5px 0px;
border-radius: 30px;
border: 3px solid rgb(221, 221, 221);
font-size: large;
background-color: #eee;
color: #000;
outline: none;
}
button.primary {
border: 3px solid #dd4b39;
background-color: #dd4b39;
color: #fff;
}
button.secondary {
border: 3px solid #4d90fe;
background-color: #4d90fe;
color: #fff;
}
button.primary>img,
button.secondary>img {
opacity: 1;
}
button>img {
opacity: 0.6;
vertical-align: text-bottom;
}
button:hover>img {
opacity: 1;
}
button:active {
border: 3px solid #888 !important;
}
button:hover {
box-shadow: 0px 2px 5px #888;
}
button.disabled:hover>img {
opacity: 0.6;
}
button.disabled {
display: none;
}
button.notext {
font-size: 10%;
} }
/* Sprited icons. */ /* Sprited icons. */
...@@ -95,12 +215,85 @@ button { ...@@ -95,12 +215,85 @@ button {
width: 21px; width: 21px;
background-image: url(icons.png); background-image: url(icons.png);
} }
.trash { img.trash {
background-position: 0px 0px; background-position: 0px 0px;
} }
.link { img.link {
background-position: -21px 0px; background-position: -21px 0px;
} }
.run { img.run {
background-position: -42px 0px; background-position: -42px 0px;
} }
img.settings {
background-position: -63px 0px;
}
img.save {
background-position: -84px 0px;
}
img.load{
background-position: -105px 0px;
}
div.button_text {
height: 21px;
max-height: 21px;
font-size: small;
overflow: hidden;
text-align: center;
}
div.button_text>span {
line-height: 21px;
}
/* Dialogs */
#dialog {
visibility: hidden;
background-color: #fff;
color: #000;
border: 1px solid #ccc;
position: absolute;
border-radius: 8px;
box-shadow: 5px 5px 5px #888;
padding: 10px;
}
#dialogBorder {
visibility: hidden;
position: absolute;
background-color: #fff;
color: #000;
border: 1px solid #000;
border-radius: 6px;
box-shadow: 5px 5px 5px #888;
}
#dialogShadow {
visibility: hidden;
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #000;
opacity: 0.3
}
.dialogAnimate {
transition-property: width height left top opacity;
transition-duration: 0.2s;
transition-timing-function: linear;
}
.dialogHiddenContent {
visibility: hidden;
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
#dialogHeader {
height: 25px;
margin: -10px -10px 15px;
border-top-left-radius: 8px;
border-top-right-radius: 8px;
background-color: #ddd;
cursor: move;
}
#dialog button {
min-width: 4em;
}
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