UI refactoring

- start cleaning up data processing in service
- grid-based layout
- make it a bit nicer

.gitignore

@@ -19,7 +19,7 @@ npm-debug.log*
 coverage/
 dist/
 !node_modules/svg-gauge
-node_modules/
+node_modules/*
 tmp/
 temp/
 hooks/
@@ -35,3 +35,4 @@ $RECYCLE.BIN/
 Thumbs.db
 UserInterfaceState.xcuserstate
 
+yarn.lock

config.xml

@@ -1,5 +1,5 @@
 <?xml version='1.0' encoding='utf-8'?>
-<widget id="nl.digitalthings.mebarista.v2" version="0.1.0" android-versionCode="21" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
+<widget android-versionCode="21" id="nl.digitalthings.mebarista.v2" version="0.1.0" xmlns="http://www.w3.org/ns/widgets" xmlns:cdv="http://cordova.apache.org/ns/1.0">
     <name>meBarista</name>
     <description>meBarista accompanies your meCoffee espresso PID</description>
     <author email="info@mecoffee.nl" href="https://mecoffee.nl/">meCoffee.nl / Digital Things</author>
@@ -48,6 +48,12 @@
         <splash height="1024" src="resources/ios/splash/Default-Portrait~ipad.png" width="768" />
         <splash height="960" src="resources/ios/splash/Default@2x~iphone.png" width="640" />
         <splash height="480" src="resources/ios/splash/Default~iphone.png" width="320" />
+        <icon height="1024" src="resources/ios/icon/icon-1024.png" width="1024" />
+        <splash height="2208" src="resources/ios/splash/Default-736h.png" width="1242" />
+        <splash height="1242" src="resources/ios/splash/Default-Landscape-736h.png" width="2208" />
+        <splash height="2048" src="resources/ios/splash/Default-Landscape@~ipadpro.png" width="2732" />
+        <splash height="2732" src="resources/ios/splash/Default-Portrait@~ipadpro.png" width="2048" />
+        <splash height="2732" src="resources/ios/splash/Default@2x~universal~anyany.png" width="2732" />
     </platform>
     <preference name="webviewbounce" value="false" />
     <preference name="UIWebViewBounce" value="false" />
@@ -62,11 +68,13 @@
     </feature>
     <plugin name="ionic-plugin-keyboard" spec="~2.2.1" />
     <plugin name="cordova-plugin-whitelist" spec="1.3.1" />
-    <plugin name="cordova-plugin-console" spec="1.0.5" />
-    <plugin name="cordova-plugin-statusbar" spec="2.2.1" />
-    <plugin name="cordova-plugin-splashscreen" spec="~4.0.1" />
     <plugin name="cordova-plugin-file" spec="~4.3.2" />
     <plugin name="cordova-plugin-bluetooth-serial" />
     <icon src="resources/ios/icon/icon-small@3x.png" />
     <plugin name="cordova-plugin-device" spec="~1.1.6" />
+    <engine name="ios" spec="4.5.5" />
+    <plugin name="cordova-plugin-splashscreen" spec="^5.0.2" />
+    <plugin name="cordova-plugin-statusbar" spec="^2.4.2" />
+    <preference name="SplashScreen" value="screen" />
+    <preference name="SplashScreenDelay" value="3000" />
 </widget>

ionic.config.json

@@ -1,6 +1,8 @@
 {
   "name": "meBarista",
-  "app_id": "",
+  "integrations": {
+    "cordova": {}
+  },
   "v2": true,
   "typescript": true
-}
+}

package.json

@@ -30,7 +30,17 @@
     "bindings": "^1.2.1",
     "buffer": "^5.0.6",
     "chart.js": "^2.5.0",
+    "cordova-ios": "4.5.5",
+    "cordova-plugin-bluetooth-serial": "^0.4.7",
+    "cordova-plugin-compat": "^1.2.0",
+    "cordova-plugin-device": "^1.1.7",
+    "cordova-plugin-file": "^4.3.3",
+    "cordova-plugin-splashscreen": "^5.0.2",
+    "cordova-plugin-statusbar": "^2.4.2",
+    "cordova-plugin-whitelist": "^1.3.1",
+    "ionic": "^4.2.1",
     "ionic-angular": "2.3.0",
+    "ionic-plugin-keyboard": "^2.2.1",
     "ionicons": "3.0.0",
     "rxjs": "5.0.1",
     "svg-gauge": "^1.0.2",
@@ -45,14 +55,26 @@
   },
   "cordovaPlugins": [
     "cordova-plugin-statusbar",
-    "cordova-plugin-console",
     "cordova-plugin-device",
     "cordova-plugin-whitelist",
     "cordova-plugin-splashscreen",
     "ionic-plugin-keyboard",
     "cordova-plugin-bluetooth-serial"
   ],
-  "cordovaPlatforms": [
-  ],
-  "description": "meBarista, the App to control meCoffee"
-}
+  "cordovaPlatforms": [],
+  "description": "meBarista, the App to control meCoffee",
+  "cordova": {
+    "plugins": {
+      "ionic-plugin-keyboard": {},
+      "cordova-plugin-whitelist": {},
+      "cordova-plugin-file": {},
+      "cordova-plugin-bluetooth-serial": {},
+      "cordova-plugin-device": {},
+      "cordova-plugin-splashscreen": {},
+      "cordova-plugin-statusbar": {}
+    },
+    "platforms": [
+      "ios"
+    ]
+  }
+}

src/app/app.component.ts

@@ -3,7 +3,7 @@ import { Nav, Platform } from 'ionic-angular';
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 
-import { Page1 } from '../pages/page1/page1';
+import { Home } from '../pages/home/home';
 import { PressurePage } from '../pages/pressure/pressure';
 import { PreinfusionPage } from '../pages/preinfusion/preinfusion';
 import { TemperaturePage } from '../pages/temperature/temperature';
@@ -26,7 +26,7 @@ import { MeBaristaService } from '../providers/me-barista-service';
 export class MyApp {
   @ViewChild(Nav) nav: Nav;
 
-  rootPage: any = Page1;
+  rootPage: any = Home;
 
   pages: Array<{title: string, component: any}>;
 
@@ -36,7 +36,7 @@ export class MyApp {
     // used for an example of ngFor and navigation
     this.pages = [
       
-      { title: 'Home', component: Page1 },
+      { title: 'Home', component: Home },
       { title: 'Temperature', component: TemperaturePage },
       { title: 'Preinfusion', component: PreinfusionPage },
       { title: 'Pressure', component: PressurePage },

src/app/app.module.ts

@@ -1,7 +1,7 @@
 import { NgModule, ErrorHandler } from '@angular/core';
 import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular';
 import { MyApp } from './app.component';
-import { Page1 } from '../pages/page1/page1';
+import { Home } from '../pages/home/home';
 import { PressurePage } from '../pages/pressure/pressure';
 import { PreinfusionPage } from '../pages/preinfusion/preinfusion';
 import { TemperaturePage } from '../pages/temperature/temperature';
@@ -29,7 +29,7 @@ import { File } from '@ionic-native/file';
 @NgModule({
   declarations: [
     MyApp,
-    Page1,
+    Home,
     PressurePage,
     PreinfusionPage,
     TemperaturePage,
@@ -48,7 +48,7 @@ import { File } from '@ionic-native/file';
   bootstrap: [IonicApp],
   entryComponents: [
     MyApp,
-    Page1,
+    Home,
     PressurePage,
     PreinfusionPage,
     TemperaturePage,

src/app/app.scss

@@ -14,3 +14,9 @@
 // To declare rules for a specific mode, create a child rule
 // for the .md, .ios, or .wp mode classes. The mode class is
 // automatically applied to the <body> element in the app.
+
+ion-navbar.toolbar.toolbar-ios.statusbar-padding, ion-navbar.toolbar-ios ion-title.title-ios,
+ion-toolbar.toolbar.toolbar-ios.statusbar-padding, ion-toolbar.toolbar-ios ion-title.title-ios {
+padding-top: calc(constant(safe-area-inset-top)) !important;
+padding-top: calc(env(safe-area-inset-top)) !important;
+}

src/index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <title>Ionic App</title>
-  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <meta name="viewport" content="initial-scale=1, user-scalable=no, width=device-width, height=device-height, viewport-fit=cover">
   <meta name="format-detection" content="telephone=no">
   <meta name="msapplication-tap-highlight" content="no">
 

src/pages/demos/demos.ts

@@ -4,7 +4,7 @@ import { NavController, NavParams } from 'ionic-angular';
 import { SettingBasePage } from '../setting-base/setting-base';
 import { MeBaristaService } from '../../providers/me-barista-service';
 
-import { Page1 } from '../page1/page1';
+import { Home } from '../home/home';
 
 @Component({
   selector: 'page-demos',
@@ -27,7 +27,7 @@ export class DemosPage extends SettingBasePage {
     console.log( 'demos click' );
   	this.abc.demo_start( );
 
-    this.navCtrl.setRoot( Page1 );
+    this.navCtrl.setRoot( Home );
   }
 
 }

src/pages/home/home.html

@@ -0,0 +1,42 @@
+<ion-header>
+  <ion-navbar>   
+    <ion-spinner #spinner [hidden]="!spinner_show" [paused]="!this.abc.scanning" (click)="this.abc.bt_discover()" style="float: right; margin-right: 1em; width: 1.5em; height: 1.5em;"></ion-spinner>
+    <button ion-button menuToggle>
+      <ion-icon name="menu"></ion-icon>
+    </button>
+    <ion-title>Brewing</ion-title>
+  </ion-navbar>
+</ion-header>
+
+<ion-content #content (window:orientationchange)="changeOrientation($event)">
+  <div class="grid-container" [hidden]="!abc.connected">
+    <div class="header">
+      <h2>Boiler temperature</h2>
+    </div>
+    <div class="graph">      
+      <canvas #lineCanvas></canvas>
+    </div>
+    <div class="temperature_label">
+      <p>Current temperature:</p>
+      <p>Target temperature:</p>
+    </div>
+    <div class="temperature_value">
+      <p>{{ temperature }}</p>
+      <p>{{ target_temperature }}</p>
+    </div>    
+    <div class="gauge-1">
+      <h2>Boiler power</h2>      
+      <div id="cpuSpeed" #powerGauge class="gauge-container"></div>
+    </div>
+    <div class="gauge-2" [hidden]="!shottimer_show">
+      <h2>Shot timer</h2>
+      <div id="cpuSpeed2" #timerGauge class="gauge-container"></div>
+    </div>
+  </div>
+  <div class="grid-container" [hidden]="abc.connected">
+    <div class="error">
+      <span style="font-size: 4em">😢</span>
+      <h2>Not connected</h2>
+    </div>
+  </div>
+</ion-content>

src/pages/home/home.scss

@@ -0,0 +1,62 @@
+page-home {
+
+}
+
+.grid-container {
+  display: grid;
+  height: 100%;
+  width: 100%;
+  grid-template-columns: 5% 1fr 10% 1fr 5%;
+  grid-template-rows: 10% 1fr 1fr 1fr 1fr 10%;
+  grid-gap: 1px 1px;
+ }
+
+ h2 {
+   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+   font-weight: 700;
+ }
+
+.header { grid-area: 1 / 2 / 2 / 5; }
+
+.graph { grid-area: 2 / 2 / 4 / 5; }
+
+.temperature_label { grid-area: 4 / 2 / 5 / 4; }
+.temperature_value { grid-area: 4 / 4 / 5 / 5; text-align: right; }
+
+.temperature_label, .temperature_value {
+  font-size: 1.2em;
+}
+
+.gauge-1 { grid-area: 5 / 2 / 6 / 3; }
+
+.gauge-2 { grid-area: 5 / 4 / 6 / 5; }
+
+.error { grid-area: 3 / 2 / 4 / 5; text-align: center }
+
+.gauge-container {
+ /* width: 150px;
+  height: 150px; */
+  display: block;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ /* padding: 10px; */
+}
+.gauge-container > .gauge > .dial {
+  stroke: #eee;
+  stroke-width: 5;
+  fill: rgba(0,0,0,0);
+}
+.gauge-container > .gauge > .value {
+  stroke: #999;
+  stroke-width: 5;
+  fill: rgba(0,0,0,0);
+}
+
+.gauge-container > .gauge > .value-text {
+  fill: #ffc107;
+  font-size: 1em;
+}
+
+.gauge-container > .gauge > .title {
+  fill: #ffc107;
+  font-size: 1em;
+}

