Lesson 3. Adding and configuring individual states for each device

Simulation of the devices’ telemetry data
Displaying devices telemetry in Office sensors list widget
Adding state for each device & navigation between states
- Customize Office sensors list widget
- Customize Office plan widget
Configuring state for Indoor Air Quality Sensor
Configuring state for Energy Meter
- Power consumption per hour
- Power consumption chart
Configuring state for Water Flow Meter
Final view of the dashboard for this lesson
Next step

This lesson is the third installment in our series on setting up a dashboard to visualize and monitor data from devices integrated into your premises. In the first two parts, we explored assets and devices, added a dashboard, created states for buildings and offices, and implemented navigation between them. Before we proceed, we strongly recommend reviewing the previous lessons if you have not done so already.

Lesson 2: Dashboard states, widget actions, and Image Map widget

In this part, we will add separate states for each device, simulate telemetry data for the devices, and display them on card widgets.

Simulation of the devices’ telemetry data

Since we are using virtual devices, they do not send telemetry data to the ThingsBoard. However, we can simulate the transmission of such data in real time. To do this, we will use Rule Engine.

We will add a new Rule Chain with four generator nodes that will periodically generate simple messages with random telemetry readings, unique to each of our devices. Let’s get started.

First, create the new rule chain:

Go to the “Rule chains” page and click “plus” icon, then select the “Create new rule chain” from drop-down menu;
Name it “Device Telemetry Emulators”, and click “Add”;
Open created rule chain by clicking on it.

Go to the "Rule chains" page and click "plus" icon, then select the "Create new rule chain" from drop-down menu;

Name it "Device Telemetry Emulators", and click "Add";

Open created rule chain by clicking on it.

Now, let's add the necessary nodes:

Find the generator node and drag it to the rule chain. With its help, we will generate telemetry values for further visualization on the dashboard. Name it “Indoor air quality data emulator”, and set the number of messages to send to 100 and the sending period to 600;
Specify the device “SD-001” (Indoor Air Quality Sensor) as originator;
Copy the following script from the documentation:

var temperature = toFixed(Math.random()*10 + 20, 2);
var humidity = toFixed(Math.random()*15 + 30, 2);
var co2 = toFixed(Math.random()*70 + 440, 2);
var msg = { temperature: temperature, humidity: humidity, co2: co2 };
var metadata = { data: 40 };
var msgType = "POST_TELEMETRY_REQUEST";
return { msg: msg, metadata: metadata, msgType: msgType };

Paste the copied script into the generator function section to simulate temperature, humidity, and CO2 telemetry data;
Click “Add”.

We added a “generator” node that will send telemetry to ThingsBoard on behalf of the “Indoor Air Quality Sensor” device every 10 minutes (600 seconds). There will be 100 such messages.

Find the "generator" node and drag it to the rule chain. With its help, we will generate telemetry values for further visualization on the dashboard;

Name it "Indoor air quality data emulator". Set the number of messages to send to 100 and the sending period to 600. Specify the device "SD-001" (Indoor Air Quality Sensor) as originator. Copy the script from the documentation and paste it into the generator function section to simulate telemetry data for temperature, humidity, and CO2. Click "Add".

Similarly, add data emulator for “Energy Meter” device:

Name it “Power consumption data emulator”;
Set the number of messages to send to 100 and the sending period to 600;
Specify the device “EM-002” (Energy Meter) as originator;
Use the following script to simulate power consumption telemetry data:

var powerConsumption = toFixed(Math.random() * 4.3, 2);
var msg = { powerConsumption: powerConsumption};
var metadata = { data: 40 };
var msgType = "POST_TELEMETRY_REQUEST";
return { msg: msg, metadata: metadata, msgType: msgType };

Click “Add.

Name it "Power consumption data emulator" Set the number of messages to send to 100 and the sending period to 600. Specify the device "EM-002" (Energy Meter) as originator. Copy the script from the documentation and paste it into the generator function section to simulate power consumption telemetry data. Click "Add."

Add data emulator for “Water Flow Meter” device.

Name it “Water consumption data emulator”;
Set the number of messages to send to 100 and the sending period to 600;
Specify the device “WM-003” (Water Flow Meter) as originator;
Use the following script to simulate water consumption telemetry data, and battery voltage data:

var waterConsumption = toFixed(Math.random()*1.6 + 1, 2);
var batteryLevel = toFixed(Math.random()*1 + 45, 2);
var msg = { waterConsumption: waterConsumption, batteryLevel: batteryLevel };
var metadata = { data: 40 };
var msgType = "POST_TELEMETRY_REQUEST";
return { msg: msg, metadata: metadata, msgType: msgType };

Click “Add.

Name it "Water consumption data emulator". Set the number of messages to send to 100 and the sending period to 600. Specify the device "WM-003" (Water Flow Meter) as originator. Copy the script from the documentation and paste it into the generator function section to simulate water consumption, and battery voltage telemetry data. Click "Add."

Finally, add data emulator for “IAQ Sensor” device. Name it “IAQ data emulator”. Set the number of messages to send to 100 and the sending period to 600.

