@mxtommy/kip 1.3.0 → 2.0.0

package/CHANGELOG.md

@@ -1,3 +1,38 @@
+# V 2.0.0
+## New features
+* Breaking Change - KIP configuration sharing using Signal K user key data storage feature
+* Support for Signal K User authentication
+* KIP authentication flow and UI
+* Race Timer widget
+* Data/time Widget. Special thanks to techgardeners
+* Ah and kWh units support. Special thanks to amirlanesman
+* New Storage Service
+* New Authentification Service
+* New App bootstrap Init Service
+## Improvements
+* Button/Switch Widget UI improvement to On/Off status indicator 
+* Upgrade to Angular 14
+* Performance improvements with reduction of Angular Change Detection
+* Reduced bundle size
+* Streamlined Widget framework to facilitate Widget contribution and creation
+* Migration to RxJS WebSocket
+* Improved JavaScript Web Token (JWT) management using HTTP Intreceptor
+* Improved management of Signal K communications reducing server buffer overflow and server-side termination exceptions handling.
+* Support for Signal K Delta Metadata updates
+* Retirement of full.service in favor of the Delta service for improved performance, reduced CPU load and code simplification
+* Kip configuration data split into Connection and Configuration files enhancing KIP configuration sharing
+* Enhanced Request Service support
+* Enhanced Console logging for improved tracing and debugging
+* Added the ability to add a display text to the Blank widget. Special thanks to techgardeners
+* Various dependency upgrades
+* Code cleanup and documentation
+## Fixes
+* widget-numeric.component.html code typo preventing proper theme rendering. Special thanks to mhaberler
+* Issue where simple linear gauge assumes min value=0. Special thanks to amirlanesman
+* Fix spelling in datasets configuration. Special tahnks to philipa 
+# V 1.3.1
+* Angular production build script update
+* fixed historical widget axis and label theming color, thanks VibroAxe
 # V 1.3.0
 * Platform update to Node 14, Angular and Angular Material 12
 * Upgrade to Awesomefont6 with new icon style classes update
@@ -84,7 +119,7 @@
 * Load / Save config from server!
 * Notifications service for application status (snackbar)
 * Deleting the last widget in a page deletes the page!
-* Signalk Notifications in menubar!
+* Signal K Notifications in menubar!
 
 ### V0.1.12
 * iFrame to embed something in kip
@@ -101,10 +136,10 @@
 ### V0.1.9
 * Updated NPM dependencies
 * Show connection lost overlay on closed websocket connection
-* Only resize Steelseries Gauges max 1 a second (helps in resizing)
+* Only resize Steelseries Gauges once a second (helps in resizing)
 * Add Frequency Units
 * Put Support! On/Off and Momentary support on boolean state
-* Request R/W token from SignalK Server
+* Request R/W token from Signal K Server
 
 ### V0.1.8
 * Fix bug related to source parsing in deltas

package/CONTRIBUTORS.md

