@mxtommy/kip 3.9.0-beta.9 → 3.10.0-beta.1

package/.github/copilot-instructions.md

@@ -57,7 +57,7 @@ Use this quick-start map to be productive in this repo. Prefer these concrete pa
 
 ## Project specifics & gotchas
 - Always respect serve path /@mxtommy/kip/ (dev/prod). Assets and routing assume this base.
-- CommonJS deps are explicitly allowed (howler, hammerjs, js-quantities). Avoid introducing new CJS without adding to allowedCommonJsDependencies.
+- CommonJS deps are explicitly allowed (howler, js-quantities). Avoid introducing new CJS without adding to allowedCommonJsDependencies.
 - Use standalone components, signals, @if/@for; follow .github/instructions/angular.instructions.md for style.
 - Widget config UIs live under src/app/widget-config; path controls use custom validators (no Validators.required). Respect isPathConfigurable and pathRequired.
 

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/CHANGELOG.md

@@ -1,3 +1,15 @@
+# v 3.9.0
+# New Feature
+* A new dashboard navigation experience. Introducing our all-new Dashboard sidenav designed for speed. Effortlessly jump between dashboards with a single tap, always knowing exactly where you are thanks to clear highlighting of your current dashboard.
+* Discover the brand new Settings button at the top of the sidenav. Instantly access tools to manage your dashboards, plus quick links to Options, Data Inspector, and Help—all in one place.
+* Personalize your dashboards with style: double-click any dashboard to open the new icon gallery and give each page a unique visual identity.
+* All configuration controls are now streamlined as tabs within the Options page, making customization faster and more enjoyable than ever.
+# Improvements
+* Reduced GPU memory usage to improve performance and stability, especially on low-end hardware such as the RPi Zero 2.
+* Added canvas bitmap blitting for better rendering speed and visual performance.
+* Replaced HammerJS with native gesture support for improved responsiveness.
+* Updated CSS to help prevent accidental page reloads and unwanted text selection on mobile devices.
+* Enabled Notification audio on mobile.
 # v 3.8.2
 # Improvements
 * Faster app loading with local font and font swap support

package/README.md

@@ -16,18 +16,6 @@ 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
@@ -134,6 +122,32 @@ 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
 
@@ -166,6 +180,28 @@ 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)
@@ -193,7 +229,7 @@ Linux, Mac, RPi, or Windows dev platform supported
 
 **Apple PWA Icon Generation**
 Use the following tool and command line:  
-`npx pwa-asset-generator ./src/svg-templates/icon/KIP-icon.svg ./src/assets/ -i ./src/index.html -m ./src manifest.json -b "linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898" -p 5%`
+`npx pwa-asset-generator ./src/assets/favicon.svg ./src/assets/ -i ./src/index.html -m ./src manifest.json -b "linear-gradient(to bottom, rgba(255,255,255,0.15) 0%, rgba(0,0,0,0.15) 100%), radial-gradient(at top center, rgba(255,255,255,0.40) 0%, rgba(0,0,0,0.40) 120%) #989898" -p 5%`
 
 **Share**
 Once done with your work, from your fork's working branch, make a GitHub pull request to have your code reviewed, merged, and included in the next release.

package/kip-plugin/src/index.ts

@@ -0,0 +1,48 @@
+import { Delta, Path, Plugin, ServerAPI, Value } from '@signalk/server-api'
+
+export default (app: ServerAPI): Plugin => {
+  const plugin: Plugin = {
+    id: 'kip',
+    name: 'KIP',
+    description: 'KIP server plugin',
+    start: (settings, restartPlugin) => {
+      app.debug(`${plugin.name}: Starting plugin`);
+      app.registerPutHandler('vessels.self', 'plugins.displays.*', displayPutHandler);
+    },
+    stop: () => {
+      app.debug(`${plugin.name}: Stopping plugin`);
+    },
+    schema: () => {
+      properties: {
+        // plugin configuration goes here
+      }
+    }
+  };
+
+  function displayPutHandler(context: string, path: string, value: Value): { state: 'COMPLETED'; statusCode: number; message?: string } {
+    app.debug(`${plugin.name}: PUT handler called for context ${context}, path ${path}, value ${value}`);
+    try {
+      const delta: Delta = {
+        updates: [
+          {
+            values: [
+              {
+                path: path as Path,
+                value: value
+              }
+            ]
+          }
+        ]
+      };
+      app.debug('Sending message: ', JSON.stringify(delta));
+      app.handleMessage(plugin.id, delta);
+      return { state: "COMPLETED" as const, statusCode: 200 };
+
+    } catch (error) {
+      app.error(`${plugin.name}: Error in PUT handler: ${error}`);
+      return { state: "COMPLETED" as const, statusCode: 500, message: (error as Error).message };
+    }
+  }
+
+  return plugin;
+}

package/kip-plugin/tsconfig.plugin.json

@@ -0,0 +1,13 @@
+/* To learn more about Typescript configuration file: https://www.typescriptlang.org/docs/handbook/tsconfig-json.html. */
+{
+  "extends": "../tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../plugin",
+    "types": [],
+    "resolveJsonModule": true,
+    "sourceMap": false,
+    "module": "commonjs",
+    "moduleResolution": "node"
+  },
+  "include": ["./src/*.*"]
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mxtommy/kip",
-  "version": "3.9.0-beta.9",
+  "version": "3.10.0-beta.1",
   "description": "An advanced and versatile marine instrumentation package to display Signal K data.",
   "license": "MIT",
   "author": {
@@ -36,12 +36,16 @@
     "appIcon": "assets/icon-72x72.png",
     "displayName": "KIP Instrument MFD"
   },
+  "main": "plugin/index.js",
+  "signalk-plugin-enabled-by-default": true,
   "scripts": {
-    "dev": "ng serve --configuration=dev --serve-path=/@mxtommy/kip/",
-    "build-dev": "ng build --configuration=dev",
-    "build-prod": "ng build --configuration=production",
     "test": "ng test",
     "lint": "ng lint",
+    "dev": "ng serve --configuration=dev --serve-path=/@mxtommy/kip/",
+    "build:plugin": "tsc -p ./kip-plugin/tsconfig.plugin.json",
+    "build:dev": "ng build --configuration=dev",
+    "build:prod": "ng build --configuration=production",
+    "build:all": "npm run build:prod && npm run build:plugin",
     "e2e": "ng e2e"
   },
   "devDependencies": {
@@ -63,13 +67,13 @@
     "@godind/ng-canvas-gauges": "^6.2.1",
     "@robloche/chartjs-plugin-streaming": "^3.1.0",
     "@types/canvas-gauges": "^2.1.8",
-    "@types/hammerjs": "^2.0.45",
     "@types/howler": "^2.2.10",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.9",
     "@types/js-quantities": "^1.6.6",
     "@types/lodash-es": "^4.17.9",
     "@types/node": "^24.1.0",
+    "@zakj/no-sleep": "^0.13.5",
     "angular-eslint": "20.1.1",
     "chart.js": "^4.4.9",
     "chartjs-adapter-date-fns": "^3.0.0",
@@ -80,7 +84,6 @@
     "date-fns": "^2.30.0",
     "eslint": "^9.29.0",
     "gridstack": "^11.4.0",
-    "hammerjs": "^2.0.8",
     "howler": "^2.2.4",
     "jasmine-core": "~4.0.1",
     "jasmine-spec-reporter": "~5.0.0",
@@ -96,15 +99,17 @@
     "ngx-markdown": "^20.0.0",
     "ngx-resize-observer": "^3.1.0",
     "protractor": "~7.0.0",
-    "pwa-asset-generator": "^8.0.4",
+    "pwa-asset-generator": "^8.1.1",
     "rxjs": "^7.8.2",
     "sass": "^1.49.9",
     "screenfull": "^6.0.2",
-    "@zakj/no-sleep": "^0.13.5",
     "steelseries": "^2.0.9",
     "ts-node": "^10.9.2",
     "tslib": "^2.6.2",
     "typescript": "^5.8.3",
     "zone.js": "^0.15.1"
+  },
+  "dependencies": {
+    "@signalk/server-api": "^2.7.2"
   }
 }

package/plugin/index.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = (app) => {
+    const plugin = {
+        id: 'kip',
+        name: 'KIP',
+        description: 'KIP server plugin',
+        start: (settings, restartPlugin) => {
+            app.debug(`${plugin.name}: Starting plugin`);
+            app.registerPutHandler('vessels.self', 'plugins.displays.*', displayPutHandler);
+        },
+        stop: () => {
+            app.debug(`${plugin.name}: Stopping plugin`);
+        },
+        schema: () => {
+            properties: {
+                // plugin configuration goes here
+            }
+        }
+    };
+    function displayPutHandler(context, path, value) {
+        app.debug(`${plugin.name}: PUT handler called for context ${context}, path ${path}, value ${value}`);
+        try {
+            const delta = {
+                updates: [
+                    {
+                        values: [
+                            {
+                                path: path,
+                                value: value
+                            }
+                        ]
+                    }
+                ]
+            };
+            app.debug('Sending message: ', JSON.stringify(delta));
+            app.handleMessage(plugin.id, delta);
+            return { state: "COMPLETED", statusCode: 200 };
+        }
+        catch (error) {
+            app.error(`${plugin.name}: Error in PUT handler: ${error}`);
+            return { state: "COMPLETED", statusCode: 500, message: error.message };
+        }
+    }
+    return plugin;
+};