Migrating to LuxReact

Info

This guide is a starting point. It will grow as HMIs are migrated.

Moving from Loupe UX classic to LuxReact is a rewrite of the UI, plus a change on the controller. Plan it as a project, not an upgrade.

Controller changes

On B&R:

  1. Enable mapp Connect and the OPC UA server. See LuxReact + LuxConnect.
  2. Make every variable the HMI uses visible over OPC UA.
  3. Move user handling to OPC UA users and roles. See Users and login.

On Beckhoff, the target is OPC UA Proxy with the TwinCAT OPC UA server. That path is experimental, so keep Loupe UX Server running until it is validated on your controller.

Concept map

Loupe UX classic LuxReact + LuxConnect
var machine = new LUX.Machine() new OpcuaMachine({...}) passed to <MachineProvider>
data-var-name="Task:var" on an element useVariable('Task:var') in a component
lux-btn-set, lux-btn-toggle A button that calls the setter from useVariable
lux-btn-momentary useMomentary
Write-only element useWrite
machine.initCyclicRead('Struct') useParent('Struct', { mode: 'always' })
data-read-group Mounting and unmounting components; subscriptions follow what is on screen
LUX.updateHMI() on a timer Not needed; values update on subscription changes
User level from setUserLevelPV Roles from machine.getSessionInfo()

Suggested order

  1. Rebuild one page in LuxReact against a simulator, using the concept map.
  2. Run the old and new HMIs side by side against the same controller and compare values.
  3. Move the remaining pages, then the login flow.
  4. Switch the machine over, then remove OMJSON or Loupe UX Server once nothing else uses it.