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

finished first version of circular gauge

Browse Source
This commit is contained in:
Youen Toupin 2022-04-15 20:07:07 +02:00
parent 03d8fa6771
commit 44a69a8d0b
3 changed files with 25 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
WebApp/src/components/widgets/gauge-circular.tsx
View File

@ -49,27 +49,38 @@ export class GaugeCircular extends Gauge {
bg.classList.add('gauge-bg');
svgElement.append(bg);
let barHeight = 15;
let barHeight = 12;
const barGap = barHeight * 0.2;
let numBars = Math.round(h / (barHeight + barGap));
let numBars = Math.round(arcLength / (barHeight + barGap));
let bh = (h - (numBars+1)*barGap) / numBars;
barHeight = Math.round(bh);
barHeight = (arcLength - (numBars+1)*barGap) / numBars;
/*for(let barIdx = 0; barIdx < numBars; ++barIdx) {
let bar = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
bar.setAttribute('width', (w - barGap * 2).toString());
bar.setAttribute('height', barHeight.toString());
let computeCircleCoords = function(d: number, r: number, out: {x: number, y: number}) {
let a = outlineOpeningHalfAngle + (2.0 * Math.PI - outlineOpeningHalfAngle * 2.0) * (d / arcLength);
out.x = svgRound(cx - Math.sin(a) * r);
out.y = svgRound(cy + Math.cos(a) * r);
};
let points: {x: number, y: number}[] = [];
for(let idx = 0; idx < 4; ++idx) { points[idx] = {x: 0, y: 0}; }
for(let barIdx = 0; barIdx < numBars; ++barIdx) {
let bar = document.createElementNS('http://www.w3.org/2000/svg', 'path');
bar.classList.add('gauge-bar');
bar.classList.toggle('lit', false);
bar.setAttribute('x', barGap.toString());
bar.setAttribute('y', (h - barIdx * (bh+barGap) - barGap - barHeight).toString());
let barStartLen = barGap + barIdx * (barHeight + barGap);
let barEndLen = barStartLen + barHeight;
computeCircleCoords(barStartLen, gaugeRadius - gaugeWidth*0.5 + barGap, points[0]);
computeCircleCoords(barStartLen, gaugeRadius + gaugeWidth*0.5 - barGap, points[1]);
computeCircleCoords(barEndLen, gaugeRadius + gaugeWidth*0.5 - barGap, points[2]);
computeCircleCoords(barEndLen, gaugeRadius - gaugeWidth*0.5 + barGap, points[3]);
bar.setAttribute('d', 'M'+points[0].x+' '+points[0].y+' L'+points[1].x+' '+points[1].y+' L'+points[2].x+' '+points[2].y+' L'+points[3].x+' '+points[3].y+' Z');
svgElement.append(bar);
this.bars.push(bar);
}*/
}
}
oncreate(vnode: any) {

4
WebApp/src/components/widgets/gauge.css
View File

@ -38,13 +38,13 @@ path.gauge-bg {
fill: none;
}
rect.gauge-bar {
div.gauge .gauge-bar {
fill: rgb(230,230,230);
stroke-width: 1;
stroke: rgb(180,180,180)
}
rect.gauge-bar.lit {
div.gauge .gauge-bar.lit {
fill: rgb(180,180,180);
stroke-width: 1;
stroke: rgb(0,0,0)

2
WebApp/src/components/widgets/gauge.tsx
View File

@ -10,7 +10,7 @@ export class Gauge extends Widget {
private unit: string;
private decimals: number;
protected bars: SVGRectElement[] = [];
protected bars: SVGGeometryElement[] = [];
private integralValueElement: HTMLElement;
private decimalValueElement: HTMLElement;