Name it “Water consumption data emulator”;
Set the number of messages to send to 100 and the sending period to 600;
Specify the device “AM-307” (IAQ Sensor) as originator;
Use the following script to simulate water consumption, and battery voltage telemetry data:

var temperature = toFixed(Math.random()*10 + 20, 2);
var humidity = toFixed(Math.random()*15 + 30, 2);
var co2 = toFixed(Math.random()*70 + 440, 2);
var msg = { temperature: temperature, humidity: humidity, co2: co2 };
var metadata = { data: 40 };
var msgType = "POST_TELEMETRY_REQUEST";
return { msg: msg, metadata: metadata, msgType: msgType };

Click “Add.

Name it "IAQ data emulator". Set the number of messages to send to 100 and the sending period to 600. Specify the device "AM-307" (IAQ Sensor) as originator. Copy the script from the documentation and paste it into the generator function section to simulate water consumption, and battery voltage telemetry data. Click "Add."

Added four generator nodes. Now we need to route messages from these nodes to the Root Rule Chain for further processing and saving telemetry in the database. For this purpose, there is a “rule chain” node.

Find the “rule chain” node and drag it to the rule chain. This node forwards all messages to the Root Rule Chain;
Name it “to Root Rule Chain”, specify “Root Rule Chain” and click “Add”.

Find the "rule chain" node and drag it to our rule chain;

Name it "to Root Rule Chain", specify the destination for message routing as "Root Rule Chain", and click "Add";

We have added all the necessary nodes. Now, we need to connect the generator nodes to the “rule chain” node for message routing:

Tap on the right grey circle of "generator" node and drag this circle to the left side of "rule chain" node. Select the "Success" link and click "Add";
Repeat this for each generator node. Afterwards, save rule chain.

Tap on the right grey circle of "generator" node and drag this circle to the left side of "rule chain" node. Select the "Success" link and click "Add";

Repeat this for each generator node. Afterwards, save rule chain.

After waiting for the period specified in the generator nodes, you will be able to see the telemetry on the “Latest telemetry” tab of your devices.

Now that we are receiving telemetry data from the devices, we can display it on the “Office sensors list” widget. Devices can send multiple telemetry values. By default, each telemetry value (key) is represented by a separate column in the table widget. We’ll combine multiple telemetry values into a single column for a cleaner look and hide the columns we don’t need.

Go to the dashboard and enter edit mode by clicking the "Edit mode" button on the toolbar;
Click on the "pencil" icon of the "Office sensors list" widget to enter its editing mode;
Add the columns for the following data keys: "temperature", "humidity", "co2", "powerConsumption", and "waterConsumption";
Add another column: name it "telemetryValue", and click the "Time series" icon to add a new key;
Rename the labels for the keys "label" and "telemetryValue" to "Device name" and "Telemetry value," respectively. Next, click the "gear" icon next to the "telemetryValue" row to open its settings;
Turn on the "Use cell content function" option. Insert the function from the documentation into the corresponding field. This function will combine several telemetry columns into one for a single device. Then click "Save";
Now we need to hide the unnecessary columns such as "temperature", "humidity", "co2", "powerConsumption", and "waterConsumption". Click the "gear" icon next to the "temperature" to open its settings;
Select "Hidden" in the "Default column visibility" menu. Click "Save" to apply the changes for this column;
Repeat the steps described above for the columns "humidity", "co2", "powerConsumption", and "waterConsumption". Ensure that only the columns "Device name" and "Telemetry value" remain visible. Save changes;
Apply all changes by clicking the "Save" button in the upper-right corner of the dashboard.

Go to the dashboard and enter edit mode by clicking the "Edit mode" button on the toolbar;

Click on the "pencil" icon of the "Office sensors list" widget to enter its editing mode;

Add the columns for the following data keys: "temperature", "humidity", "co2", "powerConsumption", and "waterConsumption";

Add another column: name it "telemetryValue", and click the "Time series" icon to add a new key;

Rename the labels for the keys "label" and "telemetryValue" to "Device name" and "Telemetry value," respectively. Next, click the "gear" icon next to the "telemetryValue" row to open its settings;

Turn on the "Use cell content function" option. Insert the function from the documentation into the corresponding field. This function will combine several telemetry columns into one for a single device. Then click "Save";

Now we need to hide the unnecessary columns such as "temperature", "humidity", "co2", "powerConsumption", and "waterConsumption". Click the "gear" icon next to the "temperature" to open its settings;

Select "Hidden" in the "Default column visibility" menu. Click "Save" to apply the changes for this column;

Repeat the steps described above for the columns "humidity", "co2", "powerConsumption", and "waterConsumption". Ensure that only the columns "Device name" and "Telemetry value" remain visible. Save changes;

Apply all changes by clicking the "Save" button in the upper-right corner of the dashboard.

Cell content function used in this example:

