@mxtommy/kip 3.0.0-beta.8 → 3.0.0

package/CHANGELOG.md

@@ -1,11 +1,42 @@
+# V 2.12.3
+## Fixes
+* Linear widget "No Progress" color option missing.
+* Data Browser source and value not displayed. 
+* Processing of combined values and meta delta updates. Fixes #453
+# V 2.12.2
+## Improvements
+* Makes Radial and Linear gauge highlights width configurable by @jaredjensen 
+## Fixes
+* Metadata not being available on initial load by @jaredjensen
+# V 2.12.1
+## Fixes
+* Numeric widget using seconds value not converting to HH:MM:SS format. Fixes #438
+# V 2.12.0
+## New features
+* Add Kilo Pascal (kPa) format to Pressure units.
+* Add Resistance Unit with Ohm (ohm) and Kilo Ohm ((kiloohm)) formats.
+# V 2.11.1
+## Fixes
+* Path not available in numeric Widget Options when first emitted value is null. Fixes #408
+* Linear & Radial Steel Style gauge support for decimal places. Fixes #433  
+# V 2.11.0
+## New features
+* Autopilot invert rudder angle support and matching Display tab widget Option 
+# V 2.10.1
+## Fixes
+* Values jumping between sources. Fixes #420
 # V 2.10.0
+## BREAKING CHANGE
+* Requires Signal K v2.8+
+* Retired existing KIP zones in favor of Signal K metadata defined zones.
+* Radial and linear gauge scale min/max range configuration discarded. Reconfiguration using new Scale Start/Scale End required. 
 ## New features
 * Boolean Control Panel Widget: Support for numeric paths (0/1 PUT values)
 * New Compass Gauge Widget with support for rad units using negative to port values. Compass needle or faceplate rotation support
 * Signal K Metadata support for Zones configuration, Display Name and Display Scale. IMPORTANT: Exiting gauges Min Value & Max Value setting will be lost on upgrade and require manual configuration of new Scale Start and Scale End Widget Options. 
 * Ability to filter Widget Option's path selection list based on Signal K Units type
 ## Improvements
-* Linear Gauge Widget support for tick bar numbers improving readability
+* Linear Gauge Widget support for autoscaling and tick bar numbers improving readability
 * Refactoring of Signal K Notification support with improved integration. Includes Notification options to Silence and Clear messages on the server. Also fixes existing ghost messages issue and normal state notifications that generated unwarranted prompts.
 ## Fixes
 * Chromium browser side scrollbar always visible

package/README.md

@@ -1,117 +1,123 @@
 # About KIP
 
-KIP is powerful marine instrumentation package to display Signal K data. KIP, much like modern expensive MFDs, is very flexible and can be split up in any arrangements and display all kinds of data available to Signal K server.
+KIP is a powerful and versatile marine instrumentation package designed to display Signal K data. It replicates the functionality of modern Multi-Function Displays (MFDs) similar to most commercial products, while offering unmatched flexibility and customization. KIP can be tailored to any arrangement, displaying all kinds of data available from the Signal K server.
 
-![KIP](./images/kip-1024.png)
+With its responsive design, KIP works seamlessly across phones, tablets, Raspberry Pi, and computers, ensuring an optimal user experience on any device. It supports touchscreen gestures, night/day modes, and even Progressive Web App (PWA) functionality for a full-screen, app-like experience.
 
-# Design Goal
+![KIP](./images/formfactor.png)
+
+Key features include:
+- **Flexible Layouts**: Build purposeful dashboards with an easy-to-use and intuitive grid layout system. Drag widgets into place and make adjustments with simple gestures or clicks.
+- **Reusable Widget Library**: A wide range of widgets for numerical, textual, and graphical data, as well as advanced controls like switches, sliders and autopilot operation.
+- **Night Mode**: Preserve night vision with a simple tap or automatic switching based on sunrise/sunset.
+- **Data State Notifications**: Stay informed with visual and audio alerts for critical data thresholds.
+- **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`.
 
-The idea is to replicate the functionality of MFDs such as the B&G Triton, Raymarine i70, or Garmin GMI20.
-- Display should use the entire screen and not require any scrolling
-- Anything displayed should be as big as possible in the given space
-- Touchscreen user experience should be excellent
-- Layout and configuration should be both easy to operate and flexible
-- Phones, tablets, computers and other device and form factors should render well 
-- Include support for latest Chromium and other modern browsers
+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!
+
+# Design Goal
 
-# Features
-## Access from Phones, Tablets, Raspberry Pi and Computers
-  Simply navigate to `http://<Signal K Server URL>:<port>/@mxtommy/kip` to load KIP and enjoy it's features remotely on any device.
+The goal is to replicate and enhance the functionality of modern marine instrumentation displays while providing unmatched customization and flexibility. The design principles include:
 
