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:

domatica-diy-kit-1200x800-768x511

  • 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.

 

freeboard_01

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.

freeboard_02-1

Then you should choose the type JSON.

freeboard_1-3

On the Datasource panel you should fill it as follows:

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

URL: https://dqc.domaticasolutions.com/api/v1/operation/monitorControl/get

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”: “”
}]
}

freeboard_04

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.

freeboard_05-2

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

freeboard_06

1 – Create a widget for the Temperature Sensor:

Select the widget TYPE as “Gauge”:

freeboard_07

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.

freeboard_08

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

freeboard_09

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).

freeboard_11

 

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

freeboard_12

3 – Create a new widget for LED status:

Select widget type “Text”.

freeboard_13

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).

freeboard_13-14

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

freeboard_14

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”]

Define UNITS as (PRESSED/RELEASED)

freeboard_15

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

freeboard_16

5 – Create a widget for an online camera:

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

freeboard_17

Add camera URL: http://domatica4g.no-ip.org:8181/video2.mjpg and insert the refresh timr as “0”.

freeboard_18

You will be able to visualize the camera on your dashboard

freeboard_19

6 – Create a widget for a Map:

Select TYPE as “Google Map”.

freeboard_20

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

freeboard_21

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

freeboard_22

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”.

freeboard_23

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).

freeboard_24

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

freeboard_25

See our online Demo in Freeboard

https://freeboard.io/board/9p0c5n

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