From 957bb64365c9705b549c553dda87cb1ada559561 Mon Sep 17 00:00:00 2001 From: godind Date: Sun, 8 Oct 2023 21:31:19 -0400 Subject: [PATCH] Neddle jump fix and data sampling control --- .../widget-gauge-ng-linear.component.html | 2 +- .../widget-gauge-ng-linear.component.ts | 45 ++++++++++++----- .../widget-gauge-ng-radial.component.html | 2 +- .../widget-gauge-ng-radial.component.ts | 50 ++++++++++++++----- .../widget-simple-linear.component.ts | 20 +++++--- 5 files changed, 84 insertions(+), 35 deletions(-) diff --git a/src/app/widget-gauge-ng-linear/widget-gauge-ng-linear.component.html b/src/app/widget-gauge-ng-linear/widget-gauge-ng-linear.component.html index da36b6b1..30569253 100644 --- a/src/app/widget-gauge-ng-linear/widget-gauge-ng-linear.component.html +++ b/src/app/widget-gauge-ng-linear/widget-gauge-ng-linear.component.html @@ -90,7 +90,7 @@ [attr.needle-side]="gaugeOptions.needleSide" animation="true" - animation-duration="500" + [attr.animation-duration]="this.gaugeOptions.animationDuration" animation-rule="linear" animated-value="false" animate-on-init="false" diff --git a/src/app/widget-gauge-ng-linear/widget-gauge-ng-linear.component.ts b/src/app/widget-gauge-ng-linear/widget-gauge-ng-linear.component.ts index 7126fa56..9b0771a2 100644 --- a/src/app/widget-gauge-ng-linear/widget-gauge-ng-linear.component.ts +++ b/src/app/widget-gauge-ng-linear/widget-gauge-ng-linear.component.ts @@ -1,5 +1,5 @@ import { ViewChild, ElementRef, Component, OnInit, AfterContentInit, Input, OnDestroy } from '@angular/core'; -import { Subscription } from 'rxjs'; +import { Subscription, sampleTime} from 'rxjs'; import { MatDialog } from '@angular/material/dialog'; import { ResizedEvent } from 'angular-resize-event'; @@ -63,21 +63,24 @@ export class WidgetGaugeNgLinearComponent implements OnInit, OnDestroy, AfterCon @ViewChild('warnDark', {static: true, read: ElementRef}) private warnDarkElement: ElementRef; @ViewChild('background', {static: true, read: ElementRef}) private backgroundElement: ElementRef; - activeWidget: IWidget; - config: IWidgetSvcConfig; + // widget framework + private activeWidget: IWidget; + public config: IWidgetSvcConfig; + // main gauge value variable public dataValue = 0; public dataValueTrimmed = 0; - - valueSub: Subscription = null; + private valueSub$: Subscription = null; + private sample: number = 500; // dynamics theme support themeNameSub: Subscription = null; + // Gauge options public gaugeOptions = {} as LinearGaugeOptions; - public isGaugeVertical: Boolean = true; + // Zones support zones: Array = []; zonesSub: Subscription; @@ -90,6 +93,7 @@ export class WidgetGaugeNgLinearComponent implements OnInit, OnDestroy, AfterCon ) {} ngOnInit() { + // optain widget config this.activeWidget = this.WidgetManagerService.getWidget(this.widgetUUID); if (this.activeWidget.config === null) { // no data, let's set some! @@ -117,10 +121,14 @@ export class WidgetGaugeNgLinearComponent implements OnInit, OnDestroy, AfterCon this.unsubscribePath(); if (typeof(this.config.paths['gaugePath'].path) != 'string') { return } // nothing to sub to... - this.valueSub = this.SignalKService.subscribePath(this.widgetUUID, this.config.paths['gaugePath'].path, this.config.paths['gaugePath'].source).subscribe( + this.valueSub$ = this.SignalKService.subscribePath(this.widgetUUID, this.config.paths['gaugePath'].path, this.config.paths['gaugePath'].source).pipe(sampleTime(this.sample)).subscribe( newValue => { - this.dataValue = this.UnitsService.convertUnit(this.config.paths['gaugePath'].convertUnitTo, newValue.value); - + // Only push new values formated to gauge settings to reduce gauge paint requests + let oldValue = this.dataValue; + let temp = this.formatDataValue(this.UnitsService.convertUnit(this.config.paths['gaugePath'].convertUnitTo, newValue.value)); + if (oldValue != temp) { + this.dataValue = temp; + } // set colors for zone state switch (newValue.state) { @@ -140,9 +148,9 @@ export class WidgetGaugeNgLinearComponent implements OnInit, OnDestroy, AfterCon } unsubscribePath() { - if (this.valueSub !== null) { - this.valueSub.unsubscribe(); - this.valueSub = null; + if (this.valueSub$ !== null) { + this.valueSub$.unsubscribe(); + this.valueSub$ = null; this.SignalKService.unsubscribePath(this.widgetUUID, this.config.paths['gaugePath'].path) } } @@ -199,6 +207,17 @@ export class WidgetGaugeNgLinearComponent implements OnInit, OnDestroy, AfterCon }); } + private formatDataValue(value:number): number { + // make sure we are within range of the gauge settings, else the needle can go outside the range + if (value < this.config.minValue || value == null) { + value = this.config.minValue; + } + if (value > this.config.maxValue) { + value = this.config.maxValue; + } + return value; + } + updateGaugeConfig(){ //// Hack to get Theme colors using hidden minxin, DIV and @ViewChild let themePaletteColor = ""; @@ -291,6 +310,8 @@ export class WidgetGaugeNgLinearComponent implements OnInit, OnDestroy, AfterCon this.gaugeOptions.majorTicksInt = this.config.numInt; this.gaugeOptions.majorTicksDec = this.config.numDecimal; + this.gaugeOptions.animationDuration = this.sample - 25; // prevent data/amnimation collisions + if (this.config.gaugeTicks) { this.gaugeOptions.colorMajorTicks = this.gaugeOptions.colorNumbers = this.gaugeOptions.colorMinorTicks = this.gaugeOptions.colorTitle; } else { diff --git a/src/app/widget-gauge-ng-radial/widget-gauge-ng-radial.component.html b/src/app/widget-gauge-ng-radial/widget-gauge-ng-radial.component.html index e3922a3c..5b955e94 100644 --- a/src/app/widget-gauge-ng-radial/widget-gauge-ng-radial.component.html +++ b/src/app/widget-gauge-ng-radial/widget-gauge-ng-radial.component.html @@ -79,7 +79,7 @@ [attr.highlights-width]="gaugeOptions.highlightsWidth" animation="true" - animation-duration="500" + [attr.animation-duration]="gaugeOptions.animationDuration" animation-rule="linear" animated-value="false" animate-on-init="false" diff --git a/src/app/widget-gauge-ng-radial/widget-gauge-ng-radial.component.ts b/src/app/widget-gauge-ng-radial/widget-gauge-ng-radial.component.ts index 123c2241..ba2443e9 100644 --- a/src/app/widget-gauge-ng-radial/widget-gauge-ng-radial.component.ts +++ b/src/app/widget-gauge-ng-radial/widget-gauge-ng-radial.component.ts @@ -1,5 +1,5 @@ -import { ViewChild, ElementRef, Component, Input, OnInit, OnDestroy, AfterContentInit, AfterContentChecked } from '@angular/core'; -import { Subscription } from 'rxjs'; +import { ViewChild, ElementRef, Component, Input, OnInit, OnDestroy, AfterContentInit, AfterContentChecked, Pipe } from '@angular/core'; +import { Subscription, sampleTime } from 'rxjs'; import { MatDialog } from '@angular/material/dialog'; import { ResizedEvent } from 'angular-resize-event'; @@ -64,20 +64,25 @@ export class WidgetGaugeNgRadialComponent implements OnInit, OnDestroy, AfterCon @ViewChild('background', {static: true, read: ElementRef}) private backgroundElement: ElementRef; @ViewChild('text', {static: true, read: ElementRef}) private textElement: ElementRef; - activeWidget: IWidget; - config: IWidgetSvcConfig; + // widget framework + private activeWidget: IWidget; + public config: IWidgetSvcConfig; + // main gauge value variable public dataValue = 0; - valueSub: Subscription = null; + private valueSub$: Subscription = null; + private sample: number = 500; // dynamics theme support themeNameSub: Subscription = null; + // Gauge options public gaugeOptions = {} as RadialGaugeOptions; // fix for RadialGauge GaugeOptions object ** missing color-stroke-ticks property public colorStrokeTicks: string = ""; public unitName: string = null; + // Zones support zones: Array = []; zonesSub: Subscription; @@ -90,6 +95,7 @@ export class WidgetGaugeNgRadialComponent implements OnInit, OnDestroy, AfterCon ) { } ngOnInit() { + // optain widget config this.activeWidget = this.WidgetManagerService.getWidget(this.widgetUUID); if (this.activeWidget.config === null) { // no data, let's set some! @@ -102,6 +108,7 @@ export class WidgetGaugeNgRadialComponent implements OnInit, OnDestroy, AfterCon this.config.compassUseNumbers = false; } } + this.subscribePath(); this.subscribeTheme(); this.subscribeZones(); @@ -125,12 +132,16 @@ export class WidgetGaugeNgRadialComponent implements OnInit, OnDestroy, AfterCon this.unsubscribePath(); if (typeof(this.config.paths['gaugePath'].path) != 'string') { return } // nothing to sub to... - this.valueSub = this.SignalKService.subscribePath(this.widgetUUID, this.config.paths['gaugePath'].path, this.config.paths['gaugePath'].source).subscribe( + this.valueSub$ = this.SignalKService.subscribePath(this.widgetUUID, this.config.paths['gaugePath'].path, this.config.paths['gaugePath'].source).pipe(sampleTime(this.sample)).subscribe( newValue => { - this.dataValue = this.UnitsService.convertUnit(this.config.paths['gaugePath'].convertUnitTo, newValue.value); - + // Only push new values formated to gauge settings to reduce gauge paint requests + let oldValue = this.dataValue; + let temp = this.formatDataValue(this.UnitsService.convertUnit(this.config.paths['gaugePath'].convertUnitTo, newValue.value)); + if (oldValue != temp) { + this.dataValue = temp; + } - // set colors for zone state + // set zone state colors switch (newValue.state) { case IZoneState.warning: this.gaugeOptions.colorValueText = getComputedStyle(this.warnDarkElement.nativeElement).color; @@ -148,9 +159,9 @@ export class WidgetGaugeNgRadialComponent implements OnInit, OnDestroy, AfterCon } unsubscribePath() { - if (this.valueSub !== null) { - this.valueSub.unsubscribe(); - this.valueSub = null; + if (this.valueSub$ !== null) { + this.valueSub$.unsubscribe(); + this.valueSub$ = null; this.SignalKService.unsubscribePath(this.widgetUUID, this.config.paths['gaugePath'].path) } } @@ -207,6 +218,17 @@ export class WidgetGaugeNgRadialComponent implements OnInit, OnDestroy, AfterCon }); } + private formatDataValue(value:number): number { + // make sure we are within range of the gauge settings, else the needle can go outside the range + if (value < this.config.minValue || value == null) { + value = this.config.minValue; + } + if (value > this.config.maxValue) { + value = this.config.maxValue; + } + return value; + } + updateGaugeConfig(){ //// Hack to get Theme colors using hidden mixin, DIV and @ViewChild let themePaletteColor = ""; @@ -284,11 +306,13 @@ export class WidgetGaugeNgRadialComponent implements OnInit, OnDestroy, AfterCon this.gaugeOptions.majorTicksInt = this.config.numInt; this.gaugeOptions.majorTicksDec = this.config.numDecimal; + this.gaugeOptions.animationDuration = this.sample - 25; // prevent data/amnimation collisions + // Radial gauge type switch(this.config.radialSize) { case "capacity": this.unitName = this.config.paths['gaugePath'].convertUnitTo; - this.gaugeOptions.colorMajorTicks = this.gaugeOptions.colorPlate; // bug with MajorTicks drawing firs tick always and using color="" does not work + this.gaugeOptions.colorMajorTicks = this.gaugeOptions.colorPlate; // bug with MajorTicks; always drawing firts tick and using color="" does not work this.gaugeOptions.colorNumbers = this.gaugeOptions.colorMinorTicks = ""; this.gaugeOptions.fontTitleSize = 60; this.gaugeOptions.minValue = this.config.minValue; diff --git a/src/app/widget-simple-linear/widget-simple-linear.component.ts b/src/app/widget-simple-linear/widget-simple-linear.component.ts index 0ad01d44..74936ba4 100644 --- a/src/app/widget-simple-linear/widget-simple-linear.component.ts +++ b/src/app/widget-simple-linear/widget-simple-linear.component.ts @@ -1,5 +1,5 @@ import { ViewChild, Input, ElementRef, Component, OnInit, OnDestroy } from '@angular/core'; -import { Subscription } from 'rxjs'; +import { Subscription, sampleTime } from 'rxjs'; import { MatDialog } from '@angular/material/dialog'; import { SignalKService } from '../signalk.service'; @@ -48,9 +48,11 @@ export class WidgetSimpleLinearComponent implements OnInit, OnDestroy { @ViewChild('background', {static: true, read: ElementRef}) private backgroundElement: ElementRef; @ViewChild('text', {static: true, read: ElementRef}) private textElement: ElementRef; - activeWidget: IWidget; - config: IWidgetSvcConfig; + // widget framework + private activeWidget: IWidget; + public config: IWidgetSvcConfig; + // main gauge value variable public unitsLabel:string = ""; public dataValue: string = "0"; public gaugeValue: Number = 0; @@ -58,7 +60,9 @@ export class WidgetSimpleLinearComponent implements OnInit, OnDestroy { public barColorGradient: string = ""; public barColorBackground: string = ""; - valueSub: Subscription = null; + + private valueSub$: Subscription = null; + private sample: number = 500; // dynamics theme support themeNameSub: Subscription = null; @@ -118,7 +122,7 @@ export class WidgetSimpleLinearComponent implements OnInit, OnDestroy { if (typeof(this.config.paths['gaugePath'].path) != 'string') { return } // nothing to sub to... - this.valueSub = this.signalKService.subscribePath(this.widgetUUID, this.config.paths['gaugePath'].path, this.config.paths['gaugePath'].source).subscribe( + this.valueSub$ = this.signalKService.subscribePath(this.widgetUUID, this.config.paths['gaugePath'].path, this.config.paths['gaugePath'].source).pipe(sampleTime(this.sample)).subscribe( newValue => { if (newValue.value == null) {return} @@ -149,9 +153,9 @@ export class WidgetSimpleLinearComponent implements OnInit, OnDestroy { } unsubscribePath() { - if (this.valueSub !== null) { - this.valueSub.unsubscribe(); - this.valueSub = null; + if (this.valueSub$ !== null) { + this.valueSub$.unsubscribe(); + this.valueSub$ = null; this.signalKService.unsubscribePath(this.widgetUUID, this.config.paths['gaugePath'].path) } }