Loupe UX classic (deprecated)

Loupe UX classic is deprecated. Existing HMIs remain supported, but start new HMIs on LuxReact + LuxConnect, and see Migrating to LuxReact to move an existing one.

Loupe UX is the original Loupe web HMI library. You build pages in HTML and connect elements to PLC variables with attributes. It needs no build step and no JavaScript framework beyond jQuery.

Architecture

flowchart TD subgraph Page["Browser or Electron"] HTML["HTML elements
data-var-name"] --> DB[lux-data-bind.js] DB --> M[lux.js
LUX.Machine] end M <-->|"JSON over WebSocket"| OM[OMJSON
on the B&R PLC] M <-->|"JSON over WebSocket"| LS[Loupe UX Server
Windows PC] <-->|ADS| TC[(TwinCAT 3)]
Component Runs on Documentation
Loupe UX (lux.js, lux-data-bind.js, lux.css) Browser or Electron Loupe UX Web Client
Tmplits (optional) Browser or Electron Tmplits
OMJSON B&R controller OMJSON
Loupe UX Server Windows PC with an ADS route to a Beckhoff controller Loupe UX Server below

Loupe UX scans the page for elements with data-var-name and reads those variables over a WebSocket. Call LUX.updateHMI() on a timer to refresh the page. Use read groups to limit how much is read and how often.

Setting up on B&R

  1. Add OMJSON to the Automation Studio project with LPM: lpm install omjson.
  2. In the HMI folder, install Loupe UX with LPM: lpm install loupe-ux.
  3. Follow Getting Started to add the scripts to your page and bind your first elements.

To develop without a controller, install the simulated PLC backend with lpm install plc-sim.

Loupe UX Server

Loupe UX Server is a Windows program that speaks the same JSON protocol as OMJSON and translates it to ADS, so a Loupe UX HMI can run against a Beckhoff controller without changes to the page.

Requirements:

  • TwinCAT 3, for the ADS DLL in C:\TwinCAT\AdsApi\TcAdsDll
  • A Windows PC with an ADS route to the controller. This can be the controller itself.

To run it:

  1. Download luxserver.zip from the releases page, or build from source with CMake as described in the repository README.
  2. Edit configuration.json: set the controller’s AMS Net ID and the ADS port. TwinCAT PLC runtime 1 uses port 851.
  3. Run server.exe. It logs a message when it connects to the controller.

Users and login

Loupe UX keeps a numeric user level and locks or hides elements below it. See Level-Based Control.

The level can come from:

  • The application, by calling machine.setUserLevel().
  • A PLC variable, by calling machine.setUserLevelPV('task:userLevel'). See Setting the User Level.

To check passwords on the controller, use the pattern in LUX-UserLoginSystem. The HMI sends a login request, the PLC checks the credentials against the B&R user system, and the PLC writes back a user level that Loupe UX reads.

The user level is enforced in the browser, not on the controller. Treat it as a way to guide operators, not as security, and limit network access to the controller accordingly.