if (entity.temperature && entity.humidity && entity.co2){
    return '<div style="display:flex;flex-direction:row;flex-wrap:wrap;gap:7px;margin:10px 0;align-items:center">' +  
        '<div style="padding-left: 12px; padding-right: 12px; padding-top: 4px; padding-bottom: 4px;background:#e0e0e0;border-radius:20px;">Temp: ' + entity.temperature.toFixed(0) + ' °C</div>' + 
        '<div style="padding-left: 12px; padding-right: 12px; padding-top: 4px; padding-bottom: 4px;background:#e0e0e0;border-radius:20px">Hum: ' + entity.humidity.toFixed(0) + ' %</div>' + 
        '<div style="padding-left: 12px; padding-right: 12px; padding-top: 4px; padding-bottom: 4px;background:#e0e0e0;border-radius:20px">CO2: ' + entity.co2.toFixed(0) + ' ppm</div>'
    + '</div>';
}
else if (entity.powerConsumption){
    return '<div style="display: inline-block;padding-left: 12px; padding-right: 12px; padding-top: 4px; padding-bottom: 4px;background:#d3d3d3;border-radius:20px">' + entity.powerConsumption.toFixed(2) + ' kWh per hour</div>';
}
else if (entity.waterConsumption){
    return '<div style="display: inline-block;padding-left: 12px; padding-right: 12px; padding-top: 4px; padding-bottom: 4px;background:#d3d3d3;border-radius:20px">' + entity.waterConsumption.toFixed(2) + ' gal per hour</div>';
}
return value;

Now, the “Office sensors list” widget will display a list of your devices with their telemetry values combined into a single column for each device.

For Office A, the widget displays a list of devices with their respective telemetry values;

For Office B, the widget similarly shows a list of devices along with their telemetry values.

Now we need to add separate states for each of our devices and set up transitions from the “Office sensors list” and “Office plan” widgets to these states.

Enter dashboard editing mode;
Click on the "Manage dashboard states" menu option, then click the "plus" icon to add new dashboard state;
Name it "Indoor Air Quality Sensor", and enter state ID - "smart_sensor". Click "Add".

Click on the "Manage dashboard states" menu option, then click the "plus" icon to add new dashboard state;

Name it "Indoor Air Quality Sensor", and enter state ID - "smart_sensor". Click "Add".

Similarly, add “Energy Meter” state with the “energy_sensor” state Id and “Water Flow Meter” state with the “water_sensor” state Id.

Similarly, add "Energy Meter" with the "energy_sensor" state Id and "Water Flow Meter" state with the "water_sensor" state Id.

Now let’s customize the “Office sensors list” widget by adding an action so that when you click on a device row, we transition to its state.

Go to the “office” state and enter editing mode of the “Office sensors list” widget;
Scroll to the “Actions” menu section and click the “Add action” button;
The “Actions” window will open. Click the “plus” icon in the top-right corner of the screen. Complete the following steps in the “Add action” dialog:
- Select “On row click” action source;
- Enter action name;
- Choose the “Custom action” action type;
- After choosing an action type, the “Custom action function” section appears. Paste the function by copying it from the documentation. This function performs a transition to the dashboard state depending on the type (device profile) of the selected device.

Custom action function used in this example:

const $injector = widgetContext.$injector;
const deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));

deviceService.getDevice(entityId.id).subscribe(device => {
    if (device.type === 'energy-sensor') {
        openDashboardState('energy_sensor');
    } else if (device.type === 'water-sensor') {
        openDashboardState('water_sensor');
    } else {
        openDashboardState('smart_sensor');
    }
});

function openDashboardState(stateId) {
    const params = {
        entityId: entityId,
        entityName: entityName
    };
    widgetContext.stateController.openState(stateId, params, false);
}

Afterwards, click “Add”;
In the “Actions” window, you can review the configured action, including its source, icon, and type. Click “Save”;
Click “Apply” to save the widget settings;
Save the dashboard by clicking “Save” in the upper-right corner of the dashboard page.

Go to the “office” state and enter the editing mode of the "Office sensors list" widget;

Scroll to the "Actions" menu section and click the "Add action" button;

The "Actions" window will open. Click the "plus" icon in the top-right corner of the screen to open a new "Add action" window;

In the "Add action" dialog, select "On row click" action source, and enter action name. Then, choose the "Custom action" action type. After choosing an action type, the "Custom action function" section appears. Paste the function by copying it from the documentation. Afterwards, click "Add";

In the "Actions" window, you can review the configured action, including its source, icon, and type Click "Save";

Click "Apply" to save the widget settings;

Save the dashboard by clicking "Save" in the upper-right corner of the dashboard page.

Check how it works. Click on the row of any device to transition to its state.

You will transition to the state of the selected device.

Enhance the functionality of the “Office plan” widget by adding a tooltip that display telemetry data for the sensors and adding the ability to drill down to the details of each device. Follow these steps to customize the widget:

While in the “office” state, enter the dashboard edit mode;
Click the “pencil” icon of the “Office sensors list” widget to modify its settings;
Add the following data keys to the existing ones: “temperature”, “humidity”, “co2”, “powerConsumption”, “waterConsumption,” and “batteryLevel”. These keys represent the telemetry data that will be shown in the tooltip when clicking on the device;

While in the "office" state, enter the dashboard edit mode, and click the "pencil" icon of the "Office sensors list" widget to modify its settings.

