Adafruit IO Basics Dashboards

2017-03-16 | By Adafruit Industries

License: See Original Project

Courtesy of Adafruit

Guide by Todd Treece

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.

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.

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

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

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.

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.

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.

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

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.

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.

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.

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.

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.

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.

制造商零件编号 2680

KIT FEATHR HUZZAH W/ESP8266 WIFI

Adafruit Industries LLC

¥310.11

查看更多内容 Details

Add all DigiKey Parts to Cart