gps fix(?)

src/app/components/calibrate/calibrate.component.html

@@ -1,4 +1,9 @@
 <div>
+    <mat-button-toggle-group class="mb-2" (change)="physicsService.mode = $event.value">
+        <mat-button-toggle value="gps" [checked]="physicsService.mode == 'gps'">GPS</mat-button-toggle>
+        <mat-button-toggle value="orientation" [checked]="physicsService.mode == 'orientation'">Compass</mat-button-toggle>
+    </mat-button-toggle-group>
+    <div *ngIf="physicsService.mode == 'orientation'" [@expand] [@collapse]>
         <div class="row mt-2">
             <div class="col-5 pr-0">
                 <mat-form-field appearance="fill" class="w-100">
@@ -17,9 +22,10 @@
         <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>
+    </div>
     <mat-divider class="mb-1"></mat-divider>
     <div>
-        <button mat-button class="float-left" (click)="setN()">Set 0°</button>
+        <button mat-button *ngIf="physicsService.mode == 'orientation'" class="float-left" (click)="setN()">Set 0°</button>
         <button mat-button class="float-right" (click)="close()">Close</button>
     </div>
 </div>

src/app/components/calibrate/calibrate.component.ts

@@ -1,10 +1,12 @@
 import {Component} from "@angular/core";
 import {MatBottomSheetRef} from "@angular/material";
 import {PhysicsService} from "../../services/physics.service";
+import {collapse, expand} from "../../animations";
 
 @Component({
     selector: 'calibrate',
-    templateUrl: 'calibrate.component.html'
+    templateUrl: 'calibrate.component.html',
+    animations: [collapse, expand]
 })
 export class CalibrateComponent {
     private _calibration = 0;
@@ -14,6 +16,8 @@ export class CalibrateComponent {
         this.physicsService.calibrate.next(c);
     }
 
+    log = e => console.log(e);
+
     constructor(private bottomSheetRef: MatBottomSheetRef, public physicsService: PhysicsService) {
         this._calibration = this.physicsService.calibrate.value;
     }

src/app/material.module.ts

@@ -8,10 +8,12 @@ import {
 import {NgModule} from "@angular/core";
 import {MatTooltipModule} from "@angular/material/tooltip";
 import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
+import {MatButtonToggleModule} from "@angular/material/button-toggle";
 
 export const materialModules = [
     MatBottomSheetModule,
     MatButtonModule,
+    MatButtonToggleModule,
     MatDialogModule,
     MatDividerModule,
     MatFormFieldModule,

src/app/services/physics.service.ts

@@ -1,12 +1,19 @@
 import {EventEmitter, Injectable} from '@angular/core';
 import {BehaviorSubject, combineLatest} from "rxjs";
 import {PermissionsService} from "../components/permissions/permissions.service";
-import {debounceTime} from "rxjs/operators";
 
 @Injectable({
     providedIn: 'root'
 })
 export class PhysicsService {
+    private _mode: string;
+    get mode() { return this._mode; }
+    set mode(mode: string) {
+        this._mode = mode;
+        localStorage.setItem('headingMode', mode);
+        this.calibrate.next(this.calibrate.value);
+    }
+
     requireCalibration = new EventEmitter();
     calibrate = new BehaviorSubject<number>(Infinity);
 
@@ -16,23 +23,16 @@ export class PhysicsService {
     position = new BehaviorSubject<Position>(null);
 
     constructor(permissionsService: PermissionsService) {
-
+        this.mode = localStorage.getItem('headingMode');
         permissionsService.requestPermission('geolocation', 'gps_fixed', 'Can we use your location?').then(granted => {
             if(granted) {
                 // Gather physical data
                 window.addEventListener('devicemotion', motion => this.motion.next(motion));
-                window.addEventListener('deviceorientation', orientation => {
+                window.addEventListener('deviceorientation', orientation => this.orientation.next(orientation));
-                    console.log('Orientation:', orientation);
+                navigator.geolocation.watchPosition(position => this.position.next(position));
-                    this.orientation.next(orientation);
-                });
-                navigator.geolocation.watchPosition(position => {
-                    console.log('GPS:', position);
-                    this.position.next(position);
-                });
 
                 // Combine data into one nice package
-                combineLatest(this.position.pipe(debounceTime(100)), this.orientation.pipe(debounceTime(100)), this.calibrate).subscribe(data => {
+                combineLatest(this.position, this.orientation, this.calibrate).subscribe(data => {
-                    console.log('Combine:', data);
                     if(!data[0]) return;
 
                     let info = {
@@ -45,7 +45,8 @@ export class PhysicsService {
                         speed: data[0].coords.speed
                     };
 
-                    if(info.heading == null && data[1]) {
+                    if(this.mode == null) this.mode = info.heading ? 'gps' : 'orientation';
+                    if(this.mode == 'orientation' && data[1]) {
                         if(!data[1].absolute && data[2] == Infinity) {
                             this.calibrate.next(0);
                             this.requireCalibration.emit();
@@ -57,7 +58,6 @@ export class PhysicsService {
                     }
 
                     this.info.next(info);
-                    console.log('Out:', info);
                 })
             }
         });

src/app/views/map/map.component.ts

@@ -25,7 +25,6 @@ import {Nouns} from "../../nounes";
 export class MapComponent implements OnDestroy, OnInit {
     code: string;
     drawColor = '#ff4141';
-    isNaN = isNaN;
     map: MapService;
     name: string;
     polygon: any;
@@ -114,15 +113,14 @@ export class MapComponent implements OnDestroy, OnInit {
         });
 
         // Display location information & submit it
-        this.physicsService.position.pipe(filter(coord => !!coord)).subscribe(pos => {
+        this.physicsService.info.pipe(filter(coord => !!coord)).subscribe(pos => {
-            console.log('painting', pos);
+            if (!this.position) this.center({lat: pos.latitude, lng: pos.longitude});
-            if (!this.position) this.center({lat: pos.coords.latitude, lng: pos.coords.longitude});
             if (this.positionMarker.arrow) this.map.delete(this.positionMarker.arrow);
             if (this.positionMarker.circle) this.map.delete(this.positionMarker.circle);
-            this.positionMarker.arrow = this.map.newMarker({latlng: {lat: pos.coords.latitude, lng: pos.coords.longitude}, noSelect: true, noDelete: true, noDeleteTool: true, icon: 'arrow', rotationAngle: pos.coords.heading, rotationOrigin: 'center'});
+            this.positionMarker.arrow = this.map.newMarker({latlng: {lat: pos.latitude, lng: pos.longitude}, noSelect: true, noDelete: true, noDeleteTool: true, icon: 'arrow', rotationAngle: pos.heading, rotationOrigin: 'center'});
-            this.positionMarker.circle = this.map.newCircle({latlng: {lat: pos.coords.latitude, lng: pos.coords.longitude}, color: '#2873d8', noSelect: true, noDelete: true, noDeleteTool: true, radius: pos.coords.accuracy, interactive: false});
+            this.positionMarker.circle = this.map.newCircle({latlng: {lat: pos.latitude, lng: pos.longitude}, color: '#2873d8', noSelect: true, noDelete: true, noDeleteTool: true, radius: pos.accuracy, interactive: false});
-            let ignore = this.syncService.addMyLocation({latlng: {lat: pos.coords.latitude, lng: pos.coords.longitude}, label: this.name, noDeleteTool: true});
+            let ignore = this.syncService.addMyLocation({latlng: {lat: pos.latitude, lng: pos.longitude}, label: this.name, noDeleteTool: true});
-            this.position = pos.coords;
+            this.position = pos;
         });
 
         // Request calibration if needed