LuxReact + LuxConnect

LuxReact and LuxConnect are the recommended stack for new HMIs on B&R controllers. Both are written in TypeScript and are in active development, so their APIs may change before 1.0.

Package Repository What it does
@loupeteam/lux-react LuxReact React providers and hooks. Works with any transport that implements ICommLayer.
@loupeteam/lux-connect LuxConnect OPC UA client for B&R mapp Connect. Also usable without React, in Node.js or the browser.

The repository READMEs are the API reference. This page covers how the pieces fit together.

Installing

Both packages are published to GitHub Packages under the @loupeteam scope.

If you haven’t set up LPM yet, follow Getting started with LPM. It configures the GitHub registry and your token for you.

Run these in the HMI project folder, not in the Automation Studio project folder. If the folder is new, run lpm init first and answer n when it offers a starter AS project.

lpm init
lpm install lux-react lux-connect

LPM also installs react and react-dom.

Point the @loupeteam scope at GitHub Packages in an .npmrc file. GitHub Packages requires authentication even for public packages, so you also need a GitHub token with the read:packages scope. See Getting started with LPM for the .npmrc contents.

npm install @loupeteam/lux-react @loupeteam/lux-connect react react-dom

Minimal example

import { OpcuaMachine } from '@loupeteam/lux-connect';
import { MachineProvider, useVariable } from '@loupeteam/lux-react';

const machine = new OpcuaMachine({ host: '192.168.1.10', port: 8443, protocol: 'https' });

export function App() {
  return (
    <MachineProvider id="machine" machine={machine}>
      <Speed />
    </MachineProvider>
  );
}

function Speed() {
  const [speed, setSpeed, meta] = useVariable<number>('MotorTask:Motor.Speed', { defaultValue: 0 });
  return (
    <div>
      <p>Speed: {meta.loading ? '…' : speed}</p>
      <button onClick={() => setSpeed(1200)}>Set 1200</button>
    </div>
  );
}

Variable paths use B&R names: gGlobalVar.member for globals and Task:localVar.member for task-local variables.

Controller setup

LuxConnect needs mapp Connect enabled in the Automation Studio project:

  1. Add mapp Connect to the configuration and enable the OPC UA server.
  2. Mark the variables the HMI uses as visible in the OPC UA default view.
  3. Create users and roles under Access and Security. The HMI signs in with these users. See Users and login.
  4. Install a certificate for HTTPS. Generate your own in the project’s certificate store. Don’t reuse the example certificate from the LuxConnect repository, because its private key is public.

The LuxConnect repository includes an example Automation Studio project with this setup.

Starter template

Loupe projects can start from an internal starter template. It already includes a React app shell, an Electron wrapper, role-based screens, Piper command buttons, and an alarms page. Ask the HMI maintainers for access.

Known limitations

LuxConnect lists features that are still in progress in its README, including configurable automatic reconnect and batch reads and writes. Check that list before you rely on reconnect behavior on a production machine.