IoT based Air Quality Index Monitoring System

Life... 🌝

Life is very precious and we have only one chance to live it. In daily life routine, we do many activities like sleeping, eating, washing hands, using a mobile phone, going to the bathroom, doing work, assignments (Arrrghh!) and breathing. Yes!!! Breathing, the most important activity that we do every day, every hour, every minute, and even every moment. It is so essential that you cannot even live without it. YOU WILL BE DEAD! 😁 Well, hold on, hold on. I wish you all the best of health. But yes, it is right that breathing is very important and we need fresh air to breathe in.

Challenging Nature? ☘️

In recent years, due to immense industrialization and an increase in vehicle transportation, the air has been affected badly by the increased concentration of gasses such as Carbon Dioxide that leads towards Global Warming and it is right now a major concern for the global community. The second major factor is the depletion of the Ozone layer that is also contributing to Global Warming and disease because it is very useful in blocking dangerous sun rays. That is why, we are hearing too much about the melting of glaciers, changing weather patterns and smog. Many countries are trying to reduce the Global Warming parameters by various methods such as planting trees and preventing extensive paper use.

Well, there are many factors that contribute to Global Warming. Extensive use of CFC (Chlorofluorocarbon) generating devices, heavy load of transportation, and deforestation are some of the biggest reasons.

A Little Contribution to Restore Environment 🙌🏿

Being an engineer, I brainstormed a lot on how I can contribute in providing a solution that can help in reducing Global Warming and then an idea sparked in my mind that why don't I make an IoT project in which devices can monitor gases in the air and send the data to the cloud server! A device that can be deployed onto the drone and that drone will fly in a specific area to get the air quality parameters from the sensors. It will help in getting the knowledge that in which area is there a need to take actions to reduce Global Warming.

Making a device is somehow easy but deploying it to the cloud server and designing the interactive dashboard that shows sensor values is a cumbersome task and literally a pain in the ass. But a big fat thanks to Grandeur and their amazing cloud services that literally saved my time. I did not have to worry about the storage, sensors data send/receive, or deployment procedures. It became a piece of cake.

Let's Start Building It Now! 💪🏽

We have now come to the point where we have completely understood the importance of this project. Therefore, without wasting time, let's hop in and enjoy the ride! 🤩

Step 1: Setup the Hardware 🛠️

Our hardware consists of three sensors. Ozone sensor, Carbon Dioxide sensor, and Temperature & Humidity sensor. There can be other sensors as well that you can use. However, for this project, we are using three sensors. The schematic diagram and Printed Circuit Board (PCB) has been designed on EasyEDA - Online PCB design & circuit simulator. Which is open-source software to make your awesome designs. The schematic diagram of the project is shown below:

DHT22 and MQ131 can work on 3.3V voltage that can be supplied through NodeMCU where MG811 works on 5-6V. Therefore you can either use 7805 or 7806. Remember that gas sensors such as MG811 and MQ131 take some time before functioning properly because they utilize their time for heating. Therefore, do not worry about it if you do not get sensor data at the start. You have to wait for 5–10 minutes for preheating procedure (It depends upon the temperature of the environment). For printing the Printed Circuit Board (PCB), the Top Silk and Bottom Layer images have been given below:

Such a nice and clean design you have even seen 😃. While giving PCB orders to the vendor, please make your PCB green if possible because most of the PCB area is grounded therefore it will help you to do quick soldering of the components. Do not forget to solder female headers on the board and then put components in those headers. It helps in debugging and also helps in easy replacing of devices and components if they get damaged. Sounds smart right? Yes, it is! 😎

Here is the 3D model of the designed PCB given below:

And this is how it looks so cool in reality! 🥳

Step 2: Gear Up The Awesome Grandeur 🏃🏽‍♂️

This is my favourite step because due to Grandeur, my dream to see my device anywhere in the world came true! For this, we have to make our account and do some important configurations on the platform. Check out their website https://grandeur.dev/ to get into the game. Now let's discuss the steps in detail about how to actually do the setup? 🙄

