mxtommy / kip

SignalK Instrument package

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.

Design Goal

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

Features

Access from Phones, Tablets, Raspberry Pi and Computers

Once installed on the Signal K server, simply navigate to http://<Signal K Server URL>:<port>/@mxtommy/kip to load KIP and enjoy it's features remotely on any device.

Responsive Design

KIP adjusts to the device type and form factor for the best possible user experience.

Touch Devices

• Swipe left and right to cycle trough your Page layouts.
• Double tap to toggle Night / Day modes.

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.

To install KIP as an App, first load KIP in the browser. Then follow the steps below:

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

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

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.

Easy basic widget configuration.

See what Signal K has to offer that you can leverage with widgets. Select it and tweak the display options to your purpose.

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.

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 - 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 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!

Widget Samples

Various

Electrical and Tank Monitoring Sample

Freeboard-SK Integration

Grafana Integration

Night Mode

Keep your night vision with a simple double tap. The below image looks very dark, but at night...it's perfect!

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.

Connect & Share

KIP has it's own Discord Signal K channel to get in touch. Join us at https://discord.gg/AMDYT2DQga

Feature, Ideas, Support

See KIP's GitHub project for latest feature request. https://github.com/mxtommy/Kip/issues

How To Contribute

KIP is under MIT license and is built with Nodes and Angular using various open-source assets. All free!

Tools Linux, Mac, Pi or Windows dev platform supported

1. Install the latest Node version (v16+, v18 recommended)
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 your forked KIP instance (With Visual Code, GitHub support is built-in) and get the fork's Master branch locally.
5. Install npm and node. On macOS, you can use brew install node if you have homebrew.
6. Install the Angular CLI using npm install -g @angular/cli

Coding

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.
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.

Setup

1. Fire up your local dev instance with npm run dev.
2. Hit Run/Start Debugging in Visual Code or point your favorite browser to http://localhost:4200/@mxtommy/kip. Alternatively to start the dev server and connect using remote devices use such as your phone: ng serve --configuration=dev --serve-path=/@mxtommy/kip/ --host=<your computer's IP> --port=4200 --disable-host-check
3. Voila!

As you work on source code and save files, the app will automatically reload in the browser with your latest changes. You also need a running Signal K server for KIP to connect to and receive data.

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%

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.

kip's Issues

Feature Request: Add engine monitoring gauges page to KIP demo template

Feature Request: Add engine monitoring gauges page to KIP demo template

Thanks

Submit my contribution - New Gauges and Theme

Hi @mxtommy mxtommy,

I want to build a autopilot widget and since I know little about most of this tech, I started with a theme, then added new linear and radial gauge using ng-canvas-gauges. They all support your themes and config panels. I think I've done a pretty good job for a first timer. I'm not 100% done tuning colors schemes and such to make the gauges look really good but it should take me a few days.

How can I submit this to the project? Sorry but I'm new to this...

Note the Unit label in those screenshots are off: their is no power instrument data in the simulation stream so used paths to different streams just to display something.

Thanks

Easy way to connect to "this server"

New users who are running their SK server and starting Kip up would probably rather see their own data than demo.signalk.org, so an easy way to configure Kip and connect to the originating server would be great.

If somebody chooses to implement this make sure you take into account the option to run SK server with ssl, so that the protocol is https. Kip works ok with with https/wss urls.

HTML5 browser features

• Keep screen bright
• Fullscreen
• No history API or fix support in Signal K Node server

Deployment details

Nice work, really like the project :-)
Ive been installing via signalk-java using the new artemis server.

1. Install is fine (signalk-java does a git clone). Signalk-java then does an 'npm install', and 'npm build', I then needed a custom 'ng build' from the command line.

In the interests of auto-installs, it would be good if it all worked with std calls.

2. In signalk-java apps are installed in signalk-static/{app-name}/, where signalk-static is the root of the web server, eg '/' Hence the app is expected to have an index.html in the root dir which launches the app when http//myserver:8080/Kip is executed.

In Kip I need to launch /Kip/public/index.html. Then it fails as the tag is '/'
So:
Please add an index.html in the root, which redirects to public/
Adjust to work as That may need some thought as Im not sure how other projects deploy?

