├── .angular-cli.json ├── .gitignore ├── .nvmrc ├── CODE_OF_CONDUCT.md ├── README.md ├── package-lock.json ├── package.json ├── src ├── app │ ├── app.component.ts │ ├── app.module.ts │ ├── battery-level.service.ts │ └── battery-level │ │ └── battery-level.component.ts ├── assets │ └── .gitkeep ├── environments │ ├── environment.prod.ts │ └── environment.ts ├── favicon.ico ├── index.html ├── main.ts ├── polyfills.ts ├── styles.css ├── tsconfig.app.json └── typings.d.ts └── tsconfig.json /.angular-cli.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "./node_modules/@angular/cli/lib/config/schema.json", 3 | "project": { 4 | "name": "angular-web-bluetooth-starter" 5 | }, 6 | "apps": [ 7 | { 8 | "root": "src", 9 | "outDir": "dist", 10 | "assets": [ 11 | "assets", 12 | "favicon.ico" 13 | ], 14 | "index": "index.html", 15 | "main": "main.ts", 16 | "polyfills": "polyfills.ts", 17 | "test": "test.ts", 18 | "tsconfig": "tsconfig.app.json", 19 | "testTsconfig": "tsconfig.spec.json", 20 | "prefix": "app", 21 | "styles": [ 22 | "styles.css" 23 | ], 24 | "scripts": [], 25 | "environmentSource": "environments/environment.ts", 26 | "environments": { 27 | "dev": "environments/environment.ts", 28 | "prod": "environments/environment.prod.ts" 29 | } 30 | } 31 | ], 32 | "e2e": { 33 | "protractor": { 34 | "config": "./protractor.conf.js" 35 | } 36 | }, 37 | "lint": [ 38 | { 39 | "project": "src/tsconfig.app.json", 40 | "exclude": "**/node_modules/**" 41 | }, 42 | { 43 | "project": "src/tsconfig.spec.json", 44 | "exclude": "**/node_modules/**" 45 | }, 46 | { 47 | "project": "e2e/tsconfig.e2e.json", 48 | "exclude": "**/node_modules/**" 49 | } 50 | ], 51 | "test": { 52 | "karma": { 53 | "config": "./karma.conf.js" 54 | } 55 | }, 56 | "defaults": { 57 | "styleExt": "css", 58 | "class": { 59 | "spec": false 60 | }, 61 | "component": { 62 | "inlineStyle": true, 63 | "inlineTemplate": true, 64 | "spec": false 65 | }, 66 | "directive": { 67 | "spec": false 68 | }, 69 | "guard": { 70 | "spec": false 71 | }, 72 | "module": { 73 | "spec": false 74 | }, 75 | "pipe": { 76 | "spec": false 77 | }, 78 | "service": { 79 | "spec": false 80 | } 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See http://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # compiled output 4 | /dist 5 | /dist-server 6 | /tmp 7 | /out-tsc 8 | 9 | # dependencies 10 | /node_modules 11 | 12 | # IDEs and editors 13 | /.idea 14 | .project 15 | .classpath 16 | .c9/ 17 | *.launch 18 | .settings/ 19 | *.sublime-workspace 20 | 21 | # IDE - VSCode 22 | .vscode/* 23 | !.vscode/settings.json 24 | !.vscode/tasks.json 25 | !.vscode/launch.json 26 | !.vscode/extensions.json 27 | 28 | # misc 29 | /.sass-cache 30 | /connect.lock 31 | /coverage 32 | /libpeerconnection.log 33 | npm-debug.log 34 | testem.log 35 | /typings 36 | 37 | # e2e 38 | /e2e/*.js 39 | /e2e/*.map 40 | 41 | # System Files 42 | .DS_Store 43 | Thumbs.db 44 | -------------------------------------------------------------------------------- /.nvmrc: -------------------------------------------------------------------------------- 1 | 8 -------------------------------------------------------------------------------- /CODE_OF_CONDUCT.md: -------------------------------------------------------------------------------- 1 | # Contributor Covenant Code of Conduct 2 | 3 | ## Our Pledge 4 | 5 | In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation. 6 | 7 | ## Our Standards 8 | 9 | Examples of behavior that contributes to creating a positive environment include: 10 | 11 | * Using welcoming and inclusive language 12 | * Being respectful of differing viewpoints and experiences 13 | * Gracefully accepting constructive criticism 14 | * Focusing on what is best for the community 15 | * Showing empathy towards other community members 16 | 17 | Examples of unacceptable behavior by participants include: 18 | 19 | * The use of sexualized language or imagery and unwelcome sexual attention or advances 20 | * Trolling, insulting/derogatory comments, and personal or political attacks 21 | * Public or private harassment 22 | * Publishing others' private information, such as a physical or electronic address, without explicit permission 23 | * Other conduct which could reasonably be considered inappropriate in a professional setting 24 | 25 | ## Our Responsibilities 26 | 27 | Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior. 28 | 29 | Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful. 30 | 31 | ## Scope 32 | 33 | This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers. 34 | 35 | ## Enforcement 36 | 37 | Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at github@wassimchegham.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately. 38 | 39 | Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership. 40 | 41 | ## Attribution 42 | 43 | This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version] 44 | 45 | [homepage]: http://contributor-covenant.org 46 | [version]: http://contributor-covenant.org/version/1/4/ 47 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | # This starter has been moved to https://github.com/manekinekko/angular-web-bluetooth 3 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "angular-web-bluetooth-starter", 3 | "version": "1.0.0", 4 | "license": "MIT", 5 | "scripts": { 6 | "ng": "ng", 7 | "start": "ng serve", 8 | "build": "ng build --prod", 9 | "test": "ng test", 10 | "lint": "ng lint", 11 | "e2e": "ng e2e" 12 | }, 13 | "private": true, 14 | "dependencies": { 15 | "@angular/animations": "^5.2.0", 16 | "@angular/common": "^5.2.0", 17 | "@angular/compiler": "^5.2.0", 18 | "@angular/core": "^5.2.0", 19 | "@angular/forms": "^5.2.0", 20 | "@angular/http": "^5.2.0", 21 | "@angular/platform-browser": "^5.2.0", 22 | "@angular/platform-browser-dynamic": "^5.2.0", 23 | "@angular/router": "^5.2.0", 24 | "@manekinekko/angular-web-bluetooth": "^2.1.1", 25 | "core-js": "^2.4.1", 26 | "rxjs": "^5.5.6", 27 | "zone.js": "^0.8.19" 28 | }, 29 | "devDependencies": { 30 | "@angular/cli": "1.7.3", 31 | "@angular/compiler-cli": "^5.2.0", 32 | "@angular/language-service": "^5.2.0", 33 | "typescript": "~2.5.3" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /src/app/app.component.ts: -------------------------------------------------------------------------------- 1 | import { Component } from '@angular/core'; 2 | 3 | @Component({ 4 | selector: 'ble-root', 5 | template: ` 6 | 7 | ` 8 | }) 9 | export class AppComponent {} 10 | -------------------------------------------------------------------------------- /src/app/app.module.ts: -------------------------------------------------------------------------------- 1 | import { BrowserModule } from '@angular/platform-browser'; 2 | import { NgModule } from '@angular/core'; 3 | import { WebBluetoothModule } from '@manekinekko/angular-web-bluetooth'; 4 | 5 | import { AppComponent } from './app.component'; 6 | import { BatteryLevelComponent } from './battery-level/battery-level.component'; 7 | 8 | @NgModule({ 9 | declarations: [ 10 | AppComponent, 11 | BatteryLevelComponent 12 | ], 13 | entryComponents: [ 14 | BatteryLevelComponent 15 | ], 16 | imports: [ 17 | BrowserModule, 18 | WebBluetoothModule.forRoot({ 19 | enableTracing: true 20 | }) 21 | ], 22 | bootstrap: [AppComponent] 23 | }) 24 | export class AppModule { } 25 | -------------------------------------------------------------------------------- /src/app/battery-level.service.ts: -------------------------------------------------------------------------------- 1 | import { Injectable } from '@angular/core'; 2 | import { Observable } from 'rxjs/Observable'; 3 | import { BluetoothCore } from '@manekinekko/angular-web-bluetooth'; 4 | 5 | @Injectable() 6 | export class BatteryLevelService { 7 | static GATT_CHARACTERISTIC_BATTERY_LEVEL = 'battery_level'; 8 | static GATT_PRIMARY_SERVICE = 'battery_service'; 9 | 10 | constructor(public ble: BluetoothCore) {} 11 | 12 | getFakeValue() { 13 | this.ble.fakeNext(); 14 | } 15 | 16 | getDevice() { 17 | return this.ble.getDevice$(); 18 | } 19 | 20 | streamValues() { 21 | return this.ble.streamValues$().map((value: DataView) => value.getUint8(0)); 22 | } 23 | 24 | /** 25 | * Get Battery Level GATT Characteristic value. 26 | * This logic is specific to this service, this is why we can't abstract it elsewhere. 27 | * The developer is free to provide any service, and characteristics she wants. 28 | * 29 | * @return {Observable} Emites the value of the requested service read from the device 30 | */ 31 | getBatteryLevel() { 32 | console.log('Getting Battery Service...'); 33 | 34 | try { 35 | return this.ble 36 | .discover$({ 37 | acceptAllDevices: true, 38 | optionalServices: [BatteryLevelService.GATT_PRIMARY_SERVICE] 39 | }) 40 | .mergeMap((gatt: BluetoothRemoteGATTServer) => { 41 | return this.ble.getPrimaryService$( 42 | gatt, 43 | BatteryLevelService.GATT_PRIMARY_SERVICE 44 | ); 45 | }) 46 | .mergeMap((primaryService: BluetoothRemoteGATTService) => { 47 | return this.ble.getCharacteristic$( 48 | primaryService, 49 | BatteryLevelService.GATT_CHARACTERISTIC_BATTERY_LEVEL 50 | ); 51 | }) 52 | .mergeMap((characteristic: BluetoothRemoteGATTCharacteristic) => { 53 | return this.ble.readValue$(characteristic); 54 | }) 55 | .map((value: DataView) => value.getUint8(0)); 56 | } catch (e) { 57 | console.error('Oops! can not read value from %s'); 58 | } 59 | } 60 | } 61 | -------------------------------------------------------------------------------- /src/app/battery-level/battery-level.component.ts: -------------------------------------------------------------------------------- 1 | import { Component, OnInit, NgZone } from '@angular/core'; 2 | import { BatteryLevelService } from '../battery-level.service'; 3 | import { BluetoothCore } from '@manekinekko/angular-web-bluetooth'; 4 | 5 | @Component({ 6 | selector: 'ble-battery-level', 7 | template: ` 8 | Get Battery Level ({{batteryLevel || 'N/A'}}%) 9 | `, 10 | styles: [` 11 | a { 12 | position: relative; 13 | color: rgba(255,255,255,1); 14 | text-decoration: none; 15 | background-color: #CD2834; 16 | font-family: monospace; 17 | font-weight: 700; 18 | font-size: 3em; 19 | display: block; 20 | padding: 4px; 21 | border-radius: 8px; 22 | box-shadow: 0px 9px 0px #B52231, 0px 9px 25px rgba(0,0,0,.7); 23 | margin: 100px auto; 24 | width: 410px; 25 | text-align: center; 26 | transition: all .1s ease; 27 | } 28 | 29 | a:active { 30 | box-shadow: 0px 3px 0px rgba(219,31,5,1), 0px 3px 6px rgba(0,0,0,.9); 31 | position: relative; 32 | top: 6px; 33 | } 34 | `], 35 | providers: [ BatteryLevelService ] 36 | }) 37 | export class BatteryLevelComponent implements OnInit { 38 | 39 | batteryLevel: string = '--'; 40 | device: any = {}; 41 | 42 | constructor( 43 | public _zone: NgZone, 44 | public _batteryLevelService: BatteryLevelService 45 | ) {} 46 | 47 | ngOnInit() { 48 | this.getDeviceStatus(); 49 | this.streamValues(); 50 | } 51 | 52 | streamValues() { 53 | this._batteryLevelService.streamValues().subscribe(this.showBatteryLevel.bind(this)); 54 | } 55 | 56 | getDeviceStatus() { 57 | this._batteryLevelService.getDevice().subscribe( 58 | (device) => { 59 | 60 | if(device) { 61 | this.device = device; 62 | } 63 | else { 64 | // device not connected or disconnected 65 | this.device = null; 66 | this.batteryLevel = '--'; 67 | } 68 | } 69 | ); 70 | } 71 | 72 | getFakeValue() { 73 | this._batteryLevelService.getFakeValue(); 74 | } 75 | 76 | getBatteryLevel() { 77 | return this._batteryLevelService.getBatteryLevel().subscribe(this.showBatteryLevel.bind(this)); 78 | } 79 | 80 | showBatteryLevel(value: number) { 81 | 82 | // force change detection 83 | this._zone.run( () => { 84 | console.log('Reading battery level %d', value); 85 | this.batteryLevel = ''+value; 86 | }); 87 | } 88 | 89 | } 90 | -------------------------------------------------------------------------------- /src/assets/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manekinekko/angular-web-bluetooth-starter/2611a0593c931d4062070a9058b197669dede7f9/src/assets/.gitkeep -------------------------------------------------------------------------------- /src/environments/environment.prod.ts: -------------------------------------------------------------------------------- 1 | export const environment = { 2 | production: true 3 | }; 4 | -------------------------------------------------------------------------------- /src/environments/environment.ts: -------------------------------------------------------------------------------- 1 | // The file contents for the current environment will overwrite these during build. 2 | // The build system defaults to the dev environment which uses `environment.ts`, but if you do 3 | // `ng build --env=prod` then `environment.prod.ts` will be used instead. 4 | // The list of which env maps to which file can be found in `.angular-cli.json`. 5 | 6 | export const environment = { 7 | production: false 8 | }; 9 | -------------------------------------------------------------------------------- /src/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/manekinekko/angular-web-bluetooth-starter/2611a0593c931d4062070a9058b197669dede7f9/src/favicon.ico -------------------------------------------------------------------------------- /src/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Angular Web Bluetooth Starter 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | Loading... 15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /src/main.ts: -------------------------------------------------------------------------------- 1 | import { enableProdMode } from '@angular/core'; 2 | import { platformBrowserDynamic } from '@angular/platform-browser-dynamic'; 3 | 4 | import { AppModule } from './app/app.module'; 5 | import { environment } from './environments/environment'; 6 | 7 | if (environment.production) { 8 | enableProdMode(); 9 | } 10 | 11 | platformBrowserDynamic().bootstrapModule(AppModule) 12 | .catch(err => console.log(err)); 13 | -------------------------------------------------------------------------------- /src/polyfills.ts: -------------------------------------------------------------------------------- 1 | /** 2 | * This file includes polyfills needed by Angular and is loaded before the app. 3 | * You can add your own extra polyfills to this file. 4 | * 5 | * This file is divided into 2 sections: 6 | * 1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers. 7 | * 2. Application imports. Files imported after ZoneJS that should be loaded before your main 8 | * file. 9 | * 10 | * The current setup is for so-called "evergreen" browsers; the last versions of browsers that 11 | * automatically update themselves. This includes Safari >= 10, Chrome >= 55 (including Opera), 12 | * Edge >= 13 on the desktop, and iOS 10 and Chrome on mobile. 13 | * 14 | * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html 15 | */ 16 | 17 | /*************************************************************************************************** 18 | * BROWSER POLYFILLS 19 | */ 20 | 21 | /** IE9, IE10 and IE11 requires all of the following polyfills. **/ 22 | // import 'core-js/es6/symbol'; 23 | // import 'core-js/es6/object'; 24 | // import 'core-js/es6/function'; 25 | // import 'core-js/es6/parse-int'; 26 | // import 'core-js/es6/parse-float'; 27 | // import 'core-js/es6/number'; 28 | // import 'core-js/es6/math'; 29 | // import 'core-js/es6/string'; 30 | // import 'core-js/es6/date'; 31 | // import 'core-js/es6/array'; 32 | // import 'core-js/es6/regexp'; 33 | // import 'core-js/es6/map'; 34 | // import 'core-js/es6/weak-map'; 35 | // import 'core-js/es6/set'; 36 | 37 | /** IE10 and IE11 requires the following for NgClass support on SVG elements */ 38 | // import 'classlist.js'; // Run `npm install --save classlist.js`. 39 | 40 | /** IE10 and IE11 requires the following for the Reflect API. */ 41 | // import 'core-js/es6/reflect'; 42 | 43 | 44 | /** Evergreen browsers require these. **/ 45 | // Used for reflect-metadata in JIT. If you use AOT (and only Angular decorators), you can remove. 46 | import 'core-js/es7/reflect'; 47 | 48 | 49 | /** 50 | * Required to support Web Animations `@angular/platform-browser/animations`. 51 | * Needed for: All but Chrome, Firefox and Opera. http://caniuse.com/#feat=web-animation 52 | **/ 53 | // import 'web-animations-js'; // Run `npm install --save web-animations-js`. 54 | 55 | 56 | 57 | /*************************************************************************************************** 58 | * Zone JS is required by default for Angular itself. 59 | */ 60 | import 'zone.js/dist/zone'; // Included with Angular CLI. 61 | 62 | 63 | 64 | /*************************************************************************************************** 65 | * APPLICATION IMPORTS 66 | */ 67 | -------------------------------------------------------------------------------- /src/styles.css: -------------------------------------------------------------------------------- 1 | /* You can add global styles to this file, and also import other style files */ 2 | -------------------------------------------------------------------------------- /src/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.json", 3 | "compilerOptions": { 4 | "outDir": "../out-tsc/app", 5 | "baseUrl": "./", 6 | "module": "es2015", 7 | "types": [] 8 | }, 9 | "exclude": [ 10 | "test.ts", 11 | "**/*.spec.ts" 12 | ] 13 | } 14 | -------------------------------------------------------------------------------- /src/typings.d.ts: -------------------------------------------------------------------------------- 1 | /* SystemJS module definition */ 2 | declare var module: NodeModule; 3 | interface NodeModule { 4 | id: string; 5 | } 6 | -------------------------------------------------------------------------------- /tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "outDir": "./dist/out-tsc", 5 | "sourceMap": true, 6 | "declaration": false, 7 | "moduleResolution": "node", 8 | "emitDecoratorMetadata": true, 9 | "experimentalDecorators": true, 10 | "target": "es5", 11 | "typeRoots": [ 12 | "node_modules/@types" 13 | ], 14 | "lib": [ 15 | "es2017", 16 | "dom" 17 | ] 18 | } 19 | } 20 | --------------------------------------------------------------------------------