mirror of
https://github.com/sensebox/blockly-app
synced 2025-04-19 16:07:33 +02:00
blockly iframe 0.1
This commit is contained in:
yhallowiegeht
parent
d6d4d77c34
commit
4fba8d6900
5 changed files with 375 additions and 309 deletions
366
src/assets/blockly.html
Normal file
366
src/assets/blockly.html
Normal file
|
|
@ -0,0 +1,366 @@
|
|||
<!DOCTYPE HTML>
|
||||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<meta name="theme-color" content="#00878F">
|
||||
<link rel="icon" href="img/favicon.ico">
|
||||
<title class="translatable_title">Blockly for senseBox</title>
|
||||
|
||||
<!-- Materialize, Prettify, and Ardublockly CSS -->
|
||||
<link rel="stylesheet" href="blockly/ardublockly/materialize/materialize.css" media="screen,projection">
|
||||
<link rel="stylesheet" href="blockly/ardublockly/prettify/arduino.css">
|
||||
<link rel="stylesheet" href="blockly/ardublockly/ardublockly.css" media="screen,projection">
|
||||
<style>
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.resize {
|
||||
height: 97%;
|
||||
width: 97%;
|
||||
}
|
||||
</style>
|
||||
|
||||
<!-- Ardublockly - These three files contain the compress version-->
|
||||
<script src="blockly/blockly/blockly_compressed.js"></script>
|
||||
<script src="blockly/blockly/blocks_compressed.js"></script>
|
||||
<script src="blockly/blockly/arduino_compressed.js"></script>
|
||||
<!-- To use the uncompressed version comment out the above and comment in the ones below
|
||||
<script src="../blockly/blockly_uncompressed.js"></script>
|
||||
<script src="../blockly/blocks/logic.js"></script>
|
||||
<script src="../blockly/blocks/loops.js"></script>
|
||||
<script src="../blockly/blocks/math.js"></script>
|
||||
<script src="../blockly/blocks/text.js"></script>
|
||||
<script src="../blockly/blocks/lists.js"></script>
|
||||
<script src="../blockly/blocks/colour.js"></script>
|
||||
<script src="../blockly/blocks/variables.js"></script>
|
||||
<script src="../blockly/blocks/procedures.js"></script>
|
||||
<script src="../blockly/blocks/arduino/io.js"></script>
|
||||
<script src="../blockly/blocks/arduino/map.js"></script>
|
||||
<script src="../blockly/blocks/arduino/procedures.js"></script>
|
||||
<script src="../blockly/blocks/arduino/serial.js"></script>
|
||||
<script src="../blockly/blocks/arduino/servo.js"></script>
|
||||
<script src="../blockly/blocks/arduino/spi.js"></script>
|
||||
<script src="../blockly/blocks/arduino/stepper.js"></script>
|
||||
<script src="../blockly/blocks/arduino/time.js"></script>
|
||||
<script src="../blockly/blocks/arduino/tone.js"></script>
|
||||
<script src="../blockly/blocks/arduino/variables.js"></script>
|
||||
<script src="../blockly/blocks/arduino/sensebox.js"></script>
|
||||
<script src="../blockly/generators/arduino.js"></script>
|
||||
<script src="../blockly/generators/arduino/boards.js"></script>
|
||||
<script src="../blockly/generators/arduino/io.js"></script>
|
||||
<script src="../blockly/generators/arduino/lists.js"></script>
|
||||
<script src="../blockly/generators/arduino/logic.js"></script>
|
||||
<script src="../blockly/generators/arduino/loops.js"></script>
|
||||
<script src="../blockly/generators/arduino/map.js"></script>
|
||||
<script src="../blockly/generators/arduino/math.js"></script>
|
||||
<script src="../blockly/generators/arduino/procedures.js"></script>
|
||||
<script src="../blockly/generators/arduino/serial.js"></script>
|
||||
<script src="../blockly/generators/arduino/servo.js"></script>
|
||||
<script src="../blockly/generators/arduino/spi.js"></script>
|
||||
<script src="../blockly/generators/arduino/stepper.js"></script>
|
||||
<script src="../blockly/generators/arduino/text.js"></script>
|
||||
<script src="../blockly/generators/arduino/time.js"></script>
|
||||
<script src="../blockly/generators/arduino/tone.js"></script>
|
||||
<script src="../blockly/generators/arduino/variables.js"></script>
|
||||
<script src="../blockly/generators/arduino/sensebox.js"></script>-->
|
||||
|
||||
<!-- Default language js files, user selection appended to head on load -->
|
||||
<script src="blockly/blockly/msg/js/en.js"></script>
|
||||
<script src="blockly/ardublockly/msg/en.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- Horizontal Navigation bar -->
|
||||
<nav class="nav-fixed sensebox_green hidden">
|
||||
<div class="nav-wrapper container">
|
||||
<a class="show-on-large button-collapse" href="#" data-activates="slide-out" id="button-collapse"><i class="mdi-navigation-menu"></i></a>
|
||||
<a id="logo-container" class="brand-logo">
|
||||
<span class="app_title translatable_title">senseBox:</span>
|
||||
<!-- Sketch name editable text field -->
|
||||
<span class="sketch_name_wrapper">
|
||||
<i class="mdi-image-edit sketch_name_icon"></i>
|
||||
<input id="sketch_name" class="sketch_name" type="text">
|
||||
</span>
|
||||
</a>
|
||||
<!-- Horizontal Navbar links only shown on large resolutions -->
|
||||
<ul id="nav-mobile" class="right hide-on-med-and-down">
|
||||
<li><a href="#" id="button_load"><span class="translatable_open">Open Blocks</span><i class="mdi-file-file-upload left"></i></a></li>
|
||||
<li><a href="#" id="button_save"><span class="translatable_save">Save Blocks</span><i class="mdi-file-file-download left"></i></a></li>
|
||||
<li><a href="#" id="button_save_ino"><span class="translatable_save_ino">Save Sketch</span><i class="mdi-file-file-download left"></i></a></li>
|
||||
<li><a href="#" id="button_delete"><span class="translatable_deleteAll">Delete All</span><i class="mdi-action-delete left"></i></a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- Sidebar navigation -->
|
||||
<ul id="slide-out" class="side-nav hidden">
|
||||
<li class="logo"><img src="img/sidenav_header.png" alt="Ardublockly block image"></li>
|
||||
<li class="no-padding">
|
||||
<ul>
|
||||
<li id="menu_load"><a href="#"><span class="translatable_open">Open</span><i class="mdi-file-file-upload left"></i></a></li>
|
||||
<li id="menu_save"><a href="#"><span class="translatable_save">Save</span><i class="mdi-file-file-download left"></i></a></li>
|
||||
<li id="menu_delete"><a href="#"><span class="translatable_deleteAll">Delete All</span><i class="mdi-action-delete left"></i></a></li>
|
||||
<li id="menu_settings"><a href="#"><span class="translatable_settings">Settings</span><i class="mdi-action-settings left"></i></a></li>
|
||||
<li id="menu_bug"><a href="https://sensebox.github.io/books-v2/blockly/" target="_blank"><span class="translatable_documentation">Documentation</span><i class="mdi-action-help left"></i></a></li>
|
||||
<li id="menu_bug"><a href="http://github.com/sensebox/ardublockly-1/issues" target="_blank"><span class="translatable_reportBug">Report Bug</span><i class="mdi-action-bug-report left"></i></a></li>
|
||||
</ul>
|
||||
<li class="no-padding">
|
||||
<ul class="collapsible collapsible-accordion">
|
||||
<li>
|
||||
<div class="collapsible-header"><span class="translatable_examples">Examples</span><i class="mdi-navigation-arrow-drop-down"></i></div>
|
||||
<div class="collapsible-body">
|
||||
<ul>
|
||||
<li id="menu_example_1"><a href="#!" class="translatable_Blink">Blink</a></li>
|
||||
<li id="menu_example_2"><a href="#!" class="translatable_Display_print">Display print</a></li>
|
||||
<li id="menu_example_3"><a href="#!" class="translatable_GPS">Display GPS</a></li>
|
||||
<li id="menu_example_4"><a href="#!" class="translatable_send_osem">Send to oSeM</a></li>
|
||||
</ul>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li class="no-padding side-menu-end"> </li>
|
||||
</ul>
|
||||
|
||||
<!-- Content -->
|
||||
<div class="container">
|
||||
<div class="row">
|
||||
<div class="col s12 m12 l8" style="position:relative">
|
||||
<!-- Toolbox visibility button -->
|
||||
<a id="button_toggle_toolbox" class="waves-effect waves-light btn-flat button_toggle_toolbox_off hidden" style="display: none"><i id="button_toggle_toolbox_icon" class="mdi-action-visibility-off"></i></a>
|
||||
<!-- Arduino IDE action buttons -->
|
||||
<div id="ide_buttons_wrapper" class="hidden">
|
||||
<div id="buttons_offline">
|
||||
<a id="button_ide_left" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_yellow"><i id="button_ide_left_icon" class="mdi-action-open-in-browser"></i></a>
|
||||
<a id="button_ide_middle" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_teal"><i id="button_ide_middle_icon" class="mdi-navigation-check"></i></a>
|
||||
<a id="button_ide_large" class="waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_orange"><i id="button_ide_large_icon" class="mdi-av-play-arrow"></i></a>
|
||||
</div>
|
||||
|
||||
<div id="buttons_online" class="hidden">
|
||||
<a id="button_copy_clipboard" class="tooltipped copy-btn waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_blue" data-clipboard-action="copy" data-clipboard-target="#content_arduino" data-position="left" data-delay="750" data-tooltip="In Zwischenablage kopieren"><i id="button_copy_clipboard_icon" class="mdi-action-assignment"></i></a>
|
||||
<a id="button_compile_sketch" class="tooltipped copy-btn waves-effect waves-light waves-circle btn-floating z-depth-1-half arduino_orange" data-position="left" data-delay="750" data-tooltip="Sketch kompilieren"><i id="button_compile_sketch_icon" class="mdi-action-assignment-turned-in"></i></a>
|
||||
</div>
|
||||
|
||||
<div id="button_ide_large_spinner" class="preloader-wrapper active ide_loader" style="display:none">
|
||||
<div class="spinner-layer spinner-orange">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div><div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div><div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spinner-layer spinner-dark-teal">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div><div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div><div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spinner-layer spinner-yellow">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div><div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div><div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="spinner-layer spinner-light-teal">
|
||||
<div class="circle-clipper left">
|
||||
<div class="circle"></div>
|
||||
</div><div class="gap-patch">
|
||||
<div class="circle"></div>
|
||||
</div><div class="circle-clipper right">
|
||||
<div class="circle"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- Blockly Panel -->
|
||||
<div class="card-panel white resize" style="padding: 0">
|
||||
<div id="blocks_panel" class="content blocks_panel_large">
|
||||
<div id="content_blocks" class="content z-depth-1"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col s12 m12 l4 hidden">
|
||||
<ul class="collapsible z-depth-1" data-collapsible="accordion">
|
||||
<li>
|
||||
<div class="collapsible-header active">
|
||||
<span class="collapsible_logo">{ }</span>
|
||||
<span class="translatable_arduinoSourceCode">Arduino Source Code</span>
|
||||
</div>
|
||||
<div class="collapsible-body">
|
||||
<pre id="content_arduino" class="content content_height_transition content_arduino_large"></pre>
|
||||
</div>
|
||||
</li>
|
||||
<li>
|
||||
<div class="collapsible-header" id="xml_collapsible_header">
|
||||
<span class="collapsible_logo">< ></span>
|
||||
<span class="translatable_blocksXml">Blocks XML</span>
|
||||
</div>
|
||||
<div class="collapsible-body" style="position:relative" id="xml_collapsible_body">
|
||||
<a class="btn-floating btn-large waves-effect waves-light arduino_teal z-depth-1-half" id="button_load_xml"><i class="mdi-action-extension"></i></a>
|
||||
<textarea id="content_xml" class="content content_height_transition content_xml_large" wrap="soft"></textarea>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- IDE Output content -->
|
||||
<div class="ide_output_wrapper hidden">
|
||||
<ul class="collapsible ide_output_collapsible" data-collapsible="expandable">
|
||||
<li>
|
||||
<div id="ide_output_collapsible_header" class="collapsible-header ide_output_header_normal">
|
||||
<i class="mdi-action-swap-vert Medium" style="font-size: 2.2rem;"></i>
|
||||
<span class="translatable_arduinoOpMainTitle">Arduino IDE output</span>
|
||||
</div>
|
||||
<div class="collapsible-body">
|
||||
<div id="content_ide_output" class="content"></div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<div id="ide_output_spacer"></div>
|
||||
|
||||
<!-- Settings: Displayed as a Materialize Modal -->
|
||||
<div id="settings_dialog" class="modal modal-fixed-footer">
|
||||
<div class="modal-content">
|
||||
<h4><span class="translatable_settings">Settings</span></h4>
|
||||
<div class="modal_section online">
|
||||
<label><span class="translatable_compilerLocation">Compiler Location</span>:</label>
|
||||
<input type="text" id="settings_compiler_location">
|
||||
</div>
|
||||
<div class="modal_section online">
|
||||
<label><span class="translatable_sketchFolder">Sketch Folder</span>:</label>
|
||||
<input type="text" id="settings_sketch_location">
|
||||
</div>
|
||||
<div class="modal_section online">
|
||||
<label><span class="translatable_arduinoBoard">Arduino Board</span>:</label>
|
||||
<select name="settings_board" id="board">
|
||||
<option value="uno" class="translatable_arduinoBoardDefault">Arduino Board unknown</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="modal_section online">
|
||||
<label><span class="translatable_comPort">COM Port<span>:</label>
|
||||
<select name="settings_serial" id="serial_port">
|
||||
<option value="COMX" class="translatable_comPortDefault">COM Port unknown</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="modal_section online">
|
||||
<label><span class="translatable_defaultIdeButton">Default IDE button</span>:</label>
|
||||
<select name="settings_ide" id="ide_settings">
|
||||
<option value="verify" class="translatable_defaultIdeButtonDefault">IDE options unknown</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="modal_section offline hidden">
|
||||
<label><span>Arduino Board</span>:</label>
|
||||
<select name="settings_board_online" id="boards-online"></select>
|
||||
</div>
|
||||
<div class="modal_section">
|
||||
<label><span class="translatable_language">Language</span>:</label>
|
||||
<select name="settings_language" id="language"></select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="waves-effect btn-flat modal-close"><span class="translatable_return">Return</span></a>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="waves-effect btn-flat modal-close"><span class="translatable_return">Return</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Select Additional Blocks menu -->
|
||||
<div id="blocks_menu" class="modal modal-fixed-footer">
|
||||
<div class="modal-content">
|
||||
<div>
|
||||
<h4><span class="translatable_addBlocksTitle">Additional Blocks</span></h4>
|
||||
</div>
|
||||
<div id="blocks_menu_body"></div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a href="#" class="waves-effect btn-flat modal-close"><span class="translatable_return">Return</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- General Alert: Content is loaded using JavaScript to display alerts -->
|
||||
<div id="gen_alert" class="modal modal_small modal-fixed-footer">
|
||||
<div class="modal-content">
|
||||
<h5 id="gen_alert_title">Empty Alert</h4>
|
||||
<p><span id="gen_alert_body">Empty alert text</span></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="gen_alert_ok_link" href="#" class="waves-effect btn-flat modal-close"><span class="translatable_okay">Okay</span></a>
|
||||
<a id="gen_alert_cancel_link" href="#" class="waves-effect btn-flat modal-close"><span class="translatable_cancel">Cancel</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Prompt: Content is loaded using JavaScript to display input prompt -->
|
||||
<div id="gen_prompt" class="modal modal_small modal-fixed-footer">
|
||||
<div class="modal-content">
|
||||
<p><span id="gen_prompt_message">Prompt message</span></p>
|
||||
<p><input id="gen_prompt_input" value="test" /></p>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="gen_prompt_ok_link" href="#" class="waves-effect btn-flat modal-close"><span class="translatable_okay">Okay</span></a>
|
||||
<a id="gen_prompt_cancel_link" href="#" class="waves-effect btn-flat modal-close"><span class="translatable_cancel">Cancel</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Local Modal to be shown if Ardublockly Server is not running. -->
|
||||
<div id="not_running_dialog" class="modal">
|
||||
<div class="modal-content">
|
||||
<div>
|
||||
<h4 id="gen_alert_title"><span class="translatable_noServerTitle">Ardublockly app not running</span></h4>
|
||||
</div>
|
||||
<div class="translatable_noServerBody">
|
||||
<p>For all the Ardublockly features to be enabled, the Ardublockly desktop application must be running locally on your computer.</p>
|
||||
<p>If you are using an online version you will not be able to configure the settings nor load the blocks code into an Arduino.</p>
|
||||
<p>Installation instruction can be found in the <a href="https://github.com/sensebox/ardublockly">Ardublockly repository</a>.</p>
|
||||
<p>If you have Ardublockly already installed, make sure the application is running correctly.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<a id="gen_alert_ok_link" href="#" class="waves-effect btn-flat modal-close"><span class="translatable_okay">Okay</span></a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- Desktop version of Ardublockly JS, needs to be loaded first. -->
|
||||
<script src="blockly/ardublockly/ardublockly_desktop.js"></script>
|
||||
<!-- jQuery and Materialize JS -->
|
||||
<script src="blockly/ardublockly/js_libs/jquery-2.1.3.min.js"></script>
|
||||
<script src="blockly/ardublockly/materialize/materialize.js"></script>
|
||||
<!-- FileSaver JS -->
|
||||
<script src="blockly/ardublockly/js_libs/FileSaver.min.js"></script>
|
||||
<!-- JS Diff -->
|
||||
<script src="blockly/ardublockly/js_libs/diff.js"></script>
|
||||
<!-- Prettify JS -->
|
||||
<script src="blockly/ardublockly/prettify/prettify.js"></script>
|
||||
<!-- Ardublockly app -->
|
||||
<script src="blockly/ardublockly/ardublocklyserver_ajax.js"></script>
|
||||
<script src="blockly/ardublockly/ardublockly_lang.js"></script>
|
||||
<script src="blockly/ardublockly/ardublockly_design.js"></script>
|
||||
<script src="blockly/ardublockly/ardublockly_toolbox.js"></script>
|
||||
<script src="blockly/ardublockly/ardublockly_blockly.js"></script>
|
||||
<script src="blockly/ardublockly/ardublockly.js"></script>
|
||||
<!-- copy to clipboard stuff -->
|
||||
<script src="blockly/ardublockly/js_libs/clipboard.min.js"></script>
|
||||
<script src="blockly/ardublockly/sensebox_extensions.js"></script>
|
||||
<script>
|
||||
window.addEventListener('load', function load(event) {
|
||||
window.removeEventListener('load', load, false);
|
||||
Ardublockly.init();
|
||||
SenseboxExtension.init();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -29,20 +29,6 @@
|
|||
|
||||
<link href="build/main.css" rel="stylesheet">
|
||||
|
||||
<!-- Materialize, Prettify, and Ardublockly CSS -->
|
||||
<link rel="stylesheet" href="assets/blockly/ardublockly/materialize/materialize.css" media="screen,projection">
|
||||
<link rel="stylesheet" href="assets/blockly/ardublockly/prettify/arduino.css">
|
||||
<link rel="stylesheet" href="assets/blockly/ardublockly/ardublockly.css" media="screen,projection">
|
||||
|
||||
<!-- Ardublockly - These three files contain the compress version-->
|
||||
<script src="assets/blockly/blockly/blockly_compressed.js"></script>
|
||||
<script src="assets/blockly/blockly/blocks_compressed.js"></script>
|
||||
<script src="assets/blockly/blockly/arduino_compressed.js"></script>
|
||||
|
||||
<!-- Default language js files, user selection appended to head on load -->
|
||||
<script src="assets/blockly/blockly//msg/js/en.js"></script>
|
||||
<script src="assets/blockly/ardublockly/msg/en.js"></script>
|
||||
|
||||
</head>
|
||||
<body>
|
||||
|
||||
|
|
@ -59,27 +45,5 @@
|
|||
<!-- The main bundle js is generated during the build process -->
|
||||
<script src="build/main.js"></script>
|
||||
|
||||
<!-- Desktop version of Ardublockly JS, needs to be loaded first. -->
|
||||
<script src="assets/blockly/ardublockly/ardublockly_desktop.js"></script>
|
||||
<!-- jQuery and Materialize JS -->
|
||||
<script src="assets/blockly/ardublockly/js_libs/jquery-2.1.3.min.js"></script>
|
||||
<script src="assets/blockly/ardublockly/materialize/materialize.js"></script>
|
||||
<!-- FileSaver JS -->
|
||||
<script src="assets/blockly/ardublockly/js_libs/FileSaver.min.js"></script>
|
||||
<!-- JS Diff -->
|
||||
<script src="assets/blockly/ardublockly/js_libs/diff.js"></script>
|
||||
<!-- Prettify JS -->
|
||||
<script src="assets/blockly/ardublockly/prettify/prettify.js"></script>
|
||||
<!-- Ardublockly app -->
|
||||
<script src="assets/blockly/ardublockly/ardublocklyserver_ajax.js"></script>
|
||||
<script src="assets/blockly/ardublockly/ardublockly_lang.js"></script>
|
||||
<script src="assets/blockly/ardublockly/ardublockly_design.js"></script>
|
||||
<script src="assets/blockly/ardublockly/ardublockly_toolbox.js"></script>
|
||||
<script src="assets/blockly/ardublockly/ardublockly_blockly.js"></script>
|
||||
<script src="assets/blockly/ardublockly/ardublockly.js"></script>
|
||||
<!-- copy to clipboard stuff -->
|
||||
<script src="assets/blockly/ardublockly/js_libs/clipboard.min.js"></script>
|
||||
<script src="assets/blockly/ardublockly/sensebox_extensions.js"></script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -18,5 +18,5 @@
|
|||
<ion-fab top right edge>
|
||||
<button ion-fab mini (click)="launchOtaWizard()" color ="light"><ion-icon name="wifi"></ion-icon></button>
|
||||
</ion-fab>
|
||||
<div id="blocklyDiv" style="height: 93%; margin-top: 50px;"></div>
|
||||
<iframe #blocklyFrame src='assets/blockly.html'></iframe>
|
||||
</ion-content>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
page-blockly {
|
||||
|
||||
iframe {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,7 +2,6 @@ import { Component, OnInit } from '@angular/core';
|
|||
import { IonicPage, NavController, NavParams } from 'ionic-angular';
|
||||
import { OtaWizardPage } from '../ota-wizard/ota-wizard';
|
||||
|
||||
declare var Blockly: any;
|
||||
|
||||
@IonicPage()
|
||||
@Component({
|
||||
|
|
@ -11,279 +10,10 @@ declare var Blockly: any;
|
|||
})
|
||||
export class BlocklyPage implements OnInit{
|
||||
|
||||
public toolbox:string =
|
||||
'<xml>' +
|
||||
' <sep></sep>' +
|
||||
'<category id="senseBox_Sensor" name="senseBox Sensoren" colour="120">' +
|
||||
' <block type="sensebox_sensor_temp_hum"></block>' +
|
||||
' <block type="sensebox_sensor_lux"></block>' +
|
||||
' <block type="sensebox_sensor_uv"></block>' +
|
||||
' <block type="sensebox_sensor_pressure"></block>' +
|
||||
' <block type="sensebox_sensor_ultrasonic_ranger"></block>' +
|
||||
' <block type="sensebox_sensor_ir_dist"></block>' +
|
||||
' <block type="sensebox_sensor_sound"></block>' +
|
||||
' <block type="sensebox_foto"></block>' +
|
||||
' <block type="sensebox_button"></block>' +
|
||||
' <block type="sensebox_poti"></block>' +
|
||||
' <block type="sensebox_time"></block>' +
|
||||
' </category>' +
|
||||
' <category id="senseBox_output" name="senseBox Ausgabe" colour="120">' +
|
||||
' <block type="sensebox_led"></block>' +
|
||||
' <block type="sensebox_piezo_buzzer"></block>' +
|
||||
' <block type="sensebox_rgb_led">' +
|
||||
' <value name="RED">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">0</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' <value name="GREEN">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">0</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' <value name="BLUE">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">0</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="sensebox_safe_to_sd"></block>' +
|
||||
' <block type="sensebox_serial_print"></block>' +
|
||||
' <block type="sensebox_shield_wifi"></block>' +
|
||||
' <block type="sensebox_shield_ethernet"></block>'+
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catLogic" name="Logic" colour="210">' +
|
||||
' <block type="controls_if"></block>' +
|
||||
' <block type="logic_compare"></block>' +
|
||||
' <block type="logic_operation"></block>' +
|
||||
' <block type="logic_negate"></block>' +
|
||||
' <block type="logic_boolean"></block>' +
|
||||
' <block type="logic_null"></block>' +
|
||||
' <block type="logic_ternary"></block>' +
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catLoops" name="Loops" colour="10">' +
|
||||
' <block type="controls_repeat_ext">' +
|
||||
' <value name="TIMES">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">10</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="controls_whileUntil"></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>' +
|
||||
' <value name="BY">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">1</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="controls_flow_statements"></block>' +
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catMath" name="Math" colour="230">' +
|
||||
' <block type="math_number"></block>' +
|
||||
' <block type="math_arithmetic"></block>' +
|
||||
' <block type="math_single"></block>' +
|
||||
' <block type="math_trig"></block>' +
|
||||
' <block type="math_constant"></block>' +
|
||||
' <block type="math_number_property"></block>' +
|
||||
' <block type="math_change">' +
|
||||
' <value name="DELTA">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">1</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="math_round"></block>' +
|
||||
' <block type="math_modulo"></block>' +
|
||||
' <block type="math_constrain">' +
|
||||
' <value name="LOW">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">1</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' <value name="HIGH">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">100</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="math_random_int">' +
|
||||
' <value name="FROM">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">1</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' <value name="TO">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">100</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="math_random_float"></block>' +
|
||||
' <block type="base_map"></block>' +
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catText" name="Text" colour="160">' +
|
||||
' <block type="text"></block>' +
|
||||
' <block type="text_join"></block>' +
|
||||
' <block type="text_append">' +
|
||||
' <value name="TEXT">' +
|
||||
' <block type="text"></block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="text_length"></block>' +
|
||||
' <block type="text_isEmpty"></block>' +
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catVariables" name="Variables" colour="330">' +
|
||||
' <block type="variables_get"></block>' +
|
||||
' <block type="variables_set"></block>' +
|
||||
' <block type="variables_set">' +
|
||||
' <value name="VALUE">' +
|
||||
' <block type="variables_set_type"></block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="variables_set_type"></block>' +
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catFunctions" name="Functions" custom="PROCEDURE" colour="290"></category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catInputOutput" name="Input/Output" colour="250">' +
|
||||
' <block type="io_digitalwrite">' +
|
||||
' <value name="STATE">' +
|
||||
' <block type="io_highlow"></block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="io_digitalread"></block>' +
|
||||
' <block type="io_builtin_led">' +
|
||||
' <value name="STATE">' +
|
||||
' <block type="io_highlow"></block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="io_analogwrite"></block>' +
|
||||
' <block type="io_analogread"></block>' +
|
||||
' <block type="io_highlow"></block>' +
|
||||
' <block type="io_pulsein">' +
|
||||
' <value name="PULSETYPE">' +
|
||||
' <shadow type="io_highlow"></shadow>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="io_pulsetimeout">' +
|
||||
' <value name="PULSETYPE">' +
|
||||
' <shadow type="io_highlow"></shadow>' +
|
||||
' </value>' +
|
||||
' <value name="TIMEOUT">' +
|
||||
' <shadow type="math_number">' +
|
||||
' <field name="NUM">100</field>' +
|
||||
' </shadow>' +
|
||||
' </value>'+
|
||||
' </block>' +
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catTime" name="Time" colour="140">' +
|
||||
' <block type="time_delay">' +
|
||||
' <value name="DELAY_TIME_MILI">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">1000</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="time_delaymicros">' +
|
||||
' <value name="DELAY_TIME_MICRO">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">100</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="time_millis"></block>' +
|
||||
' <block type="time_micros"></block>' +
|
||||
' <block type="infinite_loop"></block>' +
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catAudio" name="Audio" colour="250">' +
|
||||
' <block type="io_tone">' +
|
||||
' <field name="TONEPIN">0</field>' +
|
||||
' <value name="FREQUENCY">' +
|
||||
' <shadow type="math_number">' +
|
||||
' <field name="NUM">220</field>' +
|
||||
' </shadow>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="io_notone"></block>' +
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catMotors" name="Motors" colour="60">' +
|
||||
' <block type="servo_write">' +
|
||||
' <value name="SERVO_ANGLE">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">90</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="servo_read"></block>' +
|
||||
' <block type="stepper_config">' +
|
||||
' <field name="STEPPER_NUMBER_OF_PINS">2</field>' +
|
||||
' <field name="STEPPER_PIN1">1</field>' +
|
||||
' <field name="STEPPER_PIN2">2</field>' +
|
||||
' <value name="STEPPER_STEPS">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">100</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' <value name="STEPPER_SPEED">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">10</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="stepper_step">' +
|
||||
' <value name="STEPPER_STEPS">' +
|
||||
' <block type="math_number">' +
|
||||
' <field name="NUM">10</field>' +
|
||||
' </block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' </category>' +
|
||||
' <sep></sep>' +
|
||||
' <category id="catComms" name="Comms" colour="160">' +
|
||||
' <block type="serial_setup"></block>' +
|
||||
' <block type="serial_print"></block>' +
|
||||
' <block type="text_prompt_ext">' +
|
||||
' <value name="TEXT">' +
|
||||
' <block type="text"></block>' +
|
||||
' </value>' +
|
||||
' </block>' +
|
||||
' <block type="spi_setup"></block>' +
|
||||
' <block type="spi_transfer"></block>' +
|
||||
' <block type="spi_transfer_return"></block>' +
|
||||
' </category>' +
|
||||
'</xml>';
|
||||
|
||||
|
||||
ngOnInit(){
|
||||
this.createBlocks();
|
||||
|
||||
}
|
||||
|
||||
|
||||
createBlocks(){
|
||||
let workspacePlayground = Blockly.inject('blocklyDiv', {toolbox: this.toolbox});
|
||||
return workspacePlayground;
|
||||
}
|
||||
|
||||
|
||||
constructor(
|
||||
public navCtrl: NavController,
|
||||
public navParams: NavParams) {
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue