Added compass calibration

src/app/app.module.ts

@@ -11,12 +11,15 @@ import {MapComponent} from "./map/map.component";
 import {HomeComponent} from "./home/home.component";
 import {AgmCoreModule} from "@agm/core";
 import {MaterialModule} from "./material.module";
+import {CalibtrateComponent} from "./map/calibrate/calibtrate.component";
+import {MatInputModule} from "@angular/material";
 
 
 
 @NgModule({
     declarations: [
         AppComponent,
+        CalibtrateComponent,
         HomeComponent,
         MapComponent
     ],
@@ -28,8 +31,10 @@ import {MaterialModule} from "./material.module";
         FormsModule,
         MaterialModule,
         ServiceWorkerModule.register('ngsw-worker.js', {enabled: environment.production}),
+        MatInputModule,
     ],
     providers: [],
+    entryComponents: [CalibtrateComponent],
     bootstrap: [AppComponent]
 })
 export class AppModule {

src/app/map/calibrate/calibrate.component.html

@@ -0,0 +1,16 @@
+<div>
+    <div>
+        <mat-form-field appearance="fill">
+            <mat-label>Calibrate</mat-label>
+            <input matInput type="number" min="-180" max="180" [(ngModel)]="calibration">
+        </mat-form-field>
+    </div>
+    <div>
+        <mat-slider class="w-100" [max]="180" [min]="-180" [step]="1" [tickInterval]="90" [thumbLabel]="true" [(ngModel)]="calibration" (input)="calibration = $event.value"></mat-slider>
+    </div>
+    <mat-divider class="mb-1"></mat-divider>
+    <div>
+        <button mat-button class="float-left" (click)="setN()">Set N</button>
+        <button mat-button class="float-right" (click)="close()">Close</button>
+    </div>
+</div>

src/app/map/calibrate/calibtrate.component.ts

@@ -0,0 +1,35 @@
+import {Component, Inject} from "@angular/core";
+import {Subject} from "rxjs";
+import {MAT_BOTTOM_SHEET_DATA, MatBottomSheetRef} from "@angular/material";
+
+@Component({
+    selector: 'calibrate',
+    templateUrl: 'calibrate.component.html'
+})
+export class CalibtrateComponent {
+    private _calibration = 0;
+    get calibration() { return this._calibration; }
+    set calibration(c: number) {
+        this._calibration = c;
+        this.out.next(c);
+    }
+
+    out: Subject<number>;
+    heading: number;
+
+    constructor(private bottomSheetRef: MatBottomSheetRef, @Inject(MAT_BOTTOM_SHEET_DATA) pipe) {
+        this.out = pipe.out;
+        pipe.in.subscribe(heading => this.heading = heading);
+    }
+
+    log = (e) => console.log(e);
+
+    close() {
+        this.bottomSheetRef.dismiss();
+    }
+
+    setN() {
+        let c = this.heading;
+        this.calibration = -c;
+    }
+}

src/app/map/map.component.html

@@ -8,6 +8,7 @@
         <button mat-icon-button (click)="draw()" [ngClass]="{'selected': !!drawListener}"><mat-icon>create</mat-icon></button>
         <button mat-icon-button><mat-icon>straighten</mat-icon></button>
         <button mat-icon-button (click)="remove = !remove" [ngClass]="{'selected': remove}"><mat-icon>delete</mat-icon></button>
+        <button *ngIf="physicsService.calibrate != null" mat-icon-button (click)="calibrate()"><mat-icon>explore</mat-icon></button>
         <button mat-icon-button [matMenuTriggerFor]="styleMenu"><mat-icon>layers</mat-icon></button>
         <mat-menu #styleMenu="matMenu">
             <button mat-menu-item (click)="style = 'satellite'" [ngClass]="{'selected': style == 'satellite'}">Satellite</button>

src/app/map/map.component.ts

@@ -1,8 +1,10 @@
 import {Component} from "@angular/core";
 import {PhysicsService} from "../physics/physics.service";
-import {filter} from "rxjs/operators";
-import {version} from "../../../package.json";
+import {filter, map} from "rxjs/operators";
 import {BreakpointObserver, Breakpoints} from "@angular/cdk/layout";
+import {MatBottomSheet, MatSnackBar} from "@angular/material";
+import {CalibtrateComponent} from "./calibrate/calibtrate.component";
+import {Subject} from "rxjs";
 
 declare const google;
 
@@ -20,23 +22,42 @@ export class MapComponent {
     position: any;
     remove = false;
     style: 'satellite' | 'terrain' | 'roadmap' | 'hybrid' = 'terrain';
-    version = version;
 
-    constructor(bpObserver: BreakpointObserver, physicsService: PhysicsService) {
+    constructor(private bpObserver: BreakpointObserver, public physicsService: PhysicsService, private snackBar: MatSnackBar, private bottomSheet: MatBottomSheet) {
         bpObserver.observe([Breakpoints.Handset]).subscribe(results => this.mobile = results.matches);
         physicsService.info.pipe(filter(coord => !!coord)).subscribe(pos => {
             if(this.mapApi) {
-                console.log(pos);
                 if(!this.position) this.center(pos);
                 this.position = pos;
             }
         });
+
+        physicsService.requireCalibration.subscribe(() => {
+            snackBar.open('Compass requires calibration', 'calibrate', {
+                duration: 5000,
+                panelClass: 'bg-warning,text-white'
+            }).onAction().subscribe(() => this.calibrate());
+        })
+
+        physicsService.requireCalibration.emit();
     }
 
     mapReady(map) {
         this.mapApi = map;
     }
 
+    calibrate() {
+        let liveCalibration = new Subject<number>();
+        liveCalibration.subscribe(calibration => this.physicsService.calibrate = calibration);
+        this.bottomSheet.open(CalibtrateComponent, {
+            hasBackdrop: false,
+            data: {
+                in: this.physicsService.info.pipe(map(coords => coords.heading)),
+                out: liveCalibration
+            }
+        });
+    }
+
     center(pos?) {
         if(!pos) pos = this.position;
         this.mapApi.setCenter({lat: pos.latitude, lng: pos.longitude});

src/app/material.module.ts

@@ -1,7 +1,7 @@
 import {
     MatBottomSheetModule,
-    MatButtonModule,
-    MatIconModule, MatMenuModule,
+    MatButtonModule, MatDividerModule, MatFormFieldModule,
+    MatIconModule, MatInputModule, MatMenuModule, MatSliderModule,
     MatSnackBarModule,
     MatToolbarModule
 } from "@angular/material";
@@ -10,8 +10,12 @@ import {NgModule} from "@angular/core";
 export const materialModules = [
     MatBottomSheetModule,
     MatButtonModule,
+    MatDividerModule,
+    MatFormFieldModule,
     MatIconModule,
+    MatInputModule,
     MatMenuModule,
+    MatSliderModule,
     MatSnackBarModule,
     MatToolbarModule,
 ];