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.
If you haven't created a dashboard before, don't fret - this page will walk you through the process.
Create a New Dashboard
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.
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.
Add Line Graph Block
A dashboard is a webpage that you can edit. Blocks are widgets that you can add to your dashboard. The line graph block allows you to visualize numeric data over time, making it perfect for us to chart air quality.
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.
The dashboard now contains a line graph block! The block's data will update when the WipperSnapper device sends new data.
Add Gauge Blocks
The gauge block allows you to quickly view the current value of a numeric feed. This is perfect for displaying the temperature and relative humidity from the BME280 sensor.
Add two gauge blocks to the dashboard, one to display the temperature and another to display the relative humidity.
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.
From the block selector, pick the gauge block.
From the feeds list, select the BME280: Temperature Sensor
In the Block Settings, configure the gauge block's display options.
Once completed, click Create Block.
The dashboard now contains a line graph block for the air quality sensor and a gauge block.
To add a block to display the BME280's relative humidity sensor, repeat the steps above but select the BME280: Humidity Sensor feed during block creation.
The final dashboard should look like the following screenshot.
To learn more about Adafruit IO Dashboards, and instructions for sharing your dashboard with others, visit the following guide:
Text editor powered by tinymce.
