Instrument panel implemented as a grid with draggable & resizable components
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.

Signal K Instrument Panel

Instrument panel implemented as a grid with draggable & resizable components. Components are added dynamically eg. when the panel receives data it hasn't seen before a new cell is added to the grid.



InstrumentPanel stores some of the settings in the browser's localstorage. In case there is some garbage there you can get it cleared by using a url with query parameter ?reset=true.

For Developers

  • install development dependencies with npm install
  • build & watch with npm start
  • building js bundle for distribution: npm run build (and push changes to dist/ui.js). This builds minified ui.js.


  • Remove primus.js usage. Primus is useful only with Signal K Node server and the requests for the client library cause unneeded confusion.

To Do

  • activate/deactivate individual widgets
  • connect to multiple servers
  • minify
  • react-grid-styles: bower packaging
  • 'Receiving indicator' (circle/circle-o)
  • allow bootstrap of grid configuration from server: settings panel shows json that can be retrieved from the server with ?useGridFromServer=true url parameter)
  • visible grid cell background
  • per server layout persisted in localstorage
  • last known servers & connection status in localstorage
  • good widgets for 'normal' data set (position, current, date & time)
  • true/both values in windmeter, change by click
  • alternative/configurable units (knots/mps/mph)
  • configurable display format (position: deg+min.dec, deg.min.sec / precision)
  • history graph widget (simple)
  • sailgauge widget
  • 'discovery mode' manual activation/deactivation
  • possibility to delete obsolete data items
  • manual addition of widgets, multiple alternative widgets
  • configuration mode for widgets
  • full screen mode for widgets
  • history graph widget (maybe for scaling)
  • configurable number of grid columns
  • multiple alternate layouts
  • server configuration storage (button to store on the server)
  • ais tracker widget
  • map widget
  • ui cleanup...
  • bootstrapping from server for history graph
  • subscription support: fetch items list from server, only subscribe when widget activated
  • use Primus/reconnect support