added battery and speed gauges (wip)

WebApp/src/components/widgets/gauge-linear.css

@@ -3,11 +3,16 @@ div.gauge-linear {
 	flex-direction: column;
 }
 
-div.gauge-linear span.value {
+div.gauge-linear span.integral-value {
 	font-size: 2.3rem;
 	font-family: monospace;
 }
 
+div.gauge-linear span.decimal-value {
+	font-size: 1.6rem;
+	font-family: monospace;
+}
+
 div.gauge-linear span.unit {
 	font-size: 1.6rem;
 }

WebApp/src/components/widgets/gauge-linear.tsx

@@ -7,19 +7,27 @@ require('./gauge-linear.css');
 export class GaugeLinear extends Widget {
 	private gaugeValue: Pipe<number>;
 	private gaugeMaxValue: number;
+	private unit: string;
+	private decimals: number;
+	
 	private bars: SVGRectElement[] = [];
-	private valueElement: HTMLElement;
+	private integralValueElement: HTMLElement;
+	private decimalValueElement: HTMLElement;
 	
 	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());
 	}
 	
 	view(vnode: m.Vnode<{}, {}>): m.Children {
 		return <div class="widget gauge-linear" style={'flex: ' + this.widgetWidth}>
-			<p><span class="value"></span><span class="unit">W</span></p>
+			<p><span class="integral-value"></span><span class="decimal-value"></span><span class="unit">{this.unit}</span></p>
 			<svg>
 			</svg>
 		</div>;
@@ -62,7 +70,12 @@ export class GaugeLinear extends Widget {
 	
 	updateGauge() {
 		let value = Math.max(0.0, Math.min(this.gaugeMaxValue, this.gaugeValue.get()));
-		this.valueElement.innerText = value.toFixed(0);
+		
+		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 numBars = this.bars.length;
@@ -77,7 +90,8 @@ export class GaugeLinear extends Widget {
 		let svgElement: SVGElement = vnode.dom.querySelector('svg');
 		this.createSvg(svgElement);
 		
-		this.valueElement = vnode.dom.querySelector('span.value');
+		this.integralValueElement = vnode.dom.querySelector('span.integral-value');
+		this.decimalValueElement = vnode.dom.querySelector('span.decimal-value');
 		
 		this.updateGauge();
 	}

WebApp/src/monitor-api.ts

@@ -39,7 +39,7 @@ export class MonitorApi {
 		if(this.mockServer) {
 			await new Promise(resolve => setTimeout(resolve, 200));
 			apiStatus = {
-				v: Math.random() * 20000 + 20000,
+				v: Math.random() * 6000 + 36000,
 				c: Math.random() * 30000,
 				s: Math.random() * 14000,
 				t: Math.random() * 400 - 100,

WebApp/src/pages/dashboard/dashboard-page.tsx

@@ -13,6 +13,8 @@ export class DashboardPage extends Page {
 	autoRefresh = true;
 	
 	private power = new Pipe(0.0);
+	private battery = new Pipe(0.0);
+	private speed = new Pipe(0.0);
 	
 	oninit() {
 		this.status = MonitorApi.get().getStatus();
@@ -31,6 +33,13 @@ export class DashboardPage extends Page {
 		
 		this.power.set(this.status.batteryVoltage * this.status.motorCurrent);
 		
+		const minVoltage = 36.0;
+		const maxVoltage = 42.0;
+		let batteryRatio = Math.max(0.0, (this.status.batteryVoltage - minVoltage) / (maxVoltage - minVoltage)); 
+		this.battery.set(batteryRatio * batteryRatio * 100.0); // TODO: find a better formula to estimate remaining energy from battery voltage and power
+		
+		this.speed.set(this.status.speed * 3.6); // convert m/s to km/h
+		
 		if(this.autoRefresh)
 			setTimeout(() => { if(this.autoRefresh) this.refresh(); }, 500);
 	}
@@ -42,7 +51,9 @@ export class DashboardPage extends Page {
 					<Clock/>
 				</div>
 				<div class="widgets-row" style="height: 40%">
-					<GaugeLinear widgetWidth={0.2} gaugeValue={this.power} gaugeMaxValue={999.0} />
+					<GaugeLinear widgetWidth={0.2} gaugeValue={this.power} gaugeMaxValue={999.0} unit="W" />
+					<GaugeLinear widgetWidth={0.6} gaugeValue={this.speed} gaugeMaxValue={50.0} decimals={1} unit="km/h" />
+					<GaugeLinear widgetWidth={0.2} gaugeValue={this.battery} gaugeMaxValue={100.0} unit="%" />
 				</div>
 			</div>
 			: <p>Chargement...</p>;