finished first version of circular gauge

WebApp/src/components/widgets/gauge-circular.tsx

@@ -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 = (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.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);
 			
 			this.bars.push(bar);
-		}*/
+		}
 	}
 	
 	oncreate(vnode: any) {

WebApp/src/components/widgets/gauge.css

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

WebApp/src/components/widgets/gauge.tsx

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