---
title: "Air Environment INFO collection device with Web-Based IOT"
url: "https://maker.wiznet.io/jwjung2004/contest/air-environment-info-collection-device-with-web-based-iot/"
markdown_url: "https://maker.wiznet.io/jwjung2004/contest/air-environment-info-collection-device-with-web-based-iot/md"
type: "Contests"
author: "jwjung2004"
author_url: "https://maker.wiznet.io/jwjung2004/"
original_author: "정지원"
license: "GNU General Public License, version 3 or later (GPL3+)"
published: "2022-10-23"
language: "en"
tags: ["Arduino", "Webserver"]
hardware: ["WIZnet WizFi360-EVB-Pico"]
likes: 11
views: 3620
comments: 2
source: "WIZnet Makers (https://maker.wiznet.io/)"
---

# Air Environment INFO collection device with Web-Based IOT

> This project implements web-based IOT through the WizFi-360-EVB-Pico to provide real-time air environment information to users on the Web.

Original author: 정지원

## Components

- **WIZnet WizFi360-EVB-Pico** x 1
- Software: **Arduino IDE** ([docs](https://www.arduino.cc/en/software))
- Software: **. HTML**

## Documents and links

- [Code](https://maker.wiznet.io/_lib/download.asp?path=project/7883&downfile=221023%5FCode%5Frelease%2Eino) (code): The readability of this code is optimized for Arduino IDE.
- [Schematic](https://maker.wiznet.io/_lib/download.asp?path=project/7883&downfile=221023%5Fschematic%5Frelease0%2Epng) (schematics)
- [Hardware wiring diagram](https://maker.wiznet.io/_lib/download.asp?path=project/7883&downfile=diagram%5Frelease%2Epng) (schematics)
- [Parts List](https://maker.wiznet.io/_lib/download.asp?path=project/7883&downfile=Parts%5FList0%2EPNG)

## Article

### Feuture of project

The project collects **temperature, humidity, fine dust (PM2.5),** and **CO2** concentrations in the air and provides them to users through the **web-based IoT.**

From anywhere, users can access **real-time air environment information** in a particular area, their home, or other buildings through **a web browser **such as Chrome.

**Without relying on an external IoT platform,** the project realized a web-based IoT by building **its own web server** based on **WizFi360.**

### Parts List

![](https://maker.wiznet.io/upload/ckeditor5/913350043%5F1666223450%2EPNG)

### Hardware wiring diagram

![](https://maker.wiznet.io/upload/ckeditor5/1015660075%5F1666723327%2Epng)

※ The source of WizFi360-EVB-Pico image is <https://docs.wiznet.io> .

### Structure diagram

![](https://maker.wiznet.io/upload/ckeditor5/913350043%5F1666223896%2EPNG)

### Schematic

![](https://maker.wiznet.io/upload/ckeditor5/481035024%5F1666540785%2Epng)

### Summary of Code

```plaintext
[ First CORE Loop ]

Every 0.2 Seconds : PM2.5 Sensor Control, RGB LED Control
Evrery Second : Sensor Value Refresh, LCD Print
```

```plaintext
[ Second CORE Loop ]

WIFI WEB Server working
```

The entire code is too long to post in this article. **Detailed code descriptions** are commented out in the **attached code file**.

Alternatively, you can check this **GitHub link** below.

[*https://github.com/jiwjung/Air_Environment_Information_collection_device_with_Web-Based_IOT/blob/main/221023_Code_release/221023_Code_release.ino*](https://github.com/jiwjung/Air_Environment_Information_collection_device_with_Web-Based_IOT/blob/main/221023_Code_release/221023_Code_release.ino)

### Web

In the form of a **web page**, the device provides **real-time temperature, humidity, pm2.5, **and** CO2 **information every second.

If the **real-time air status changes,** the **last message will be changed** according to the fine dust standard of the Korean Ministry of Environment.

| "The concentration of fine dust in the air is Good / Moderate / Unhealty / Very Unhealthy." |
| --- |

■ Web page when fine dust concentration in the air is Moderate.

![](https://maker.wiznet.io/upload/ckeditor5/481035262%5F1666556857%2Epng)

■ If you blow a person's breath on the CO2 sensor,

![](https://maker.wiznet.io/upload/ckeditor5/481035262%5F1666556731%2Epng)

### Pictures of Project

■ On the **LCDscreen**, Device displays the **WIFI SSID, IP and air environment information** to the user.

![](https://maker.wiznet.io/upload/ckeditor5/694844459%5F1666562854%2Ejpg)

※ If you connect to that IP address through a web browser on the same network, you can view the website above.

※ If you port forward the internal IP on the router, you can access it from anywhere in the world.

■ **The color of the RGB LED** changes when the real-time air condition changes.

| ![](https://maker.wiznet.io/upload/ckeditor5/694844459%5F1666562801%2Ejpg) | ![](https://maker.wiznet.io/upload/ckeditor5/694844459%5F1666562815%2Ejpg) |
| --- | --- |
| ![](https://maker.wiznet.io/upload/ckeditor5/694844459%5F1666562822%2Ejpg) | ![](https://maker.wiznet.io/upload/ckeditor5/694844459%5F1666562828%2Ejpg) |

Thank you very much to WIZnet for supporting the WizFi360-EVB-Pico hardware and holding the contest.

Thank you for reading my Project article :)

---

Source: https://maker.wiznet.io/jwjung2004/contest/air-environment-info-collection-device-with-web-based-iot/