ESP8266 Sensor Dashboard

A real-time sensor monitoring dashboard with premium alert system, built for ESP8266 (NodeMCU). Features a responsive dark-themed web interface with mobile support, configurable alerts, and smooth animations.

🌟 Features

• Real-time Sensor Monitoring

  • DHT11 Temperature & Humidity sensor
  • MQ Gas sensor (analog)
  • Live updates every 1 second

• Premium Alert System

  • Repetitive beeping (800ms interval) when thresholds exceeded
  • Smooth screen flash animations
  • Visual indicators (red flashing borders on sensor tiles)
  • Configurable thresholds for all sensors
  • iOS Safari audio support with user gesture handling

• Responsive Design

  • Dark theme matching modern UI standards
  • Fully responsive for desktop, tablet, and mobile devices
  • Optimized for iPhone and iPad
  • Touch-friendly interface

• Smart Display

  • Anti-flickering using last known good values
  • Smooth progress bars for sensor readings
  • localStorage persistence for settings

📋 Hardware Requirements

• ESP8266 (NodeMCU v1.0 or compatible)
• DHT11 Temperature & Humidity sensor
• MQ Gas Sensor (analog output)
• Wiring:
  • DHT11 Data → D4 (GPIO2)
  • MQ Sensor → A0 (Analog input)
  • Power: 3.3V/5V and GND

🚀 Quick Start

1. Hardware Setup

ESP8266 Pin Connections:
├── DHT11
│   ├── VCC → 3.3V
│   ├── GND → GND
│   └── DATA → D4 (GPIO2)
└── MQ Sensor
    ├── VCC → 5V
    ├── GND → GND
    └── A0 → A0 (Analog)

2. Software Installation

Option A: Using Arduino CLI (Recommended)

1. Install Arduino CLI (if not already installed):

   brew install arduino-cli  # macOS

2. Install ESP8266 board support:

   arduino-cli core update-index
   arduino-cli core install esp8266:esp8266

3. Install required libraries:

   arduino-cli lib install "DHT sensor library"

4. Upload the code:

   ./upload.sh

Option B: Using Arduino IDE

1. Install ESP8266 Board Support:

   • Open Arduino IDE
   • Go to File → Preferences
   • Add to "Additional Board Manager URLs":

     https://arduino.esp8266.com/stable/package_esp8266com_index.json
     

   • Go to Tools → Board → Boards Manager
   • Search "ESP8266" and install "esp8266 by ESP8266 Community"

2. Install Library:

   • Go to Sketch → Include Library → Manage Libraries
   • Search "DHT sensor library" and install

3. Upload:

   • Open sketch_nov4a/sketch_nov4a.ino
   • Select board: Tools → Board → NodeMCU 1.0 (ESP-12E Module)
   • Select port: Tools → Port → (your ESP8266 port)
   • Click Upload

Option C: Using PlatformIO

1. Install PlatformIO (VS Code extension or CLI)

2. Build and Upload:

   pio run -t upload

3. Connect & Access

1. Connect to WiFi:

   • SSID: ESP_Sensor_Station
   • Password: stark954

2. Open Dashboard:

   • Navigate to: http://192.168.4.1
   • Works on any device (phone, tablet, computer)

📱 Usage Guide

Dashboard Overview

The dashboard displays three sensor readings:

• Temperature (°C) - from DHT11
• Humidity (%) - from DHT11
• Gas Level (0-1023) - from MQ analog sensor

Setting Up Alerts

1. Click "ALERTS" button to open alert settings
2. Toggle the switch to enable alerts
3. Configure thresholds:
   • Temperature Max: Maximum acceptable temperature
   • Humidity Min/Max: Acceptable humidity range
   • Gas Level Max: Maximum gas sensor reading
4. Settings are automatically saved to browser localStorage

Alert Behavior

When a threshold is exceeded:

• ✅ Immediate beep + screen flash
• ✅ Red flashing border on affected sensor tile
• ✅ Repetitive beeping every 800ms
• ✅ Screen flash with each beep
• ✅ Automatically stops when values return to normal