src/pages/home/home.ts

@@ -0,0 +1,270 @@
+import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
+
+import { NavController, NavParams, Platform, Content } from 'ionic-angular';
+
+import { Chart } from 'chart.js';
+
+import { SettingBasePage } from '../setting-base/setting-base';
+
+import { MeBaristaService } from '../../providers/me-barista-service';
+
+// import { Gauge } from 'svg-gauge';
+import Gauge from 'svg-gauge';
+
+@Component({
+  selector: 'page-home',
+  templateUrl: 'home.html'
+})
+export class Home extends SettingBasePage {
+
+  @ViewChild(Content) content: Content; // was allemaal class 'Content'
+  @ViewChild('lineCanvas') lineCanvas;
+  @ViewChild('powerGauge') powergauge_canvas;
+  @ViewChild('timerGauge') shottimer_canvas;
+  @ViewChild('spinner') spinner;
+
+  lineChart: any;
+  powergauge: any;
+  shottimer: any;
+
+  temperature: any;
+  target_temperature: any;
+
+  sub_l: any;
+  shottimer_show: any;
+  shottimer_hide_timeout: any;
+  green_gradient: any;
+
+
+  constructor(public navCtrl: NavController, public navParams: NavParams, public platform: Platform, public cdr: ChangeDetectorRef, public abc: MeBaristaService) {
+    super(navCtrl, navParams, cdr, abc);
+    this.shottimer_show = false;
+  }
+
+  ionViewDidLoad() {
+    Chart.defaults.global.legend.display = false;
+    Chart.defaults.global.tooltips.enabled = false;
+
+    var line_ctx = this.lineCanvas.nativeElement.getContext('2d')
+
+    let green_gradient = line_ctx.createLinearGradient(0, 0, 0, 150)
+    green_gradient.addColorStop(0, 'rgba(46, 204, 113, 0.2)')
+    green_gradient.addColorStop(0.4, 'rgba(46, 204, 113, 0.1)')
+    green_gradient.addColorStop(1, 'rgba(46, 204, 113, 0)')
+
+    let gray_gradient = line_ctx.createLinearGradient(0, 0, 0, 200)
+    gray_gradient.addColorStop(0, 'rgba(240,240,240, 1.0)')
+    gray_gradient.addColorStop(0.5, 'rgba(240,240,240, 0.25)')
+    gray_gradient.addColorStop(1, 'rgba(240,240,240, 0)')
+
+    this.lineChart = new Chart(this.lineCanvas.nativeElement, {
+      animation: true,
+      type: 'line',
+      options: {
+        maintainAspectRatio: false,
+        scales: {
+          xAxes: [{
+            autoSkip: true,
+            display: false,
+            type: 'time',
+            ticks: {
+              fontFamily: "Noto Sans"
+            }
+          }],
+          yAxes: [{
+            gridLines: {
+              drawBorder: false,
+              drawOnChartArea: false,
+              drawTicks: false
+            },
+            ticks: {
+              fontFamily: '-apple-system, sans-serif',
+              mirror: true,
+              autoSkip: true,
+              callback: function (value, index, values) {
+                return value + ' °C';
+              }
+            }
+          }]
+        }
+      },
+      data: {
+        labels: this.abc.graph_data['label'],
+        datasets: [
+          {
+            label: "Sensor 1",
+            data: this.abc.graph_data['sensor1'],
+            fill: false,            
+            borderColor: "rgba(144, 12, 63, 0.4)",
+            cubicInterpolationMode: "default",
+            borderWidth: 2,
+            pointRadius: 0,
+            lineTension: 1
+          },
+          {
+            label: "Setpoint",
+            data: this.abc.graph_data['setpoint'],
+            fill: 'origin',
+            borderColor: "rgba(46, 204, 113, 0.4)",
+            backgroundColor: green_gradient,
+            borderWidth: 1,
+            pointRadius: 0
+          }
+        ]
+      }
+
+    });
+
+    this.updateData();
+
+    if (this.powergauge == null) {
+      this.powergauge = Gauge(this.powergauge_canvas.nativeElement,
+        {
+          max: 100,
+          dialStartAngle: 180,
+          dialEndAngle: 0,
+          value: 0,
+          title: "Power",
+          label: function (value) {
+            return Math.round(value) + " %";
+          }
+        });
+    }
+
+    
+
+    if (this.shottimer == null) {
+      this.shottimer = Gauge(this.shottimer_canvas.nativeElement,
+        {
+          max: 100,
+          dialStartAngle: 180,
+          dialEndAngle: 0,
+          value: 50,
+          title: "Shot",
+          label: function (value) {
+            return Math.round(value) + " s";
+          }
+
+        });
+    }
+
+    this.powergauge.setValue(0);
+  }
+
+  updateData() {
+
+    //var tmax = Math.max.apply(Math, this.abc.graph_data['sensor1']);
+    var tmin = 0 //Math.min.apply(Math, this.abc.graph_data['sensor1']);
+    var setpoint = Math.max.apply(Math, this.abc.graph_data['setpoint']);
+    
+
+    this.lineChart.options.scales.yAxes[0].ticks.max = Math.round((setpoint + 15) / 5) * 5;
+    this.lineChart.options.scales.yAxes[0].ticks.min = tmin; //Math.round((tmin - 15) / 5) * 5;
+
+    var diff = this.abc.graph_data['setpoint'].slice(-1) - this.abc.graph_data['sensor1'].slice(-1);
+    let color = { bg: null, border: null }
+
+    if(diff > 20) {
+      color.bg = "rgba(144, 12, 63, 0.3)"
+      color.border = "rgba(144, 12, 63, 0.75)"
+    } else if (diff > 5){
+      color.bg = "rgba(255, 195, 0, 0.3)"
+      color.border = "rgba(255, 195, 0, 0.75)"
+    } else {
+      color.bg = "rgba(22, 160, 133, 0.3)"
+      color.border = "rgba(22, 160, 133, 0.75)"
+    }
+
+    this.lineChart.data.datasets[0].borderColor = color.border
+    this.lineChart.options.scales.xAxes[0].time.min = this.abc.graph_data['label'].slice(-200)[0];
+    this.lineChart.options.scales.xAxes[0].time.max = this.abc.graph_data['label'].slice(-1)[0];
+
+    this.lineChart.update();
+
+    this.temperature = this.formatTemperature(this.abc.temperature);
+    this.target_temperature = this.formatTemperature(setpoint);
+    this.spinner_show = !this.abc.connected;
+  }
+
+  formatTemperature(temp) {
+    return temp.toFixed(1) + ' °C';
+  }
+
+  ionViewWillEnter() {
+    var f: any;
+
+    //console.log('view-enter');
+
+    // super.ionViewWillEnter( );
+
+    this.sub_l = this.abc.temperature_s1.subscribe(data => {
+      //console.log('sub ' + this.abc.temperature); 
+      this.powergauge.setValue(this.abc.pid.power);
+
+
+      // show shot timer when shot has started 
+      if (this.abc.shottimer_started)
+        this.shottimer_show = true;
+
+      // update timer with current time as long as it running
+      // TODO: this does not work for the DEMO
+
+      if (this.abc.shottimer_started) {
+
+        f = new Date();
+        this.shottimer.setValue((f - this.abc.shottimer_started) / 1000 * this.abc.speed);
+
+      }
+
+      // when the shot is done, show shot time from meCoffee 
+      // and start timer to hide shot timer
+      if (this.abc.shottimer_duration) {
+
+        this.shottimer.setValue(this.abc.shottimer_duration / 1000);
+
+        // We have consumed, clear it ( not nice )
+        this.abc.shottimer_duration = 0;
+
+        if (this.shottimer_hide_timeout)
+          clearTimeout(this.shottimer_hide_timeout);
+
+        this.shottimer_hide_timeout = setTimeout(() => { this.shottimer_show = false; this.shottimer_hide_timeout = null; }, 30 * 1000 / this.abc.speed);
+
+      }
+
+      this.cdr.detectChanges();
+
+      this.updateData();
+    });
+
+  }
+
+  ionViewWillLeave() {
+
+    // super.ionViewWillLeave( );
+
+    // this.abc.temperature_s1.unsubscribe();
+    this.sub_l.unsubscribe();
+  }
+
+  changeOrientation(event: any) {
+    //console.log( "changeOrientation " + event );
+
+    // this.content.resize();
+    this.ionViewDidLoad(); // fix iOS orientation issues with ChartJS canvas
+  }  
+
+
+  // import { Storage, SqlStorage } from 'ionic-framework/ionic';
+
+  // this.storage = new Storage(SqlStorage);
+
+  // this.storage.get('questionnaires').then((data) => {
+  // if (data != null) this.questionnaires = JSON.parse(data);
+  // else this.loadDefaultQuestions();
+  // And to store Objects, use JSON.stringify(myObject) to store and JSON.parse(...) to turn back
+
+}
+
+
+

