From 641acf7c1283c3ecab6fd0c99d7bb2d0b35cdf17 Mon Sep 17 00:00:00 2001 From: Youen Toupin Date: Sat, 16 Apr 2022 22:37:05 +0200 Subject: [PATCH] added some numerical values in dashboard (wip) --- WebApp/src/components/widgets/gauge.css | 14 ----- WebApp/src/components/widgets/gauge.tsx | 8 +-- .../src/components/widgets/numeric-value.css | 13 +++++ .../src/components/widgets/numeric-value.tsx | 47 +++++++++++++++ WebApp/src/monitor-api.ts | 4 +- WebApp/src/pages/dashboard/dashboard-page.tsx | 58 ++++++++++++++++++- 6 files changed, 123 insertions(+), 21 deletions(-) create mode 100644 WebApp/src/components/widgets/numeric-value.css create mode 100644 WebApp/src/components/widgets/numeric-value.tsx diff --git a/WebApp/src/components/widgets/gauge.css b/WebApp/src/components/widgets/gauge.css index af76ed7..a695329 100644 --- a/WebApp/src/components/widgets/gauge.css +++ b/WebApp/src/components/widgets/gauge.css @@ -8,20 +8,6 @@ div.gauge svg { flex: 1; } -div.gauge span.integral-value { - font-size: 2.3rem; - font-family: monospace; -} - -div.gauge span.decimal-value { - font-size: 1.6rem; - font-family: monospace; -} - -div.gauge span.unit { - font-size: 1.6rem; -} - .gauge-bg { fill: rgb(255,255,255); stroke-width: 2; diff --git a/WebApp/src/components/widgets/gauge.tsx b/WebApp/src/components/widgets/gauge.tsx index ae48e1b..8e9da88 100644 --- a/WebApp/src/components/widgets/gauge.tsx +++ b/WebApp/src/components/widgets/gauge.tsx @@ -54,11 +54,11 @@ export class Gauge extends Widget { let value = Math.max(0.0, Math.min(this.gaugeMaxValue, this.gaugeValue.get())); - let integralValue = Math.floor(value); - let decimalValue = value - integralValue; + let valueStr = value.toFixed(this.decimals); + let parts = valueStr.split('.'); - this.integralValueElement.innerText = integralValue.toFixed(0); - this.decimalValueElement.innerText = this.decimals > 0 ? decimalValue.toFixed(this.decimals).substr(1) : ''; + this.integralValueElement.innerText = parts[0]; + this.decimalValueElement.innerText = this.decimals > 0 ? '.' + parts[1] : ''; let ratio = value / this.gaugeMaxValue; let numBars = this.bars.length; diff --git a/WebApp/src/components/widgets/numeric-value.css b/WebApp/src/components/widgets/numeric-value.css new file mode 100644 index 0000000..7a0809f --- /dev/null +++ b/WebApp/src/components/widgets/numeric-value.css @@ -0,0 +1,13 @@ +div.widget span.integral-value { + font-size: 2.3rem; + font-family: monospace; +} + +div.widget span.decimal-value { + font-size: 1.6rem; + font-family: monospace; +} + +div.widget span.unit { + font-size: 1.6rem; +} diff --git a/WebApp/src/components/widgets/numeric-value.tsx b/WebApp/src/components/widgets/numeric-value.tsx new file mode 100644 index 0000000..bd8a1c5 --- /dev/null +++ b/WebApp/src/components/widgets/numeric-value.tsx @@ -0,0 +1,47 @@ +import m from 'mithril'; +import { Widget } from 'components/widgets/widget'; +import { Pipe } from 'utilities/pipe'; + +require('./numeric-value.css'); + +export class NumericValue extends Widget { + private value: Pipe; + private unit: string; + private decimals: number; + + private integralValueElement: HTMLElement; + private decimalValueElement: HTMLElement; + + constructor(vnode: any) { + super(vnode); + + this.value = vnode.attrs.value || new Pipe(0.0); + this.unit = vnode.attrs.unit || ''; + this.decimals = vnode.attrs.decimals || 0; + + this.value.onChange(() => this.onValueChange()); + } + + view(vnode: m.Vnode<{}, {}>): m.Children { + return
+

{this.unit}

+
; + } + + onValueChange() { + let value = this.value.get(); + + let valueStr = value.toFixed(this.decimals); + let parts = valueStr.split('.'); + + this.integralValueElement.innerText = parts[0]; + this.decimalValueElement.innerText = this.decimals > 0 ? '.' + parts[1] : ''; + } + + oncreate(vnode: any) { + this.integralValueElement = vnode.dom.querySelector('span.integral-value'); + this.decimalValueElement = vnode.dom.querySelector('span.decimal-value'); + + this.onValueChange(); + } +} diff --git a/WebApp/src/monitor-api.ts b/WebApp/src/monitor-api.ts index 2a95695..1db7a6e 100644 --- a/WebApp/src/monitor-api.ts +++ b/WebApp/src/monitor-api.ts @@ -44,8 +44,8 @@ export class MonitorApi { v: (Math.cos(t*0.4)+1.0)*0.5 * 6000 + 36000, c: (Math.cos(t*0.7)+1.0)*0.5 * 30000, s: (Math.cos(t*0.3)+1.0)*0.5 * 14000, - t: Math.random() * 400 - 100, - alt: Math.random() * 4500000 - 200000 + t: (Math.cos(t*0.2)+1.0)*0.5 * 400 - 100, + alt: (Math.cos(t*0.0001)+1.0)*0.5 * 4500000 - 200000 + (Math.cos(t*0.03))*0.5 * 60000 }; } else { apiStatus = await new Promise((resolve, error) => { diff --git a/WebApp/src/pages/dashboard/dashboard-page.tsx b/WebApp/src/pages/dashboard/dashboard-page.tsx index 580fb66..29e3a82 100644 --- a/WebApp/src/pages/dashboard/dashboard-page.tsx +++ b/WebApp/src/pages/dashboard/dashboard-page.tsx @@ -4,6 +4,7 @@ import { MonitorApi, Status } from 'monitor-api'; import { Pipe } from 'utilities/pipe'; import { Clock } from 'components/widgets/clock'; +import { NumericValue } from 'components/widgets/numeric-value'; import { GaugeLinear } from 'components/widgets/gauge-linear'; import { GaugeCircular } from 'components/widgets/gauge-circular'; import { GaugeBattery } from 'components/widgets/gauge-battery'; @@ -18,6 +19,17 @@ export class DashboardPage extends Page { private battery = new Pipe(0.0); private speed = new Pipe(0.0); + private lastRefreshTime = 0.0; + private movementTime = 0.0; + private distance = new Pipe(0.0); + private averageSpeed = new Pipe(0.0); + private energy = new Pipe(0.0); + private averageConsumption = new Pipe(0.0); + private ascendingElevation = new Pipe(0.0); + private lastElevation = -100000; + private altitude = new Pipe(0.0); + private temperature = new Pipe(0.0); + oninit() { this.status = MonitorApi.get().getStatus(); this.refresh(); @@ -33,7 +45,8 @@ export class DashboardPage extends Page { m.redraw(); this.status = newStatus; - this.power.set(this.status.batteryVoltage * this.status.motorCurrent); + let power = this.status.batteryVoltage * this.status.motorCurrent; + this.power.set(power); const minVoltage = 36.0; const maxVoltage = 42.0; @@ -42,6 +55,31 @@ export class DashboardPage extends Page { this.speed.set(this.status.speed * 3.6); // convert m/s to km/h + let now = Date.now() / 1000; + if(this.lastRefreshTime == 0.0) this.lastRefreshTime = now; + let dt = now - this.lastRefreshTime; + this.lastRefreshTime = now; + + if(this.status.speed > 0.0) + this.movementTime += dt; + this.distance.set(this.distance.get() + this.status.speed * dt / 1000); + if(this.movementTime > 0.0) + this.averageSpeed.set(this.distance.get() / (this.movementTime / 3600)); + + if(this.lastElevation == -100000) + this.lastElevation = this.status.altitude; + let elevationChange = this.status.altitude - this.lastElevation; + this.lastElevation = this.status.altitude; + if(elevationChange > 0.0) + this.ascendingElevation.set(this.ascendingElevation.get() + elevationChange); + this.altitude.set(this.status.altitude); + + this.temperature.set(this.status.temperature); + + this.energy.set(this.energy.get() + power * dt / 3600); + if(this.distance.get() > 0.1) + this.averageConsumption.set(this.energy.get() / this.distance.get()); + if(this.autoRefresh) setTimeout(() => { if(this.autoRefresh) this.refresh(); }, 150); } @@ -52,11 +90,29 @@ export class DashboardPage extends Page {
+
+ +
+ +
+
+ + +
+
+ + +
+ +
+ + +
:

Chargement...

; }