diff --git a/WebApp/src/components/widgets/gauge.tsx b/WebApp/src/components/widgets/gauge.tsx index 8e9da88..b89b2e2 100644 --- a/WebApp/src/components/widgets/gauge.tsx +++ b/WebApp/src/components/widgets/gauge.tsx @@ -1,18 +1,11 @@ import m from 'mithril'; -import { Widget } from 'components/widgets/widget'; +import { NumericValue } from 'components/widgets/numeric-value'; import { Pipe } from 'utilities/pipe'; require('./gauge.css'); -export class Gauge extends Widget { - private gaugeValue: Pipe; - private gaugeMaxValue: number; - private unit: string; - private decimals: number; - +export class Gauge extends NumericValue { protected bars: SVGGeometryElement[] = []; - private integralValueElement: HTMLElement; - private decimalValueElement: HTMLElement; private displayedValue = 0.0; private targetValue = 0.0; @@ -27,13 +20,6 @@ export class Gauge extends Widget { constructor(vnode: any) { super(vnode); - - this.gaugeValue = vnode.attrs.gaugeValue || new Pipe(0.0); - this.gaugeMaxValue = vnode.attrs.gaugeMaxValue || 1.0; - this.unit = vnode.attrs.unit || ''; - this.decimals = vnode.attrs.decimals || 0; - - this.gaugeValue.onChange(() => this.updateGauge()); } onbeforeremove(vnode: m.Vnode<{}, {}>) { @@ -41,26 +27,15 @@ export class Gauge extends Widget { super.onbeforeremove(vnode); } - view(vnode: m.Vnode<{}, {}>): m.Children { - return
-

{this.unit}

- - -
; + + protected graphicalRepresentation(vnode: m.Vnode<{}, {}>): m.Children { + return ; } - updateGauge() { + protected onValueChange(value: number) { let now = Date.now() / 1000.0; - let value = Math.max(0.0, Math.min(this.gaugeMaxValue, this.gaugeValue.get())); - - let valueStr = value.toFixed(this.decimals); - let parts = valueStr.split('.'); - - this.integralValueElement.innerText = parts[0]; - this.decimalValueElement.innerText = this.decimals > 0 ? '.' + parts[1] : ''; - - let ratio = value / this.gaugeMaxValue; + let ratio = value / (this.maxValue || 1.0); let numBars = this.bars.length; let threshold = 0.33 / numBars; @@ -124,11 +99,4 @@ export class Gauge extends Widget { bar.classList.toggle('lit', isLit); } } - - oncreate(vnode: any) { - this.integralValueElement = vnode.dom.querySelector('span.integral-value'); - this.decimalValueElement = vnode.dom.querySelector('span.decimal-value'); - - this.updateGauge(); - } } diff --git a/WebApp/src/components/widgets/numeric-value.tsx b/WebApp/src/components/widgets/numeric-value.tsx index bd8a1c5..cd5e0df 100644 --- a/WebApp/src/components/widgets/numeric-value.tsx +++ b/WebApp/src/components/widgets/numeric-value.tsx @@ -5,9 +5,11 @@ import { Pipe } from 'utilities/pipe'; require('./numeric-value.css'); export class NumericValue extends Widget { - private value: Pipe; - private unit: string; - private decimals: number; + protected value: Pipe; + protected minValue?: number; + protected maxValue?: number; + protected unit: string; + protected decimals: number; private integralValueElement: HTMLElement; private decimalValueElement: HTMLElement; @@ -16,32 +18,46 @@ export class NumericValue extends Widget { super(vnode); this.value = vnode.attrs.value || new Pipe(0.0); + this.minValue = vnode.attrs.minValue || null; + this.maxValue = vnode.attrs.maxValue || null; this.unit = vnode.attrs.unit || ''; this.decimals = vnode.attrs.decimals || 0; - this.value.onChange(() => this.onValueChange()); + this.value.onChange(() => this.onValueChange_()); } view(vnode: m.Vnode<{}, {}>): m.Children { return

{this.unit}

+ {this.graphicalRepresentation(vnode)}
; } - onValueChange() { + protected graphicalRepresentation(vnode: m.Vnode<{}, {}>): m.Children { + return []; + } + + protected onValueChange(newValue: number) { + } + + private onValueChange_() { let value = this.value.get(); + if(this.minValue !== null) value = Math.max(value, this.minValue); + if(this.maxValue !== null) value = Math.min(value, this.maxValue); let valueStr = value.toFixed(this.decimals); let parts = valueStr.split('.'); this.integralValueElement.innerText = parts[0]; this.decimalValueElement.innerText = this.decimals > 0 ? '.' + parts[1] : ''; + + this.onValueChange(value); } oncreate(vnode: any) { this.integralValueElement = vnode.dom.querySelector('span.integral-value'); this.decimalValueElement = vnode.dom.querySelector('span.decimal-value'); - this.onValueChange(); + this.onValueChange_(); } } diff --git a/WebApp/src/pages/dashboard/dashboard-page.tsx b/WebApp/src/pages/dashboard/dashboard-page.tsx index 29e3a82..fead0bf 100644 --- a/WebApp/src/pages/dashboard/dashboard-page.tsx +++ b/WebApp/src/pages/dashboard/dashboard-page.tsx @@ -45,7 +45,7 @@ export class DashboardPage extends Page { m.redraw(); this.status = newStatus; - let power = this.status.batteryVoltage * this.status.motorCurrent; + let power = Math.max(0.0, this.status.batteryVoltage * this.status.motorCurrent); this.power.set(power); const minVoltage = 36.0; @@ -92,9 +92,9 @@ export class DashboardPage extends Page {
- - - + + +