Smart IoT Dashboard (ESP8266 & DHT11)

A responsive, lightweight IoT dashboard hosted directly on a NodeMCU v2 (ESP8266) microcontroller. It reads temperature and humidity from a DHT11 sensor and provides a sleek web interface for real-time monitoring and controlling a hardware LED. The web assets are served efficiently from the microcontroller's internal flash memory using LittleFS.

---

⚡ Features

• 🌡️ Real-time Monitoring: Continuous tracking of ambient temperature (°C) and humidity (%) levels.
• 💡 LED Control: Onboard and external LED control toggled directly via the web panel.
• 🎨 Modern Glassmorphism Web UI: A sleek, dark dashboard designed with semi-transparent glass elements, responsive styling, and micro-animations.
• 🗄️ LittleFS Storage: Separates HTML, CSS, and JavaScript from microcontroller logic for clean software architecture.
• 🔌 Plug & Play USB Drivers: Includes the required CP210x_Universal_Windows_Driver.zip driver directly in the repository for quick flashing on Windows.

---

🛠️ Hardware Requirements & Pin Connections

Hardware Component	NodeMCU (ESP8266) Pin	Description
DHT11 VCC	3V3	Power Supply (3.3V)
DHT11 GND	GND	Ground Reference
DHT11 DATA	D1 (GPIO5)	Sensor Data Communication
Main LED	D4 (GPIO2)	Active-Low Built-in LED
Auxiliary Output (H)	D3 (GPIO0)	Active-High Output Control

---

💻 Tech Stack

• Microcontroller: NodeMCU v2 (ESP8266)
• Framework: Arduino
• Development Environment: PlatformIO (VS Code extension)
• Filesystem: LittleFS
• Web UI Stack: HTML5, CSS3 (Vanilla CSS with custom HSL variables and blur filters), Vanilla JavaScript (Asynchronous Fetch API)

---

🚀 Getting Started

Follow these step-by-step instructions to get the Smart IoT Dashboard up and running:

1. Install USB-to-UART Bridge Drivers

If your computer does not recognize the NodeMCU board when connected via USB, install the CP210x drivers included in this project:

1. Extract CP210x_Universal_Windows_Driver.zip.
2. Right-click on silabser.inf and select Install.
3. Re-plug your NodeMCU; it should now list under a specific COM port in Device Manager.

2. Configure WiFi Credentials

Open src/main.cpp and replace the placeholder credentials with your WiFi network details:

const char* ssid = "YOUR_WIFI_SSID";
const char* password = "YOUR_WIFI_PASSWORD";

3. Build and Upload Code

Using PlatformIO in VS Code:

1. Click the Build checkmark icon in the status bar (or run pio run in terminal).
2. Connect your NodeMCU board via USB.
3. Click the Upload arrow icon (or run pio run --target upload).

4. Upload Web Filesystem (LittleFS)

To host the web files (index.html and style.css), write them to the ESP8266 flash memory:

1. Open the PlatformIO sidebar menu.
2. Under your environment (env:nodemcuv2), expand Platform and select Upload Filesystem Image (or run pio run --target uploadfs in terminal).

5. Access the Web Dashboard

1. Open a serial monitor with a baud rate of 115200 (pio device monitor).
2. Press the RST button on the NodeMCU to restart the boot sequence.
3. Once connected, the console will print the local IP address assigned to the board (e.g. 192.168.1.15).
4. Enter this IP address in any web browser connected to the same network to view and interact with your dashboard!

---

📂 Project Structure

├── .pio/               # PlatformIO build outputs (ignored by Git)
├── .vscode/            # IDE configurations
├── data/               # Filesystem assets uploaded to LittleFS
│   ├── index.html      # Responsive dashboard interface
│   └── style.css       # Dark theme and glassmorphism styling
├── include/            # C++ header files (if any)
├── lib/                # Custom local libraries
├── src/
│   └── main.cpp        # Firmware source code containing server logic
├── test/               # PlatformIO tests
├── CP210x_Universal_Windows_Driver.zip  # USB Driver bundle
├── platformio.ini      # Project dependencies and compilation configurations
└── README.md           # Project documentation (this file)

---

🛡️ License

This project is open-source and free to adapt, improve, and share.