-### Responsive Design
-  KIP adjusts to the device type and form factor for the best possible user experience.
+- **Full-Screen Utilization**: Ensure the display uses the entire screen without requiring scrolling, maximizing visibility and usability.
+- **Optimized for Readability**: Present data in a large, clear, and easily interpretable format to ensure quick comprehension. Utilize high-contrast color schemes to enhance visibility, especially in bright daylight conditions.
+- **Touchscreen Excellence**: Deliver an intuitive and seamless experience for touchscreen users, with support for gestures like swiping and tapping.
+- **Cross-Device Compatibility**: Guarantee a consistent and responsive experience across phones, tablets, computers, and other devices.
+- **Modern Browser Support**: Include support for the latest versions of Chromium and other modern web browsers to ensure optimal performance and compatibility.
 
-### Touch Devices
-- Swipe left and right to cycle trough your Page layouts.
-- Double tap to toggle Night / Day modes.
+## Features
 
-### KIP Mobile App
-Run KIP in full screen, with no browser controls visible, just like regular mobile apps. This feature is supported on most mobile OS. Each browser has it's own way of handling PWA deployments.
+### Intuitive Controls
+- Swipe up and down to navigate through your dashboards effortlessly.
+- Swipe left and right to access notifications and other system features quickly.
+- Use keyboard shortcuts for essential features, ensuring fast and efficient navigation across devices.
 
-![KIP PWA mode](./images/kipPhone.png)
+### Progressive Web App (PWA) Support
+Run KIP in full-screen mode without browser controls, just like a native mobile app. This feature is supported on most mobile operating systems. Follow your browser's instructions to install KIP as a PWA for quick and easy access. It's usually just a few clicks such as "Add to Home Screen".
 
-To install KIP as an App, first load KIP in the browser. Then follow the steps below:
+### Flexible Dashboard Layouts
+- Effortlessly create and customize dashboards using an intuitive grid layout system.
+- Add, resize, and align widgets to design tailored displays for your specific needs.
+- Duplicate widgets or entire dashboards, including their configurations, with a single click.
+- Organize and reorder dashboards by adding names and arranging them to suit your workflow.
+- Seamlessly switch between multiple dashboards for different roles, devices, or use cases.
 
-**iOS**
-1. Press the "Share" button
-2. Select "Add to Home Screen" from the action popup list
-3. Tap "Add" in the top right corner to finish installation.
-KIP is now installed and available on your home screen
+### Multiple User Profiles
+Create and manage profiles for different roles, devices, or use cases. Each profile can have its own dashboard configurations and settings.
 
-**Android**
-1. Press the "three dot" icon in the upper right to open the menu
-2. Select "Add to Home screen"
-3. Press the "Add" button in the popup
-KIP is now installed and available on your home screen
+### Open Source and Community-Driven
+KIP is built with modern web technologies and is open-source under the MIT license. Like many others, join the community on Discord or contribute to the project on GitHub to help shape its future.
 
 ## User Experience
 
 ### Flexible and Easy
   Meant to build purposeful screen(s) with however many widgets you want, where you want them. 
 
-  Quickly split pages into multiple areas, resize and align to your liking, add the widget of your choosing to each area. Need more? Add as many additional pages as you whish to keep your display purposeful. Simply swipe left and right or use the bottom page navigation button to quickly cycle from page to page.
+  Add, resize and position the widgets of your choosing. Need more? Add as many additional dashboards as you whish to keep your display purposeful. Simply swipe up and down to quickly cycle dashboards.
   ![Layouts Configuration Image](./images/KipWidgetConfig-layout-1024.png)
   
