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

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

@ -1,25 +1,31 @@
<div> <div>
<div class="row mt-2"> <mat-button-toggle-group class="mb-2" (change)="physicsService.mode = $event.value">
<div class="col-5 pr-0"> <mat-button-toggle value="gps" [checked]="physicsService.mode == 'gps'">GPS</mat-button-toggle>
<mat-form-field appearance="fill" class="w-100"> <mat-button-toggle value="orientation" [checked]="physicsService.mode == 'orientation'">Compass</mat-button-toggle>
<mat-label>Shift +/-</mat-label> </mat-button-toggle-group>
<input matInput type="number" min="-180" max="180" [(ngModel)]="calibration"> <div *ngIf="physicsService.mode == 'orientation'" [@expand] [@collapse]>
</mat-form-field> <div class="row mt-2">
<div class="col-5 pr-0">
<mat-form-field appearance="fill" class="w-100">
<mat-label>Shift +/-</mat-label>
<input matInput type="number" min="-180" max="180" [(ngModel)]="calibration">
</mat-form-field>
</div>
<div class="col-2 text-center"><h1> = </h1></div>
<div class="col-5 pl-0">
<mat-form-field appearance="fill" class="w-100">
<mat-label>Heading</mat-label>
<input matInput type="number" [value]="(physicsService.info | async)?.heading | number : '1.0-0'" readonly>
</mat-form-field>
</div>
</div> </div>
<div class="col-2 text-center"><h1> = </h1></div> <div>
<div class="col-5 pl-0"> <mat-slider class="w-100" [max]="180" [min]="-180" [step]="1" [tickInterval]="90" [thumbLabel]="true" [(ngModel)]="calibration" (input)="calibration = $event.value"></mat-slider>
<mat-form-field appearance="fill" class="w-100">
<mat-label>Heading</mat-label>
<input matInput type="number" [value]="(physicsService.info | async)?.heading | number : '1.0-0'" readonly>
</mat-form-field>
</div> </div>
</div> </div>
<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>
<mat-divider class="mb-1"></mat-divider> <mat-divider class="mb-1"></mat-divider>
<div> <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> <button mat-button class="float-right" (click)="close()">Close</button>
</div> </div>
</div> </div>

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

@ -1,10 +1,12 @@
import {Component} from "@angular/core"; import {Component} from "@angular/core";
import {MatBottomSheetRef} from "@angular/material"; import {MatBottomSheetRef} from "@angular/material";
import {PhysicsService} from "../../services/physics.service"; import {PhysicsService} from "../../services/physics.service";
import {collapse, expand} from "../../animations";
@Component({ @Component({
selector: 'calibrate', selector: 'calibrate',
templateUrl: 'calibrate.component.html' templateUrl: 'calibrate.component.html',
animations: [collapse, expand]
}) })
export class CalibrateComponent { export class CalibrateComponent {
private _calibration = 0; private _calibration = 0;
@ -14,6 +16,8 @@ export class CalibrateComponent {
this.physicsService.calibrate.next(c); this.physicsService.calibrate.next(c);
} }
log = e => console.log(e);
constructor(private bottomSheetRef: MatBottomSheetRef, public physicsService: PhysicsService) { constructor(private bottomSheetRef: MatBottomSheetRef, public physicsService: PhysicsService) {
this._calibration = this.physicsService.calibrate.value; 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 {NgModule} from "@angular/core";
import {MatTooltipModule} from "@angular/material/tooltip"; import {MatTooltipModule} from "@angular/material/tooltip";
import {MatProgressSpinnerModule} from "@angular/material/progress-spinner"; import {MatProgressSpinnerModule} from "@angular/material/progress-spinner";
import {MatButtonToggleModule} from "@angular/material/button-toggle";
export const materialModules = [ export const materialModules = [
MatBottomSheetModule, MatBottomSheetModule,
MatButtonModule, MatButtonModule,
MatButtonToggleModule,
MatDialogModule, MatDialogModule,
MatDividerModule, MatDividerModule,
MatFormFieldModule, MatFormFieldModule,

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

@ -1,12 +1,19 @@
import {EventEmitter, Injectable} from '@angular/core'; import {EventEmitter, Injectable} from '@angular/core';
import {BehaviorSubject, combineLatest} from "rxjs"; import {BehaviorSubject, combineLatest} from "rxjs";
import {PermissionsService} from "../components/permissions/permissions.service"; import {PermissionsService} from "../components/permissions/permissions.service";
import {debounceTime} from "rxjs/operators";
@Injectable({ @Injectable({
providedIn: 'root' providedIn: 'root'
}) })
export class PhysicsService { 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(); requireCalibration = new EventEmitter();
calibrate = new BehaviorSubject<number>(Infinity); calibrate = new BehaviorSubject<number>(Infinity);
@ -16,23 +23,16 @@ export class PhysicsService {
position = new BehaviorSubject<Position>(null); position = new BehaviorSubject<Position>(null);
constructor(permissionsService: PermissionsService) { constructor(permissionsService: PermissionsService) {
this.mode = localStorage.getItem('headingMode');
permissionsService.requestPermission('geolocation', 'gps_fixed', 'Can we use your location?').then(granted => { permissionsService.requestPermission('geolocation', 'gps_fixed', 'Can we use your location?').then(granted => {
if(granted) { if(granted) {
// Gather physical data // Gather physical data
window.addEventListener('devicemotion', motion => this.motion.next(motion)); 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 // 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; if(!data[0]) return;
let info = { let info = {
@ -45,7 +45,8 @@ export class PhysicsService {
speed: data[0].coords.speed 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) { if(!data[1].absolute && data[2] == Infinity) {
this.calibrate.next(0); this.calibrate.next(0);
this.requireCalibration.emit(); this.requireCalibration.emit();
@ -57,7 +58,6 @@ export class PhysicsService {
} }
this.info.next(info); 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 { export class MapComponent implements OnDestroy, OnInit {
code: string; code: string;
drawColor = '#ff4141'; drawColor = '#ff4141';
isNaN = isNaN;
map: MapService; map: MapService;
name: string; name: string;
polygon: any; polygon: any;
@ -114,15 +113,14 @@ export class MapComponent implements OnDestroy, OnInit {
}); });
// Display location information & submit it // 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.arrow) this.map.delete(this.positionMarker.arrow);
if (this.positionMarker.circle) this.map.delete(this.positionMarker.circle); 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 // Request calibration if needed