Data Binding
Loupe UX data binding allows you to link machine data directly to HTML elements without writing custom JavaScript. It does this through a combination of classes and custom attributes. The LUX.updateHMI() function will update all of the HTML elements bound to machine variables. Typically, this function will be called cyclically with a set update rate.
// Update HMI every 100 ms
setInterval(LUX.updateHMI, 100)
Bound elements have attributes that specify the machine and variable to which to bind.
| Global Attribute | Description | Default Value |
|---|---|---|
| data-machine-name | Name of the global JavaScript variable that represents the machine | machine |
| data-var-name | Name of the machine variable to link to the HTML element. Local variables must be prefixed by the task name and a colon (e.g. “globalVar”, “task:localVar”) |