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

added battery and speed gauges (wip)

Browse Source
This commit is contained in:
Youen Toupin 2022-04-13 22:10:08 +02:00
parent e999e325c5
commit 45ac1dd610
4 changed files with 37 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
WebApp/src/components/widgets/gauge-linear.css
View File

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

22
WebApp/src/components/widgets/gauge-linear.tsx
View File

@ -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();
}

2
WebApp/src/monitor-api.ts
View File

@ -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,

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

@ -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>;