Skip to content

Latest commit

 

History

History
152 lines (115 loc) · 4.34 KB

File metadata and controls

152 lines (115 loc) · 4.34 KB

🏭 IIoT Environmental Monitoring Dashboard

A professional Industrial IoT environmental monitoring system for an ESDM factory with 20 rooms, featuring real-time temperature and humidity tracking.

Dashboard ESP32 MQTT License


📋 Overview

Component Description
Firmware Arduino/C++ sketch for ESP32 + SHT85 sensor
Dashboard Standalone HTML/JS web dashboard (zero build step)
Protocol MQTT with Last Will & Testament (LWT)
Rooms 20 independently monitored zones

🔧 Hardware Stack

  • MCU: 20× ESP32 DevKit v1
  • Sensor: Sensirion SHT85 (I2C) — ±0.1°C / ±1.5% RH accuracy
  • Protocol: MQTT over Wi-Fi
  • Publish Rate: Every 5 seconds per node

🖥️ Dashboard Features

Home View

  • 20 Room Cards in a responsive grid layout
  • Live Temperature & Humidity with sparkline trend graphs
  • Connection Status — animated green (online) / red (offline) indicators
  • Alert Coloring — cards pulse red when temp > 30°C or humidity > 60%
  • System Overview Header — average temp, average humidity, online count, alert count

Interactive Stat Panels

Click any header stat badge to view:

  • Avg Temp → All rooms sorted by temperature (alerts in red at top)
  • Avg Humidity → All rooms sorted by humidity (alerts in red at top)
  • Online → Offline rooms in red at top, online in green below
  • Alerts → Only rooms with active alerts

Room Detail View

Click any room card for a full-screen view with:

  • Large current temperature & humidity readings
  • Historical charts with time-range tabs: 1HR, 24HR, 1W, 1M, 1Y, 3Y, ALL
  • Interactive tooltips — hover to see exact value + timestamp
  • X-axis time labels and Y-axis value labels
  • Realistic simulated data with daily & seasonal cycles

Navigation

Action Method
Switch rooms arrow keys or on-screen buttons
Go home Backspace, Escape, Home button, or trackpad back gesture
Browser back Full History API support

🚀 Quick Start

Dashboard (No Installation Required)

# Just open in your browser — no server needed!
open dashboard/index.html

The dashboard runs with simulated MQTT data out of the box for demo purposes.

ESP32 Firmware

  1. Install Libraries (Arduino Library Manager):

    • PubSubClient — MQTT client
    • ArduinoJson — JSON serialization
    • arduino-sht — Sensirion SHT sensor driver
  2. Configure — edit these constants in esp32_sht85_mqtt.ino:

    static const char* WIFI_SSID     = "YOUR_WIFI_SSID";
    static const char* WIFI_PASSWORD = "YOUR_WIFI_PASSWORD";
    static const char* MQTT_BROKER   = "192.168.1.100";
    static const char* ROOM_ID       = "Room_1";  // Change per node
  3. Flash via Arduino IDE or PlatformIO to each ESP32.


📡 MQTT Payload Format

Topic: factory/env/Room_X

Online Message (published every 5s):

{
  "room": "Room_1",
  "temp": 24.50,
  "hum": 45.20,
  "status": "online"
}

Last Will & Testament (auto-published on disconnect):

{
  "room": "Room_1",
  "status": "offline"
}

📁 Project Structure

IIoT-Environmental-Monitor/
├── dashboard/
│   ├── index.html              # Web dashboard (HTML + Tailwind CSS)
│   └── app.js                  # Application logic & chart rendering
├── firmware/
│   └── esp32_sht85_mqtt.ino    # ESP32 Arduino sketch
└── README.md

🛠️ Tech Stack

Layer Technology
Frontend HTML5, Vanilla JS, Tailwind CSS v3 (CDN)
Icons Lucide Icons (CDN)
Fonts Inter (Google Fonts)
Charts Custom SVG sparklines & interactive charts
Firmware Arduino/C++ (ESP32)
Sensor Sensirion SHT85 via I2C
Protocol MQTT (PubSubClient)
Serialization ArduinoJson

📜 License

This project is licensed under the MIT License.


Built for Industrial IoT Excellence 🏭