User Interface with Feeds

Now that we’ve got data streaming into feeds on Adafruit IO, and learned of all the cool tricks you can do with your feeds, we can now view and analyze the projects data in real-time. If you want to interface with the feed data, you can always query and fetch data on any computer using the REST or MQTT API. There’s plenty of libraries for a computer programming language to do so.

Ultimately, almost every Internet of Things project will, at some level, need to provide a way for the things to deal with the humans. User interface considerations can range from a mobile app that allows a user to turn lights on and off and adjust the volume on a music player, to output features such as status monitors, analytics, and data visualization dashboards.

However, making a custom app with a user interface can be a ton of work. You can create a quick and simple UI using the built in dashboard capability in Adafruit IO. Of course, you should start with making all your feeds and getting them working well.

Once that’s done, you can visit the Dashboard section of the site. Free accounts can have up to 5 Dashboards, and they can have as many elements as you like.

One thing to note about elements is that some of them pull from feed data, some push to your feed, and some do both. We’ll explain as we go through them. Note that since all the elements read from the underlying feeds, they can affect each other, which can be great for adding quick visual feedback!

From your account, click Dashboards and create a new dashboard. A dashboard is just a webpage you can edit. Click Plus to add a block. There are a wide range of great looking, functional blocks.

Lines, and Toggles, and Buttons oh my!

OK, of course we’ve got that temperature data feed created earlier - let's display that data. We’ve got two options for reading values - we can put down a line chart block. This will plot the data much like the feed information page. That’s good for historical trend data. For instantaneous readings, with a nicer look than the plain text block, try the gauge block. Both of these are read-only blocks.

You can click edit to customize your blocks. For example, we can set the min/max value for the gauge, note that the preview on the right will update immediately. Each block has various customizations that you can be adjusted. Try the Test Value area to see what different values will look like! Click update when you're done.

Now that we’ve seen a few reading blocks, check out the momentary push button. This is sort of what it sounds like, its a button graphical element. When you click the button with your mouse or finger on touchscreen, it will send a message, let's say “ON” to the attached feed. When released, it sends another message, let's say “OFF”.  It will only write data to a feed, not read data. You can change what data is written in the configuration page.

With non-numerical data, the plot and gauge won’t work. The text element will show the last value written to a feed. Let’s add one. We can edit the dashboard to place it right next to the button. Now note that one element is writing to a feed, and one is reading. So when I click the push button, the text updates immediately to match!

If you need more than just the latest value, the Stream block is sort of like a small feed monitor, it will display date-stamped feed information. We always recommend keeping one of these on each dashboard so you can easily monitor your feed data.

The ON/OFF switch is much like the button and is one of the few elements that’s both read and write. 

Let’s add one so we can see how that works. Like the push button, it will send a message to a feed when pressed, and will alternate between ON and OFF (or whatever text you like). 

Click the switch and you’ll see the feed/text block update. Unlike the button, it also reads from the feed. So if you press the momentary button...aha! The switch also updates itself.

There’s a few more elements we won’t go into detail - and there may be even more Adafruit has added since recording this video.

Map uses Open Street Map data to plot your location. You can use this if you have the geolocation metadata set, as mentioned earlier.

If you need a lot of buttons, you can use either the numberpad or the remote control elements. These give you either 12 or 21 momentary buttons, and will write a single number to a feed.

The Image element is good if you have base64-encoded images in a feed, it will decode JPG files automatically, great if you’re making a remotely viewable camera feed.

The Color picker will read or write data from a feed, you can select a color and it will write the corresponding web hex color to the feed, or it will display a color if the feed contains a valid hex color.

Status indicator is a very simple circle that will change colors based on a numeric condition. It's even simpler than the gauge block, good when you just want to know if the temperature has fallen below a certain value.

Finally, the Icon block will decode text within the feed value and display a corresponding icon, sort of an advanced status indicator with a wide range of shapes. You can’t change the color via the feed, just the displayed icon.

For more information about dashboards and all the cool things they can do, check out this learn guide!

This guide was first published on Mar 14, 2019. It was last updated on May 20, 2024.

This page (Adafruit IO Front End--Dashboards) was last updated on Mar 08, 2024.

Text editor powered by tinymce.