When label is set on widget, opening settings overwrites it

Label should be kept as is if set :D

Feature Request: Text orientation for apparent/true wind

Great work on this! Not critical, and not sure why it bothers me :-) but would it be possible to have an option on the compass/wind display show the text for AWA and TWA right side up depending on where the wind was coming from? For example if you are close hauled, the AWA number is upside down, on a run the true wind angle is upside down. Could we have the option to have Them flip orientation when it crosses the 'southern' or 'northern' half of the rose, thus being more readable at a rapid glance? -Thx!

Feature request: coordinate formatting

support of std coordinate formats like
dd mm.mm N ddd mm.mmm E
or
dd mm ss.ss N ddd mm ss.ss E
to show e.g. current position

Hardware e-ink display

Hello,
I would like to buy an e-ink tablet in order to display the data from Kip, have you tried some inexpensive models ...? The idea is to use this e-ink screen tablet only for Kip ... no other use ... so that it should be a minimum resource (display / cpu / memory / wifi / storage?)
Thanks in advance !
And thanks for Kip, it's a great project !
Olivier.S

Widget displays ratio even if % is selected

Widget displays ratio even if % is selected as the units.

Graph

• always show 2-4 values on vertical axis but at least one per 100px
• scroll the Animation horizontal, not vertical
• cleanup horizontal scale
• remove circles when they would be close to each other, the values are more accurate where the value changes than where the circles are
• determine the rounding in given data and allow the smooth graph to show any value in possible interval
• add the current value as watermark or in lower left corner (usually only the high values are interesting)

Feature Request: Add N2K Autopilot page to KIP demo template

Feature Request: Add N2K Autopilot page to KIP demo template

Thanks

Feature Request: Custom colors for other boats

From slack:

If using the Wind Gauge and setting it up for a different vessel (other than self), would it look the same (same colors/labels)? It would be nice to have to be able to specify the background color of the teardrops.

Wind gauge

Show ground wind. When STW is not available, TWS and TWA can not be calculated. GWS and GWA are the fallback. SignalK/signalk-derived-data#18

Solution maybe a switch for the displayed letter T/G

version 1.1.2 - Stuck in demo mode

Just updated to 1.1.2 I have attempted to load the previous saved settings. Webpage says that it has loaded and It immediately displays the Welcome to KIP. Going back into settings I see that the token has an X. I have gone into the server and deleted and re-requested / issued a token 3 times now and as soon as I load either the default or my saved configuration. It returns to the Welcom to KIP screen and the token will show an X.

Not sure where to go from here. Will post this on Slack #Plugins as well...

-- Chuck

Demo is not working after last update 0.1.9

running on signalk k server 1.14.0
Also lost prior configuration and wouldn't run prior config when pasted it in.

Make label of historical chart a little bit bigger

It would be nice if the label of historical chart was a little bit bigger, as it is almost not readable as it is now.

Platform Support: Support Simple browsers found in E-Books

Low power, Waterproof, sunlight readable, portable, inexpensive, multipurpose.

E-Books like Kindle and KOBO would be perfect platforms to display instrument data on.

Load Demo fails

On first use Load Demo fails with Cannot GET /@mxtommy/kip/page/0. Subsequent navigation to /@mxtommy/kip/ fixes things.

Auto scaling of historical chart data

With air pressure, a fixed Y-axis of say 970-1040 hPa would be within the "norm".
However it's sort of difficult to see changes to the pressure curve with such a big scope.
A solution to this could be to set the min and max range of the Y-axis to be limited to the min max values of the associated data set.

polifill pour eink kobo browser

hello i test kip on a kobo browser is very old but whith help off kobo developer they talk to me its possible with polifill i install all the polifills of polifills.ts but it dont work i think it s the localstorage fonction not work in kobo browser have you an idea thinks for your work great aplication

Feature Request: Implement Mikhus/Canvas-Gauges

A whole slew of attractive gauges that might be pretty easy to implement.

Feature request / Idea AIS Radar view