src/pages/page1/page1.html

@@ -1,22 +0,0 @@
-<ion-header>
-  <ion-navbar>   
-    <ion-spinner #spinner [hidden]="!spinner_show" [paused]="!this.abc.scanning" (click)="this.abc.bt_discover()" style="float: right; margin-right: 1em; width: 1.5em; height: 1.5em;"></ion-spinner>
-    <span #tt42 [hidden]="spinner_show" style="float: right; margin-right: 1em;">{{temperature}}</span>
-
-    <button ion-button menuToggle>
-      <ion-icon name="menu"></ion-icon>
-    </button>
-    <ion-title>meBarista</ion-title>
-  </ion-navbar>
-</ion-header>
-
-<ion-content #content (window:orientationchange)="changeOrientation($event)">
-   
-    <canvas #lineCanvas></canvas>
-
-      <div id="cpuSpeed" #cpuSpeed class="gauge-container two" style="position: absolute; width: 30vw; height: 15vw; left: 10vmin; bottom: 10vmin; "></div>
-     
-
-   <div id="cpuSpeed2" #cpuSpeed2 class="gauge-container two" [hidden]="!shottimer_show" style="position:absolute; width: 30vw; height: 15vw; right: 10vmin; bottom: 10vmin;"></div>
-
-</ion-content>

