finished first version of circular gauge
This commit is contained in:
parent
03d8fa6771
commit
44a69a8d0b
WebApp/src/components/widgets
@ -49,27 +49,38 @@ export class GaugeCircular extends Gauge {
|
|||||||
bg.classList.add('gauge-bg');
|
bg.classList.add('gauge-bg');
|
||||||
svgElement.append(bg);
|
svgElement.append(bg);
|
||||||
|
|
||||||
let barHeight = 15;
|
let barHeight = 12;
|
||||||
const barGap = barHeight * 0.2;
|
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 = (arcLength - (numBars+1)*barGap) / numBars;
|
||||||
barHeight = Math.round(bh);
|
|
||||||
|
|
||||||
/*for(let barIdx = 0; barIdx < numBars; ++barIdx) {
|
let computeCircleCoords = function(d: number, r: number, out: {x: number, y: number}) {
|
||||||
let bar = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
|
let a = outlineOpeningHalfAngle + (2.0 * Math.PI - outlineOpeningHalfAngle * 2.0) * (d / arcLength);
|
||||||
bar.setAttribute('width', (w - barGap * 2).toString());
|
out.x = svgRound(cx - Math.sin(a) * r);
|
||||||
bar.setAttribute('height', barHeight.toString());
|
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.add('gauge-bar');
|
||||||
bar.classList.toggle('lit', false);
|
bar.classList.toggle('lit', false);
|
||||||
|
|
||||||
bar.setAttribute('x', barGap.toString());
|
let barStartLen = barGap + barIdx * (barHeight + barGap);
|
||||||
bar.setAttribute('y', (h - barIdx * (bh+barGap) - barGap - barHeight).toString());
|
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);
|
svgElement.append(bar);
|
||||||
|
|
||||||
this.bars.push(bar);
|
this.bars.push(bar);
|
||||||
}*/
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
oncreate(vnode: any) {
|
oncreate(vnode: any) {
|
||||||
|
@ -38,13 +38,13 @@ path.gauge-bg {
|
|||||||
fill: none;
|
fill: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
rect.gauge-bar {
|
div.gauge .gauge-bar {
|
||||||
fill: rgb(230,230,230);
|
fill: rgb(230,230,230);
|
||||||
stroke-width: 1;
|
stroke-width: 1;
|
||||||
stroke: rgb(180,180,180)
|
stroke: rgb(180,180,180)
|
||||||
}
|
}
|
||||||
|
|
||||||
rect.gauge-bar.lit {
|
div.gauge .gauge-bar.lit {
|
||||||
fill: rgb(180,180,180);
|
fill: rgb(180,180,180);
|
||||||
stroke-width: 1;
|
stroke-width: 1;
|
||||||
stroke: rgb(0,0,0)
|
stroke: rgb(0,0,0)
|
||||||
|
@ -10,7 +10,7 @@ export class Gauge extends Widget {
|
|||||||
private unit: string;
|
private unit: string;
|
||||||
private decimals: number;
|
private decimals: number;
|
||||||
|
|
||||||
protected bars: SVGRectElement[] = [];
|
protected bars: SVGGeometryElement[] = [];
|
||||||
private integralValueElement: HTMLElement;
|
private integralValueElement: HTMLElement;
|
||||||
private decimalValueElement: HTMLElement;
|
private decimalValueElement: HTMLElement;
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user