diff --git a/WebApp/src/components/widgets/gauge-linear.css b/WebApp/src/components/widgets/gauge-linear.css index 5ffe4e5..aab59b8 100644 --- a/WebApp/src/components/widgets/gauge-linear.css +++ b/WebApp/src/components/widgets/gauge-linear.css @@ -3,14 +3,13 @@ div.gauge-linear { flex-direction: column; } -div.gauge-linear p.value { +div.gauge-linear span.value { font-size: 2.3rem; font-family: monospace; } div.gauge-linear span.unit { font-size: 1.6rem; - font-family: initial; } rect.gauge-linear-bg { diff --git a/WebApp/src/components/widgets/gauge-linear.tsx b/WebApp/src/components/widgets/gauge-linear.tsx index 4ebb168..de4b608 100644 --- a/WebApp/src/components/widgets/gauge-linear.tsx +++ b/WebApp/src/components/widgets/gauge-linear.tsx @@ -1,18 +1,25 @@ import m from 'mithril'; import { Widget } from 'components/widgets/widget'; +import { Pipe } from 'utilities/pipe'; require('./gauge-linear.css'); export class GaugeLinear extends Widget { + private gaugeValue: Pipe; + private gaugeMaxValue: number; private bars: SVGRectElement[] = []; + private valueElement: HTMLElement; constructor(vnode: any) { super(vnode); + this.gaugeValue = vnode.attrs.gaugeValue || new Pipe(0.0); + this.gaugeMaxValue = vnode.attrs.gaugeMaxValue || 1.0; + this.gaugeValue.onChange(() => this.updateGauge()); } view(vnode: m.Vnode<{}, {}>): m.Children { return
-

643W

+

W

; @@ -53,10 +60,13 @@ export class GaugeLinear extends Widget { } } - renderGaugeRatio(ratio: number) { + updateGauge() { + let value = Math.max(0.0, Math.min(this.gaugeMaxValue, this.gaugeValue.get())); + this.valueElement.innerText = value.toFixed(0); + + let ratio = value / this.gaugeMaxValue; let numBars = this.bars.length; let litBars = Math.round(ratio * numBars); - console.log(litBars); for(let barIdx = 0; barIdx < numBars; ++barIdx) { let bar = this.bars[barIdx]; bar.classList.toggle('lit', barIdx < litBars); @@ -66,6 +76,9 @@ export class GaugeLinear extends Widget { oncreate(vnode: any) { let svgElement: SVGElement = vnode.dom.querySelector('svg'); this.createSvg(svgElement); - this.renderGaugeRatio(0.2); + + this.valueElement = vnode.dom.querySelector('span.value'); + + this.updateGauge(); } } diff --git a/WebApp/src/pages/dashboard/dashboard-page.tsx b/WebApp/src/pages/dashboard/dashboard-page.tsx index 662b516..d0bbb92 100644 --- a/WebApp/src/pages/dashboard/dashboard-page.tsx +++ b/WebApp/src/pages/dashboard/dashboard-page.tsx @@ -1,6 +1,7 @@ import m from 'mithril'; import { Page } from 'components/page'; import { MonitorApi, Status } from 'monitor-api'; +import { Pipe } from 'utilities/pipe'; import { Clock } from 'components/widgets/clock'; import { GaugeLinear } from 'components/widgets/gauge-linear'; @@ -11,6 +12,8 @@ export class DashboardPage extends Page { status: Status = null; autoRefresh = true; + private power = new Pipe(0.0); + oninit() { this.status = MonitorApi.get().getStatus(); this.refresh(); @@ -25,7 +28,9 @@ export class DashboardPage extends Page { if(this.status == null) m.redraw(); this.status = newStatus; - // todo: update widgets (avoiding to use m.redraw which is a bit costly on CPU) + + this.power.set(this.status.batteryVoltage * this.status.motorCurrent); + if(this.autoRefresh) setTimeout(() => { if(this.autoRefresh) this.refresh(); }, 500); } @@ -37,7 +42,7 @@ export class DashboardPage extends Page {
- +
:

Chargement...

; diff --git a/WebApp/src/utilities/pipe.ts b/WebApp/src/utilities/pipe.ts new file mode 100644 index 0000000..813e2dd --- /dev/null +++ b/WebApp/src/utilities/pipe.ts @@ -0,0 +1,21 @@ +export class Pipe +{ + private changeCallbacks: ((newValue: ValueType) => void)[] = []; + + constructor(private value: ValueType) { + } + + get() { return this.value; } + + set(value: ValueType) + { + this.value = value; + for(let callback of this.changeCallbacks) { + callback(value); + } + } + + onChange(callback: (newValue: ValueType) => void) { + this.changeCallbacks.push(callback); + } +}