ckaczor/HomeMonitor
1
0
Fork 0
mirror of https://github.com/ckaczor/HomeMonitor.git synced 2026-01-14 01:25:38 -05:00
Code Issues Packages Projects Releases Wiki Activity

Move pressure trend into current display

Browse Source
This commit is contained in:
Chris Kaczor
2019-10-08 19:15:20 -04:00
parent 166576ab4d
commit c989a20f22
10 changed files with 81 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -21,7 +21,6 @@ import { LaundryComponent } from './components/laundry/laundry.component';
import { DashboardComponent } from './components/dashboard/dashboard.component';
import { WeatherChartsComponent } from './components/weather/charts/weather-charts.component';
import { WeatherCurrentComponent } from './components/weather/current/weather-current.component';
import { PressureTrendComponent } from './components/weather/pressure-trend/pressure-trend.component';
import { AlmanacComponent } from './components/weather/almanac/almanac.component';
const config: SocketIoConfig = { url: '/', options: {} };
@@ -34,7 +33,6 @@ const config: SocketIoConfig = { url: '/', options: {} };
DashboardComponent,
WeatherChartsComponent,
WeatherCurrentComponent,
PressureTrendComponent,
AlmanacComponent
],
imports: [

10
Display/src/app/components/dashboard/dashboard.component.html
View File

@@ -31,16 +31,6 @@
</div>
</gridster-item>
<gridster-item [item]="dashboardLayout.layout[2]">
<div class="dashboard-item">
<div class="dashboard-item-header">
Pressure Trend
</div>
<div class="dashboard-item-content">
<app-pressure-trend></app-pressure-trend>
</div>
</div>
</gridster-item>
<gridster-item [item]="dashboardLayout.layout[3]">
<div class="dashboard-item">
<div class="dashboard-item-header">
Almanac

5
Display/src/app/components/dashboard/dashboard.component.ts
View File

@@ -13,12 +13,11 @@ export class DashboardComponent implements OnInit {
public locked = true;
private defaultLayout: DashboardLayout = {
version: 2,
version: 3,
layout: [
{ cols: 3, rows: 2, y: 0, x: 0 },
{ cols: 2, rows: 2, y: 0, x: 3 },
{ cols: 2, rows: 2, y: 0, x: 5 },
{ cols: 3, rows: 2, y: 0, x: 7 }
{ cols: 3, rows: 2, y: 0, x: 5 }
]
};

2
Display/src/app/components/weather/current/weather-current.component.html
View File

@@ -27,6 +27,8 @@
</td>
<td>
{{ (latestReading.Pressure / 33.864 / 100).toFixed(2) }}"
<span *ngIf="pressureDifference !== null" class="pressure-trend-arrow" [ngClass]="rotationClass()">➜</span>
</td>
</tr>
<tr>

23
Display/src/app/components/weather/current/weather-current.component.scss
View File

@@ -8,3 +8,26 @@
text-align: right;
padding-right: 10px;
}
.pressure-trend-arrow {
display: inline-block;
position: relative;
left: 6px;
transform: scale(1.25);
}
.down-high {
transform: rotate(60deg) scale(1.25);
}
.down-low {
transform: rotate(25deg) scale(1.25);
}
.up-high {
transform: rotate(-60deg) scale(1.25);
}
.up-low {
transform: rotate(-25deg) scale(1.25);
}

57
Display/src/app/components/weather/current/weather-current.component.ts
View File

@@ -1,6 +1,11 @@
import { Component, OnInit } from '@angular/core';
import { WeatherReading } from '../../../models/weather/weather-reading';
import { WeatherService } from '../../../services/weather/weather.service';
import { WeatherReading } from 'src/app/models/weather/weather-reading';
import { WeatherService } from 'src/app/services/weather/weather.service';
import { WeatherValueType } from 'src/app/models/weather/weather-value-type';
import { WeatherValue } from 'src/app/models/weather/weather-value';
import * as moment from 'moment';
import * as regression from 'regression';
@Component({
selector: 'app-weather-current',
@@ -8,12 +13,58 @@ import { WeatherService } from '../../../services/weather/weather.service';
styleUrls: ['./weather-current.component.scss']
})
export class WeatherCurrentComponent implements OnInit {
public pressureDifference: number = null;
public latestReading: WeatherReading;
constructor(private weatherService: WeatherService) { }
ngOnInit() {
this.update();
setInterval(() => this.update(), 60000);
this.weatherService.getLatestReading().subscribe(r => this.latestReading = r);
}
async update() {
this.pressureDifference = null;
const end: moment.Moment = moment();
const start: moment.Moment = moment(end).subtract(3, 'hours');
const weatherData = await this.weatherService.getReadingValueHistory(WeatherValueType.Pressure, start, end);
if (!weatherData) {
return;
}
const points: [number, number][] = [];
weatherData.forEach((weatherValue: WeatherValue) => {
const point: [number, number] = [moment(weatherValue.timestamp).unix(), weatherValue.value / 100];
points.push(point);
});
const result = regression.linear(points, { precision: 10 });
const regressionPoints = result.points;
this.pressureDifference = regressionPoints[regressionPoints.length - 1][1] - regressionPoints[0][1];
}
rotationClass(): string {
if (!this.pressureDifference) {
return '';
} else if (Math.abs(this.pressureDifference) <= 1.0) {
return '';
} else if (this.pressureDifference > 1.0 && this.pressureDifference <= 2.0) {
return 'up-low';
} else if (this.pressureDifference > 2.0) {
return 'up-high';
} else if (this.pressureDifference < -1.0 && this.pressureDifference >= -2.0) {
return 'down-low';
} else if (this.pressureDifference < -2.0) {
return 'down-high';
}
}
}

6
Display/src/app/components/weather/pressure-trend/pressure-trend.component.html
View File

@@ -1,6 +0,0 @@
<div class="pressure-trend-container pressure-trend-loading" *ngIf="pressureDifference === null">
Loading...
</div>
<div class="pressure-trend-container" *ngIf="pressureDifference !== null">
<mat-icon id="pressure-arrow" [ngClass]="rotationClass()">arrow_right_alt</mat-icon>
</div>

31
Display/src/app/components/weather/pressure-trend/pressure-trend.component.scss
View File

@@ -1,31 +0,0 @@
.pressure-trend-container {
height: calc(100% - 20px);
}
.pressure-trend-loading {
font-size: 14px;
padding: 10px;
}
#pressure-arrow {
position: relative;
top: 50%;
left: 50%;
transform: translate(-50%, -50%) scale(3);
}
.down-high {
transform: translate(-50%, -50%) scale(3) rotate(60deg) !important;
}
.down-low {
transform: translate(-50%, -50%) scale(3) rotate(25deg) !important;
}
.up-high {
transform: translate(-50%, -50%) scale(3) rotate(-60deg) !important;
}
.up-low {
transform: translate(-50%, -50%) scale(3) rotate(-25deg) !important;
}

