A chocolate plant in a browser tab.

Most of my work lives behind a plant firewall. The screens are the client’s, the data is the client’s, and a screenshot of an HMI says very little anyway. What matters on a real floor is how the system behaves: what an operator sees when something breaks, what they’re allowed to do about it, and whether the numbers afterwards still add up.

So I built a plant you can operate. Heuvelland is a fictional chocolate-bar factory with six areas, from the mixer to the palletizer, running entirely in your browser. There’s no backend and no real PLC; everything is simulated. The goal was never pretty screens. It was an HMI that behaves the way one should on a production floor.

A process, not a random-number generator

Mass flows Mixing → Refining → Conching → Tempering → Moulding → Line 3, and each area runs its own process. The mixer weigh-doses a 440 kg batch every 30 minutes. The conche runs a 6.5-hour cycle through fill, dry, pasty, liquefy and empty, each phase with its own temperature setpoint. Line 3 packs 36 cartons a minute and closes a pallet every 20.

The plant clock runs 60× real time: one second is one plant minute, so a full conche batch takes six and a half minutes to watch. Measurements carry noise and a first-order lag, so a setpoint change produces the curve you’d expect from a real loop rather than a jump. And areas depend on each other: stop the refiner and everything downstream runs dry.

The standards are the design spec

The quickest way to make a demo feel real was to follow the standards real plants are held to.

• ISA-5.1 naming. Every instrument has a loop tag (TI-310, XV-101, WI-631) and every area its drawing, from PID-000 to PID-600.
• ISA-88 and PackML states. Process units run the ISA-88 model (Start, Hold, Restart, Stop, Reset); the moulder and packaging line run PackML. A fault latches the unit in ABORTED or HELD, and it stays there until the operator brings it back. You can’t restart while the fault condition is still active.
• ISA-18.2 alarms. Three priorities; unacknowledged, acknowledged and returned-to-normal states; one-hour shelving; a first-out marker; and consequential alarms suppressed while their root cause is active, so a single failure doesn’t bury the operator in follow-on alarms.
• ISA-101 display. High-performance HMIs keep normal operation grey so abnormal states stand out. I went hybrid: normal values are neutral, colour means something is wrong, and green is kept for a single meaning, a unit that is running.

What an operator can do

Every area has its unit controls in the toolbar and a faceplate for whatever tag you select. Setpoints can be written from the faceplate in two steps (Write, then Confirm), range-checked and logged. Each faceplate carries an hour of trend with the setpoint, the alarm limits and a marker wherever an alarm came in or cleared. Every action lands in an events journal stamped with plant time.

The simulator can also break things on purpose: a stuck valve, a tripped agitator, a jammed cartoner. Or quieter failures, like a transmitter going bad: its value freezes at the last reading, quality drops to Bad and the trend flatlines. That one is worth seeing, because a flat line on a trend doesn’t always mean a stable process.

The MES layer on top

SCADA shows what’s happening; MES accounts for what got made. The plant runs a master recipe, Dark 70 %, which sets the mixer doses and the targets. Select any batch and you get its genealogy: the raw-material lots that went in, its route through each area with times, a quality check per step taken from the historian, and the pallets that came out.

OEE is computed rather than displayed: availability × performance × quality, booked minute by minute over an eight-hour shift. Every minute the line isn’t producing is booked against a reason, whether that’s the fault that latched a unit upstream or an operator hold, and the reasons roll up into a downtime Pareto. That’s the chart a production meeting actually argues about.

What it leaves out

It’s a model, and it cuts corners where a demo can. There’s no PLC, no network and no real historian behind it; the trend buffer lives in the page. Batches move through the areas on a fixed 15-minute schedule, even while an area is held, and there’s a single recipe. The aim was the behaviour an operator sees and the structure behind it, not a process simulation you could tune a real conche with.

How it’s built

Plain JavaScript modules, no framework: the simulation, the unit state machines, the alarm engine, OEE accounting, the faceplate and the SVG drawings each live in their own file. Plant state is kept in the browser, so the shift carries on where you left it. A headless-browser smoke test in CI walks every drawing and a full fault-to-recovery cycle on each push, so the plant keeps working as it grows.