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

gps fix(?)

Browse Source
This commit is contained in:
Zakary Timson 2019-09-02 21:08:05 -04:00
parent 4da96b3b45
commit 649e0021d6
5 changed files with 49 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/app/components/calibrate/calibrate.component.html
View File

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

6
src/app/components/calibrate/calibrate.component.ts
View File

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

2
src/app/material.module.ts
View File

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

28
src/app/services/physics.service.ts
View File

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

14
src/app/views/map/map.component.ts
View File

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