-  Easy basic widget configuration.
+  Intuitive widget configuration.
   ![Gauges Configuration Image](./images/KipConfig-display-1024x488.png) 
   
-  See what Signal K has to offer that you can leverage with widgets. Select it and tweak the display options your your purpose.
+  See what Signal K has to offer that you can leverage with widgets. Select it and tweak the display options to your purpose.
   ![Paths Configuration Image](./images/KipWidgetConfig-paths-1024x488.png)
   
   Many units are supported. Choose your preferred App defaults, than tweak it widget-by-widget as necessary. KIP will automatically convert the units for you.
   ![Units Configuration Image](./images/KipConfig-Units-1024.png) 
 
 ## Reusable Widget Library
-  All KIP Widgets are visual presentation controls that are very versatile with multiple advanced configuration options available to suit your needs:
-  - Numeric display: Create gauges to display any numerical data sent by your system - SOG, Depth, Winds Speed, VMG, refrigerator temperature, weather data, etc.
-  - Text display: Create gauges to display any textual data sent by your system - MPPT state, vessel details,Next Waypoint, Fusion radio song information, noon and sun phases, any system components configuration detail or statues available, etc.
-  - Date display: a timezone aware control with flexible presentation formatting support.
-  - Boolean Control Panel: A switch board to configure and operate remote devices - light switches, bilge pump, solenoid, any Signal K path that support boolean PUT operations.
-
-  - Linear gauge: Visually display any numerical data on a vertically or horizontally scale - Tank and reservoir levels, battery remaining capacity, etc.
-  - Linear electrical gauge: A visual display for electrical numerical data - chargers, MPPT, shunt, etc.
-  - Radial gauge: Visually display any numerical data on a radial scale - heading, compass, Speed, etc.
-  - Radial and linear Steel gauge: Old school look & fell gauges.
-
-  - Wind Steering Display: Your typical sailboat wind gauge.
-  - Freeboard-SK Chart Plotter: A high quality Signal K implementation of Freeboard integration widget.
-  - Autopilot Head: Operate your autopilot from any device remotely.
-  - Data Chart: Visualize data trends over time.
-  - Race Timer: Track regatta start sequence.
-  - Embedded Webpage: A powerful way of integrating any web based content or application within with your KIP layout - Grafana dashboards, Node-RED dashboard, your own standalone webapp,anything that does not
-cross domain!
-
-  Get the latest version of KIP to see what's new!
+All KIP Widgets are visual presentation controls that are very versatile with multiple advanced configuration options available to suit your needs:
+- **Numeric display**: Create gauges to display any numerical data sent by your system - SOG, Depth, Winds Speed, VMG, refrigerator temperature, weather data, etc.
+- **Text display**: Create gauges to display any textual data sent by your system - MPPT state, vessel details,Next Waypoint, Fusion radio song information, noon and sun phases, any system components configuration detail or statues available, etc.
+- **Date display**: a timezone aware control with flexible presentation formatting support.
+- **Position display**: Position coordinates in textual format.
+- **Boolean Control Panel**: A switch board to configure and operate remote devices - light switches, bilge pump, solenoid, any Signal K path that support boolean PUT operations.
+- **Slider**: A versatile control that allows users to adjust values within a defined range by sliding. Commonly used for settings like light intensity, volume control, or any parameter requiring fine-tuned adjustments.
+- **Simple Linear gauge**: A visual display for electrical numerical data - chargers, MPPT, shunt, etc.
+- **Linear gauge**: Visually display any numerical data on a vertically or horizontally scale - Tank and reservoir levels, battery remaining capacity, etc.
+- **Radial gauge**: Visually display any numerical data on a radial scale - Boat Speed,Eond Speed, engine RPM,etc.
+- **Compass gauge**: A card or marine compass to display directionnal data such as heading, bearing to next waypoint, wind angle, etc.
+- **Radial and linear Steel gauge**: Old school look & fell gauges.
+- **Wind Steering Display**: Your typical sailboat wind gauge.
+- **Freeboard-SK Chart Plotter**: A high quality Signal K implementation of Freeboard integration widget.
+- **Autopilot Head**: Operate your autopilot from any device remotely.
+- **Data Chart**: Visualize data trends over time.
+- **Race Timer**: Track regatta start sequence.
+- **Embedded Webpage**: A powerful way of displaying web based apps published on your Signal K server such as Grafana and Node-RED dashboard or your own standalone webapp.
+
+Get the latest version of KIP to see what's new!
+
 ### Widget Samples
