Obtain Adafruit IO Key

You will need your Adafruit IO username and secret API key.

Navigate to Adafruit IO and click the Adafruit IO Key button to retrieve these values. Write them down in a safe place, you'll need them later.

Create Group

This guide will use multiple Adafruit IO feeds to store sensor values. To organize these feeds, you will need to create a new group.

Navigate to your Adafruit IO Feeds page.

Click Actions -> Create a New Group

Name the group Air Quality Sensor. You can optionally set a description.

Click Create

Add Feeds to Group

Lets add a few feeds to the Air Quality Sensor group to hold sensor measurements and metadata.

Click Actions -> Create a New Feed

Name the feed AQI

Click Add to Groups and select the Air Quality Sensor group

Click Create

Repeat the process in the step above to create feeds for category (AQI category), temperature, and humidity.

Before proceeding, make sure your Air Quality Sensor group looks exactly like the screenshot below.

Adafruit IO Dashboard

Dashboards allow you to visualize data and control Adafruit IO connected projects from any modern web browser. We'll be adding gauge widgets to visualize data from the air quality sensor in real-time and charts to display data historically.

Navigate to the dashboards page on Adafruit IO.

Click Actions -> Create New Dashboard

Name the dashboard My Air Quality Sensor

Click Create

You should see your new dashboard pop-up in the list of Dashboards. Click the My Air Quality Sensor dashboard link to navigate to the dashboard page.

You should see an empty dashboard. Let's fill it with blocks!

Click the '+' button on your dashboard to add a new block.

Let's add a text block to display the air quality condition (Good, Acceptable, Moderate, etc) sent by the sensor.

From the Create a New Block picker, click the Text Block

On the Choose Feed picker, select the category feed

Under Block Settings:

Set Block Title to AQI Category
Set Font Size to Large
Click Create Block

You should see the AQI Category text box appear on the dashboard. We'll organize the dashboard last - let's add the next block.

Add Gauge Block for Real-Time AQI

The United States Environmental Protection Agency uses an Air Quality Index (AQI) to communicate air quality. While computing the AQI according to the EPA requires a 24 hour average, this gauge displays the real-time AQI.

Note: This guide uses air quality breakpoints and conditions developed by the USA EPA. Other countries have environmental protection agencies with similar countries with air quality indexes using PM2.5 particles. Check out this Wikipedia page for more info.

Click Create a New Block

Select the Gauge Block

Select the aqi feed

Under Block Settings:

Set Block Title to Real-Time AQI
Set the Gauge Max Value to 500
Set Gauge Width to 50px
Remove the "Value" text placeholder from Gauge Label, AQI is a unit-less value.
Set High Warning Value to 151
- This AQI value corresponds with the EPA's "unhealthy" AQI category.
Set Decimal Places to 0
Tick the Show Icon checkbox
Set Icon to w:cloudy-windy
Click Create Block

Your dashboard should now show the AQI category text block and the Real-Time AQI gauge.

Add Gauge Block for Humidity

We'll add another gauge block to display the BME280's humidity reading.

Click Create a New Block

Select the Gauge Block

Select the humidity feed

Under Block Settings:

Set Block Title to Current Humidity
Set Gauge Width to 50px
Remove the "Value" text placeholder from Gauge Label
Tick the Show Icon checkbox
Set Icon to w:humidity
Click Create Block

Add Gauge Block for Temperature

We'll add another gauge block to display the BME280's temperature reading.

Click Create a New Block

Select the Gauge Block

Select the humidity feed

Under Block Settings:

Set Block Title to Current Temperature
Set Gauge Width to 50px
Set the Gauge label to Degrees F or Degrees C
Click the Show Icon checkbox
Set Icon to thermometer
Click Create Block

Add Line Charts

While real-time visualization of PM2.5 measurements over time is immediately useful - looking at the air quality index over time will help you understand the AQI as a more accurate average. Adafruit IO's Line Charts update dynamically whenever new values are pushed to the feed.

Since most environmental groups use a 24-hour average of AQI measurements, we'll create a new line chart block to display the AQI measurements for the past day.