Added Fixed Location operating mode.

For use in a fixed loction i.e. building, etc.

CHANGELOG.md

@@ -3,6 +3,7 @@
 ### v2.2.0
 
 - **Added**: Ability to center a vessel in the Vessels List.
+- **Added**: Fixed Location Mode for when operating from a building or other fixed location.
 
 ### v2.1.0
 

package.json

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

projects/fb-openlayers/src/lib/resources/layer-regions.component.ts

@@ -37,7 +37,7 @@ export class RegionLayerComponent implements OnInit, OnDestroy, OnChanges {
    * Use this to have access to the layer and some helper functions
    */
   @Output() layerReady: AsyncSubject<Layer> = new AsyncSubject(); // AsyncSubject will only store the last value, and only publish it when the sequence is completed
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   @Input() regions: { [key: string]: any };
   @Input() regionStyles: { [key: string]: Style };
   @Input() opacity: number;

projects/fb-openlayers/src/lib/resources/layer-waypoints.component.ts

@@ -248,7 +248,9 @@ export class FreeboardWaypointLayerComponent extends WaypointLayerComponent {
     super(changeDetectorRef, mapComponent);
   }
 
-  parseWaypoints(waypoints: Array<[string, SKWaypoint, boolean]> = this.waypoints) {
+  parseWaypoints(
+    waypoints: Array<[string, SKWaypoint, boolean]> = this.waypoints
+  ) {
     const fa: Feature[] = [];
     for (const w of waypoints) {
       if (w[2]) {

projects/fb-openlayers/src/lib/vessel/layer-vessel.component.ts

@@ -45,6 +45,7 @@ export class VesselComponent implements OnInit, OnDestroy, OnChanges {
   @Input() vesselStyles: { [key: string]: Style };
   @Input() vesselLines: { [key: string]: Array<Coordinate> };
   @Input() showWind = false;
+  @Input() fixedLocation: boolean;
   @Input() opacity: number;
   @Input() visible: boolean;
   @Input() extent: Extent;
@@ -162,7 +163,11 @@ export class VesselComponent implements OnInit, OnDestroy, OnChanges {
     if (s) {
       const im = (s as Style).getImage();
       if (im) {
-        im.setRotation(this.heading);
+        if (this.fixedLocation) {
+          im.setRotation(0);
+        } else {
+          im.setRotation(this.heading);
+        }
       }
       this.vessel.setStyle(s);
     }
@@ -186,13 +191,19 @@ export class VesselComponent implements OnInit, OnDestroy, OnChanges {
     });
 
     if (this.vesselStyles) {
-      if (this.activeId && this.activeId !== this.id) {
-        if (this.vesselStyles.inactive) {
-          cs = this.vesselStyles.inactive;
+      if (this.fixedLocation) {
+        if (this.vesselStyles.fixed) {
+          cs = this.vesselStyles.fixed;
         }
       } else {
-        if (this.vesselStyles.default) {
-          cs = this.vesselStyles.default;
+        if (this.activeId && this.activeId !== this.id) {
+          if (this.vesselStyles.inactive) {
+            cs = this.vesselStyles.inactive;
+          }
+        } else {
+          if (this.vesselStyles.default) {
+            cs = this.vesselStyles.default;
+          }
         }
       }
     } else if (this.layerProperties && this.layerProperties.style) {

src/app/app.info.ts

@@ -43,6 +43,8 @@ const FreeboardConfig = {
     animate: false,
     limitZoom: false
   },
+  fixedLocationMode: true,
+  fixedPosition: [0, 0],
   vesselTrail: false, // display trail
   vesselWindVectors: true, // display vessel TWD, AWD vectors
   aisTargets: true, // display ais targets
@@ -260,7 +262,7 @@ export class AppInfo extends Info {
     this.name = 'Freeboard';
     this.shortName = 'freeboard';
     this.description = `Signal K Chart Plotter.`;
-    this.version = '2.1.0';
+    this.version = '2.2.0';
     this.url = 'https://github.com/signalk/freeboard-sk';
     this.logo = './assets/img/app_logo.png';
 
@@ -513,6 +515,11 @@ export class AppInfo extends Info {
     this.debug(value);
     if (value.action === 'load' && value.setting === 'config') {
       this.cleanConfig(this.config);
+      if (this.config.fixedLocationMode) {
+        this.data.vessels.self.position = [...this.config.fixedPosition];
+        this.data.vessels.showSelf = true;
+        this.config.map.center = [...this.config.fixedPosition];
+      }
     }
   }
 
@@ -572,6 +579,13 @@ export class AppInfo extends Info {
   cleanConfig(settings) {
     this.debug('Cleaning config keys...');
 
+    if (typeof settings.fixedLocationMode === 'undefined') {
+      settings.fixedLocationMode = false;
+    }
+    if (typeof settings.fixedPosition === 'undefined') {
+      settings.fixedPosition = [0, 0];
+    }
+
     if (typeof settings.map.limitZoom === 'undefined') {
       settings.map.limitZoom = false;
     }

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

@@ -440,6 +440,7 @@
     [vesselLines]="vesselLines"
     [showWind]="app.config.vesselWindVectors"
     [vesselStyles]="featureStyles.vessel"
+    [fixedLocation]="app.config.fixedLocationMode"
     [zIndex]="213"
   >
   </fb-vessel>

src/app/modules/map/mapconfig.ts

@@ -53,6 +53,17 @@ export const vesselStyles = {
       scale: 0.75,
       rotateWithView: true
     })
+  }),
+  fixed: new Style({
+    image: new Icon({
+      src: './assets/img/fixed_location.png',
+      anchor: [22.5, 50],
+      anchorXUnits: 'pixels',
+      anchorYUnits: 'pixels',
+      size: [50, 50],
+      scale: 0.75,
+      rotateWithView: false
+    })
   })
 };
 

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

@@ -424,6 +424,67 @@
         <div class="setting-group" id="sectVessels">
           <div class="setting-group-title">VESSEL</div>
           <mat-card class="setting-card">
+            <div class="setting-card-row-item">
+              <fieldset>
+                <legend>
+                  <mat-checkbox
+                    #vesselfixedlocationmode
+                    color="primary"
+                    [(ngModel)]="facade.settings.fixedLocationMode"
+                    (change)="onFormChange($event, vesselfixedlocationmode)"
+                    label="after"
+                    matTooltip="e.g. Building, Camp, etc."
+                  >
+                    Fixed Location Mode
+                  </mat-checkbox>
+                </legend>
+                <div class="setting-card-row" style="padding-bottom: 10px">
+                  <div class="setting-card-row-item">
+                    <mat-form-field>
+                      <mat-label>Latitude</mat-label>
+                      <input
+                        matInput
+                        type="number"
+                        #fixedlat="ngModel"
+                        required
+                        pattern="^-?([1-8]?[0-9])(\.\d{1,9})?$"
+                        [(ngModel)]="facade.settings.fixedPosition[1]"
+                        (change)="onFormChange($event, fixedlat)"
+                        [disabled]="false"
+                        min="-90"
+                        max="90"
+                      />
+                      <mat-error
+                        *ngIf="fixedlat.invalid && (fixedlat.dirty || fixedlat.touched)"
+                      >
+                        Please enter a value between -90 and 90 (max 9 decimals)
+                      </mat-error>
+                    </mat-form-field>
+                    <mat-form-field>
+                      <mat-label>Longitude</mat-label>
+                      <input
+                        matInput
+                        type="number"
+                        #fixedlon="ngModel"
+                        required
+                        pattern="^-?(1[0-7]?[0-9]|[1-9]?[0-9])(\.\d{1,9})?$"
+                        [(ngModel)]="facade.settings.fixedPosition[0]"
+                        (change)="onFormChange($event, fixedlon)"
+                        [disabled]="false"
+                        min="-180"
+                        max="180"
+                      />
+                      <mat-error
+                        *ngIf="fixedlon.invalid && (fixedlon.dirty || fixedlon.touched)"
+                      >
+                        Please enter a value between -180 and 180 (max 9
+                        decimals)
+                      </mat-error>
+                    </mat-form-field>
+                  </div>
+                </div>
+              </fieldset>
+            </div>
             <br />
             <div class="setting-card-row-item">
               <mat-checkbox

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

@@ -154,11 +154,11 @@ export class SettingsFacade {
       this.app.config.chartApi = 1;
     }
     this.app.settings$.subscribe((r: SettingsMessage) => {
-      if (r.setting == 'config') {
-        if (r.action == 'load') {
+      if (r.setting === 'config') {
+        if (r.action === 'load') {
           this.configLoadedSource.next(r);
         }
-        if (r.action == 'save') {
+        if (r.action === 'save') {
           this.configSavedSource.next(r);
         }
       }

src/app/modules/skstream/skstream.facade.ts

@@ -279,6 +279,9 @@ export class SKStreamFacade {
 
   private parseVesselSelf(v: SKVessel) {
     this.app.data.vessels.self = v;
+    if (this.app.config.fixedLocationMode) {
+      this.app.data.vessels.self.position = [...this.app.config.fixedPosition];
+    }
     this.processVessel(this.app.data.vessels.self);
     this.alarmsFacade.updateAnchorStatus();
   }

src/assets/help/index.html

@@ -401,7 +401,8 @@ <h4>Display</h4>
             <li class="nobullet">
               <i class="material-icons">zoom_in_map</i>
               <b>Constrain map zoom:</b>
-              Limit minimum and maximum zoom levels to the zoom extent of the selected charts.
+              Limit minimum and maximum zoom levels to the zoom extent of the
+              selected charts.
             </li>
 
             <li class="nobullet">
@@ -1686,12 +1687,18 @@ <h4><i class="material-icons">settings</i> Settings</h4>
           <b>VESSEL:</b><br />
           This section provides choices when displaying data for the vessel.<br />
           <img
-            src="./img/settings_other_vessels.png"
+            src="./img/settings_vessels.png"
             style="height: 350px"
             alt=""
           /><br />
 
           <ul>
+            <li>
+              <b>Fixed Location Mode</b>: Select when operating from a fixed location e.g. building, etc. <br/>
+              Selecting this mode will change the vessel icon to <img src="../img/fixed_location.png" width="30px"/>
+              <br />
+              Enter the latitude and longitude of the fixed location.
+            </li>
             <li>
               <b>Display Wind Vectors</b>: Select to display wind vectors for
               the vessel on the map.
@@ -1734,6 +1741,11 @@ <h4><i class="material-icons">settings</i> Settings</h4>
           <b>OTHER VESSELS:</b><br />
           This section provides choices when displaying data for other
           vessels.<br />
+          <img
+            src="./img/settings_other_vessels.png"
+            style="height: 200px"
+            alt=""
+          /><br />
           <li>
             <b>Mark AIS Target inactive after</b>: Maximum time (in minutes)
             elapsed between updates before the vessel is displayed as inactive.