implement communication between angular and blockly

via postMessage

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>

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', '*')
   }
 }