Functional explanation
LabelObject displays static text or live variable values. Internally it behaves like a textarea, so the visible result depends heavily on the chosen width, height, padding, and font settings.
It is commonly used for captions, value displays, status text, engineering units, and other text that must be visible on a page without a full input control.
Leave enough height for bold or larger fonts. A label that looks correct in edit mode can clip in runtime if the line height or padding is too small.
Object name
Set the object name shown in the label decorator context.
| Setting | Description | Example | Units |
|---|---|---|---|
| Object Name | Name used to identify the Label object. | StatusLabel | Text |
No rows match the filter.
Variable / Expression
Configure the expression that supplies the live label text.
| Setting | Description | Example | Units |
|---|---|---|---|
| Variable / Expression | Expression used to supply the visible label text. | PLC1.StatusText | Expression |
No rows match the filter.
Label
Configure the label text shown when a fixed label is needed.
| Setting | Description | Example | Units |
|---|---|---|---|
| Label | Static label text shown by the Label object. | Pump status | Text |
No rows match the filter.
Text
Configure the text appearance and colors used by the Label object. The Color and Background Color settings are the base colors. Color states override the base color only while a condition matches, so a label without color states keeps its configured colors.
| Setting | Description | Example | Units |
|---|---|---|---|
| Color | Text color used for the label. | #212529 | Color |
| Text Color States | Conditional text color states. The Text Color setting is the base color, a state overrides it only while its condition matches, and the last matching condition wins. | [{"condition":"Pump1_Fault == 1","color":"#dc3545"}] | JSON array |
| Background Color | Background color used behind the label. This is the base color when background color states are used. A gradient can be used here as well as a single color; see the Gradients section of the Color Library article. | #FFFFFF | Color |
| Background Color States | Conditional background color states. The Background Color setting is the base color, a state overrides it only while its condition matches, and the last matching condition wins. A gradient can be used here as well as a single color; see the Gradients section of the Color Library article. | [{"condition":"Pump1_Fault == 1","color":"#dc3545"}] | JSON array |
| Font Family | Font family used for the label text. | Arial | Font family name |
| Font Align | Horizontal alignment of the label text: Left, Center or Right. | Left | Selection |
| Font Size | Font size used for the label text. A number without a unit is applied in px. | 14 | px |
| Font Weight | Font weight used for the label text. | 700 | CSS font weight |
| Padding | Space between the border and the label text. Enter one to four values in the order top, right, bottom, left, for example 4 8 for 4 px at the top and bottom and 8 px at the left and right. A number without a unit is applied in px. The top and bottom padding reduce the height available for the text, so increase the Height of the object by the same amount. | 4 8 | px |
No rows match the filter.
Position / Size
Configure the position and size of the Label object.
| Setting | Description | Example | Units |
|---|---|---|---|
| Top | Top position of the object. | 100 | px |
| Left | Left position of the object. | 220 | px |
| Width | Width of the object. | 240 | px |
| Height | Height of the object. | 32 | px |
| Z-index | Layer order of the object. Higher values appear in front of lower values. | 10 | Number |
No rows match the filter.
Individual
Configure the display and formatting options for the Label object.
| Setting | Description | Example | Units |
|---|---|---|---|
| Read Only | Keeps the label display-only. A read only label that has no actions of its own passes clicks through to the object behind it in runtime, so a label placed over a button or a shape does not block that object's action. A label that has its own actions keeps receiving its clicks. In the graphics builder the label always stays selectable. | true | Boolean |
| Units | Appends the configured variable unit when enabled. | true | Boolean |
| Floating Point | Treats the value as a floating-point number and shows it with the number of Decimals. When off, a value from one variable is shown with the Format of that variable when the variable has one. | true | Boolean |
| Decimals | Number of decimals used for numeric display when Floating Point is on. It overrides the Format of the variable for this label. | 2 | Number |
| Numpad | Enables the on-screen numpad for input-style editing. | false | Boolean |
| Decimal Symbol | Enables the decimal symbol on the numpad. | true | Boolean |
| Minus Symbol | Enables the minus symbol on the numpad. | true | Boolean |
No rows match the filter.
Actions
Configure the action list executed when the label is clicked.
| Setting | Description | Example | Units |
|---|---|---|---|
| Actions | Action list executed when the label is clicked. | Open page, open popup, write variable | Action configuration |
No rows match the filter.
Animate Position / Size
Configure the runtime animation settings for height, width, top, and left.
22 rows
| Setting | Description | Example | Units |
|---|---|---|---|
| Animate Height Variable | Variable or expression that drives runtime height animation. | PLC1.Level | Variable or expression |
| Animate Height Minimum Raw | Start of the raw value span. The animation scales the variable value across the difference between Maximum Raw and Minimum Raw, so keep this at 0 for a direct mapping from 0 to the Maximum Raw value. | 0 | Raw value |
| Animate Height Maximum Raw | End of the raw value span. The animated height reaches full scale when the variable value reaches the difference between Maximum Raw and Minimum Raw. | 100 | Raw value |
| Animate Height Minimum px | Start of the pixel span. The animated height runs from 0 px up to the difference between Maximum px and Minimum px. | 20 | px |
| Animate Height Maximum px | End of the pixel span. With Minimum px at 0, this is the height at full scale. | 60 | px |
| Animate Height Reverse | Sets the edge the height grows from. Cleared grows the object upwards from the bottom edge, which suits level and fill graphics. Selected grows it downwards from the top edge. | false | Boolean |
| Animate Width Variable | Variable or expression that drives runtime width animation. | PLC1.Value | Variable or expression |
| Animate Width Minimum Raw | Start of the raw value span. The animation scales the variable value across the difference between Maximum Raw and Minimum Raw, so keep this at 0 for a direct mapping from 0 to the Maximum Raw value. | 0 | Raw value |
| Animate Width Maximum Raw | End of the raw value span. The animated width reaches full scale when the variable value reaches the difference between Maximum Raw and Minimum Raw. | 100 | Raw value |
| Animate Width Minimum px | Start of the pixel span. The animated width runs from 0 px up to the difference between Maximum px and Minimum px. | 80 | px |
| Animate Width Maximum px | End of the pixel span. With Minimum px at 0, this is the width at full scale. | 220 | px |
| Animate Width Reverse | Sets the edge the width grows from. Cleared grows the object to the right from the left edge. Selected grows it to the left from the right edge. | false | Boolean |
| Animate Top Variable | Variable or expression that drives runtime top-position animation. | PLC1.PositionTop | Variable or expression |
| Animate Top Minimum Raw | Start of the raw value span. The animation scales the variable value across the difference between Maximum Raw and Minimum Raw, so keep this at 0 for a direct mapping from 0 to the Maximum Raw value. | 0 | Raw value |
| Animate Top Maximum Raw | End of the raw value span. The offset reaches full scale when the variable value reaches the difference between Maximum Raw and Minimum Raw. | 100 | Raw value |
| Animate Top Minimum px | Start of the pixel span. A rising value moves the object upwards from its resting position by up to the difference between Maximum px and Minimum px. To move the object downwards, set Minimum px above Maximum px. | 100 | px |
| Animate Top Maximum px | End of the pixel span. A rising value moves the object upwards by up to the difference between Maximum px and Minimum px. | 260 | px |
| Animate Left Variable | Variable or expression that drives runtime left-position animation. | PLC1.PositionLeft | Variable or expression |
| Animate Left Minimum Raw | Start of the raw value span. The animation scales the variable value across the difference between Maximum Raw and Minimum Raw, so keep this at 0 for a direct mapping from 0 to the Maximum Raw value. | 0 | Raw value |
| Animate Left Maximum Raw | End of the raw value span. The offset reaches full scale when the variable value reaches the difference between Maximum Raw and Minimum Raw. | 100 | Raw value |
| Animate Left Minimum px | Start of the pixel span. A rising value moves the object to the right from its resting position by up to the difference between Maximum px and Minimum px. To move the object to the left, set Minimum px above Maximum px. | 200 | px |
| Animate Left Maximum px | End of the pixel span. A rising value moves the object to the right by up to the difference between Maximum px and Minimum px. | 420 | px |
No rows match the filter.
Border
Configure the border styling for the Label object.
| Setting | Description | Example | Units |
|---|---|---|---|
| Border Color | Border color used for the label. | #CED4DA | Color |
| Border Color States | Dynamic border color state rules JSON array. | [{"state":"alarm","color":"#dc3545"}] | JSON array |
| Border Width | Border width used for the label. | 1 | px |
| Border Radius | Corner radius of the label border. | 4 | px |
| Border Visibility | Expression controlling whether the border is visible. | SYSTEM.UserGroups == "Operators" | Expression |
| Border Blink | Expression or boolean controlling border blinking. | PLC1.AlarmActive | Boolean or expression |
| Border Blink Speed | Blink speed used for the border. | 500 | ms |
| Border Blink Offset | Blink offset used to stagger border blinking between objects. | false | Boolean |
No rows match the filter.
Rotation
Configure the rotation of the label object. The fixed Rotation angle and the free-running rotation are independent and can be combined: the object is first turned to its fixed angle and then keeps turning from there.
Free-running rotation is applied in runtime. In the design environment the object stays still so that it can be selected, moved, and resized.
| Setting | Description | Example | Units |
|---|---|---|---|
| Rotation | Fixed rotation angle applied to the object. Accepts a value, a variable, or an expression. | 45 | Degrees |
| Transform Origin | Point the object rotates around. Left empty the object turns around its own centre. | center | CSS transform origin |
| Rotate Continuously | Turns free-running rotation on while the value resolves to true, which is how a running fan, pump, agitator, or mixer is shown. Accepts true or false, a variable, or an expression, so the movement can follow a run feedback. | PLC1.Fan1_Running | Expression |
| Rotation Speed | Speed of the free-running rotation in degrees per second, so a larger value turns faster. Accepts a value, a variable, or an expression, which lets the symbol turn at the speed the device reports. A negative value turns the other way. | 90 | Degrees per second |
| Rotation Direction | Direction of the free-running rotation. Accepts a value, a variable, or an expression, so it can follow the direction the drive reports: a positive value turns clockwise and a negative value turns counter clockwise. Clockwise and Counter Clockwise are accepted as text, and a true or false value is read as a reverse signal, where true turns counter clockwise. Leave empty to turn clockwise. Often not needed, because a Rotation Speed that can go negative already sets the direction. | -1 | Signed value |
No rows match the filter.
Access Control
Configure access control for the Label object.
| Setting | Description | Example | Units |
|---|---|---|---|
| Access Control Enable | Enables access control evaluation for the object. | true | Boolean |
| Access Control | Expression controlling who can use or see the object. | SYSTEM.UserGroups == "Operators" | Expression |
| Access Control Filter | CSS filter applied when access control is used to alter the label appearance. | blur(0px) contrast(30%) | CSS filter |
No rows match the filter.
Visibility
Configure the runtime visibility and blinking behavior for the Label object.
| Setting | Description | Example | Units |
|---|---|---|---|
| Visibility | Expression controlling whether the object is visible. | PLC1.LabelVisible | Expression |
| Blink | Expression or boolean controlling label blinking. | PLC1.AlarmActive | Boolean or expression |
| Blink Speed | Blink speed used during runtime. | 500 | ms |
| Blink Offset | Blink offset used to stagger blinking between objects. | false | Boolean |
No rows match the filter.