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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
A telephone style number pad for your dashboard. Based on the Membrane 3x4 Matrix Keypad sold by Adafruit, produces numbers or symbols when clicked.
There are three steps in the create block form:
- Select block type
- Select feed(s)
- 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.