@mxtommy/kip 2.3.0 → 2.4.0

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+# V 2.4.0
+## New features
+* Added Numeric, Date and Text Widgets color support
+* Added Next Waypoint bearing indicator to Wind Widget
+* Added support for Widget data expiration (TTL). Previously Widget stayed still when a source stopped sending data or the server connection was lost. 
+## Improvements
+* Strengthen Widget configuration management when adding new KIP properties 
+## Fixes
+* Numeric Widget HH:MM:SS conversion unit broken
+* Wind Widget speed value indicator sometimes doing a full rotating when passing over zero degrees
 # V 2.3.0
 ## New features
 * Added support for Signal K Source Priorities

package/README.md

@@ -1,11 +1,11 @@
 # About KIP
 
-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.
+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.
 
 # Design Goal
 
 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
+- 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
@@ -14,52 +14,59 @@ The idea is to replicate the functionality of MFDs such as the B&G Triton, Rayma
 
 # 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.
+  Simply navigate to `http://<Signal K Server URL>:<Signal K Server port>/@mxtommy/kip` to load KIP and enjoy it's features remotely on any device.
+
+### Responsive Design
+  KIP adjust to the device type and form factor for the best possible user experience.
+
+### Touch Devices
+- Swipe left and right to cycle trough your Widget layouts.
+- Double tap to toggle night mode.
 
 ## 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.
+  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 offers the ability to tie specific configuration arrangements to use case or form factors.
 
 ## User Experience
+
+### Night Mode
+  Keep your night vision with a simple tap, regardless of the selected theme. The below image looks very dark, but at night...it's perfect!
+
+  ![Night mode](./KipNightMode-1024x488.png)
+
 ### Built-in Themes
   Use your favorite style from the built-in themes gallery.
 
   Modern Dark Theme
   ![Modern Dark Theme](./KipSample-1-1024x488.png)
-  
+
   Signal K Inspired Theme
   ![Signal K Inspired Theme](./KipSample-2-1024x488.png)
-  
+
   Light Blue Theme
   ![Light Blue Theme](./KipSample-3-1024x488.png)
 
   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!
-
-  ![Night mode](./KipNightMode-1024x488.png)
-
-
 ## Gauge Layout and Configuration
 ### Flexible and Easy
   Meant to build purposeful screen(s) with however many gauges or widgets you want, where you want them. 
 
-  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.
+  Quickly divide the screen area into zones, resize and position, add the gauge of your choosing. Need more? Add as many additional pages as you whish to keep screens purposeful. Simply tap the navigation button keys to quickly rotate from page to page.
   ![Layouts Configuration Image](./KipWidgetConfig-layout-1024x488.png)
   
-  Easy basic gauge and widget configuratio.
+  Easy basic gauge and widget configuration.
   ![Gauges Configuration Image](./KipConfig-display-1024x488.png) 
   
   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 preferred 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 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.
+  All KIP Gauges and Widgets are visual presentation controls that are very versatile with multiple advanced configuration options available to suit your needs:
+  - 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.
   - 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 
@@ -67,8 +74,8 @@ The idea is to replicate the functionality of MFDs such as the B&G Triton, Rayma
   - 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 
+  - Button and Switch control: Operate remote devices - light switches, bilge pump, solenoid, any Signal K path that support boolean PUT operations
+  - Date display: a timezone aware control with flexible presentation formatting 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!
@@ -84,6 +91,10 @@ The idea is to replicate the functionality of MFDs such as the B&G Triton, Rayma
   Grafana Embedded Webpage sample 
   ![Embedded Webpage Concept Image](./KipGaugeSample3-1024x508.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, KIP can notify (inform, warn, alert) you when the water depth or a temperature sensor reaches certain levels. In addition to KIP's centralized basic visual and audio notification support, each type of Widget offers a tailored visual representation appropriate
+  to their design objectives for an optimal user experience.
 
 # Developing
 
@@ -132,7 +143,7 @@ Join us on Slack -> Signalk-dev / Apps_and_client channel. We will hook up and a
  * 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
+ * Retire outdated SteelGauges
  * Rebuild alerting to new Signal K Specifications
  * Attitude Indicator Widget - Help Wanted
  * Sailing Polars Widget - Help Wanted

package/package.json

@@ -1,10 +1,18 @@
 {
   "name": "@mxtommy/kip",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "An advanced and versatile 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"}],
