Now that you have verified that the sensor is working, it's time to create an Adafruit IO Dashboard. Dashboards allow you to visualize data and control Adafruit IO-connected projects from any modern web browser.

For more information about Adafruit IO Dashboards, visit our Learn Guide on this topic.

Create a new Adafruit.io Dashboard

On the WipperSnapper device page, click "Add to Dashboard" on either the humidity or temperature sensor. Then click "+ New Dashboard"

Next, create a name and description for the dashboard and click "create".

Add a Line Chart Block

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.

Click the "gear" icon. Then click "Create New Block".

Select the "Line Chart".

Select both the humidity and temperature sensor feeds.

Name and label the chart. The Y-axis min can be 0 and the max can be 100.

Nice chart! Both the temperature and humidity get their own lines.

You can place your mouse over the lines to see exact values at exact times.

Add Gauge Blocks

The line chart is great to see the temp and humidity values in the past but for seeing the current values, a couple of "gauge" blocks in the dashboard will be quite helpful.

Create a new block and select the "Gauge" block.

Select the Temperature sensor feed.

Name the block and set a min of 0 and a max of 100 (or other values that you may fancy). Next, label the gauge "C°" for Celsius. (how to bleow)

How to label the gauge "C°"

To type the degree sign: " ° " follow the below instructions.
Mac: option+shift+8
PC: Hold down the Alt key, and on the numeric keypad on the right of the keyboard, type 0176 or Alt+ 248
Linux is a little more involved.

Next, create another new gauge block for humidity. Select the Humidity Sensor feed.

Name and label the block. Set a min of 0 and 100 for max.

Formatting your Dashboard

Now that all of the blocks are on the dashboard, organize the blocks so they are more readable.

Click the "gear" icon and then click "Edit Layout". Now you can drag and scale the blocks to your choosing.

Now that's a good-looking Dashboard!

Next Steps

That's it! You've got a handy dashboard for your temperature and humidity data.

If you'd like to make the Dashboard "public" to share it with others, follow this guide here.

Lastly, you may want to think about mounting the Feather and AHT20 somewhere that makes sense for you. Follow this guide for some different 3D printed case ideas for your Feather and sensor.

Happy sensing!

This guide was first published on Dec 10, 2021. It was last updated on Dec 10, 2021.

This page (Configure Dashboard ) was last updated on Dec 02, 2021.

Text editor powered by tinymce.