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

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

Click Create a New Block

Select the Line Chart Block

Select the aqi feed

Under Block Settings:

  • Set Block Title to AQI - 24 Hours
  • Set Show History to 24 Hours
  • Click the Draw Grid Lines checkbox

Click Create Block

Let's make another line chart block to display the AQI  from the past week.

Click Create a New Block

Select the Line Chart Block

Select the aqi feed

Under Block Settings:

  • Set Block Title to AQI - 24 hours
  • Set Show History to 7 Days
  • Click the Draw Grid Lines checkbox

Click Create Block

Organize Dashboard

You can drag the dashboard blocks around to re-organize your dashboard. 

Before moving on, make sure your dashboard contains the same blocks as the screenshot below

This guide was first published on Oct 16, 2020. It was last updated on 2020-10-16 15:19:36 -0400.
This page (Adafruit IO Setup) was last updated on Oct 21, 2020.