AIS COG line and Flag

CHANGELOG.md

@@ -1,5 +1,13 @@
 # CHANGELOG: Freeboard
 
+### v2.11.0
+
+- **Added**: COG vector for AIS vessels. (#180)
+- **Added**: Flag / Un-flag AIS vessels. (#165)
+- **Added**: Initial support for `navigation.racing`. _(Display start line)_
+- **Updated**: Improved AIS target processing.
+- **Fixed**: AIS vessels not correctly oriented when preferred path is not available. (#182)
+
 ### v2.10.0
 
 - **Updated**: Scale up AIS icon sizes (#180).
@@ -10,7 +18,6 @@
 - **Updated**: S57 chart styles (@wdantuma).
 - **Updated**: Angular framework to v18 & Material 3
 
-
 ### v2.9.1
 
 - **Added**: Ability to filter vessels by `AIS Ship Type` (#163).

src/app/app.component.html

@@ -67,12 +67,12 @@
     </mat-menu>
 
     <mat-menu #settingsmenu="matMenu">
-      @if(app.config.vessel.trail && app.data.trail.length !== 0) {
+      @if(app.config.selections.vessel.trail && app.data.trail.length !== 0) {
       <a mat-menu-item (click)="clearTrail(app.data.serverTrail)">
         <mat-icon>clear_all</mat-icon>
         <span>{{ app.data.serverTrail ? 'Refresh' : 'Clear' }} Trail</span>
       </a>
-      } @if(app.config.vessel.trail && app.data.trail.length !== 0) {
+      } @if(app.config.selections.vessel.trail && app.data.trail.length !== 0) {
       <a mat-menu-item (click)="trailToRoute()">
         <mat-icon>insights</mat-icon>
         <span>Trail to Route</span>

src/app/app.component.ts

@@ -630,7 +630,7 @@ export class AppComponent {
 
   // ** process local vessel trail **
   private processTrail(trailData?) {
-    if (!this.app.config.vessel.trail) {
+    if (!this.app.config.selections.vessel.trail) {
       return;
     }
     // ** update vessel trail **
@@ -739,7 +739,7 @@ export class AppComponent {
         );
       }
       // ** trail **
-      if (this.app.config.vessel.trail) {
+      if (this.app.config.selections.vessel.trail) {
         // show trail
         if (this.app.config.selections.trailFromServer) {
           this.skres.getVesselTrail();

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.10.0';
+    this.version = '2.11.0';
     this.url = 'https://github.com/signalk/freeboard-sk';
     this.logo = './assets/img/app_logo.png';
 
@@ -203,7 +203,11 @@ export class AppInfo extends Info {
       server: null,
       lastGet: null, // map position of last resources GET
       map: {
-        suppressContextMenu: false
+        suppressContextMenu: false,
+        atClick: {
+          features: [],
+          lonlat: [0, 0]
+        }
       },
       vessels: {
         // received vessel data
@@ -214,7 +218,8 @@ export class AppInfo extends Info {
         activeId: null,
         active: null,
         closest: { id: null, distance: null, timeTo: null, position: [0, 0] },
-        prefAvailablePaths: {} // preference paths available from source
+        prefAvailablePaths: {}, // preference paths available from source,
+        flagged: [] // flagged ais targets
       },
       aircraft: new Map(), // received AIS aircraft data
       atons: new Map(), // received AIS AtoN data
@@ -244,6 +249,10 @@ export class AppInfo extends Info {
         activeRoutePoints: [],
         destPointName: ''
       },
+      racing: {
+        startLine: [],
+        finishLine: []
+      },
       anchor: {
         // ** anchor watch
         raised: true,
@@ -286,7 +295,7 @@ export class AppInfo extends Info {
         switch (res.action) {
           case 'db_init':
             if (res.value) {
-              if (this.config.vessel.trail) {
+              if (this.config.selections.vessel.trail) {
                 this.db.getTrail().then((t) => {
                   this.data.trail = t && t.value ? t.value : [];
                 });

src/app/app.messages.ts

@@ -1,21 +1,21 @@
 const WHATS_NEW = [
   {
     type: 'signalk-server-node',
-    title: 'Material 3.0 Theming',
+    title: 'AIS Vessels',
     message: `
-        Freeboard-SK user interface now uses Material 3 themes. 
+        The following new features have been added:
         <br>&nbsp;<br>
-        The result is a refreshed user interface appearance, components and light / dark themes.
+        <li>Ability to Flag vessels.</li>
+        <li>COG line is now displayed for AIS vessels.</li>
       `
   },
   {
     type: 'signalk-server-node',
-    title: 'S57 Updates',
+    title: 'Racing Support',
     message: `
-        This release contains updates to S57 map styles:
+        This release contains initial support for <i>navigation.racing</i> paths.
         <br>&nbsp;<br>
-        <li>Show only layers from Base and Standard categories.</li>
-        <li>Buoy top markings.</li>
+        <li>Display start line.</li>
       `
   }
 ];

src/app/app.settings.ts

@@ -24,32 +24,44 @@ export function cleanConfig(
     settings.fixedPosition = [0, 0];
   }
 
-  if (typeof settings.vessel === 'undefined') {
-    settings.vessel = {
+  // changeover 2.10.1 - for removal
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  if (typeof (settings as any).vessel !== 'undefined') {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    settings.selections.vessel = Object.assign({}, (settings as any).vessel);
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    delete (settings as any).vessel;
+  }
+
+  if (typeof settings.selections.vessel === 'undefined') {
+    settings.selections.vessel = {
       trail: true,
       windVectors: true,
       laylines: false,
-      cogLine: 0,
+      cogLine: 10,
+      aisCogLine: 10,
       headingLineSize: -1
     };
   }
-  if (typeof settings.vessel.laylines === 'undefined') {
-    settings.vessel.laylines = false;
+  if (typeof settings.selections.vessel.laylines === 'undefined') {
+    settings.selections.vessel.laylines = false;
   }
 
   // changeover 2.7 - for removal
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   if (typeof (settings as any).vesselTrail !== 'undefined') {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    settings.vessel.trail = (settings as any).vesselTrail;
+    settings.selections.vessel.trail = (settings as any).vesselTrail;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     delete (settings as any).vesselTrail;
   }
   // changeover 2.7 - for removal
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   if (typeof (settings as any).vesselWindVectors !== 'undefined') {
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    settings.vessel.windVectors = (settings as any).vesselWindVectors;
+    settings.selections.vessel.windVectors = (
+      settings as any
+    ).vesselWindVectors;
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
     delete (settings as any).vesselWindVectors;
   }
@@ -304,13 +316,6 @@ export const DefaultConfig: IAppConfig = {
     speed: 'kn',
     temperature: 'c'
   },
-  vessel: {
-    trail: false, // display trail
-    windVectors: true, // display vessel TWD, AWD vectors
-    laylines: false,
-    cogLine: 0, // display COG line
-    headingLineSize: -1 // mode for display of heading line -1 = default
-  },
   selections: {
     // ** saved selections
     routes: [],
@@ -326,6 +331,14 @@ export const DefaultConfig: IAppConfig = {
       heading: 'navigation.courseOverGroundTrue',
       course: 'navigation.courseGreatCircle'
     },
+    vessel: {
+      trail: false, // display trail
+      windVectors: true, // display vessel TWD, AWD vectors
+      laylines: false,
+      cogLine: 10, // display COG line
+      aisCogLine: 10,
+      headingLineSize: -1 // mode for display of heading line -1 = default
+    },
     positionFormat: 'XY',
     aisTargets: null,
     aisTargetTypes: [],
@@ -428,13 +441,6 @@ export interface IAppConfig {
     speed: 'kn' | 'msec' | 'kmh' | 'mph';
     temperature: 'c' | 'f';
   };
-  vessel: {
-    trail: boolean; // display trail
-    windVectors: boolean; // display vessel TWD, AWD vectors
-    laylines: boolean;
-    cogLine: number; // (minutes) length = cogLine * sog
-    headingLineSize: number; // mode for display of heading line -1 = default
-  };
   selections: {
     // ** saved selections
     routes: string[];
@@ -450,6 +456,14 @@ export interface IAppConfig {
       heading: string;
       course: string;
     };
+    vessel: {
+      trail: boolean; // display trail
+      windVectors: boolean; // display vessel TWD, AWD vectors
+      laylines: boolean;
+      cogLine: number; // (minutes) length = cogLine * sog
+      aisCogLine: number; // (minutes) length = cogLine * sog
+      headingLineSize: number; // mode for display of heading line -1 = default
+    };
     positionFormat: 'XY' | 'SHDd' | 'HDd' | 'DMdH' | 'HDMS' | 'DHMS';
     aisTargets: string[];
     aisTargetTypes: number[];

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

@@ -5,10 +5,11 @@
   [olControls]="fbMap.controls"
   [setFocus]="fbMap.focus"
   (mapSingleClick)="onMapMouseClick($event)"
+  (mapRightClick)="onMapMouseRightClick($event)"
   (mapMoveEnd)="onMapMove($event)"
   (mapPointerMove)="onMapPointerMove($event)"
   (mapPointerDrag)="onMapPointerDrag()"
-  (contextmenu)="onMapRightClick($event)"
+  (contextmenu)="onContextMenu($event)"
   olView
   [zoom]="fbMap.zoomLevel"
   [center]="fbMap.center"
@@ -237,6 +238,24 @@
   @if(app.config.aisTargets) {
   <div>
     @if(app.config.selections.aisProfile === 0) {
+    <sk-ais-flags
+      [flagged]="app.data.vessels.flagged"
+      [targetContext]="'vessels'"
+      [targets]="dfeat.ais"
+      [mapZoom]="fbMap.zoomLevel"
+      [labelMinZoom]="this.app.config.selections.labelsMinZoom"
+      [focusId]="app.data.vessels.activeId"
+      [filterIds]="app.config.selections.aisTargets"
+      [filterByShipType]="app.config.selections.aisFilterByShipType"
+      [filterShipTypes]="app.config.selections.aisTargetTypes"
+      [updateIds]="aisMgr.updateList"
+      [staleIds]="aisMgr.staleList"
+      [removeIds]="aisMgr.removeList"
+      [inactiveTime]="app.config.selections.aisStaleAge"
+      [zIndex]="221"
+      [darkMode]="app.config.map.invertColor"
+    >
+    </sk-ais-flags>
     <sk-ais-vessels
       [darkMode]="app.config.map.invertColor"
       [targets]="dfeat.ais"
@@ -298,6 +317,18 @@
   }
   <!-- /Signal K targets -->
 
+  <!-- Racing -->
+  <racing-start-line
+    [startLine]="app.data.racing.startLine"
+    [racecourseStyles]="featureStyles.raceCourse"
+    [darkMode]="app.config.map.invertColor"
+    [labelMinZoom]="this.app.config.selections.labelsMinZoom"
+    [mapZoom]="fbMap.zoomLevel"
+    [zIndex]="123"
+  >
+  </racing-start-line>
+  <!-- /Racing -->
+
   <!-- Regions -->
   <fb-regions
     [darkMode]="app.config.map.invertColor"
@@ -479,7 +510,7 @@
     [layerProperties]=""
   >
   </fb-xte-path>
-  } @if(dfeat.navData.position && app.config.vessel.laylines) {
+  } @if(dfeat.navData.position && app.config.selections.vessel.laylines) {
   <fb-layline
     [lines]="vesselLines.laylines"
     [laylineStyles]="featureStyles.layline"
@@ -526,14 +557,14 @@
     [id]="'' + app.data.selfId"
     [activeId]="app.data.vessels.activeId"
     [vesselLines]="vesselLines"
-    [showWind]="app.config.vessel.windVectors"
+    [showWind]="app.config.selections.vessel.windVectors"
     [vesselStyles]="featureStyles.vessel"
     [fixedLocation]="app.config.fixedLocationMode"
     [zIndex]="250"
   >
   </fb-vessel>
 
-  @if(app.config.vessel.trail && app.data.vessels.showSelf) {
+  @if(app.config.selections.vessel.trail && app.data.vessels.showSelf) {
   <fb-vessel-trail
     [localTrail]="vesselLines.trail"
     [serverTrail]="dfeat.trail"
@@ -582,7 +613,7 @@
       (click)="onContextMenuAction('add_note', item)"
       (contextmenu)="$event.preventDefault()"
     >
-      <mat-icon style="color: orange">local_offer</mat-icon>
+      <mat-icon>local_offer</mat-icon>
       Add Note here
     </button>
     }
@@ -598,7 +629,7 @@
     </button>
     <mat-divider></mat-divider>
 
-    @if(app.config.vessel.trail && app.data.trail.length !== 0) {
+    @if(app.config.selections.vessel.trail && app.data.trail.length !== 0) {
     <button mat-menu-item (click)="onContextMenuAction('cleartrail', item)">
       <mat-icon>clear_all</mat-icon>
       <span>{{ app.data.serverTrail ? 'Refresh' : 'Clear' }} Trail</span>