Differences

This shows you the differences between two versions of the page.

--- mistudio:design_editor:more_layout:buttons_inputs:button [2026/09/18 13:36] – removed - external edit (Unknown date) 127.0.0.1
+++ mistudio:design_editor:more_layout:buttons_inputs:button [2026/09/18 15:32] (current) – tputman
@@ Line 1: / Line 1: @@
+===== Button =====
+com.ergotech.vib.graphics.Button
+==== Image Examples ====
+| {{:mistudio:graphics:more_layout:buttons_inputs:pasted:20260627-115108.png?40|Button in the graphics palette}} | {{:mistudio:graphics:more_layout:buttons_inputs:pasted:20260627-115139.png?100|Button graphic example}} |
+| //Button in the graphics palette.// | //Button graphic example.// |
+==== Overview ====
+The Button graphic is a More Layout input control used to send an output value when the user interacts with it.
+Button is commonly used as a two-state control. It can switch between an off state and an on state, and it sends a value when the state changes.
+Button can display different labels for the off and on states.
+==== Common Uses ====
+  * Creating an on/off control
+  * Sending a button value into application logic
+  * Triggering an action from the application screen
+  * Sending high and low values
+  * Displaying off and on labels
+  * Creating operator controls
+==== Input Behavior ====
+Button can be updated from an input connection.
+The **updateDisplayedValue** port updates the displayed button state from logic, a data source, or another component.
+==== Output Behavior ====
+Button sends its current value through **PrimaryOutPort**.
+The output value depends on the current button state and trigger type.
+In a typical on/off setup, the off state sends the configured **Low Value**, and the on state sends the configured **High Value**.
+==== Button-Specific Behavior ====
+Button is designed for button-style user interaction.
+Button-specific settings include:
+  * **Name** Sets the name of the Button graphic.
+  * **Enabled** Controls whether the user can interact with the Button.
+  * **Font** Controls the font used for the Button label.
+  * **Text Color** Sets the Button label text color.
+  * **High Value** Sets the value used for the on or active state.
+  * **Low Value** Sets the value used for the off or inactive state.
+  * **Off Label** Sets the label shown for the off state.
+  * **On Label** Sets the label shown for the on state.
+  * **TriggerType** Controls how the Button output behaves when the Button is pressed.
+  * **Background Color** Sets the Button background color.
+  * **ImageBehavior** Controls how Button images are displayed.
+  * **ImageOff** Selects the image used for the off state.
+  * **ImageOn** Selects the image used for the on state.
+  * **Visible** Controls whether the Button is shown.
+==== Trigger Types ====
+**Toggle** switches the Button between off and on each time it is pressed.
+**Pressed** keeps the Button active while it is being pressed and returns it to the off state when released.
+**Timed** keeps the Button active for a configured amount of time, then returns it to the off state.
+**Trigger** sends the active value each time the Button is pressed.
+==== Logic Ports ====
+In the Logic Editor, Button includes these default ports:
+  * **PrimaryOutPort**
+  * **updateDisplayedValue**
+The **PrimaryOutPort** sends the Button output value.
+The **updateDisplayedValue** port updates the displayed Button state from another source.
+==== Notes ====
+Use Button when a user needs to press a control and send a value into application logic.
+For Bootstrap-style button appearance, see [[mistudio:design_editor:more_layout:buttons_inputs:bootstrapbutton|BootstrapButton]].
+For checkbox-style selected or unselected behavior, see [[mistudio:design_editor:more_layout:buttons_inputs:checkbox|CheckBox]].
+Basic Layout button controls are documented separately under [[mistudio:design_editor:basic_layout:active_controls:start|Active Controls]].
+For general graphic behavior, see [[mistudio:design_editor:active_graphic|Active Graphic]].
+==== Related Pages ====
+  * [[mistudio:design_editor:start|MIStudio Design Editor]]
+  * [[mistudio:design_editor:more_layout:start|More Layout]]
+  * [[mistudio:design_editor:more_layout:buttons_inputs:start|Buttons and Input Controls]]
+  * [[mistudio:design_editor:more_layout:buttons_inputs:bootstrapbutton|BootstrapButton]]
+  * [[mistudio:design_editor:more_layout:buttons_inputs:checkbox|CheckBox]]
+  * [[mistudio:design_editor:more_layout:buttons_inputs:roundcheckbox|RoundCheckBox]]
+  * [[mistudio:design_editor:active_graphic|Active Graphic]]