src/pages/page1/page1.scss

@@ -1,54 +0,0 @@
-page-page1 {
-
-}
-
-.gauge-container {
- /* width: 150px;
-  height: 150px; */
-  display: block;
- /* padding: 10px; */
-}
-.gauge-container > .gauge > .dial {
-  stroke: #eee;
-  stroke-width: 20;
-  fill: rgba(0,0,0,0);
-}
-.gauge-container > .gauge > .value {
-  stroke: rgb(47, 227, 255);
-  stroke-width: 20;
-  fill: rgba(0,0,0,0);
-}
-
-.gauge-container > .gauge > .value-text {
-  fill: rgb(47, 227, 255);
-  font-family: sans-serif;
-  font-weight: bold;
-  font-size: 10em;
-}
-
-.gauge-container > .gauge > .title {
-  fill: rgb(47, 227, 255);
-  font-family: sans-serif;
-  font-weight: bold;
-  font-size: 5em;
-}
-
-/* ------- Alternate Style ------- */
-.gauge-container.two {
-}
-.gauge-container.two > .gauge > .dial {
-  stroke: #334455;
-  stroke-width: 100;
-}
-.gauge-container.two > .gauge > .value {
-  stroke: orange;
-  stroke-dasharray: none;
-  stroke-width: 130;
-}
-
-.gauge-container.two > .gauge > .value-text {
-  fill: orange;
-}
-.gauge-container.two > .gauge > .title {
-  fill: orange;
-}

