DEV Community

Александр Ларионов
Александр Ларионов

Posted on • Originally published at larionovavi-stack.github.io

I Built a Full Industrial SCADA System That Runs From a Single HTML File

#scada #javascript #python #opensource

How a single HTML file replaces million-dollar SCADA software

After 20+ years in industrial automation — working with PLCs, RTUs, SCADA systems, and digital substations — I was frustrated. Every SCADA platform I used required:

  • Heavy installation (2-4 GB)
  • Dedicated server infrastructure
  • Annual license fees ($5,000-50,000/year)
  • Vendor lock-in
  • Windows-only deployment

So I built BitSCADA — a complete industrial SCADA system that runs entirely from a single HTML file. Open it in Chrome, Firefox, or Safari — and you have a fully functional SCADA with real-time visualization, function blocks, and industrial protocol support.

BitSCADA Overview

What makes it unique?

1. Literally one file

The entire SCADA — graphic editor, runtime engine, 53 function blocks, 65 graphic elements — lives inside a single HTML file (~240 KB online, ~3 MB offline with embedded React). No installation. No server. No database server (SQLite is built into the Gateway).

2. Full IEC 61850 support in a browser

This is the part I'm most proud of. No other browser-based SCADA supports IEC 61850. BitSCADA implements:

  • MMS client — read/write data objects, datasets, reports
  • GOOSE subscriber — real-time event subscription
  • Sampled Values receiver — phasor measurement streams

This means you can connect to digital substations directly from your browser.

3. 9 industrial protocols 

IEC 61850 (MMS, GOOSE, Sampled Values)
OPC UA (browsing, subscriptions, read/write)
OPC DA (via COM/DCOM bridge)
Modbus TCP (holding/input registers, coils)
MQTT
SNMP
REST API (15 endpoints)
WebSocket (real-time)
Custom protocols via Python Gateway
Enter fullscreen mode Exit fullscreen mode

4. 53 function blocks

Not just visualization — BitSCADA has a complete FBD (Function Block Diagram) engine:

  • Logic: AND, OR, NOT, XOR, SR flip-flop, edge detectors
  • Math: add, subtract, multiply, divide, abs, min, max, formula
  • Timers: on-delay, off-delay, pulse
  • Counters: up, down, up/down with preset
  • PID controller with anti-windup
  • Filters: exponential, sliding window, RMS
  • Comparators, limiters, multiplexers
  • Database write, alarm generators, signal generators

Runtime Mode

5. 65 graphic elements

Drag & drop from the palette:

  • Process equipment: pumps, motors, fans, compressors, conveyors
  • Valves: gate valves, ball valves, check valves, control valves
  • Vessels: tanks, columns, separators, heat exchangers
  • Piping: horizontal/vertical pipes, elbows, tees, reducers
  • Electrical: contactors, fuses, transformers, grounding
  • Sensors: pressure, temperature, level, flow meters
  • Indicators: gauges, bar charts, traffic lights, lamps
  • Displays: trends, sliders, buttons, switches

Mimic Diagram

Architecture

The system has two components:

Browser (any modern browser)
└── BitSCADA HTML file
        ├── Graphic Editor (drag & drop, multi-page, popups)
        ├── Runtime (fullscreen, password protection, alarms)
        ├── Function Block Engine (53 blocks, 100ms cycle)
        └── WebSocket ←→ SCADA Gateway (Python)
                            ├── IEC 61850 (asyncua + custom)
                            ├── OPC UA (asyncua library)
                            ├── Modbus TCP (pymodbus)
                            ├── MQTT / SNMP
                            ├── SQLite Database
                            └── REST API (15 endpoints)
Enter fullscreen mode Exit fullscreen mode

The Browser handles all visualization and logic. The Python Gateway handles protocol communication and database storage. They communicate via WebSocket.

Performance

Metric Value
Scan rate 10,000 tags/sec
Update cycle 100 ms minimum
Parallel threads 4
Browser tabs 8
Startup time < 3 seconds
File size 240 KB (online) / 3 MB (offline)

Tech stack

  • Frontend: React 18, JSX, Babel (transpiled in-browser)
  • Backend: Python 3.10+, asyncio, aiohttp
  • Protocols: asyncua (OPC UA), pymodbus, custom IEC 61850
  • Database: SQLite3
  • Build: Custom Python build script, Base64 encoding, XOR protection

The build process

One thing I'm particularly proud of is the build system. The JSX source (~175 KB) gets:

  1. Base64 encoded
  2. SHA256 integrity hash computed
  3. XOR-encrypted author watermark embedded
  4. Unique Build ID and License Key generated
  5. Everything injected into the HTML template

The result is a self-contained, tamper-protected HTML file that works offline.

Try it yourself

🌐 Live Demo & Documentation

📥 Download Free Demo — 2-hour trial, no registration

💻 GitHub Repository

💰 Buy Full Source Code — complete source with build system

About me

I'm an industrial automation engineer (IACS/SCADA) with 20+ years of experience:

  • Process automation systems design and deployment
  • PLC/RTU programming and commissioning
  • Network equipment configuration (Cisco, MikroTik, Huawei)
  • SCADA/HMI development and integration
  • IEC 61850 digital substation projects
  • Technical documentation per industrial standards (GOST, IEC)
  • Full-stack development (Python, JavaScript, React)
  • AI/ML engineering (PyTorch, custom model training)
  • AutoCAD, electrical schematics design

I built BitSCADA because I needed a lightweight, portable SCADA that I could deploy anywhere — from a USB stick at a remote substation to a tablet on the factory floor.

What's next?

I'm currently working on:

  • Genesis-1 — an AI model trained on 32 IT specializations that can autonomously manage infrastructure
  • Expanding BitSCADA protocol support
  • Mobile-optimized runtime

What do you think? Would you use a browser-based SCADA in your projects? Let me know in the comments!

Top comments (0)