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

refactored GaugeLinear to share implementation with other types of gauge

Browse Source
This commit is contained in:
Youen Toupin 2022-04-13 22:29:28 +02:00
parent 45ac1dd610
commit b8bec376a0
4 changed files with 101 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,36 +0,0 @@
div.gauge-linear {
display: flex;
flex-direction: column;
}
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;
}
rect.gauge-linear-bg {
fill: rgb(255,255,255);
stroke-width: 2;
stroke: rgb(0,0,0)
}
rect.gauge-linear-bar {
fill: rgb(230,230,230);
stroke-width: 1;
stroke: rgb(180,180,180)
}
rect.gauge-linear-bar.lit {
fill: rgb(180,180,180);
stroke-width: 1;
stroke: rgb(0,0,0)
}

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

@ -1,36 +1,12 @@
import m from 'mithril';
import { Widget } from 'components/widgets/widget';
import { Gauge } from 'components/widgets/gauge';
import { Pipe } from 'utilities/pipe';
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 integralValueElement: HTMLElement;
private decimalValueElement: HTMLElement;
export class GaugeLinear extends Gauge {
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="integral-value"></span><span class="decimal-value"></span><span class="unit">{this.unit}</span></p>
<svg>
</svg>
</div>;
}
createSvg(svgElement: SVGElement) {
@ -42,7 +18,7 @@ export class GaugeLinear extends Widget {
let bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
bg.setAttribute('width', w.toString());
bg.setAttribute('height', h.toString());
bg.classList.add('gauge-linear-bg');
bg.classList.add('gauge-bg');
svgElement.append(bg);
let barHeight = 15;
@ -56,7 +32,7 @@ export class GaugeLinear extends Widget {
let bar = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
bar.setAttribute('width', (w - barGap * 2).toString());
bar.setAttribute('height', barHeight.toString());
bar.classList.add('gauge-linear-bar');
bar.classList.add('gauge-bar');
bar.classList.toggle('lit', false);
bar.setAttribute('x', barGap.toString());
@ -68,31 +44,10 @@ export class GaugeLinear extends Widget {
}
}
updateGauge() {
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 numBars = this.bars.length;
let litBars = Math.round(ratio * numBars);
for(let barIdx = 0; barIdx < numBars; ++barIdx) {
let bar = this.bars[barIdx];
bar.classList.toggle('lit', barIdx < litBars);
}
}
oncreate(vnode: any) {
let svgElement: SVGElement = vnode.dom.querySelector('svg');
this.createSvg(svgElement);
this.integralValueElement = vnode.dom.querySelector('span.integral-value');
this.decimalValueElement = vnode.dom.querySelector('span.decimal-value');
this.updateGauge();
super.oncreate(vnode);
}
}

36
WebApp/src/components/widgets/gauge.css Normal file
View File

@ -0,0 +1,36 @@
div.gauge {
display: flex;
flex-direction: column;
}
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;
}
rect.gauge-bg {
fill: rgb(255,255,255);
stroke-width: 2;
stroke: rgb(0,0,0)
}
rect.gauge-bar {
fill: rgb(230,230,230);
stroke-width: 1;
stroke: rgb(180,180,180)
}
rect.gauge-bar.lit {
fill: rgb(180,180,180);
stroke-width: 1;
stroke: rgb(0,0,0)
}

60
WebApp/src/components/widgets/gauge.tsx Normal file
View File

@ -0,0 +1,60 @@
import m from 'mithril';
import { Widget } from 'components/widgets/widget';
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;
protected bars: SVGRectElement[] = [];
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" 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>;
}
updateGauge() {
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 numBars = this.bars.length;
let litBars = Math.round(ratio * numBars);
for(let barIdx = 0; barIdx < numBars; ++barIdx) {
let bar = this.bars[barIdx];
bar.classList.toggle('lit', barIdx < litBars);
}
}
oncreate(vnode: any) {
this.integralValueElement = vnode.dom.querySelector('span.integral-value');
this.decimalValueElement = vnode.dom.querySelector('span.decimal-value');
this.updateGauge();
}
}