@mxtommy/kip 3.9.0-beta.12 → 3.9.0-beta.16

package/.github/instructions/angular.instructions.md

@@ -54,6 +54,10 @@ https://angular.dev/essentials/components
 https://angular.dev/essentials/signals
 https://angular.dev/essentials/templates
 https://angular.dev/essentials/dependency-injection
+https://angular.dev/guide/components/queries
+
+viewChild('tileContainer', { static: false }) tileContainer!: ElementRef<HTMLDivElement>;
+  viewChildren('tile', { read: ElementRef }) tiles!: QueryList<ElementRef<HTMLElement>>;
 
 ## Best practices & Style guide
 Here are the best practices and the style guide information.
@@ -100,6 +104,15 @@ Here is a link to the most recent Angular style guide https://angular.dev/style-
 - Use the `providedIn: 'root'` option for singleton services
 - Use the `inject()` function instead of constructor injection
 
+### Dashboards
+- Dashboards are managed via `DashboardService` and support custom names and icons for easy identification
+- Use `DashboardService.add(name, configuration, icon?)` to create dashboards with optional icons
+- Use `DashboardService.update(index, name, icon?)` to modify existing dashboards
+- Use `DashboardService.duplicate(index, newName, newIcon?)` to duplicate dashboards with optional icon override
+- Icons are Material Icons (e.g., 'dashboard', 'navigation') and can be selected via the `select-icon` component
+- The `select-icon` component loads SVG icons from configurable files (default: 'assets/svg/icons.svg'), displays them in a grid, and outputs the selected icon name
+- Integrate icon selection in dialogs by including `<select-icon [iconFile]="'assets/svg/icons.svg'" (selectedIcon)="onIconSelected($event)"></select-icon>`
+
 ---
 
 ## Cross-Reference Instructions
@@ -118,3 +131,36 @@ Here is a link to the most recent Angular style guide https://angular.dev/style-
 - Use signals, standalone components, and modern control flow from this file within the KIP architecture from `COPILOT.md`
 - For theming and colors, always use the KIP theme system described in `COPILOT.md`, not generic CSS approaches
 - All services should follow both the Angular DI patterns here AND the KIP service architecture in `COPILOT.md`
+
+## Referencing component children with queries (Angular 17+)
+
+Use the modern signal-based query API for referencing elements, components, or directives in your template:
+
+- Use `viewChild()` and `viewChildren()` from `@angular/core` (not the old decorators).
+- These return signals or arrays, not QueryList.
+- Example usage:
+
+```typescript
+import { viewChild, viewChildren, ElementRef } from '@angular/core';
+
+// In your component class:
+tileContainer = viewChild('tileContainer')();
+tiles = viewChildren('tile', { read: ElementRef });
+```
+
+- In your template, add template reference variables:
+
+```html
+<div #tileContainer>
+  @for (item of items; let i = $index) {
+    <tile-large-icon #tile ...></tile-large-icon>
+  }
+</div>
+```
+
+- Access the element/component directly via the property (e.g., `this.tileContainer`, `this.tiles[0]`).
+- `viewChildren()` returns a readonly array that updates automatically as the view changes.
+- No need for `ngAfterViewInit` to access queries; they are available as soon as the view is rendered.
+
+**Summary:**
+Use `viewChild()` and `viewChildren()` for modern, reactive, and type-safe access to elements/components in your template. Avoid the legacy `@ViewChild`/`@ViewChildren` decorators and `QueryList` in new code.

package/README.md

@@ -16,9 +16,20 @@ Key features include:
 - **Multiple User Profiles**: Tailor configurations for different roles, devices, or use cases.
 - **Cross-Device Compatibility**: Access KIP remotely on any device by navigating to `http://<Signal K Server URL>:<port>/@mxtommy/kip`.
 
+Typical complementary components you may install (many are often bundled with Signal K distributions):
+
+**Navigation & Charting**
+- **Freeboard‑SK** – Multi‑station, web chart plotter dedicated to Signal K: routes, waypoints, charts, alarms, weather layers, and instrument overlays.
+
+**Visual Flow / Automation**
+- **Node‑RED** – Low‑code, flow‑based wiring of devices, APIs, online services, and custom logic (alert escalation, device control automation, data enrichment, protocol bridging).
+
+**Data Storage & Analytics**
+- **InfluxDB / other TSDB** – High‑resolution historical storage of sensor & performance metrics beyond what lightweight widget charts should retain.
+- **Grafana** – Rich exploratory / comparative dashboards, ad‑hoc queries, alert rules on stored metrics, correlation across heterogeneous data sources.
+
 KIP is open-source under the MIT license, built by the community and 100% free. Join the community on Discord or contribute to the project on GitHub!
 
