IoT Cloud Dashboards & Widgets

Overview

Dashboards in the Arduino Cloud are used to easily monitor & control your Arduino board from a web interface. In this article, we will take a look at what a dashboard is, what widgets are, and learn how they interface with an Arduino board.

If you are new to the Arduino Cloud, make sure you read the Getting Started with the Arduino Cloud article.

What is a Dashboard?

A dashboard consist of one or several widgets that are linked with your cloud variables. You can for example, set up a switch to turn on/off a light, a gauge that displays temperature, or a chart that shows data over time.

Dashboards are not tied to one Thing, or one device, and it can be used to control and monitor several devices simultaneously. For example, you can have 10 devices monitoring temperature in different parts of the world, and the data displayed in one single dashboard.

Deleting dashboards / widgets does not impact the functionality of your Thing & device. This means that you can safely edit your dashboards & widgets while your device is streaming data.

What is a Widget?

Widgets are the building blocks of your dashboard, and can be used to either visualize data or to interact with your board. Widgets are linked to a single cloud variable, and as that variable updates, the widget will as well.

There are many different widgets available that fits different types of uses, such as:

• Gauge - displaying data in a "gauge" style.
• Switch - for switching a boolean, i.e. turning something on/off.
• Map - display the location of your Thing.
• Messenger - to display or send strings to your board.

Full list of widgets and how to use them are available in the List of Widgets .

Downloading Historical Data

Data that is streamed to a widget is also available for download. The data retention rate depends on your Arduino Cloud plan. For example, an entry plan has a data retention of 15 days. You can download it as an

.csv

Learn more about downloading data in the Historical Data on the Arduino IoT Cloud tutorial.

Sharing Dashboards

It is possible to share your live dashboards with external people. To do so, please refer to the guide in the link below:

• Sharing Dashboards in the Arduino IoT Cloud

List of Widgets

Below you will find a list of available widgets, and examples on how they are linked to a variable used in a sketch.

Switch

The switch widget is great for simply turning something ON or OFF.

Can be linked with a boolean variable.

An example of how it is used in a sketch:

Copy
1if(switchVariable == true){
2    digitalWrite(ledPin, HIGH);
3}
4
5else{
6    digitalWrite(ledPin, LOW);
7}

Push Button

The push button widget is a virtual version of a push button. While pushed down, something is activated, and when released, it is de-activated.

Can be linked with a boolean variable.

An example of how it is used in a sketch:

Copy
1while(pushbuttonVariable == true){
2    counter++
3    delay(10);
4}

Slider

The slider widget can be used to adjust a value range. Great for changing the intensity of light, or the speed of a motor.

Can be linked with multiple variables, including integers & floats.

An example of how it is used in a sketch:

Copy
1analogWrite(ledPin, sliderVariable);

Stepper

Similar to the slider, the stepper widget increases or decreases a variable by increments of 1. It can be used to switch between different modes.

Can be linked with multiple variables, including integers & floats.

An example of how it is used in a sketch:

Copy
1if(stepperVariable == 10){
2    activateThisFunction();    
3}
4
5//activate another function
6else if(stepperVariable == 11){
7    activateAnotherFunction();
8}
9
10//or simply print out the updated value
11Serial.println(stepperVariable);

Time Picker

The time picker widget is used to represent and set a time and/or a date.

Can be linked with a CloudTime variable.

An example of how it is used in a sketch:

Copy
1CloudTimeVariable = ArduinoCloud.getLocalTime();

In this example, the variable named

CloudTimeVariable

ArduinoCloud.getLocalTime()

Messenger

The messenger widget can be used to send and receive strings through the messenger window.

Can be linked with a String variable.

An example of how it is used in a sketch:

Copy
1stringVariable = "This is a string";

It is possible to clear the messenger widget window directly from the sketch, by using:

Copy
1stringVariable = PropertyActions::CLEAR;

For ArduinoIoTCloud library versions below

1.7

stringVariable = "\x1b";

Color

The color widget is great for selecting an exact color for an RGB light.

Can be linked with a Color variable.

An example of how it is used in a sketch:

Copy
1uint8_t r, g, b;
2rgbVariable.getValue().getRGB(r, g, b);

Dimmed Light

The dimmed light widget is great for changing the intensity of a light, and to be able to turn it ON and OFF as well.