-  Various
-  ![Sample Gauges Image](./images/KipGaugeSample1-1024x545.png)
-  
-  Electrical and Tank Monitoring Sample 
-  ![Electrical Concept Image](./images/KipGaugeSample2-1024x488.png)
+Various
+![Sample Gauges Image](./images/KipGaugeSample1-1024x545.png)
+
+Electrical and Tank Monitoring Sample 
+![Electrical Concept Image](./images/KipGaugeSample2-1024x488.png)
 
-  Freeboard-SK Integration
-  ![Freeboard-SK Image](./images/KipFreeboard-SK-1024.png)
+Freeboard-SK Integration
+![Freeboard-SK Image](./images/KipFreeboard-SK-1024.png)
 
-  Grafana Integration 
-  ![Embedded Webpage Concept Image](./images/KipGaugeSample3-1024x508.png)
+Grafana Integration 
+![Embedded Webpage Concept Image](./images/KipGaugeSample3-1024x508.png)
 
-  ## Night Mode
-  Keep your night vision with a simple double tap. The below image looks very dark, but at night...it's perfect!
+## Night Mode
+Keep your night vision. The below image looks very dark, but at night...it's perfect!
 
-  ![Night mode](./images/KipNightMode-1024.png)
+![Night mode](./images/KipNightMode-1024.png)
 
-  ## Harness The Power Of Data State Notifications
-  Stay informed with notifications about the state of the data you are interested in.
-  As an example, Signal K will notify KIP when a water depth or temperature sensors reaches certain levels. In addition to KIP's centralized notification menu, individual Widgets offer tailored visual representation appropriate
-  to their design objectives, providing an optimal user experience.
+## Harness The Power Of Data State Notifications
+Stay informed with notifications about the state of the data you are interested in.
+As an example, Signal K will notify KIP when a water depth or temperature sensors reaches certain levels. In addition to KIP's centralized notification menu, individual Widgets offer tailored visual representation appropriate
+to their design objectives, providing an optimal user experience.
 
-  ## Multiple User Profiles
-  If you have different roles on board; captain, skipper, tactician, navigator, engineers or simply different people with different needs, each can tailor as they wish. The use of profiles can also offer the ability to tie specific configuration arrangements to use case or device form factors.
+## Multiple User Profiles
+If you have different roles on board; captain, skipper, tactician, navigator, engineers or simply different people with different needs, each can tailor as they wish. The use of profiles can also offer the ability to tie specific configuration arrangements to use case or device form factors.
 
-# Connect & Share
+# Connect, Share and Support
 KIP has it's own Discord Signal K channel to get in touch. Join us at https://discord.gg/AMDYT2DQga
 
-# Feature, Ideas, Support
+# Feature, Ideas, Bugs
 See KIP's GitHub project for latest feature request.
 https://github.com/mxtommy/Kip/issues
 
@@ -133,7 +139,7 @@ Linux, Mac, Pi or Windows dev platform supported
 2. Checkout this new Branch.
 3. In a command shell (or in the Visual Code Terminal window), go to the root of you local project branch folder, if not done automatically by your IDE.
 4. Install project dependencies using NPM package and dependency manager: run `npm install`. NPM will read Kip project dependencies (see Steps 2), download and install everything automatically for you.
-5. Build the app locally using Angular-CLI: from that same project root folder, run `ng build`. CLI tool will  build KIP.
+5. Build the app locally using Angular-CLI: from that same project root folder, run `ng build`. CLI tool will build KIP.
 
 **Setup**
 1. Fire up your local dev instance with `npm run dev`.
