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
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
Text editor powered by tinymce.