+  "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": {
@@ -40,6 +48,7 @@
     "@angular/compiler-cli": "14.3.0",
     "@angular/language-service": "14.3.0",
     "@types/canvas-gauges": "^2.1.2",
+    "@types/hammerjs": "^2.0.45",
     "@types/howler": "^2.2.10",
     "@types/jasmine": "~3.6.0",
     "@types/jasminewd2": "^2.0.9",
@@ -63,31 +72,31 @@
     "typescript": "^4.6.4"
   },
   "dependencies": {
-    "@angular/compiler": "14.3.0",
     "@angular/animations": "14.3.0",
-    "@angular/common": "14.3.0",
     "@angular/cdk": "^14.2.7",
+    "@angular/common": "14.3.0",
+    "@angular/compiler": "14.3.0",
     "@angular/core": "14.3.0",
     "@angular/forms": "14.3.0",
+    "@angular/material": "^14.2.7",
     "@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",
+    "compare-versions": "^5.0.1",
+    "core-js": "^3.13.1",
     "date-fns": "^2.30.0",
+    "hammerjs": "^2.0.8",
+    "howler": "^2.2.4",
     "js-quantities": "^1.8.0",
-    "lodash-es": "^4.17.21"
+    "lodash-es": "^4.17.21",
+    "rx-dom-html": "^7.0.3",
+    "rxjs": "^7.5.7",
+    "screenfull": "^6.0.2",
+    "zone.js": "~0.11.4"
   }
 }

package/public/3rdpartylicenses.txt

@@ -399,6 +399,31 @@ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
 
 
+hammerjs
+MIT
+The MIT License (MIT)
+
+Copyright (C) 2011-2014 by Jorik Tangelder (Eight Media)
+
+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.
+
+
 howler
 MIT
 Copyright (c) 2013-2020 James Simpson and GoldFire Studios, Inc.

package/public/index.html

@@ -1,19 +1,15 @@
-<!DOCTYPE html><html lang="en"><head>
-  <meta charset="utf-8">
+<!DOCTYPE html><html lang="en"><head><base href="./">
+  <meta charset="utf-8" name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">
   <title>KIP</title>
-  <base href="/@mxtommy/kip/">
-
+  <link rel="icon" type="image/x-icon" href="favicon.ico">
+  <style>@-webkit-keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@-webkit-keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@-webkit-keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@-webkit-keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@-webkit-keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@-webkit-keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:root{--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}:root{--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}</style><link rel="stylesheet" href="assets/fontawesome6/css/all.min.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="assets/fontawesome6/css/all.min.css"></noscript>
   <script src="assets/tween-min.js"></script>
   <script src="assets/steelseries-min.js"></script>
   <script src="assets/NoSleep.min.js"></script>
