diff --git a/src/app/components/calibrate/calibrate.component.html b/src/app/components/calibrate/calibrate.component.html index feaf66a..eaef758 100644 --- a/src/app/components/calibrate/calibrate.component.html +++ b/src/app/components/calibrate/calibrate.component.html @@ -1,25 +1,31 @@
-
-
- - Shift +/- - - + + GPS + Compass + +
+
+
+ + Shift +/- + + +
+

=

+
+ + Heading + + +
-

=

-
- - Heading - - +
+
-
- -
- +
diff --git a/src/app/components/calibrate/calibrate.component.ts b/src/app/components/calibrate/calibrate.component.ts index 7153455..2e4a7d5 100644 --- a/src/app/components/calibrate/calibrate.component.ts +++ b/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; } diff --git a/src/app/material.module.ts b/src/app/material.module.ts index e75fb0c..2925315 100644 --- a/src/app/material.module.ts +++ b/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, diff --git a/src/app/services/physics.service.ts b/src/app/services/physics.service.ts index 189d363..d4619e4 100644 --- a/src/app/services/physics.service.ts +++ b/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(Infinity); @@ -16,23 +23,16 @@ export class PhysicsService { position = new BehaviorSubject(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 => { - console.log('Orientation:', orientation); - this.orientation.next(orientation); - }); - navigator.geolocation.watchPosition(position => { - console.log('GPS:', position); - this.position.next(position); - }); + window.addEventListener('deviceorientation', orientation => this.orientation.next(orientation)); + navigator.geolocation.watchPosition(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 => { - console.log('Combine:', data); + combineLatest(this.position, this.orientation, this.calibrate).subscribe(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); }) } }); diff --git a/src/app/views/map/map.component.ts b/src/app/views/map/map.component.ts index 2c52323..14985e2 100644 --- a/src/app/views/map/map.component.ts +++ b/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 => { - console.log('painting', pos); - if (!this.position) this.center({lat: pos.coords.latitude, lng: pos.coords.longitude}); + this.physicsService.info.pipe(filter(coord => !!coord)).subscribe(pos => { + if (!this.position) this.center({lat: pos.latitude, lng: pos.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.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}); - let ignore = this.syncService.addMyLocation({latlng: {lat: pos.coords.latitude, lng: pos.coords.longitude}, label: this.name, noDeleteTool: true}); - this.position = pos.coords; + 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.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.latitude, lng: pos.longitude}, label: this.name, noDeleteTool: true}); + this.position = pos; }); // Request calibration if needed