IoT Monitoring Dashboard

A visually stunning, real-time IoT device monitoring dashboard with multiple device management capabilities. Built with modern web technologies for comprehensive device monitoring and analytics.

🚀 Features

Dashboard Overview

• Real-time Monitoring: Live updates of current, voltage, temperature, power consumption, and efficiency metrics
• Interactive Charts: Dynamic data visualization using Chart.js with multiple time ranges (1H, 6H, 24H, 7D)
• Device Status Tracking: Online/offline/warning status indicators for all connected devices
• System Health Overview: Overall system status with uptime monitoring

Device Management

• Individual Device Pages: Detailed monitoring pages for each IoT device
• Device-Specific Analytics: Historical data and trend analysis per device
• Alert Configuration: Customizable alert thresholds for temperature, voltage, and power
• System Logs: Comprehensive logging with different severity levels
• Troubleshooting Tools: Built-in troubleshooting assistance for offline devices

Visual Design

• Modern UI/UX: Cyberpunk-inspired dark theme with gradient backgrounds
• Responsive Design: Fully responsive layout that works on desktop, tablet, and mobile
• Smooth Animations: CSS animations and transitions for enhanced user experience
• Interactive Elements: Hover effects, ripple animations, and visual feedback

📁 Project Structure

iot-monitoring-dashboard/
├── index.html          # Main dashboard page
├── device1.html        # Server device monitoring page
├── device2.html        # Desktop device monitoring page
├── device3.html        # Mobile device monitoring page
├── styles.css          # Complete styling and responsive design
├── script.js           # Main dashboard functionality
├── device.js           # Device-specific monitoring features
└── README.md           # Project documentation

🛠️ Technologies Used

• HTML5: Semantic markup with modern HTML5 features
• CSS3: Advanced styling with CSS Grid, Flexbox, and animations
• JavaScript (ES6+): Modern JavaScript with class-based architecture
• Chart.js: Interactive charts and data visualization
• Font Awesome: Icon library for UI elements

🚀 Getting Started

Prerequisites

• Any modern web browser (Chrome, Firefox, Safari, Edge)
• Local web server (optional, for better performance)

Installation

1. Clone or download the project files to your local machine

2. Open the dashboard:

   • Simply open index.html in your web browser
   • Or use a local server for better performance

3. Access the application:

   • Open your browser and navigate to http://localhost:8000
   • The dashboard will load with real-time data updates

📊 Dashboard Features

Main Dashboard

• Overview Cards: Current status of all monitored parameters
• Real-time Charts: Live updating current/voltage and power consumption charts
• Device Grid: Visual representation of all connected devices
• Navigation: Seamless navigation between different sections

Device Pages

Each device has its own dedicated monitoring page with:

• Device Information: Detailed specs and connection info
• Real-time Metrics: Live current, voltage, temperature, and power readings
• Historical Charts: 24-hour data visualization
• System Logs: Chronological event logging
• Alert Management: Configure monitoring thresholds

🎨 Customization

Styling

The dashboard uses CSS custom properties (variables) for easy theming:

:root {
    --primary-bg: #0f0f23;
    --accent-blue: #00d4ff;
    --accent-cyan: #00ffcc;
    --success-green: #00ff88;
    --warning-yellow: #ffaa00;
    --error-red: #ff073a;
    /* ... more variables */
}

Adding New Devices

To add a new device:

1. Create a new HTML file (e.g., device4.html)
2. Copy the structure from existing device pages
3. Update the device ID and specifications
4. Add navigation link in index.html

Modifying Metrics

Real-time data can be customized in the JavaScript files:

// In script.js - updateMetrics() method
const currentValue = (10 + Math.random() * 5).toFixed(1);
const voltageValue = (218 + Math.random() * 4).toFixed(1);
// Modify ranges and calculations as needed

🔧 Configuration

Update Intervals

Modify the real-time update frequency:

// In script.js - startRealTimeUpdates() method
this.updateInterval = setInterval(() => {
    this.updateCharts();
    this.updateMetrics();
    this.updateDeviceStatuses();
}, 3000); // Change 3000ms to desired interval

Chart Configuration

Customize chart appearance and behavior in the initCharts() methods.

📱 Responsive Design

The dashboard is fully responsive with breakpoints at:

• Desktop: 1200px and above
• Tablet: 768px - 1199px
• Mobile: 480px - 767px
• Small Mobile: Below 480px

🌟 Key Features in Detail

Real-time Updates

• Dashboard updates every 3 seconds
• Device pages update every 5 seconds
• Smooth transitions and animations

Interactive Charts

• Multiple time range options
• Hover tooltips with data details
• Responsive chart resizing

Device Status Management

• Online: Active devices with real-time data
• Warning: Devices with parameter threshold breaches
• Offline: Disconnected devices with troubleshooting tools

Alert System

• Temperature threshold monitoring
• Voltage fluctuation detection
• Power consumption alerts
• Customizable alert levels

🚨 Troubleshooting

Common Issues

Charts not loading:

• Ensure Chart.js is loaded from CDN
• Check browser console for JavaScript errors

Real-time updates not working:

• Verify local server is running (file:// protocol may block intervals)
• Check browser console for errors

Styling issues:

• Ensure styles.css is properly linked
• Clear browser cache if needed

Browser Compatibility

• Chrome: Full support (recommended)
• Firefox: Full support
• Safari: Full support
• Edge: Full support
• IE11: Limited support (some features may not work)

🔒 Security Considerations

This is a client-side application intended for:

• Local network monitoring
• Development and testing environments
• Educational purposes

For production use:

• Implement server-side data validation
• Add authentication and authorization
• Use secure WebSocket connections for real-time data
• Implement data encryption

📈 Performance Optimization

Recommendations

• Use a local web server instead of file:// protocol
• Minimize browser console logs in production
• Optimize chart rendering for large datasets
• Implement data pagination for long time ranges

🤝 Contributing

To contribute to this project:

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

📄 License

This project is open source and available under the MIT License.

🙏 Acknowledgments

• Chart.js for excellent charting capabilities
• Font Awesome for the comprehensive icon library
• Modern web standards that make this possible

---

Built with ❤️ for IoT monitoring and device management