@@ -6,10 +6,10 @@ KIP contributors (sorted alphabetically)
 
 * **[David Godin](https://github.com/godind)**
 
-  * Integration of Canvas-Gauges
-  * A lot of UI polishing and code cleanup
-  * Additional Customization of gauges
-  * Metadata/Zones work
+  * Performance improvements
+  * Code and framework refactoring 
+  * UI polishing, code documentation
+  * Additional Widgets
 
 * **[Thomas St-Pierre](https://github.com/mxtommy)**
 

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 mxtommy
+
+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/README.md

@@ -1,102 +1,140 @@
-# Kip 
+# About KIP
 
-This is a marine instrumentation package to display signalK data. Display can be split up in any arrangement to show any kind data available on the server.
+KIP is powerfull 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.
 
 # Design Goal
 
-The idea is to replicate the functionality of your average MFD such as the B&G Triton, Raymarine i70, or Garmin GMI20.
+The idea is to replicate the functionality of MFDs such as the B&G Triton, Raymarine i70, or Garmin GMI20.
 - Display should be fullscreen 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
-- Compatibility with Chromium browser and other device form factor important (**HELP WANTED)  
+- Phones, tablets, computers and other device and form factors should render well 
+- Include support for latest Chromium and other modern browsers
 
 # Features
+## Access from Phones, Tablets, Raspberry Pi and Computers
+  Simply navigate to `http://<Signal K Server URL>:<Signal K Server port>/@mxtommy/kip` to load KIP and enjoy it's features remotly on any device.
+
+## Multiple User Profiles
+  If you have different roles on board; captiain, skipper, tacticien, navigator, engineers or simply different people with diffenrent needs, each can tailor as they wish. The use of profiles can also offers the ability to tie specific configuration arrangements to usecase or form factors.
+
 ## User Experience
-### Built-in Theme Sample
-  Request a theme and send us inspirational/reference material (web sites, picture, etc.). If we fall in love, we will do it. Even better, branch and contribute. We will assist and guide!
+### Built-in Themes
+  Use your favorite style from the built-in themes gallery.
 
   Modern Dark Theme
   ![Modern Dark Theme](./KipSample-1-1024x488.png)
   
-  SignalK Inspired Theme
-  ![SignalK Inspired Theme](./KipSample-2-1024x488.png)
+  Signal K Inspired Theme
+  ![Signal K Inspired Theme](./KipSample-2-1024x488.png)
   
   Light Blue Theme
   ![Light Blue Theme](./KipSample-3-1024x488.png)
 
-### Accessible Night Mode
-  Keep your night vision with a quick Night Mode access button, regardless of the selected theme. The below image looks very dark, but at night...it's perfect!
+  NOTE: Request a new theme by sending us inspirational/reference material (web sites, picture, etc.).
+  If we fall in love, we will do it. Even better, branch and contribute yourself. We will assist and guide!
+
+### Night Mode
+  Keep your night vision woth a simple tab, regardless of the selected theme. The below image looks very dark, but at night...it's perfect!
 
-  ![Light Blue Theme](./KipNightMode-1024x488.png)
+  ![Night mode](./KipNightMode-1024x488.png)
 
 
 ## Gauge Layout and Configuration
 ### Flexible and Easy
-  Built purposeful screen(s) with however many gauges you want, where you want them. 
+  Meant to build purposeful screen(s) with however many gauges or widgets you want, where you want them. 
 
-  Split or delete gauge zones, resize and position, then simply add the gauge of your choosing. Add as many pages as you whish to keep screens purposeful.
+  Quickly devide the screen area into zones, resize and position, add the gauge of your choosing. Need more? Add as many additionnal pages as you whish to keep screens purposeful. Simply tap the buttom navigation keys to quickly rotate from page to page.
   ![Layouts Configuration Image](./KipWidgetConfig-layout-1024x488.png)
   
-  Easy basic gauge config.
+  Easy basic gauge and widget configuratio.
   ![Gauges Configuration Image](./KipConfig-display-1024x488.png) 
   
-  See what SignalK has to offer that you can leverage in a gauge. Select it and tweak the display options for your purpose.
+  See what Signal K has to offer that you can leverage in a gauge. Select it and tweak the display options for your purpose.
   ![Paths Configuration Image](./KipWidgetConfig-paths-1024x488.png)
   
-  Many units are supported. Choose your prefered App defaults, than tweak it gauge by gauge as necessary. Kip will convert the displayed units for you.
+  Many units are supported. Choose your prefered App defaults, than tweak it gauge-by-gauge as necessary. KIP will convert the displayed units for you.
   ![Units Configuration Image](./KipConfig-Units-1024x488.png) 
 
-### Reusable Gauge Library
-  Get the latest version of Kip to see what's new!
-
-  Sample gauge types
-  ![Sample Gauges Image](./KipGaugeSample-1-1024x545.png)
+### Reusable Gauge and Widget Library
+  All KIP Gauges and Widgets are visual presentation controls that are very versatile with multiple configuration options available to suit your needs:
+  - Text display: Create gauges to display any textual data sent by your system - MPPT state, Timezone date and time, Next Waypoint, Fusion radio song information, noon and sun phases, any system components configuration detail or statues available, etc.
+  - Numeric display: Create gauges to display any numerical data sent by your system - SOG, Depth, Winds Speed, VMG, refrigerator temperature, weather data, etc.
+  - Wind gauge: Your typical sailboat wind gauge
+  - Autopilot: Operate your autopilot from any device remotely 
+  - 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
+  - Button and Switch control: Operate remote devices - light switches, bildge pump, solenoid, any Signal K device that support boolean PUT operations
+  - Date display: a timezone aware control with flexible presentation formating support 
+  - Race Timer: Track regatta start sequence
+  - Historical datagram chart: Display numerical data over time on a chart
+  - Embedded Webpage: A powerful way of integrating any web based content or application within with your KIP layout - Grafana dashboards, Node-RED dashboard, internet weather services, Youtube, Netflix, Twitter, Gmail, your own standalone webapp, you name it!
+
+  Get the latest version of KIP to see what's new!
+
+  Gauge types sample
+  ![Sample Gauges Image](./KipGaugeSample1-1024x545.png)
   
   Electrical and Tank monitoring sample 
-  ![Electrical Concept Image](./KipMonitor-1024x488.png)
+  ![Electrical Concept Image](./KipGaugeSample2-1024x488.png)
+
+  Grafana Embedded Webpage sample 
+  ![Embedded Webpage Concept Image](./KipGaugeSample3-1024x508.png)
+
 
 # Developing
 
-Kip is built on Angular using various open-source assets. All free!
+KIP is built on Angular using various open-source assets. All free!
 
 **Tools**
 
 Linux, Macs, Pi or Windows dev platform supported
-1. Install the latest Node version
-2. Download you favorite coding IDE (we use the free Visual Code)
-3. Create your own GitHub Kip fork and configure your IDE source control to point to this Fork (With Visual Code, GitHub support is built-in)
+1. Install the latest Node version (v16+)
+2. Download your favorite coding IDE (we use the free Visual Code)
+3. Create your own GitHub KIP fork.
+4. Configure your IDE's source control to point to this fork (With Visual Code, GitHub support is built-in) and get the latest Master branch locally.
 
 **Setup**
-1. Create a GitHub Branch of your own Kip Fork
+1. From your fork's Master branch, create working branch with a name such as: New-Widget-abc or fix-issue-abc, etc.
 2. Checkout this new Branch to get the source code locally.
 3. In a command shell (or in the Visual Code Terminal window), go to the root of you local project folder.
 4. Install project dependencies using NPM package and dependency manager: run `npm install`. NPM will read local 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 read local Kip project configuration (see Tools - steps 4) and build everything.
+5. Build the app locally using Angular-CLI: from that same project root folder, run `ng build`. CLI tool will read local Kip project configuration and set the base href(see Tools - steps 4) and build everything.
 
 **Work**
-1. Fire up your local dev instance with CLI using `ng serve --configuration=dev`.
-2. Point your favorite browser to `http://localhost:4200/` and voila!
+1. Fire up your local dev instance with CLI using `ng serve --configuration=dev --serve-path=/` to enable the debugger map file loading.
+2. Hit Run/Start Debugging in Visual Code or point your favorite browser to `http://localhost:4200/`
+3. Voila! You can build, test and fix.
 
 *As you work on source code and save files, the app will automatically reload in the browser with your latest changes.*
 
 **Publish**
-1. From your Fork's working Branch, make a GitHub pull request to have your code reviewed, merged and part of the next release. 
+1. 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.
 
 Or
 
-2. Build your own version:
-  1. Use the `-prod` flag for a production build.
-  2. To generate a npm package, run `npm run-script build-npm`.
-  3. Warning: Git Bash seems to mess up Base Href, fix it in public/index.html if needed
-  4. Deploy and have fun! 
+2. Build your own production version:
+  1. Build: In a terminal from you project folder, use `ng build --configuration=production` to generate a production build.
+  2. Have fun! 
 
-**Collaborate**
-Join us on Slack -> SignalK-dev / Apps_and_client channel. We will hook up and assist as best we can.
+**Communication and Collaboration**
+Join us on Slack -> Signalk-dev / Apps_and_client channel. We will hook up and assist as best we can.
 
 # Feature Ideas
- * More Customization options for Historical Charts
- * Attitude Indicator
- * Sailing Polars with ChartJS Radar type chart?
+ * AIS Widget - Help Wanted
+ * Light indicator Widget for Boolean paths
+ * Fuel Consumption Widget
+ * GPS information Widget - Help Wanted
+ * Improved Metadata configuration
+ * Improved Zones support
+ * Add a KIP Widget CLI Schematic to automate new Widget creation and improve contribution
+ * Improved error logging / performance gain
+ * Retire outdated Steelgauges
+ * Rebuild alerting to new Signal K Specifications
+ * Attitude Indicator Widget - Help Wanted
+ * Sailing Polars Widget - Help Wanted
  * More Customization options for radial/linear Gauges
- * Pre-created widgets for commonly used displays
+ * Pre-created Widgets for commonly used displays

package/package.json

@@ -1,7 +1,16 @@
 {
   "name": "@mxtommy/kip",
-  "version": "1.3.0",
+  "version": "2.0.0",
+  "description": "An advanced and verasatile marine instrumentation package to display Signal K data.",
   "license": "MIT",
+  "author": {"name": "Thomas St.Pierre", "email": "thomas@samoht.ca"},
+  "contributors": [{"name": "David Godin", "email": "godind@hotmail.com"}],
+  "homepage": "https://github.com/mxtommy/Kip",
+  "bugs": "https://github.com/mxtommy/Kip/issues",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mxtommy/Kip"
+  },
   "keywords": [
     "signalk-webapp",
     "signalk-category-instruments",
@@ -12,76 +21,73 @@
     "marine",
     "nmea"
   ],
-  "homepage": "https://github.com/mxtommy/Kip",
-  "bugs": "https://github.com/mxtommy/Kip/issues",
-  "author": "Thomas St.Pierre <thomas@samoht.ca>",
+  "signalk": {
+    "appIcon": "./assets/icon-64x64.png",
+    "displayName": "KIP Instrument MFD"
+  },
   "scripts": {
     "ng": "ng",
-    "start": "ng serve --configuration=dev",
-    "build": "ng build",
-    "build-npm": "ng build --prod --base-href=/@mxtommy/kip/",
+    "start": "ng serve --configuration=dev --serve-path=/",
+    "build-dev": "ng build --configuration=dev --base-href=/@mxtommy/kip/",
+    "build-prod": "ng build --configuration=production --base-href=/@mxtommy/kip/",
     "test": "ng test",
     "lint": "ng lint",
     "e2e": "ng e2e"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/mxtommy/Kip"
-  },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.2.16",
-    "@angular/animations": "12.2.16",
-    "@angular/cdk": "^12.2.13",
-    "@angular/cli": "^12.2.16",
-    "@angular/common": "12.2.16",
-    "@angular/compiler": "12.2.16",
-    "@angular/compiler-cli": "12.2.16",
-    "@angular/core": "12.2.16",
-    "@angular/forms": "12.2.16",
-    "@angular/language-service": "12.2.16",
-    "@angular/localize": "^12.2.16",
-    "@angular/material": "^12.2.13",
-    "@angular/platform-browser": "12.2.16",
-    "@angular/platform-browser-dynamic": "12.2.16",
-    "@angular/platform-server": "12.2.16",
-    "@angular/router": "12.2.16",
+    "@angular-devkit/build-angular": "^14.2.13",
+    "@angular/cli": "^14.2.13",
+    "@angular/compiler-cli": "14.3.0",
+    "@angular/language-service": "14.3.0",
     "@types/canvas-gauges": "^2.1.2",
+    "@types/howler": "^2.2.10",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.9",
-    "@types/node": "^14.17.1",
-    "angular-resize-event": "^3.1.1",
-    "angular-split": "^3.0.3",
-    "canvas-gauges": "^2.1.7",
-    "chart.js": "^3.5.1",
-    "chartjs-adapter-moment": "^1.0.0",
+    "@types/js-quantities": "^1.6.4",
+    "@types/lodash-es": "^4.17.9",
+    "@types/node": "^20.8.6",
     "codelyzer": "^6.0.0",
-    "compare-versions": "^3.6.0",
-    "core-js": "^3.13.1",
-    "hammerjs": "^2.0.8",
-    "howler": "^2.2.1",
     "jasmine-core": "~4.0.1",
     "jasmine-spec-reporter": "~5.0.0",
-    "js-quantities": "^1.7.6",
     "karma": "~6.3.17",
     "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",
-    "moment": "^2.29.1",
     "protractor": "~7.0.0",
-    "rx-dom-html": "^7.0.3",
-    "rxjs": "^6.6.7",
     "sass": "^1.49.9",
-    "screenfull": "^5.1.0",
     "ts-node": "^8.10.2",
     "tslib": "^2.2.0",
     "tslint": "^6.1.3",
-    "typescript": "^4.3.5",
-    "zone.js": "~0.11.4"
+    "typescript": "^4.6.4"
   },
   "dependencies": {
-    "@biacsics/ng-canvas-gauges": "^6.0.7",
-    "util": "^0.12.4"
+    "@angular/compiler": "14.3.0",
+    "@angular/animations": "14.3.0",
+    "@angular/common": "14.3.0",
+    "@angular/cdk": "^14.2.7",
+    "@angular/core": "14.3.0",
+    "@angular/forms": "14.3.0",
+    "@angular/platform-browser": "14.3.0",
+    "@angular/platform-browser-dynamic": "14.3.0",
+    "@angular/router": "14.3.0",
+    "@angular/material": "^14.2.7",
+    "rxjs": "^7.5.7",
+    "rx-dom-html": "^7.0.3",
+    "zone.js": "~0.11.4",
+    "core-js": "^3.13.1",
+    "screenfull": "^6.0.2",
+    "hammerjs": "^2.0.8",
+    "howler": "^2.2.4",
+    "compare-versions": "^5.0.1",
+    "angular-resize-event": "^3.2.0",
+    "angular-split": "^14.1.0",
+    "canvas-gauges": "^2.1.7",
+    "chart.js": "^3.5.1",
+    "chartjs-adapter-date-fns": "^3.0.0",
+    "date-fns": "^2.30.0",
+    "js-quantities": "^1.8.0",
+    "lodash-es": "^4.17.21"
   }
 }