Appearance
Component reference
A component is the smallest building block of a Raylux screen — a label, a button, a tank, a container. Every component has a fixed set of properties (its static configuration, such as a min/max range or a color) and, for most, a binding: a live connection from one property to a tag, an expression, or another component's property, so the component reflects — and for writable controls, changes — a real process value. See Build the screen for how components, properties and bindings fit together while authoring a screen.
Components are grouped in the Studio palette into three categories; a fourth group below lists component types that exist in the product but are not offered directly from the palette in this version.
Components
| Component | Summary |
|---|---|
| Label | Displays static or bound text, optionally formatted. |
| Button | A clickable control that writes a value to a tag when pressed. |
| Progress Bar | A horizontal bar that fills to show where a value sits between a minimum and a maximum. |
| Trend Chart | Plots one or more tags' historical values over a selectable time range. |
| Gauge | An analog radial dial showing a single process value against a fixed range. |
| Status Indicator | A colored dot with a caption showing an ON/OFF process state. |
| Toggle | A pill-style switch that reflects and writes a two-state tag. |
| Slider | A draggable control that reads and writes a numeric setpoint within a range. |
| Alarm Table | A live table of active alarms, or a historical alarm journal. |
| Icon | A Material Symbols glyph, colored and sized by the component's style. |
| Image | Displays a project asset or same-origin image. |
| SVG Drawing | A vector drawing built from a data-described element tree, with per-element bindings. |
| Embedded View | Renders another screen inline, scaled to fit the component's box. |
| Flex Repeater | Instances another screen once per entry in a bound or authored array, laid out in a row or column. |
| Report Viewer | Renders a Nexus report inline as a PDF, with an optional run-history list. |
Symbols
| Component | Summary |
|---|---|
| Tank | A vessel-shaped analog level indicator. |
| Motor | A smart-object symbol showing a motor's Stopped / Running / Fault state. |
| Pump | A smart-object symbol showing a pump's Stopped / Running / Fault state. |
| Valve | A smart-object symbol showing a two-port valve's Closed / Open / Fault state, with optional partial-travel position. |
| Multi-Port Valve | A smart-object symbol for a 3-way or 4-way valve, showing which ports are currently connected. |
Containers
| Component | Summary |
|---|---|
| Coordinate | The free-positioning root container — children are placed by explicit X/Y coordinates. |
| Flex Row | A container that lays its children out left-to-right using CSS flexbox. |
| Flex Column | A container that lays its children out top-to-bottom using CSS flexbox. |
| Tab | A container that shows one child pane at a time, selected by a row of tab buttons. |
Not in the palette
| Component | Summary |
|---|---|
| Moving Analog Indicator | A linear pointer-on-a-track indicator showing a process value in context, with an optional desired-operating band, setpoint marker, and up to four alarm limits. |
| Text Input | An editable text field that reads and writes a tag on commit. |
| Value Display | A read-only numeric or text readout with a caption and unit. |
| Multistate Label | A colored chip that shows one of a fixed list of named states, selected by a numeric value. |
| Pipe | A two-tone process pipe drawn as a polyline, with optional animated flow. |
| P&ID Line | A simple P&ID schematic line, drawn as a polyline with optional arrowheads. |
| Mimic Pipe | A realistic pipe with flange fittings, drawn as a polyline with optional animated flow. |