Fixed orientation calibration

src/app/app.module.ts

@@ -1,6 +1,5 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
-
 import {AppRouting} from './app.routing';
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
@@ -11,15 +10,13 @@ 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 {CalibrateComponent} from "./map/calibrate/calibrate.component";
 import {MatInputModule} from "@angular/material";
 
-
-
 @NgModule({
     declarations: [
         AppComponent,
-        CalibtrateComponent,
+        CalibrateComponent,
         HomeComponent,
         MapComponent
     ],
@@ -34,7 +31,7 @@ import {MatInputModule} from "@angular/material";
         MatInputModule,
     ],
     providers: [],
-    entryComponents: [CalibtrateComponent],
+    entryComponents: [CalibrateComponent],
     bootstrap: [AppComponent]
 })
 export class AppModule {

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

@@ -0,0 +1,31 @@
+import {Component} from "@angular/core";
+import {MatBottomSheetRef} from "@angular/material";
+import {PhysicsService} from "../../physics/physics.service";
+
+@Component({
+    selector: 'calibrate',
+    templateUrl: 'calibrate.component.html'
+})
+export class CalibrateComponent {
+    private _calibration = 0;
+    get calibration() { return this._calibration; }
+    set calibration(c: number) {
+        this._calibration = c;
+        this.physicsService.calibrate.next(c);
+    }
+
+    constructor(private bottomSheetRef: MatBottomSheetRef, private physicsService: PhysicsService) { }
+
+    close() {
+        this.bottomSheetRef.dismiss();
+    }
+
+    setN() {
+        let currentHeading = this.physicsService.orientation.value.alpha;
+        if(currentHeading <= 180) {
+            this.calibration = -currentHeading;
+        } else {
+            this.calibration = 360 - currentHeading;
+        }
+    }
+}

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

@@ -1,35 +0,0 @@
-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,7 +8,7 @@
         <button mat-icon-button (click)="draw()" [ngClass]="{'selected': drawListener.length}"><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 *ngIf="physicsService.calibrate.value != 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>
@@ -22,8 +22,8 @@
 </mat-toolbar>
 <agm-map class="map" [mapTypeId]="style" [zoomControl]="false" [streetViewControl]="false" [disableDoubleClickZoom]="true" (mapReady)="mapReady($event)" gestureHandling="greedy" (mapClick)="clicked('single', $event)">
     <ng-container *ngIf="position">
-        <agm-marker *ngIf="!position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/images/dot.png', anchor: {x: 11, y: 10}}"></agm-marker>
+        <agm-marker *ngIf="position.heading == null" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/images/dot.png', anchor: {x: 11, y: 10}}"></agm-marker>
-        <agm-marker *ngIf="position.heading" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/images/arrow.png', anchor: {x: 11, y: 13}, rotation: 90}"></agm-marker>
+        <agm-marker *ngIf="position.heading != null" [markerClickable]="false" [latitude]="position.latitude" [longitude]="position.longitude" [iconUrl]="{url: '/assets/images/arrow.png', anchor: {x: 11, y: 13}, rotation: 90}"></agm-marker>
         <agm-circle [latitude]="position.latitude" [longitude]="position.longitude" [radius]="position.accuracy" fillColor="#5C95F2"></agm-circle>
     </ng-container>
     <agm-marker *ngFor="let m of markers" [latitude]="m.latitude" [longitude]="m.longitude"></agm-marker>

src/app/map/map.component.ts

@@ -3,8 +3,7 @@ import {PhysicsService} from "../physics/physics.service";
 import {debounceTime, 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 {CalibrateComponent} from "./calibrate/calibrate.component";
-import {Subject} from "rxjs";
 import {version} from "../../../package.json";
 
 declare const google;
@@ -32,7 +31,7 @@ export class MapComponent {
                 if(!this.position) this.center(pos);
                 this.position = pos;
 
-                if(this.position.heading) {
+                if(this.position.heading != null) {
                     let marker: HTMLElement = document.querySelector('img[src*="arrow.png"]');
                     if(marker) marker.style.transform = `rotate(${this.position.heading}deg)`
                 }
@@ -52,15 +51,9 @@ export class MapComponent {
     }
 
     calibrate() {
-        let liveCalibration = new Subject<number>();
+        this.bottomSheet.open(CalibrateComponent, {
-        liveCalibration.subscribe(calibration => this.physicsService.calibrate = calibration);
-        this.bottomSheet.open(CalibtrateComponent, {
             hasBackdrop: false,
-            disableClose: true,
+            disableClose: true
-            data: {
-                in: this.physicsService.info.pipe(map(coords => coords.heading)),
-                out: liveCalibration
-            }
         });
     }
 

src/app/physics/physics.service.ts

@@ -9,7 +9,7 @@ export class PhysicsService {
     private motionTimestamp;
 
     requireCalibration = new EventEmitter();
-    calibrate?: number;
+    calibrate = new BehaviorSubject(0);
 
     info = new BehaviorSubject(null);
     motion = new BehaviorSubject<DeviceMotionEvent>(null);
@@ -38,7 +38,7 @@ export class PhysicsService {
         });
 
         // Combine data into one nice package
-        combineLatest(this.position, this.orientation, this.speed).subscribe(data => {
+        combineLatest(this.position, this.orientation, this.calibrate, this.speed).subscribe(data => {
             if(!data[0]) return;
 
             let info = {
@@ -52,13 +52,16 @@ export class PhysicsService {
             };
 
             if(info.heading == null && !!data[1] && data[1].alpha) {
-                if(!data[1].absolute && this.calibrate == null) this.requireCalibration.emit();
+                if(!data[1].absolute && this.calibrate.value == null) {
-                this.calibrate = 0;
+                    this.requireCalibration.emit();
-                info.heading = data[1].alpha + this.calibrate;
+                    this.calibrate.next(0);
-                if(this.calibrate > 360) this.calibrate -= 360;
-                if(this.calibrate < 0) this.calibrate += 360
                 }
-            if(info.speed == null && !!data[2]) info.speed = Math.sqrt(data[2].x**2 + data[2].y**2 + data[2].z**2);
+
+                info.heading = data[1].alpha + this.calibrate.value;
+                if(info.heading > 360) info.heading -= 360;
+                if(info.heading < 0) info.heading += 360;
+            }
+            if(info.speed == null && !!data[3]) info.speed = Math.sqrt(data[3].x**2 + data[3].y**2 + data[3].z**2);
 
             this.info.next(info);
         })