@signalk/freeboard-sk

<!DOCTYPE html> <html> <head> <title>Freeboard | Help</title> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="icon" type="image/x-icon" href="./favicon.ico" />  <link rel="stylesheet" href="./css/foundation.min.css" />  <link rel="stylesheet" href="./css/material-icons.css" /> <link rel="stylesheet" href="./css/help.css" /> <script> function toggleMenu() { contentLeft.style.display = !contentLeft.style.display || contentLeft.style.display === 'none' ? 'block' : 'none'; } </script> </head> <body>  <div class="sticky"> <nav class="top-bar" data-topbar> <div style="display: flex"> <div style="width: 45px; text-align: center; line-height: 3.6em"> <a style="color: black" href="#" onClick="toggleMenu()"> <span style="color: black" ><i class="material-icons">menu</i></span > </a> </div> <div class="name" style="padding-left: 20px"> <h1> <img src="../img/app_logo.png" style="width: 38px" alt="" /> Freeboard Help </h1> </div> </div> </nav> </div> <div class="content-container"> <div class="content-left" id="contentLeft"> <ul class="side-nav" onClick="toggleMenu()"> <li><a href="#top">Introduction</a></li> <li><a href="#server">Signal K Server</a></li> <li><a href="#plugins">Plugins</a></li> <li><a href="#display">Display</a></li> <li><a href="#navdata">Navigation</a></li> <li><a href="#autopilot">Autopilot</a></li> <li><a href="#resources">Resources</a></li> <li><a href="#menus">Menus</a></li> <li><a href="#aistargets">- Vessels</a></li> <li><a href="#anchor">- Anchor Watch</a></li> <li><a href="#alerts">- Alerts</a></li> <li><a href="#playback">- Playback</a></li> <li><a href="#settings">Settings</a></li> <li><a href="#parameters">- URL parameters</a></li> <li><a href="#experiments">- Experiments</a></li> <li> <a href="https://github.com/SignalK/freeboard-sk/" target="_fb"> GitHub</a > </li> </ul> </div> <div class="content-right"> <div class="panel" id="top"> <h3>Introduction</h3> Freeboard is an Openlayers based chart plotter that uses Signal K communication protocols and Signal K server features to provide the following functionality:<br /> <ul> <li> <b>Moving Vessel / Map</b> display with vessel Heading / Bearing and True Wind / Apparent Wind lines. </li> <li> <b>Charts:</b> display including both online and locally hosted. </li> <li> <b>Resources: </b> List and filter Routes, Waypoints, Notes and Regions. <ul> <li>Add / Edit / Delete resources</li> <li>Set active route</li> <li>Import resources from GPX files.</li> </ul> </li> <li> <b>Alarms / Notifications:</b> Displays both visual and audible notifications. <ul> <li>Anchor Watch</li> <li>Depth</li> <li>Crossing Vessel / Closest Approach</li> </ul> </li> <li> <b>Instrument Panel:</b> allows you to select from the apps installed on your Signal K server for display. </li> <li><b>Other Vessels: </b> display other vessels on map.</li> <li> <b>History Playback: </b> replay timeseries data from the Signal K server. </li> </ul> To learn more about Signal K visit <a href="http://signalk.org" target="_sk">http://signalk.org</a> <br /> Visit us at <a href="https://github.com/SignalK/freeboard-sk/" target="_fb"> GitHub</a > </div> <div class="panel" id="deprecations" style="background-color: rgba(255, 0, 0, 0.4)" > <h3>Deprecations</h3> <i>Please note the following feature has been deprecated:</i><br /> <ul> <li> <b>Built-in PyPilot support -</b> Freeboard-SK now uses the Signal K Autopilot API exclusively and PyPilot settings have been removed from PLugin Config. The Signal K Autopilot API aenables operation with a wider range of autopilot devices.<br /> <b >To continue using autopilot functionality, install the <a href="https://www.npmjs.com/package/pypilot-autopilot-provider" target="npmjs" >pypilot-autopilot-provider</a > plugin on the Signal K server.<br /> </b> </li> </ul> </div> <div class="panel" id="server"> <h3>Signal K Server</h3> <b >Note: Freeboard-SK requires the Signal K server to implement the following APIs:</b > <ul> <li> <b>Resources API:</b> for the storage and retrieval of resources </li> <li><b>Course API:</b> to set a destination or activate a route</li> <li><b>Autopilot API:</b> to enable autopilot operations</li> </ul> Freeboard is a "stateless" application which can be used concurrently at multiple stations to both display and send back information to the Signal K server.<br /> Therefore Freeboard requires that the host Signal K server be able to service requests to the following paths for all functionality to be available:<br /> <ul> <li> <i>resources/routes</i>, <i>resources/waypoints</i>, <i>resources/notes</i>, <i>resources/regions</i> - Serve resources as well as accept and persist resource data submitted to these paths. </li> <li><i>resources/charts</i> - Serve chart resources.</li> <li> <i>navigation/anchor</i>, <i>notifications/navigation/anchor</i> - Serve and accept `position`, `maxRadius` values as well as calculate `currentRadius` and serve notifications. </li> <li> <i>notifications/environment/depth</i> - Serve notifications for <i>belowKeel</i>, <i>belowSurface</i> and <i>belowTransducer</i>. </li> <li><i>notifications/navigation.closestApproach</i> .</li> <li> Standard Alarms - Serve notifications for <i>notifications/mob</i>, <i>notifications/sinking</i>, <i>notifications/piracy</i>, etc. </li> <li> <i>navigation/course (Signal K Course API)</i> - freeboard makes use of the course API to set a destination or activate a route.<br /> It is expected that the server will initiate any subsequent calculations and related value updates. </li> </ul> <hr /> <h5 id="plugins">Node Server Plug-ins:</h5> When using Signal K node server you will need to install plug-ins to service the paths outlined above to enable the relevant Freebaord-SK functionality. Following is a list of recommended plugins that will enable the required server functionality: <table style="border: black 1px solid"> <thead> <tr style="font-weight: bold"> <td>Function:</td> <td>Plugin:</td> </tr> </thead> <tbody> <tr> <td>Resource Storage and Retrieval</td> <td> <b>@signalk/resources-provider</b> </td> </tr> <tr> <td>Chart display</td> <td> <b>@signalk/charts-plugin</b> </td> </tr> <tr> <td>Course data (DTG, VMG, ETA, etc)</td> <td> <b>@signalk/course-provider</b> </td> </tr> <tr> <td>Anchor Watch</td> <td> <b>signalk-anchoralarm-plugin</b> </td> </tr> <tr> <td>Depth alarms</td> <td> <b>signalk-simple-notifications</b> </td> </tr> <tr> <td>Closest approach / Crossing vessel</td> <td> <b>signalk-derived-data</b> </td> </tr> <tr> <td>History Playback</td> <td> <b>signalk-to-influxdb</b> </td> </tr> <tr> <td>Buddy vessel identification and notifications</td> <td> <b>signalk-buddylist-plugin</b> </td> </tr> </tbody> </table> </div> <div class="panel" id="display"> <h4>Display</h4> Freeboard provides a moving Vessel / Map display for both your vessel <img src="../img/ship_red.png" style="height: 30px" alt="" /> and other vessels <img src="../img/ais_active.png" style="height: 20px" alt="" />.<br /> <img src="./img/screen.png" style="height: 400px" alt="" /> <br /> The menu bar along the left of the screen provides access to functions and menus that allow you control the map display. <br /> The buttons along the right side provide access to quick-actions and experiments. <br /> <br /> <b>Left menu bar:</b> <ul> <li class="nobullet"> <i class="material-icons">menu</i> <b>Main Menu:</b> Displays the main menu. <i>(See <a href="#menus">menus</a> for more.)</i> </li> <li class="nobullet"> <i class="material-icons" style="color: red">warning</i> <b>Alarms:</b> Displays the alarms screen to raise / clear alarms. <i>(See <a href="#alarms">alarms</a> for more.)</i> </li> <li class="nobullet"> <i class="material-icons" style="color: green">layers</i> <b>Resources:</b> Provides access to resources such as Charts, Routes, Waypoints, etc. <i>(See <a href="#resources">resources</a> for more.)</i> </li> <li class="nobullet"> <i class="material-icons">edit</i> <b>Draw Menu:</b> Provides access to options that allow the drawing / editing of resources. <i>(See <a href="#menus">menus</a> for more.)</i> </li> <li class="nobullet"> <i class="material-icons">navigation</i> <b>Heading / North Up:</b> Toggles between <i>Heading / North Up</i> mode. </li> <li class="nobullet"> <i class="material-icons">my_location</i> <b>Follow Vessel On / Off:</b> Toggles <i>Follow Vessel</i> mode to keep the vessel at the centre of the screen.<br /> <i >Note: this option is disabled when vessel position is not available.</i > </li> <li class="nobullet"> <i class="material-icons">center_focus_strong</i> <b>Centre Vessel on screen:</b> <i >Note: This option is disabled when vessel position is not available.</i > </li> <li class="nobullet"> <i class="material-icons">more_horiz</i> <b>More Actions:</b> Provides access to the following options: <ul> <li> Clear / Refresh Vessel Trail: When trail is available from the server selecting this menu item will reload the trail from the server. </li> <li> Clear Destintation / Active Route: clears active destination or de-activates an active route. </li> <li>Clear Course Data: clears the current course data.</li> <li> Trail to Route: create a route from the current vessel trail. </li> <li> Show / Hide Course Data: Toggle the display of course data. </li> <li> Show / Hide Vessels: Toggle the display of other vessels. </li> <li>Show / Hide Notes: Toggle the display of notes.</li> <li> Show weather forecast data. Weather forecast data from the weather station closest to the vessel location. (Requires Weather API enabled in <i>Server Admin -> Plugin Config -> Freeboard-SK</i>) </li> <li> Settings: Open the <a href="#settings">Settings</a> screen. </li> </ul> </li> </ul> <br /> <b>Right menu bar:</b> <ul> <li class="nobullet"> <i class="material-icons">av_timer</i> <b>Instrument panel:</b> The instrument panel is used to display selected Web App(s) installed on the Signal K server.<br /> <i >The default instruments shown are <b>@signalk/instrumentpanel</b></i ><br /> Use the <a href="#settings">Settings</a> screen to: <ul> <li>Select the Web App to display</li> <li> Select one or more <i>Favourites</i> that can be switched into view by using the <i class="material-icons">arrow_back_ios</i> and <i class="material-icons">arrow_forward_ios</i> buttons. </li> <li> You can also open the displayed Web App in it's own window by clicking the <i class="material-icons">open_in_new</i> button. </li> </ul> </li> <li class="nobullet"> <i class="material-icons" style="color: red">volume_off</i> <b>Web Audio Off:</b> Displays if browser audio is NOT activated. If displayed then no alarm sounds will be audible.<br /> Click this button to enable web audio to hear alarm sounds. </li> <li class="nobullet"> <i class="material-icons">fullscreen</i> <b>Fullscreen mode:</b> Displays application in fullscreen mode.<br /> <i>Available only on supported devices.</i> </li> <li class="nobullet"> <i class="material-icons">visibility_off</i> <b>Prevent Device Sleep:</b> Sets 'Wake Lock' mode for the current session to prevent the device from entering sleep mode when no user input has been received. See <a href="#settings">Settings</a> for more.<br /> <i>Available only on supported devices.</i> </li> <li class="nobullet"> <i class="material-icons">science</i> <b>Experiments:</b> Provides access to experimental features which are being considered for inclusion into the main application. See <a href="#experiments">experiments</a> for more.<br /> </li> <li class="nobullet"> <i class="material-icons">videocam</i> <b>Video:</b> Displays the video stream that has been configured in <a href="#settings">settings</a>.<br /> <i>Available only on supported devices.</i> </li> <li class="nobullet"> <i class="material-icons">zoom_in_map</i> <b>Constrain map zoom:</b> Limit minimum and maximum zoom levels to the zoom extent of the selected charts. </li> <li class="nobullet"> <i class="material-icons">invert_colors</i> <b>Invert Map feature text label color:</b> Toggle the text label color of features to improve visibility on dark map backgrounds. </li> <li class="nobullet"> <i class="material-icons">alt_route</i> <b>Display Autopilot console:</b> Available when the Autopilot API is detected on the server. Displays the autopilot console enabling operations permitted by the Autopilot API. </li> <li class="nobullet"> <i class="material-icons">add_location</i> <b>Drop Waypoint:</b> Place new waypoint at vessel location. </li> </ul> <hr /> <b>Context "Right click" Menu :</b> Click the right mouse button anywhere on the map to display a context menu. <br /> The options available may vary based on the current application state.<br /> <img src="./img/context_menu.png" style="max-width: 190px" alt="" /><br /> <i >Note:The <b>"Add Note here"</b> option is only available at zoom levels where Notes are visible on the map. </i> <br /> <br /> <img src="../img/ship_red.png" style="height: 30px" alt="" /> <b>Vessel:</b> displays the current position and heading of your vessel.<br /> <i >Note: Vessel icon is not displayed when vessel position is not available.</i ><br /> Additionally, Heading, Bearing True Wind Direction and Apparent Wind Angle lines are displayed with the vessel when the related data is available.<br /> <div style="display: flex"> <div> <img src="./img/vessel_lines.png" style="height: 80px" alt="" /> </div> <div style="padding-left: 25px"> <table> <tr> <td style="width: 40px"> <hr style=" border-color: rgba(221, 99, 0, 0.5); border-width: 1px; " /> </td> <td>Heading</td> </tr> <tr> <td style="width: 40px"> <hr style=" border-color: rgba(221, 99, 0, 0.5); border-width: 0.5px; " /> </td> <td>bearing</td> </tr> <tr> <td style="width: 40px"> <hr style="border-color: olive; border-width: 1px" /> </td> <td>True Wind</td> </tr> <tr> <td style="width: 40px"> <hr style="border-color: green; border-width: 1px" /> </td> <td>Apparent Wind</td> </tr> </table> </div> </div> <img src="../img/ais_active.svg" style="height: 20px" alt="" /> <b>Active Vessel:</b> displays the current position and heading for a vessel where an update has been received within the time period selected in <i>Settings->Vessels->Mark AIS Target Inactive After</i> (default = 6 mins).<br /> <img src="../img/ais_inactive.svg" style="height: 20px" alt="" /> <b>Inactive Vessel:</b> displays the last received position and heading for a vessel for which an update has NOT been received within the time period selected in <i>Settings->Vessels->Mark AIS Target Inactive After</i> (default = 6 mins).<br /> <i> Note: Vessels are removed from display after there has been no update received within the time period selected in <i>Settings->Vessels->Remove AIS Target After</i> (default = 9 mins). </i> <br /> Clicking on a vessel icon will display an information window containing vessel data and available actions.<br /> Vessels can be flagged to identify them when there is a large number of vessels in the vicinity.<br /> <img src="./img/vessel_popover.png" style="height: 150px" alt="" />    <img src="./img/ais_popover.png" style="height: 150px" alt="" />    <img src="./img/ais_properties.png" style="height: 150px" alt="" /> </div> <div class="panel" id="navdata"> <h4>Navigation</h4> Freeboard will display course data when received from the server. You can set a destination in the following ways: <ol> <li> <b>Activate a Route:</b> Once activaed select a point along the route. </li> <li><b>Go To Waypoint:</b> Select a waypoint as a destination.</li> <li> <b>Navigate to here:</b> Right click anywhere on the map and select the option from the menu.<br /> <img src="./img/context_menu.png" style="max-width: 190px" alt="" /> </li> </ol> To display course data when it is available from the server, click <i class="material-icons">more_horiz</i> and select <b>Show Course Data</b>.<br /> <img src="./img/course_data.png" style="width: 450px" alt="" /> <br /> If the server stops sending course data, the last received values will remain on the screen. <br /> To hide the course data display until the next set of data is received, click <i class="material-icons">more_horiz</i> and select <b>Clear Course Data</b> from the menu. <div style="display: flex; flex-wrap: wrap"> <div> Once a destination has been set the following actions are available: <br /> <br /> <b><i class="material-icons">settings</i></b> Click to display the <b>Course Settings</b> screen.<br /> From this screen values such as <i>Arrival Circle</i> can be set. <img src="./img/course_settings.png" style="max-width: 350px" alt="" /><br /> <b><i class="material-icons">replay</i></b> Click to restart course calculations from the current vessel position.<br /> <b><i class="material-icons">multiple_stop</i></b> When a route is active click this button to reverse the direction of the route point sequence.<br /> <b><i class="material-icons">alt_route</i></b> Autopilot status indicator.<br /> <b><i class="material-icons">skip_next</i></b> When a route is active click this button to advance to the next point in the sequence.<br /> <b><i class="material-icons">skip_previous</i></b> When a route is active click this button to advance to the previous point in the sequence.<br /> </div> <div style="padding-left: 15px"> A waypoint can be set as the target for which navigation data is to be displayed by clicking the <b>Navigate To</b> button in either: <ul> <li> A waypoint card in the <b>Waypoint List</b><br /> <img src="./img/waypoint_list.png" style="width: 150px" alt="" /> </li> <li> The pop-up displayed when a waypoint is clicked.<br /> <img src="./img/wpt_popover.png" style="width: 100px" alt="" /> </li> </ul> </div> </div> </div> <div class="panel" id="autopilot"> <h4><i class="material-icons">alt_route</i> Autopilot</h4> Freeboard-SK supports the Signal K Autopilot API which enables common operations to be performed including: <ul> <li>Engage / Disengage the autopilot</li> <li>Setting the operation mode e.g. compass, route, gps, etc.</li> <li>Setting and adjusting the target heading</li> <li>Dodging obstacles</li> </ul> The autopilot console can be opened via the <i class="material-icons">alt_route</i> button on the map or course data screen.<br /> <div> <img src="./img/autopilot.png" style="max-width: 250px" alt="" /> </div> </div> <div class="panel" id="resources"> <h4><i class="material-icons">layers</i> Resources / Layers</h4> Freeboard provides functionality for in-built Signal K resource types: routes, waypoints, charts, notes and regions. <br /> Each resource type is displayed in a separate map layer which can be controlled from the <i class="material-icons" style="color: green">layers</i> toolbar button. <br /> The menu displayed when clicked will contain options for the Signal K specified resources (Routes, Waypoints, Notes, Charts) as well as additional available resource paths enabled in Settings. <br /> Additionally resources can be exported to a GPX file by selecting the <b><i class="material-icons">save</i> Export</b> menu. <hr /> <ul> <li class="nobullet"> <i class="material-icons">directions</i> <b>Routes:</b> Displays a list of available Routes. </li> </ul> <div style="display: flex; flex-wrap: wrap"> <div> <img src="./img/route_list.png" style="max-width: 250px" alt="" /> </div> <div> <img src="./img/route_points_active.png" style="max-width: 250px" alt="" /> </div> <div style="padding-left: 15px"> <ul> <li> <b>Filter Routes:</b> Type into the text box to filter the list of routes. </li> <li> <b>Display Route:</b> Check the checkbox to display the route on the map. </li> <li> <b>Delete Route: </b> Click <i class="material-icons">delete</i> and you will be prompted to delete the route.<br /> </li> <li> <b>Points: </b> Click <i class="material-icons">flag</i> to view a list of route points where the following actions can be performed:<br /> </li> </ul> <div style="padding-left: 20px"> <ul> <li> <b>Set the destination point:</b> If displayed route is the <i>Active Route</i>, click a point to set it as the current destination along the route. </li> <li> <b>Re-order points:</b> Use the handle to drag points to a new position in the list.<br /> <i >Note: If points of the Active Route have been re-ordered then you will not be able to set the destination point until changes have been applied. </i> </li> </ul> </div> <ul> <li> <b>Notes:</b> Clicking <i class="material-icons">local_offer</i> displays a list of Notes associated with the route. From this screen you can add, edit or delete notes. </li> <li> <b>Activate: </b> Clicking <i class="material-icons">near_me</i> sends a message to the server to set this route as the <i>Active Route</i>.<br /> The start of the route is set as the current destination. <br /> Use the <i>Previous</i> and <i>Next</i> point options in the <i class="material-icons">more_horiz</i> menu to select the destination point. </li> <li> <b>Clear: </b> Clicking <i class="material-icons">clear_all</i> sends a message to the server to clear the <i>Active Route</i>. </li> <li> <b>Edit Properties: </b> Click <i class="material-icons">edit</i> to edit route Name and Description. </li> </ul> You can also click on a Route on the map to display an information window with additional actions.<br /> <img src="./img/route_popover.png" alt="" /> <div style="padding-left: 15px"> <ul> <li> <b>Move:</b> Clicking <i class="material-icons">touch_app</i> allows route points to be re-positioned. </li> </ul> </div> </div> <div> <hr /> <b>Trail to Route</b> <br /> You can create a route from the current Vessel trail by selecting the option from either the context menu or the <i class="material-icons">more_horiz</i> menu.<br /> <img src="./img/context_menu.png" style="max-width: 190px" alt="" /> <ul> <li> The Trail to Route screen is displayed and the route generated from the locally stored vessel trail is shown.<br /> <img src="./img/trail2route.png" style="max-width: 190px" alt="" /><br /> </li> <li> Check the <b>Include trail from server</b> if you want to include trail data stored on the server.<br /> <i> Recommended if you have the <b>Get Trail from server</b> option checked in <b>Settings</b>. </i> </li> <li> Slide the <i>tolerance</i> control to vary the conversion algorithm in order to get the desired point distribution. </li> <li> Once satisfied with the generated route click <i>Save</i> to save the route to the Signal K server. </li> </ul> </div> </div> <hr /> <ul> <li class="nobullet"> <i class="material-icons">location_on</i> <b>Waypoints:</b> Displays a list of available Waypoints. </li> </ul> <div style="display: flex; flex-wrap: wrap"> <div> <img src="./img/waypoint_list.png" style="max-width: 250px" alt="" /> </div> <div style="padding-left: 15px"> <ul> <li> <b>Filter Waypoints:</b> Type into the text box to filter the list of waypoints. </li> <li> <b>Display Waypoint:</b> Check the checkbox to display the waypoint on the map. </li> <li> <b>Delete Waypoint: </b> Click <i class="material-icons">delete</i> and you will be prompted to delete the waypoint.<br /> <i >Note: A waypoint may be associated with a route. so take care when deleting waypoints!</i > </li> <li> <b>Notes:</b> Clicking <i class="material-icons">local_offer</i> displays a list of Notes associated with the waypoint. From this screen you can add, edit or delete notes. </li> <li> <b>Go To: </b> Clicking <i class="material-icons">near_me</i> sends a message to the server to set this waypoint as the target to navigate to. The server should then send <a href="#navdata">navigation data</a> in relation to this location. </li> <li> <b>Clear: </b> Clicking <i class="material-icons">clear_all</i> sends a message to the server to clear the current destination. </li> <li> <b>Center: </b> Clicking <i class="material-icons">center_focus_strong</i> positions the map so the waypaoint is displayed in the center. </li> <li> <b>Edit Properties</b> Click <i class="material-icons">edit</i> to edit waypoint Name and Description. </li> </ul> </div> </div> <br /> You can also click on a Waypoint on the map to display an information window with additional actions.<br /> <img src="./img/wpt_popover.png" alt="" /> <div style="padding-left: 15px"> <ul> <li> <b>Move:</b> Clicking <i class="material-icons">touch_app</i> allows waypoints to be re-positioned. </li> </ul> </div> <hr /> <ul> <li class="nobullet"> <i class="material-icons">local_offer</i> <b>Notes:</b> Displays a list of available Notes. </li> </ul> <div style="display: flex; flex-wrap: wrap"> <div> <img src="./img/note_list.png" style="max-width: 250px" alt="" /> </div> <div style="padding-left: 15px"> <ul> <li> <b>Filter Notes:</b> Type into the text box to filter the list of notes. </li> <li> <b>Draft Notes: </b> Click <i class="material-icons">border_color</i> to display only draft notes in the list.<br /> </li> <li> <b>Display Notes:</b> Check the checkbox to display notes on the map. </li> <li> <b>Group: </b> Clicking <i class="material-icons">styles</i> will display a list of notes in the same group. </li> <li> <b>Properties:</b> Click <i class="material-icons">info_outline</i> to open the note information / editor screen. </li> </ul> </div> </div> <i >See <a href="#settings">Settings</a> for configuring note display.</i > <br />  <div> <b>Note Properties:</b><br /> Freeboard uses specfic key / value pairs that are defined within the <code>properties: {}</code> block of a note: <br />  <ul> <li> <b>draft</b> <i>(boolean)</i>: Indicates whether the note is in draft mode. Used by the server to determine the visibility or scope of where the note is made available. </li> <li> <b>readOnly</b> <i>(boolean)</i>: Used by Freeboard (when meta._attr is not available) to determine whther the note is editable. </li> </ul> <i>Example:</i> <code> properties: { draft: true, readOnly: false } </code> </div> <hr /> <li class="nobullet"> <i class="material-icons">map</i> <b>Charts:</b> Displays a list of available Charts. </li> <div> <i ><b>Note:</b> Freeboard uses chart information from the <i>./resources/charts</i> path and requires that the server has a supported plugin installed and configured <i>(e.g. @signalk/charts-plugin)</i> for charts to be available.</i > <br /> <br /> Freeboard supports the following chart types: <ul> <li> <b>Image Tiles:</b> The most popular format for serving maps, uses a collection of image tiles (usually in .png or .jpg) format loaded using X,Y & Z identifiers <i>e.g. http://host_path/{z}/{x}/{y}.png</i> </li> <li> <b>Vector Tiles:</b> Provided in a similar way to Image Tiles, the tiles contain vector information rather than a raster image. This makes them smaller in size and the tiles are "drawn" on to the display.<br /> Vector tiles normally require a related "STYLE" to display the elements with specific colors, etc.<br /> <i >Note: Vector tiles that are not sourced via a mapbox style definition (mapstyleJSON), will have a very basic style is applied to color lines and fill polygons. </i ><br /> <b>S57 ENC converted to vector tiles:</b> Freeboard-SK is able to display S57 ENC charts that have been converted to vector tiles with <a href="https://github.com/wdantuma/s57-tiler" target="s57" >s57-tiler</a >. <br /> <i >Note: Only unencrypted ENC's are supported (no S63 support).</i ><br /> </li> <li> <b>mapstyleJSON:</b> A mapbox style JSON file which defines sources and styles of vector tiles maps. </li> <li> <b>WMS:</b> A Web Map Service which serves geo-referenced image tiles. </li> <li> <b>WMTS:</b> A Web Map Service which serves pre-rendered tiles. </li> <li> <b>PMTile (Protomap):</b> A single-file archive format for tiled data which can be hosted on commodity storage. </li> </ul> </div> <br /> <div style="display: flex; flex-wrap: wrap"> <div> <img src="./img/chart_list.png" style="max-width: 250px" alt="" /> </div> <div style="padding-left: 15px"> <ul> <li> <b>Filter Charts:</b> Type into the text box to filter the list of charts. </li> <li> <b>Re-order charts:</b> Click <i class="material-icons">import_export</i> to arrange the chart stack to ensure charts are displayed in the correct order. Drag and drop the charts within the list to chage the order. </li> <li> <b>Chart Bounds:</b> Click <i class="material-icons">select_all</i> to display the bounds of the listed charts. The bounding rectangle of each chart will be overlayed on the current map display. </li> <li> <b>Add Chart Source:</b> Click <i class="material-icons">add</i> to add a new chart source <i>(i.e. WMTS, WMS, TileJSON, Mapbox Style)</i>. See the <a href="https://github.com/SignalK/freeboard-sk/wiki/Chart-Sources" > Freeboard-SK Wiki </a> for more details. </li> <li> <b>Properties:</b> Click <i class="material-icons">info_outline</i> to display the chart properties. </li> <li> <b>Display Chart:</b> Check the checkbox to display the chart. </li> </ul> Freeboard by default will display: <ul> <li>OpenStreetMap</li> <li>OpenSeaMap</li> </ul> which require an internet connection to be displayed.<br /> <b>Local Charts</b> hosted on the Signal K server are identified with the <i class="material-icons">map</i> icon. <br /> <br /> Charts are displayed in descending order of scale to ensure more detailed charts are on top. </div> </div> </div> <div class="panel" id="gpxsave"> <h4><i class="material-icons">save</i>Export (to GPX)</h4> <br /> <ul> <li class="nobullet"> Click the <i class="material-icons" style="color: green">layers</i> <b>Resources</b> toolbar button and select the <i class="material-icons">save</i> <b>Export</b> option from the menu. </li> </ul> <div style="display: flex; flex-wrap: wrap"> <div> <img src="./img/gpx_save.png" style="max-width: 250px" alt="" /> </div> <div style="padding-left: 15px"> You will be presented with a screen that will allow you to select some or all of the Route and Waypoint resources from the Signal K server.<br /> Additionally, the locally stored vessel trail can be saved as a GPX track.<br /> <i >Note: this option is only available when <b>Get Trail from Server</b> setting is not selected.</i ><br /> <ul> <li> <b>Waypoints:</b> Click the checkbox to select all Waypoints or expand the list and select the Waypoints to export. </li> <li> <b>Routes:</b> Click the checkbox to select all Routes or expand the list and select the Routes to export. </li> <li> <b>Tracks:</b> Click the checkbox to select all Tracks or expand the list and select the Tracks to export. </li> </ul> After selecting the required resources click <b>Save</b> to choose the name and location of the GPX file. </div> </div> </div> <div class="panel" id="import"> <h4><i class="material-icons">upload</i>Import (GPX, GeoJSON)</h4> <ul> <li class="nobullet"> Click the <i class="material-icons" style="color: green">layers</i> <b>Resources</b> toolbar button and select the <i class="material-icons">upload</i> <b>Import</b> option from the menu. </li> </ul> <div style="padding-left: 15px"> Select a GPX file or GeoJSON file containing a "FeatureCollection" from the Open File dialog.<br /> Depending on the type of file selected, you will be presented with one of the following. <br />   </div> <h5>GPX File</h5> <div> <div> <img src="./img/gpx_load.png" style="max-width: 250px" alt="" /> </div> <div style="padding-left: 15px"> Select some or all of the Route and Waypoint resources contained in the file.<br /> <ul> <li> <b>Waypoints:</b> Click the checkbox to select all Waypoints or expand the list and select the Waypoints to import. </li> <li> <b>Routes:</b> Click the checkbox to select all Routes or expand the list and select the Routes to import. </li> </ul> After selecting the resources click <b>Load Selected</b> to load the resources onto the Signal K server. </div> </div> <div> </div> <h5>GeoJSON Feature Collection</h5> <div> A GeoJSON <i>FeatureCollection</i> is used to define the features to import.<br /> The following GeoJSON features are supported and are mapped to one of the Signal K resource types: <table> <thead> <tr> <td>GeoJSON feature type</td> <td></td> <td>Signal K Resource type</td> </tr> </thead> <tbody> <tr> <td>LineString</td> <td><i class="material-icons">arrow_forward</i></td> <td>Route</td> </tr> <tr> <td>Point</td> <td><i class="material-icons">arrow_forward</i></td> <td>Waypoint</td> </tr> <tr> <td>Polygon</td> <td><i class="material-icons">arrow_forward</i></td> <td>Region</td> </tr> <tr> <td>MultiPolygon</td> <td><i class="material-icons">arrow_forward</i></td> <td>Region</td> </tr> <tr> <td>MultiLineString</td> <td><i class="material-icons">arrow_forward</i></td> <td>Track</td> </tr> </tbody> </table> <div> Additionally the feature <i>properties</i> object can be used to specify Signal K resource properties such as <i>name</i> or <i>description</i>.<br /> <i >Check out the Freeboard <a target="_blank" href="https://github.com/SignalK/freeboard-sk/wiki" >WIKI</a > for more details.</i > </div> <i>Example:</i><br /> <pre> <samp> { "type": "FeatureCollection", "features": [ { "type": "Feature", "geometry": { "type": "Lin