src/pages/page1/page1.ts

@@ -1,253 +0,0 @@
-import { Component, ViewChild, ChangeDetectorRef } from '@angular/core';
-
-import { NavController, NavParams, Platform, Content} from 'ionic-angular';
-
-import { Chart } from 'chart.js';
-
-import { SettingBasePage } from '../setting-base/setting-base';
-
-import { MeBaristaService } from '../../providers/me-barista-service';
-
-// import { Gauge } from 'svg-gauge';
-import Gauge from 'svg-gauge';
-
-@Component({
-  selector: 'page-page1',
-  templateUrl: 'page1.html'
-})
-export class Page1 extends SettingBasePage {
-
-  @ViewChild(Content) content: Content; // was allemaal class 'Content'
-  @ViewChild('lineCanvas') lineCanvas;
- // @ViewChild('tt42') tt42;
-  @ViewChild( 'cpuSpeed' ) powergauge_canvas;
-  @ViewChild( 'cpuSpeed2' ) shottimer_canvas;
-  @ViewChild('spinner') spinner;
-
-  lineChart: any;
-  powergauge: any;
-  shottimer: any;
- // temperature: any;
-  sub_l: any;
-  shottimer_show: any;
-  shottimer_hide_timeout: any;
-  
-
-  constructor(public navCtrl: NavController, public navParams: NavParams, public platform: Platform, public cdr: ChangeDetectorRef, public abc: MeBaristaService  ) {
-
-    super( navCtrl, navParams, cdr, abc );
-
-    if( this.abc.connected )
-      this.temperature = this.abc.temperature.toFixed( 2 ) + ' °'; 
-    else
-      this.temperature = '---,-- °';
-
-    this.powergauge = null;
-    this.shottimer_show = false;
-
-  }
-
-  ionViewDidLoad() {
-
-
-      
-        //this.powergauge.setValue( 30 );
-        
-        Chart.defaults.global.legend.display = false;
-        Chart.defaults.global.tooltips.enabled = false;
-        this.lineChart = new Chart(this.lineCanvas.nativeElement, {
- 
-            animation : false,
-            type: 'line',
-            options: {
-              maintainAspectRatio: false,              
-              scales: {
-            xAxes: [{
-                autoSkip: true,
-                type: 'time',
-                time: {
-                    unit: 'minute',
-                    parser: 'X',
-                    displayFormats: {
-                        minute: 'h:mm'
-                    }
-
-                }
-            }]
-              }
-            },
-            data: {
-
-                labels: this.abc.graph_data['label'] /* ["January", "February", "March", "April", "May", "June", "July"] */,
-                datasets: [
-                    
-                    {
-                        label: "Sensor 1",
-                        data: this.abc.graph_data['sensor1'],
-                        fill: false,
-                        borderColor: "rgba(0,0,192,1)",
-                        borderWidth: 3,
-                        pointRadius: 0,
-                        lineTension: 1
-                        // iets met line tension
-                    },
-                    
-                    {
-                        label: "Setpoint",
-                        data: this.abc.graph_data['setpoint'],
-                        fill: false,
-                        borderColor: "rgba(0,255,0,1)",
-                        borderWidth: 1,
-                        pointRadius: 0
-                    }
-
-                ]
-            }
- 
-        });
-
-        this.fixupChart();
-
-        if( this.powergauge == null )
-          this.powergauge = Gauge( this.powergauge_canvas.nativeElement, 
-          { max: 100,
-            dialStartAngle: 180,
-            dialEndAngle: 0,
-            value: 50,
-            title: "Power",
-            label: function(value) {
-              return Math.round(value) + " %";
-            }
-            } );
-
-        if( this.shottimer == null ) {
-        this.shottimer = Gauge( this.shottimer_canvas.nativeElement, 
-          { max: 100,
-            dialStartAngle: 180,
-            dialEndAngle: 0,
-            value: 50,
-            title: "Shot",
-            label: function(value) {
-              return Math.round(value) + " s";
-            }
-
-            } );
-        }
-
-        this.powergauge.setValue( 0 );
-
-
-  }
-
-  fixupChart() {
-
-    var tmax = Math.max.apply( Math, this.abc.graph_data['sensor1'] );
-    var tmin = Math.min.apply( Math, this.abc.graph_data['sensor1'] );
-
-    this.lineChart.options.scales.yAxes[0].ticks.max = Math.round( ( tmax + 15 ) / 5 ) * 5;
-    this.lineChart.options.scales.yAxes[0].ticks.min = Math.round( ( tmin - 15 ) / 5 ) * 5;
-
-    //this.lineChart.options.scales.xAxes[ 0 ].ticks.maxTicksLimit = 11;
-    //this.lineChart.options.scales.xAxes[ 0 ].ticks.autoSkip = true;
-    
-    this.lineChart.options.scales.xAxes[ 0 ].time.min = this.abc.graph_data['label'][0];
-    this.lineChart.options.scales.xAxes[ 0 ].time.max = this.abc.graph_data['label'].slice(-1)[0];
-
-    this.lineChart.options.scales.xAxes[ 0 ].ticks.autoSkip = true;
-
-
-    this.lineChart.options.scales.yAxes[ 0 ].mirror = true;
-
-    this.lineChart.update();
-  
-  }
-
-  ionViewWillEnter( ) {
-    var f: any;
-
-    //console.log('view-enter');
-
-    // super.ionViewWillEnter( );
-
-    this.sub_l = this.abc.temperature_s1.subscribe( data => { 
-    //console.log('sub ' + this.abc.temperature); 
-
-/*    
-    if( this.abc.connected )
-      this.temperature = this.abc.temperature.toFixed( 2 ) + ' °'; 
-    else
-      this.temperature = '---,-- °';
-
-    this.spinner_show = !this.abc.connected; */
-    this.processUpdate( );
-
-    this.powergauge.setValue( this.abc.pid.power );
-    
-    
-    // show shot timer when shot has started 
-    if( this.abc.shottimer_started )
-      this.shottimer_show = true;
-
-    // update timer with current time as long as it running
-    // TODO: this does not work for the DEMO
-
-    if( this.abc.shottimer_started ) {
-
-      f = new Date();
-      this.shottimer.setValue( ( f - this.abc.shottimer_started ) / 1000 * this.abc.speed );
-    
-    }
-
-    // when the shot is done, show shot time from meCoffee 
-    // and start timer to hide shot timer
-    if( this.abc.shottimer_duration ) {
-
-      this.shottimer.setValue( this.abc.shottimer_duration / 1000 );
-
-      // We have consumed, clear it ( not nice )
-      this.abc.shottimer_duration = 0;
-
-      if( this.shottimer_hide_timeout )
-        clearTimeout( this.shottimer_hide_timeout );
-
-      this.shottimer_hide_timeout = setTimeout( () => { this.shottimer_show = false; this.shottimer_hide_timeout = null; }, 30*1000 / this.abc.speed );
-
-    }
-
-
-    this.cdr.detectChanges(); 
-
-    this.fixupChart( );
-    //this.lineChart.update();
-
-  } );
-
-  }
-
-  ionViewWillLeave() {
-
-    // super.ionViewWillLeave( );
-
-    // this.abc.temperature_s1.unsubscribe();
-    this.sub_l.unsubscribe();
-  }
-
-  changeOrientation( event: any ) {
-    //console.log( "changeOrientation " + event );
-
-    // this.content.resize();
-    this.ionViewDidLoad(); // fix iOS orientation issues with ChartJS canvas
-  } 
-
-
-  // import { Storage, SqlStorage } from 'ionic-framework/ionic';
-    
-  // this.storage = new Storage(SqlStorage);
-
-  // this.storage.get('questionnaires').then((data) => {
-  // if (data != null) this.questionnaires = JSON.parse(data);
-  // else this.loadDefaultQuestions();
-  // And to store Objects, use JSON.stringify(myObject) to store and JSON.parse(...) to turn back
-
-}
-