Well, the big news is that I AM NOT GOING TO TELL THIS STEP IN DETAIL!! 😡 Hahahaha kidding guys 😛. Actually, we are going to use an amazing concept that we used to learn when we first learned C language programming. That there are two ways to pass the parameters to the function, one is by simply sending data by value and the second one is powerful and i.e. to send data by reference. This is what we are doing here. I am going to refer you to the amazing article written by Grandeur itself regarding setting up your Grandeur project for the first time. Kudos to Moiz Husnain for the amazing writing skills that made me able to set up at first glance! Just visit Hello World with Grandeur to know the secret of making this project work like a rockstar 🤘🏼. Trust me, this is actually how I started this project. It ain't that difficult.

Step 3: Firmware for our Beloved Hardware ❤️

Now you have set up Grandeur and it is time to set up the firmware of our project. The firmware includes getting data from the sensors and posting it onto the cloud from where the dashboard app gets it. Grandeur provides SDKs for ESP8266 coding. For firmware coding and setup, please download and install the latest version of Software | Arduino according to your operating system. After this, open the Arduino IDE and connect your NodeMCU with your computer system. Go to Tools → Port and select the port appearing there, e.g., COM3. After this, go to Tools → Board → ESP8266 Boards and select NodeMCU 1.0. You can choose any other based on your board model and version.

Now open the Tools → Manage Libraries and install the following library for the DHT22 sensor:

For MG811, I suggest you get the amazing and easy-to-use library for Carbon Dioxide Sensor by CO2 Sensor GitHub Repo. Please after downloading and unzipping the file, place the CO2 sensor folder into the Arduino Libraries folder which in my case is given below:

C:\\Users\\UserName\\Documents\\Arduino\\libraries

Now in the coding part, I am assuming that you have already set up the initial.ino code that is provided in Hello World with Grandeur. Now we have to modify the ino file. Keep in mind that all the code files and schematics are given in this repository so you can just grab the files and start at a fast pace because all the changes have already been made. However, I really want you to understand what we are doing in this code.

In the code given below, we are setting up our timer for generating the timestamp. Since I am living in Pakistan which has the offset of (UTC+5 or GMT+5). Therefore I have added 18000 seconds i.e. 5h × 60min × 60sec = 18000 sec, you can set the offset according to your region here.

When you run the code on your device, you will notice fluctuations in the CO2 sensor values. To eradicate these jumps, the algorithm of moving average works really well in this regard. It takes values in a window, takes the average of them and then gives a very smooth graph. We have taken the windowsize=5 as you can see that there are 5 values in the co2_values array.

This amazing signal processing technique is based upon this method:

Below function is used for getting the current timestamp in a specific format. It extracts the local time by giving the offset that we have already set in the above code. It is a classic C++ function to get the time. Do not forget to add the delay(1000) in getting the timestamp. Otherwise, you will get 1st January 1970 every time.

Sensors require calibration and pre-heating that is defined in the void setup function. After doing this, the next part becomes super easy as we have to just read the values, get the timestamp, and post the data to the datastore on Grandeur. Temperature is being extracted in Celsius (°C), humidity is being extracted in Percentage (%), CO2 data is being extracted in Parts Per Million(PPM), and Ozone data is being extracted in four units given below:

• Parts per Million (PPM)
• Parts per Billion (PPB)
• Milligram per meter cube (mg/m3)
• Microgram per meter cube (μg/m3)

After reading all the data from sensors, the insert function is called to push the data into the Sensors collection in the cloud datatstore. This is where the amazing role of Grandeur comes in where you do not need to worry about the database design, data storage, retrieval, insertion, update, or deletion, etc. They have made it quite a piece of cake process and I honestly love it. 😍

Now we are at the point where we can safely upload the code. Just click on the Upload button shown as the right arrow button at the top left corner of the Arduino IDE. Now your code will be uploaded in few minutes. After successfully uploading the code, go to Tools → Serial Monitor and you will be able to see the calibration process.

Remember one thing!!! During experimentation, I observed that the ozone sensor won't get calibrated if the CO2 Sensor is turned on. So make sure to turn off or pull out the CO2 Sensor while calibration and pre-heating process of the ozone sensor. Once it is done, you can safely insert the MG811 sensor. This is why I encouraged you to use female headers.

