ngfelixl / angular-web-bluetooth

The missing Web Bluetooth module for Angular. Migrated to Angular 6, rxjs 6.1

Modification from original repo

Modified library to work with Angular 6.0.0 and RxJS 6.1.0. Build passed.

Steps

yarn global add rxjs-tslint
yarn add @angular/compiler-cli
rxjs-5-to-6-migrate -p tsconfig.json

Fixed Observable.fromPromise => from, used several .pipe() functions on observables.

Original

The missing Web Bluetooth module for Angular

Yarn it

yarn add @manekinekko/angular-web-bluetooth

or NPM it

npm i -S @manekinekko/angular-web-bluetooth

Use it

1) import the WebBluetoothModule module

import { NgModule } from '@angular/core';
import { WebBluetoothModule } from '@manekinekko/angular-web-bluetooth';

@NgModule({
  imports: [
    //...,
    WebBluetoothModule.forRoot({
      enableTracing: true/false // enable logs
    })
  ],
  //...
})
export class AppModule { }

2) use it in your service/component

Here is an annotated example using the BluetoothCore service:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';

import { BluetoothCore } from '@manekinekko/angular-web-bluetooth';


@Injectable()
export class BatteryLevelService {

  static GATT_CHARACTERISTIC_BATTERY_LEVEL = 'battery_level';
  static GATT_PRIMARY_SERVICE = 'battery_service';

  constructor(
    public ble: BluetoothCore
  ) {}

  getFakeValue() {
    this.ble.fakeNext();
  }

  getDevice() {

    // call this method to get the connected device
    return this.ble.getDevice$();
  }

  streamValues() {

    // call this method to get a stream of values emitted by the device
    return this.ble.streamValues$()
      .map(value => value.getUint8(0));
  }

  /**
   * Get Battery Level GATT Characteristic value.
   * This logic is specific to this service, this is why we can't abstract it elsewhere.
   * The developer is free to provide any service, and characteristics she wants.
   *
   * @return {Observable<number>} Emites the value of the requested service read from the device
   */
   getBatteryLevel(): Observable<number> {
    console.log('Getting Battery Service...');

    try {
        return this.ble

          // 1) call the discover method will trigger the discovery process (by the browser)
          .discover$({ filters: [], optionalServices: [BatteryLevelService.GATT_PRIMARY_SERVICE] })

          // 2) get that service
          .mergeMap(gatt => this.ble.getPrimaryService$(gatt, BatteryLevelService.GATT_PRIMARY_SERVICE))
          
          // 3) get a specific characteristic on that service
          .mergeMap(primaryService => this.ble.getCharacteristic$(primaryService, BatteryLevelService.GATT_CHARACTERISTIC_BATTERY_LEVEL))
          
          // 4) ask for the value of that characteristic (will return a DataView)
          .mergeMap(characteristic => this.ble.readValue$(characteristic))
          
          // 5) on that DataView, get the right value
          .map(value => value.getUint8(0));
    }
    catch(e) {
      console.error('Oops! can not read value from %s');
    }

  }

}

See the starter for a complete use case.

API documentation

Here 👉https://manekinekko.github.io/angular-web-bluetooth/

Need a starter?

You can use this starter to start building your first Web Bluetooth module.

Blog post

Checkout my post on medium.

Have a PR?

All contributions are welcome ;)