DEV Community

Ekong Ikpe
Ekong Ikpe

Posted on

Replacing $5,000 of industrial equipment with a browser tab

#webdev #javascript #opensource #automation

Why Your Next Industrial HMI Should Just Be a Browser Tab

A standard industrial signal tower setup can cost around $15,000 once you factor in the HMI panel, the physical tower, and the proprietary software licenses that tie them together.

I rebuilt that same functionality in a browser tab.

The demo runs on your phone’s flashlight to prove the concept. The same Web Serial and WebUSB APIs that control a smartphone torch can also control real PLCs, relay boards, and industrial signal towers.

The $15,000 Problem: Vendor Lock-in

Industrial Human-Machine Interface (HMI) panels are expensive for reasons that have little to do with hardware.

When you buy one, you are not just buying a screen. You are paying for:

  • Proprietary OS: A black box that no one else supports
  • Walled garden: A vendor-specific programming environment
  • License fatigue: Fees per seat, per version, per upgrade
  • The downtime trap: A 6-8 week lead time when a screen breaks

And the screen always breaks.

When it does, production stops while you wait for a vendor who knows you have no alternative. That is the real cost - not the unit price, but the forced friction.

The Shift: The Browser as a Universal HMI

Modern browsers already ship with APIs that industrial vendors charge thousands of dollars to replicate.

Requirement Industrial Solution Browser Equivalent
Display $3,000+ HMI Panel Any device with Chrome/Edge
Serial Comms Proprietary Driver Web Serial API
USB Control Custom SDK WebUSB API
Camera/Torch N/A getUserMedia + constraints
Offline Ops Local runtime install Service Workers + PWA
Deployment IT ticket + vendor Paste a URL

SignalTower is a proof of concept built on this shift.

It is an Andon-style stack light controller (Red, Amber, Green) with four operating modes and twelve timed patterns, installable in seconds on almost any device.

Architecture: Vanilla JS, No Build Step

To keep the system resilient and "Raspberry Pi friendly", I used:

  • Zero frameworks
  • Zero dependencies
  • Zero build process

Stack

  • Core: HTML5, CSS3, Vanilla JS
  • Persistence: localStorage
  • Hardware output:
    • getUserMedia (torch)
    • Web Audio API (alerts)
  • UX: Vibration API
  • Reliability: Service Workers (offline PWA)

Structure 

state.js   -> runtime state (single source of truth)
theme.js   -> theme + anti-FOUC
ui.js      -> toasts, modals, status UI
tower.js   -> signal logic + pattern engine
update.js  -> version check
app.js     -> bootstrap + DOM wiring
Enter fullscreen mode Exit fullscreen mode

app.js is the only file that touches DOM events.

Everything else exposes a clean API. That makes the system portable, predictable, and easy to drop into embedded environments.

The Hardware Trick: Using the Torch

The demo uses the phone’s camera torch as a stand-in for real hardware.

const stream = await navigator.mediaDevices.getUserMedia({
  video: { facingMode: "environment" }
});

const track = stream.getVideoTracks()[0];

await track.applyConstraints({
  advanced: [{ torch: true }]
});
Enter fullscreen mode Exit fullscreen mode

No video is recorded or displayed.

The track is simply a handle to hardware.

Swap this with a Web Serial write to a relay board, and you are controlling a 24V industrial signal tower with the same logic.

Deployment: Where This Actually Wins

Because SignalTower is a Progressive Web App (PWA), deployment is trivial.

When a device fails on the factory floor:

  • Replace it with any cheap tablet
  • Open the URL
  • Add to home screen

That is it.

The Service Worker loads the app offline, and localStorage restores the configuration.

Recovery time drops from weeks to minutes.

No vendor calls. No licensing. No installation.

The Safety Question

The obvious concern:

"Anyone can deploy a control UI from a URL. That is dangerous."

This mixes up interface with control authority.

In real industrial systems:

  • PLC logic handles safety decisions
  • Physical interlocks enforce hard limits
  • Network isolation restricts access

The UI is just a surface.

This approach does not remove safety layers. It removes expensive, proprietary interfaces sitting in front of them.

Try It

SignalTower also runs inside GnokeStation, a browser-based environment for running multiple industrial tools on a single screen.

Final Thought

If a browser can:

  • Talk to serial devices
  • Control USB hardware
  • Work offline
  • Run on anything

Then the real question is:

Why are we still paying thousands for dedicated HMI panels?

Looking for feedback:

If you work in embedded systems, PLCs, or industrial automation:

  • Where would this fail in a real deployment?
  • Where could it replace existing systems today?

I am especially interested in edge cases and real-world constraints.

Top comments (0)