implemented automatic update of power gauge

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 {

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<number>;
+	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 <div class="widget gauge-linear" style={'flex: ' + this.widgetWidth}>
-			<p class="value">643<span class="unit">W</span></p>
+			<p><span class="value"></span><span class="unit">W</span></p>
 			<svg>
 			</svg>
 		</div>;
@@ -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();
 	}
 }

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 {
 					<Clock/>
 				</div>
 				<div class="widgets-row" style="height: 40%">
-					<GaugeLinear widgetWidth={0.2} />
+					<GaugeLinear widgetWidth={0.2} gaugeValue={this.power} gaugeMaxValue={999.0} />
 				</div>
 			</div>
 			: <p>Chargement...</p>;

WebApp/src/utilities/pipe.ts

@@ -0,0 +1,21 @@
+export class Pipe<ValueType>
+{
+	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);
+	}
+}