Adafruit IO Basics: Dashboards

Created by Todd Treece

https://learn.adafruit.com/adafruit-io-basics-dashboards

Last updated on 2022-12-01 02:26:20 PM EST

©Adafruit Industries Page 1 of 29

Table of Contents

Overview 3

Creating a Dashboard 3

Adding Blocks 6
• Gauge
• Number Slider
• Momentary Button
• Toggle Button
• Color Picker
• Line Graph
• Text Box
• Image
• Stream
• Icon
• Indicator 
• Number Pad
• Remote
• Navigating the Create New Block Form

Editing a Dashboard 19
• Rearranging and Resizing Blocks
• Making a Dashboard Public or Private
• Editing a Block
• Deleting a Block

Deleting a Dashboard 25
• Deleting from the List of Dashboards

Sharing a Dashboard 27
• Making your Dashboard Public
• Viewing Public Dashboards

©Adafruit Industries Page 2 of 29

Overview

Dashboards allow you to visualize data and control Adafruit IO connected projects
from any modern web browser. Widgets such as charts, sliders, and buttons are
available to help you quickly get your IoT project up and running without the need for
any custom code.

If you are new to Adafruit IO, you may want to start with the Adafruit IO Feeds guide () 
before you continue with this guide. If you are comfortable with feeds, then you are
ready to create your first dashboard.

Creating a Dashboard
When you login to your io.adafruit.com () account, you will be redirected to your list of
dashboards. It will look like the page seen below.

©Adafruit Industries Page 3 of 29

Your list of dashboards will only have the Welcome Dashboard when it is first loaded.
You can start the dashboard creation process by clicking the Actions menu on the
upper left hand side of the screen.

Next, select Create a New Dashboard from the dropdown menu.

©Adafruit Industries Page 4 of 29

You can then enter the name and description of your new dashboard, and click the Cr
eate button once you are finished.

Once your dashboard has been created, click on the name of your new dashboard to
load it.

©Adafruit Industries Page 5 of 29

You should now see your new blank dashboard.

Next, we will look at adding blocks to the new dashboard.

Adding Blocks
Blocks are widgets that you can add to your dashboard. There are some blocks that
can be used as outputs, and some that can be used as inputs. To add a new block,
you can click the + (plus) button on the upper right hand side of the dashboard.

You will then be presented with a list of block types to choose from, like the one seen
below.

©Adafruit Industries Page 6 of 29

Let's take a quick look at the available blocks.

Gauge

The gauge block allows you to quickly view the current value of a numeric feed. You
can set a minimum and maximum value for the gauge, and it will automatically scale
the value to a percentage and display it graphically. The gauge will update
automatically whenever a new value is pushed to the feed.

©Adafruit Industries Page 7 of 29

Number Slider

The number slider allows you to quickly change the numeric value of a feed. You can
set the minimum and maximum values for the slider, as well as change the amount the
slider will increment when you drag the handle.

©Adafruit Industries Page 8 of 29

Momentary Button

The momentary button allows you to easily push a value to a feed. This can be useful
if you wish to control devices attached to Adafruit IO. For example, if you wanted to
feed your pet from your smartphone, you could use a momentary button to send the
message to your feeding device.

Toggle Button

The toggle button will allow you to switch between any two text or numeric values.
Unlike the momentary button, the values will stay the same until you click the button
again to toggle to the second value.

©Adafruit Industries Page 9 of 29

Color Picker

The color picker allows you to quickly select a RGB hex value for a color using a
standard color picker interface. The new hex value will be pushed to the feed
whenever you change the color.

©Adafruit Industries Page 10 of 29

Line Graph

The line graph allows you to visualize numeric data over time. You can set the time
range in hours that the chart will load, and set the labels for each axis of the chart.
The chart will update dynamically whenever new values are pushed to the feed.

Text Box

The text box is both a freeform text input and output. You can use it to set new values
for a feed, and it will also dynamically update when any new values are pushed from
other sources.

©Adafruit Industries Page 11 of 29

