Dashboards

Brent Rubell

Now that data is streaming into both your device over Bluetooth and it's connected to Digi-Key IoT Cloud Storage, you can now visualize our home's data in real-time. While you could use an API or framework to display this data, there's an even simpler way.

Digi-Key IoT Studio is an all-in-one solution and includes a Dashboard front-end. You're going to build a dashboard to help visualize the sensors in your home over time. Just like before, there's no programming. You'll drag and drop widgets to create a dashboard.

As mentioned before, IoT Studio provides 10.49MB of data per-device. You can verify how much data your device is using by navigating to the device panel.

Before jumping into building a dashboard, it's important to know where our data is located. IoT Studio provides 10.49MB of data per-device, for up to 5 devices.

To verify how much data your IoT Home is using, 

  • Navigate to the Device Manager
  • From the Device Manager, click the IoT Home device.
  • Click Storage from the device to navigate to the device storage page.

The storage page will display how much data your device uses and which database its stored on. Data is stored in the CloudStorage element you created in the Monitoring your Home page.

You may also download or delete all your device's data at any point. Also, you may verify how much data your device is using by navigating to the device panel.

Step-by-Step: Building a Dashboard

Digi-Key IoT Studio's Dashboard "allows you to display your devices data through a variety of widgets". Widgets are visual components that allow you to display device data in different forms. There are widgets for displaying data as a gauge, a text block, a graph, or even as a pie chart.

Let's start by adding a gauge widget to display the temperature from the ADT7410 temperature sensor in the IoT Home.

  • From Digi-Key IoT Studio, navigate to the Dashboard page.
  • Click the Gear button on the right-hand side of the page to bring up the configuration menu.
  • Click the Data Gauge widget.

A new Data Gauge widget will appear on your dashboard. 

  • Click the ... button to bring up a dropdown for configuring its settings.
  • Click Settings to bring up the widget's properties 

In the widget's properties window,

  • Change the title to Data Gauge - Temperature
  • Change the unit to degrees C
  • Change the number of decimal places to 2
  • Under Data Source, click Select
  • Select IoT Home as the device
  • Select CloudStorage as the Cloud Storage Provider
  • Select Temperature as the value 
  • Click Confirm to configure the data source.
  • Then, click Save

The gauge will automatically appear and the needle will move, reflecting the value read by your temperature sensor.

sensors_DigiKey_IoT.png

Let's add another element type to display the resistance of the gas sensor.

  • From the Configure Dashboard menu, select the Data Glance widget.
  • Click the ... button to bring up a dropdown for configuring it settings.
  • Click Settings 
  • Change the title to Data Glance - Gas
  • Change the unit to ohms
  • Change the icon to reflect what is being measured measuring. In this case, it's the air quality.
  • You may also optionally change the update interval, ranging from 1 to 30 seconds.
  • Under data source, click select
  • Under Select Device, click IoT Home
  • Under Select Cloud Storage, click CloudStorage
  • Under Select Value, click gas (string)
  • Click Save

The data glance widget should populate with the IoT Home's gas reading.

sensors_DigiKey_IoT.png

Let's complete this dashboard by adding a second Data Glance widget to display the relative humidity in the IoT Home.

  • Add a Data Glance Widget to your dashboard
  • In the Data Glance configuration, change the title to Data Glance - Humidity 
  • Change the unit to %RH
  • Change the icon to Humidity 
  • Set the data source to humid
  • Click Save

You've successfully created a dashboard to display data about your IoT Home's sensors! You can view this dashboard on any web browser or mobile device, from anywhere in the world.

sensors_dash.png

For more information about the DK IoT Studio Dashboard and its elements, visit the developer documentation pages.

DOOR ALARM Conclusion
This guide was first published on Dec 11, 2019. It was last updated on Dec 11, 2019. This page (Dashboards) was last updated on Jan 29, 2020.