-## Read the Help introduction How-to
 ## Read the Help introduction How-to
 Read the [Introduction](https://github.com/mxtommy/Kip/blob/master/src/assets/help-docs/welcome.md) help file.
 
@@ -123,32 +134,6 @@ For example, Signal K will notify KIP when a water depth or temperature sensor r
 ## Multiple User Profiles
 If you have different roles on board: captain, skipper, tactician, navigator, engineer—or simply different people with different needs, each can tailor KIP as they wish. The use of profiles also allows you to tie specific configuration arrangements to use cases or device form factors.
 
-## Complementary Components
-Typical complementary components you may install (many are often bundled with Signal K distributions):
-
-**Navigation & Charting**
-- **Freeboard‑SK** – Multi‑station, web chart plotter dedicated to Signal K: routes, waypoints, charts, alarms, weather layers, and instrument overlays.
-
-**Visual Flow / Automation**
-- **Node‑RED** – Low‑code, flow‑based wiring of devices, APIs, online services, and custom logic (alert escalation, device control automation, data enrichment, protocol bridging).
-
-**Data Storage & Analytics**
-- **InfluxDB / other TSDB** – High‑resolution historical storage of sensor & performance metrics beyond what lightweight widget charts should retain.
-- **Grafana** – Rich exploratory / comparative dashboards, ad‑hoc queries, alert rules on stored metrics, correlation across heterogeneous data sources.
-
-## Complementary Components
-Typical complementary components you may install (many are often bundled with Signal K distributions):
-
-**Navigation & Charting**
-- **Freeboard‑SK** – Multi‑station, web chart plotter dedicated to Signal K: routes, waypoints, charts, alarms, weather layers, and instrument overlays.
-
-**Visual Flow / Automation**
-- **Node‑RED** – Low‑code, flow‑based wiring of devices, APIs, online services, and custom logic (alert escalation, device control automation, data enrichment, protocol bridging).
-
-**Data Storage & Analytics**
-- **InfluxDB / other TSDB** – High‑resolution historical storage of sensor & performance metrics beyond what lightweight widget charts should retain.
-- **Grafana** – Rich exploratory / comparative dashboards, ad‑hoc queries, alert rules on stored metrics, correlation across heterogeneous data sources.
-
 # Connect, Share, and Support
 KIP has its own Discord Signal K channel for getting in touch. Join us at https://discord.gg/AMDYT2DQga
 
@@ -181,28 +166,6 @@ Keeping KIP focused preserves responsiveness (lower CPU / memory), reduces UI cl
 
 In short: use KIP to see & act on live sailing information; use the complementary tools to store it long‑term, analyze it deeply, automate decisions, or build advanced integrations.
 
-## Project Scope
-What KIP IS about:
-- Real‑time presentation of vessel & environment data (navigation, performance, systems) pulled from Signal K.
-- Fast, legible, touchscreen‑friendly dashboards for underway decision making.
-- Configurable widgets (gauges, charts, timers, controls) tuned for sailing operations.
-
-What KIP deliberately IS NOT trying to become:
-- A full data lake / long‑term time‑series historian.
-- A general purpose automation / rules / orchestration engine.
-- A universal external web‑app embedding or mash‑up framework.
-- A low‑code integration hub for arbitrarily wiring protocols and services.
-
-Those domains already have excellent, specialized open‑source tools. Instead of re‑implementing them, KIP plays nicely alongside them within a Signal K based onboard stack.
-
-**Processing & Extensions**
-- **Signal K Plugins** – Domain‑specific enrichment (polars, performance calculations, derived environmental data, routing aids) published directly into the Signal K data model that KIP can then display.
-
-**Why this separation matters**
-Keeping KIP focused preserves responsiveness (lower CPU / memory), reduces UI clutter, and accelerates iteration on core sailing UX. Heavy analytics, complex workflow logic, and broad third‑party embedding stay where they are strongest—outside—but still feed KIP through the common Signal K data fabric.
-
-In short: use KIP to see & act on live sailing information; use the complementary tools to store it long‑term, analyze it deeply, automate decisions, or build advanced integrations.
-
 **Tools**
 Linux, Mac, RPi, or Windows dev platform supported
 1. Install the latest Node version (v16+, v18 recommended)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mxtommy/kip",
-  "version": "3.9.0-beta.12",
+  "version": "3.9.0-beta.16",
   "description": "An advanced and versatile marine instrumentation package to display Signal K data.",
   "license": "MIT",
   "author": {

package/public/3rdpartylicenses.txt

@@ -243,6 +243,45 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
 THE SOFTWARE.
 
+--------------------------------------------------------------------------------
+Package: screenfull
+License: "MIT"
+
+MIT License
+
+Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
+--------------------------------------------------------------------------------
+Package: @zakj/no-sleep
+License: "MIT"
+
+The MIT License (MIT)
+
+Copyright (c) Zak Johnson Copyright (c) 2015-2020 Rich Tibbett
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
+FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
+IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+
 --------------------------------------------------------------------------------
 Package: chart.js
 License: "MIT"
@@ -413,45 +452,6 @@ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
---------------------------------------------------------------------------------
-Package: screenfull
-License: "MIT"
-
-MIT License
-
-Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (https://sindresorhus.com)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
---------------------------------------------------------------------------------
-Package: @zakj/no-sleep
-License: "MIT"
-
-The MIT License (MIT)
-
-Copyright (c) Zak Johnson Copyright (c) 2015-2020 Rich Tibbett
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
-the Software, and to permit persons to whom the Software is furnished to do so,
-subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
-FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
-COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
-IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
-CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
-
 --------------------------------------------------------------------------------
 Package: js-quantities
 License: "MIT"

package/public/assets/help-docs/configuration.md

@@ -1,9 +1,9 @@
 # Configuration Management
 
-KIP provides a "Login to Server" option that determines where your configuration is stored. It is **strongly recommended** to enable server login in the **Settings** under the **Connectivity** tab. This ensures your configurations are stored remotely on the Signal K server. See the "Creating a Signal K user" section below for details.
+KIP provides a "Login to Server" option that determines where your configuration is stored. It is **strongly recommended** to enable server login in the **Settings** under the **Connectivity** tab. This ensures your configurations are stored remotely on the Signal K server and allows automatic loading of configuration from any device. See the "Creating a Signal K user" section below for information on how to create a user.
 
-- **Login to Server Enabled** (recommended setting): Configuration is stored remotely on the Signal K server.
-- **Login to Server Disabled** (default value): Configuration is saved locally in the browser's private storage.
+- **Login to Server Enabled** (recommended setting): Configuration is stored remotely on the Signal K server. This mode allow automatic loading of your configuration from any device (also known as configuration sharing).
+- **Login to Server Disabled** (default value): Configuration is saved on your computer/device, in the browser's private storage. In this mode, the configuration is per browser.
 
 You can manage your configurations using the **Configurations** page, accessible from the right menu. Depending on your login mode, different management options are available.
 
@@ -54,4 +54,4 @@ Use advanced operations with caution. All changes affect your active configurati
 
 KIP separates configuration into two parts:
 1. **Server Connection**: This configuration is always stored locally in your browser and is never shared. It is used in the **Connectivity** tab of the **Settings** page.
-2. **Application Settings**: This includes the configuration you can back up, delete, and restore on the **Configurations** page.
+2. **Application Settings**: This includes the configuration settings you can back up, delete, and restore with the **Configurations** page. It contains all dashboards, widgets and other configuration settings.

package/public/assets/help-docs/dashboards.md

@@ -2,12 +2,14 @@
 You can organize your dashboards from the Dashboards page. To edit a dashboard layout, first visualize the dashboard and unlock it.
 
 ## Dashboard Pages
-On the Dashboards page, you can add, reorder, delete, rename, and duplicate dashboards. The dashboard name is briefly visible when you cycle through dashboards. Available actions include:
+On the Dashboards page, you can add, reorder, delete, rename, and duplicate dashboards. Each dashboard can have a custom name and icon for easy identification. The dashboard name is briefly visible when you cycle through dashboards. Available actions include:
 - **Long press** a dashboard to delete or duplicate it.
-- **Double tap** a dashboard to rename it.
+- **Double tap** a dashboard to rename it and select an icon.
 - **Touch and drag** to reorder dashboards.
 - Use the **(+)** button to add a new dashboard.
 
+When renaming or creating a dashboard, you can choose from a variety of icons to visually represent the dashboard's purpose (e.g., navigation, engine monitoring, weather). Icons are displayed in the dashboard menu for quick recognition.
+
 ## Editing Layout
 To edit a dashboard's widgets and arrangement, you need to unlock its layout. View the desired dashboard, access the **Actions menu** on the right-hand side, and tap the bottom **unlock button**. The widgets will become surrounded by dashed borders, indicating you are in edit mode. Actions you can perform while editing a layout include:
 - **Long press** an empty area of the dashboard to add a widget (you may need to free up space first).