How to integrate Freeboard to Domatica Quantum Cloud

Learn how easy is to read field devices with the REST client Freeboard using the Domatica Quantum Cloud:

Freeboard is a free and easy dashboard builder for visualization of the Internet of Things data. By using the Domatica Quantum Cloud (DQC), you can send data to Freeboard to monitor your field devices in real-time. Freeboard provides real-time visualization of your KPIs dashboards. Build all the possibilities for your IoT projects using Freeboard and DQC. Unleash your imagination!


How to connect Freeboard to DQC

In this section we will do a simple exercise to show how to connect DQC to Freeboard using the data of the Domatica DIY Kit, which comprises of the following:


  • Quantum Node;
  • LED control indicators;
  • Power Supply;
  • Energy meter;
  • Temperature sensor;
  • Push Button;

Try it!

Fill in the form and get started with DQC:

Build your own dashboard

See an example where data streams are sent from the Domatica DIY Kit Demo and it can be used for your own purposes. Here are the details which you will use later:

To send data to Freeboard with DQC, the first step you need to take is go to Freeboard and create your Freeboard account. The public account is free. If you haven’t already completed the Tutorial that starts automatically when you first open your account. If you already have an account you could use it. Once you logged in you need to create a new dashboard by entering a name in the text box as pictured below). We used the name “Domatica DIY Kit”. Once you complete this step, you will see the project in the list of projects under the My Freeboards heading.



Adding a datasource

On the dashboard control panel you can start adding data. Under the “Datasources” heading click on the “Add”button. This is how you will connect Freeboard to the Domatica DIY Kit data.


Then you should choose the type JSON.


On the Datasource panel you should fill it as follows:

Give a name to this project. We have given the name “DQC


You can choose the values which data should refresh. For instance we have set the refresh value 1 second.

The “METHOD” is POST since we are retrieving information.

The “BODY” should have the following content-type:

Content-Type: text/html; charset=utf-8 {

“gTokens”: [{
“vGatewayId”: 1311768465454927053,
“gToken”: “39992D9EF2E8928039BA0BAF8D02A8A0”
“objects”: [{
“vGatewayId”: 1311768465454927053,
“idname”: “DCS_TEMPERATURE.instShowValue”,
“data”: “”
“vGatewayId”: 1311768465454927053,
“idname”: “DCS_ENERGY_METER.instShowValue”,
“data”: “”
“vGatewayId”: 1311768465454927053,
“idname”: “DCS_BUTTON.instShowValue”,
“data”: “”
“vGatewayId”: 1311768465454927053,
“idname”: “DCS_CONTROL_ON_OFF_1.control”,
“data”: “”
“vGatewayId”: 1311768465454927053,
“idname”: “DCS_CONTROL_ON_OFF_2.control”,
“data”: “”
“vGatewayId”: 1311768465454927053,
“idname”: “DCS_CONTROL_ON_OFF_3.control”,
“data”: “”
“vGatewayId”: 1311768465454927053,
“idname”: “DCS_CONTROL_ON_OFF_4.control”,
“data”: “”
“vGatewayId”: 1311768465454927053,
“idname”: “DCS_CONTROL_ON_OFF_5.control”,
“data”: “”
“vGatewayId”: 1311768465454927053,
“idname”: “DCS_CONTROL_ON_OFF_6.control”,
“data”: “”


Adding a widget

To add a widget in order to visualize our data, you first need to click the “ADD PANE” button. This will automatically add a new pane.


After adding a widget, now you need to configure its settings by clicking on the “plus button” of the pane:


1 – Create a widget for the Temperature Sensor:

Select the widget TYPE as “Gauge”:


Choose a TITLE for the data, for instance “Temperature”.

Set the VALUE:  datasources[“DCS”][“objects”][0][“data”]/100

The UNITS for data type will be ºC for temperature.

Set Miminum and Maximum values for temperature.


After saving your settings, the field values will appear instantly on your widget:


2 – Create a widget for the Energy Meter:

Select “Gauge” as widget TYPE.

Set the VALUE: datasources[“DCS”][“objects”][1][“data”]/10

Define the UNITS for energy data such as W (Watts)

Set Miminum and Maximum values for energy consumption (0-1000).



After finalizing the “Energy Meter” widget settings, the values will appear instantly:


3 – Create a new widget for LED status:

Select widget type “Text”.


Create a widget for each LED and add the respective DATASOURCE:

LED 1: datasources[“DCS”][“objects”][3][“data”] LED 2: datasources[“DCS”][“objects”][4][“data”] LED 3: datasources[“DCS”][“objects”][5][“data”] LED 4: datasources[“DCS”][“objects”][6][“data”] LED 5: datasources[“DCS”][“objects”][7][“data”] LED 6: datasources[“DCS”][“objects”][8][“data”]

Define UNITS as (ON/OFF).


Save the settings and the 6 LED status widget will appear on your dashboard:


4 – Create a widget for the Button:

Select “Text” for the widget TYPE.

TITLE: Button

Set the VALUE for the Button: datasources[“DCS”][“objects”][2][“data”]



You will be able to see the widget of the Button status in real-time.


5 – Create a widget for an online camera:

Add a new pane and select “Picture” as widget type.


Add camera URL: and insert the refresh timr as “0”.


You will be able to visualize the camera on your dashboard


6 – Create a widget for a Map:

Select TYPE as “Google Map”.


Insert your coordinates: LATITUDE: 39.003066 / LONGITUDE: – 9.418038


Save the settings and then you will be able to visualize the Map on your dashboard.


7 – Create a Chart for “Temperature Vs Energy”

You can create a chart to show temperature and energy data in real-time.

Start by selecting a new widget type as “Sparkline”.


Set Value for Temperature: datasources[“DCS”][“objects”][0][“data”]/100.

Add a new Datasource and set value for Energy Meter: datasources[“DCS”][“objects”][1][“data”]/10.

Select the SPARKLINE LABELS as ºC, W. (ºC for the first value and W for the second value).


Now you should be able to see the “Temperature Vs Energy” chart on your dashboard.


See our online Demo in Freeboard

Access this link and you will be able to visualize in real-time the dashboard that we have created for the Domatica DIY Kit in Freeboard.

Leave a Reply