Functional explanation
KnobObject is a rotary control for numeric values. It is suitable for operator-set analog values where a circular control is preferred.
It displays a value along a configurable sweep range and can both show and write values depending on the page logic and the connected variable. The object is useful when the operator expects a dial-style control instead of a text field.
Use it only when the rotary interaction is clear to the operator. For precise numeric entry, an input field is usually easier to use.
Object name
Set the object name shown in the knob decorator context.
| Setting | Description | Example | Units |
|---|---|---|---|
| Object Name | Name used to identify the Knob object. | SpeedKnob | Text |
No rows match the filter.
Variable
Configure the variable bound to the knob value. Releasing the knob writes the new value to this variable, so the field holds one writable variable name. The Variable button opens the variable list and fills in the selected name.
| Setting | Description | Example | Units |
|---|---|---|---|
| Variable | Variable shown by the knob and written when the knob is released. The value text is shown with the Format of the variable when the variable has one. | PLC1.SpeedSetpoint | Variable name |
No rows match the filter.
Settings
Configure the numeric range, sweep angles, track shapes, and value display for the Knob object.
18 rows
| Setting | Description | Example | Units |
|---|---|---|---|
| Min Value | Minimum value of the knob range. | 0 | Value |
| Max Value | Maximum value of the knob range. | 100 | Value |
| Value Res. | Value resolution used by the knob. | 1 | Value |
| Font Family | Font family used for the knob value text. | Arial | Font family name |
| Font Size | Font size used for the knob value text. | 14 | px |
| Font Weight | Font weight used for the knob value text. | 700 | CSS font weight |
| Zero At | Polar angle in degrees where the knob scale starts. | 260 | Degrees |
| Angle Min | Minimum sweep angle. | -135 | Degrees |
| Angle Max | Maximum sweep angle. | 135 | Degrees |
| BG Radius | Background arc radius. | 70 | px |
| BG Width | Background arc width. | 8 | px |
| Track Radius | Value arc radius. | 70 | px |
| Track Width | Value arc width. | 8 | px |
| Write Timeout | Write delay after user interaction. | 250 | ms |
| Background Color | Background color used behind the knob. A gradient can be used here as well as a single color; see the Gradients section of the Color Library article. | #FFFFFF | Color |
| No State Color | Color used for the knob track when no active state applies. | #34eb3a | Color |
| Read Only | Makes the knob display-only when true. | false | Boolean |
| Units | Appends the configured variable unit when true. | true | Boolean |
No rows match the filter.
Color
Configure the conditional color states for the Knob object.
| Setting | Description | Example | Units |
|---|---|---|---|
| Color States | Conditional color state rules that restyle the knob track from a variable or expression. Each rule pairs a condition with a color, and the first matching rule wins. The No State Color is used while no rule matches. A gradient can be used here as well as a single color; see the Gradients section of the Color Library article. | [{"state":"alarm","color":"#dc3545"}] | JSON array |
No rows match the filter.
Position / Size
Configure the position and size of the Knob 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. | 180 | px |
| Height | Height of the object. | 180 | px |
| Z-index | Layer order of the object. Higher values appear in front of lower values. | 10 | Number |
No rows match the filter.
Actions
Configure the action list executed when the knob is clicked. See the Actions article for every available action type and its settings.
| Setting | Description | Example | Units |
|---|---|---|---|
| Actions | Action list executed when the knob is clicked. | Set Value, Execute Script | Action configuration |
No rows match the filter.
Animate Position / Size
Configure the runtime animation settings for height, width, top, and left of the Knob object.
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.
Access Control
Configure access control for the Knob 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 object appearance. | blur(0px) contrast(30%) | CSS filter |
No rows match the filter.
Visibility
Configure the runtime visibility and blinking behavior for the Knob object.
| Setting | Description | Example | Units |
|---|---|---|---|
| Visibility | Expression controlling whether the object is visible. | PLC1.KnobVisible | Expression |
| Blink | Expression or boolean controlling knob 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.