You can create a quick and simple UI for your electronics project using Dashboards in Adafruit IO. Dashboard blocks such as charts, sliders, and buttons are available to help you quickly create an interactive dashboard for your IoT Project without the need for any custom code.

Before you start with this guide, you should read through the Adafruit IO Basics: Feeds guide first. Adafruit IO Dashboards use feeds to know what they have to display, and familiarity with the process of creating and saving data to feeds in Adafruit IO is required for this guide.

Feeds

Feeds are the core of the Adafruit IO system. A feed holds data and meta-data that you have sent to Adafruit IO. 

Data is the information you want Adafruit IO to store. For example, temperature data, fan speed, or whether a light switch is turned on or off. Note that the data does not have to represent a physical thing, but it often does!

Meta-data includes settings for whether the data is public or private, what license the stored sensor data falls under, and a general description of the data for humans to read.

Since feeds are used by Adafruit IO Dashboards, you may first want to read through the "Adafruit IO Basics: Feeds" guide to familiarize yourself with how feeds work.

Blocks

Adafruit IO includes 20 different types of blocks (interactive widgets) to add to your dashboard. Each block is tied to one or more Adafruit IO feeds. 

The interactivity of a block depends on the block's type. Some blocks are intended to display the feed's value while others may write a value to a feed.

For a full list of blocks, you can add to your dashboard, visit this page >>>

Dashboards

Adafruit IO Dashboards start out as a blank webpage. From this page, you can add blocks, to create an interactive webpage to interact with (or view) your electronics project.

You can also share your dashboard with friends, classmates, students, or colleagues.

When you log in to your io.adafruit.com account, you will be directed to your account overview page. Click the Dashboards link in the header to navigate to the "dashboards" page.

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 New Dashboard button.

Enter the name and description of your new dashboard, then, click the Create button once you are finished.

Once the new dashboard has been created, click on the name of your new dashboard to visit its page.

You should now see your new, blank, dashboard.

A dashboard is a webpage that you can edit. Blocks are widgets that you can add to your dashboard.

To add a new block to your Dashboard, click the gear on the top right of the dashboard page. From the dropdown, click Create New Block.

You will then be presented with a list of block types to choose from. Clicking one of these blocks will bring up the block editor.

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 you'd like to connect to your block to select it and click the Next Step button to continue.

Next, you can customize the settings for the block type you selected. Each block will have common settings like block title, as well as custom options that vary per block like "slider minimum and maximum value".

Once you have finished customizing your block, click Create Block.

Repeat the process to add more blocks to your dashboard! Next, let's take a look at each of the available blocks!

List of Adafruit IO Dashboard Block Types:

Gauge Block

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.

Slider Block

The slider block 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.

Momentary Button Block

The momentary button allows you to easily write 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 write a value to a feed monitored by the feeding device.

Toggle Button Block

A toggle button is useful if you have an ON or OFF type of state. You can configure what values are sent on press and release. Unlike the momentary button, the values will stay the same until you click the button again to toggle to the second value.

Color Picker Block

The color picker allows you to quickly select (or view) an 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. 

Line Chart Block

The line graph block allows you to visualize numeric data over time. The line chart is used to graph one or more feeds. 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 Block

A text block can be used to send data as well as view data. To publish, click on the text block, enter any text, and press enter to send.

Image Block

An image block can be used to view base64 encoded images. Drag and drop images onto the block to publish them back to the feed.

Stream Block

A stream block can be used to view the rolling history of data for multiple feeds. Up to 5 of your feeds can send data to this block.

Icon Block

The icon block displays the feed state using custom icons (click here to view them!). Send the icon name to the selected feed to display an icon inside the block.

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

Indicator Block

Want to display the status of your project on a dashboard? The indicator block is a simple on/off indicator lamp that looks like an 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.

Number Pad Block

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

Remote Control Block

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

Map Block

A map can track the locations of your feed's location metadata. 

Multi-line Text Block

A multi-line text block can be used to view larger blobs of text from a feed.

Dashboard Link Block

With this block, you may link to other dashboards from your current dashboard.

Dividing Line Block