would be great to have a page or object : AIS radar view
the objective would be to have a display showning in any web browser on any devise a colision information of AIS targets in a radar like view.

Allow offline use via PWA

https://medium.com/@nsmirnova/creating-pwa-with-angular-5-part-2-progressifying-the-application-449e3a706129

:)

Extra /signalk/ in server configuration

As the SK specification sets /signalk/ as the standard path I think it would be easier and more strightforward to configure Kip with just protocol + hostname: http://demo.signalk.org as opposed to http://demo.signalk.org/signalk.

Some numeric values dont update

I notice that my Kip values for outside temperature dont change unless I refresh the browser page. The path is environment.outside.temperature and I am displaying in degrees F.

Canvas gauge change position in Firefox

Kip affected by this: Mikhus/canvas-gauges#232

Feature Request: Change Major ticks on Radial Compasses to Degrees

Have the ability to change the major Ticks on the radial compasses to 0,45,90, etc. in place of N,NE,E, etc. I can see where it is in the widget-gauge-ng-radial.component.ts file but wouldn't know how to begin to make it a check box or something as part of the setup when you create the widget.

Thanks,

Chuck

Feature Request: Display Time / Timers

Paths such as navigation.racing.timeToStart should be able to be displayed. SI is seconds but should be able to be Displayed as M:S.

Paths with an elapsed time navigation.trip.lastReset which I am using to hold an elapsed time from a the reset point. This I am storing in Seconds but should display as M:S or H:M or H:M:S
This would also be useful for values such as engine hours or just timers for Predicted Log navigation.

Other Time Paths should also be able to be displayed in a H:M:S (AM/PM) for a 12HR format or a HHMM:SS for a 24 hr clock.

SignalK-Full.service data type error

Hi @mxtommy,

I've started using streams from other than demo site to test with Electrical and other types of telemetry. The following error pop's up but I'm not how to fix it as I don't yet fully understand the Kip SignalK framework.

TypeError: Cannot use 'in' operator to search for 'timestamp' in null
Setting self to: vessels.urn:mrn:signalk:uuid:6a59e3cd-7ce2-45a7-a156-0270e9be48d7
Error: attribute d: Expected number, "M 250,250 L NaN,NaN A 160,16…".
Error: attribute d: Expected number, "M 250,250 L NaN,NaN A 160,16…".

It comes from src\app\signalk-full.service.ts in findKey() function. Exception is thrown at line 34 else if ('timestamp' in data) { // is it a timestamped value?.

The reason is the data object is Null. data is actually http response.body and it can be Null if no body was returned, which is not required and is a valid http operation. I looked at the response.header and all is fine: 200, OK, etc...

From what I read, you can only use in on singletons, objects, parameters or any. Obviously Null is a problem but I think the logic needs to be looked at as a Null HTTP response.body is something that we need to expect in some cases. Here is the data in question attached as JSON maybe it will ring a bell!

data.json.txt

Feature request: Provide Vertical time-series chart for TWD & TWS

A vertical strip chart for TWD and TWS paths is a hugely useful feature for competitive sailors to help their tactical decisionmaking. Example attached

Feature request: Drag and move Widgets

I found out the possibility to drag the frames and like it a lot! Thanks for this - but with eating the appetite grows :) - so now I would like to propose a drag and place for individual frames - or maybe just a drag and replace/swap the source- with the target frame.

Feature Request: Add barograph page to KIP demo template

Feature Request: Add barograph page to KIP demo template

Thanks

feature: Add Localtime

Thanks for a great plugin!

Would love to see the possibility to set a default value for NULL values, i.e. to display a message when there is nothing to display in a textbox.

Feature Request: User defined text

First of all.. wow.. I love this plugin. Thank you for your effort here.

I would like to be able to use something like the "text" panel and populate it with a user defined string instead of being sourced by a signalk path. It would be cool to be able to put labels or strings that identify what the page is for.

Feature request: Gain control over font size

Dont know if this project is still alife - anyhow I try :)
When configuring text fields (but also for numeric fields) no control is given to the font size.
The result for e.g. display system date/time or coordinates is therefore not readable.

New version not displaying data

