From 19d14d392eb778cf6cfeba39d8fbdaeaff423ddb Mon Sep 17 00:00:00 2001
From: yhallowiegeht <you@example.com>
Date: Mon, 19 Nov 2018 08:43:29 +0100
Subject: [PATCH 1/4] blockly-wrap first try w/out save/delete button

---
 .gitmodules        | 3 +++
 src/assets/blockly | 1 +
 2 files changed, 4 insertions(+)
 create mode 100644 .gitmodules
 create mode 160000 src/assets/blockly

diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 0000000..21ab057
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "src/assets/blockly"]
+	path = src/assets/blockly
+	url = https://github.com/sensebox/ardublockly-1
diff --git a/src/assets/blockly b/src/assets/blockly
new file mode 160000
index 0000000..60674aa
--- /dev/null
+++ b/src/assets/blockly
@@ -0,0 +1 @@
+Subproject commit 60674aa95849ab75e60c04d74ea29339b856473b

From d6d4d77c34814d671ff5fa5652ffed5478669bc5 Mon Sep 17 00:00:00 2001
From: yhallowiegeht <you@example.com>
Date: Mon, 19 Nov 2018 12:50:47 +0100
Subject: [PATCH 2/4] blockly page init

---
 README.md                           |   4 +
 src/app/app.component.ts            |   4 +-
 src/app/app.module.ts               |   8 +-
 src/index.html                      |  36 ++++
 src/pages/Blockly/blockly.html      |  17 +-
 src/pages/Blockly/blockly.module.ts |   2 +-
 src/pages/Blockly/blockly.scss      |   2 +-
 src/pages/Blockly/blockly.ts        | 285 +++++++++++++++++++++++++++-
 8 files changed, 331 insertions(+), 27 deletions(-)

diff --git a/README.md b/README.md
index 35ce3c6..b1f29db 100644
--- a/README.md
+++ b/README.md
@@ -5,6 +5,10 @@
 - please fork this repository to develop your apps
 
 ### Prequesites 
+- Git Installation
+    - use  
+    `git clone https://github.com/AppDevelopmentAtsenseBox/openSenseApp --recursive`  
+    because the ardublockly submodule is used to implememt blockly
 
 - Node + NPM (nvm) 
     - https://www.npmjs.com/get-npm
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 910a864..434aa26 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -4,7 +4,7 @@ import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 
 import { HomePage } from '../pages/home/home';
