2 |
32 |
--------------------------------------------------------------------------------
/src/app/lib/components/wpt-button.component.ts:
--------------------------------------------------------------------------------
1 | import { Component, input } from '@angular/core';
2 | import { MatIconModule } from '@angular/material/icon';
3 | import { MatButtonModule } from '@angular/material/button';
4 | import { MatTooltipModule } from '@angular/material/tooltip';
5 | import { SKResourceService } from 'src/app/modules';
6 | import { Position } from 'src/app/types';
7 |
8 | @Component({
9 | selector: 'wpt-button',
10 | imports: [MatIconModule, MatButtonModule, MatTooltipModule],
11 | template: `
12 |
22 | `,
23 | styles: []
24 | })
25 | export class WptButtonComponent {
26 | protected position = input
3 |
22 |
23 | @if (preview && avatar) {
24 |
25 | ![]()
26 | @if (avatar) {
27 |
28 | }
29 |
30 | }
31 |
15 | @if (action() === 'wpt') {
16 |
33 | `,
34 | styles: [
35 | `
36 | .mfb-container {
37 | position: absolute;
38 | bottom: 23px;
39 | right: 5px;
40 | z-index: 5000;
41 | }
42 | `
43 | ]
44 | })
45 | export class MFBContainerComponent {
46 | protected action = input
33 |
42 |
43 | `,
44 | styles: [``]
45 | })
46 | export class ExperimentsComponent {
47 | // eslint-disable-next-line @typescript-eslint/no-explicit-any
48 | @Output() selected: EventEmitter
22 |
29 |
30 | @for (err of data.errorList; track err) {
31 |
32 | {{ err.message }}
33 | Status: {{ err.status }}
34 |
35 | }
36 |
37 |
38 |
39 |
42 |
43 |
44 | `,
45 | styles: [
46 | `
47 | ._ap-errlist {
48 | min-width: 150px;
49 | }
50 | `
51 | ],
52 | standalone: true
53 | })
54 | export class ErrorListDialog {
55 | public image = null;
56 |
57 | constructor(
58 | public dialogRef: MatDialogRef
23 |
24 |
27 |
28 |
24 | warning
25 | {{ data.errorList?.length }} Errors Encountered
26 |
27 |
2 |
3 | insights
4 | Vessel Trail to Route
7 |
8 |
11 |
12 |
13 |
14 |
15 |
62 |
63 |
64 |
74 |
75 |
--------------------------------------------------------------------------------
/src/app/modules/icons/atons.ts:
--------------------------------------------------------------------------------
1 | // AtoN Icons
2 |
3 | import { AppIconSet } from './app.icons';
4 | import { MapIconDef } from '../map/ol/lib/map-image-registry.service';
5 |
6 | export const AtoNsType1: AppIconSet = {
7 | path: './assets/img/atons',
8 | files: [
9 | 'real-north.svg',
10 | 'real-south.svg',
11 | 'real-east.svg',
12 | 'real-west.svg',
13 | 'real-port.svg',
14 | 'real-starboard.svg',
15 | 'real-danger.svg',
16 | 'real-special.svg',
17 | 'virtual-north.svg',
18 | 'virtual-south.svg',
19 | 'virtual-east.svg',
20 | 'virtual-west.svg',
21 | 'virtual-port.svg',
22 | 'virtual-starboard.svg',
23 | 'virtual-danger.svg',
24 | 'virtual-special.svg'
25 | ],
26 | scale: 0.4,
27 | anchor: [23, 72]
28 | };
29 |
30 | const AtoNsType2: AppIconSet = {
31 | path: './assets/img/atons',
32 | files: [
33 | 'real-aton.svg',
34 | 'real-safe.svg',
35 | 'virtual-aton.svg',
36 | 'virtual-safe.svg'
37 | ],
38 | scale: 0.4,
39 | anchor: [23, 49]
40 | };
41 |
42 | export const ATON_TYPE_IDS = {
43 | aton: 'aton',
44 | '-1': 'weatherStation',
45 | 9: 'north',
46 | 10: 'east',
47 | 11: 'south',
48 | 12: 'west',
49 | 13: 'port',
50 | 14: 'starboard',
51 | 20: 'north',
52 | 21: 'east',
53 | 22: 'south',
54 | 23: 'west',
55 | 24: 'port',
56 | 25: 'starboard',
57 | 28: 'danger',
58 | 29: 'safe',
59 | 30: 'special'
60 | };
61 |
62 | const WeatherStation: MapIconDef = {
63 | path: './assets/img/weather_station.png',
64 | anchor: [1, 25],
65 | scale: 0.75
66 | };
67 |
68 | /**
69 | * @description Build MapIcon definitions for use by MapImageRegistry
70 | */
71 | export const getAtoNDefs = () => {
72 | const atonList = {};
73 |
74 | const addToList = (list: AppIconSet) => {
75 | list.files.forEach((file: string) => {
76 | const gid = file.slice(0, file.lastIndexOf('-'));
77 | const id = file.slice(file.lastIndexOf('-') + 1, file.indexOf('.'));
78 | if (!atonList[gid]) {
79 | atonList[gid] = {};
80 | }
81 | atonList[gid][id] = {
82 | path: `${list.path}/${file}`,
83 | scale: list.scale,
84 | anchor: list.anchor
85 | };
86 | });
87 | };
88 | addToList(AtoNsType1);
89 | addToList(AtoNsType2);
90 | atonList['real']['weatherStation'] = WeatherStation;
91 | atonList['virtual']['weatherStation'] = WeatherStation;
92 | return atonList;
93 | };
94 |
--------------------------------------------------------------------------------
/src/assets/img/atons/real-starboard.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
52 |
--------------------------------------------------------------------------------
/src/app/modules/alarms/components/nsew-buttons.component.ts:
--------------------------------------------------------------------------------
1 | /***********************************
2 | NSEW arrow buttons component
3 |
16 |
37 |
17 |
24 |
25 |
26 | Points: {{pointCount}}
27 |
28 |
29 |
33 | Include Trail from server
34 |
35 |
36 |
38 |
61 |
39 |
57 |
58 |
59 |
60 |
65 |
72 |
73 |
37 |
71 | `
72 | })
73 | export class NSEWButtonsComponent {
74 | @Input() disabled: boolean;
75 | @Output() direction: EventEmitter
38 |
39 |
46 |
47 |
40 |
43 |
44 |
45 |
48 |
60 |
61 |
49 |
52 |
53 |
54 |
55 |
58 |
59 |
62 |
63 |
70 |
64 |
67 |
68 |
69 |
24 | @if (cancelled) {
25 |
26 |
32 | } @else {
33 |
36 | }
37 |
38 | `
39 | })
40 | export class TimerButtonComponent {
41 | @Input() period = 5000; // timeout period in milliseconds
42 | @Input() label: string;
43 | @Input() icon: string;
44 | @Input() cancelledLabel: string;
45 | @Input() disabled: boolean;
46 | @Output() nextPoint: EventEmitter8 | Weather forecast functionality remains available when using 9 | Signal K server v2.16 (or later) and a weather provider plugin from the AppStore. 10 |
11 | See HELP 12 | for more details. 13 | ` 14 | }, 15 | { 16 | type: 'signalk-server-node', 17 | title: 'New Feature', 18 | message: ` 19 | Map Overlays 20 |
21 | Overlays allow map data from WMS & WMTS sources to be overlayed onto charts and can be 22 | configured to refresh at regular intervals. 23 |
24 | See HELP 25 | for more details. 26 | ` 27 | }, 28 | { 29 | type: 'signalk-server-node', 30 | title: 'New Feature', 31 | message: ` 32 | Hazardous Area Alarm 33 |
34 | Attribute a region as hazardous which will sound an alarm when the vessel enters 35 | its bounds. 36 |
37 | See HELP 38 | for more details. 39 | ` 40 | } 41 | ]; 42 | 43 | export const WELCOME_MESSAGES = { 44 | welcome: { 45 | title: 'Welcome to Freeboard', 46 | message: `Freeboard is your Signal K chartplotter WebApp from which 47 | you can manage routes, waypoints, notes, alarms, 48 | notifications and more.` 49 | }, 50 | 'signalk-server-node': { 51 | title: 'Server Plugins', 52 | message: `Some Freeboard features require that certain plugins are installed to service the 53 | required Signal K API paths. 54 |
55 | See HELP 56 | for more details.` 57 | }, 58 | experiments: { 59 | title: 'Experiments', 60 | message: ` 61 | Experiments are a means for testing out potential new features 62 | in Freeboard. 63 |
64 | You can enable Experiments in Settings. 65 |
66 | Check out HELP 67 | for more details.` 68 | }, 69 | 'whats-new': WHATS_NEW 70 | }; 71 | -------------------------------------------------------------------------------- /src/assets/img/atons/real-port.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 61 | -------------------------------------------------------------------------------- /src/assets/img/atons/virtual-port.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 61 | -------------------------------------------------------------------------------- /src/app/lib/pipes/coords.pipe.ts: -------------------------------------------------------------------------------- 1 | import { Pipe, PipeTransform } from '@angular/core'; 2 | import { decimalToSexagesimal } from 'geolib'; 3 | 4 | @Pipe({ 5 | name: 'coords' 6 | }) 7 | export class CoordsPipe implements PipeTransform { 8 | private symDegree = String.fromCharCode(186); 9 | 10 | public transform(value: number, type: string, isLat?: boolean): string { 11 | const h = isLat ? (value < 0 ? 'S' : 'N') : value < 0 ? 'W' : 'E'; 12 | switch (type) { 13 | case 'SHDd': 14 | return this.toHDdSigned(value, h); 15 | case 'DMdH': 16 | return this.toDMdH(value, h); 17 | case 'HDd': 18 | return this.toHDd(value, h); 19 | case 'HDMS': 20 | return this.toHDMS(value, h); 21 | case 'DHMS': 22 | return this.toDHMS(value, h); 23 | default: 24 | return this.toXY(value); 25 | } 26 | } 27 | 28 | // returns +/-DD.dddddd 29 | private toXY(value: number, precision = 5): string { 30 | return value.toFixed(precision); 31 | } 32 | 33 | // returns H +/-D.ddddd° 34 | private toHDdSigned( 35 | value: number, 36 | hemisphere: string, 37 | precision = 5 38 | ): string { 39 | const h = ['S', 'W'].includes(hemisphere) 40 | ? `${hemisphere} -` 41 | : `${hemisphere} +`; 42 | let ddec: string = value.toFixed(precision); 43 | ddec = ddec.substring(ddec.indexOf('.')); 44 | return `${h}${Math.floor(Math.abs(value))}${ddec}${this.symDegree}`; 45 | } 46 | 47 | // returns DDD° MM.ddd' H (e.g 020° 44.56' E) 48 | private toDMdH(value: number, hemisphere: string, precision = 5): string { 49 | const D = Math.floor(Math.abs(value)) ?? 0; 50 | const d = D === 0 ? Math.abs(value) : Math.abs(value % D); 51 | const mdec = (d * 60).toFixed(precision); 52 | const pad = ['N', 'S'].includes(hemisphere) ? '00' : '000'; 53 | const s = `${(pad + D.toString()).slice(0 - pad.length)}${ 54 | this.symDegree 55 | } ${mdec}' ${hemisphere}`; 56 | return s; 57 | } 58 | 59 | // returns H D.ddddd° 60 | private toHDd(value: number, hemisphere: string, precision = 5): string { 61 | let ddec: string = value.toFixed(precision); 62 | ddec = ddec.substring(ddec.indexOf('.')); 63 | return `${hemisphere} ${Math.floor(Math.abs(value))}${ddec}${ 64 | this.symDegree 65 | }`; 66 | } 67 | 68 | // returns H D°M'S"sss 69 | private toHDMS(value: number, hemisphere: string): string { 70 | return `${hemisphere} ${decimalToSexagesimal(value)}`; 71 | } 72 | 73 | // returns DHM'S"sss 74 | private toDHMS(value: number, hemisphere: string): string { 75 | let c = decimalToSexagesimal(value); 76 | c = 77 | c.slice(0, c.indexOf(' ') - 1) + hemisphere + c.slice(c.indexOf(' ') + 1); 78 | return c; 79 | } 80 | } 81 | -------------------------------------------------------------------------------- /src/app/types/stream.ts: -------------------------------------------------------------------------------- 1 | /** Signal K Types */ 2 | 3 | // Notification types 4 | export enum ALARM_STATE { 5 | nominal = 'nominal', 6 | normal = 'normal', 7 | alert = 'alert', 8 | warn = 'warn', 9 | alarm = 'alarm', 10 | emergency = 'emergency' 11 | } 12 | 13 | export enum ALARM_METHOD { 14 | visual = 'visual', 15 | sound = 'sound' 16 | } 17 | 18 | export interface SKNotification { 19 | state: ALARM_STATE; 20 | method: ALARM_METHOD[]; 21 | message: string; 22 | } 23 | 24 | // Update Deltas 25 | export interface PathValue { 26 | path: string; 27 | value: object | number | string | null | Notification | boolean; 28 | } 29 | 30 | export interface ActionResult { 31 | state: 'COMPLETED' | 'PENDING' | 'FAILED'; 32 | statusCode?: number; 33 | message?: string; 34 | timestamp?: string; 35 | } 36 | 37 | export interface SKPosition { 38 | latitude: number; 39 | longitude: number; 40 | altitude?: number; 41 | } 42 | 43 | /***************** */ 44 | 45 | import { 46 | SKVessel, 47 | SKAtoN, 48 | SKAircraft, 49 | SKSaR, 50 | SKMeteo 51 | } from 'src/app/modules/skresources/resource-classes'; 52 | 53 | type AisIds = Array
28 |
58 | `,
59 | styles: [
60 | `
61 | .nav-button {
62 | height: 40px;
63 | }
64 | `
65 | ]
66 | })
67 | export class RouteNextPointComponent {
68 | @Input() index: number;
69 | @Input() total: number;
70 | @Input() circular = false;
71 | @Output() selected: EventEmitter
29 |
54 |
30 |
40 |
41 |
42 |
52 |
53 |
55 | {{ index + 1 }} of {{ total }}
56 |
57 |