- 0. Introduction
- 1. How to connect Freeboard to Carriots
- 2. Carriots Meteological Station and Freeboard example
Freeboard is a free simple dashboard used to visualize Internet of Things data. Using the Carriots External API, you can send data to Freeboard to monitor your device data. Freeboard provides a real-time visualization of your key performance indicators. Imagine the possibilities this easy tool can add to your IoT projects.
In this section we will do a simple test to show how to connect Carriots to Freeboard using the Carriots Meteorological Station data. You can see more about the Meteorological project here.
The meteorological station device is available at Carriots where data streams are sent and can be used for your own purposes. Here are the details which you will use later:
- Device ID developer: madrid@carriotsMeteo.carriotsMeteo
- Read-only apikey: a3dd2a33c514de9ed0ad1e8e751a82a8c699916858b1ad0a6e2425d71cce48ea
- REST request URL (GET stream list): http://api.carriots.com/devices/madrid@carriotsMeteo.carriotsMeteo/streams/
To send data to Freeboard with Carriots, the first step you need to take is to create your Freeboard account. The public account is free! Just go to Freeboard. If you haven't already completed the Tutorial that starts automatically when you first open your account, it would be a good idea to do so to become familiarized with the tools available. If you already have an account you could use it. Once you've completed the Tutorial you need to create a new dashboard by entering a name in the text box (shown in the picture below in the red box). We used the name Carriots Meteo Station. Once you complete this step, you will see the project in the list of projects under the My Freeboards heading as shown in the yellow box in the picture below.
- My Freeboards
Inside the dashboard control panel you can start adding data. Under the Datasources heading click on the Add button. This is how we will connect Freeboard to your Carriots data. Once clicked, you should choose the type JSON, because that is the form that Carriots data will be sent in.
Inside the datasource panel you need to fill in the name Test1. Then the URL, this is the most important part because it specifies which data we will be collecting. Put in the following url https://api.carriots.com/devices/madrid@carriotsMeteo.carriotsMeteo/streams/?order=-1&max=1. This will give us the streams from the Carriots meteo station in order from most recent to latest, and it will only return the latest stream value. Since the meteo station only sends data to Carriots every hour we don't need to refresh as often. You can put 60 seconds. If you have data that changes constantly, you should change the refresh value to 1 second for example. The method is GET since we are retrieving information. Now the only thing left is to add the correct Headers. Add the following pairs under the Name-Value pair text boxes:
- Host - api.carriots.com
- carriots.apiKey - a3dd2a33c514de9ed0ad1e8e751a82a8c699916858b1ad0a6e2425d71cce48ea
- Accept - application/json
- User-Agent - Carriots-client
- Content-Type - application/json
Once you have entered all of the datasource information you should see the time of the last update (if you set refresh to 60 seconds this time will change every 60 seconds). If you see "never" under the last updated heading you have entered some information wrong and should try to edit again.
- Datasource updating
To add a widget in order to visualize our data, we first need to click the Add Pane button (shown below in red). This will automatically add a new pane.
- Add pane
To add a title to the pane click the tool icon (shown above in yellow). Add the title Temperature.
- Add title
To add a widget, click the + icon (shown above in blue). Choose the type text and complete the form as shown in the picture below.
- Add widget
The most important element of the widget form is the value field. This is where we specify how to reach the data we want in the JSON that is being sent to Freeboard. We must access the data specifying datasource["name of source"].result["# of result we want"].data.value_we_want. In this case we put datasources["Test1"].result["0"].data.temp because our datasource name is "Test1" and the value we want is "temp".
Now you should be able to see the current temperature in Madrid on your dashboard. It should look something like this.
- Add widget
We are going to use the data from the Carriots meteorological station for our example dashboard. Use the dashboard you made in Step 1 and follow the instructions below.
Our dashboard will have 4 panes, two in the first column, one in the second column and one in the third column. You can keep the pane you used for the temperature and put it in the second column.
In the first pane click the tool icon and use the title Last Data Collection. Then click the + icon and select the type of widget you want, text. In the value text box (shown below in red), copy and past the following code to get the date and time of the last stream collected. If you can more space to edit code, you can click on the .JS Editor (shown below in yellow).
- Last Data Collection Widget
In the next pane click the tool icon and use the title Location. Then click the + icon and select the type of widget you want, Google Map. In the latitude and longitude text boxes (shown below in red), copy and past the following coordinate to get the location of the weather station. Latitude 40.4390875, Longitude -3.6262663. In the future, if your devices have the latitude and longitude stored using Carriots GPS, you can get the values via a GET request.
- Google Map Widget
Now you should be able to see the two widgets in the first column of your dashboard. It should look something like this.
- Column One
In the second column, use the temperature pane. Click the tool icon and change the title to Meteo Data. Then click the tool icon inside the temperature widget and change the title to Temperature. Click the + icon of the pane and select the type of widget you want, Gauge. Copy the datasources["Test1"].result["0"].data.hum into the value field.
- Humidity Widget
Click the + icon of the pane again and select the type of widget you want, text. Copy the datasources["Test1"].result["0"].data.uv_rad into the value field.
- Radiation Widget
Click the + icon of the pane again and select the type of widget you want, text. Copy the datasources["Test1"].result["0"].data.rainfall into the value field.
- Rainfall Widget
Click the + icon of the pane again and select the type of widget you want, text. Copy the datasources["Test1"].result["0"].data.pressure into the value field.
- Pressure Widget
Now you should be able to see all the following widgets in the second column of your dashboard. It should look something like this.
- Column Two
In the third column pane, click the tool icon and add the title Wind. Click the + icon of the pane and select the type of widget you want, Gauge. Copy the datasources["Test1"].result["0"].data.wind_speed into the value field.
- Wind Speed
Click the + icon of the pane again and select the type of widget you want, Pointer. Copy datasources["Test1"].result["0"].data.wind_dir into the Direction field. Copy the following into the value field:
- Wind Direction Widget
Now you should be able to see the two widgets in the third column of your dashboard. It should look something like this.
- Column Three
If everything went correctly, your dashboard should look something like this.
You can see our Freeboard dashboard here. Now try using the data from your Carriots account to make easy and interesting new dashboards!