Options panel update (#266)

mxtommy · Dec 22, 2023 · 8fc884c · 8fc884c
1 parent 9b69971
commit 8fc884c
Show file tree

Hide file tree

Showing 7 changed files with 111 additions and 31 deletions.
diff --git a/src/app/config.demo.const.ts b/src/app/config.demo.const.ts
@@ -93,6 +93,15 @@ export const DemoWidgetConfig: IWidgetConfig = {
             "convertUnitTo": "deg",
             "sampleTime": 500
           },
+          "courseOverGround": {
+            "description": "Course Over Ground",
+            "path": "self.navigation.courseOverGroundTrue",
+            "source": "default",
+            "pathType": "number",
+            "isPathConfigurable": true,
+            "convertUnitTo": "deg",
+            "sampleTime": 500
+          },
           "trueWindAngle": {
             "description": "True Wind Angle",
             "path": "self.environment.wind.angleTrueWater",
@@ -128,13 +137,26 @@ export const DemoWidgetConfig: IWidgetConfig = {
             "isPathConfigurable": true,
             "convertUnitTo": "knots",
             "sampleTime": 500
+          },
+          "nextWaypointBearing": {
+            "description": "Next Waypoint Bearing",
+            "path": 'self.navigation.courseGreatCircle.nextPoint.bearingTrue',
+            "source": 'default',
+            "pathType": "number",
+            "isPathConfigurable": true,
+            "convertUnitTo": "deg",
+            "sampleTime": 500
           }
         },
-        "filterSelfPaths": true,
         "windSectorEnable": true,
-        "windSectorWindowSeconds": 10,
+        "windSectorWindowSeconds": 5,
         "laylineEnable": true,
-        "laylineAngle": 35
+        "laylineAngle": 40,
+        "waypointEnable": true,
+        "courseOverGroundEnable": true,
+        "sailSetupEnable": false,
+        "enableTimeout": false,
+        "dataTimeout": 5
       }
     },
     {

diff --git a/src/app/modal-widget-config/modal-widget-config.component.html b/src/app/modal-widget-config/modal-widget-config.component.html
@@ -89,6 +89,13 @@
               </mat-form-field>
             </div>
           </div>
+          <div class="flex-container">
+            <div class="flex-checkbox" *ngIf="(widgetConfig.courseOverGroundEnable !== undefined)">
+              <mat-checkbox class="fields" name="courseOverGroundEnable" formControlName="courseOverGroundEnable">
+                Show Course Over Ground
+              </mat-checkbox>
+            </div>
+          </div>
           <div class="flex-container">
             <div class="flex-checkbox" *ngIf="(widgetConfig.waypointEnable !== undefined)">
               <mat-checkbox class="fields" name="waypointEnable" formControlName="waypointEnable">

diff --git a/src/app/widgets-interface.ts b/src/app/widgets-interface.ts
@@ -119,6 +119,8 @@ export interface IWidgetSvcConfig {
   laylineAngle?: number;
   /** Used by wind Widget: enable/disable Waypoint UI feature */
   waypointEnable?: boolean;
+  /** Used by wind Widget: enable/disable COG UI feature */
+  courseOverGroundEnable?: boolean;
   /** Used by wind Widget: enable/disable sailSetup UI feature */
   sailSetupEnable?: boolean;
 

diff --git a/src/app/widgets/svg-wind/svg-wind.component.html b/src/app/widgets/svg-wind/svg-wind.component.html
@@ -462,15 +462,30 @@
     <g
        id="vessel">
       <path
-         style="display:inline;fill:none;fill-opacity:1;stroke:url(#linearGradient20477);stroke-width:3.29218;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         style="display:inline;fill:none;fill-opacity:1;stroke:url(#linearGradient20477);stroke-width:3.29218;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.5"
          d="m 290.42597,338.16266 c 2.63751,1.24549 18.13789,-172.91133 -60.18622,-214.49975"
          id="rightSide" />
       <path
-         style="display:inline;fill:none;fill-opacity:1;stroke:url(#linearGradient24749);stroke-width:3.29218;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
+         style="display:inline;fill:none;fill-opacity:1;stroke:url(#linearGradient24749);stroke-width:3.29218;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.5"
          d="m 171.57403,338.16266 c -2.63751,1.24549 -18.13789,-172.91133 60.18622,-214.49975"
          id="LeftSide" />
     </g>
   </g>
+  <!-- Laylines -->
+  <g [style.display]="closeHauledLineEnable ? 'inline' : 'none'"
+     id="LayerLayline"
+     style="display:inline">
+    <path *ngIf="trueWindAngle != null"
+      [attr.d]="closeHauledLineStbdPath"
+       id="PortLayline"
+       style="display:inline;fill:none;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:4px;stroke-opacity:0.6"
+       class="laylines" />
+    <path *ngIf="trueWindAngle != null"
+      [attr.d]="closeHauledLinePortPath"
+       class="laylines"
+       style="display:inline;fill:none;stroke-width:3;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:0;stroke-dasharray:4px;stroke-opacity:0.6"
+       id="StbdLayline" />
+  </g>
 <!-- wind shift sector -->
   <g [style.display]="windSectorEnable ? 'inline' : 'none'"
      style="display:inline"
@@ -486,21 +501,6 @@
       class="wind-sector-stbd"
       style="fill-opacity:0.3;stroke:none;stroke-width:1.90858;stroke-linecap:butt;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:0.483517" />
   </g>
-  <!-- Laylines -->
-  <g [style.display]="closeHauledLineEnable ? 'inline' : 'none'"
-     id="LayerLayline"
-     style="display:inline">
-    <path *ngIf="trueWindAngle != null"
-      [attr.d]="closeHauledLineStbdPath"
-       id="PortLayline"
-       style="display:inline;fill:none;stroke-width:3.06951;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:7.16218;stroke-opacity:1"
-       class="laylines" />
-    <path *ngIf="trueWindAngle != null"
-      [attr.d]="closeHauledLinePortPath"
-       class="laylines"
-       style="display:inline;fill:none;stroke-width:3.06951;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:7.16218;stroke-opacity:1"
-       id="StbdLayline" />
-  </g>
 <!-- Compass -->
   <g
   id="layerCompassHeading"
@@ -754,16 +754,17 @@
       x="68.010208"
       id="tspan7125">330</tspan></text>
   <!-- COG Indicator -->
-  <g id="COGIndicator">
+  <g [style.display]="courseOverGroundActive ? 'inline' : 'none'"
+    id="COGIndicator">
     <path
       id="indicator"
-      style="fill:#ff6600;stroke-width:5.76507;stroke-linecap:square"
+      style="fill:#e600ff;stroke-width:5.76507;stroke-linecap:square"
       d="m 233.42911,73.408997 a 2.5,2.5 0 0 1 -2.5,2.5 2.5,2.5 0 0 1 -2.5,-2.5 2.5,2.5 0 0 1 2.5,-2.5 2.5,2.5 0 0 1 2.5,2.5 z m -11.72079,-40.278243 6.73667,-4.970565 c 1.41548,-1.044398 3.69456,-1.044398 5.11004,0 l 6.73666,4.97056 c 1.41549,1.044397 1.41549,2.725985 0,3.770382 l -6.73667,4.970566 c -1.41547,1.044391 -3.69456,1.044397 -5.11004,0 l -6.73666,-4.97056 c -1.41548,-1.044397 -1.41548,-2.725991 0,-3.770383 z m 6.73255,-4.677026 h 5 v 45.031639 h -5 z"
     />
-    <animateTransform #waypointAnimate attributeName="transform"
+    <animateTransform #courseOverGroundAnimate attributeName="transform"
       type="rotate"
-      [attr.from]="waypoint.oldDegreeIndicator+' 231 231'"
-      [attr.to]="waypoint.newDegreeIndicator+' 231 231'"
+      [attr.from]="courseOverGround.oldDegreeIndicator+' 231 231'"
+      [attr.to]="courseOverGround.newDegreeIndicator+' 231 231'"
       begin="indefinite"
       dur="0.5s"
       additive="replace"

diff --git a/src/app/widgets/svg-wind/svg-wind.component.ts b/src/app/widgets/svg-wind/svg-wind.component.ts
@@ -13,18 +13,17 @@ interface ISVGRotationObject {
   templateUrl: './svg-wind.component.html'
 })
 export class SvgWindComponent implements AfterViewInit {
-
   @ViewChild('compassAnimate', { static: true, read: ElementRef }) compassAnimate!: ElementRef;
   @ViewChild('appWindAnimate', { static: true, read: ElementRef }) appWindAnimate!: ElementRef;
   @ViewChild('trueWindAnimate', { static: true, read: ElementRef }) trueWindAnimate!: ElementRef;
   @ViewChild('appWindValueAnimate', { static: true, read: ElementRef }) appWindValueAnimate!: ElementRef;
   @ViewChild('trueWindValueAnimate', { static: true, read: ElementRef }) trueWindValueAnimate!: ElementRef;
   @ViewChild('waypointAnimate', { static: true, read: ElementRef }) waypointAnimate!: ElementRef;
-  //@ViewChild('laylinePortAnimate') laylinePortAnimate: ElementRef;
-  //@ViewChild('laylineStbAnimate') laylineStbAnimate: ElementRef;
-
+  @ViewChild('courseOverGroundAnimate', { static: true, read: ElementRef }) courseOverGroundAnimate!: ElementRef;
 
   @Input('compassHeading') compassHeading: number;
+  @Input('courseOverGroundAngle') courseOverGroundAngle: number;
+  @Input('courseOverGroundEnable') courseOverGroundEnable: boolean;
   @Input('trueWindAngle') trueWindAngle: number;
   @Input('trueWindSpeed') trueWindSpeed: number;
   @Input('appWindAngle') appWindAngle: number;
@@ -39,7 +38,6 @@ export class SvgWindComponent implements AfterViewInit {
   @Input('trueWindMidHistoric') trueWindMidHistoric: number;
   @Input('trueWindMaxHistoric') trueWindMaxHistoric: number;
 
-
   // Compass faceplate
   compassFaceplate: ISVGRotationObject;
   headingValue: string ="--";
@@ -59,6 +57,10 @@ export class SvgWindComponent implements AfterViewInit {
   waypoint: ISVGRotationObject;
   waypointActive: boolean = false;
 
+  // Course Over Ground
+  courseOverGround: ISVGRotationObject;
+  courseOverGroundActive: boolean = false;
+
   //laylines - Close-Hauled lines
   closeHauledLinePortPath: string = "M 231,231 231,90";
   closeHauledLineStbdPath: string = "M 231,231 231,90";
@@ -103,6 +105,12 @@ export class SvgWindComponent implements AfterViewInit {
       newDegreeIndicator: '0',
       animationElement: undefined
     };
+
+    this.courseOverGround =  {
+      oldDegreeIndicator: '0',
+      newDegreeIndicator: '0',
+      animationElement: undefined
+    };
   }
 
   ngAfterViewInit(): void {
@@ -112,6 +120,7 @@ export class SvgWindComponent implements AfterViewInit {
     this.trueWind.animationElement = this.trueWindAnimate;
     this.trueWindValue.animationElement = this.trueWindValueAnimate;
     this.waypoint.animationElement = this.waypointAnimate;
+    this.courseOverGround.animationElement = this.courseOverGroundAnimate;
   }
 
   ngOnChanges(changes: SimpleChanges) {
@@ -132,6 +141,25 @@ export class SvgWindComponent implements AfterViewInit {
       }
     }
 
+    // CourseOverGroundAngle
+    if (changes.courseOverGroundAngle) {
+      if (this.courseOverGroundEnable == false) {
+        this.courseOverGroundActive = false;
+        return
+      }
+
+      if (!changes.courseOverGroundAngle.firstChange) {
+        if (changes.courseOverGroundAngle.currentValue === null) {
+          this.courseOverGroundActive = false;
+        } else {
+          this.courseOverGroundActive = true;
+          this.courseOverGround.oldDegreeIndicator = this.courseOverGround.newDegreeIndicator;
+          this.courseOverGround.newDegreeIndicator = changes.courseOverGroundAngle.currentValue.toFixed(0);
+          this.smoothCircularRotation(this.courseOverGround);
+        }
+      }
+    }
+
     // WaypointAngle
     if (changes.waypointAngle) {
       if (this.waypointEnable == false) {

diff --git a/src/app/widgets/widget-wind/widget-wind.component.html b/src/app/widgets/widget-wind/widget-wind.component.html
@@ -1,6 +1,8 @@
 <div class="windWrapper">
         <app-svg-wind
             [compassHeading]="currentHeading"
+            [courseOverGroundAngle]="courseOverGroundAngle"
+            [courseOverGroundEnable]="widgetProperties.config.courseOverGroundEnable"
             [trueWindAngle]="trueWindAngle"
             [trueWindSpeed]="trueWindSpeed"
             [appWindAngle]="appWindAngle"

diff --git a/src/app/widgets/widget-wind/widget-wind.component.ts b/src/app/widgets/widget-wind/widget-wind.component.ts
@@ -9,6 +9,7 @@ import { BaseWidgetComponent } from '../../base-widget/base-widget.component';
 })
 export class WidgetWindComponent extends BaseWidgetComponent implements OnInit, OnDestroy  {
   currentHeading: number = 0;
+  courseOverGroundAngle: number = 0;
   appWindAngle: number = 0;
   appWindSpeed: number = 0;
   trueWindAngle: number = 0;
@@ -39,6 +40,15 @@ export class WidgetWindComponent extends BaseWidgetComponent implements OnInit,
           convertUnitTo: "deg",
           sampleTime: 500
         },
+        "courseOverGround": {
+          description: "Course Over Ground",
+          path: 'self.navigation.courseOverGroundTrue',
+          source: 'default',
+          pathType: "number",
+          isPathConfigurable: true,
+          convertUnitTo: "deg",
+          sampleTime: 500
+        },
         "trueWindAngle": {
           description: "True Wind Angle",
           path: 'self.environment.wind.angleTrueWater',
@@ -88,8 +98,9 @@ export class WidgetWindComponent extends BaseWidgetComponent implements OnInit,
       windSectorEnable: true,
       windSectorWindowSeconds: 5,
       laylineEnable: true,
-      laylineAngle: 35,
+      laylineAngle: 40,
       waypointEnable: true,
+      courseOverGroundEnable: true,
       sailSetupEnable: false,
       enableTimeout: false,
       dataTimeout: 5
@@ -105,6 +116,13 @@ export class WidgetWindComponent extends BaseWidgetComponent implements OnInit,
       this.currentHeading = newValue.value;
     });
 
+    this.observeDataStream('courseOverGround', newValue => {
+      if (newValue.value == null) { // act upon data timeout of null
+        newValue.value = 0
+      }
+      this.courseOverGroundAngle = newValue.value;
+    });
+
     this.observeDataStream('nextWaypointBearing', newValue => {
       if (newValue.value < 0) {// stb
         this.waypointAngle = 360 + newValue.value; // adding a negative number subtracts it...