Created
December 25, 2018 14:16
-
-
Save tkurki/5b7dfac507977d7c6180bcecf383323c to your computer and use it in GitHub Desktop.
Example Signal K web page that subscribes to self vessel's position, converts incoming deltas to GeoJSON and updates text on the page with it
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Signal K Sample Consumer</title> | |
| </head> | |
| <body> | |
| <pre> | |
| <div id="data"/> | |
| </pre> | |
| </body> | |
| <script> | |
| var ws = new WebSocket((window.location.protocol === 'https:' ? 'wss' : 'ws') + "://" + window.location.host + "/signalk/v1/stream?subscribe=none"); | |
| ws.onopen = function () { | |
| var subscriptionObject = { | |
| "context": "vessels.self", | |
| "subscribe": [{ | |
| "path": "navigation.position" | |
| }] | |
| }; | |
| var subscriptionMessage = JSON.stringify(subscriptionObject); | |
| console.log("Sending subscription:" + subscriptionMessage) | |
| ws.send(subscriptionMessage); | |
| } | |
| ws.onclose = function () { | |
| console.log("ws close"); | |
| } | |
| const dataDiv = document.getElementById('data'); | |
| let geoJson | |
| ws.onmessage = function (event) { | |
| const delta = JSON.parse(event.data); | |
| if (geoJson = positionDeltaToGeoJson(delta)) { | |
| dataDiv.innerHTML = JSON.stringify(geoJson, null, 2); | |
| } | |
| } | |
| function positionDeltaToGeoJson(delta) { | |
| return delta.updates && delta.updates.reduce((acc1, update) => { | |
| return update.values && update.values.reduce((acc2, pathValue) => { | |
| if (pathValue.path === 'navigation.position') { | |
| return ({ | |
| "type": "Feature", | |
| "geometry": { | |
| "type": "Point", | |
| "coordinates": [pathValue.value.longitude, pathValue.value.latitude] | |
| }, | |
| "properties": { | |
| "name": "Current Position" | |
| } | |
| }) | |
| } | |
| return acc2 | |
| }, undefined) | |
| }, undefined) | |
| } | |
| </script> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
can i add the other properties like mmsi, trueheading, callsign, name, etc inside the properties value. ? i had issues with combine the ais data