Can be linked with a Dimmed Light variable.

An example of how it is used in a sketch:

Copy
1//retrieve and map brightness value from cloud
2  uint8_t brightness = map(dimmedVariable.getBrightness(), 0, 100, 0, 255);
3
4  //then check if switch is on/off 
5  if (dimmedVariable.getSwitch()) {
6    analogWrite(6, brightness); //write brightness value to pin 6    
7  }
8  else{
9    analogWrite(6, LOW); //turn off lamp completely
10  }

Colored light

The colored light widget is designed to set the color for a lamp, and can turn it ON and OFF as well.

Can be linked with a Colored Light variable.

An example of how it is used in a sketch:

Copy
1uint8_t r, g, b;
2rgbVariable.getValue().getRGB(r, g, b);

Value

The value widget is a simple one. It only reads, or writes values without any additional functionalities.

Can be linked with many different variables.

An example of how it is used in a sketch:

Copy
1valueVariable = analogRead(A0);

Status

The status widget is great for checking the state of something: green is positive, red is negative!

Can be linked to a boolean variable.

An example of how it is used in a sketch:

Copy
1statusVariable = true;
2//or
3statusVariable = false;

Gauge

The gauge widget is the go-to for any measurements that fit in a half circle. A great widget for building organized, professional dashboards.

Can be linked with multiple variables, including integers & floats.

An example of how it is used in a sketch:

Copy
1gaugeVariable = analogRead(A0);

Percentage

The percentage widget displays values as percentage, with the option of adding icons and color thresholds.

In the widget settings, you can choose from a range of icons, as well as a color that should be visible whenever a value is e.g. below a certain value.

Can be linked with multiple variables, including integers & floats.

An example of how it is used in a sketch:

Copy
1percentageVariable = analogRead(A0);

LED

The LED widget is a virtual LED that can signal the status of something. Can either be set to ON or OFF.

Can be linked with a boolean variable.

An example of how it is used in a sketch:

Copy
1ledVariable = true;
2//or
3ledVariable = false;

Map

The map widget is a tool for keeping track on the location of your projects. This is a great tool for any project involving GPS, or to get an overview of where your Thing, or multiple Things are operating.

Can be linked with the Location variable.

An example of how it is used in a sketch:

Copy
1locationVariable = Location(51.5074, 0.1278);

Chart

The chart widget is great for data analytics. It is used to track real time data, as well as tracking historical data. This widget can for example be used to track temperature changes, energy consumption and other sensor values. A chart widget can only be linked to one variable at a time.

An example of how it is used in a sketch:

Copy
1variable = analogRead(A0);

Advanced Chart

The advanced chart widget allows you to track up to 5 variables simultaneously. This widget also includes an additional configuration interface that appears while editing the widget.

An example of how it is used in code:

Copy
1variable_1 = analogRead(A1)
2variable_2 = analogRead(A2)
3variable_3 = analogRead(A3)
4variable_4 = analogRead(A4)
5variable_5 = analogRead(A5)

Check out the Advanced Chart guide for more information.

Scheduler

The Scheduler Widget allows you to schedule a job in the future. With this widget, you can schedule:

• A job to activate at a specific hour, minute and second.
• A job to execute only on specific days.
• A job that should last for X amount of seconds, minutes or hours.

In a sketch, use the

x.isActive()

Example:

Copy
1if(scheduleVariable.isActive){}

Check out the Scheduler guide for more information.

Sticky Note

The sticky note widget can be used to write important notes or to categorize your widgets.

The sticky note can not be linked with a variable, and is designed to keep notes only while using a dashboard. It does support the use of markdown, so that you can create titles, links, code blocks etc.

Value Selector

The value selector widget can be used to switch between predetermined values through available buttons. Supported variable types are

int

String

Example:

Copy
1if(valueSelector == 0){
2  //if value matches, execute code
3}
4
5if(valueSelector == "string"){
6  //if string matches, execute code
7}

Value Dropdown

The value dropdown widget works similarly to value selector, and is be used to switch between predetermined values through a dropdown menu. Supported variable types are

int

String

Example:

Copy
1if(valueDropDown == 0){
2  //if value matches, execute code
3}
4
5if(valueDropDown == "string"){
6  //if string matches, execute code
7}