diff --git a/WebApp/src/components/widgets/gauge-battery.tsx b/WebApp/src/components/widgets/gauge-battery.tsx new file mode 100644 index 0000000..869e317 --- /dev/null +++ b/WebApp/src/components/widgets/gauge-battery.tsx @@ -0,0 +1,27 @@ +import m from 'mithril'; +import { GaugeLinear } from 'components/widgets/gauge-linear'; + +export class GaugeBattery extends GaugeLinear { + constructor(vnode: any) { + super(vnode); + this.svgPaddingTop = 0.06; + } + + createSvg(svgElement: SVGElement) { + super.createSvg(svgElement); + + let w = Math.round(svgElement.clientWidth); + let h = Math.round(svgElement.clientHeight); + let paddingTop = Math.round(svgElement.clientHeight * this.svgPaddingTop); + + const batteryTopWidth = 0.5; + + let batteryTop = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); + batteryTop.setAttribute('width', (w * batteryTopWidth).toFixed(1)); + batteryTop.setAttribute('height', (paddingTop).toString()); + batteryTop.setAttribute('x', (w * (1.0 - batteryTopWidth)*0.5).toFixed(1)); + batteryTop.setAttribute('y', '0'); + batteryTop.classList.add('gauge-bg'); + svgElement.append(batteryTop); + } +} diff --git a/WebApp/src/components/widgets/gauge-circular.css b/WebApp/src/components/widgets/gauge-circular.css index e69de29..b441413 100644 --- a/WebApp/src/components/widgets/gauge-circular.css +++ b/WebApp/src/components/widgets/gauge-circular.css @@ -0,0 +1,9 @@ +div.gauge svg.gauge-circular path.gauge-bg-outline { + stroke: rgb(0,0,0); + fill: none; +} + +div.gauge svg.gauge-circular path.gauge-bg { + stroke: rgb(255,255,255); + fill: none; +} diff --git a/WebApp/src/components/widgets/gauge-circular.tsx b/WebApp/src/components/widgets/gauge-circular.tsx index 8a5f719..e932fec 100644 --- a/WebApp/src/components/widgets/gauge-circular.tsx +++ b/WebApp/src/components/widgets/gauge-circular.tsx @@ -13,6 +13,8 @@ export class GaugeCircular extends Gauge { let w = Math.round(svgElement.clientWidth); let h = Math.round(svgElement.clientHeight); + svgElement.classList.add('gauge-circular'); + svgElement.setAttribute('viewBox', "0 0 "+w+" "+h); let svgRound = (v: number) => Math.round(v * 100.0) / 100.0; diff --git a/WebApp/src/components/widgets/gauge-linear.tsx b/WebApp/src/components/widgets/gauge-linear.tsx index 7a1e78a..b8b15ad 100644 --- a/WebApp/src/components/widgets/gauge-linear.tsx +++ b/WebApp/src/components/widgets/gauge-linear.tsx @@ -5,32 +5,47 @@ import { Pipe } from 'utilities/pipe'; require('./gauge-linear.css'); export class GaugeLinear extends Gauge { + protected svgPaddingTop = 0.0; + private bottomWidth: number; + private topWidth: number; + constructor(vnode: any) { super(vnode); + + this.bottomWidth = vnode.attrs.bottomWidth || 1.0; + this.topWidth = vnode.attrs.topWidth || 1.0; } createSvg(svgElement: SVGElement) { let w = Math.round(svgElement.clientWidth); let h = Math.round(svgElement.clientHeight); + let paddingTop = Math.round(svgElement.clientHeight * this.svgPaddingTop); svgElement.setAttribute('viewBox', "0 0 "+w+" "+h); + + let svgRound = (v: number) => Math.round(v * 100.0) / 100.0; - let bg = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); - bg.setAttribute('width', w.toString()); - bg.setAttribute('height', h.toString()); + let bg = document.createElementNS('http://www.w3.org/2000/svg', 'path'); + //bg.setAttribute('width', w.toString()); + //bg.setAttribute('height', (h - paddingTop).toString()); + //bg.setAttribute('y', paddingTop.toString()); + bg.setAttribute('d', 'M0,'+paddingTop+' L'+svgRound(w*this.topWidth)+','+paddingTop+' L'+svgRound(w*this.bottomWidth)+','+h+' L0,'+h+' Z'); bg.classList.add('gauge-bg'); svgElement.append(bg); let barHeight = 15; const barGap = barHeight * 0.2; - let numBars = Math.round(h / (barHeight + barGap)); + let numBars = Math.round((h - paddingTop) / (barHeight + barGap)); - let bh = (h - (numBars+1)*barGap) / numBars; + let bh = ((h - paddingTop) - (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()); + let barW = w * ((barGap + barIdx * (bh+barGap))/(h - paddingTop) * (this.topWidth - this.bottomWidth) + this.bottomWidth); + let barW1 = w * ((barGap + barIdx * (bh+barGap) + bh)/(h - paddingTop) * (this.topWidth - this.bottomWidth) + this.bottomWidth); + barW = Math.min(barW, barW1); + bar.setAttribute('width', (barW - barGap * 2).toString()); bar.setAttribute('height', barHeight.toString()); bar.classList.add('gauge-bar'); bar.classList.toggle('lit', false); diff --git a/WebApp/src/components/widgets/gauge.css b/WebApp/src/components/widgets/gauge.css index a28df28..af76ed7 100644 --- a/WebApp/src/components/widgets/gauge.css +++ b/WebApp/src/components/widgets/gauge.css @@ -22,22 +22,12 @@ div.gauge span.unit { font-size: 1.6rem; } -rect.gauge-bg { +.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; -} - div.gauge .gauge-bar { fill: rgb(230,230,230); stroke-width: 1; diff --git a/WebApp/src/monitor-api.ts b/WebApp/src/monitor-api.ts index 6f4e80a..2f41524 100644 --- a/WebApp/src/monitor-api.ts +++ b/WebApp/src/monitor-api.ts @@ -37,14 +37,22 @@ export class MonitorApi { let apiStatus: ApiStatus; if(this.mockServer) { - await new Promise(resolve => setTimeout(resolve, 200)); - apiStatus = { + //await new Promise(resolve => setTimeout(resolve, 200)); + /*apiStatus = { v: Math.random() * 6000 + 36000, c: Math.random() * 30000, s: Math.random() * 14000, t: Math.random() * 400 - 100, alt: Math.random() * 4500000 - 200000 - } + };*/ + let t = new Date().getTime() / 1000.0; + apiStatus = { + v: (Math.cos(t*0.4)+1.0)*0.5 * 6000 + 36000, + c: (Math.cos(t*0.7)+1.0)*0.5 * 30000, + s: (Math.cos(t*0.3)+1.0)*0.5 * 14000, + t: Math.random() * 400 - 100, + alt: Math.random() * 4500000 - 200000 + }; } else { apiStatus = await new Promise((resolve, error) => { let request = new XMLHttpRequest(); diff --git a/WebApp/src/pages/dashboard/dashboard-page.tsx b/WebApp/src/pages/dashboard/dashboard-page.tsx index 5ecb73c..580fb66 100644 --- a/WebApp/src/pages/dashboard/dashboard-page.tsx +++ b/WebApp/src/pages/dashboard/dashboard-page.tsx @@ -6,6 +6,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'; +import { GaugeBattery } from 'components/widgets/gauge-battery'; require('./dashboard-page.css'); @@ -42,7 +43,7 @@ export class DashboardPage extends Page { this.speed.set(this.status.speed * 3.6); // convert m/s to km/h if(this.autoRefresh) - setTimeout(() => { if(this.autoRefresh) this.refresh(); }, 500); + setTimeout(() => { if(this.autoRefresh) this.refresh(); }, 150); } view() { @@ -52,9 +53,9 @@ export class DashboardPage extends Page {
- + - +
:

Chargement...

;