Image

The image block allows you to display images pushed from devices with cameras
such as the Raspberry Pi. The image block requires a feed with history disabled.

©Adafruit Industries Page 12 of 29

Stream

The stream block displays incoming data from one or many feeds, and will also
display any errors or throttle messages when they occur. Unlike the text box, the
stream block displays multiple lines of feed history, which can be useful for
debugging.

Icon

The icon block displays feed state using custom icons (click here to view them! ()). To
use it, send the icon name to the selected feed to display the icon inside the block.

If you are not changing the icon, you can also select Static Icon to display a static icon
on your dashboard.

©Adafruit Industries Page 13 of 29

Indicator 

Want to display a the status of your project on a dashboard? The indicator block is a
simple on/off indicator lamp which looks like a LED. Feed values are compared using
the given conditions. If the conditions are true, then "On Color" is used, if false, "Off
Color". All values are assumed to be numeric for comparison. If the current feed value
can't be converted to a number, it will be treated as a string.

©Adafruit Industries Page 14 of 29

Number Pad

A telephone style number pad for your dashboard. Based on the Membrane 3x4
Matrix Keypad sold by Adafruit (), produces numbers or symbols when clicked.

©Adafruit Industries Page 15 of 29

Remote

A Mini Remote Control for your dashboard! Based on the Mini Remote Control sold by
Adafruit (), mimics the output of the Adafruit NEC remote control library ().

©Adafruit Industries Page 16 of 29

Navigating the Create New Block Form

There are three steps in the create block form:

1. Select block type

2. Select feed(s)
3. Block settings

Once you have selected a new block type by clicking on the icon, you will be
presented with a list of feeds. This will allow you to select a feed to attach to your
new block. Some blocks, such as the stream and line graph blocks, allow you to
attach multiple feeds. Click on the checkbox next to the feed to select it, and click
the Next step button to continue.

©Adafruit Industries Page 17 of 29

The third section allows you to customize the settings for the block type you selected.
Each block will have common settings like block title, as well as custom options like
minimum and maximum values. Click on the Create Block button to add a new block
once you have finished customizing the block settings.

Repeat the process to add more blocks to your dashboard. Currently there is a limit of
10 blocks per dashboard.

©Adafruit Industries Page 18 of 29

Next, we will look at editing your dashboard.

Editing a Dashboard
If you wish to change the name of your dashboard, you can do that from the list of
your dashboards. First, select the dashboard you wish to edit by clicking on the
checkbox next to its name.

Next, click on the Actions menu and select Edit Selected Dashboard from the
dropdown menu.

You will be presented with a form with three text inputs:

• Name - A short descriptive title of your data. Letters, numbers, and spaces are
valid characters, and this field is required. The feed name must be unique for
your account.

©Adafruit Industries Page 19 of 29

• Key - Used when accessing the dashboard programatically. By default, the key is
a lowercase version of your dashboard name with spaces removed. You can
modify the key to be any unique combination of lowercase letters, numbers, and
dashes.
• Description - A long form description of your data. This field is not required, but
it's useful to provide a detailed description if your dashboard will be public.

Once you have finished editing these fields, click the Save button.

Rearranging and Resizing Blocks

If you have created a dashboard with multiple blocks, you might want to rearrange
them or resize them. This is possible by clicking the gear button on the upper right
hand side of your dashboard.

The animation below demonstrates how to resize and rearrange blocks. You can
resize a block by clicking on the bottom right corner and dragging to make the block
smaller or larger. To move a block, click on the outer perimeter of the block, and drag
the block to its new location. Click the DONE EDITING button when you are finished.

©Adafruit Industries Page 20 of 29

Making a Dashboard Public or Private

By default, new dashboards are only visible to you, but you can make them visible to
anyone by clicking on the lock button on the upper right hand side of the screen. This
button will toggle the dashboard between public and private.

By making a dashboard public, you will also be setting all attached feeds to public as
well. Click the OK button to confirm.

