resource formatting

CHANGELOG.md

@@ -1,9 +1,15 @@
 # CHANGELOG: Freeboard
 
-### v2.12.3
+### v2.13.0
+- **New**: Use of maritime icons from [OpenBridge](https://www.figma.com/community/file/1445713209741917748)
+- **New**: Support for Signal K [Autopilot API](https://demo.signalk.org/documentation/develop/rest-api/open_api.html).
+- **New**: Display different Note icons when "skIcon" property is an Active Captain POI type.
 - **Fixed**: Navigation data panel alignment on smaller screens. (#212)
 - **Fixed**: Notes popover disables move & delete buttons when readOnly property is set. (#214)
-- **Added**: Additional aisCogLine length options. (#209)
+- **Updated**: Resource Set feature popover formatting. (#213)
+- **Updated**: Show more / less ui icons. (#217)
+- **Updated**: Relocated close button on resource lists. (#218)
+- **Updated**: Additional aisCogLine length options. (#209)
 - **Added**: Configuration to retrieve only the Resource Set features that fall within a specified radius of the map center. (#207)
 
 

README.md

@@ -77,6 +77,19 @@ Whilst not specifically defined in the Signal K specification, Freeboard-SK supp
 
 ---
 
+### Autopilot Console:  
+
+Freeboard-SK supports the Signal K Autopilot API which enables common operations to be performed
+including:
+- Engage / Disengage the autopilot
+- Setting the operation mode e.g. compass, route, gps, etc.
+- Setting and adjusting the target heading
+- Dodging obstacles
+
+![image](https://github.com/user-attachments/assets/e771fa83-92cd-4e65-ad78-a349646049c8)
+
+---
+
 ### Alarms and Notifications:
 
 Freeboard-SK can display alarms _(visual and audio)_ & messages contained in *Notification* messages transmitted by the Signal K server.

package.json

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

src/app-theme.scss

@@ -94,6 +94,7 @@ html {
     }
     .icon-route {
         color: green !important;
+        stroke: green !important;
     }
     .icon-waypoint,
     .icon-accent {
@@ -107,6 +108,11 @@ html {
         color: red !important;
     }
 
+    .ob path {
+        stroke: mat.get-theme-color($light-theme, on-surface) !important;
+        fill: mat.get-theme-color($light-theme, on-surface) !important;
+    }
+
     .button-primary {
         background-color: mat.get-theme-color($light-theme, primary) !important;
         color: white !important;
@@ -124,13 +130,27 @@ html {
         background-color: mat.get-theme-color($light-theme, error) !important;
         color: white !important;
     }
+    .button-primary .ob path,
+    .button-secondary .ob path,
+    .button-tertiary .ob path,
+    .button-error .ob path,
+    .button-warn .ob path {
+        stroke: white !important;
+        fill: white !important;
+    }
     .button-accent {
         background-color: orange!important;
         color: black !important;
     }
     .button-toolbar {
         background-color: #e0e0ff !important;
         color: black !important;
+
+    }
+    .button-accent .ob path,
+    .button-toolbar .ob path {
+        stroke: black !important;
+        fill: black !important;
     }
 
     .about-row .item a,
@@ -195,5 +215,23 @@ html {
     .welcome .step-other {
         color: mat.get-theme-color($dark-theme, secondary);
     }
+
+    .ob path {
+        stroke: mat.get-theme-color($dark-theme, on-surface) !important;
+        fill: mat.get-theme-color($dark-theme, on-surface) !important;
+    }
+    .button-primary .ob path,
+    .button-secondary .ob path,
+    .button-tertiary .ob path,
+    .button-error .ob path,
+    .button-warn .ob path {
+        stroke: white !important;
+        fill: white !important;
+    }
+    .button-accent .ob path,
+    .button-toolbar .ob path  {
+        stroke: black !important;
+        fill: black !important;
+    }
   }
 }

src/app/app.component.html

@@ -6,7 +6,7 @@
         mat-menu-item
         (click)="sidemenu.close(); displayLeftMenu('routeList', true)"
       >
-        <mat-icon class="icon-route">directions</mat-icon>
+        <mat-icon class="icon-route" svgIcon="route"></mat-icon>
         &nbsp;Routes
       </button>
       <button
@@ -33,8 +33,8 @@
 
       <mat-divider></mat-divider>
       <button mat-menu-item (click)="sidemenu.close(); saveToGPX()">
-        <mat-icon>save</mat-icon>
-        &nbsp;Save to GPX
+        <mat-icon class="ob" svgIcon="route-export"></mat-icon>
+        &nbsp;Export
       </button>
 
       @if(app.config.resources.paths.length !== 0) {
@@ -57,7 +57,10 @@
               sidemenu.close(); openExperiment({ choice: p, value: null })
             "
           >
-            <mat-icon>category</mat-icon>
+            <mat-icon
+              class="ob"
+              svgIcon="chart-display-settings-iec"
+            ></mat-icon>
             &nbsp;{{ p }}
           </button>
           } }
@@ -129,11 +132,11 @@
       </a>
       <mat-divider></mat-divider>
       <a mat-menu-item (click)="drawStart('route')">
-        <mat-icon class="icon-route">directions</mat-icon>
+        <mat-icon class="icon-route" svgIcon="route-planning"></mat-icon>
         <span>Draw Route</span>
       </a>
       <a mat-menu-item (click)="app.data.buildRoute.show = true">
-        <mat-icon class="icon-route">directions</mat-icon>
+        <mat-icon class="icon-route" svgIcon="route-planning"></mat-icon>
         <span>Build Route</span>
       </a>
       <mat-divider></mat-divider>
@@ -210,7 +213,7 @@
 
             <ap-file-input [astext]="true" (chosen)="processGPX($event)">
               <a mat-list-item>
-                <mat-icon>streetview</mat-icon>
+                <mat-icon class="ob" svgIcon="route-import"></mat-icon>
                 &nbsp;Load GPX
               </a>
             </ap-file-input>
@@ -223,7 +226,10 @@
             </ap-file-input>
 
             <a mat-list-item (click)="sidemenu.close(); uploadResources()">
-              <mat-icon>category</mat-icon>
+              <mat-icon
+                class="ob"
+                svgIcon="chart-display-settings-iec"
+              ></mat-icon>
               &nbsp;Load Resource
             </a>
 
@@ -426,8 +432,12 @@
                 "
                 matTooltipPosition="right"
               >
-                <mat-icon>
-                  {{ app.config.map.northUp ? 'navigation' : 'explore' }}
+                <mat-icon
+                  class="ob"
+                  [svgIcon]="
+                    app.config.map.northUp ? 'heading-n-up' : 'heading-h-up'
+                  "
+                >
                 </mat-icon>
               </button>
             </div>
@@ -447,7 +457,7 @@
                 "
                 matTooltipPosition="right"
               >
-                <mat-icon> my_location </mat-icon>
+                <mat-icon class="ob" svgIcon="cent-iec"></mat-icon>
               </button>
             </div>
             @if(!app.config.map.moveMap) {
@@ -955,7 +965,7 @@
                     matTooltip="Course Settings"
                     (click)="openCourseSettings()"
                   >
-                    <mat-icon>settings</mat-icon>
+                    <mat-icon class="ob" svgIcon="navigation-route"></mat-icon>
                   </button>
                   <br />
                   <button

src/app/app.component.ts

@@ -1,6 +1,7 @@
 import { Component, ViewChild } from '@angular/core';
 import { HttpErrorResponse } from '@angular/common/http';
 import { MatDialog } from '@angular/material/dialog';
+import { MatIconRegistry } from '@angular/material/icon';
 import { MatBottomSheet } from '@angular/material/bottom-sheet';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
 import { OverlayContainer } from '@angular/cdk/overlay';
@@ -58,6 +59,8 @@ import {
   Position
 } from './types';
 import { Feature } from 'ol';
+import { SignalKIcons } from './modules/map/signalk-icons';
+import { OpenBridgeIcons } from './app.icons';
 
 interface DrawEndEvent {
   coordinates: LineString | Position | Polygon;
@@ -136,14 +139,24 @@ export class AppComponent {
     private stream: SKStreamFacade,
     public skres: SKResources,
     public skresOther: SKOtherResources,
+    private skIcons: SignalKIcons,
     public signalk: SignalKClient,
     private dom: DomSanitizer,
     private overlayContainer: OverlayContainer,
     private bottomSheet: MatBottomSheet,
-    private dialog: MatDialog
+    private dialog: MatDialog,
+    private iconReg: MatIconRegistry
   ) {
     // set self to active vessel
     this.app.data.vessels.active = this.app.data.vessels.self;
+
+    // load custom icons
+    OpenBridgeIcons.ids.forEach((s: string) => {
+      this.iconReg.addSvgIcon(
+        s.slice(0, s.indexOf('.')),
+        this.dom.bypassSecurityTrustResourceUrl(`${OpenBridgeIcons.path}/${s}`)
+      );
+    });
   }
 
   // ********* LIFECYCLE ****************
@@ -641,6 +654,7 @@ export class AppComponent {
         this.app.data.anchor.hasApi = true;
       }
     );
+    this.skIcons.init();
   }
 
   // ** start trail / AIS timers

src/app/app.icons.ts

@@ -0,0 +1,18 @@
+// OpenBridge Components
+
+export const OpenBridgeIcons = {
+  path: '../assets/img/ob',
+  ids: [
+    'cent-iec.svg',
+    'cent-off-iec.svg',
+    'chart-display-settings-iec.svg',
+    'heading-h-up.svg',
+    'heading-n-up.svg',
+    'navigation-route.svg',
+    'route.svg',
+    'route-export.svg',
+    'route-import.svg',
+    'route-planning.svg',
+    'whale.svg'
+  ]
+};

src/app/app.info.ts

@@ -167,7 +167,7 @@ export class AppInfo extends Info {
     this.name = 'Freeboard-SK';
     this.shortName = 'Freeboard';
     this.description = `Signal K Chart Plotter.`;
-    this.version = '2.12.3';
+    this.version = '2.13.0';
     this.url = 'https://github.com/signalk/freeboard-sk';
     this.logo = './assets/img/app_logo.png';
 
@@ -272,6 +272,9 @@ export class AppInfo extends Info {
         hasApi: false, // Server implements Autopilot API
         isLocal: false // FB AP API
       },
+      skIcons: {
+        hasApi: false
+      },
       buildRoute: {
         show: false
       },

src/app/app.messages.ts

@@ -1,21 +1,19 @@
 const WHATS_NEW = [
-  /*{
+  {
     type: 'signalk-server-node',
-    title: 'Chart Sources',
+    title: 'Autopilot API',
     message: `
-        Initial support for defining the following chart sources directly 
-        from the Chart List:
-        <li>WMTS (WebMap Tile Server)</li>
-        <li>TileJSON</li>
-        <li>Mapbox Style</li>
-        <br>
-        <i>Note: This functionality requires an upcoming release of 
-        Signal K Server.</i>
+        This release includes support for the new Signal K Autopilot API.
         <br>&nbsp;<br>
-        See <a href="assets/help/index.html" target="help">HELP</a> 
-                  for more details.
+        <i>Note: PyPilot support in the Freeboard-SK plugin will be DEPRECATED 
+          in a future version.<br>
+          This is functionality is replaced by the <a href="https://github.com/panaaj/pypilot-autopilot-provider" target="blank">
+          pypilot autopilot provider plugin</a>.
+        </i>
+        <br>&nbsp;<br>
+        See Signal K server help for more details.
       `
-  }*/
+  }
 ];
 
 export const WELCOME_MESSAGES = {

src/app/modules/course/course-settings.ts

@@ -53,7 +53,7 @@ import { Subscription } from 'rxjs';
     <div class="_ap-course">
       <mat-toolbar style="background-color: transparent">
         <span>
-          <mat-icon>settings</mat-icon>
+          <mat-icon class="ob" svgIcon="navigation-route"></mat-icon>
         </span>
         <span style="flex: 1 1 auto; padding-left:20px;text-align:center;">
           {{ data.title }}