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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

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.

Next, we will look at editing your dashboard.

This guide was first published on Apr 21, 2015. It was last updated on Apr 21, 2015. This page (Adding Blocks) was last updated on Nov 17, 2019.