circular gauge rendering (wip)

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

@@ -0,0 +1,81 @@
+import m from 'mithril';
+import { Gauge } from 'components/widgets/gauge';
+import { Pipe } from 'utilities/pipe';
+
+require('./gauge-circular.css');
+
+export class GaugeCircular extends Gauge {
+	constructor(vnode: any) {
+		super(vnode);
+	}
+	
+	createSvg(svgElement: SVGElement) {
+		let w = Math.round(svgElement.clientWidth);
+		let h = Math.round(svgElement.clientHeight);
+		
+		svgElement.setAttribute('viewBox', "0 0 "+w+" "+h);
+		
+		let svgRound = (v: number) => Math.round(v * 100.0) / 100.0;
+		
+		const arcRatio = 0.75; // from 0.5 for half circle to 1.0 for full circle
+		const gaugeWidthRatio = 0.15; // relative to the smallest dimension of the drawing area
+		const lineThickness = 1;
+		
+		let gaugeWidth = Math.round(Math.min(w, h) * gaugeWidthRatio);
+		let gaugeRadius = Math.round(Math.min(w, h) * 0.5 - gaugeWidth * 0.5 - lineThickness - 1);
+		let cx = Math.round(w * 0.5); let cy = Math.round(h * 0.5);
+		
+		let openingHalfAngle = Math.PI * (1.0 - arcRatio);
+		let arcLength = Math.PI * 2.0 * gaugeRadius * arcRatio;
+		let startx = svgRound(cx - Math.sin(openingHalfAngle) * gaugeRadius);
+		let starty = svgRound(cy + Math.cos(openingHalfAngle) * gaugeRadius);
+		let dx = svgRound(2.0 * Math.sin(openingHalfAngle) * gaugeRadius);
+		
+		let outlineArcRatio = (arcLength + lineThickness*2.0) / (Math.PI * 2.0 * gaugeRadius);
+		let outlineOpeningHalfAngle = Math.PI * (1.0 - outlineArcRatio);
+		let outlineStartx = svgRound(cx - Math.sin(outlineOpeningHalfAngle) * gaugeRadius);
+		let outlineStarty = svgRound(cy + Math.cos(outlineOpeningHalfAngle) * gaugeRadius);
+		let outlineDx = svgRound(2.0 * Math.sin(outlineOpeningHalfAngle) * gaugeRadius);
+
+		let bgOutline = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+		bgOutline.setAttribute('d', 'M'+outlineStartx+' '+outlineStarty+' a'+gaugeRadius+' '+gaugeRadius+' 0 1 1 '+outlineDx+' 0');
+		bgOutline.setAttribute('style', 'stroke-width: '+(gaugeWidth+lineThickness*2));
+		bgOutline.classList.add('gauge-bg-outline');
+		svgElement.append(bgOutline);
+
+		let bg = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+		bg.setAttribute('d', 'M'+startx+' '+starty+' a'+gaugeRadius+' '+gaugeRadius+' 0 1 1 '+dx+' 0');
+		bg.setAttribute('style', 'stroke-width: '+(gaugeWidth));
+		bg.classList.add('gauge-bg');
+		svgElement.append(bg);
+		
+		let barHeight = 15;
+		const barGap = barHeight * 0.2;
+		let numBars = Math.round(h / (barHeight + barGap));
+		
+		let bh = (h - (numBars+1)*barGap) / numBars;
+		barHeight = Math.round(bh);
+		
+		/*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());
+			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());
+			
+			svgElement.append(bar);
+			
+			this.bars.push(bar);
+		}*/
+	}
+	
+	oncreate(vnode: any) {
+		let svgElement: SVGElement = vnode.dom.querySelector('svg');
+		this.createSvg(svgElement);
+		
+		super.oncreate(vnode);
+	}
+}

WebApp/src/components/widgets/gauge-linear.css

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

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

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

WebApp/src/components/widgets/gauge.css

@@ -0,0 +1,51 @@
+div.gauge {
+	display: flex;
+	flex-direction: column;
+	text-align: center;
+}
+
+div.gauge svg {
+	flex: 1;
+}
+
+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)
+}
+
+path.gauge-bg-outline {
+	stroke: rgb(0,0,0);
+	fill: none;
+}
+
+path.gauge-bg {
+	stroke: rgb(255,255,255);
+	fill: none;
+}
+
+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)
+}

WebApp/src/components/widgets/gauge.tsx

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

WebApp/src/components/widgets/widget.css

@@ -1,3 +1,11 @@
-div.widget svg {
-	flex: 1;
+div.widgets-row {
+	padding-top: 0.5rem;
+	padding-bottom: 0.5rem;
+	display: flex;
+	flex-direction: row;
+}
+
+div.widget {
+	flex: 1;
+	margin: 0.2rem;
 }

WebApp/src/pages/dashboard/dashboard-page.css

@@ -2,12 +2,3 @@ div.dashboard-page {
 	width: 100%;
 	height: 100%;
 }
-
-div.widgets-row {
-	display: flex;
-	flex-direction: row;
-}
-
-div.widget {
-	flex: 1;
-}

WebApp/src/pages/dashboard/dashboard-page.tsx

@@ -5,6 +5,7 @@ import { Pipe } from 'utilities/pipe';
 
 import { Clock } from 'components/widgets/clock';
 import { GaugeLinear } from 'components/widgets/gauge-linear';
+import { GaugeCircular } from 'components/widgets/gauge-circular';
 
 require('./dashboard-page.css');
 
@@ -52,7 +53,7 @@ export class DashboardPage extends Page {
 				</div>
 				<div class="widgets-row" style="height: 40%">
 					<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" />
+					<GaugeCircular 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>