Skip to content

GitLab

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

Update namespaces and fix lint flags.

parent 60d62ade
Show whitespace changes
Inline Side-by-side
Showing with 542 additions and 591 deletions
ardublockly/ardublockly.css
View file @ 4a52d8a9
......@@ -620,7 +620,7 @@ ul.side-nav li.side-menu-end {
/* Entire Blockly area, Toolbox dranw on top */
.blocklySvg {
border-width: none !important;
border-width: 0 !important;
-webkit-border-radius: 4px !important;
-moz-border-radius: 4px !important;
border-radius: 4px !important;
......@@ -821,5 +821,4 @@ ul.side-nav li ul li ul li {
/* Circle clipper (loading animation) thickness */
.circle-clipper .circle {
border-width: 4px !important;
}
}
ardublockly/ardublockly.js
View file @ 4a52d8a9
......@@ -6,123 +6,119 @@
*/
'use strict';
/**
* Create a namespace for the application.
*/
var ArduinoMaterial = ArduinoMaterial || {};
/** Create a namespace for the application. */
var Ardublockly = Ardublockly || {};
/**
* Initialize function for Ardublockly on page load.
*/
/** Initialize function for Ardublockly on page load. */
window.addEventListener('load', function load(event) {
window.removeEventListener('load', load, false);
// Inject Blockly into content_blocks
ArduinoMaterial.injectBlockly(
Ardublockly.injectBlockly(
document.getElementById('content_blocks'), 'ardublockly_toolbox.xml');
ArduinoMaterial.designJsInit();
Ardublockly.designJsInit();
ArduinoMaterial.bindDesignEventListeners();
ArduinoMaterial.bindActionFunctions_();
ArduinoMaterial.bindBlocklyEventListeners();
Ardublockly.bindDesignEventListeners();
Ardublockly.bindActionFunctions();
Ardublockly.bindBlocklyEventListeners();
// Check if not running locally (including developer's local network IP)
if (document.location.hostname != 'localhost' &&
document.location.hostname != '192.168.0.7') {
ArduinoMaterial.openNotConnectedModal();
Ardublockly.openNotConnectedModal();
}
// Check if running on the Desktop app
if (navigator.userAgent.toLowerCase().indexOf('ardublockly') > -1) {
// It is, so remove container padding and side menu button
ArduinoMaterial.containerFullWidth();
ArduinoMaterial.hideSideMenuButton();
Ardublockly.containerFullWidth();
Ardublockly.hideSideMenuButton();
}
});
/**
* Binds functions to each of the buttons, nav links, and related.
* @private
* Materialize uses jQuery.
*/
ArduinoMaterial.bindActionFunctions_ = function() {
Ardublockly.bindActionFunctions = function() {
// Navigation buttons
ArduinoMaterial.bindClick_('button_load', ArduinoMaterial.loadUserXmlFile);
ArduinoMaterial.bindClick_('button_save', ArduinoMaterial.saveXmlFileAs);
ArduinoMaterial.bindClick_('button_delete', ArduinoMaterial.discardAllBlocks);
Ardublockly.bindClick_('button_load', Ardublockly.loadUserXmlFile);
Ardublockly.bindClick_('button_save', Ardublockly.saveXmlFileAs);
Ardublockly.bindClick_('button_delete', Ardublockly.discardAllBlocks);
// Side menu buttons, they also close the side menu
ArduinoMaterial.bindClick_('menu_load', function() {
ArduinoMaterial.loadUserXmlFile();
Ardublockly.bindClick_('menu_load', function() {
Ardublockly.loadUserXmlFile();
$('.button-collapse').sideNav('hide');
});
ArduinoMaterial.bindClick_('menu_save', function() {
ArduinoMaterial.saveXmlFileAs();
Ardublockly.bindClick_('menu_save', function() {
Ardublockly.saveXmlFileAs();
$('.button-collapse').sideNav('hide');
});
ArduinoMaterial.bindClick_('menu_delete', function() {
ArduinoMaterial.discardAllBlocks();
Ardublockly.bindClick_('menu_delete', function() {
Ardublockly.discardAllBlocks();
$('.button-collapse').sideNav('hide');
});
ArduinoMaterial.bindClick_('menu_settings', function() {
ArduinoMaterial.openSettings();
Ardublockly.bindClick_('menu_settings', function() {
Ardublockly.openSettings();
$('.button-collapse').sideNav('hide');
});
ArduinoMaterial.bindClick_('menu_example_1', function() {
ArduinoMaterial.loadServerXmlFile('examples/blink.xml')});
ArduinoMaterial.bindClick_('menu_example_2', function() {
ArduinoMaterial.loadServerXmlFile('examples/serial_print_ascii_.xml')});
ArduinoMaterial.bindClick_('menu_example_3', function() {
ArduinoMaterial.loadServerXmlFile('examples/servo_knob.xml')});
ArduinoMaterial.bindClick_('menu_example_4', function() {
ArduinoMaterial.loadServerXmlFile('examples/stepper_knob.xml')});
Ardublockly.bindClick_('menu_example_1', function() {
Ardublockly.loadServerXmlFile('examples/blink.xml');
});
Ardublockly.bindClick_('menu_example_2', function() {
Ardublockly.loadServerXmlFile('examples/serial_print_ascii_.xml');
});
Ardublockly.bindClick_('menu_example_3', function() {
Ardublockly.loadServerXmlFile('examples/servo_knob.xml');
});
Ardublockly.bindClick_('menu_example_4', function() {
Ardublockly.loadServerXmlFile('examples/stepper_knob.xml');
});
// Floating buttons
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_(
'button_toggle_toolbox', ArduinoMaterial.toogleToolbox);
Ardublockly.bindClick_('button_run', Ardublockly.sendCode);
Ardublockly.bindClick_('button_verify', Ardublockly.functionNotImplemented);
Ardublockly.bindClick_('button_open_ide', Ardublockly.functionNotImplemented);
Ardublockly.bindClick_('button_load_xml', Ardublockly.XmlTextareaToBlocks);
Ardublockly.bindClick_('button_toggle_toolbox', Ardublockly.toogleToolbox);
// Settings modal input field listeners
ArduinoMaterial.bindClick_('settings_compiler_location', function() {
ArduServerCompiler.requestNewCompilerLocation(
ArduinoMaterial.setCompilerLocationHtml);
Ardublockly.bindClick_('settings_compiler_location', function() {
ArdublocklyServer.requestNewCompilerLocation(
Ardublockly.setCompilerLocationHtml);
});
ArduinoMaterial.bindClick_('settings_sketch_location', function() {
ArduServerCompiler.requestNewSketchLocation(
ArduinoMaterial.setSketchLocationHtml);
Ardublockly.bindClick_('settings_sketch_location', function() {
ArdublocklyServer.requestNewSketchLocation(
Ardublockly.setSketchLocationHtml);
});
};
/**
* Loads an XML file from the server and adds the blocks into the Blockly
* workspace.
* @param {!string} xmlFile Server location of the XML file to load.
*/
ArduinoMaterial.loadServerXmlFile = function(xmlFile) {
Ardublockly.loadServerXmlFile = function(xmlFile) {
// The loadXmlBlockFile loads the file asynchronously and needs a callback
var loadXmlCallback = function(sucess) {
if (sucess) {
ArduinoMaterial.renderContent();
Ardublockly.renderContent();
} else {
ArduinoMaterial.materialAlert(
Ardublockly.materialAlert(
'Invalid XML',
'The XML file was not successfully parsed into blocks.\
Please review the XML code and try again.',
'The XML file was not successfully parsed into blocks.' +
'Please review the XML code and try again.',
false);
}
};
var callbackConnectionError = function() {
ArduinoMaterial.openNotConnectedModal();
Ardublockly.openNotConnectedModal();
};
ArduinoMaterial.loadXmlBlockFile(
Ardublockly.loadXmlBlockFile(
xmlFile, loadXmlCallback, callbackConnectionError);
};
......@@ -130,20 +126,20 @@ ArduinoMaterial.loadServerXmlFile = function(xmlFile) {
* Loads an XML file from the users file system and adds the blocks into the
* Blockly workspace.
*/
ArduinoMaterial.loadUserXmlFile = function() {
Ardublockly.loadUserXmlFile = function() {
// Create event listener function
var parseInputXMLfile = function(e) {
var files = e.target.files;
var reader = new FileReader();
reader.onload = function() {
var success = ArduinoMaterial.replaceBlocksfromXml(reader.result);
var success = Ardublockly.replaceBlocksfromXml(reader.result);
if (success) {
ArduinoMaterial.renderContent();
Ardublockly.renderContent();
} else {
ArduinoMaterial.materialAlert(
Ardublockly.materialAlert(
'Invalid XML',
'The XML file was not successfully parsed into blocks.\
Please review the XML code and try again.',
'The XML file was not successfully parsed into blocks.' +
'Please review the XML code and try again.',
false);
}
};
......@@ -172,10 +168,10 @@ ArduinoMaterial.loadUserXmlFile = function() {
* Creates an XML file containing the blocks from the Blockly workspace and
* prompts the users to save it into their local file system.
*/
ArduinoMaterial.saveXmlFileAs = function() {
Ardublockly.saveXmlFileAs = function() {
var xmlName = document.getElementById('sketch_name').value;
var blob = new Blob(
[ArduinoMaterial.generateXml()],
[Ardublockly.generateXml()],
{type: 'text/plain;charset=utf-8'});
saveAs(blob, xmlName + '.xml');
};
......@@ -185,10 +181,10 @@ ArduinoMaterial.saveXmlFileAs = function() {
* the Blockly workspace and prompts the users to save it into their local file
* system.
*/
ArduinoMaterial.saveSketchFileAs = function() {
Ardublockly.saveSketchFileAs = function() {
var sketchName = document.getElementById('sketch_name').value;
var blob = new Blob(
[ArduinoMaterial.generateArduino()],
[Ardublockly.generateArduino()],
{type: 'text/plain;charset=utf-8'});
saveAs(blob, sketchName + '.ino');
};
......@@ -196,7 +192,7 @@ ArduinoMaterial.saveSketchFileAs = function() {
/**
* Opens the modal that displays the "not connected to server" message.
*/
ArduinoMaterial.openNotConnectedModal = function() {
Ardublockly.openNotConnectedModal = function() {
$('#not_running_dialog').openModal({
dismissible: true,
opacity: .5,
......@@ -208,8 +204,8 @@ ArduinoMaterial.openNotConnectedModal = function() {
/**
* Prepares and opens the settings modal.
*/
ArduinoMaterial.openSettings = function() {
ArduinoMaterial.populateSettings();
Ardublockly.openSettings = function() {
Ardublockly.populateSettings();
$('#settings_dialog').openModal({
dismissible: true,
opacity: .5,
......@@ -219,18 +215,16 @@ ArduinoMaterial.openSettings = function() {
};
/**
* Retrieves the Settings from ArduServerCompiler and populates the form data
* Retrieves the Settings from ArdublocklyServer and populates the form data
* for the Settings modal dialog.
*/
ArduinoMaterial.populateSettings = function() {
ArduServerCompiler.requestCompilerLocation(
ArduinoMaterial.setCompilerLocationHtml);
ArduServerCompiler.requestSketchLocation(
ArduinoMaterial.setSketchLocationHtml);
ArduServerCompiler.requestArduinoBoards(
ArduinoMaterial.setArduinoBoardsHtml);
ArduServerCompiler.requestSerialPorts(ArduinoMaterial.setSerialPortsHtml);
ArduServerCompiler.requestIdeOptions(ArduinoMaterial.setIdeHtml);
Ardublockly.populateSettings = function() {
ArdublocklyServer.requestCompilerLocation(
Ardublockly.setCompilerLocationHtml);
ArdublocklyServer.requestSketchLocation(Ardublockly.setSketchLocationHtml);
ArdublocklyServer.requestArduinoBoards(Ardublockly.setArduinoBoardsHtml);
ArdublocklyServer.requestSerialPorts(Ardublockly.setSerialPortsHtml);
ArdublocklyServer.requestIdeOptions(Ardublockly.setIdeHtml);
};
/**
......@@ -238,15 +232,15 @@ ArduinoMaterial.populateSettings = function() {
* @param {element} newEl New HTML element to replace the one in the current
* DOM. Should contain a complete input text element.
*/
ArduinoMaterial.setCompilerLocationHtml = function(newEl) {
Ardublockly.setCompilerLocationHtml = function(newEl) {
if (newEl != null) {
var compLocIp = document.getElementById('settings_compiler_location')
var compLocIp = document.getElementById('settings_compiler_location');
if (compLocIp != null) {
compLocIp.value = newEl.value;
}
} else {
// If the element is Null, then Ardublockly server is not running
ArduinoMaterial.openNotConnectedModal();
Ardublockly.openNotConnectedModal();
}
};
......@@ -255,7 +249,7 @@ ArduinoMaterial.setCompilerLocationHtml = function(newEl) {
* @param {element} newEl New HTML element to replace the one in the current
* DOM. Should contain a complete input text element.
*/
ArduinoMaterial.setSketchLocationHtml = function(newEl) {
Ardublockly.setSketchLocationHtml = function(newEl) {
if (newEl != null) {
var sketchLocIp = document.getElementById('settings_sketch_location');
if (sketchLocIp != null) {
......@@ -263,7 +257,7 @@ ArduinoMaterial.setSketchLocationHtml = function(newEl) {
}
} else {
// If the element is Null, then Ardublockly server is not running
ArduinoMaterial.openNotConnectedModal();
Ardublockly.openNotConnectedModal();
}
};
......@@ -273,7 +267,7 @@ ArduinoMaterial.setSketchLocationHtml = function(newEl) {
* @param {element} newEl New HTML element to replace the one in the current
* DOM. Should contain a complete select element.
*/
ArduinoMaterial.setArduinoBoardsHtml = function(newEl) {
Ardublockly.setArduinoBoardsHtml = function(newEl) {
if (newEl != null) {
var boardDropdown = document.getElementById('board');
if (boardDropdown != null) {
......@@ -281,26 +275,26 @@ ArduinoMaterial.setArduinoBoardsHtml = function(newEl) {
$('select').material_select('destroy');
newEl.name = 'settings_board';
newEl.id = 'board';
newEl.onchange = ArduinoMaterial.setBoard;
newEl.onchange = Ardublockly.setBoard;
boardDropdown.parentNode.replaceChild(newEl, boardDropdown);
// Refresh the materialize select menus
$('select').material_select();
}
} else {
// If the element is Null, then Ardublockly server is not running
ArduinoMaterial.openNotConnectedModal();
Ardublockly.openNotConnectedModal();
}
};
/**
* Sets the Arduino Board type with the selected user input from the drop down.
*/
ArduinoMaterial.setBoard = function() {
Ardublockly.setBoard = function() {
var el = document.getElementById('board');
var boardValue = el.options[el.selectedIndex].value;
//TODO: check how ArduServerCompiler deals with invalid data and sanitise
ArduServerCompiler.setArduinoBoard(
boardValue, ArduinoMaterial.setArduinoBoardsHtml);
//TODO: check how ArdublocklyServer deals with invalid data and sanitise
ArdublocklyServer.setArduinoBoard(
boardValue, Ardublockly.setArduinoBoardsHtml);
};
/**
......@@ -309,7 +303,7 @@ ArduinoMaterial.setBoard = function() {
* @param {element} newEl New HTML element to replace the one in the current
* DOM. Should contain a complete select element.
*/
ArduinoMaterial.setSerialPortsHtml = function(newEl) {
Ardublockly.setSerialPortsHtml = function(newEl) {
if (newEl != null) {
var serialDropdown = document.getElementById('serial_port');
if (serialDropdown != null) {
......@@ -317,26 +311,26 @@ ArduinoMaterial.setSerialPortsHtml = function(newEl) {
$('select').material_select('destroy');
newEl.name = 'settings_serial';
newEl.id = 'serial_port';
newEl.onchange = ArduinoMaterial.setSerial;
newEl.onchange = Ardublockly.setSerial;
serialDropdown.parentNode.replaceChild(newEl, serialDropdown);
// Refresh the materialize select menus
$('select').material_select();
}
} else {
// If the element is Null, then Ardublockly server is not running
ArduinoMaterial.openNotConnectedModal();
Ardublockly.openNotConnectedModal();
}
};
/**
* Sets the Serial Port with the selected user input from the drop down.
*/
ArduinoMaterial.setSerial = function() {
Ardublockly.setSerial = function() {
var el = document.getElementById('serial_port');
var serialValue = el.options[el.selectedIndex].value;
//TODO: check how ArduServerCompiler deals with invalid data and sanitise
ArduServerCompiler.setSerialPort(
serialValue, ArduinoMaterial.setSerialPortsHtml);
//TODO: check how ArdublocklyServer deals with invalid data and sanitise
ArdublocklyServer.setSerialPort(
serialValue, Ardublockly.setSerialPortsHtml);
};
/**
......@@ -345,7 +339,7 @@ ArduinoMaterial.setSerial = function() {
* @param {element} newEl New HTML element to replace the one in the current
* DOM. Should contain a complete select element.
*/
ArduinoMaterial.setIdeHtml = function(newEl) {
Ardublockly.setIdeHtml = function(newEl) {
if (newEl != null) {
var ideDropdown = document.getElementById('ide_settings');
if (ideDropdown != null) {
......@@ -353,37 +347,37 @@ ArduinoMaterial.setIdeHtml = function(newEl) {
$('select').material_select('destroy');
newEl.name = 'settings_ide';
newEl.id = 'ide_settings';
newEl.onchange = ArduinoMaterial.setIdeSettings;
newEl.onchange = Ardublockly.setIdeSettings;
ideDropdown.parentNode.replaceChild(newEl, ideDropdown);
// Refresh the materialize select menus
$('select').material_select();
}
} else {
// If the element is Null, then Ardublockly server is not running
ArduinoMaterial.openNotConnectedModal();
Ardublockly.openNotConnectedModal();
}
};
/**
* Sets the IDE settings data with the selected user input from the drop down.
*/
ArduinoMaterial.setIdeSettings = function() {
Ardublockly.setIdeSettings = function() {
var el = document.getElementById('ide_settings');
var ideValue = el.options[el.selectedIndex].value;
//TODO: check how ArduServerCompiler deals with invalid data and sanitise here
ArduServerCompiler.setIdeOptions(ideValue, ArduinoMaterial.setIdeHtml);
//TODO: check how ArdublocklyServer deals with invalid data and sanitise here
ArdublocklyServer.setIdeOptions(ideValue, Ardublockly.setIdeHtml);
};
/**
* Send the Arduino Code to the ArduServerCompiler to process.
* Send the Arduino Code to the ArdublocklyServer to process.
* Shows a loader around the button, blocking it (unblocked upon received
* message from server).
*/
ArduinoMaterial.sendCode = function() {
Ardublockly.sendCode = function() {
Materialize.toast('Sending sketch to Arduino IDE...', 4000);
ArduinoMaterial.runButtonSpinner(true);
ArduServerCompiler.sendSketchToServer(
ArduinoMaterial.generateArduino(), ArduinoMaterial.sendCodeReturn);
Ardublockly.runButtonSpinner(true);
ArdublocklyServer.sendSketchToServer(
Ardublockly.generateArduino(), Ardublockly.sendCodeReturn);
};
/**
......@@ -391,29 +385,29 @@ ArduinoMaterial.sendCode = function() {
* @param {element} dataBack New HTML elements to include in the modal to
* display the data back from the compiler.
*/
ArduinoMaterial.sendCodeReturn = function(dataBack) {
ArduinoMaterial.runButtonSpinner(false);
Ardublockly.sendCodeReturn = function(dataBack) {
Ardublockly.runButtonSpinner(false);
if (dataBack != null) {
ArduinoMaterial.arduinoIdeOutput(dataBack);
Ardublockly.arduinoIdeOutput(dataBack);
} else {
// If the element is Null, then Ardublockly server is not running
ArduinoMaterial.openNotConnectedModal();
Ardublockly.openNotConnectedModal();
}
};
/**
* Populate the currently selected panel with content generated from the blocks.
*/
ArduinoMaterial.XmlTextareaToBlocks = function() {
var success = ArduinoMaterial.replaceBlocksfromXml(
Ardublockly.XmlTextareaToBlocks = function() {
var success = Ardublockly.replaceBlocksfromXml(
document.getElementById('content_xml').value);
if (success) {
ArduinoMaterial.renderContent();
Ardublockly.renderContent();
} else {
ArduinoMaterial.materialAlert(
Ardublockly.materialAlert(
'Invalid XML',
'The XML inputted into the text area was not successfully parsed into \
blocks. Please review the XML code and try again.',
'The XML inputted into the text area was not successfully parsed into' +
'blocks. Please review the XML code and try again.',
false);
}
};
......@@ -423,28 +417,28 @@ ArduinoMaterial.XmlTextareaToBlocks = function() {
* @type {!String}
* @private
*/
ArduinoMaterial.PREVIOUS_ARDUINO_CODE_ =
Ardublockly.PREVIOUS_ARDUINO_CODE_ =
'void setup() {\n\n}\n\n\nvoid loop() {\n\n}';
/**
* Populate the Arduino Code and Blocks XML panels with content generated from
* the blocks.
*/
ArduinoMaterial.renderContent = function() {
Ardublockly.renderContent = function() {
// Only regenerate the code if a block is not being dragged
if (ArduinoMaterial.blocklyIsDragging()) {
if (Ardublockly.blocklyIsDragging()) {
return;
}
// Render Arduino Code with latest change highlight and syntax highlighting
var arduinoCode = ArduinoMaterial.generateArduino();
if (arduinoCode !== ArduinoMaterial.PREVIOUS_ARDUINO_CODE_) {
var arduinoCode = Ardublockly.generateArduino();
if (arduinoCode !== Ardublockly.PREVIOUS_ARDUINO_CODE_) {
var arduinoContent = document.getElementById('content_arduino');
if (typeof prettyPrintOne == 'function') {
var diff = JsDiff.diffWords(ArduinoMaterial.PREVIOUS_ARDUINO_CODE_,
var diff = JsDiff.diffWords(Ardublockly.PREVIOUS_ARDUINO_CODE_,
arduinoCode);
var resultStringArray = [];
for (var i=0; i < diff.length; i++) {
for (var i = 0; i < diff.length; i++) {
if (diff[i].added) {
resultStringArray.push(
'<span class="code_highlight_new">' + diff[i].value + '</span>');
......@@ -457,12 +451,12 @@ ArduinoMaterial.renderContent = function() {
} else {
arduinoContent.textContent = arduinoCode;
}
ArduinoMaterial.PREVIOUS_ARDUINO_CODE_ = arduinoCode;
Ardublockly.PREVIOUS_ARDUINO_CODE_ = arduinoCode;
}
// Generate plain XML into element
var xmlContent = document.getElementById('content_xml');
xmlContent.value = ArduinoMaterial.generateXml();
xmlContent.value = Ardublockly.generateXml();
};
/**
......@@ -470,28 +464,28 @@ ArduinoMaterial.renderContent = function() {
* @type {!boolean}
* @private
*/
ArduinoMaterial.TOOLBAR_SHOWING_ = true;
Ardublockly.TOOLBAR_SHOWING_ = true;
/**
* Toggles the blockly toolbox and the Ardublockly toolbox button On and Off.
* Uses namespace member variable TOOLBAR_SHOWING_ to toggle state.
*/
ArduinoMaterial.toogleToolbox = function() {
if (ArduinoMaterial.TOOLBAR_SHOWING_) {
ArduinoMaterial.blocklyCloseToolbox();
ArduinoMaterial.displayToolbox(false);
Ardublockly.toogleToolbox = function() {
if (Ardublockly.TOOLBAR_SHOWING_) {
Ardublockly.blocklyCloseToolbox();
Ardublockly.displayToolbox(false);
} else {
ArduinoMaterial.displayToolbox(true);
Ardublockly.displayToolbox(true);
}
ArduinoMaterial.TOOLBAR_SHOWING_ = !ArduinoMaterial.TOOLBAR_SHOWING_;
Ardublockly.TOOLBAR_SHOWING_ = !Ardublockly.TOOLBAR_SHOWING_;
};
/**
* Returns a boolean indicating if the toolbox is currently visible.
* @return {boolean} Indicates if the toolbox is currently visible.
*/
ArduinoMaterial.isToolboxVisible = function() {
return ArduinoMaterial.TOOLBAR_SHOWING_;
Ardublockly.isToolboxVisible = function() {
return Ardublockly.TOOLBAR_SHOWING_;
};
/**
......@@ -501,7 +495,7 @@ ArduinoMaterial.isToolboxVisible = function() {
* @param {!function} func Event handler to bind.
* @private
*/
ArduinoMaterial.bindClick_ = function(el, func) {
Ardublockly.bindClick_ = function(el, func) {
if (typeof el == 'string') {
el = document.getElementById(el);
}
......@@ -518,6 +512,6 @@ ArduinoMaterial.bindClick_ = function(el, func) {
/**
* Populate the currently selected panel with content generated from the blocks.
*/
ArduinoMaterial.functionNotImplemented = function() {
Ardublockly.functionNotImplemented = function() {
Materialize.toast('Function not yet implemented', 4000);
};
ardublockly/ardublockly_blockly.js
View file @ 4a52d8a9
......@@ -2,26 +2,25 @@
* @license Licensed under the Apache License, Version 2.0 (the "License"):
* http://www.apache.org/licenses/LICENSE-2.0
*
* @fileoverview JavaScript for Arduino app with material design.
* @fileoverview Ardublockly JavaScript for the Blockly resources and bindings.
*/
'use strict';
/**
* Create a namespace for the application.
*/
var ArduinoMaterial = ArduinoMaterial || {};
/** Create a namespace for the application. */
var Ardublockly = Ardublockly || {};
/**
* Blockly's main workspace.
* Blockly main workspace.
* @type Blockly.WorkspaceSvg
*/
ArduinoMaterial.workspace = null;
Ardublockly.workspace = null;
/**
* Public variable that indicates if Blockly has been injected.
* @type {!boolean}
* @private
*/
ArduinoMaterial.BLOCKLY_INJECTED = false;
Ardublockly.BLOCKLY_INJECTED_ = false;
/**
* Injects Blockly into a given HTML element. Reads the toolbox from an XMl
......@@ -29,21 +28,21 @@ ArduinoMaterial.BLOCKLY_INJECTED = false;
* @param {!Element} blocklyEl Element to inject Blockly into.
* @param {!string} toolboxPath String containing the toolbox XML file path.
*/
ArduinoMaterial.injectBlockly = function(blocklyEl, toolboxPath) {
Ardublockly.injectBlockly = function(blocklyEl, toolboxPath) {
// Create a an XML HTTP request
var request = ArduinoMaterial.ajaxRequest();
var request = Ardublockly.ajaxRequest();
// If file run locally Internet explorer fails here
try {
request.open('GET', toolboxPath, true);
} catch(e) {
} catch (e) {
$('#not_running_dialog').openModal();
}
// Once file is open, inject blockly into element with the toolbox string
request.onreadystatechange = function() {
if ( (request.readyState == 4) && (request.status == 200) ) {
ArduinoMaterial.workspace = Blockly.inject(blocklyEl, {
if ((request.readyState == 4) && (request.status == 200)) {
Ardublockly.workspace = Blockly.inject(blocklyEl, {
collapse: true,
comments: true,
disable: true,
......@@ -52,29 +51,32 @@ ArduinoMaterial.injectBlockly = function(blocklyEl, toolboxPath) {
scrollbars: true,
toolbox: request.responseText,
trashcan: true });
ArduinoMaterial.BLOCKLY_INJECTED = true;
Ardublockly.BLOCKLY_INJECTED_ = true;
}
};
// If file run locally Chrome will fail here
try {
request.send(null);
} catch(e) {
} catch (e) {
$('#not_running_dialog').openModal();
}
};
/**
* Binds the event listeners relevant to Blockly.
*/
ArduinoMaterial.bindBlocklyEventListeners = function() {
/** @return {!boolean} Returns the state of Blockly injection. */
Ardublockly.isBlocklyInjected = function() {
return Ardublockly.BLOCKLY_INJECTED_;
};
/** Binds the event listeners relevant to Blockly. */
Ardublockly.bindBlocklyEventListeners = function() {
// As the toolbox inject is asynchronous we need to wait until done
if (ArduinoMaterial.BLOCKLY_INJECTED == false) {
setTimeout(ArduinoMaterial.bindBlocklyEventListeners, 50);
if (Ardublockly.BLOCKLY_INJECTED_ == false) {
setTimeout(Ardublockly.bindBlocklyEventListeners, 50);
} else {
// All event listener should be bind in this else statement
// Renders the code and XML for every Blockly workspace event
ArduinoMaterial.workspace.addChangeListener(ArduinoMaterial.renderContent);
Ardublockly.workspace.addChangeListener(Ardublockly.renderContent);
}
};
......@@ -87,30 +89,30 @@ ArduinoMaterial.bindBlocklyEventListeners = function() {
* @param {!function} callbackConectonError Function to be called if there is a
* connection error to the XML server.
*/
ArduinoMaterial.loadXmlBlockFile = function(xmlFile, callbackFileLoaded,
Ardublockly.loadXmlBlockFile = function(xmlFile, callbackFileLoaded,
callbackConectonError) {
// Create a an XML HTTP request
var request = ArduinoMaterial.ajaxRequest();
var request = Ardublockly.ajaxRequest();
// If file run locally Internet explorer fails here
try {
request.open('GET', xmlFile, true);
} catch(e) {
} catch (e) {
callbackConectonError();
}
// Once file is open, parse the XML into the workspace
request.onreadystatechange = function() {
if ( (request.readyState == 4) && (request.status == 200) ) {
var success = ArduinoMaterial.replaceBlocksfromXml(request.responseText);
if ((request.readyState == 4) && (request.status == 200)) {
var success = Ardublockly.replaceBlocksfromXml(request.responseText);
callbackFileLoaded(success);
}
}
};
// If file run locally Chrome will fail here
try {
request.send(null);
} catch(e) {
} catch (e) {
callbackConectonError();
}
};
......@@ -119,16 +121,16 @@ ArduinoMaterial.loadXmlBlockFile = function(xmlFile, callbackFileLoaded,
* Generates the Arduino code from the Blockly workspace.
* @return {!string} Arduino code string.
*/
ArduinoMaterial.generateArduino = function() {
return Blockly.Arduino.workspaceToCode(ArduinoMaterial.workspace);
Ardublockly.generateArduino = function() {
return Blockly.Arduino.workspaceToCode(Ardublockly.workspace);
};
/**
* Generates the XML DOM and returns it as a string.
* @return {!string} XML code string.
*/
ArduinoMaterial.generateXml = function() {
var xmlDom = Blockly.Xml.workspaceToDom(ArduinoMaterial.workspace);
Ardublockly.generateXml = function() {
var xmlDom = Blockly.Xml.workspaceToDom(Ardublockly.workspace);
var xmlText = Blockly.Xml.domToPrettyText(xmlDom);
return xmlText;
};
......@@ -139,17 +141,17 @@ ArduinoMaterial.generateXml = function() {
* @param {!string} blocksXml String of XML code for the blocks.
* @return {!boolean} Indicates if the XML into blocks parse was successful.
*/
ArduinoMaterial.replaceBlocksfromXml = function(blocksXml) {
Ardublockly.replaceBlocksfromXml = function(blocksXml) {
var xmlDom = null;
try {
xmlDom = Blockly.Xml.textToDom(blocksXml);
} catch (e) {
return false;
}
ArduinoMaterial.workspace.clear();
Ardublockly.workspace.clear();
var sucess = false;
if (xmlDom) {
sucess = ArduinoMaterial.loadBlocksfromXmlDom(xmlDom);
sucess = Ardublockly.loadBlocksfromXmlDom(xmlDom);
}
return sucess;
};
......@@ -160,114 +162,82 @@ ArduinoMaterial.replaceBlocksfromXml = function(blocksXml) {
* @param {!string} blocksXmlDom String of XML DOM code for the blocks.
* @return {!boolean} Indicates if the XML into blocks parse was successful.
*/
ArduinoMaterial.loadBlocksfromXmlDom = function(blocksXmlDom) {
Ardublockly.loadBlocksfromXmlDom = function(blocksXmlDom) {
try {
Blockly.Xml.domToWorkspace(ArduinoMaterial.workspace, blocksXmlDom);
Blockly.Xml.domToWorkspace(Ardublockly.workspace, blocksXmlDom);
} catch (e) {
return false;
}
return true;
};
/**
* Displays or hides the toolbox from the Blockly workspace with a slide
* animation.
* @param {!boolean} show Indicates to show or hide the toolbox.
*/
ArduinoMaterial.showToolbox = function(show) {
if (show) {
//var contentBlocks = document.getElementById('content_blocks');
//$('.blocklyToolboxDiv')[0].style.height = contentBlocks.style.height;
//$('.blocklyToolboxDiv')[0].style.overflowY = 'auto';
$('.blocklyToolboxDiv').slideDown(300);
//resizeWorkspaceAndCallback();
} else {
//$('.blocklyToolboxDiv')[0].style.overflowY = 'hidden';
//$('.blocklyToolboxDiv')[0].style.height = "38px";
$('.blocklyToolboxDiv').slideUp(300);
//resizeWorkspaceAndCallback();
}
};
/**
* Discard all blocks from the workspace.
*/
ArduinoMaterial.discardAllBlocks = function() {
var blockCount = ArduinoMaterial.workspace.getAllBlocks().length;
/** Discard all blocks from the workspace. */
Ardublockly.discardAllBlocks = function() {
var blockCount = Ardublockly.workspace.getAllBlocks().length;
if (blockCount == 1) {
ArduinoMaterial.workspace.clear();
ArduinoMaterial.renderContent();
Ardublockly.workspace.clear();
Ardublockly.renderContent();
} else if (blockCount > 1) {
ArduinoMaterial.materialAlert(
Ardublockly.materialAlert(
'Delete blocks?',
'There are ' + blockCount + ' blocks on the workspace. Are you \
sure you want to delete them?',
'There are ' + blockCount + ' blocks on the workspace. Are you sure ' +
'you want to delete them?',
true,
function() {
ArduinoMaterial.workspace.clear();
ArduinoMaterial.renderContent();
Ardublockly.workspace.clear();
Ardublockly.renderContent();
});
}
};
/**
* Closes the toolbox block container sub-menu.
*/
ArduinoMaterial.blocklyCloseToolbox = function() {
ArduinoMaterial.workspace.toolbox_.flyout_.hide();
/** Closes the toolbox block container sub-menu. */
Ardublockly.blocklyCloseToolbox = function() {
Ardublockly.workspace.toolbox_.flyout_.hide();
};
/**
* Checks if Blockly is currently dragging a block.
*/
ArduinoMaterial.blocklyIsDragging = function() {
/** @return {!integer} The width of the blockly workspace toolbox. */
Ardublockly.blocklyToolboxWidth = function() {
return Ardublockly.workspace.toolbox_.width;
};
/** @return {!boolean} Indicates if a block is currently being dragged. */
Ardublockly.blocklyIsDragging = function() {
if (Blockly.dragMode_ != 0) {
return true;
}
return false;
};
/**
* Wraps the blockly 'cut' functionality.
*/
ArduinoMaterial.blocklyCut = function() {
/** Wraps the blockly 'cut' functionality. */
Ardublockly.blocklyCut = function() {
Blockly.copy_(Blockly.selected);
Blockly.selected.dispose(true, true);
};
/**
* Wraps the blockly 'copy' functionality.
*/
ArduinoMaterial.blocklyCopy = function() {
/** Wraps the blockly 'copy' functionality. */
Ardublockly.blocklyCopy = function() {
Blockly.hideChaff();
Blockly.copy_(Blockly.selected);
};
/**
* Wraps the blockly 'paste' functionality.
*/
ArduinoMaterial.blocklyPaste = function() {
/** Wraps the blockly 'paste' functionality. */
Ardublockly.blocklyPaste = function() {
if (Blockly.clipboardXml_) {
Blockly.hideChaff();
Blockly.clipboardSource_.paste(Blockly.clipboardXml_);
}
};
/**
* Wraps the blockly 'paste' functionality.
*/
ArduinoMaterial.blocklyDelete = function() {
/** Wraps the blockly 'paste' functionality. */
Ardublockly.blocklyDelete = function() {
if (Blockly.selected && Blockly.selected.isDeletable()) {
Blockly.hideChaff();
Blockly.selected.dispose(true, true);
}
};
/**
* Creates an AJAX request.
* @return An XML HTTP Request.
*/
ArduinoMaterial.ajaxRequest = function() {
/** @return {XMLHttpRequest} An XML HTTP Request multi-browser compatible. */
Ardublockly.ajaxRequest = function() {
var request;
try {
// Firefox, Chrome, IE7+, Opera, Safari
......
ardublockly/ardublockly_design.js
View file @ 4a52d8a9
......@@ -6,26 +6,23 @@
*/
'use strict';
/**
* Create a namespace for the application.
*/
var ArduinoMaterial = ArduinoMaterial || {};
/** Create a namespace for the application. */
var Ardublockly = Ardublockly || {};
/**
* Initialises all the design related JavaScript.
*/
ArduinoMaterial.designJsInit = function() {
ArduinoMaterial.materializeJsInit();
ArduinoMaterial.resizeToggleToolboxBotton();
ArduinoMaterial.sketchNameSizeEffect();
/** Initialises all the design related JavaScript. */
Ardublockly.designJsInit = function() {
Ardublockly.materializeJsInit();
Ardublockly.resizeToggleToolboxBotton();
Ardublockly.sketchNameSizeEffect();
};
/**
* Initialises all required components from materialize framework.
* The be executed on document ready.
* Materialize uses jQuery.
*/
ArduinoMaterial.materializeJsInit = function() {
Ardublockly.materializeJsInit = function() {
// Navigation bar
$('.button-collapse').sideNav({
menuWidth: 240,
......@@ -52,28 +49,29 @@ ArduinoMaterial.materializeJsInit = function() {
/**
* Binds the event listeners relevant to the page design.
* Uses jQuery.
*/
ArduinoMaterial.bindDesignEventListeners = function() {
Ardublockly.bindDesignEventListeners = function() {
// Resize blockly workspace on window resize
window.addEventListener(
'resize', ArduinoMaterial.resizeBlocklyWorkspace, false);
'resize', Ardublockly.resizeBlocklyWorkspace, false);
// Display/hide the XML load button when the XML collapsible header is clicked
document.getElementById('xml_collapsible_header').addEventListener(
'click', ArduinoMaterial.buttonLoadXmlCodeDisplay);
'click', Ardublockly.buttonLoadXmlCodeDisplay);
// Toggle the content height on click to the IDE output collapsible header
document.getElementById('ide_output_collapsible_header').addEventListener(
'click', function() {
ArduinoMaterial.contentHeightToggle();
Ardublockly.contentHeightToggle();
});
// Display/hide the additional IDE buttons when mouse over/out of play button
$("#button_run").mouseenter(function () {
ArduinoMaterial.showExtraIdeButtons(true);
$('#button_run').mouseenter(function() {
Ardublockly.showExtraIdeButtons(true);
});
$("#ide_buttons_wrapper").mouseleave(function () {
ArduinoMaterial.showExtraIdeButtons(false);
$('#ide_buttons_wrapper').mouseleave(function() {
Ardublockly.showExtraIdeButtons(false);
});
};
......@@ -81,7 +79,7 @@ ArduinoMaterial.bindDesignEventListeners = function() {
* Shows or hides the spinner around the play button.
* @param {!boolean} active True turns ON the spinner, false OFF.
*/
ArduinoMaterial.runButtonSpinner = function(active) {
Ardublockly.runButtonSpinner = function(active) {
var spinner = document.getElementById('button_run_spinner');
var buttonEl = document.getElementById('button_run');
var buttonClass = buttonEl.className;
......@@ -97,8 +95,9 @@ ArduinoMaterial.runButtonSpinner = function(active) {
/**
* Displays or hides the 'load textarea xml' button based on the state of the
* collapsible 'xml_collapsible_body'.
* Uses jQuery.
*/
ArduinoMaterial.buttonLoadXmlCodeDisplay = function() {
Ardublockly.buttonLoadXmlCodeDisplay = function() {
var xmlCollapsibleBody = document.getElementById('xml_collapsible_body');
// Waiting 400 ms to check status due to the animation delay (300 ms)
setTimeout(function() {
......@@ -115,27 +114,27 @@ ArduinoMaterial.buttonLoadXmlCodeDisplay = function() {
* 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) {
Ardublockly.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);
clearTimeout(Ardublockly.outHoldtimeoutHandle);
clearTimeout(Ardublockly.hidetimeoutHandle);
verifyButton.style.visibility = 'visible';
verifyButton.style.opacity = '1';
ArduinoMaterial.showtimeoutHandle = setTimeout(function() {
Ardublockly.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() {
Ardublockly.outHoldtimeoutHandle = setTimeout(function() {
// Prevent show time-out to affect the hiding of the buttons
clearTimeout(ArduinoMaterial.showtimeoutHandle);
clearTimeout(Ardublockly.showtimeoutHandle);
openIdeButton.style.visibility = 'hidden';
openIdeButton.style.opacity = '0';
ArduinoMaterial.hidetimeoutHandle = setTimeout(function() {
Ardublockly.hidetimeoutHandle = setTimeout(function() {
verifyButton.style.visibility = 'hidden';
verifyButton.style.opacity = '0';
}, 50);
......@@ -148,9 +147,10 @@ ArduinoMaterial.showExtraIdeButtons = function(show) {
* button to reflect the new state.
* When the toolbox is visible it should display the "visibility-off" icon with
* no background, and the opposite when toolbox is hidden.
* Uses jQuery.
* @param {!boolean} show Indicates if the toolbox should be set visible.
*/
ArduinoMaterial.displayToolbox = function(show) {
Ardublockly.displayToolbox = function(show) {
var toolbox = $('.blocklyToolboxDiv');
var button = document.getElementById('button_toggle_toolbox');
var buttonIcon = document.getElementById('button_toggle_toolbox_icon');
......@@ -199,30 +199,29 @@ ArduinoMaterial.displayToolbox = function(show) {
* toolbox.
* The toolbox width does not change with workspace width, so safe to do once,
* but it needs to be done after blockly has been injected.
* Uses jQuery.
*/
ArduinoMaterial.resizeToggleToolboxBotton = function() {
Ardublockly.resizeToggleToolboxBotton = function() {
// As the toolbox inject is asynchronous we need to wait
if (ArduinoMaterial.BLOCKLY_INJECTED == false) {
setTimeout(ArduinoMaterial.resizeToggleToolboxBotton, 50);
if (Ardublockly.isBlocklyInjected() === false) {
setTimeout(Ardublockly.resizeToggleToolboxBotton, 50);
} else {
Blockly.fireUiEvent(window, 'resize');
var button = $('#button_toggle_toolbox');
// Sets the toolbox toggle button width to that of the toolbox
if ( ArduinoMaterial.isToolboxVisible() &&
ArduinoMaterial.workspace.toolbox_.width ) {
if (Ardublockly.isToolboxVisible() && Ardublockly.blocklyToolboxWidth()) {
// For some reason normal set style and getElementById didn't work
button.width(ArduinoMaterial.workspace.toolbox_.width);
button.width(Ardublockly.blocklyToolboxWidth());
button[0].style.display = '';
}
}
};
/**
* Resizes the container for Blockly.
*/
ArduinoMaterial.resizeBlocklyWorkspace = function() {
/** Resizes the container for Blockly. */
Ardublockly.resizeBlocklyWorkspace = function() {
var contentBlocks = document.getElementById('content_blocks');
var wrapperPanelSize =
ArduinoMaterial.getBBox_(document.getElementById('blocks_panel'));
Ardublockly.getBBox_(document.getElementById('blocks_panel'));
contentBlocks.style.top = wrapperPanelSize.y + 'px';
contentBlocks.style.left = wrapperPanelSize.x + 'px';
......@@ -239,6 +238,7 @@ ArduinoMaterial.resizeBlocklyWorkspace = function() {
/**
* Sets the text for a "Materialize Modal" (like an android Dialog) to have
* alert-like HTML messages.
* Uses jQuery.
* @param {!string} title HTML to include in title.
* @param {!element} body HTML to include in body.
* @param {boolean=} confirm Indicates if the user is shown and option to just
......@@ -246,7 +246,7 @@ ArduinoMaterial.resizeBlocklyWorkspace = function() {
* @param {string=|function=} callback If confirm option is selected this would
* be the function called when clicked 'OK'.
*/
ArduinoMaterial.materialAlert = function(title, body, confirm, callback) {
Ardublockly.materialAlert = function(title, body, confirm, callback) {
$('#gen_alert_title').text(title);
$('#gen_alert_body').text('');
$('#gen_alert_body').append(body);
......@@ -268,25 +268,24 @@ ArduinoMaterial.materialAlert = function(title, body, confirm, callback) {
* highlight to call for the user attention.
* @param {!element} bodyEl HTML to include into IDE output content area.
*/
ArduinoMaterial.arduinoIdeOutput = function(bodyEl) {
Ardublockly.arduinoIdeOutput = function(bodyEl) {
var ideOuputContent = document.getElementById('content_ide_output');
ideOuputContent.innerHTML = '';
ideOuputContent.appendChild(bodyEl);
ArduinoMaterial.highlightIdeOutputHeader();
Ardublockly.highlightIdeOutputHeader();
};
/**
* Hides the side menu button.
*/
ArduinoMaterial.hideSideMenuButton = function() {
/** Hides the side menu button. */
Ardublockly.hideSideMenuButton = function() {
var sideMenuButton = document.getElementById('button-collapse');
sideMenuButton.style.display = 'none';
};
/**
* Sets all the elements using the container class to have a width of 100%.
* Uses jQuery.
*/
ArduinoMaterial.containerFullWidth = function() {
Ardublockly.containerFullWidth = function() {
var containers = $('.container');
for (var i = 0; i < containers.length; i++) {
containers[i].style.width = '100%';
......@@ -296,8 +295,9 @@ ArduinoMaterial.containerFullWidth = function() {
/**
* Initialises the sketch name input text JavaScript to dynamically adjust its
* width to the width of its contents.
* Uses jQuery.
*/
ArduinoMaterial.sketchNameSizeEffect = function() {
Ardublockly.sketchNameSizeEffect = function() {
var resizeInput = function() {
$(this).attr('size', $(this).val().length);
};
......@@ -322,7 +322,7 @@ ArduinoMaterial.sketchNameSizeEffect = function() {
/**
* Creates a highlight animation to the Arduino IDE output header.
*/
ArduinoMaterial.highlightIdeOutputHeader = function() {
Ardublockly.highlightIdeOutputHeader = function() {
var header = document.getElementById('ide_output_collapsible_header');
var h = 'ide_output_header_highlight';
var n = 'ide_output_header_normal';
......@@ -344,16 +344,16 @@ ArduinoMaterial.highlightIdeOutputHeader = function() {
* 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.
* Uses jQuery.
*/
ArduinoMaterial.contentHeightToggle = function() {
Ardublockly.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 () {
var timerId = setInterval(function() {
Blockly.fireUiEvent(window, 'resize');
}, 15);
setTimeout(function() {
......@@ -364,20 +364,20 @@ ArduinoMaterial.contentHeightToggle = function() {
// 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";
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";
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', '');
arduino.className = arduino.className.replace('height_transition', '');
xml.className = xml.className.replace('height_transition', '');
}, 400);
};
......@@ -387,7 +387,7 @@ ArduinoMaterial.contentHeightToggle = function() {
* @return {!Object} Contains height, width, x, and y properties.
* @private
*/
ArduinoMaterial.getBBox_ = function(element) {
Ardublockly.getBBox_ = function(element) {
var height = element.offsetHeight;
var width = element.offsetWidth;
var x = 0;
......
ardublockly/ardublocklyserver_ajax.js
View file @ 4a52d8a9
......@@ -2,33 +2,30 @@
* @license Licensed under the Apache License, Version 2.0 (the "License"):
* http://www.apache.org/licenses/LICENSE-2.0
*
* @fileoverview Ajax calls to the ArduServerCompiler python server
* @fileoverview Ajax calls to the Ardublockly Server python program.
*/
'use strict';
/**
* Create a name space for the application.
*/
var ArduServerCompiler = {};
/** Create a name space for the application. */
var ArdublocklyServer = {};
/**
* Sends Form data to the ArduBlocklyServer using Ajax
* @param {!string} url Requestor URL
* @param {!string} params Form parameters in the "var=x&var2=y" format
* Sends Form data to the ArduBlocklyServer using Ajax.
* @param {!string} url Requestor URL.
* @param {!string} params Form parameters in the 'var=x&var2=y' format.
* @param {!function} callback Request callback function.
* @return False if an error occurred
*/
ArduServerCompiler.ajaxPostForm = function(url, params, callback) {
var request = ArduServerCompiler.createAjaxRequest();
request.open("POST", url, true);
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
ArdublocklyServer.ajaxPostForm = function(url, params, callback) {
var request = ArdublocklyServer.createAjaxRequest();
request.open('POST', url, true);
request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
// The data received is JSON, so it needs to be converted into the right
// format to be displayed in the page.
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200) {
var el = ArduServerCompiler.createElementFromJson(request.responseText);
var el = ArdublocklyServer.createElementFromJson(request.responseText);
callback(el);
} else if (request.status == 405) {
// return a null element which will be dealt with in the front end
......@@ -40,7 +37,7 @@ ArduServerCompiler.ajaxPostForm = function(url, params, callback) {
// Send the data
try {
request.send(params);
} catch(e) {
} catch (e) {
// The request will fail if opening the html directly on a browser, so
// let's just send the callback nullified and the front end will deal.
callback(null);
......@@ -48,23 +45,22 @@ ArduServerCompiler.ajaxPostForm = function(url, params, callback) {
};
/**
* Sends plain data to the ArduBlocklyServer using Ajax
* @param {!string} url Requester URL
* Sends plain data to the ArduBlocklyServer using Ajax.
* @param {!string} url Requester URL.
* @param {!string} data Plain text currently used to send Arduino code only.
* @param {!function} callback Request callback function.
* @return False if an error occurred
*/
ArduServerCompiler.ajaxPostPlain = function(url, data, callback) {
var request = ArduServerCompiler.createAjaxRequest();
request.open("POST", url, true);
request.setRequestHeader("Content-type","text/plain");
ArdublocklyServer.ajaxPostPlain = function(url, data, callback) {
var request = ArdublocklyServer.createAjaxRequest();
request.open('POST', url, true);
request.setRequestHeader('Content-type', 'text/plain');
// The data received is JSON, so it needs to be converted into the right
// format to be displayed in the page.
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200) {
var el = ArduServerCompiler.createElementFromJson(request.responseText);
var el = ArdublocklyServer.createElementFromJson(request.responseText);
callback(el);
} else if (request.status == 405) {
// return a null element which will be dealt with in the front end
......@@ -76,18 +72,15 @@ ArduServerCompiler.ajaxPostPlain = function(url, data, callback) {
// Send the data
try {
request.send(data);
} catch(e) {
} catch (e) {
// The request will fail if opening the html directly on a browser, so
// let's just send the callback nullified and the front end will deal.
callback(null);
}
};
/**
* Creates an AJAX request
* @return An XML HTTP Request
*/
ArduServerCompiler.createAjaxRequest = function() {
/** @return {XMLHttpRequest} An XML HTTP Request multi-browser compatible. */
ArdublocklyServer.createAjaxRequest = function() {
var request = false;
try {
// Firefox, Chrome, IE7+, Opera, Safari
......@@ -96,11 +89,11 @@ ArduServerCompiler.createAjaxRequest = function() {
catch (e) {
// IE6 and earlier
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
request = new ActiveXObject('Msxml2.XMLHTTP');
}
catch (e) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
request = new ActiveXObject('Microsoft.XMLHTTP');
}
catch (e) {
throw 'Your browser does not support AJAX. You will not be able to' +
......@@ -116,9 +109,9 @@ ArduServerCompiler.createAjaxRequest = function() {
* Creates an HTML element based on the JSON data received from the server.
* @param {!string} json_data A string containing the JSON data to be parsed.
* @return {!element} An HTML element, which type depends on the JSON 'element'
* key (currently only text input or drop down)
* key (currently only text input or drop down).
*/
ArduServerCompiler.createElementFromJson = function(json_data) {
ArdublocklyServer.createElementFromJson = function(json_data) {
var parsed_json = JSON.parse(json_data);
var element = null;
......@@ -131,8 +124,8 @@ ArduServerCompiler.createElementFromJson = function(json_data) {
// Drop down list of unknown length with a selected item
element = document.createElement('select');
element.name = parsed_json.response_type;
for (var i=0; i<parsed_json.options.length; i++) {
var option = document.createElement("option");
for (var i = 0; i < parsed_json.options.length; i++) {
var option = document.createElement('option');
option.value = parsed_json.options[i].value;
option.text = parsed_json.options[i].display_text;
// Check selected option and mark it
......@@ -155,14 +148,14 @@ ArduServerCompiler.createElementFromJson = function(json_data) {
el_out.className = 'arduino_dialog_out';
el_out.innerHTML = parsed_json.output.split('\n').join('<br />');
element = document.createElement("div");
element = document.createElement('div');
element.appendChild(el_title);
element.appendChild(el_out);
// Only ouput error message if it was not successful
if (parsed_json.success == false) {
var el_err = document.createElement('span');
el_err.className = 'arduino_dialog_out_error'
el_err.className = 'arduino_dialog_out_error';
el_err.innerHTML = parsed_json.error_output.split('\n').join('<br />');
element.appendChild(el_err);
}
......@@ -174,64 +167,64 @@ ArduServerCompiler.createElementFromJson = function(json_data) {
};
/**
* Gets the current Compiler location from the ArduServerCompiler settings.
* Gets the current Compiler location from the ArdublocklyServer settings.
* @param {!function} callback Callback function for the server request, must
* one argument to receive the new location within
* an HTML element of type input text.
*/
ArduServerCompiler.requestCompilerLocation = function(callback) {
ArduServerCompiler.ajaxPostForm(
"ArduServerCompilerSettings.html",
"compiler=get",
callback)
ArdublocklyServer.requestCompilerLocation = function(callback) {
ArdublocklyServer.ajaxPostForm(
'ArduServerCompilerSettings.html',
'compiler=get',
callback);
};
/**
* Request to the ArduServerCompiler to prompt the user for a new compiler
* Request to the Ardublockly Server to prompt the user for a new compiler
* location. Done by the Python server because a 'file browse' triggered by
* the browser with JS will obscure the user information for security reasons.
* @param {!function} callback Callback function for the server request, must
* one argument to receive the new location within
* an HTML element of type input text.
*/
ArduServerCompiler.requestNewCompilerLocation = function(callback) {
ArdublocklyServer.requestNewCompilerLocation = function(callback) {
//TODO: Remove the something=else, its there for testing purposes
ArduServerCompiler.ajaxPostForm(
"ArduServerCompilerSettings.html",
"compiler=set&something=else",
callback)
ArdublocklyServer.ajaxPostForm(
'ArduServerCompilerSettings.html',
'compiler=set&something=else',
callback);
};
/**
* Gets the current Sketch location from the ArduServerCompiler settings.
* Gets the current Sketch location from the Ardublockly Server settings.
* @param {!function} callback Callback function for the server request, must
* one argument to receive the new location within
* an HTML element of type input text.
*/
ArduServerCompiler.requestSketchLocation = function(callback) {
ArduServerCompiler.ajaxPostForm(
"ArduServerCompilerSettings.html",
"sketch=get",
callback)
ArdublocklyServer.requestSketchLocation = function(callback) {
ArdublocklyServer.ajaxPostForm(
'ArduServerCompilerSettings.html',
'sketch=get',
callback);
};
/**
* Request to the ArduServerCompiler to prompt the user for a new sketch
* Request to the Ardublockly Server to prompt the user for a new sketch
* location. Done by the Python server because a 'file browse' triggered by
* the browser with JS will obscure the user information for security reasons.
* @param {!function} callback Callback function for the server request, must
* have one argument to receive the new location
* within an HTML element of type input text.
*/
ArduServerCompiler.requestNewSketchLocation = function(callback) {
ArduServerCompiler.ajaxPostForm(
"ArduServerCompilerSettings.html",
"sketch=set",
callback)
ArdublocklyServer.requestNewSketchLocation = function(callback) {
ArdublocklyServer.ajaxPostForm(
'ArduServerCompilerSettings.html',
'sketch=set',
callback);
};
/**
* Request to the ArduServerCompiler to return JSON data containing all
* Request to the Ardublockly Server to return JSON data containing all
* available target Arduino Boards, and the selected one in the settings.
* The data is then processed into an HTML element and sent to the callback
* function as an argument.
......@@ -239,15 +232,15 @@ ArduServerCompiler.requestNewSketchLocation = function(callback) {
* have one argument to receive the new setting as
* an HTML select element.
*/
ArduServerCompiler.requestArduinoBoards = function(callback) {
ArduServerCompiler.ajaxPostForm(
"ArduServerCompilerSettings.html",
"board=get",
callback)
ArdublocklyServer.requestArduinoBoards = function(callback) {
ArdublocklyServer.ajaxPostForm(
'ArduServerCompilerSettings.html',
'board=get',
callback);
};
/**
* Sends the inputted Arduino Board type to the ArduServerCompiler Settings.
* Sends the inputted Arduino Board type to the Ardublockly Server Settings.
* The new settings menu for the Board type is then processed into an HTML
* element and sent to the callback function as an argument.
* @param {!string} new_board Indicates which board has been selected.
......@@ -255,15 +248,15 @@ ArduServerCompiler.requestArduinoBoards = function(callback) {
* have one argument to receive the new setting as
* an HTML select element.
*/
ArduServerCompiler.setArduinoBoard = function(new_board, callback) {
ArduServerCompiler.ajaxPostForm(
"ArduServerCompilerSettings.html",
"board=set&value=" + new_board,
callback)
ArdublocklyServer.setArduinoBoard = function(new_board, callback) {
ArdublocklyServer.ajaxPostForm(
'ArduServerCompilerSettings.html',
'board=set&value=' + new_board,
callback);
};
/**
* Request to the ArduServerCompiler to return JSON data containing all
* Request to the Ardublockly Server to return JSON data containing all
* available serial ports in the computer, and the selected one in the
* settings. The data is then processed into an HTML element and sent to the
* callback function as an argument.
......@@ -271,15 +264,15 @@ ArduServerCompiler.setArduinoBoard = function(new_board, callback) {
* have one argument to receive the new setting as
* an HTML select element.
*/
ArduServerCompiler.requestSerialPorts = function(callback) {
ArduServerCompiler.ajaxPostForm(
"ArduServerCompilerSettings.html",
"serial=get",
callback)
ArdublocklyServer.requestSerialPorts = function(callback) {
ArdublocklyServer.ajaxPostForm(
'ArduServerCompilerSettings.html',
'serial=get',
callback);
};
/**
* Sends the inputted Serial Port to the ArduServerCompiler Settings. The new
* Sends the inputted Serial Port to the Ardublockly Server Settings. The new
* settings menu for the Serial Port is then processed into an HTML element
* and sent to the callback function as an argument.
* @param {!string} new_port Indicates which port has been selected.
......@@ -287,30 +280,30 @@ ArduServerCompiler.requestSerialPorts = function(callback) {
* have one argument to receive the new setting as
* an HTML select element.
*/
ArduServerCompiler.setSerialPort = function(new_port, callback) {
ArduServerCompiler.ajaxPostForm(
"ArduServerCompilerSettings.html",
"serial=set&value=" + new_port,
callback)
ArdublocklyServer.setSerialPort = function(new_port, callback) {
ArdublocklyServer.ajaxPostForm(
'ArduServerCompilerSettings.html',
'serial=set&value=' + new_port,
callback);
};
/**
* Gets the current IDE setting from the ArduServerCompiler settings. The new
* Gets the current IDE setting from the Ardublockly Server settings. The new
* settings menu for the IDE options is then processed into an HTML element
* and sent to the callback function as an argument.
* @param {!function} callback Callback function for the server request, must
* have one argument to receive the new setting as
* an HTML select element.
*/
ArduServerCompiler.requestIdeOptions = function(callback) {
ArduServerCompiler.ajaxPostForm(
"ArduServerCompilerSettings.html",
"ide=get",
callback)
ArdublocklyServer.requestIdeOptions = function(callback) {
ArdublocklyServer.ajaxPostForm(
'ArduServerCompilerSettings.html',
'ide=get',
callback);
};
/**
* Sends the inputted IDE option to the ArduServerCompiler Settings. The new
* Sends the inputted IDE option to the Ardublockly Server Settings. The new
* settings menu for the IDE options is then processed into an HTML element
* and sent to the callback function as an argument.
* @param {!string} ide_option Indicates which option has been selected.
......@@ -318,22 +311,25 @@ ArduServerCompiler.requestIdeOptions = function(callback) {
* have one argument to receive the new setting as
* an HTML select element.
*/
ArduServerCompiler.setIdeOptions = function(ide_option, callback) {
ArduServerCompiler.ajaxPostForm(
"ArduServerCompilerSettings.html",
"ide=set&value=" + ide_option,
callback)
ArdublocklyServer.setIdeOptions = function(ide_option, callback) {
ArdublocklyServer.ajaxPostForm(
'ArduServerCompilerSettings.html',
'ide=set&value=' + ide_option,
callback);
};
/**
* Sends the Arduino code to the ArduServerCompiler to be processed as defined
* Sends the Arduino code to the ArdublocklyServer to be processed as defined
* by the settings.
* @param {!string} code Arduino code in a single string format
* @param {!string} code Arduino code in a single string format.
* @param {!function} callback Callback function for the server request, must
* have one argument to receive the new setting as
* an HTML select element.
*/
ArduServerCompiler.sendSketchToServer = function(code, callback) {
ArduServerCompiler.ajaxPostPlain(
"SendSketch.html",
ArdublocklyServer.sendSketchToServer = function(code, callback) {
ArdublocklyServer.ajaxPostPlain(
'SendSketch.html',
code,
callback);
};
ardublockly/classic/ardublockly_classic.js
View file @ 4a52d8a9
......@@ -8,59 +8,58 @@
*/
'use strict';
/**
* Create a namespace for the application.
*/
var ArduinoClassic = {};
/** Create a namespace for the application. */
var ArdublocklyClassic = {};
/**
* Blockly's main workspace.
* @type Blockly.WorkspaceSvg
*/
ArduinoClassic.workspace = null;
ArdublocklyClassic.workspace = null;
/**
* List of tab names.
* @private
*/
ArduinoClassic.TABS_ = ['blocks', 'arduino', 'xml'];
ArdublocklyClassic.TABS_ = ['blocks', 'arduino', 'xml'];
ArduinoClassic.selected = 'blocks';
/** Indicates the currently selected tab. */
ArdublocklyClassic.selected = 'blocks';
/**
* Switch the visible pane when a tab is clicked.
* @param {string} clickedName Name of tab clicked.
*/
ArduinoClassic.tabClick = function(clickedName) {
ArdublocklyClassic.tabClick = function(clickedName) {
// If the XML tab was open, save and render the content.
if (document.getElementById('tab_xml').className == 'tabon') {
var xmlTextarea = document.getElementById('content_xml');
var xmlText = xmlTextarea.value;
ArduinoClassic.replaceBlocksfromXml(xmlText);
ArdublocklyClassic.replaceBlocksfromXml(xmlText);
}
// Deselect the button, and ensure side panel is hidden
ArduinoClassic.peekCode(false);
ArdublocklyClassic.peekCode(false);
// Deselect all tabs and hide all panes.
for (var i = 0; i < ArduinoClassic.TABS_.length; i++) {
var name = ArduinoClassic.TABS_[i];
for (var i = 0; i < ArdublocklyClassic.TABS_.length; i++) {
var name = ArdublocklyClassic.TABS_[i];
document.getElementById('tab_' + name).className = 'taboff';
document.getElementById('content_' + name).style.display = 'none';
}
// Select the active tab and panel
ArduinoClassic.selected = clickedName;
ArdublocklyClassic.selected = clickedName;
document.getElementById('tab_' + clickedName).className = 'tabon';
document.getElementById('content_' + clickedName).style.display = 'block';
// This is a workaround, something about the html layout causes the blocks to
// compress when the block tab is shown after it has been hidden
if (clickedName === 'blocks' && ArduinoClassic.workspace) {
ArduinoClassic.workspace.setVisible(false);
ArduinoClassic.workspace.setVisible(true);
if (clickedName === 'blocks' && ArdublocklyClassic.workspace) {
ArdublocklyClassic.workspace.setVisible(false);
ArdublocklyClassic.workspace.setVisible(true);
}
ArduinoClassic.renderContent();
ArdublocklyClassic.renderContent();
Blockly.fireUiEvent(window, 'resize');
};
......@@ -68,17 +67,18 @@ ArduinoClassic.tabClick = function(clickedName) {
/**
* Populate the currently selected panel with content generated from the blocks.
*/
ArduinoClassic.renderContent = function() {
var content = document.getElementById('content_' + ArduinoClassic.selected);
ArdublocklyClassic.renderContent = function() {
var content = document.getElementById(
'content_' + ArdublocklyClassic.selected);
// Initialize the panel
if (content.id == 'content_xml') {
var xmlTextarea = document.getElementById('content_xml');
var xmlDom = Blockly.Xml.workspaceToDom(ArduinoClassic.workspace);
var xmlDom = Blockly.Xml.workspaceToDom(ArdublocklyClassic.workspace);
var xmlText = Blockly.Xml.domToPrettyText(xmlDom);
xmlTextarea.value = xmlText;
xmlTextarea.focus();
} else if (content.id == 'content_arduino') {
var code = Blockly.Arduino.workspaceToCode(ArduinoClassic.workspace);
var code = Blockly.Arduino.workspaceToCode(ArdublocklyClassic.workspace);
content.textContent = code;
if (typeof prettyPrintOne == 'function') {
code = content.innerHTML;
......@@ -88,21 +88,21 @@ ArduinoClassic.renderContent = function() {
}
};
/**
* Initialize Blockly. Called on page load.
*/
ArduinoClassic.init = function() {
ArduinoClassic.adjustViewport();
/** Initialize Blockly. Called on page load. */
ArdublocklyClassic.init = function() {
ArdublocklyClassic.adjustViewport();
// Inject Blockly asynchronously into content_blocks
ArduinoClassic.injectBlockly(
ArdublocklyClassic.injectBlockly(
document.getElementById('content_blocks'), '../ardublockly_toolbox.xml');
// Create function to resize blockly if page layout changes
var onresize = function(e) {
var bBox = ArduinoClassic.getBBox_(document.getElementById('content_wrapper'));
for (var i = 0; i < ArduinoClassic.TABS_.length; i++) {
var el = document.getElementById('content_' + ArduinoClassic.TABS_[i]);
var bBox = ArdublocklyClassic.getBBox_(
document.getElementById('content_wrapper'));
for (var i = 0; i < ArdublocklyClassic.TABS_.length; i++) {
var el = document.getElementById(
'content_' + ArdublocklyClassic.TABS_[i]);
el.style.top = bBox.y + 'px';
el.style.left = bBox.x + 'px';
// Height and width need to be set, read back, then set again to
......@@ -113,16 +113,16 @@ ArduinoClassic.init = function() {
el.style.width = (2 * bBox.width - el.offsetWidth) + 'px';
}
// Make the 'Blocks' tab line up with the toolbox.
if (ArduinoClassic.workspace.toolbox_.width) {
if (ArdublocklyClassic.workspace.toolbox_.width) {
document.getElementById('tab_blocks').style.minWidth =
(ArduinoClassic.workspace.toolbox_.width - 38) + 'px';
(ArdublocklyClassic.workspace.toolbox_.width - 38) + 'px';
// Account for the 19 pixel margin and on each side.
}
};
// As Blockly is injected in parallel the binding only happens when done
var bindBlocklyEventListener = function() {
if (ArduinoClassic.BLOCKLY_INJECTED == false) {
if (ArdublocklyClassic.BLOCKLY_INJECTED == false) {
setTimeout(bindBlocklyEventListener, 50);
} else {
window.addEventListener('resize', onresize, false);
......@@ -131,21 +131,25 @@ ArduinoClassic.init = function() {
};
bindBlocklyEventListener();
ArduinoClassic.tabClick(ArduinoClassic.selected);
ArdublocklyClassic.tabClick(ArdublocklyClassic.selected);
// Binding buttons
ArduinoClassic.bindClick('peekCode', ArduinoClassic.peekCode);
ArduinoClassic.bindClick('openButton', ArduinoClassic.loadUserXmlFile);
ArduinoClassic.bindClick('saveButton', ArduinoClassic.saveXmlFile);
ArduinoClassic.bindClick('trashButton', ArduinoClassic.discard);
ArduinoClassic.bindClick('settingsButton', ArduinoClassic.openSettings);
ArduinoClassic.bindClick('runButton', ArduinoClassic.loadToArduino);
ArdublocklyClassic.bindClick('peekCode', ArdublocklyClassic.peekCode);
ArdublocklyClassic.bindClick(
'openButton', ArdublocklyClassic.loadUserXmlFile);
ArdublocklyClassic.bindClick('saveButton', ArdublocklyClassic.saveXmlFile);
ArdublocklyClassic.bindClick('trashButton', ArdublocklyClassic.discard);
ArdublocklyClassic.bindClick(
'settingsButton', ArdublocklyClassic.openSettings);
ArdublocklyClassic.bindClick('runButton', ArdublocklyClassic.loadToArduino);
// Binding tabs
for (var i = 0; i < ArduinoClassic.TABS_.length; i++) {
var name = ArduinoClassic.TABS_[i];
ArduinoClassic.bindClick('tab_' + name,
function(name_) {return function() {ArduinoClassic.tabClick(name_);};}(name));
for (var i = 0; i < ArdublocklyClassic.TABS_.length; i++) {
var name = ArdublocklyClassic.TABS_[i];
ArdublocklyClassic.bindClick('tab_' + name,
function(name_) {
return function() {ArdublocklyClassic.tabClick(name_);};
}(name));
}
// Check if not running locally (including developer's local network IP)
......@@ -156,12 +160,10 @@ ArduinoClassic.init = function() {
' running locally on your computer.');
}
};
window.addEventListener('load', ArduinoClassic.init);
window.addEventListener('load', ArdublocklyClassic.init);
/**
* Fixes viewport for small screens.
*/
ArduinoClassic.adjustViewport = function() {
/** Fixes viewport for small screens. */
ArdublocklyClassic.adjustViewport = function() {
var viewport = document.querySelector('meta[name="viewport"]');
if (viewport && screen.availWidth < 725) {
viewport.setAttribute('content',
......@@ -169,10 +171,8 @@ ArduinoClassic.adjustViewport = function() {
}
};
/**
* Open a centered pop up with the server compiler settings.
*/
ArduinoClassic.openSettings = function() {
/** Open a centred pop up with the server compiler settings. */
ArdublocklyClassic.openSettings = function() {
var width = 500;
var height = 400;
var left = (screen.width / 2) - (width / 2);
......@@ -183,19 +183,20 @@ ArduinoClassic.openSettings = function() {
'left=' + left + ', width=' + width + ', height=' + height + '');
};
/**
* Send the Arduino Code to the ArduServerCompiler to process.
*/
ArduinoClassic.loadToArduino = function() {
ArduServerCompiler.sendSketchToServer(
Blockly.Arduino.workspaceToCode(ArduinoClassic.workspace),
ArduinoClassic.loadToArduinoReturn);
/** Send the Arduino Code to the ArdublocklyServer to process. */
ArdublocklyClassic.loadToArduino = function() {
ArdublocklyServer.sendSketchToServer(
Blockly.Arduino.workspaceToCode(ArdublocklyClassic.workspace),
ArdublocklyClassic.loadToArduinoReturn);
};
/**
* Send the Arduino Code to the ArduServerCompiler to process
* Displays the IDE output into a modal overlay.
* Ensures there is a change listener to call 'setSerialPort' function.
* @param {!element} data_back_el New HTML element to display output message
* into the modal.
*/
ArduinoClassic.loadToArduinoReturn = function(data_back_el) {
ArdublocklyClassic.loadToArduinoReturn = function(data_back_el) {
if (data_back_el != null) {
// edit modal with new content
var modal = document.getElementById('modal_content');
......@@ -210,54 +211,52 @@ ArduinoClassic.loadToArduinoReturn = function(data_back_el) {
}
};
/**
* Discard all blocks from the workspace.
*/
ArduinoClassic.discard = function() {
var count = ArduinoClassic.workspace.getAllBlocks().length;
/** Discard all blocks from the workspace. */
ArdublocklyClassic.discard = function() {
var count = ArdublocklyClassic.workspace.getAllBlocks().length;
var message = 'Delete all ' + count + ' blocks?';
if (count < 2 || window.confirm(message)) {
ArduinoClassic.workspace.clear();
ArdublocklyClassic.workspace.clear();
window.location.hash = '';
}
ArduinoClassic.renderContent();
ArdublocklyClassic.renderContent();
};
/**
* Store the state the code sidebar visibility
* @private
*/
ArduinoClassic.peek_code_ = false;
ArdublocklyClassic.peek_code_ = false;
/**
* Loads/unloads the side div with a code peek
* @param {boolean?} visible Optional argument, indicates the new visibility of
* the code preview.
*/
ArduinoClassic.peekCode = function(visible) {
ArdublocklyClassic.peekCode = function(visible) {
var peek_code_button = document.getElementById('peekCode');
var code_peek_content = document.getElementById('arduino_code_peek');
if (visible == true) {
ArduinoClassic.peek_code_ = false;
ArdublocklyClassic.peek_code_ = false;
} else if (visible == false) {
ArduinoClassic.peek_code_ = true;
ArdublocklyClassic.peek_code_ = true;
}
if (ArduinoClassic.peek_code_ == false) {
ArduinoClassic.peek_code_ = true;
if (ArdublocklyClassic.peek_code_ == false) {
ArdublocklyClassic.peek_code_ = true;
peek_code_button.className = 'button_text secondary';
ArduinoClassic.sideContent(true);
ArdublocklyClassic.sideContent(true);
code_peek_content.style.display = 'inline-block';
// Regenerate arduino code and ensure every click does as well
ArduinoClassic.renderArduinoPeekCode();
ArduinoClassic.workspace.addChangeListener(
ArduinoClassic.renderArduinoPeekCode);
ArdublocklyClassic.renderArduinoPeekCode();
ArdublocklyClassic.workspace.addChangeListener(
ArdublocklyClassic.renderArduinoPeekCode);
} else {
ArduinoClassic.peek_code_ = false;
ArdublocklyClassic.peek_code_ = false;
peek_code_button.className = 'button_text';
code_peek_content.style.display = 'none';
ArduinoClassic.sideContent(false);
ArdublocklyClassic.sideContent(false);
// Remove action listeners. TODO: track listener so that first time does not
// crashes
//Blockly.removeChangeListener(renderArduinoPeekCode);
......@@ -266,21 +265,20 @@ ArduinoClassic.peekCode = function(visible) {
/**
* 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
* @param {boolean} visible Indicated if the content should be shown or hidden.
*/
ArduinoClassic.sideContent = function(visible) {
ArdublocklyClassic.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 < ArduinoClassic.TABS_.length; i++) {
var name = ArduinoClassic.TABS_[i];
for (var i = 0; i < ArdublocklyClassic.TABS_.length; i++) {
var name = ArdublocklyClassic.TABS_[i];
document.getElementById('tab_' + name).className = 'taboff';
document.getElementById('content_' + name).style.display = 'none';
}
if(visible == true) {
if (visible === true) {
// Rearrange panels for blocks and side contents
block_content.style.display = 'inline-block';
document.getElementById('tab_blocks').className = 'tabon';
......@@ -291,21 +289,21 @@ ArduinoClassic.sideContent = function(visible) {
side_content.style.display = 'none';
block_content.className = 'content content_blocks';
// Select the active tab and panel
document.getElementById('tab_' + ArduinoClassic.selected).className = 'tabon';
document.getElementById('content_' + ArduinoClassic.selected).style.display = 'block';
document.getElementById(
'tab_' + ArdublocklyClassic.selected).className = 'tabon';
document.getElementById(
'content_' + ArdublocklyClassic.selected).style.display = 'block';
}
Blockly.fireUiEvent(window, 'resize');
ArduinoClassic.renderContent();
ArdublocklyClassic.renderContent();
};
/**
* Updates the arduino code in the pre area based on the blocks
*/
ArduinoClassic.renderArduinoPeekCode = function() {
/** Updates the Arduino code in the pre area based on the blocks. */
ArdublocklyClassic.renderArduinoPeekCode = function() {
var code_peak_pre = document.getElementById('arduino_pre');
code_peak_pre.textContent = Blockly.Arduino.workspaceToCode(
ArduinoClassic.workspace);
ArdublocklyClassic.workspace);
if (typeof prettyPrintOne == 'function') {
code_peak_pre.innerHTML = prettyPrintOne(code_peak_pre.innerHTML, 'cpp');
}
......@@ -315,14 +313,14 @@ ArduinoClassic.renderArduinoPeekCode = function() {
* Public variable that indicates if Blockly has been injected.
* @type {!boolean}
*/
ArduinoClassic.BLOCKLY_INJECTED = false;
ArdublocklyClassic.BLOCKLY_INJECTED = false;
/**
* Injects Blockly into a given text area. Reads the toolbox from an XMl file.
* @param {!Element} el Element to inject Blockly into.
* @param {!Element} blockly_el Element to inject Blockly into.
* @param {!string} toolbox_path String containing the toolbox XML file path.
*/
ArduinoClassic.injectBlockly = function(blockly_el, toolbox_path) {
ArdublocklyClassic.injectBlockly = function(blockly_el, toolbox_path) {
// Create a an XML HTTP request
var request;
try { // Firefox, Chrome, IE7+, Opera, Safari
......@@ -345,8 +343,8 @@ ArduinoClassic.injectBlockly = function(blockly_el, toolbox_path) {
// Once file is open, inject blockly into element with the toolbox string
request.onreadystatechange = function() {
if ( (request.readyState == 4) && (request.status == 200) ) {
ArduinoClassic.workspace = Blockly.inject(blockly_el, {
if ((request.readyState == 4) && (request.status == 200)) {
ArdublocklyClassic.workspace = Blockly.inject(blockly_el, {
collapse: true,
comments: true,
disable: true,
......@@ -355,9 +353,9 @@ ArduinoClassic.injectBlockly = function(blockly_el, toolbox_path) {
scrollbars: true,
toolbox: request.responseText,
trashcan: true });
ArduinoClassic.BLOCKLY_INJECTED = true;
}
ArdublocklyClassic.BLOCKLY_INJECTED = true;
}
};
request.send(null);
};
......@@ -366,22 +364,22 @@ ArduinoClassic.injectBlockly = function(blockly_el, toolbox_path) {
* Loads an XML file from the users file system and adds the blocks into the
* Blockly workspace.
*/
ArduinoClassic.loadUserXmlFile = function() {
ArdublocklyClassic.loadUserXmlFile = function() {
// Create event listener function
var parseInputXMLfile = function(e) {
var files = e.target.files;
var reader = new FileReader();
reader.onload = function() {
var success = ArduinoClassic.replaceBlocksfromXml(reader.result);
var success = ArdublocklyClassic.replaceBlocksfromXml(reader.result);
if (success) {
ArduinoClassic.renderContent();
ArdublocklyClassic.renderContent();
} else {
alert('Invalid XML!\nThe XML file was not successfully parsed into ' +
'blocks. Please review the XML code and try again.');
}
};
reader.readAsText(files[0]);
}
};
// Create once invisible browse button with event listener, and click it
var select_file = document.getElementById('select_file');
if (select_file == null) {
......@@ -402,7 +400,7 @@ ArduinoClassic.loadUserXmlFile = function() {
* @param {!string} blocks_xml String of XML code for the blocks.
* @return {!boolean} Indicates if the XML into blocks parse was successful.
*/
ArduinoClassic.replaceBlocksfromXml = function(blocks_xml) {
ArdublocklyClassic.replaceBlocksfromXml = function(blocks_xml) {
var xmlDom = null;
var success = true;
try {
......@@ -418,8 +416,8 @@ ArduinoClassic.replaceBlocksfromXml = function(blocks_xml) {
}
}
if (xmlDom) {
ArduinoClassic.workspace.clear();
Blockly.Xml.domToWorkspace(ArduinoClassic.workspace, xmlDom);
ArdublocklyClassic.workspace.clear();
Blockly.Xml.domToWorkspace(ArdublocklyClassic.workspace, xmlDom);
}
return success;
};
......@@ -428,9 +426,9 @@ ArduinoClassic.replaceBlocksfromXml = function(blocks_xml) {
* Creates an XML file containing the blocks from the Blockly workspace and
* prompts the users to save it into their local file system.
*/
ArduinoClassic.saveXmlFile = function() {
ArdublocklyClassic.saveXmlFile = function() {
// Generate XML
var xmlDom = Blockly.Xml.workspaceToDom(ArduinoClassic.workspace);
var xmlDom = Blockly.Xml.workspaceToDom(ArdublocklyClassic.workspace);
var xmlText = Blockly.Xml.domToPrettyText(xmlDom);
// Create blob
var blob = new Blob(
......@@ -446,7 +444,7 @@ ArduinoClassic.saveXmlFile = function() {
* @param {!Element|string} el Button element or ID thereof.
* @param {!Function} func Event handler to bind.
*/
ArduinoClassic.bindClick = function(el, func) {
ArdublocklyClassic.bindClick = function(el, func) {
if (typeof el == 'string') {
el = document.getElementById(el);
}
......@@ -466,7 +464,7 @@ ArduinoClassic.bindClick = function(el, func) {
* @return {!Object} Contains height, width, x, and y properties.
* @private
*/
ArduinoClassic.getBBox_ = function(element) {
ArdublocklyClassic.getBBox_ = function(element) {
var height = element.offsetHeight;
var width = element.offsetWidth;
var x = 0;
......
ardublockly/classic/index.html
View file @ 4a52d8a9
......@@ -43,8 +43,6 @@
<script src="../../blockly/generators/arduino/variables.js"></script>
<!-- Load Blockly's language strings -->
<script src="../../blockly/msg/js/en.js"></script>
<!-- Arduino Server Compiler -->
<script src="../ardublocklyserver_ajax.js"></script>
<!-- Prettify -->
<link rel="stylesheet" href="../../blockly/demos/prettify.css">
<script src="../../blockly/demos/prettify.js"></script>
......@@ -118,6 +116,8 @@
<p>
</div>
<!-- Arduino Server Compiler -->
<script src="../ardublocklyserver_ajax.js"></script>
<!-- Webapp js -->
<script src="ardublockly_classic.js"></script>
</body>
......
ardublockly/classic/settings.html
View file @ 4a52d8a9
......@@ -6,7 +6,7 @@
<title>Ardublockly: Arduino Code Settings</title>
<link rel="stylesheet" href="settings.css">
<!-- Arduino Server Compiler -->
<script src="../../ardublocklyserver/js/ArduServerCompiler.js"></script>
<script src="../ardublocklyserver_ajax.js"></script>
</head>
<body>
......
ardublockly/classic/settings.js
View file @ 4a52d8a9
......@@ -2,36 +2,32 @@
* @license Licensed under the Apache License, Version 2.0 (the "License"):
* http://www.apache.org/licenses/LICENSE-2.0
*
* @fileoverview JavaScript for ArduBlockly's Server Compiler settings.
* @fileoverview JavaScript for Ardublockly Server Compiler settings.
*/
'use strict';
/**
* Create a namespace for the application.
*/
/** Create a namespace for the application. */
var ArduinoSettings = {};
/**
* Initialize the settings form data on page load.
*/
/** Initialize the settings form data on page load. */
window.addEventListener('load', function() {
// Populate the form data
ArduServerCompiler.requestCompilerLocation(
ArdublocklyServer.requestCompilerLocation(
ArduinoSettings.setCompilerLocationHtml);
ArduServerCompiler.requestSketchLocation(
ArdublocklyServer.requestSketchLocation(
ArduinoSettings.setSketchLocationHtml);
ArduServerCompiler.requestArduinoBoards(
ArdublocklyServer.requestArduinoBoards(
ArduinoSettings.setArduinoBoardsHtml);
ArduServerCompiler.requestSerialPorts(ArduinoSettings.setSerialPortsHtml);
ArduServerCompiler.requestIdeOptions(ArduinoSettings.setIdeHtml);
ArdublocklyServer.requestSerialPorts(ArduinoSettings.setSerialPortsHtml);
ArdublocklyServer.requestIdeOptions(ArduinoSettings.setIdeHtml);
// Binding clicks to the form items
ArduinoSettings.bindClick_('settings_compiler_location', function() {
ArduServerCompiler.requestNewCompilerLocation(
ArdublocklyServer.requestNewCompilerLocation(
ArduinoSettings.setCompilerLocationHtml);
});
ArduinoSettings.bindClick_('settings_sketch_location', function() {
ArduServerCompiler.requestNewSketchLocation(
ArdublocklyServer.requestNewSketchLocation(
ArduinoSettings.setSketchLocationHtml);
});
......@@ -51,7 +47,7 @@ window.addEventListener('load', function() {
*/
ArduinoSettings.setCompilerLocationHtml = function(new_el) {
if (new_el != null) {
var comp_loc_ip = document.getElementById('settings_compiler_location')
var comp_loc_ip = document.getElementById('settings_compiler_location');
if (comp_loc_ip != null) {
comp_loc_ip.value = new_el.value;
}
......@@ -65,7 +61,7 @@ ArduinoSettings.setCompilerLocationHtml = function(new_el) {
*/
ArduinoSettings.setSketchLocationHtml = function(new_el) {
if (new_el != null) {
var sketch_loc_ip = document.getElementById('settings_sketch_location')
var sketch_loc_ip = document.getElementById('settings_sketch_location');
if (sketch_loc_ip != null) {
sketch_loc_ip.value = new_el.value;
}
......@@ -80,7 +76,7 @@ ArduinoSettings.setSketchLocationHtml = function(new_el) {
*/
ArduinoSettings.setArduinoBoardsHtml = function(new_el) {
if (new_el != null) {
var board_dropdown = document.getElementById('board')
var board_dropdown = document.getElementById('board');
if (board_dropdown != null) {
new_el.id = 'board';
new_el.onchange = ArduinoSettings.setBoard;
......@@ -95,8 +91,8 @@ ArduinoSettings.setArduinoBoardsHtml = function(new_el) {
ArduinoSettings.setBoard = function() {
var el = document.getElementById('board');
var board_value = el.options[el.selectedIndex].value;
//TODO: check how ArduServerCompiler deals with invalid data and sanitise here
ArduServerCompiler.setArduinoBoard(
//TODO: check how ArdublocklyServer deals with invalid data and sanitise here
ArdublocklyServer.setArduinoBoard(
board_value, ArduinoSettings.setArduinoBoardsHtml);
};
......@@ -108,7 +104,7 @@ ArduinoSettings.setBoard = function() {
*/
ArduinoSettings.setSerialPortsHtml = function(new_el) {
if (new_el != null) {
var serial_dropdown = document.getElementById('serial_port')
var serial_dropdown = document.getElementById('serial_port');
if (serial_dropdown != null) {
new_el.id = 'serial_port';
new_el.onchange = ArduinoSettings.setSerial;
......@@ -117,14 +113,12 @@ ArduinoSettings.setSerialPortsHtml = function(new_el) {
}
};
/**
* Sets the Serial Port with the selected user input from the drop down.
*/
/** Sets the Serial Port with the selected user input from the drop down. */
ArduinoSettings.setSerial = function() {
var el = document.getElementById('serial_port');
var serial_value = el.options[el.selectedIndex].value;
//TODO: check how ArduServerCompiler deals with invalid data and sanitise
ArduServerCompiler.setSerialPort(
//TODO: check how ArdublocklyServer deals with invalid data and sanitise
ArdublocklyServer.setSerialPort(
serial_value, ArduinoSettings.setSerialPortsHtml);
};
......@@ -136,7 +130,7 @@ ArduinoSettings.setSerial = function() {
*/
ArduinoSettings.setIdeHtml = function(new_el) {
if (new_el != null) {
var ide_dropdown = document.getElementById('ide_settings')
var ide_dropdown = document.getElementById('ide_settings');
if (ide_dropdown != null) {
new_el.id = 'ide_settings';
new_el.onchange = ArduinoSettings.setIdeSettings;
......@@ -151,8 +145,8 @@ ArduinoSettings.setIdeHtml = function(new_el) {
ArduinoSettings.setIdeSettings = function() {
var el = document.getElementById('ide_settings');
var ide_value = el.options[el.selectedIndex].value;
//TODO: check how ArduServerCompiler deals with invalid data and sanitise
ArduServerCompiler.setIdeOptions(ide_value, ArduinoSettings.setIdeHtml);
//TODO: check how ArdublocklyServer deals with invalid data and sanitise
ArdublocklyServer.setIdeOptions(ide_value, ArduinoSettings.setIdeHtml);
};
/**
......
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