This block is a horizontal or vertical dividing line element used for dashboard organization.

Battery Gauge Block

A simple battery level gauge. Feed values are compared using the given conditions. If one of the conditions is true, then that condition will be used for the color to be displayed. All values are assumed to be numeric for comparison and between 0-100.0. If the current feed value can't be converted to a number, it will be treated as a string.

Line Gauge Block

A line gauge is a read-only block type that shows a fixed range of values.

Edit Dashboard Info

If you wish to change the name or description of your dashboard, you can do that from the list of your dashboards.

On the dashboard page, select the dashboard you wish to edit by clicking on the checkbox next to its name.

Click the Edit Dashboard button.

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.
  • 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.

Rearrange Blocks on a Dashboard

If you have created a dashboard with multiple blocks, you might want to rearrange them. Start by clicking on the gear button on the upper-right-hand side of your dashboard. Then, click "Edit Layout"

The GIF animation below demonstrates how to rearrange blocks. To move a block, click on the outer perimeter of the block, and drag the block to its new location. Click the Save Layout button when you are finished.

Resize a Dashboard Block

You can also change the size of blocks on your dashboard. Click the gear icon on the upper-right-hand side of your dashboard. Then, click Edit Layout.

The GIF animation below demonstrates how to resize blocks. You can resize a block by clicking on the bottom right corner and dragging to make the block smaller or larger. 

Editing a Dashboard 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.

From the dropdown, click Edit Layout.

Next, click the gear icon on the upper right-hand corner of the block you wish to edit. From the dropdown, click Edit Block.

A form similar to the one you used to create the block will appear. If you want to change the feed connected to the block, you can do this here.

At the bottom of the form, click Next Step to continue.

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

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

Delete a Dashboard Block

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

Under Dashboard Settings, click Edit Layout.

Then, click the gear icon on the top-right corner of the block you want to delete.

Click Delete Block to remove the block from your dashboard.

Click the Save Layout button on the upper right hand side of the screen to save your changes.

Deleting a Dashboard from within the Dashboard

Deleting a dashboard is permanent! There is no "Trash/recycle bin", and it is not possible to undo the deletion

Done with your project? You can delete your Adafruit IO Dashboard. Note that deleting a dashboard does not delete the feeds associated with the dashboard, only the dashboard page, its layout, and corresponding blocks.

Navigate to the dashboard you want to delete and click the gear icon in the upper-right-hand corner of the page.

From the dropdown, click Delete Dashboard.

On the pop-up, Click Confirm.

Deleting a Dashboard 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.

Deleting a dashboard is permanent! There is no "Trash/recycle bin", and it is not possible to undo the deletion

Click the Delete Dashboard button.

On the pop-up, Click Confirm to permanently delete your 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 current temperature with your roommates? 

You'll want to make your dashboard public.

Sharing an Adafruit IO Dashboard

Unlike the process for sharing a feed, Adafruit IO does not have the ability to selectively allow certain Adafruit IO accounts to view your Dashboard. 

About Sharing an Adafruit IO Dashboard

When someone views a shared Adafruit IO 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. 

Adafruit IO Public dashboards are view-only: clicking any input blocks (such as buttons or sliders) on the dashboard will not update the feeds.

Sharing a dashboard also sets all the feeds on your dashboard from privately viewable to publicly viewable.

  • This means that when you publish your Adafruit IO dashboard, you are publishing the dashboard and all its feeds to everybody with both the link to your dashboard and an Adafruit IO account. Therefore, when sharing a dashboard with others, be careful of whom you share the link with.

On the top right-hand side of your dashboard page, click the gear icon.

Click the toggle next to Dashboard Privacy.

Click Confirm.

Viewing Someone Else's Adafruit IO Dashboard

If you are logged out of Adafruit IO and viewing a dashboard shared with you, you will not see updated data. The data on the dashboard reflects the state of the feeds at the time you accessed the page.

When you log into your Adafruit IO account and visit a dashboard link shared with you, you'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. 

Tracking your Shared Data on Adafruit IO

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.

This guide was first published on Apr 21, 2015. It was last updated on Mar 08, 2024.