©Adafruit Industries Page 21 of 29

Once a dashboard has been marked as public, a share button will appear next to the
open lock button. Click on the share button to get the public dashboard link.

To toggle the dashboard back to private, click on the lock button again.

Editing a Block

If you wish to edit a block, you will need to enter dashboard edit mode by clicking on
the gear on the upper right hand side of the screen.

©Adafruit Industries Page 22 of 29

Next, click the gear icon on the upper right hand corner of the block you wish to edit.

A form similar to the one you used to create the block will appear. You can change the
feeds attached to the block if needed, and click Next Step to continue.

You can also edit the block settings if needed. Click Update Block to finish editing.

©Adafruit Industries Page 23 of 29

Click the DONE EDITING button on the upper right hand side of the screen to exit
dashboard edit mode.

Deleting a Block

If you wish to delete a block, you will need to enter dashboard edit mode by clicking
on the gear on the upper right hand side of the screen.

©Adafruit Industries Page 24 of 29

You can delete a block by clicking on the trash can icon at the top right hand corner
of the block while in dashboard edit mode.

Click the DONE EDITING button on the upper right hand side of the screen to exit
dashboard edit mode.

Deleting a Dashboard
If you are currently viewing a dashboard, you can delete the dashboard by clicking on
the trash icon on the upper right hand side of the screen.

Click the OK button on the confirmation dialog to confirm deletion.

©Adafruit Industries Page 25 of 29

Deleting from the List of Dashboards

You can also delete a dashboard from the list of dashboards. To do this, select a
dashboard by clicking on the checkbox next to its name.

Then, click on the Actions menu and select Remove Selected Dashboards from the
dropdown menu to delete your dashboard.

©Adafruit Industries Page 26 of 29

Sharing a Dashboard

By default, dashboards on Adafruit IO are set to private. This makes the dashboard
visible to only you. You'll be the only person able to view, edit, and modify both the
dashboard and the values of the feeds.

But what if you'd like to share the dashboard showing your apartment's data with your
roommates? 

You'll want to make your dashboard public.

Making your Dashboard Public

Unlike the process of sharing a feed (), Adafruit IO does not have the ability to
selectively-allow certain Adafruit IO accounts from viewing your Dashboard. 

This means that when you publicize your dashboard, you are publicizing it to everybo
dy with both the link and an Adafruit IO account. When sharing a dashboard with
others, be careful of whom you share the link with.

©Adafruit Industries Page 27 of 29

To make the dashboard public, click
the lock icon on the top right of the
dashboard page. 

Doing this will bring up an alert saying

that by making a dashboard public, it will
make all feeds connected to it public as
well. 

Click OK to publicize the dashboard.

Viewing Public Dashboards

When someone views the dashboard (dashboard URLs look like  https://
io.adafruit.com/IOUser/dashboards/weather-dashboard ) without an Adafruit
IO Account, the dashboard will not display streaming data, it'll display the values of
the public feeds on the dashboard at the time of accessing the page. Clicking any or
input blocks (such as buttons or sliders) on the dashboard will not update the public
feeds.

To view updated data points, either refresh the page, or have your friend register for a
free Adafruit IO account. ()

©Adafruit Industries Page 28 of 29

If the person you shared it with is viewing the Dashboard with an Adafruit IO account,
they'll have full access to view the live streaming data from feeds on the dashboard.
What you see - they see. 

Though, there are some limitations. If you are viewing someone else's dashboard,
you're not able to modify it by moving blocks around, resizing blocks, or adding to the
blocks on the page. The blocks (and the dashboard layout) are static and belong to
the person who created the dashboard. 

If you've shared a few dashboards or feeds and would like to keep track of them - You
can check what's viewable from visiting Your Shared Data page on Adafruit IO ().

From here, you'll be able to see all the data which you've chosen to make public - like
your feeds, and dashboards.

If you'd like to restrict a specific piece of data to individual people only, you might
want to share a feed instead of a dashboard ().

©Adafruit Industries Page 29 of 29