BlocklyDuino - with additional blocks for the ZeeDee.
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

455 lines
14 KiB

<html manifest=node.manifest>
<head>
<meta charset="utf-8">
<title>BlocklyDuino</title>
<script type="text/javascript" src="../../blockly_compressed.js"></script>
<script type="text/javascript" src="../../blocks_compressed.js"></script>
<script type="text/javascript" src="../../arduino_compressed.js"></script>
<script type="text/javascript" src="../../msg/js/en.js"></script>
<script type="text/javascript" src="Blob.js"></script>
<script type="text/javascript" src="spin.js"></script>
<script type="text/javascript" src="FileSaver.min.js"></script>
<script type="text/javascript" src="blockly_helper.js"></script>
<script>
/**
* List of tab names.
* @private
*/
var TABS_ = ['blocks', 'arduino', 'xml'];
var selected = 'blocks';
/**
* Switch the visible pane when a tab is clicked.
* @param {string} clickedName Name of tab clicked.
*/
function tabClick(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;
var xmlDom = null;
try {
xmlDom = Blockly.Xml.textToDom(xmlText);
} catch (e) {
var q =
window.confirm('Error parsing XML:\n' + e + '\n\nAbandon changes?');
if (!q) {
// Leave the user on the XML tab.
return;
}
}
if (xmlDom) {
Blockly.mainWorkspace.clear();
Blockly.Xml.domToWorkspace(Blockly.mainWorkspace, xmlDom);
}
}
if (document.getElementById('tab_blocks').className == 'tabon') {
Blockly.mainWorkspace.setVisible(false);
}
// Deselect all tabs and hide all panes.
for (var i = 0; i < TABS_.length; i++) {
var name = TABS_[i];
document.getElementById('tab_' + name).className = 'taboff';
document.getElementById('content_' + name).style.visibility = 'hidden';
}
// Select the active tab.
selected = clickedName;
document.getElementById('tab_' + clickedName).className = 'tabon';
// Show the selected pane.
document.getElementById('content_' + clickedName).style.visibility =
'visible';
renderContent();
if (clickedName == 'blocks') {
Blockly.mainWorkspace.setVisible(true);
}
Blockly.fireUiEvent(window, 'resize');
}
/**
* Populate the currently selected pane with content generated from the blocks.
*/
function renderContent() {
var content = document.getElementById('content_' + selected);
// Initialize the pane.
if (content.id == 'content_blocks') {
// If the workspace was changed by the XML tab, Firefox will have performed
// an incomplete rendering due to Blockly being invisible. Rerender.
Blockly.mainWorkspace.render();
} else if (content.id == 'content_xml') {
var xmlTextarea = document.getElementById('content_xml');
var xmlDom = Blockly.Xml.workspaceToDom(Blockly.mainWorkspace);
var xmlText = Blockly.Xml.domToPrettyText(xmlDom);
xmlTextarea.value = xmlText;
xmlTextarea.focus();
/*} else if (content.id == 'content_javascript') {
content.innerHTML = Blockly.JavaScript.workspaceToCode();
} else if (content.id == 'content_dart') {
content.innerHTML = Blockly.Dart.workspaceToCode();
} else if (content.id == 'content_python') {
content.innerHTML = Blockly.Python.workspaceToCode();*/
} else if (content.id == 'content_arduino') {
//content.innerHTML = Blockly.Arduino.workspaceToCode();
var arduinoTextarea = document.getElementById('content_arduino');
arduinoTextarea.value = Blockly.Arduino.workspaceToCode();
arduinoTextarea.focus();
}
}
/**
* Compute the absolute coordinates and dimensions of an HTML element.
* @param {!Element} element Element to match.
* @return {!Object} Contains height, width, x, and y properties.
* @private
*/
function getBBox_(element) {
var height = element.offsetHeight;
var width = element.offsetWidth;
var x = 0;
var y = 0;
do {
x += element.offsetLeft;
y += element.offsetTop;
element = element.offsetParent;
} while (element);
return {
height: height,
width: width,
x: x,
y: y
};
}
/**
* Initialize Blockly. Called on page load.
*/
function init() {
//window.onbeforeunload = function() {
// return 'Leaving this page will result in the loss of your work.';
//};
var container = document.getElementById('content_area');
var onresize = function(e) {
var bBox = getBBox_(container);
for (var i = 0; i < TABS_.length; i++) {
var el = document.getElementById('content_' + 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
// compensate for scrollbars.
el.style.height = bBox.height + 'px';
el.style.height = (2 * bBox.height - el.offsetHeight) + 'px';
el.style.width = bBox.width + 'px';
el.style.width = (2 * bBox.width - el.offsetWidth) + 'px';
}
// Make the 'Blocks' tab line up with the toolbox.
if (Blockly.mainWorkspace.toolbox_.width) {
document.getElementById('tab_blocks').style.minWidth =
(Blockly.mainWorkspace.toolbox_.width - 38) + 'px';
// Account for the 19 pixel margin and on each side.
}
};
window.addEventListener('resize', onresize, false);
var toolbox = document.getElementById('toolbox');
Blockly.inject(document.getElementById('content_blocks'),
{grid:
{spacing: 25,
length: 3,
colour: '#ccc',
snap: true},
media: '../../media/',
toolbox: toolbox});
auto_save_and_restore_blocks();
//load from url parameter (single param)
//http://stackoverflow.com/questions/2090551/parse-query-string-in-javascript
var dest = unescape(location.search.replace(/^.*\=/, '')).replace(/\+/g, " ");
if(dest){
load_by_url(dest);
}
}
</script>
<style>
html, body {
height: 100%;
}
body {
background-color: #fff;
font-family: sans-serif;
margin: 0;
overflow: hidden;
}
h1 {
font-weight: normal;
font-size: 140%;
margin-left: 5px;
margin-right: 5px;
}
/* Tabs */
#tabRow>td {
border: 1px solid #ccc;
}
td.tabon {
border-bottom-color: #ddd !important;
background-color: #ddd;
padding: 5px 19px;
}
td.taboff {
cursor: pointer;
padding: 5px 19px;
}
td.taboff:hover {
background-color: #eee;
}
td.tabmin {
border-top-style: none !important;
border-left-style: none !important;
border-right-style: none !important;
}
td.tabmax {
border-top-style: none !important;
border-left-style: none !important;
border-right-style: none !important;
width: 99%;
text-align: right;
}
table {
border-collapse: collapse;
margin: 0;
padding: 0;
border: none;
}
td {
padding: 0;
vertical-align: top;
}
.content {
visibility: hidden;
margin: 0;
padding: 1ex;
position: absolute;
direction: ltr;
}
pre.content {
overflow: scroll;
}
#content_blocks {
padding: 0;
}
.blocklySvg {
border-top: none !important;
}
#content_xml {
resize: none;
outline: none;
border: none;
font-family: monospace;
overflow: scroll;
}
button {
padding: 1px 1em;
font-size: 90%;
border-radius: 4px;
border: 1px solid #ddd;
background-color: #eee;
color: black;
}
button.launch {
border: 1px solid #d43;
background-color: #d43;
color: white;
}
button:active {
border: 1px solid blue !important;
}
button:hover {
box-shadow: 2px 2px 5px #888;
}
</style>
</head>
<body onload="init()">
<table height="100%" width="100%">
<tr>
<td>
<h1><a href="https://github.com/gasolin/BlocklyDuino/wiki">BlocklyDuino</a> &gt; web-based visual programming editor for arduino</h1>
</td>
</tr>
<tr>
<td>
<table width="100%">
<tr id="tabRow" height="1em">
<td id="tab_blocks" class="tabon" onclick="tabClick('blocks')">Blocks</td>
<td class="tabmin">&nbsp;</td>
<!--td id="tab_javascript" class="taboff" onclick="tabClick(this.id)">JavaScript</td>
<td class="tabmin">&nbsp;</td-->
<!--td id="tab_dart" class="taboff" onclick="tabClick(this.id)">Dart</td>
<td class="tabmin">&nbsp;</td>
<td id="tab_python" class="taboff" onclick="tabClick(this.id)">Python</td>
<td class="tabmin">&nbsp;</td-->
<td id="tab_arduino" class="taboff" onclick="tabClick('arduino')">Arduino</td>
<td class="tabmin">&nbsp;</td>
<td id="tab_xml" class="taboff" onclick="tabClick('xml')">XML</td>
<td class="tabmax">
<button type="button" onclick="uploadClick()">Upload</button>
<button type="button" onclick="resetClick()">Reset</button>
<button onclick="discard()">Discard</button>
<button onclick="saveCode()">Save Arduino Code</button>
<button onclick="save()">Save XML</button>
<button id="fakeload">Load XML</button>
<input type="file" id="load" style="display: none;"/>
<!--button class="launch" onclick="runJS()">Run Program</button-->
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td height="99%" id="content_area"></td>
</tr>
</table>
<div id="content_blocks" class="content"></div>
<textarea id="content_arduino" class="content" readonly wrap="off"></textarea>
<textarea id="content_xml" class="content" wrap="off"></textarea>
<xml id="toolbox" style="display: none">
<category name="Logic">
<block type="controls_if"></block>
<block type="logic_compare"></block>
<block type="logic_operation"></block>
<block type="logic_negate"></block>
<block type="logic_null"></block>
</category>
<category name="Control">
<block type="base_delay">
<value name="DELAY_TIME">
<block type="math_number">
<field name="NUM">1000</field>
</block>
</value>
</block>
<block type="controls_for">
<value name="FROM">
<block type="math_number">
<field name="NUM">1</field>
</block>
</value>
<value name="TO">
<block type="math_number">
<field name="NUM">10</field>
</block>
</value>
</block>
<block type="controls_whileUntil"></block>
</category>
<category name="Math">
<block type="math_number"></block>
<block type="math_arithmetic"></block>
<block type="base_map">
<value name="DMAX">
<block type="math_number">
<field name="NUM">180</field>
</block>
</value>
</block>
</category>
<category name="Text">
<block type="text"></block>
</category>
<category name="Variables" custom="VARIABLE"></category>
<category name="Functions" custom="PROCEDURE"></category>
<sep></sep>
<category name="Input/Output">
<block type="inout_highlow"></block>
<block type="inout_digital_write"></block>
<block type="inout_digital_read"></block>
<block type="inout_analog_write">
<value name="NUM">
<block type="math_number">
<field name="NUM">0</field>
</block>
</value>
</block>
<block type="inout_analog_read"></block>
<block type="serial_print">
<value name="CONTENT">
<block type="text">
<field name="TEXT"></field>
</block>
</value>
</block>
<block type="inout_tone">
<value name="NUM">
<block type="math_number">
<field name="NUM">440</field>
</block>
</value>
</block>
<block type="inout_notone"></block>
<block type="inout_buildin_led"></block>
</category>
<category name="Servo">
<block type="servo_move">
<value name="DEGREE">
<block type="math_number">
<field name="NUM">0</field>
</block>
</value>
<value name="DELAY_TIME">
<block type="math_number">
<field name="NUM">1000</field>
</block>
</value>
</block>
<block type="servo_read_degrees"></block>
</category>
<category name="Grove Analog">
<block type="grove_rotary_angle"></block>
<block type="grove_temporature_sensor"></block>
<block type="grove_sound_sensor"></block>
<block type="grove_thumb_joystick"></block>
</category>
<category name="Grove">
<block type="grove_led"></block>
<block type="grove_button"></block>
<block type="grove_relay"></block>
<block type="grove_tilt_switch"></block>
<block type="grove_piezo_buzzer"></block>
<block type="grove_pir_motion_sensor"></block>
<block type="grove_line_finder"></block>
<block type="grove_rgb_led"></block>
<block type="grove_ultrasonic_ranger"></block>
</category>
<category name="Grove LCD">
<block type="grove_serial_lcd_print">
<value name="TEXT">
<block type="text">
<field name="TEXT"></field>
</block>
</value>
<value name="TEXT2">
<block type="text">
<field name="TEXT"></field>
</block>
</value>
<value name="DELAY_TIME">
<block type="math_number">
<field name="NUM">1000</field>
</block>
</value>
</block>
<block type="grove_serial_lcd_power"></block>
<block type="grove_serial_lcd_effect"></block>
</category>
<category name="Grove Motor">
<block type="grove_motor_shield"></block>
</category>
</xml>
</body>
</html>