HMI

Loupe web HMIs run in a browser or an Electron window and read and write PLC variables by name.

Which one do I use?

Your situation Use
New HMI on a B&R controller LuxReact direct to B&R
New HMI on a Beckhoff or other OPC UA controller LuxReact through OPC UA Proxy (experimental, not yet validated on TwinCAT)
Maintaining an existing Loupe UX or Tmplits HMI Loupe UX classic (deprecated), and plan a migration
A Node.js tool or test script that talks to a B&R controller LuxConnect on its own

The controller decides between the two LuxReact options. They use the same HMI code; only the gateway differs.

LuxReact direct to B&R

For: B&R controllers. Status: supported.

The HMI connects straight to B&R mapp Connect on the controller. Nothing extra runs on the PLC or beside it.

flowchart LR R[React app] --> LR[LuxReact] --> LC[LuxConnect] -- "HTTPS + WebSocket" --> MC[mapp Connect] --> BR[(B&R PLC)]

Get started: LuxReact + LuxConnect.

LuxReact through OPC UA Proxy

For: controllers without mapp Connect, such as Beckhoff TwinCAT. Status: experimental, not yet validated on TwinCAT.

OPC UA Proxy offers the same API as mapp Connect and forwards requests to the controller’s OPC UA server, so the HMI code doesn’t change. It runs as a service on a PC or inside the HMI’s Electron app.

flowchart LR R[React app] --> LR[LuxReact] --> LC[LuxConnect] -- "HTTPS + WebSocket" --> P[OPC UA Proxy] -- "OPC UA" --> S[OPC UA server] --> PLC[(Beckhoff or other PLC)]

The proxy doesn’t replace the direct connection. On a B&R controller, always connect directly to mapp Connect.

Learn more: Gateways and Platform support.

Loupe UX classic

For: maintaining existing HMIs. Status: deprecated.

Plain HTML with jQuery, talking to OMJSON on a B&R controller or to Loupe UX Server for a Beckhoff controller.

flowchart LR H[HTML page] --> LUX[Loupe UX] -- "JSON over WebSocket" --> G{Controller} G -- B&R --> OM[OMJSON] --> BR[(B&R PLC)] G -- Beckhoff --> LS[Loupe UX Server] -- ADS --> TC[(Beckhoff PLC)]

Everything about this option is on one page: Loupe UX classic.

Side by side

LuxReact direct to B&R LuxReact through OPC UA Proxy Loupe UX classic
UI technology React and TypeScript React and TypeScript HTML, jQuery, optional Tmplits
Data binding Hooks such as useVariable Hooks such as useVariable HTML attributes such as data-var-name
Gateway mapp Connect, on the controller OPC UA Proxy, on a PC or in Electron OMJSON or Loupe UX Server
Users and roles OPC UA users and roles OPC UA users and roles User level set by the app or read from a PLC variable

In this section