add rough layout of OtaWizardPage

src/app/app.module.ts

@@ -9,6 +9,8 @@ import { HomePage } from '../pages/home/home';
 import { ApiProvider } from '../providers/api/api';
 import { HttpClientModule } from '@angular/common/http';
 import { OtaWifiProvider } from '../providers/ota-wifi/ota-wifi';
+import { OtaWizardPage } from '../pages/ota-wizard/ota-wizard';
+import { OtaWizardPageModule } from '../pages/ota-wizard/ota-wizard.module';
 
 @NgModule({
   declarations: [
@@ -18,11 +20,13 @@ import { OtaWifiProvider } from '../providers/ota-wifi/ota-wifi';
   imports: [
     HttpClientModule,
     BrowserModule,
+    OtaWizardPageModule,
     IonicModule.forRoot(openSenseApp)
   ],
   bootstrap: [IonicApp],
   entryComponents: [
     openSenseApp,
+    OtaWizardPage,
     HomePage
   ],
   providers: [

src/pages/Blockly/blockly.html

@@ -12,12 +12,14 @@
     <ion-title>Blockly</ion-title>
   </ion-navbar>
 </ion-header>
-  
-  
 
 
 <ion-content padding>
 
+  <ion-buttons>
+    <button ion-button (click)="launchOtaWizard()">OTA Wizard</button>
+  </ion-buttons>
+
   <div>
     Blockly should be displayed here !
   </div>

src/pages/Blockly/blockly.ts

@@ -1,6 +1,7 @@
 import { Component } from '@angular/core';
 import { IonicPage, NavController, NavParams } from 'ionic-angular';
 import { OtaWifiProvider } from '../../providers/ota-wifi/ota-wifi';
+import { OtaWizardPage } from '../ota-wizard/ota-wizard';
 
 /**
  * Generated class for the SenseBoxPage page.
@@ -31,4 +32,8 @@ export class BlocklyPage {
     console.log('ionViewDidLoad SenseBoxPage');
   }
 
+  launchOtaWizard () {
+    this.navCtrl.setRoot(OtaWizardPage)
+  }
+
 }

src/pages/ota-wizard/ota-wizard.html

@@ -0,0 +1,64 @@
+<ion-header>
+  <ion-navbar>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>Over The Air Progammer</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content padding="false"> <!-- FIXME: remove padding -->
+  <ion-slides pager>
+    <ion-slide>
+      <h1>Welcome</h1>
+
+      <img src="TODO-nice-wifi-sensebox-pictrogram>" />
+
+      <p>
+        To program your senseBox wirelessly, please follow these steps.
+        We will help you connect to your senseBox via WiFi.
+        <br/>
+        Please make sure that your senseBox..
+      </p>
+
+      <ul style="text-align: left">
+        <li>has the WiFi shield plugged in</li>
+        <li>has the initial OTA sketch installed</li>
+        <li>TODO review this list foo bar lorem ipsum</li>
+      </ul>
+    </ion-slide>
+
+    <ion-slide>
+      <h1>Check internet connection for compilation</h1>
+      <pre style="text-align: left">
+        - if connected: background: compile code
+        - if not: enable wifi (manually on iOS)
+      </pre>
+    </ion-slide>
+
+    <ion-slide>
+      <h1>senseBox Wifi Selection</h1>
+      <pre style="text-align: left">
+        - Android
+          - select from list?
+            - highlight `sensebox-*` networks?
+            - filter by SSID name (`sensebox-*`)
+            - filter by distance?
+          - enter credentials (if necessary)
+          - background: connect to selected SSID
+        - iOS
+          - tell user to connect to `sensebox-*` SSID, and come back when done
+      </pre>
+    </ion-slide>
+
+    <ion-slide>
+      <h1>Status Screen</h1>
+      <pre style="text-align: left">
+        - background: check if sensebox upload is available
+        - show success or error
+        - instructions to restart sensebox?
+      </pre>
+    </ion-slide>
+
+  </ion-slides>
+</ion-content>

src/pages/ota-wizard/ota-wizard.module.ts

@@ -0,0 +1,13 @@
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { OtaWizardPage } from './ota-wizard';
+
+@NgModule({
+  declarations: [
+    OtaWizardPage,
+  ],
+  imports: [
+    IonicPageModule.forChild(OtaWizardPage),
+  ],
+})
+export class OtaWizardPageModule {}

src/pages/ota-wizard/ota-wizard.scss

@@ -0,0 +1,7 @@
+@import '../../theme/variables.scss';
+
+page-ota-wizard {
+  .swiper-pagination-bullet-active {
+    background: map-get($colors, primary);
+  }
+}

src/pages/ota-wizard/ota-wizard.ts

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { IonicPage, NavController, NavParams } from 'ionic-angular';
+
+/**
+ * Generated class for the OtaWizardPage page.
+ *
+ * See https://ionicframework.com/docs/components/#navigation for more info on
+ * Ionic pages and navigation.
+ */
+
+@IonicPage()
+@Component({
+  selector: 'page-ota-wizard',
+  templateUrl: 'ota-wizard.html',
+})
+export class OtaWizardPage {
+
+  constructor(public navCtrl: NavController, public navParams: NavParams) {
+  }
+
+  ionViewDidLoad() {
+    console.log('ionViewDidLoad OtaWizardPage');
+  }
+
+}