iOS Audio Setup

iOS Safari requires user interaction to enable audio:

1. Open the dashboard in Safari
2. Tap anywhere on the page (or any button)
3. Enable alerts using the toggle switch
4. You should hear a test beep when enabling alerts
5. Audio alerts will now work when thresholds are exceeded

Mobile Features

• Responsive layout adapts to screen size
• Touch-friendly buttons (minimum 44px)
• Full-screen dashboard on mobile
• Works offline (local network only)

⚙️ Configuration

WiFi Credentials

Edit in sketch_nov4a.ino:

const char* ssid = "ESP_Sensor_Station";
const char* password = "stark954";

Sensor Pins

Edit in sketch_nov4a.ino:

#define DHTPIN D4        // DHT11 data pin
// MQ sensor always uses A0

Update Intervals

const unsigned long readInterval = 1000; // Sensor read interval (ms)
// Polling interval in JavaScript: 1000ms

🔧 Troubleshooting

No WiFi Network Appearing

• Check ESP8266 power (LED should be on)
• Verify code uploaded successfully
• Check Serial Monitor for error messages
• Try resetting the ESP8266

Sensor Readings Show "--"

• Check DHT11 wiring (especially data pin connection)
• Verify sensor is powered (3.3V)
• DHT11 needs 1-2 second intervals between reads
• Check Serial Monitor for sensor errors

Audio Not Working (iOS)

• Tap the screen first to enable audio
• Check Safari permissions (Settings → Safari → Microphone)
• Ensure alerts are enabled (toggle switch)
• Try refreshing the page after tapping

Dashboard Not Loading

• Verify WiFi connection to ESP_Sensor_Station
• Check URL: http://192.168.4.1 (not HTTPS)
• Clear browser cache
• Try different browser

Flickering Values

• Already fixed with "last known good values" system
• If still occurring, check sensor connections
• May indicate intermittent sensor readings

📁 Project Structure

Sensors Project/
├── sketch_nov4a/
│   └── sketch_nov4a.ino      # Main Arduino sketch
├── src/
│   └── main.cpp              # PlatformIO version
├── sensor_dashboard.html     # Standalone demo version
├── platformio.ini           # PlatformIO configuration
├── upload.sh                # Automated upload script
├── UPLOAD_INSTRUCTIONS.md   # Detailed upload guide
└── README.md                # This file

🛠️ Development

Testing Locally

Use sensor_dashboard.html for testing UI changes:

open sensor_dashboard.html  # macOS
# or drag into browser

Building

# Using Arduino CLI
cd sketch_nov4a
arduino-cli compile --fqbn esp8266:esp8266:nodemcuv2 sketch_nov4a.ino

# Using PlatformIO
pio run

Uploading

# Automated script
./upload.sh

# Manual (Arduino CLI)
arduino-cli upload -p /dev/cu.YOUR_PORT --fqbn esp8266:esp8266:nodemcuv2 sketch_nov4a.ino

📊 Specifications

• ESP8266: NodeMCU v1.0 (ESP-12E)
• WiFi: 802.11 b/g/n
• AP Mode: Up to 4 clients
• Web Server: HTTP on port 80
• Update Rate: 1 second
• Sensor Read Interval: 1 second (DHT11 minimum)
• Dashboard: Responsive HTML5/CSS3/JavaScript

🔐 Security Note

The default WiFi password is stark954. Change this in production:

const char* password = "your-secure-password";

📝 License

This project is open source. Feel free to modify and use for your projects.

🤝 Contributing

Contributions welcome! Please feel free to submit issues or pull requests.

📧 Support

For issues or questions:

• Open an issue on GitHub
• Check Serial Monitor output for debugging
• Verify hardware connections match the wiring diagram

🎯 Future Enhancements

• Multiple sensor support
• Data logging to SD card
• MQTT integration
• OTA (Over-The-Air) updates
• Historical data charts
• Email/SMS notifications

---

Built with ❤️ for IoT enthusiasts