IoT Cloud Dashboards & Widgets

Learn about dashboards and the different widgets that can be used to monitor & control your board.

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?

Widgets in a dashboard.
Widgets in 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
file that can easily be used with Excel, Google Sheets etc.

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:

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
The Switch Widget

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:

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

Push Button

Push Button Widget
Push Button Widget

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:

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

Slider

Slider Widget
Slider Widget

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:

1analogWrite(ledPin, sliderVariable);

Stepper

Stepper Widget
Stepper Widget

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:

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

Time Picker Widget
Time Picker Widget

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:

1CloudTimeVariable = ArduinoCloud.getLocalTime();

In this example, the variable named

CloudTimeVariable
is populated with
ArduinoCloud.getLocalTime()
which returns the Unix time stamp (in seconds) of the local time zone.

Messenger

Messenger Widget
Messenger Widget

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:

1stringVariable = "This is a string";

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

1stringVariable = PropertyActions::CLEAR;

For ArduinoIoTCloud library versions below

1.7
, you can use
stringVariable = "\x1b";
to clear the widget window.

Color

Color Widget
Color Widget

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:

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

Dimmed Light

Dimmed Light Widget
Dimmed Light Widget

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:

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

Colored Light Widget
Colored Light Widget

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:

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

Value

Value Widget
Value Widget

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:

1valueVariable = analogRead(A0);

Status

Status Widget
Status Widget

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:

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

Gauge

Gauge Widget
Gauge Widget

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:

1gaugeVariable = analogRead(A0);

Percentage

Percentage Widget
Percentage Widget

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.

Configuration of a Percentage Widget.
Configuration of a Percentage Widget.

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

An example of how it is used in a sketch:

1percentageVariable = analogRead(A0);

LED

LED Widget
LED Widget

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:

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

Map

Map Widget
Map Widget

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:

1locationVariable = Location(51.5074, 0.1278);

Chart

Chart Widget
Chart Widget

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:

1variable = analogRead(A0);

Advanced Chart

Advanced Chart Widget

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.

Widget Configuration
Widget Configuration

An example of how it is used in code:

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

Scheduler Widget
Scheduler Widget

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()
boolean to check whether a state is active.

Example:

1if(scheduleVariable.isActive){}

Check out the Scheduler guide for more information.

Sticky Note

Sticky Note
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

Value Selector
Value Selector

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

int
and
String
.

Example:

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

Value Dropdown

Value Dropdown
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
and
String
.

Example:

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

Contribute to Arduino

Join the community and suggest improvements to this article via GitHub. Make sure to read out contribution policy before making your pull request.

Missing something?

Check out our store and get what you need to follow this tutorial.

Suggest Changes

The content on docs.arduino.cc is facilitated through a public GitHub repository. You can read more on how to contribute in the contribution policy.