refactored Gauge class to inherit from NumericValue

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;

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<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 integralValue = Math.floor(value);
-		let decimalValue = value - integralValue;
-		
-		this.integralValueElement.innerText = integralValue.toFixed(0);
-		this.decimalValueElement.innerText = this.decimals > 0 ? decimalValue.toFixed(this.decimals).substr(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();
-	}
 }

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;
+}

WebApp/src/components/widgets/numeric-value.tsx

@@ -0,0 +1,63 @@
+import m from 'mithril';
+import { Widget } from 'components/widgets/widget';
+import { Pipe } from 'utilities/pipe';
+
+require('./numeric-value.css');
+
+export class NumericValue extends Widget {
+	protected value: Pipe<number>;
+	protected minValue?: number;
+	protected maxValue?: number;
+	protected unit: string;
+	protected decimals: number;
+	
+	private integralValueElement: HTMLElement;
+	private decimalValueElement: HTMLElement;
+	
+	constructor(vnode: any) {
+		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_());
+	}
+	
+	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>;
+	}
+	
+	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_();
+	}
+}

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<ApiStatus>((resolve, error) => {

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 = Math.max(0.0, 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,10 +90,28 @@ export class DashboardPage extends Page {
 				<div class="widgets-row">
 					<Clock/>
 				</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">
+					<NumericValue widgetWidth={0.5} value={this.distance} decimals={1} unit="km" />
+				</div>
+				<div class="widgets-row">
+					<NumericValue widgetWidth={0.5} value={this.averageSpeed} decimals={1} unit="km/h" />
+					<NumericValue widgetWidth={0.5} value={this.ascendingElevation} decimals={1} unit="m" />
+				</div>
+				<div class="widgets-row">
+					<NumericValue widgetWidth={0.5} value={this.averageConsumption} decimals={1} unit="Wh/km" />
+					<NumericValue widgetWidth={0.5} value={this.energy} decimals={1} unit="Wh" />
+				</div>
+				
+				<div class="widgets-row">
+					<NumericValue widgetWidth={0.5} value={this.temperature} decimals={1} unit="°C" />
+					<NumericValue widgetWidth={0.5} value={this.altitude} decimals={1} unit="m" />
 				</div>
 			</div>
 			: <p>Chargement...</p>;