Add the following data keys to the existing ones: "temperature", "humidity", "co2", "powerConsumption", "waterConsumption," and "batteryLevel". Afterwards, navigate to the "Appearance" tab;

Navigate to the “Appearance” tab. Scroll to the “Tooltip” section and turn on the “Use tooltip function” option. Now, copy the tooltip function from the documentation and paste it into the “Tooltip function” field;

The tooltip function used in the example:

let tooltip = '<h1 style="margin: 8px 0; width: 200px; border-bottom: 1px solid #0000000d; padding-bottom: 8px; padding-right: 15px; font-size: 16px; font-weight: 600; line-height: 24px; top: 15px;">${entityLabel}</h1>';
let typeTooltip = '';
if (data.deviceType == 'energy-sensor') {
    typeTooltip = '<div style="display: flex; flex-direction: row; justify-content: space-between;align-items: center; gap: 10px;">' +
        '<span style="font-weight: 600; font-size: 12px; line-height: 16px; color: #0000008a; max-width: 90px;">Power consumption: </span>' +
        '<span style="font-weight: 600; font-size: 13px; line-height: 20px; color: #000000de">${powerConsumption} per day</span>' +
    '</div>';
    typeTooltip += '<div style="margin-top: 17px; text-align: center; background: var(--tb-primary-50, #87CEEB); border-radius: 6px;"><link-act name="sensor_details">Details ></link-act></div>';
} else if (data.deviceType == 'air-sensor') {
    typeTooltip = '<div style="display: flex; flex-direction: column">' +
        '<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px">' +
            '<span style="font-weight: 600; font-size: 12px; line-height: 16px; color: #0000008a; max-width: 90px;">Temperature: </span>' +
            '<span style="font-weight: 600; font-size: 13px; line-height: 20px; color: #000000de">${temperature:0} °C</span>' +
        '</div>' +
        '<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px">' +
            '<span style="font-weight: 600; font-size: 12px; line-height: 16px; color: #0000008a; max-width: 90px;">Humidity: </span>' +
            '<span style="font-weight: 600; font-size: 13px; line-height: 20px; color: #000000de">${humidity:0} %</span>' +
        '</div>' +
        '<div style="display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap 10px;">' +
            '<span style="font-weight: 600; font-size: 12px; line-height: 16px; color: #0000008a; max-width: 90px;">CO2: </span>' +
            '<span style="font-weight: 600; font-size: 13px; line-height: 20px; color: #000000de">${co2:0} ppm</span>' +
        '</div>' +
    '</div>';
    typeTooltip += '<div style="margin-top: 17px; text-align: center; background: var(--tb-primary-50, #87CEEB); border-radius: 6px;"><link-act name="sensor_details">Details ></link-act></div>';
} else if (data.deviceType == 'water-sensor') {
    typeTooltip = '<div style="display: flex; flex-direction: column">' + 
        '<div style="font-weight: 600; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px">' +
            '<span style="font-weight: 600; font-size: 12px; line-height: 16px; color: #0000008a; max-width: 90px;">Water consumption: </span>' +
            '<span style="font-weight: 600; font-size: 13px; line-height: 20px; color: #000000de">${waterConsumption} per day</span>' +
        '</div>' +
        '<div style="font-weight: 600; display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 10px">' +
            '<span style="font-weight: 600; font-size: 12px; line-height: 16px; color: #0000008a; max-width: 90px;">Battery Level: </span>' +
            '<span style="font-weight: 600; font-size: 13px; line-height: 20px; color: #000000de">${batteryLevel:0} %</span>' +
        '</div>';
    '</div>';    
    typeTooltip += '<div style="margin-top: 17px; text-align: center; background: var(--tb-primary-50, #87CEEB); border-radius: 6px;"><link-act name="sensor_details">Details ></link-act></div>';
}
return tooltip + typeTooltip;

Adjust the tooltip’s Y offset relative to the marker to -0.77 for optimal positioning;

Scroll down to the "Tooltip" section, and enable "Use tooltip function" option. Then, copy the tooltip function from the documentation and paste it into the "Tooltip function" field of the widget. Then, set the tooltip Y offset relative to the marker to -0.77;

Go to the “Widget card” tab. Access “Advanced widget style” and paste the provided CSS into the “Widget CSS” field to enhance the widget visual appearance:

The CSS used in this example:

.leaflet-tooltip-pane .leaflet-tooltip-top{
    opacity: 1 !important;
}
.leaflet-popup-content {
    width: auto !important;
    margin: 8px;
}
a.leaflet-popup-close-button {
    font-size: 20px;
    color: black;
    border-radius: 2px;  
    top: 8px;
    right: 5px;
}

Go to the "Widget card" tab. Access "Advanced widget style" and paste the provided CSS into the "Widget CSS" field;

Navigate to the “Actions” tab and click “plus” to add new action. Complete the following steps in the “Add action” dialog:
- Select “Tooltip tag action” as the action source;
- Enter “sensor_details” as action name;
- Choose “Custom action” for the action type;
- Paste the custom action function by copying it from the documentation.

The custom action function used in this example:

