A zero-build, browser-ready demo of a SCADA Human-Machine Interface for factory monitoring
Quick Start · Features · Screenshots · Tech Stack · Glossary · Contributing
Mini SCADA HMI Dashboard is a zero-build, browser-ready simulation of an industrial Human-Machine Interface (HMI) for factory floor monitoring. It demonstrates SCADA concepts — alarm management, runbooks (SOPs), commissioning checklists (FAT/SAT), and real-time machine status — in a safe, offline-capable sandbox. Built for students learning industrial automation, developers exploring HMI/SCADA UI patterns, and trainers who need a demo environment without enterprise SCADA software. Runs directly from index.html with no server, no npm, and no bundler — all dependencies load via CDN.
SCADA = Supervisory Control and Data Acquisition · HMI = Human-Machine Interface
Getting started takes less than 30 seconds.
Option 1: Download and open (recommended)
- Click the green "Code" button → "Download ZIP"
- Unzip anywhere on your computer
- Double-click
index.html— that's it! 🎉
Option 2: Clone with Git
git clone https://github.com/chf3198/mini-scada-hmi-dashboard.git
cd mini-scada-hmi-dashboard
open index.html # macOS
xdg-open index.html # Linux
start index.html # Windows💡 Works via
file://protocol — no web server required!
|
Live machine status cards with health scores. Color-coded severity indicators (🔴 Critical → 🟢 OK). Animated charts for downtime and events. Automatic refresh during simulation. |
Severity-based event logging with one-click acknowledgment. Timestamp tracking with relative time display. Filter events by machine. |
|
Searchable troubleshooting guides with accordion-style expandable sections. Step-by-step procedures for common issues. Ready for your custom procedures. |
FAT/SAT-style validation checklists with progress bars. LocalStorage persistence (survives page refresh). JSON export/import for sharing. |
|
Start/stop realistic event generation with random alarm triggers and machine status changes. Perfect for demos and training. |
Dark mode for night shifts. Responsive design for tablets. Tooltips explain SCADA terminology. Built-in Help/User Manual page. |
|
📊 Overview Dashboard
Real-time machine status, KPIs, severity charts, and event log |
🔧 Machine Detail
Drill-down view with metrics, alerts, and quick actions |
📋 Runbooks (SOPs)
Searchable troubleshooting guides with step-by-step procedures |
✅ Commissioning Checklists
FAT/SAT validation with progress tracking and persistence |
❓ Help & User Manual
Built-in documentation with SCADA terminology and app guidance |
|
mini-scada-hmi-dashboard/
├── index.html # Entry point — just open this
├── assets/
│ ├── app.js # Main app logic, routing, views
│ ├── data.js # Seed data (machines, events, runbooks)
│ ├── utils.js # Helpers, simulation, persistence
│ ├── styles.css # Minimal custom styles
│ └── tests.js # Self-tests (run with ?test=1)
├── docs/
│ └── *.png # Screenshots
├── LICENSE
├── README.md
└── CONTRIBUTING.md
Total codebase: ~800 lines — small enough to read in an afternoon.
All dependencies load via CDN — no npm, no webpack, no bundlers.
| Library | Purpose | Why It Was Chosen |
|---|---|---|
| Tailwind CSS | Styling | Utility-first, no build required |
| Chart.js | Charts | Simple, beautiful, well-documented |
| Lucide Icons | Icons | Clean, open-source icon set |
| Tippy.js | Tooltips | Accessible, customizable |
| Alpine.js | Reactivity | Minimal declarative JS framework |
index.html?test=1
Open in your browser with the test flag above and check the console. All tests should pass.
| Customization | Difficulty | File to Edit |
|---|---|---|
| Add more machines | ⭐ Easy | assets/data.js |
| Create new runbooks | ⭐ Easy | assets/data.js |
| Change color scheme | ⭐ Easy | Tailwind classes in app.js |
| Add new dashboard views | ⭐⭐ Medium | assets/app.js |
| Connect to real MQTT broker | ⭐⭐⭐ Advanced | New integration needed |
| Add OPC-UA data source | ⭐⭐⭐ Advanced | Backend required |
This project is educational only. For real industrial deployments, you would need:
| Requirement | Description |
|---|---|
| OPC-UA / MQTT | Real protocol connections for live PLC data |
| Authentication | User login and role-based access (operators vs. admins) |
| Historian database | Store events and downtime in SQL/NoSQL for analysis |
| WebSockets | Push updates instead of polling |
| Backend API | Node.js or Python for data processing |
| Redundancy | High-availability architecture for critical systems |
Contributions are welcome — bug reports, feature suggestions, documentation improvements, and UI/UX enhancements. Read CONTRIBUTING.md before submitting a pull request.
PolyForm Noncommercial 1.0.0 — free for personal, educational, and non-commercial use. Commercial use requires a paid license. See COMMERCIAL-LICENSE.md or contact curtisfranks@gmail.com.
© 2026 Curtis Franks
New to SCADA? Here are the key terms:
| Term | Definition |
|---|---|
| SCADA | Supervisory Control and Data Acquisition — systems that monitor and control industrial processes |
| HMI | Human-Machine Interface — the screen operators use to interact with machines |
| PLC | Programmable Logic Controller — industrial computer that controls machinery |
| OPC-UA | Open Platform Communications Unified Architecture — industrial data exchange standard |
| FAT | Factory Acceptance Test — validation performed before shipping equipment |
| SAT | Site Acceptance Test — validation performed after installation on-site |
⭐ Found this useful? Give it a star!
Built with ❤️ for the industrial automation community