How to Connect your Carriots Account to Initial State and Build a Public Dashboard

0. Introduction

This easy tutorial guides you through the process of building a public dashboard using our new service that lets you connect your Carriots account with Initial State.

In this tutorial we will build a similar dashboard to the one created with Javascript and CORS in this project: Carriots Meteo.

The main benefit of this new Carriots service is to build a public dashboard without writing a single line of code. But remember you can send data to an Initial State account "mannually" by creating a custom listener as explained in this tutorial.



1. Connect your Account

You can request the service activation through Carriots Cpanel, under the new section "Dashboards".

  • Fig 1: Dashboards landing page

After sending the application form, our sales team will get in contact with you to complete the payment process.

Once the payment process completed, the service will be activated. Please visit again the "Dashboards" landing page and you will see:

  • Fig 2: Activation page

By clicking the "Connect!" button your Carriots account will be linked to an Initial State account.


2. Dashboard Configuration

Once the accounts connected you will see the next page under the "Dashboards" section:

  • Fig 3: Dashboards home

In the configuration section we will create a new bucket (= a new dashboard) to send our meteo station data.

  • Fig 4: Configuration form

In the first field you can select an existing bucket to send data to. But we will create a new one called "carriotsMeteo" filling the second field.

In the next fields we will sepcifiy all the 9 parameters corresponding to the data sent by our meteo station: wind_speed, rainfall, temp, battery, hum, solar_rad, pressure, uv_rad, wind_dir. All these data will be sent to Initial State dashboard every time a new data stream is received.

Actually, this form automatically creates a new listener that sends all data to Initial State configured with the "AccessKey" of your account and "BucketKey" of the new bucket created.

You can have a look at the new listener created:

  • Fig 5: Listener


3. Dashboard: First Steps

After the listener creation we will give our device enough time to send some data streams. In our case, after 3 hours we will visit the "Show Dashboard" section (see Fig 3).

Selecting the bucket "carriotsMeteo" we can see that Initial State has automatically created a dashboard with a tile for each parameter sent. By default all tiles are "line graph" type.

  • Fig 6: Basic Dashboard


4. Tile Configuration

From now on you can configure your dashboard to fit your needs. We suggest to have a look at the documentation of the Initial State website.

In our case we have added 4 "Last-Value" tiles and enhanced all the titles adding emojis and units

  • Fig 7: Adding Last-Value tiles
  • Fig 8: Enhancing titles

5. Enhancing the Dashboard

Some data as is may have no sense like wind direction. We will show how to represent the last wind direction reading using emojis.

This kind of enhancements require a previous work on the data. We┬┤ll have to edit manually the listener created (see fig 5).

We will modify the lines concerning the "wind_dir" parameter, assigning an emoji to each wind direction:

  • Fig 9: Enhanced listener

Revisiting our dashboard, we can see that the tile where the wind_dir raw data was shown has changed:

  • Fig 10: Enhanced dashboard


6. share your Dashboard

Last but not least is to turn your dashboard public. Click on "settings" link under the bucket name you want to turn public. In the "Sharing" settings check the option "Share by URL". You will see the public url to share your dashboard:

  • Fig 11: Sharing dashboard

The result of our work:


7. From here on: Enhancing the project

Now you know how to connect your account with the Initial State dashboards. You can enhance the project in many ways to fit all your visualization neeeds:

  • Try to add a map tile, modifiying the listener to send the location data
  • Try to integrate the dashboard into your web skeleton using iframes, and build a website with other meteo stations.