const $injector = widgetContext.$injector;
const deviceService = $injector.get(widgetContext.servicesMap.get('deviceService'));

deviceService.getDevice(entityId.id).subscribe(device => {
    if (device.type === 'air-sensor') {
        openDashboardState('smart_sensor');
    } else if (device.type === 'water-sensor') {
        openDashboardState('water_sensor');
    } else {
        openDashboardState('energy_sensor');
    }
});

function openDashboardState(stateId) {
    const params = {
        entityId: entityId,
        entityName: entityName
    };
    widgetContext.stateController.openState(stateId, params, false);
}

Then, click “Add”;

Click “Apply” to save the modifications;
Save your dashboard configuration by selecting “Save” in the upper-right corner of the dashboard.

Navigate to the "Actions" tab and click "plus" to add new action;

In the "Add action" dialog, select "Tooltip tag action" as the action source. Enter "sensor_details" as action name. Choose "Custom action" for the action type and paste the specified function in the "Custom action function" section. Then, click "Add";

Click "Apply" to save the modifications;

Save your dashboard configuration by selecting "Save" in the upper-right corner of the dashboard.

Click any marker on the “Office plan” widget to open a tooltip. Each device's tooltip includes a line button to access the details of the selected device. Click on this line.

Configuring state for Indoor Air Quality Sensor

To effectively monitor and analyze indoor air quality, we’ll add three widgets to display current readings of temperature, humidity, and CO2 levels, alongside two widgets for tracking historical data on air quality in the office. This will allow us to not only monitor the current state of air quality parameters but also to analyze the trends in their changes over time.

Temperature, humidity, and CO2 level cards widgets

In ThingsBoard, there is a bundle of pre-configured widgets for displaying telemetry of the indoor environment, including temperature, humidity, and CO2 levels, etc. In this lesson, we will use this widgets bundle.

First, add a widget to display the current temperature in the office.

Click on the "Indoor Air Quality Sensor" device row in the "Office sensors list" widget to transition to its state;
Enter dashboard editing mode and click either the "+ Add widget" button at the top or the large "Add new widget" icon in the center of the screen;
Find the "Indoor Environment" widgets bundle and click on it;
Choose the "Indoor temperature card" widget;
Specify "Selected entity" alias as the data source. The "temperature" key, from which the temperature value will be "extracted", has already been added;
Clear the "Card border radius" value, and click "Add";
We've added a widget that displays the current temperature. Adjust the widget size to your liking.

Click on the "Indoor Air Quality Sensor" device row in the "Office sensors list" widget to transition to its state;

Enter dashboard editing mode and click either the "+ Add widget" button at the top or the large "Add new widget" icon in the center of the screen;

Find the "Indoor Environment" widgets bundle and click on it;

Choose the "Indoor temperature card" widget;

Specify "Selected entity" alias as the data source. The "temperature" key, from which the temperature value will be "extracted", has already been added;

Clear the "Card border radius" value, and click "Add";

We've added a widget that displays the current temperature. Adjust the widget size to your liking.

Similarly, add a widget to display the humidity.

Click the "Add widget" button at the top of the screen;
Navigate to the "Indoor Environment" widgets bundle and select the "Indoor humidity card" widget;
Specify "Selected entity" alias as the data source. The "humidity" key, from which the humidity value will be "extracted", has already been added;
Clear the "Card border radius" value. Click "Add";
The widget displaying the current humidity has been added. Place it to the right of the "Temperature" card widget and adjust its size.

Click the "Add widget" button at the top of the screen;

Navigate to the "Indoor Environment" widgets bundle and select the "Indoor humidity card" widget;

Specify "Selected entity" alias as the data source. The "humidity" key, from which the humidity value will be "extracted", has already been added;

Clear the "Card border radius" value. Click "Add";

The widget displaying the current humidity has been added. Place it to the right of the "Temperature" card widget and adjust its size.

Now, add a widget to display the CO2 level.

Click the "+ Add widget" button at the top of the screen;
Select the "Indoor CO2 card" widget. This widget is located in the "Indoor Environment" widgets bundle;
Specify "Selected entity" alias as the data source. The "CO2" key has already been added, from which the CO2 value in the air will be "extracted";
Clear the "Card border radius" value. Click "Add";
The widget displaying the current CO2 level has been added. Place it to the right of the "Humidity" widget. Adjust the widget size to match the dashboard aesthetics, and save the dashboard.

Select the "Indoor CO2 card" widget. This widget is located in the "Indoor Environment" widgets bundle;

Specify "Selected entity" alias as the data source. The "CO2" key has already been added, from which the CO2 value in the air will be "extracted";

The widget displaying the current CO2 level has been added. Place it to the right of the "Humidity" widget. Adjust the widget size to match the dashboard aesthetics, and save the dashboard.

Now, you can see the current values of temperature, humidity, and CO2 levels.

Now on our dashboard, you can see the current values of temperature, humidity, and CO2 levels.

Temperature and humidity history chart

We will now add a widget that displays a chart of temperature and humidity readings in the office for the last 12 hours. This way, we can track their changes.

