Skip to main content

Field I/O

The Field component is a text input/output element designed to visualize and modify variable values in real-time. It is fundamental for entering setpoints, visualizing numeric states, or text strings.

Properties marked with bolt allow dynamization from an expression with variables.

General​

Basic identification and position configuration.

Name (string)​

Unique identifier of the element.

Description (string)​

Optional descriptive text.

X bolt (number)​

Horizontal position in pixels.

Y bolt (number)​

Vertical position in pixels.

Z bolt (number)​

Depth index (z-index).

Width bolt (number)​

Width of the element in pixels.

Height bolt (number)​

Height of the element in pixels.

Text (string)​

Defines the initial text that the field will display. For fixed or dynamic texts, it is recommended to use the Text element.

Style​

Visual customization of the component.

Disabled bolt (boolean)​

Prevents editing the field.

Hidden bolt (boolean)​

Makes the element invisible.

Color bolt (color)​

Text color.

Background Color bolt (color)​

Field background color.

Border Color bolt (color)​

Global border color.

Border Color [Top/Bottom/Left/Right] (color)​

Specific color for each border side.

Border Radius bolt (number)​

Corner rounding.

Font Size bolt (number)​

Text size in pixels.

Font Weight bolt (number)​

Typography weight (400, 700, etc.).

Border Width bolt (number)​

Global border thickness in pixels.

Border Width [Top/Bottom/Left/Right] (number)​

Specific thickness for each border side.

Horizontal Alignment bolt (string)​

Text alignment (Left, Center, Right).

Vertical Alignment bolt (string)​

Vertical alignment (Top, Center, Bottom).

Border Style bolt (string)​

Global stroke type (Solid, Dotted, etc.).

Border Style [Top/Bottom/Left/Right] (string)​

Specific stroke style for each side.

Rotate bolt (number)​

Rotation angle in degrees.

Transition (string)​

CSS transition definition for smooth changes.

Anchor Point [Vert./Horiz.] (string)​

Defines which edge of the element acts as the fixed position reference. Extremely useful when dynamically resizing elements (e.g., a progress bar): if you anchor vertically to "Bottom", increasing the height will cause the element to grow upwards, keeping its base fixed on the synoptic.

Shadow (string)​

Allows selecting a predefined shadow level (None, Small, Medium, Large).

Advanced​

Interaction behavior and event configuration.

Tag (Tag)​

System variable linked to the field. The field will display the Tag's value and write to it if modified.

Remanent Value (boolean)​

If active, the field remembers its last locally entered value.

Decimals (number)​

Number of decimal digits to display (for numeric values).

Keyboard (string)​

Links to an existing Keyboard element in the synoptic for data entry. Multiple fields can share the same keyboard component.

Script on Input (JavaScript)​

Executed in real-time with each character entered (input event).

Script on Change (JavaScript)​

Executed when the new value is confirmed (change event, typically on Enter or leaving the field).

Script on Focus (JavaScript)​

Executed when the element receives cursor focus.

Script on Blur (JavaScript)​

Executed when the element loses focus.

Permissions​

Role-based access control.

Activate protection (boolean)​

Enables editing restrictions.

Allowed groups (Array)​

List of groups authorized to edit the value.

Script Example​

/* Script to validate numeric input before writing */

// Assume this script runs 'On Click' or via a change event
const inputValue = parseFloat(target.value);

if (inputValue >= 0 && inputValue <= 100) {
  Tag("SPEED_SETPOINT").value = inputValue;
  target.style.backgroundColor = "#ffffff"; // White (OK)
} else {
  // Visual error feedback
  target.style.backgroundColor = "#ffcccc"; // Light red
  dialog({ title: "Error", message: "Value must be between 0 and 100" });
}