src/pages/setting-base/setting-base.ts

@@ -26,33 +26,8 @@ export class SettingBasePage {
     this.pars = {};
     this.pars_defaults = {};
     this.pars_undo = {};
-
-    if( this.abc.connected )
-      this.temperature = this.abc.temperature.toFixed( 2 ) + ' °C'; 
-    else
-      this.temperature = '---,-- °C';
-
-    this.spinner_show = !this.abc.connected;
-  //  this.spinner.paused = !this.abc.scanning;
-
-    this.header_template = '<ion-header><ion-navbar>' +
-    '<ion-spinner #spinner [hidden]="!spinner_show" [paused]="!this.abc.scanning" (click)="this.abc.bt_discover()" style="float: right; margin-right: 1em; width: 1.5em; height: 1.5em;"></ion-spinner>' +
-    '<span #tt42 [hidden]="spinner_show" style="float: right; margin-right: 1em;">{{temperature}}</span>' +
-    '<button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button> <ion-title>meBarista</ion-title> </ion-navbar> </ion-header>';
-
   }
 
-  processUpdate( ) {
-
-    if( this.abc.connected )
-      this.temperature = this.abc.temperature.toFixed( 2 ) + ' °C'; 
-    else
-      this.temperature = '---,-- °C';
-
-    this.spinner_show = !this.abc.connected;
-    // dit krakte niet? this.spinner.paused = !this.abc.scanning;
-    
-  }
   
   ionViewWillEnter() {
   
@@ -61,7 +36,7 @@ export class SettingBasePage {
 
     //this.tt42 = this.abc.temperature + ' °'; 
     
-    this.processUpdate( );
+
     this.cdr.detectChanges( ); 
 
   } );