Also make sure to remember to replace the API key, authentication tokens, WiFi SSID and password in code with yours for proper functioning of hardware.

Now once the process is successful, this is how you will see your SUCCESS on the serial monitor!!

Eureka! Eureka! We have completely set up our hardware with firmware. And if we go see our Datastore - Grandeur (considering you have already registered), then you will see that data is being stored in the Sensors collection. How cool it is!

Step 4: Make our JS Dashboard Application Ready to Go 💻

Our device-side is now working like a rockstar. It's now time to set up the application-side whose main purpose is to fetch the sensors data from Grandeur Datastore and show us critical information about the environment around our device. For this, again I am referring to the Hello World with Grandeur tutorial in which main.js and index.html files are used. We will do changes in these two files and add the graphs as well which are powered by Google Charts.

The important change that we have made in main.js, is to add the getAllData method that will provide us with all the sensors data points. It takes two parameters i.e. collection name and the type of process that we have to do, which could be fetching the latest data, all data, or a specific sensor's data. The complete method is provided below:

So far, we have set the main.js file. In the index.html, we have to show the following information on the dashboard:

• Most recent sensors data
• Temperature and humidity vs. time graph
• Ozone concentration (PPB and Microgram per meter cube) vs. time graph
• CO2 concentration (PPM) vs. time graph

For graph plotting and data representation, the following drawTableAndGraphs method is added that loads the charts and table. We are using the same getAllData method to get the data from the Grandeur datastore and then we are plotting the graph. All the graphs and tables are being loaded asynchronously.

Step 5: Test and Deploy the Application to Cloud 🌩️

Finally! Now we are just a few steps away from the summit point. The things that are left are super-duper easy to do. We have to just first run and test the app from localhost and then we will deploy our application on Grandeur. For configuring the application and testing on localhost, please give the following commands:

grandeur init
grandeur serve

You are pretty much familiar with these commands and have already used them in the Hello World Tutorial by Grandeur. But the main goal is yet to come. First test that whether you are able to get this window like this or not.

Great! 😃 Now it is time for the most dangerous step of development, PRODUCTION DEPLOYMENT!!! 🥺 But do not worry, we will do this step through GitHub Pages, that makes website deployment of your project so easy. Therefore, let's follow the steps towards the deployment. 🧗🏽‍♂️

• Please open GitHub and then Sign Up/ Sign In if you have not done this step.
• Click on the New written in the green button along with Repositories on the left corner.
• Write the repository name as aqimonitoringsystem.github.io.
• Add readme.md, Java template.gitignore, and MIT License.
• After this click on Create repository.

After making the repository, please upload all the files from the Web folder to the newly made repository. After this, click on the Settings button and choose Github Pages at the bottom of the page. Select the main branch and save it. After about 4-5 minutes, open the link. You will be able to see your deployed website.

Step 6: Celebrate your Success LIVE! 🎉

Nothing more. Just go to the Settings - Grandeur and add your Github page URL in the allowed domains. In my case, it is https://ahmadthecoder.github.io/. Yours would be https://YOURUSERNAME.github.io/. After this, go to your Github Pages URL Link and Yes!!! You are watching the sensors data live coming from your device!! Every time you refresh the page, you will see updated graphs and values. This is so freaking awesome!

In the End... It Does Matter! 😉

So this is it. We are done. Now it is time to grab a cup, make a really good cappuccino, sit on your chair, and celebrate each moment of what you have done. Trust me that deploying your IoT project on the cloud is one of the most enjoyable moments ever. This project finds its application in many areas. For example, governments can be convinced to deploy such drone-based monitoring systems that can gather surrounding's data that can help them take proactive initiatives to control the pollution and make environment friendly for us and hence for our breathing.

With this project, I hope you have learned to make an industrial-grade IoT project from scratch. Starting from the idea to plan, and then from plan to design, and then from design to implementation and then implementation to deployment in production, it will help you make other projects as well.

I tried my level best to keep this tutorial informal, user-friendly, and easy to learn. Still, if you think you need guidance or have any confusion, don't hesitate to contact me at meet.ahmad247@gmail.com and you know what? I would love to assist you.

Till next time!

Oh yes! Let me sign off in style. 😎