Better Air, Quality Checker

I am a student MCT at Howest (Kortrijk Belgium) and for the module Project 1, I made a project that tracks the air quality and visualises this on a web application. This idea began initially because of the corona pandemic that was still very active at the time. A lot of people were recommended to work at home because office work still was not a safe option. However, some problems have solutions and I think checking the air quality would be a good start. I wanted something to help employers and employees and decided my project should:

• Be able to measure the temperature, humidity and CO2 value (ppm).
• Display these values on a user friendly responsive web application.

In this instructables I am going to share the steps I took for this proces at making the Better Air project.

• Raspberry Pi 3 Starterkit
• SD card 8GB
• Breadboard
• Wires
• Resistors
• 16x2 LCD Display
• 1-wire DS18B20 Temperature sensor
• DHT22 Humidity sensor
• MH-Z19 CO2 sensor

The total cost of this project will be around €100. You can find my bill of materials in the .pdf file below.

Before starting anything else, I had to make a prototype plan. So I started making my circuit in Fritzing to be sure everything was connected and wired correctly. This was a good overview of my hardware and could be used as my guidelines throughout this project.

To store the sensor data I have designed my own database which contains 2 tables.

You can see the EER diagram in the image above.

1. Sensors

This table stores the sensors

2. Historiek

This table stores the measured values by the sensors

Installing Python packages

• pip install flask-cors
• pip install flask-socketio
• pip install mysql-connector-python
• pip install gevent
• pip install gevent-websocket
• apt install mariadb-server mariadb-client -y
• apt install apache2 -y

Libraries

• Adafruit DHT22
• pip install mh_z19

Writing the backend

I used the editor Visual Studio Code to write the backend. This allows you to make a connection to your Raspberry Pi (with a LAN cable) via an SSH connection. A useful guide on how to make a remote connection can be found here.

To send my live data from the backend to the frontend, I used Socket.IO which makes a realtime communication between these two. For my history pages, I used API calls to receive non-live data from my database. This was also used to insert new measured data.

Check out my Github for the full code

Writing the frontend

I started by making a functional analysis to figure out how my website should look. This .pdf file can be found below. I firstly made mock-ups and then started developing the responsive website in html, css and JavaScript. In general, I used the data in 3 steps:

1. A get function who calls the data handler
2. The data handler calls the show function
3. My show function displays the data in graphs

Check out my Github for the full code

For the housing of my project, I decided that laser cutting would be the cleanest option. As material I used a 3mm medium density fibre board that I bought at the laser cutting appointment. I had to make an Adobe Illustrator file with the correct dimensions for my box. Here, I also uncluded holes the size of my LCD display, CO2 sensor and one for the power cable of my Raspberry Pi.

The exact .ai file can be found below.