Skip to main content

Button

The Button component is the fundamental interactive element for triggering actions in the synoptic. It allows the user to send commands, switch screens, or execute custom scripts when clicked.

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 bolt (string)​

Visible label inside the button.

Style​

Visual customization of the component.

Disabled bolt (boolean)​

Disables user interaction.

Hidden bolt (boolean)​

Makes the element invisible.

Wave Animation (boolean)​

Visual ripple effect on click.

Color bolt (color)​

Text color.

Background Color bolt (color)​

Button background color.

Border Color bolt (color)​

Defines the color for all 4 borders (Top, Bottom, Left, Right).

Font Size bolt (number)​

Text size in pixels.

Border Width bolt (number)​

Border thickness in pixels.

Font Weight (number)​

Typography weight (400, 700, etc.).

Border Style bolt (string)​

Stroke type (Solid, Dotted, etc.).

Border Radius bolt (number)​

Corner rounding.

Rotate bolt (number)​

Rotation angle in degrees.

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.

Value on Press (number)​

Writes a numeric value to a Tag when pressed.

Value on Release (number)​

Writes a numeric value to a Tag when released.

Value on Click (number)​

Writes a numeric value to a Tag when the click is completed.

Script on Press (JavaScript)​

Executes JS code when pressed.

Script on Release (JavaScript)​

Executes JS code when released.

Script on Click (JavaScript)​

Executes JS code when the click is completed.

Go to Synoptic (string)​

Name of the synoptic to navigate to on click.

Language Text (Array)​

Allows defining a specific label for each configured runtime language. If no translation exists for the current language, the value of the Text property (General) will be displayed.

Login (boolean)​

If true, opens the login dialog on click.

Permissions​

Role-based access control.

Activate protection (boolean)​

Enables security restrictions. If inactive, any user can interact with the button.

Allowed groups (Array)​

List of authorized user groups (e.g., "admin", "operator"). If the current user does not belong to any of these groups (or no user is logged in), the action will be blocked and an "Access Denied" alert will be shown.