Enter the edit mode of your dashboard and click the "+ Add widget" button;
Find the "Charts" widgets bundle and click on it;
Choose the "Line chart" widget;
In this widget, we'll use the dashboard's time window. Specify "Selected entity" alias as the data source. Add data keys "temperature" and "humidity" and specify their labels and units. Then, click the "gear" icon for "temperature" key to open its configuration window;
Turn on "Show points" and "Point label" options. Click "Save". Repeat this for the "humidity" data key;
By default, the chart includes a single scale on the Y-axis. Label it "Temperature" and set the units to °C. Add another scale for "Humidity", place it on the right, and set the units to %. Now, apply the "axis1" scale to the "humidity" key;
Change the chart title to "Temperature and Humidity history";
Set the "Bottom" legend position and uncheck "Average" of the "Show values" section;
Clear the "Card border radius" value to streamline the widget's appearance. Click "Add";
Move the widget to the top-right corner of your dashboard and adjust its size;
The "Temperature and Humidity history" widget has been added. Save your dashboard to implement the changes.

Enter the edit mode of your dashboard and click the "+ Add widget" button;

Find the "Charts" widgets bundle and click on it;

In this widget, we'll use the dashboard's time window. Specify "Selected entity" alias as the data source. Add data keys "temperature" and "humidity" and specify their labels and units. Then, click the "gear" icon for "temperature" key to open its configuration window;

Turn on "Show points" and "Point label" options. Click "Save". Repeat this for the "humidity" data key;

By default, the chart includes a single scale on the Y-axis. Label it "Temperature" and set the units to °C. Add another scale for "Humidity", place it on the right, and set the units to %. Now, apply the "axis1" scale to the "humidity" key;

Change the chart title to "Temperature and Humidity history";

Set the "Bottom" legend position and uncheck "Average" of the "Show values" section;

Clear the "Card border radius" value to streamline the widget's appearance. Click "Add";

Move the widget to the top-right corner of your dashboard and adjust its size;

The "Temperature and Humidity history" widget has been added. Save your dashboard to implement the changes.

The “Temperature and humidity history” widget is added, but there are no charts on it. We will fix it right now.

To correctly display data on widgets that use the dashboard time window, you need to adjust the time interval and aggregation function settings. To do this, open the time window, select the last 12 hours of data, set the aggregation to “Average” and the grouping interval to “1 hour”.

This setup ensures that all widgets using the dashboard's time window will display data averaged over the last 12 hours, providing a clear view of the temperature and humidity trends. Now, you can effectively monitor the average temperature and humidity readings for each hour over the past 12 hours.

Now you need to change the dashboard's time interval and aggregation function. To do this, open the dashboard's time window, select the last 12 hours of data, set the aggregation to "Average", and the grouping interval to "1 hour";

Now you can monitor the average temperature and humidity readings for each hour over the past 12 hours.

CO2 level chart

Now, add another line chart widget to display CO2 data for the office over the last 12 hours.

Enter the edit mode of your dashboard, and click the "+ Add widget" button;
Navigate to the "Charts" widgets bundle and select the "Line chart" widget;
This widget will also use the dashboard's time window. Specify "Selected entity" alias as the data source. Add "co2" as the data key, and specify its label and units. Then, click the gear icon to configure the "co2" data key settings;
Turn on the "Smooth line" option to make the chart line appear smoother. Click "Save";
Enter a name for the Y-axis, such as "CO2 level", and specify "ppm" as the units;
Change the chart title to "Air Quality";
Set the "Bottom" legend position and check "Min", "Max" and "Average" options in the "Show values" section to display these statistics on the chart;
Clear the "Card border radius" value. Click "Add";
Place this widget below the "Temperature and Humidity history" widget in the right-bottom corner of the dashboard and adjust its size. Save the dashboard to apply the changes.

Navigate to the "Charts" widgets bundle and select the "Line chart" widget;

This widget will also use the dashboard's time window. Specify "Selected entity" alias as the data source. Add "co2" as the data key, and specify its label and units. Then, click the gear icon to configure the "co2" data key settings;

Turn on the "Smooth line" option to make the chart line appear smoother. Click "Save";

Enter a name for the Y-axis, such as "CO2 level", and specify "ppm" as the units;

Change the chart title to "Air Quality";

Set the "Bottom" legend position and check "Min", "Max" and "Average" options in the "Show values" section to display these statistics on the chart;

Place this widget below the "Temperature and Humidity history" widget in the right-bottom corner of the dashboard and adjust its size. Save the dashboard to apply the changes.

The configured “Indoor Air Quality Sensor” state should look like this:

Configuring state for Energy Meter

Let’s proceed to configure the state for the “Energy Meter” device. We will add two widgets: one to display power consumption per hour, and another to display power consumption data over the last 12 hours.

Power consumption per hour

To display power consumption per hour, we will use the “Power consumption card” widget from the “Industrial widgets” widget bundle:

