Neddle jump fix and data sampling control

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"

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<IZone> = [];
   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 {

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"

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<IZone> = [];
   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;

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,17 +48,21 @@ 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;
   public barColor: string = "";
   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)
     }
   }