Hi, I’ve been making an app for my A level computing course work, unofficial dead line is tomorrow but I’ve come up against an issue where the values being used to update what’s displayed won’t change till I disconnect from the bluetooth device.
BT device I’m connecting to is a HC-06 connected to an arduino, and using the {{variable}} method to show the values.
Is there any kind of update function I need to call or any other ways to push values to the HTML?
Code for reference is:
home.ts
// Needed in every page
import { Component } from '@angular/core';
// Allows popup windows
import { AlertController } from 'ionic-angular';
// Get access to the Bluetooth library
import { BluetoothSerial } from '@ionic-native/bluetooth-serial';
@Component({
selector: 'page-home', // Sets the name of the page used by NavController
templateUrl: 'home.html' // Sets which HTML file it should use for how it displays
})
// The page is handled internally as a class
export class HomePage {
vals = []
// Constructor is the code that is run when a new class instance is created.
// In this case, that is when the page is loaded.
constructor(public alertCtrl: AlertController, public bluetoothSerial: BluetoothSerial) {
this.vals[0] = "--";
this.vals[1] = "--";
this.vals[2] = "--";
this.vals[3] = "--";
this.connectToBTdevice();
}
connectToBTdevice() {
console.log("Searching for connection...");
let connectingDisp = this.alertCtrl.create({
title: 'Searching for connection...',
});
connectingDisp.present();
this.bluetoothSerial.discoverUnpaired().then((data) => {
connectingDisp.dismiss();
let uuid = "--";
for (let search in data) {
if (data[search].name == "HC-06") {
uuid = data[search].id;
console.log("Connecting to uuid: " + uuid);
break;
}
}
if (uuid != "--") {
var connection = this.bluetoothSerial.connect(uuid);
var subscription = this.bluetoothSerial.subscribe("go");
connection.forEach(() => {
console.log("Connected");
})
subscription.forEach(() => {
this.bluetoothSerial.available().then((bytes) => {
if (bytes > 0) {
this.bluetoothSerial.read().then((data) => {
this.valsUpDate(data);
}).catch(() => {console.log("Unable to read data");})
}
})
}).catch(() => {console.log("Unable to get available bytes")})
} else {
console.log("Error Connecting...");
}
}).catch(() => {
console.log('No Devices');
let devices = this.alertCtrl.create({
title: 'No Devices',
buttons: [{text: 'Dismiss',}]
});
devices.present();
})
}
valsUpDate(inpStr) {
console.log(inpStr);
this.vals[3] = inpStr;
}
disconnectBTdevice() {
this.bluetoothSerial.disconnect().then(() => {
console.log("------------");
console.log("Disconnected");
console.log("------------");
}).catch(() => {
console.log("---------------------");
console.log("Error disconnecting..");
console.log("---------------------");
})
}
}
home.html
<ion-content no-bounce>
<ion-grid>
<ion-row id="title" justify-content-center>
<ion-col align-self-center>
<h1 text-center>Arduino Companion</h1>
</ion-col>
<ion-col>
<button (click)='connectToBTdevice()' ion-button>Connect</button>
<button (click)='disconnectBTdevice()'ion-button>Disconnect</button>
</ion-col>
</ion-row>
<ion-row justify-content-center>
<ion-col id="speed" align-self-center>
Speed <span class="val">{{vals[0]}}<!--get the speed from TS-->mph</span>
</ion-col>
<ion-col id="voltage" align-self-center>
<span class="val">{{vals[1]}}<!--get the voltage from TS-->V</span> Voltage
</ion-col>
</ion-row>
<ion-row justify-content-center>
<ion-col align-self-center>
<div id="speedSlider"></div>
</ion-col>
<ion-col id="current" align-self-center>
<span class="val">{{vals[2]}}<!--get the current from TS-->A</span> Current
</ion-col>
</ion-row>
<ion-row justify-content-center>
<ion-col></ion-col>
<ion-col id="incline" align-self-center>
<span class="val">{{vals[3]}}<!--get the incline from TS-->º</span> Incline
</ion-col>
</ion-row>
</ion-grid>
</ion-content>
Thanks in advance,
Chris.