@@ -145,7 +151,7 @@ Linux, Mac, Pi or Windows dev platform supported
 
 **Apple PWA Icon Generation**
 Use the following tool and command line:
-`npx pwa-asset-generator ./src/svg-templates/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/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%`
 
 **Share**
 Once done with your work, from your fork's working branch, make a GitHub pull request to have your code reviewed, merged and part of the next release.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mxtommy/kip",
-  "version": "3.0.0-beta.8",
+  "version": "3.0.0",
   "description": "An advanced and versatile marine instrumentation package to display Signal K data.",
   "license": "MIT",
   "author": {
@@ -45,36 +45,35 @@
     "e2e": "ng e2e"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^18.2.11",
-    "@angular/animations": "18.2.11",
-    "@angular/cdk": "^18.2.12",
-    "@angular/cli": "^18.2.11",
-    "@angular/common": "18.2.11",
-    "@angular/compiler": "18.2.11",
-    "@angular/compiler-cli": "18.2.11",
-    "@angular/core": "18.2.11",
-    "@angular/forms": "18.2.11",
-    "@angular/language-service": "18.2.11",
-    "@angular/material": "^18.2.12",
-    "@angular/platform-browser": "18.2.11",
-    "@angular/platform-browser-dynamic": "18.2.11",
-    "@angular/router": "18.2.11",
+    "@angular-devkit/build-angular": "^19.2.8",
+    "@angular/animations": "19.2.7",
+    "@angular/cdk": "19.2.10",
+    "@angular/cli": "^19.2.8",
+    "@angular/common": "19.2.7",
+    "@angular/compiler": "19.2.7",
+    "@angular/compiler-cli": "19.2.7",
+    "@angular/core": "19.2.7",
+    "@angular/forms": "19.2.7",
+    "@angular/language-service": "19.2.7",
+    "@angular/material": "19.2.10",
+    "@angular/platform-browser": "19.2.7",
+    "@angular/platform-browser-dynamic": "19.2.7",
+    "@angular/router": "19.2.7",
     "@godind/ng-canvas-gauges": "^6.2.1",
-    "@material/material-color-utilities": "^0.3.0",
     "@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.4",
+    "@types/js-quantities": "^1.6.6",
     "@types/lodash-es": "^4.17.9",
     "@types/node": "^18.19.30",
-    "chart.js": "^4.4.2",
+    "chart.js": "^4.4.9",
     "chartjs-adapter-date-fns": "^3.0.0",
-    "chartjs-plugin-annotation": "^3.0.1",
+    "chartjs-plugin-annotation": "^3.1.0",
     "codelyzer": "^6.0.0",
-    "compare-versions": "^5.0.1",
+    "compare-versions": "^6.1.1",
     "core-js": "^3.13.1",
     "date-fns": "^2.30.0",
     "gridstack": "^11.4.0",
@@ -83,25 +82,25 @@
     "jasmine-core": "~4.0.1",
     "jasmine-spec-reporter": "~5.0.0",
     "js-quantities": "^1.8.0",
-    "karma": "~6.3.17",
+    "karma": "^6.4.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-cli": "~2.0.0",
     "karma-coverage-istanbul-reporter": "^3.0.3",
     "karma-jasmine": "~4.0.0",
     "karma-jasmine-html-reporter": "^1.6.0",
     "lodash-es": "^4.17.21",
-    "ng-packagr": "^18.0.0",
-    "ngx-resize-observer": "^2.7.0",
+    "ng-packagr": "^19.2.0",
+    "ngx-markdown": "^19.1.1",
+    "ngx-resize-observer": "^3.0.0",
     "protractor": "~7.0.0",
-    "pwa-asset-generator": "^6.3.1",
-    "rx-dom-html": "^7.0.3",
+    "pwa-asset-generator": "^8.0.4",
     "rxjs": "^7.5.7",
     "sass": "^1.49.9",
     "screenfull": "^6.0.2",
     "ts-node": "^8.10.2",
     "tslib": "^2.6.2",
     "tslint": "^6.1.3",
-    "typescript": "^5.4.5",
-    "zone.js": "~0.14.10"
+    "typescript": "^5.8.2",
+    "zone.js": "~0.15.0"
   }
 }