Displayed variables "{{foo}}" are not updating when a Bluetooth Serial connection has been made


#1

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.