-import { OtaWizardPage } from '../pages/ota-wizard/ota-wizard';
+import { BlocklyPage } from '../pages/Blockly/blockly';
 
 @Component({
   templateUrl: 'app.html'
@@ -13,7 +13,7 @@ export class openSenseApp {
 
   @ViewChild(Nav) nav: Nav;
 
-  rootPage:any = OtaWizardPage; // TODO: for development, revert to HomePage
+  rootPage:any = BlocklyPage; // TODO: for development, revert to HomePage
 
   pages: Array<{title: string, component: any}> = [
     { title: 'Home', component: HomePage },
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 0f6bf88..0b0850e 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -10,6 +10,8 @@ import { ApiProvider } from '../providers/api/api';
 import { HttpClientModule } from '@angular/common/http';
 import { OtaWizardPage } from '../pages/ota-wizard/ota-wizard';
 import { OtaWizardPageModule } from '../pages/ota-wizard/ota-wizard.module';
+import { BlocklyPage} from '../pages/Blockly/blockly'
+import { BlocklyPageModule} from '../pages/Blockly/blockly.module'
 
 @NgModule({
   declarations: [
@@ -20,13 +22,15 @@ import { OtaWizardPageModule } from '../pages/ota-wizard/ota-wizard.module';
     HttpClientModule,
     BrowserModule,
     OtaWizardPageModule,
-    IonicModule.forRoot(openSenseApp)
+    IonicModule.forRoot(openSenseApp),
+    BlocklyPageModule
   ],
   bootstrap: [IonicApp],
   entryComponents: [
     openSenseApp,
     OtaWizardPage,
-    HomePage
+    HomePage,
+    BlocklyPage
   ],
   providers: [
     StatusBar,
diff --git a/src/index.html b/src/index.html
index 212d7bd..27b6ea4 100644
--- a/src/index.html
+++ b/src/index.html
@@ -29,6 +29,20 @@
 
   <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>
 
@@ -45,5 +59,27 @@
   <!-- 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>
diff --git a/src/pages/Blockly/blockly.html b/src/pages/Blockly/blockly.html
index c365bc5..4baf04a 100644
--- a/src/pages/Blockly/blockly.html
+++ b/src/pages/Blockly/blockly.html
@@ -5,25 +5,18 @@
   Ionic pages and navigation.
 -->
 <ion-header>
-  <ion-navbar>
+  <ion-navbar class="nav-fixed sensebox_green">
     <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
-    <ion-title>Blockly</ion-title>
+    <ion-title>Blockly for SenseBox</ion-title>
   </ion-navbar>
 </ion-header>
 
-
 <ion-content padding>
-
-  
- <!-- Real floating action button, fixed. It will not scroll with the content -->
- <ion-fab top right edge>
+  <!-- Real floating action button, fixed. It will not scroll with the content -->
+  <ion-fab top right edge>
     <button ion-fab mini (click)="launchOtaWizard()" color ="light"><ion-icon name="wifi"></ion-icon></button>
-        
   </ion-fab>
-  <div>
-    Blockly should be displayed here !
-  </div>
-
+  <div id="blocklyDiv" style="height: 93%; margin-top: 50px;"></div>
 </ion-content>
diff --git a/src/pages/Blockly/blockly.module.ts b/src/pages/Blockly/blockly.module.ts
index 73e4e5b..332227b 100644
--- a/src/pages/Blockly/blockly.module.ts
+++ b/src/pages/Blockly/blockly.module.ts
@@ -7,7 +7,7 @@ import { BlocklyPage } from './blockly';
     BlocklyPage,
   ],
   imports: [
-    IonicPageModule.forChild(BlocklyPage),
+    IonicPageModule.forChild(BlocklyPage)
   ],
 })
 export class BlocklyPageModule {}
diff --git a/src/pages/Blockly/blockly.scss b/src/pages/Blockly/blockly.scss
index a1c6cee..2d43fb4 100644
--- a/src/pages/Blockly/blockly.scss
+++ b/src/pages/Blockly/blockly.scss
@@ -1,3 +1,3 @@
 page-blockly {
-
+    
 }
diff --git a/src/pages/Blockly/blockly.ts b/src/pages/Blockly/blockly.ts
index d6b2e77..e3a5521 100644
--- a/src/pages/Blockly/blockly.ts
+++ b/src/pages/Blockly/blockly.ts
@@ -1,20 +1,288 @@
-import { Component } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { OtaWizardPage } from '../ota-wizard/ota-wizard';
 
-/**
- * Generated class for the SenseBoxPage page.
- *
- * See https://ionicframework.com/docs/components/#navigation for more info on
- * Ionic pages and navigation.
- */
+declare var Blockly: any;
 
 @IonicPage()
 @Component({
   selector: 'page-blockly',
   templateUrl: 'blockly.html',
 })
-export class BlocklyPage {
+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,
@@ -28,5 +296,4 @@ export class BlocklyPage {
   launchOtaWizard () {
     this.navCtrl.setRoot(OtaWizardPage)
   }
-
 }

From 4fba8d69003d45b4f47ac533157ad3e7bd6b1a42 Mon Sep 17 00:00:00 2001
From: yhallowiegeht <y_paul02@uni-muenster.de>
Date: Wed, 5 Dec 2018 13:47:29 +0100
Subject: [PATCH 3/4] blockly iframe 0.1

---
 src/assets/blockly.html        | 366 +++++++++++++++++++++++++++++++++
 src/index.html                 |  36 ----
 src/pages/Blockly/blockly.html |   2 +-
 src/pages/Blockly/blockly.scss |   8 +-
 src/pages/Blockly/blockly.ts   | 272 +-----------------------
 5 files changed, 375 insertions(+), 309 deletions(-)
 create mode 100644 src/assets/blockly.html

diff --git a/src/assets/blockly.html b/src/assets/blockly.html
new file mode 100644
index 0000000..c6db502
--- /dev/null
+++ b/src/assets/blockly.html
@@ -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">&nbsp;</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">&#60; &#62;</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>
diff --git a/src/index.html b/src/index.html
index 27b6ea4..212d7bd 100644
--- a/src/index.html
+++ b/src/index.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>
diff --git a/src/pages/Blockly/blockly.html b/src/pages/Blockly/blockly.html
index 4baf04a..1388eae 100644
--- a/src/pages/Blockly/blockly.html
+++ b/src/pages/Blockly/blockly.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>
diff --git a/src/pages/Blockly/blockly.scss b/src/pages/Blockly/blockly.scss
index 2d43fb4..f2d534d 100644
--- a/src/pages/Blockly/blockly.scss
+++ b/src/pages/Blockly/blockly.scss
@@ -1,3 +1,9 @@
 page-blockly {
-    
+    iframe {
+        height: 100%;
+        width: 100%;
+        border: 0;
+        margin: 0;
+        padding: 0;
+    } 
 }
diff --git a/src/pages/Blockly/blockly.ts b/src/pages/Blockly/blockly.ts
index e3a5521..35d444b 100644
--- a/src/pages/Blockly/blockly.ts
+++ b/src/pages/Blockly/blockly.ts
@@ -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(){   
 
-
-  ngOnInit(){    
-    this.createBlocks();
   }
 
-
-    createBlocks(){      
-      let workspacePlayground = Blockly.inject('blocklyDiv', {toolbox: this.toolbox});
-      return workspacePlayground;
-    }
-
-
   constructor(
     public navCtrl: NavController,
     public navParams: NavParams) {

From a4e143adf3a92c1124e27e62618f81dd83106318 Mon Sep 17 00:00:00 2001
From: Norwin Roosen <github@nroo.de>
Date: Wed, 5 Dec 2018 13:57:21 +0100
Subject: [PATCH 4/4] implement communication between angular and blockly

via postMessage
---
 src/assets/blockly.html      | 17 ++++++++++++++++-
 src/pages/Blockly/blockly.ts | 25 +++++++++++++++----------
 2 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/assets/blockly.html b/src/assets/blockly.html
index c6db502..ce36b5d 100644
--- a/src/assets/blockly.html
+++ b/src/assets/blockly.html
@@ -26,7 +26,7 @@
   <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 
+  <!-- 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>
@@ -360,6 +360,21 @@
       window.removeEventListener('load', load, false);
       Ardublockly.init();
       SenseboxExtension.init();
+
+      window.addEventListener('message', function load(event) {
+        switch (event.data) {
+          case 'getSketch':
+            var code = Ardublockly.generateArduino();
+            event.source.postMessage({
+              type: 'sketch',
+              data: code,
+            }, event.origin)
+            break;
+          default:
+            console.warn(`postMessage type ${event.data} not implemented`)
+        }
+      });
+
     });
   </script>
 </body>
diff --git a/src/pages/Blockly/blockly.ts b/src/pages/Blockly/blockly.ts
index 35d444b..426fe6a 100644
--- a/src/pages/Blockly/blockly.ts
+++ b/src/pages/Blockly/blockly.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, ViewChild, ElementRef } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { OtaWizardPage } from '../ota-wizard/ota-wizard';
 
@@ -9,21 +9,26 @@ import { OtaWizardPage } from '../ota-wizard/ota-wizard';
   templateUrl: 'blockly.html',
 })
 export class BlocklyPage implements OnInit{
+  @ViewChild('blocklyFrame') blocklyFrame: ElementRef
 
-  ngOnInit(){   
-
-  }
+  ngOnInit() {   }
 
   constructor(
     public navCtrl: NavController,
-    public navParams: NavParams) {
-  }
-
-  ionViewDidLoad() {
-    console.log('ionViewDidLoad SenseBoxPage');
+    public navParams: NavParams
+  ) {
+    window.addEventListener('message', ev => {
+      const { type, data } = ev.data;
+      switch (type) {
+        case 'sketch':
+          this.navCtrl.push(OtaWizardPage, { sketch: data })
+          break
+        default:
+      }
+    })
   }
 
   launchOtaWizard () {
-    this.navCtrl.setRoot(OtaWizardPage)
+    this.blocklyFrame.nativeElement.contentWindow.postMessage('getSketch', '*')
   }
 }