src/providers/me-barista-service.ts

@@ -53,7 +53,7 @@ export class MeBaristaService {
       this.temperature_s1_Observer = observer;
     });
 
-    this.graph_data = { sensor1: [ ], sensor2: [  ], setpoint: [ ], label: [ ] };
+    this.graph_data = { sensor1: [ ], sensor2: [  ], setpoint: [ ], label: [ ], power: [ ] };
     this.parameters = { };
     this.scales = { tmpsp: 100, tmpstm: 100, pd1i: 100, pd1imx: 655.36, pistrt: 1000, piprd: 1000};
     this.times = { tmron: true, tmroff: true };
@@ -78,7 +78,7 @@ export class MeBaristaService {
 
   graph_init( ) {
     
-    for( var i = 0; i < 200; i++ ) {
+    /*for( var i = 0; i < 200; i++ ) {
   
       this.graph_data[ 'setpoint' ][ i ] = 101;
       var t = (i - 100) / 32;
@@ -86,7 +86,7 @@ export class MeBaristaService {
       this.graph_data[ 'sensor1' ][ i ] = Math.pow( Math.E, -t / 2 ) * Math.sin( 4 * t ) + 101;
       this.graph_data[ 'label' ][ i ] = i - 100;
   
-    }
+    }*/
   
   }
 
@@ -233,18 +233,15 @@ export class MeBaristaService {
   }
 
   graph_add_data( data:any, add:any ) {
-
     if( data.length == 0 ) {
       data.fill( add );
     }
 
-    data.push( add );
-
-    if( data.length > 200 ) {
-      data.shift();
-    }
+    data.push(add);
 
-   
+    if (data.length > 250) {
+     //data.shift();
+    }   
   }
 
   line_cmd_get( items ) {
@@ -269,7 +266,7 @@ export class MeBaristaService {
 
         this.graph_data['sensor1'][ i ] = temperature;
         this.graph_data['setpoint'][ i ] = setpoint;
-        this.graph_data['label'][ i ] = timestamp - 200;
+        this.graph_data['label'][ i ] = (timestamp - (200 - i)).toString();
 
       }
 
@@ -298,6 +295,7 @@ export class MeBaristaService {
 
     this.pid.power = ( this.pid.p + this.pid.i + this.pid.d + this.pid.a ) / 655.35; 
 
+    this.graph_add_data(this.graph_data['power'], this.pid.power);
   }
 
   line_cmd_set( items ) {

src/theme/variables.scss

@@ -31,6 +31,8 @@ $colors: (
   dark:       #222
 );
 
+$font-family-sans-serif: -apple-system-font, "Helvetica Neue", HelveticaNeue, "Roboto", "Segoe UI", sans-serif !default;
+
 
 // App iOS Variables
 // --------------------------------------------------