From 6b72aefb95a746062fdfb929ac49b8d0d44f392a Mon Sep 17 00:00:00 2001 From: ztimson Date: Thu, 11 Jul 2019 14:25:17 -0400 Subject: [PATCH] Fixed orientation calibration --- src/app/app.module.ts | 9 ++--- src/app/map/calibrate/calibrate.component.ts | 31 ++++++++++++++++ src/app/map/calibrate/calibtrate.component.ts | 35 ------------------- src/app/map/map.component.html | 6 ++-- src/app/map/map.component.ts | 15 +++----- src/app/physics/physics.service.ts | 19 +++++----- 6 files changed, 52 insertions(+), 63 deletions(-) create mode 100644 src/app/map/calibrate/calibrate.component.ts delete mode 100644 src/app/map/calibrate/calibtrate.component.ts diff --git a/src/app/app.module.ts b/src/app/app.module.ts index 7524f75..1762927 100644 --- a/src/app/app.module.ts +++ b/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 { diff --git a/src/app/map/calibrate/calibrate.component.ts b/src/app/map/calibrate/calibrate.component.ts new file mode 100644 index 0000000..013d604 --- /dev/null +++ b/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; + } + } +} diff --git a/src/app/map/calibrate/calibtrate.component.ts b/src/app/map/calibrate/calibtrate.component.ts deleted file mode 100644 index 355d6c2..0000000 --- a/src/app/map/calibrate/calibtrate.component.ts +++ /dev/null @@ -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; - 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; - } -} diff --git a/src/app/map/map.component.html b/src/app/map/map.component.html index 11e3ce3..f423883 100644 --- a/src/app/map/map.component.html +++ b/src/app/map/map.component.html @@ -8,7 +8,7 @@ - + @@ -22,8 +22,8 @@ - - + + diff --git a/src/app/map/map.component.ts b/src/app/map/map.component.ts index 215037f..93d2f8f 100644 --- a/src/app/map/map.component.ts +++ b/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 {Subject} from "rxjs"; +import {CalibrateComponent} from "./calibrate/calibrate.component"; 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(); - liveCalibration.subscribe(calibration => this.physicsService.calibrate = calibration); - this.bottomSheet.open(CalibtrateComponent, { + this.bottomSheet.open(CalibrateComponent, { hasBackdrop: false, - disableClose: true, - data: { - in: this.physicsService.info.pipe(map(coords => coords.heading)), - out: liveCalibration - } + disableClose: true }); } diff --git a/src/app/physics/physics.service.ts b/src/app/physics/physics.service.ts index 0a0c308..407fb51 100644 --- a/src/app/physics/physics.service.ts +++ b/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(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(); - this.calibrate = 0; - info.heading = data[1].alpha + this.calibrate; - if(this.calibrate > 360) this.calibrate -= 360; - if(this.calibrate < 0) this.calibrate += 360 + if(!data[1].absolute && this.calibrate.value == null) { + this.requireCalibration.emit(); + this.calibrate.next(0); + } + + 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[2]) info.speed = Math.sqrt(data[2].x**2 + data[2].y**2 + data[2].z**2); + 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); })