ztimson/map-alliance
ztimson/map-alliance
1
0
Fork 0
Code Issues Pull Requests Actions Packages Releases 1 Activity

Fixed orientation calibration

Browse Source
This commit is contained in:
ztimson 2019-07-11 14:25:17 -04:00
parent 75a8b93f98
commit 6b72aefb95
6 changed files with 52 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/app/app.module.ts
View File

@ -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 {

31
src/app/map/calibrate/calibrate.component.ts Normal file
View File

@ -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;
}
}
}

35
src/app/map/calibrate/calibtrate.component.ts
View File

@ -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;
}
}

6
src/app/map/map.component.html
View File

@ -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" [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/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/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>

15
src/app/map/map.component.ts
View File

@ -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<number>();
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
});
}

19
src/app/physics/physics.service.ts
View File

@ -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();
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);
})