CODEWITHSUNDEEP
angularrxjs
Aashay karekar
Aashay karekar

Reputation: 960

How to display Subscribe data in HTML which is continuous change every second in Angular 4

I'm working with a BLE native library in ionic. I'm trying to display a heartbeat on screen. I'm able to log the heartrate value which is continuously changing. What I want is to show the live heartrate value on my html page.

This is my code

<p>{{ heartrate }}</p>

heartrate: number = 0; // global variable

this.ble.startNotification("EB:53:D1:0A:A0:78", "180D", "2A37").subscribe(
    (buffer) => {
        this.getHeartRateNotifications(buffer);
        console.log(buffer);
    }, 
    (err) => {
        console.log('aa', JSON.stringify(err))
    })


getHeartRateNotifications(buffer) {
    console.log(buffer);
    console.log('array : ', String.fromCharCode.apply(null, new Uint8Array(buffer)));
    const value = new DataView(buffer);

    console.log("I am value: ", JSON.stringify(value));
    const flags = value.getUint8(0);
    console.log('FLAGS', flags);

    if (this.session.isEven(flags)) {
        this.heartRate = value.getUint8(1);
        console.log('HEART RATE 8 bit: ', this.heartRate);
    } else if (this.session.isOdd(flags)) {
        this.heartRate = value.getUint16(2);
        console.log('HEART RATE 16 bit: ', this.heartRate);
    }
}

Upvotes: 1

Views: 593

Answers (1)

Alex
Alex

Reputation: 1158

The following should do what you want if you make some change to your getHeartRateNotification function:

this.heartRate$ = this.ble.startNotification("EB:53:D1:0A:A0:78", "180D", "2A37").map((buffer)=> this.getHeartRateNotifications(buffer));
<div class="heart-rate">{{ heartRate$ | async }}</div>

Just set a return in your function:

getHeartRateNotifications(buffer){
  const value = new DataView(buffer);
  const flags = value.getUint8(0);
  
 if(this.session.isEven(flags)){
   return value.getUint8(1);
 }else if(this.session.isOdd(flags)){
   return value.getUint16(2);
 }
}

And type your heartRate$ property as an Observable in your component

heartRate$: Observable<number>;

Et voilà !

Upvotes: 1

Related Questions