@ -10,94 +10,46 @@ This project implements a real-time temperature and humidity monitoring system u
## 🧠 System Architecture
The system is designed using a **layered architecture**, where each component has a specific responsibility. This separation improves maintainability and clarity.
The system is structured as a simple data pipeline that connects the sensor, processing logic, and web interface. Data flows continuously from the physical environment to the user in a clear and modular way.
---
### 🔹 1. Hardware Layer (Sensor)
### 🔹 Hardware and Communication Layer
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 }
```
The HTU21D sensor measures temperature and humidity and communicates with the Raspberry Pi using the I2C protocol. This allows the Raspberry Pi to request and receive raw data from the sensor.
---
### 🔹 3. Data Persistence Layer (JSON File)
The JSON file acts as an **intermediate data layer**:
### 🔹 Data Processing Layer
* Stores the latest sensor reading
* Decouples backend (C) from frontend (JavaScript)
* Enables simple data exchange without a database
A C program interacts with the I2C interface to read the sensor data. It converts the raw binary values into human-readable units such as degrees Celsius and percentage humidity, and formats the result as JSON.
---
### 🔹 4. Web Server Layer (Nginx)
Nginx serves static files:
* HTML (interface)
* JavaScript (logic)
* JSON (sensor data)
### 🔹 Data Storage Layer
👉 It acts as the **bridge between the system and the user’s browser**
The JSON file stores the latest sensor readings. It acts as an intermediate layer, separating the data acquisition process from the web interface.
---
### 🔹 5. Presentation Layer (Frontend)
### 🔹 Web Server Layer
The browser executes JavaScript:
* Uses `fetch()` to request the JSON file
* Updates the DOM dynamically
* Displays values in real time
Nginx serves the JSON file and the web page over HTTP. It allows other devices on the network to access the system through a browser.
---
### 🔄 Data Flow Summary
### 🔹 Presentation Layer
```text
Sensor → I2C → C Program → JSON → Nginx → Browser → User Interface
```
The web page uses JavaScript to periodically request the JSON file and update the displayed values dynamically, enabling near real-time visualization.
* **Separation of layers:** avoids tight coupling between components
Data is captured by the sensor, processed by the C program, stored as JSON, served by Nginx, and displayed in the browser. This structure keeps the system simple, modular, and easy to maintain.
---
### ⚙️ 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
@ -126,8 +78,7 @@ Sensor → I2C → C Program → JSON → Nginx → Browser → User Interface
Include these images in your repository:
---
@ -144,26 +95,26 @@ Include these images in your repository:
