Controls

Button State

The Button State control is a dynamic button that adapts its behavior, appearance, and actions based on multiple conditions. By leveraging JavaScript-based logic, users can define various states that modify the button’s label, image, and execution logic depending on the value of a connected variable.

Overview

Unlike static buttons, the Button State can respond to real-time data or user interactions, allowing for flexible and dynamic behavior. It is particularly useful for cases where a button’s function should change based on a system state, process stage, or input condition.

Key Features

State-Based Behavior

• Define multiple states and conditions using JavaScript logic.
• Change the button’s label, image, and execution logic dynamically.

Dynamic Execution

• Assign different actions to each state, enabling custom workflows.
• Execute specific functions based on the value of a connected variable.

Visual Customization

• Modify text, colors, and images for each state to improve user feedback.
• Ensure clear communication of the current button function based on its state.

Seamless Integration

• Bind the button state to any relevant variable, such as a system flag or status.
• Works well with real-time monitoring and control applications.

Use Cases

Toggle Between Modes

• Example: A button that switches between "Start" and "Stop" based on a machine’s running status.

Conditional Execution

• Example: If a system error is detected, change the button to “Reset” instead of its usual function.

Visual State Indicators

• Example: Display different images or icons based on whether a feature is enabled or disabled.

Example Usage

If a button is connected to a variable called "systemActive":

• When systemActive = false, the button displays "Start" and executes a startup sequence.
• When systemActive = true, the button changes to "Stop" and triggers a shutdown process.

This level of customization allows for highly interactive and user-friendly controls within the application.