Click on the "Energy Meter" device row in the "Office sensors list" widget to transition to its state;
Enter dashboard editing mode and click the "+ Add widget" button;
Find the "Industrial widgets" widgets bundle and click on it;
Select the "Power consumption card" widget;
Specify "EM-002" (Energy Meter) as the data source. The "powerConsumption" key has already been added. Now, open its data configuration by clicking the "pencil" icon;
The "Energy Meter" device sends data every 10 minutes. We need to use data aggregation to calculate the average value among the data points in the selected time interval. In our case, this will be 1 hour, representing hourly electricity usage. Select the "Average" as the aggregation function;
Use the widget's time window. Turn off the "Display time window" option. Then, select the "Current hour" option as the time interval. Click "Update";
Change the label to "Power consumption per hour", set it to display two decimal places, and open the font settings menu;
Set the font size to 35 pixels, and click "Apply";
Clear the "Card border radius" value. Click "Add";
The widget that displays the average power consumption per hour has been added. Resize it to your liking. Afterwards, save the dashboard to apply the changes.

Click on the "Energy Meter" device row in the "Office sensors list" widget to transition to its state;

Enter dashboard editing mode and click the "+ Add widget" button;

Find the "Industrial widgets" widgets bundle and click on it;

Select the "Power consumption card" widget;

Specify "EM-002" (Energy Meter) as the data source. The "powerConsumption" key has already been added. Now, open its data configuration by clicking the "pencil" icon;

The "Energy Meter" device sends data every 10 minutes. We need to use data aggregation to calculate the average value among the data points in the selected time interval. In our case, this will be 1 hour, representing hourly electricity usage. Select the "Average" as the aggregation function;

Use the widget's time window. Turn off the "Display time window" option. Then, select the "Current hour" option as the time interval. Click "Update";

Change the label to "Power consumption per hour", set it to display two decimal places, and open the font settings menu;

Set the font size to 35 pixels, and click "Apply";

The widget that displays the average power consumption per hour has been added. Resize it to your liking. Afterwards, save the dashboard to apply the changes.

Power consumption chart

The next widget we will add is a “Range chart”. A feature of this widget is that the line color on the chart is colored according to the range in which the value falls. This widget will visualize data on power consumption over the last 12 hours.

While in dashboard editing mode click the "+ Add widget" button at the top of the screen;
Navigate to the "Charts" widgets bundle and select the "Range chart" widget;
Use the widget's time window. Turn off the "Display time window" option. Set the time interval to "12 hours," and "None" for data aggregation. Click "Update";
Specify "EM-002" (Energy Meter) device as the data source, and add "powerConsumption" data key. Change the chart title to "Power consumption history";
Change the units to kWh, and proceed to the color range settings;
The line color on the chart is colored according to the range in which the value falls. This will help you to quickly orient yourself with the data by visually highlighting changes in color according to variations in values. Add five ranges and their corresponding colors: range 1: from 0 to 1, color, for example, light green; range 2: from 1 to 2, color, for example, green, range 3: from 2 to 3, color, for example, yellow, and so on. Click "Apply";
Go to the "Range thresholds settings", and turn off the "Label" option;
Open the "Line color" settings, and set the opacity to 40%. Apply changes;
Turn off the "Fill area" option;
For the Y-axis, set the scale: minimum value 0, maximum value 5;
Expand the Y-axis settings. Enter the "Power consumption" as the axis label, and turn off "Show split lines" option;
Uncheck the "Data export" box in the "Show card buttons" section, and remove the value for the "Card border radius". Click "Add" to complete adding the range chart widget;
The "Power consumption history" widget has been added. Place it to the right of the "Power consumption per hour" widget and resize it to your liking. Save the dashboard to apply the changes.

While in dashboard editing mode click the "+ Add widget" button at the top of the screen;

Navigate to the "Charts" widgets bundle and select the "Range chart" widget;

Use the widget's time window. Turn off the "Display time window" option. Set the time interval to "12 hours," and "None" for data aggregation. Click "Update";

Specify "EM-002" (Energy Meter) device as the data source, and add "powerConsumption" data key. Change the chart title to "Power consumption history";

Change the units to kWh, and proceed to the color range settings;

The line color on the chart is colored according to the range in which the value falls. This will help you to quickly orient yourself with the data by visually highlighting changes in color according to variations in values. Add five ranges and their corresponding colors: range 1: from 0 to 1, color, for example, light green; range 2: from 1 to 2, color, for example, green, range 3: from 2 to 3, color, for example, yellow, and so on. Click "Apply";

Go to the "Range thresholds settings", and turn off the "Label" option;

Open the "Line color" settings, and set the opacity to 40%. Apply changes;

For the Y-axis, set the scale: minimum value 0, maximum value 5;

Expand the Y-axis settings. Enter the "Power consumption" as the axis label, and turn off "Show split lines" option;

Uncheck the "Data export" box in the "Show card buttons" section, and remove the value for the "Card border radius". Click "Add" to complete adding the range chart widget;

The "Power consumption history" widget has been added. Place it to the right of the "Power consumption per hour" widget and resize it to your liking. Save the dashboard to apply the changes.

Now you can monitor hourly power consumption and power consumption data for the last 12 hours.

Now you can track the average hourly power consumption and historical data on power consumption usage over the last 12 hours.

Configuring state for Water Flow Meter