New user so forgive me if I've done something stupid.
Dashboards were coming along great displaying data from signal K. Then I updated to the latest release.
Now when I run the plugin from Signal K or via open plotter I just get a blank screen?
I've tried uninstalling and starting from scratch but still get the blank screen?
What I have done wrong?

Raspberry Pi4 4GB running with the OpenCPN operating system + dAISy & GPS HATS.

Sorry if this is a silly question and thanks for the help (I hope)

Problem displaying gauge

I am useing mxtommy/kip for a wihle and I am quite happy, But since a while i have a problem displaying linear gauges propper and this only on one page. I created this page new after updating to 1.2.1.

I have no idea if this can be related. I am grateful for any advice

Percentages Unit

Show percentages as a unit type

Units reads ratio when it should read percent

When the unit percent is selected for the display the widget displays the value as percent correctly, however it shows the units as ratio.

Feature Request: Windgauge - indicator bearing to next waypoint

To me it would be usefull to have an indicator to the next waypoint in the windgauge.
By having that you can see directly if you can reach it based on the laylines.
On non tacking course you can obviously see if you are heading in right direction.

Angular Material prefix change

Angular material decided to go ahead and change their prefix everywhere to mat instead of md... breaking everything...

https://github.com/angular/material2/blob/master/CHANGELOG.md#deprecation-of-md-prefix

Feature Request: Rudder Position Indicator

Would it be possible to add an option on one of the linear gauge widgets to only show a single mark vs. coloring from the minimum value up to the value? The application for this would be a ruder angle indicator.

Feature Request: Add ability to save default config on server.

I think it would be useful if you could have a way to store a default configuration on the server.
Then each new device would not have to set everything up from a blank page.
Especially useful when the configurations become complex.

Dynamics theme selection and widgets

Hi @mxtommy,

When changing theme, some gauge elements don't automatically refresh their styles. You can see this with widget-numeric: change the theme and Title and Units texts don't update fillStyle color, but Value and MinMax do. I have similar issue with ng-gauges I added.

Reloading the browser page, resizing widget zones or browser window, or changing gauge page will refresh styles with new theme value.

Investigation
The issue is present for all styling application that comes from typescript. Reason is material components work nice with material themes, but elementRef and getComputedStyle not so much - at least not automatically.

Issue
All styling changes applied in ts, as opposed to in templates, are not applied automatically on theme change. Some event based mechanism is needed to trigger custom styling code updates such as getComputedStyle, or whatever needs to be done in the widget.

Example: the only reason widget-numeric Value and MinMax texts updates instantly on theme change, is because they are drawn based on Subscription events which is constantly being raised. Title and Units texts are only drawn in resizeWidget(). This is true for any widget that sets styles in code. Setting styles in code is I think essential or the only way to style in many cases.

Proposed Fix
We need a theme change event in widgets. This will allow us to trigger ts related styling code.

I've found that AppSettingsService exposes Observable this.AppSettingsService.getThemeNameAsO(), this.AppSettingsService.themName and a bunch more theme related stuff. I am playing with this.AppSettingsService.getThemeNameAsO().subscribe() and still have not figure out how events and such work in Angular, but I think I am on the right track.

@mxtommy do you think this is the right approach?

Connects to /signalk/v1/stream but doesnt use websocket

Seems to switch to ws, then fail on each call. I remember you said it was polling rather than ws?

In that case it should use /signalk/v1/api or some long-polling scheme. Happy to help work it out as the artemis server should transparently handle ws, long-polling, comet, etc but doesnt in this case.

Update config json in /settings immediately.

Currently if you change anything in /settings, the change is not reflected under "config" tab as that only gets populated on NgOnInit when you enter /settings. Will need to change from NgOnInit to some sort of Observable.

Make angular and friends dev dependencies

The built static files are all that is needed, right? So there should be 0 runtime deps littering users’ disks.

Alarms not cleared on Server change

Not critical but the Alarms don't get cleared when you change the API URL. Some reset missing somewhere.

TTL Timer on data.

Add a timer to the gauges so that they'd indicate lack of data if they've stopped updating.

Need to see how to handle non-changing information.