|
|
# 🌡️ Raspberry Pi 4 Temperature & Humidity Monitoring System (HTU21D)
|
|
|
|
|
|
---
|
|
|
|
|
|
## 📌 Project Overview
|
|
|
|
|
|
This project implements a real-time temperature and humidity monitoring system using a **Raspberry Pi 4** and an **HTU21D sensor**. The system reads environmental data via I2C, processes it using a C program, and displays the results on a web dashboard using Nginx.
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🧠 System Architecture
|
|
|
|
|
|
The system is designed using a **layered architecture**, where each component has a specific responsibility. This separation improves maintainability and clarity.
|
|
|
|
|
|
---
|
|
|
|
|
|
### 🔹 1. Hardware Layer (Sensor)
|
|
|
|
|
|
The **HTU21D sensor** measures temperature and humidity and communicates using the **I2C protocol**.
|
|
|
|
|
|
* The Raspberry Pi acts as the **master**
|
|
|
* The sensor acts as the **slave**
|
|
|
* Data is transmitted over SDA (data) and SCL (clock)
|
|
|
|
|
|
---
|
|
|
|
|
|
### 🔹 2. Data Acquisition Layer (C Program)
|
|
|
|
|
|
A program written in C interacts directly with the I2C interface:
|
|
|
|
|
|
* Opens the I2C device (`/dev/i2c-1`)
|
|
|
* Sends commands to the sensor
|
|
|
* Reads raw data
|
|
|
* Converts it into human-readable values (°C and %)
|
|
|
|
|
|
👉 Output is formatted as a JSON file:
|
|
|
|
|
|
```json
|
|
|
{ "temperature": 23.9, "humidity": 57.4 }
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
### 🔹 3. Data Persistence Layer (JSON File)
|
|
|
|
|
|
The JSON file acts as an **intermediate data layer**:
|
|
|
|
|
|
* Stores the latest sensor reading
|
|
|
* Decouples backend (C) from frontend (JavaScript)
|
|
|
* Enables simple data exchange without a database
|
|
|
|
|
|
---
|
|
|
|
|
|
### 🔹 4. Web Server Layer (Nginx)
|
|
|
|
|
|
Nginx serves static files:
|
|
|
|
|
|
* HTML (interface)
|
|
|
* JavaScript (logic)
|
|
|
* JSON (sensor data)
|
|
|
|
|
|
👉 It acts as the **bridge between the system and the user’s browser**
|
|
|
|
|
|
---
|
|
|
|
|
|
### 🔹 5. Presentation Layer (Frontend)
|
|
|
|
|
|
The browser executes JavaScript:
|
|
|
|
|
|
* Uses `fetch()` to request the JSON file
|
|
|
* Updates the DOM dynamically
|
|
|
* Displays values in real time
|
|
|
|
|
|
---
|
|
|
|
|
|
### 🔄 Data Flow Summary
|
|
|
|
|
|
```text
|
|
|
Sensor → I2C → C Program → JSON → Nginx → Browser → User Interface
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
### 🧠 Key Design Decisions
|
|
|
|
|
|
* **Use of JSON:** lightweight and easy to parse
|
|
|
* **Polling (setInterval):** simple real-time updates
|
|
|
* **Separation of layers:** avoids tight coupling between components
|
|
|
|
|
|
---
|
|
|
|
|
|
### ⚙️ Why This Architecture Works
|
|
|
|
|
|
* Modular → each part can be modified independently
|
|
|
* Scalable → can add database or APIs later
|
|
|
* Simple → ideal for embedded + web integration
|
|
|
|
|
|
---
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🧰 Materials
|
|
|
|
|
|
### 🔧 Hardware
|
|
|
|
|
|
* Raspberry Pi 4
|
|
|
* HTU21D sensor
|
|
|
* Jumper wires (female-to-female)
|
|
|
* MicroSD card with Raspberry Pi OS
|
|
|
* Power supply
|
|
|
|
|
|
### 💻 Software
|
|
|
|
|
|
* Raspberry Pi OS / Debian
|
|
|
* GCC compiler
|
|
|
* i2c-tools
|
|
|
* libi2c-dev
|
|
|
* Nginx
|
|
|
* Git
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🔌 Hardware Connections
|
|
|
|
|
|
### 📷 Pin Reference Images
|
|
|
|
|
|
Include these images in your repository:
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
---
|
|
|
|
|
|
### 📍 Wiring Table
|
|
|
|
|
|
| HTU21D | Raspberry Pi 4 |
|
|
|
| ------ | -------------- |
|
|
|
| VCC | 3.3V |
|
|
|
| GND | GND |
|
|
|
| SDA | GPIO2 (SDA) |
|
|
|
| SCL | GPIO3 (SCL) |
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🚀 Deployment Guide (From Scratch)
|
|
|
|
|
|
### 📥 1. Clone the Repository
|
|
|
|
|
|
```bash
|
|
|
git clone http://<GITEA_SERVER>/<USER>/<REPOSITORY>.git
|
|
|
# Downloads the project from the server
|
|
|
|
|
|
cd <REPOSITORY>
|
|
|
# Enters the project folder
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
### 🧰 2. Install Dependencies
|
|
|
|
|
|
```bash
|
|
|
sudo apt update
|
|
|
# Updates package list
|
|
|
|
|
|
sudo apt install gcc i2c-tools libi2c-dev nginx git
|
|
|
# Installs compiler, I2C tools, web server, and Git
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
### ⚙️ 3. Enable I2C
|
|
|
|
|
|
```bash
|
|
|
sudo raspi-config
|
|
|
# Opens Raspberry Pi configuration menu
|
|
|
```
|
|
|
|
|
|
Go to:
|
|
|
|
|
|
```
|
|
|
Interfacing Options → I2C → Enable
|
|
|
```
|
|
|
|
|
|
```bash
|
|
|
sudo reboot
|
|
|
# Restarts system to apply changes
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
### 🔍 4. Verify Sensor
|
|
|
|
|
|
```bash
|
|
|
i2cdetect -y 1
|
|
|
# Scans I2C bus for connected devices
|
|
|
```
|
|
|
|
|
|
Expected:
|
|
|
|
|
|
```
|
|
|
0x40
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
### 🧑💻 5. Compile the Sensor Program
|
|
|
|
|
|
```bash
|
|
|
cd sensors/HTU21D
|
|
|
# Move to sensor source code
|
|
|
|
|
|
gcc main.c htu21d.c -o HTU21D -li2c
|
|
|
# Compiles the program and links I2C library
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
### 📂 6. Deploy Web Files
|
|
|
|
|
|
```bash
|
|
|
sudo cp -r ~/basic-ui-dashboard/* /var/www/html/
|
|
|
# Copies project files to Nginx directory
|
|
|
```
|
|
|
|
|
|
```bash
|
|
|
sudo mkdir -p /var/www/html/data
|
|
|
# Creates folder for JSON output
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
### 🔐 7. Set Permissions
|
|
|
|
|
|
```bash
|
|
|
sudo chmod +x /var/www/html/sensors/HTU21D/HTU21D
|
|
|
# Allows execution of sensor program
|
|
|
|
|
|
sudo chown -R www-data:www-data /var/www/html
|
|
|
# Gives Nginx access to files
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
### ▶️ 8. Run Sensor Loop
|
|
|
|
|
|
```bash
|
|
|
cd /var/www/html
|
|
|
# Go to web directory
|
|
|
|
|
|
while true; do ./sensors/HTU21D/HTU21D > data/HTU21D.json; sleep 5; done
|
|
|
# Continuously updates JSON every 5 seconds
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
### 🌐 9. Start Nginx
|
|
|
|
|
|
```bash
|
|
|
sudo systemctl start nginx
|
|
|
# Starts web server
|
|
|
|
|
|
sudo systemctl enable nginx
|
|
|
# Enables auto-start on boot
|
|
|
|
|
|
sudo systemctl status nginx
|
|
|
# Verifies server is running
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
### 🌍 10. Get Raspberry Pi IP
|
|
|
|
|
|
```bash
|
|
|
hostname -I
|
|
|
# Displays local IP address
|
|
|
```
|
|
|
|
|
|
Example:
|
|
|
|
|
|
```
|
|
|
192.168.1.100
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
### 🖥️ 11. Access from Another Computer
|
|
|
|
|
|
Open a browser and go to:
|
|
|
|
|
|
```
|
|
|
http://192.168.1.100
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🔄 Real-Time Updates
|
|
|
|
|
|
JavaScript fetch:
|
|
|
|
|
|
```javascript
|
|
|
fetch('./data/HTU21D.json?nocache=' + Date.now())
|
|
|
```
|
|
|
|
|
|
**What it does:**
|
|
|
|
|
|
* Prevents browser cache
|
|
|
* Forces fresh data request
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🧪 How to Use
|
|
|
|
|
|
1. Power on Raspberry Pi
|
|
|
2. Connect sensor
|
|
|
3. Run sensor loop
|
|
|
4. Open browser
|
|
|
5. Monitor values in real time
|
|
|
|
|
|
---
|
|
|
|
|
|
## ⚠️ Troubleshooting
|
|
|
|
|
|
### ❌ No data update
|
|
|
|
|
|
* Check loop is running
|
|
|
* Verify `nocache` in fetch
|
|
|
|
|
|
---
|
|
|
|
|
|
### ❌ Permission denied
|
|
|
|
|
|
```bash
|
|
|
sudo nano /var/www/html/index.html
|
|
|
# Edit file with admin privileges
|
|
|
```
|
|
|
|
|
|
---
|
|
|
|
|
|
### ❌ Sensor not detected
|
|
|
|
|
|
* Check wiring
|
|
|
* Run `i2cdetect`
|
|
|
|
|
|
---
|
|
|
|
|
|
## 📈 Improvements
|
|
|
|
|
|
* WebSockets (real-time without polling)
|
|
|
* Database storage
|
|
|
* Historical charts
|
|
|
* Remote access via internet
|
|
|
|
|
|
---
|
|
|
|
|
|
## 🎯 Conclusion
|
|
|
|
|
|
This project integrates:
|
|
|
|
|
|
* Embedded systems (sensor + Raspberry Pi)
|
|
|
* C programming
|
|
|
* Linux system configuration
|
|
|
* Web development (Nginx + JS)
|
|
|
|
|
|
It demonstrates a complete pipeline from hardware acquisition to real-time web visualization.
|
|
|
|
|
|
---
|