Finally, we will configure the state for the “Water Flow Meter” device. We will add a card widget to display the average water consumption per hour, a chart widget to display water consumption data over the last 12 hour, and the device’s battery level widget.

Water consumption per hour

To visualize hourly water consumption, you can use any card widget and customize it. In this example, we will use the “Power consumption card” widget from the “Industrial widgets” widgets bundle and configure it according to our needs.

Click on the "Water Flow Meter" device to go to its state;
While in dashboard editing mode click the "+ Add widget" button;
Navigate to the "Industrial" widgets bundle and select any widget, for example "Power consumption card";
Specify "WM-003" (Water Flow Meter) as the data source. Add "waterConsumption" key as data key and click "pencil" icon to open its data key configuration;
In this widget, we will also use data aggregation to calculate the hourly average of the received data. Select the "Average" as the aggregation function;
Use the widget's time window. Turn off the "Display time window" option. Then, select the "Current hour" option as the time interval. Click "Update";
Change the label to "Water consumption per hour". Now, open the "Icons" window;
Choose a new icon for the widget that better corresponds to the type of data displayed;
Change units to gal (gallon), set to show one decimal place, and clear the "Card border radius" value. Click "Add";
The widget that displays the average water consumption per hour has been added. Resize it to your liking. Save the dashboard.

Click on the "Water Flow Meter" device to go to its state;

While in dashboard editing mode click the "+ Add widget" button;

Navigate to the "Industrial" widgets bundle and select any widget, for example "Power consumption card";

Specify "WM-003" (Water Flow Meter) as the data source. Add "waterConsumption" key as data key and click "pencil" icon to open its data key configuration;

In this widget, we will also use data aggregation to calculate the hourly average of the received data. Select the "Average" as the aggregation function;

Change the label to "Water consumption per hour". Now, open the "Icons" window;

Choose a new icon for the widget that better corresponds to the type of data displayed;

Change units to gal (gallon), set to show one decimal place, and clear the "Card border radius" value. Click "Add";

The widget that displays the average water consumption per hour has been added. Resize it to your liking. Save the dashboard.

Water consumption chart

Now we need to visualize the water consumption data for the last 12 hours. Earlier, we added a similar widget to track power consumption. Therefore, let’s copy the “Power consumption history” widget, insert it into the “water_sensor” state, and change its data source to water consumption.

Go to the "Energy Meter" state, enter dashboard editing mode. Right-click on the "Power consumption history" widget and select "Copy" from the dropdown menu that appears;
Navigate to the "Water Flow Meter" state. Right-click on the dashboard and select "Paste" to insert the copied widget;
Place this widget to the right of the "Water consumption per hour" widget, resize it, and click the "pencil" icon to enter its settings;
Specify the device "WM-003" (Water Flow Meter) instead of "EM-002". Replace the data key with "waterConsumption". Change the title to "Water consumption history";
Change units to gal (gallon), and proceed to edit the range colors;
Remove the extra color range and apply the changes;
For the Y-axis, change the scale: minimum value 0, maximum value 4;
Expand the Y-axis settings. Change axis label to "Water consumption". Click "Apply" to save changes;
The "Water consumption history" widget has been added. Save the dashboard.

Go to the "Energy Meter" state, enter dashboard editing mode. Right-click on the "Power consumption history" widget and select "Copy" from the dropdown menu that appears;

Navigate to the "Water Flow Meter" state. Right-click on the dashboard and select "Paste" to insert the copied widget;

Place this widget to the right of the "Water consumption per hour" widget, resize it, and click the "pencil" icon to enter its settings;

Specify the device "WM-003" (Water Flow Meter) instead of "EM-002". Replace the data key with "waterConsumption". Change the title to "Water consumption history";

Change units to gal (gallon), and proceed to edit the range colors;

Remove the extra color range and apply the changes;

For the Y-axis, change the scale: minimum value 0, maximum value 4;

Expand the Y-axis settings. Change axis label to "Water consumption". Click "Apply" to save changes;

The "Water consumption history" widget has been added. Save the dashboard.

And lastly in this tutorial, we will add the “Battery charge” widget. It will display the battery charge level in the “Water Flow Meter” device.

While in dashboard editing mode click the "+ Add widget" button;
Navigate to the "Status indicators" widgets bundle and select the "Battery level" widget;
Specify "WM-003" (Water Flow Meter) as the data source, and add "batteryLevel" key as data key;
Clear the "Card border radius" value. Click "Add";
Place this widget to the right of the "Water consumption history" widget, resize it. Save the dashboard.

Navigate to the "Status indicators" widgets bundle and select the "Battery level" widget;

Specify "WM-003" (Water Flow Meter) as the data source, and add "batteryLevel" key as data key;

Place this widget to the right of the "Water consumption history" widget, resize it. Save the dashboard.

Now you can track water usage per hour, over the last 12 hours, and control the battery level in the “Water Flow Meter” device.

Final view of the dashboard for this lesson

Finally, your dashboard should look like this:

Next step

At this stage, the development of our dashboard is complete. In the next lesson, we will share this dashboard with customers. When you are ready to proceed, simply click the button below.

Lesson 4: Share dashboard with customer