Display of AIS COG vector does not honor setting value.

Added separate setting for AIS COG vector.

CHANGELOG.md

@@ -1,5 +1,10 @@
 # CHANGELOG: Freeboard
 
+### v2.11.1
+
+- **Fixed**: Display of AIS COG vector does not honor setting value. (#180)
+- **Added**: Separate setting for AIS COG vector.
+
 ### v2.11.0
 
 - **Added**: COG vector for AIS vessels. (#180)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@signalk/freeboard-sk",
-  "version": "2.11.0",
+  "version": "2.11.1",
   "description": "Openlayers chart plotter implementation for Signal K",
   "keywords": [
     "signalk-webapp",

src/app/app.info.ts

@@ -160,7 +160,7 @@ export class AppInfo extends Info {
     this.name = 'Freeboard-SK';
     this.shortName = 'Freeboard';
     this.description = `Signal K Chart Plotter.`;
-    this.version = '2.11.0';
+    this.version = '2.11.1';
     this.url = 'https://github.com/signalk/freeboard-sk';
     this.logo = './assets/img/app_logo.png';
 

src/app/app.settings.ts

@@ -46,6 +46,9 @@ export function cleanConfig(
   if (typeof settings.selections.vessel.laylines === 'undefined') {
     settings.selections.vessel.laylines = false;
   }
+  if (typeof settings.selections.vessel.aisCogLine === 'undefined') {
+    settings.selections.vessel.aisCogLine = 10;
+  }
 
   // changeover 2.7 - for removal
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -335,8 +338,8 @@ export const DefaultConfig: IAppConfig = {
       trail: false, // display trail
       windVectors: true, // display vessel TWD, AWD vectors
       laylines: false,
-      cogLine: 10, // display COG line
-      aisCogLine: 10,
+      cogLine: 10, // self COG line time (mins)
+      aisCogLine: 10, // self COG line time (mins)
       headingLineSize: -1 // mode for display of heading line -1 = default
     },
     positionFormat: 'XY',

src/app/modules/map/fb-map.component.html

@@ -296,6 +296,7 @@
       [filterIds]="app.config.selections.aisTargets"
       [filterByShipType]="app.config.selections.aisFilterByShipType"
       [filterShipTypes]="app.config.selections.aisTargetTypes"
+      [cogLineLength]="app.config.selections.vessel.aisCogLine"
     >
     </sk-ais-vessels>
     }

src/app/modules/map/ol/lib/resources/layer-aisvessels.component.ts

@@ -4,7 +4,9 @@ import {
   Component,
   OnChanges,
   OnDestroy,
-  OnInit
+  OnInit,
+  Input,
+  SimpleChanges
 } from '@angular/core';
 import { Feature } from 'ol';
 import { Style, RegularShape, Fill, Stroke, Circle } from 'ol/style';
@@ -26,6 +28,8 @@ export class AISVesselsLayerComponent
   extends AISBaseLayerComponent
   implements OnInit, OnDestroy, OnChanges
 {
+  @Input() cogLineLength = 0;
+
   constructor(
     protected mapComponent: MapComponent,
     protected changeDetectorRef: ChangeDetectorRef
@@ -38,6 +42,14 @@ export class AISVesselsLayerComponent
     this.labelPrefixes = ['ais-'];
   }
 
+  ngOnChanges(changes: SimpleChanges) {
+    super.ngOnChanges(changes);
+    if ('cogLineLength' in changes) {
+      this.cogLineLength = changes['cogLineLength'].currentValue ?? 0;
+      this.onUpdateTargets(this.extractKeys(this.targets));
+    }
+  }
+
   // reload all Features from this.targets
   override onReloadTargets() {
     this.extractKeys(this.targets).forEach((id) => {
@@ -292,6 +304,6 @@ export class AISVesselsLayerComponent
 
   // ok to show cog lines
   okToRenderCogLines() {
-    return this.mapZoom >= this.labelMinZoom;
+    return this.cogLineLength !== 0 && this.mapZoom >= this.labelMinZoom;
   }
 }

src/app/modules/map/ol/lib/vessel/layer-vessel.component.ts

@@ -270,21 +270,22 @@ export class VesselComponent implements OnInit, OnDestroy, OnChanges {
     if ('cog' in this.vesselLines) {
       this.cogLine = this.updateLine(this.cogLine, this.vesselLines.cog);
       this.cogLine.setStyle((feature: Feature) => {
+        const color = 'rgba(204, 12, 225, 0.7)';
         const geometry = feature.getGeometry() as LineString;
         const styles = [];
         styles.push(
           new Style({
-            stroke: new Stroke({ color: 'rgba(204, 12, 225, 0.7)', width: 1 })
+            stroke: new Stroke({ color: color, width: 1 })
           })
         );
         geometry.forEachSegment((start: Coordinate, end: Coordinate) => {
           styles.push(
             new Style({
               geometry: new Point(end),
               image: new Circle({
-                radius: 3,
+                radius: 2,
                 stroke: new Stroke({
-                  color: 'rgba(204, 12, 225, 0.7)',
+                  color: color,
                   width: 1
                 }),
                 fill: new Fill({ color: 'transparent' })

src/app/modules/settings/components/settings-dialog.html

@@ -837,6 +837,21 @@
                   </mat-checkbox>
                 </div>
 
+                <div class="setting-card-row-item">
+                  <mat-form-field style="width: 100%">
+                    <mat-label>COG Line</mat-label>
+                    <mat-select
+                      #aiscogline
+                      [(value)]="facade.settings.selections.vessel.aisCogLine"
+                      (selectionChange)="onFormChange($event, aiscogline)"
+                    >
+                      @for(i of facade.list.aisCogLine; track i[0]) {
+                      <mat-option [value]="i[0]">{{i[1]}}</mat-option>
+                      }
+                    </mat-select>
+                  </mat-form-field>
+                </div>
+
                 <div class="setting-card-row-item">
                   <mat-form-field style="width: 100%">
                     <mat-label>Display Profile</mat-label>

src/app/modules/settings/settings.facade.ts

@@ -98,6 +98,10 @@ export class SettingsFacade {
       [75000, '40 NM (75km)'],
       [100000, '55 NM (100km)']
     ]),
+    aisCogLine: new Map([
+      [0, 'Off'],
+      [10, 'On']
+    ]),
     aisProfiles: new Map([[0, 'Default']]) //,[1,'Navigation'] ])
   };
 

src/app/modules/skstream/skstream.worker.ts

@@ -936,7 +936,8 @@ function processVessel(d: SKVessel, v, isSelf = false) {
   // ** cog vector **
   const cog = d.cogTrue ?? d.cogMagnetic ?? undefined;
   if (typeof cog !== 'undefined' && d.position) {
-    const cvlen = (d.sog ?? 0) * (vesselPrefs.aisCogLine ?? 10 * 60);
+    const cogLen = isSelf ? vesselPrefs.cogLine : vesselPrefs.aisCogLine;
+    const cvlen = (d.sog ?? 0) * (cogLen * 60);
     d.vectors.cog = [
       d.position,
       GeoUtils.destCoordinate(d.position, cog, cvlen)