-
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <style>@-webkit-keyframes fa-beat{0%,90%{-webkit-transform:scale(1);transform:scale(1)}45%{-webkit-transform:scale(var(--fa-beat-scale,1.25));transform:scale(var(--fa-beat-scale,1.25))}}@-webkit-keyframes fa-bounce{0%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}10%{-webkit-transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0);transform:scale(var(--fa-bounce-start-scale-x,1.1),var(--fa-bounce-start-scale-y,.9)) translateY(0)}30%{-webkit-transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em));transform:scale(var(--fa-bounce-jump-scale-x,.9),var(--fa-bounce-jump-scale-y,1.1)) translateY(var(--fa-bounce-height,-.5em))}50%{-webkit-transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0);transform:scale(var(--fa-bounce-land-scale-x,1.05),var(--fa-bounce-land-scale-y,.95)) translateY(0)}57%{-webkit-transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em));transform:scale(1) translateY(var(--fa-bounce-rebound,-.125em))}64%{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}to{-webkit-transform:scale(1) translateY(0);transform:scale(1) translateY(0)}}@-webkit-keyframes fa-fade{50%{opacity:var(--fa-fade-opacity,.4)}}@-webkit-keyframes fa-beat-fade{0%,to{opacity:var(--fa-beat-fade-opacity,.4);-webkit-transform:scale(1);transform:scale(1)}50%{opacity:1;-webkit-transform:scale(var(--fa-beat-fade-scale,1.125));transform:scale(var(--fa-beat-fade-scale,1.125))}}@-webkit-keyframes fa-flip{50%{-webkit-transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg));transform:rotate3d(var(--fa-flip-x,0),var(--fa-flip-y,1),var(--fa-flip-z,0),var(--fa-flip-angle,-180deg))}}@-webkit-keyframes fa-shake{0%{-webkit-transform:rotate(-15deg);transform:rotate(-15deg)}4%{-webkit-transform:rotate(15deg);transform:rotate(15deg)}8%,24%{-webkit-transform:rotate(-18deg);transform:rotate(-18deg)}12%,28%{-webkit-transform:rotate(18deg);transform:rotate(18deg)}16%{-webkit-transform:rotate(-22deg);transform:rotate(-22deg)}20%{-webkit-transform:rotate(22deg);transform:rotate(22deg)}32%{-webkit-transform:rotate(-12deg);transform:rotate(-12deg)}36%{-webkit-transform:rotate(12deg);transform:rotate(12deg)}40%,to{-webkit-transform:rotate(0deg);transform:rotate(0deg)}}@-webkit-keyframes fa-spin{0%{-webkit-transform:rotate(0deg);transform:rotate(0deg)}to{-webkit-transform:rotate(1turn);transform:rotate(1turn)}}:root{--fa-font-brands:normal 400 1em/1 "Font Awesome 6 Brands"}@font-face{font-family:"Font Awesome 6 Brands";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-brands-400.woff2) format("woff2"),url(../webfonts/fa-brands-400.ttf) format("truetype")}:root{--fa-font-regular:normal 400 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:400;font-display:block;src:url(../webfonts/fa-regular-400.woff2) format("woff2"),url(../webfonts/fa-regular-400.ttf) format("truetype")}:root{--fa-font-solid:normal 900 1em/1 "Font Awesome 6 Free"}@font-face{font-family:"Font Awesome 6 Free";font-style:normal;font-weight:900;font-display:block;src:url(../webfonts/fa-solid-900.woff2) format("woff2"),url(../webfonts/fa-solid-900.ttf) format("truetype")}</style><link rel="stylesheet" href="assets/fontawesome6/css/all.min.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="assets/fontawesome6/css/all.min.css"></noscript>
-<style>html,body,app-root{height:100%}body{margin:0}</style><link rel="stylesheet" href="styles.5e53fc8bc300bdac.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.5e53fc8bc300bdac.css"></noscript><link rel="manifest" href="manifest.json" crossorigin="use-credentials"></head>
+<style>html,body,app-root{height:100%}body{margin:0}</style><link rel="stylesheet" href="styles.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.css"></noscript><link rel="manifest" href="manifest.json" crossorigin="use-credentials"></head>
 
 <body>
   <app-root></app-root>
-<script src="runtime.e75056c32c37f59d.js" type="module"></script><script src="polyfills.64db6be9cdc8f808.js" type="module"></script><script src="main.32aba1d68004481e.js" type="module"></script>
+<script src="runtime.js" type="module"></script><script src="polyfills.js" type="module"></script><script src="main.js" type="module"></script>
 
 </body></html>