Openplotter + MQTT + Dashboard

[Snijdor]

Hello,
After several days of trial and error I finally found a successful way to publish some data from openplotter with MQTT to an online dashboard:



What is MQTT:
A lightweight messaging protocol for small sensors and mobile devices, optimized for high-latency or unreliable networks. Click here for more on MQTT. In short Openplotter publishes data on different topics to a broker, other devices can subscribe to these topics (the dashboard)
So if you want to use Openplotter as a remote monitoring device on your boat or publish real time saildata when you are on the move and you don’t have (any) linux skills, please read on!

1. Sign up for a free Cloud MQTT Broker
I used CloudMQTT, the free ‘Cute Cat’ plan. You will get a servername, a username and password and a set of ports. Create a name username with read/write permissions on a topic 'Temp' (for example)

2. Configure Openplotter for CloudMQTT
Enter your credentials from you CloudMQTT (control panel -> ‘Details’ button -> Overview), use the first port listed (starting with a 1)



3. Create a topic in Openplotter
Add a topic, the ‘Short’ name you can find in the first column in the Inspector. The topicname you can make up yourself



4. Create an Action in Openplotter
Publishing the data from the topics is done by an Action under the Actions-tab. First add a trigger, choose 'None (always true)'



Then add an action. In the dropdown list you will find below a ‘Publish on topic X (topic you created in step 3)’, for ‘data’ put the ‘Short’ name (from step 3) between brackets



5. Create a dashboard on Freeboard.io
I got a free account at freeboard.io, you will get a small demo with your smartphone which is really cool. Now it gets a little complex. For Freeboard to use an MQTT broker as a datasource, we have to configure a MQTT plugin. This can be done with the ‘Developer Console’ in the upper left corner. Enter the following plugin script URL’s:
https://rawgit.com/benjaminchodroff/free....plugin.js
https://rawgit.com/benjaminchodroff/free....plugin.js
Leave /plugins/all where it is.



For more details on the plugin, I found above information on https://github.com/alsm/freeboard-mqtt/issues/3. 

6. Add Datasource to Freeboard.io
The ‘Name’ and ‘ClientID’ you can chose yourself. The portnumber is the ‘Websocket Port’ you can find in your CloudMQTT broker dashboard (starting with 3..). 
The ‘Last Updated’ time should be updated within the timeframe you set on the Action tab in Openplotter. If it is not updated reload the freeboard. (took me 2 days to find that out)



7. Add a Widget with the published data:
Click ‘Add Pane’ and an empty pane is created. Click on the settings icon (wrench) to give it a name and adjust the width (1 to 3 columns) 
Then click the ‘+’. For Temperature choose ‘Text’, ‘Gauge’ or ‘Sparkline’. as Type. Choose a fitting title. For the Value click on ‘+ Datasources’ and click in the dropdown menu on your topicname and then on ‘msg’, see example below. And Voila!! 



In my example above I used also used a 'gauge' with the same datasource and a 'google map' which needs Lat & Lon



In my dashboard I used also a gauge-widget with the same 'Temp' datasource and a GoogleMap-widget with the datasources Lat & Lon.
Don't forget when you add a topic in Openplotter you have to give your CloudMQTT user read/write permissions!

Notes:
- There are probably more efficient ways to accomplish the same result, I just want to share my way. Feel free to comment!
- To make it useful I would have to add a 2g/3g dongle 
- I'm thinking about 2 dashboards, one for remote monitoring for temperature, humidity, power, gas and bilgewater, and one for under sail with speed, location etc.
- I didn’t get the humidity sensor to display data, still no clue why....
- For troubleshooting you click the Websocket button in your CloudMQTT console, you should see your topics sent from Openplotter

Happy tinkering!