youen/vehicle-monitor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

refactored Gauge class to inherit from NumericValue

Browse Source
This commit is contained in:
Youen Toupin 2022-04-16 22:54:15 +02:00
parent 641acf7c12
commit 98a59085d4
3 changed files with 33 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
WebApp/src/components/widgets/gauge.tsx
View File

@ -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<number>;
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 <div class="widget gauge" style={'flex: ' + this.widgetWidth}>
<p><span class="integral-value"></span><span class="decimal-value"></span><span class="unit">{this.unit}</span></p>
<svg>
</svg>
</div>;
protected graphicalRepresentation(vnode: m.Vnode<{}, {}>): m.Children {
return <svg></svg>;
}
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();
}
}

28
WebApp/src/components/widgets/numeric-value.tsx
View File

@ -5,9 +5,11 @@ import { Pipe } from 'utilities/pipe';
require('./numeric-value.css');
export class NumericValue extends Widget {
private value: Pipe<number>;
private unit: string;
private decimals: number;
protected value: Pipe<number>;
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 <div class="widget gauge" style={'flex: ' + this.widgetWidth}>
<p><span class="integral-value"></span><span class="decimal-value"></span><span class="unit">{this.unit}</span></p>
{this.graphicalRepresentation(vnode)}
</div>;
}
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_();
}
}

8
WebApp/src/pages/dashboard/dashboard-page.tsx
View File

@ -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 {
</div>
<div class="widgets-row" style="height: 40%">
<GaugeLinear widgetWidth={0.2} gaugeValue={this.power} gaugeMaxValue={999.0} bottomWidth={0.4} unit="W" />
<GaugeCircular widgetWidth={0.6} gaugeValue={this.speed} gaugeMaxValue={50.0} decimals={1} unit="km/h" />
<GaugeBattery widgetWidth={0.2} gaugeValue={this.battery} gaugeMaxValue={100.0} unit="%" />
<GaugeLinear widgetWidth={0.2} value={this.power} minValue={0} maxValue={999.0} bottomWidth={0.4} unit="W" />
<GaugeCircular widgetWidth={0.6} value={this.speed} minValue={0} maxValue={50.0} decimals={1} unit="km/h" />
<GaugeBattery widgetWidth={0.2} value={this.battery} minValue={0} maxValue={100.0} unit="%" />
</div>
<div class="widgets-row">