2 State Toggle
Component Palette Icon
This button is similar to the basic Toggle Button, but more finely tuned to work in realistic controls environments. Use this button any time you want to toggle a value between two states, such as On/Off, Stop/Run, etc. If you have more than two states (for example, Hand/Off/Auto, use the Multi-State Button).
If you have a tag whose value you want to toggle between 2 values (like zero and one), you can simply drag and drop the tag onto the button. This will bind both the Control Value and Indicator Value properties to that tag. Now set the State 1 Value and State 2 Value to your two states (they default to zero and one, respectively). Lastly, use the Styles Customizer to define the styles for your two states.
This button has four integer values that you use to set it up: the Control Value, the Indicator Value, and values that define the 2 different states: State 1 Value and State 2 Value. Every time you press the button, one of the state values is written to the control value. The Indicator Value is used to determine which state you're in. For example, suppose that State 1 Value was zero and State 2 Value is one. If Indicator Value is zero and you press the button, it'll write a one to the Control Value. This means that if the Indicator value never changes, the button will continue to write the same value to the Control Value. The Style of the component is typically driven by the read-only property Current State. Current State equals zero when Indicator Value=State 1 Value and one otherwise.
Properties
| Name | Description | Property Type | Scripting | Category |
|---|---|---|---|---|
| Antialias | Draw with antialias on? Makes text smoother. | boolean | .antialias | Appearance |
| Background 3D? | Should this button have a 3d type background, or a flat color one? | boolean | .background3D | Appearance |
| Background Color | The background color of the button. | Color | .buttonBG | Appearance |
| Border | The border surrounding this component. NOTE that the border is unaffected by rotation. | Border | .border | Common |
| Border Painted? | Should the border of this button be displayed? | boolean | .borderPainted | Appearance |
| Confirm Text | The message to ask the user if confirmation is turned on. | String | .confirmText | Behavior |
| Confirm? | If true, a confirmation box will be shown. | boolean | .confirm | Behavior |
| Control Value | Bind this to the tag that controls the state. (Typically, this is bound to the same location as Indicator Value). | int | .controlValue | Data |
| Current State | Read-only property that shows what state (0 or 1) this button is currently in. | int | .state | Data |
| Cursor | The mouse cursor to use when hovering over this component. | int | .cursorCode | Common |
| Data Quality | The data quality code for any tag bindings on this component. | int | .dataQuality | Data |
| Disabled Image Path | The relative path of the image to be displayed when this component is not enabled. | String | .disabledPath | Appearance |
| Enabled | If disabled, a component cannot be used. | boolean | .componentEnabled | Common |
| Fill Area? | Controls whether or not this button's internal area is filled. | boolean | .contentAreaFilled | Appearance |
| Focusable | If a button is not focusable, you will not be able to interact with it with the keyboard. This means you can't "tab" over to it. | boolean | .focusable | Behavior |
| Font | Font of text on this component. | Font | .font | Appearance |
| Foreground Color | The foreground color of the component. | Color | .foreground | Appearance |
| Horizontal Alignment | The horizontal alignment of the button's contents (text and/or image) | int | .horizontalAlignment | Layout |
| Horizontal Text Position | The horizontal position of the button's text relative to its image. | int | .horizontalTextPosition | Layout |
| Icon-Text Spacing | The space (in pixels) between the icon (if any) and the text (if any). | int | .iconTextGap | Appearance |
| Image Path | The relative path of the image. | String | .path | Appearance |
| Indicator Value | Bind this to the tag that indicates the current state. (If you don't have separate tags for status and control, this is bound to the same location as Control Value) | int | .indicatorValue | Data |
| Margin | The space between a button's text and its borders. | Insets | .margin | Layout |
| Mnemonic | A single letter that will activate the button using 'ALT-mnemonic'. | String | .mnemonicChar | Behavior |
| Mouseover Text | The text that is displayed in the tooltip which pops up on mouseover of this component. | String | .toolTipText | Common |
| Name | The name of this component. | String | .name | Common |
| Opaque | Is this button completely opaque? Most aren't, so this should usually be false. | boolean | .opaque | Common |
| Rollover | If true, the button may indicate that the mouse is hovering over it. | boolean | .rolloverEnabled | Behavior |
| State 1 Value | The value that will be written to controlValue when the button is pushed in state 2. | int | .state1Value | Data |
| State 2 Value | The value that will be written to controlValue when the button is pushed in state 1. | int | .state2Value | Data |
| Styles | Contains the component's styles. | Dataset | .styles | Appearance |
| Text | Text of this component. | String | .text | Appearance |
| Vertical Alignment | The vertical alignment of the button's contents (text and/or image). | int | .verticalAlignment | Layout |
| Vertical Text Position | The vertical position of the button's text relative to its image. | int | .verticalTextPosition | Layout |
| Visible | If disabled, the component will be hidden. | boolean | .visible | Common |
Scripting
Scripting Functions
This component does not have scripting functions associated with it.
Extension Functions
This component does not have extension functions associated with it.
Event Handlers
Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the Component Events page
Customizers
Example
2-State Toggle with Styles Configured
| Property Name | Value |
|---|---|
| Styles |  |