25
Display/src/app/components/weather/pressure-trend/pressure-trend.component.spec.ts
View File

@@ -1,25 +0,0 @@
import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { PressureTrendComponent } from './pressure-trend.component';
describe('PressureTrendComponent', () => {
let component: PressureTrendComponent;
let fixture: ComponentFixture<PressureTrendComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [PressureTrendComponent]
})
.compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(PressureTrendComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});

66
Display/src/app/components/weather/pressure-trend/pressure-trend.component.ts
View File

@@ -1,66 +0,0 @@
import { Component, OnInit } from '@angular/core';
import { WeatherService } from 'src/app/services/weather/weather.service';
import { WeatherValueType } from 'src/app/models/weather/weather-value-type';
import { WeatherValue } from 'src/app/models/weather/weather-value';
import * as moment from 'moment';
import * as regression from 'regression';
@Component({
selector: 'app-pressure-trend',
templateUrl: './pressure-trend.component.html',
styleUrls: ['./pressure-trend.component.scss']
})
export class PressureTrendComponent implements OnInit {
public pressureDifference: number = null;
constructor(private weatherService: WeatherService) { }
ngOnInit() {
this.update();
setInterval(() => this.update(), 60000);
}
async update() {
this.pressureDifference = null;
const end: moment.Moment = moment();
const start: moment.Moment = moment(end).subtract(3, 'hours');
const weatherData = await this.weatherService.getReadingValueHistory(WeatherValueType.Pressure, start, end);
if (!weatherData) {
return;
}
const points: [number, number][] = [];
weatherData.forEach((weatherValue: WeatherValue) => {
const point: [number, number] = [moment(weatherValue.timestamp).unix(), weatherValue.value / 100];
points.push(point);
});
const result = regression.linear(points, { precision: 10 });
const regressionPoints = result.points;
this.pressureDifference = regressionPoints[regressionPoints.length - 1][1] - regressionPoints[0][1];
}
rotationClass(): string {
if (!this.pressureDifference) {
return '';
} else if (Math.abs(this.pressureDifference) <= 1.0) {
return '';
} else if (this.pressureDifference > 1.0 && this.pressureDifference <= 2.0) {
return 'up-low';
} else if (this.pressureDifference > 2.0) {
return 'up-high';
} else if (this.pressureDifference < -1.0 && this.pressureDifference >= -2.0) {
return 'down-low';
} else if (this.pressureDifference < -2.0) {
return 'down-high';
}
}
}