Progressive Sailing Frontend

Current live release of the: MarkOne Progressive Sailing WebApp

Information about the npm release:

The app is currently still in the development phase.

this npm package serves as a webapp for the Signal-K server for demo purposes

What is the MarkOne Progressive Sailing App?

Progressive Sailing is a web application for sailors to access and display sensor data from a vessel, transmitted to wifi from Signal-K.

The app has these main components: A dashboard, a logbook, and a photobearing tool.

Here is a snapshot of the central view, the dashboard:

The dashboard has features including:

• Map in the background provided by open street map including the layer of open seamap or a satelite view or just plain white (a night this would be black, but night view is not implemented yet)
• Two roses always centered around the boat position, as large as the screen allows, the outer rose is relative to north, the inner rose relative to the boat
• On the outer rose data like COG, HDG, AWD and TWD are shown
• On the inner rose data like Drag, AWA and TWA are shown
• The direction of true wind, apparent wind, COG and Heading are indicated by arrows, their length is in logarithmic proportion to the according speed
• 4 data fields are shown in the center of the roses, 4 more in the corners. These can be configured from the set of available data sets of Signal-K.
• 16 more data fields are shown either on the left and right edge or on the top and bottom edge, depending on orientation of the screen. Also these can be freely configured.
• At the top edge the Position coordinates and the date and time are shown
• At the bottom edge the engine revs and the log milage as well as the distance and bearing to a destination are shown (not shown in this image)
• At the bottom edge in the center the depth is always shown. This can not be configured
• At the top edge in the center either the heading or the COG or the TWD are shown, depending on the orientation of the view
• The view can be oriented to North up, Head up, COG up, or Wind up
• A pinch or swipe motion on a touch device or a roll on the mouse wheel will reduce the data fields to a minimum and reveil access to the map
• On the map, marks can be placed and seleced as target, routes can be specified and distances can be measured
• Marks can be moved or removed, routes can be altered and new waypoints added
• The clock at the top can be swaped out by a stop watch
• A history of the Heading and TWD is shown as a series of fading dots
• A polar diagram is generated from the incoming wind data
• A target speed and a performance in percent according to the polar is calculated
• Data fields are color coded and both show a short name like SOG and a long name like Speed over Ground in smaller caps
• Different configurations of the dashboard can be stored and managed, like one for regatta, one for cruising
• A log book is also in preparation, log book entries can be done from the dashboard with very few clicks
• Log book entries can also be entered by automated rules (still work in progress)

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

JS formatting with Prettier

yarn format

Preview for production

yarn preview