Search

User Manual

Getting Started


Modules and Platform


Appendix


Tutorials & Helpful Tricks


Glossary


Strategic Partner Links

Sepasoft - MES Modules
Cirrus Link - MQTT Modules

Resources

Inductive University
Ignition Demo Project
Knowledge Base Articles
Forum
IA Support
SDK Documentation
SDK Examples

All Manual Versions

Ignition 8
Ignition 7.9
Ignition 7.8

Deprecated Pages

Skip to end of metadata
Go to start of metadata
General

Component Palette Icon:


 

Description

This button is really a series of two or more buttons, arranged in a column, row, or grid. Each button represents an integer-valued state. Each state defines two styles for a button: the selected style, and the unselected style. Each button is automatically displayed with the correct style based on the current state (the value of Indicator Value). When a button is pressed, its state's value is written to the Control Value. 

To configure a Multi-State Button, simply drag a Tag that represents your state onto the Multi-State Button. This will bind both the Control Value and Indicator Value to that Tag. Now open up the Multi-State Button customizer, and define your states: their order, values and styles. Lastly choose if you want the buttons to be a column, row, or grid by setting the Display Style property.

Properties
NameDescriptionProperty TypeScriptingCategory
Confirm?If true, a confirmation box will be shown.boolean.confirmBehavior
Control ValueBind this to the tag that controls the state. (Typically, this is bound to the same location as Indicator Value.)int.controlValueData
CursorThe mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize.int.cursorCodeCommon
Display StyleThe display style (rows or columns) for this N-state button.int.displayStyleAppearance
EnabledIf disabled, a component cannot be used.boolean.componentEnabledCommon
FocusableIf 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.focusableEnabledBehavior
FontFont of text on this component.Font.fontAppearance
Grid ColsThe number of columns if the Display Style is set to "Grid" mode.int.gridColsAppearance
Grid RowsThe number of rows if the Display Style is set to "Grid" mode.int.gridRowsAppearance
Horizontal GapThe horizontal spacing between buttons.int.hGapAppearance
Indicator ValueBind this to the tag that indicates the current state. (Typically, this is bound to the same location as Control Value.)int.indicatorValueData
Mouseover TextThe text that is displayed in the tooltip which pops up on mouseover of this component.String.toolTipTextCommon
NameThe name of this component.String.nameCommon
QualityThe data quality code for any tag bindings on this component.QualityCode.qualityData
RolloverIf true, the button may indicate that the mouse is hovering over it.boolean.rolloverEnabledBehavior
StatesA Dataset that stores the information for the different states.Dataset.statesBehavior
Vertical GapThe vertical spacing between buttons.int.vGapAppearance
VisibleIf disabled, the component will be hidden.boolean.visibleCommon
Deprecated Properties
Data QualityThe data quality code for any tag bindings on this component.int.dataQualityDeprecated
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
 key
 keyPressed

An integer that indicates whether the state was changed to "Selected" (on) or "Deselected" (off). Compare this to the event object's constants to determine what the new state is.

.source

The component that fired this event.       

.keyCode

The key code for this event. Used with the keyPressed and keyReleased events. See below for the key code constants.       

.keyCharThe character that was typed. Used with the keyTyped event.       
.keyLocation

Returns the location of the key that originated this key event. Some keys occur more than once on a keyboard, e.g. the left and right shift keys. Additionally, some keys occur on the numeric keypad. This provides a way of distinguishing such keys. See the KEY_LOCATION constants, the keyTyped event always has a location of KEY_LOCATION_UNKNOWN.       

.altDown

True (1) if the Alt key was held down during this event, false (0) otherwise.    

.controlDown

True (1) if the Control key was held down during this event, false (0) otherwise.       

.shiftDown

True (1) if the Shift key was held down during this event, false (0) otherwise.  

 keyReleased

Fires when a key is released and the source component has the input focus. Works for all characters, including non-printable ones, such as SHIFT and F3.

.source

The component that fired this event.       

.keyCode

The key code for this event. Used with the keyPressed and keyReleased events. See below for the key code constants.       

.keyCharThe character that was typed. Used with the keyTyped event.       
.keyLocation

Returns the location of the key that originated this key event. Some keys occur more than once on a keyboard, e.g. the left and right shift keys. Additionally, some keys occur on the numeric keypad. This provides a way of distinguishing such keys. See the KEY_LOCATION constants in the documentation, the keyTyped event always has a location of KEY_LOCATION_UNKNOWN.       

.altDown

True (1) if the Alt key was held down during this event, false (0) otherwise.    

.controlDown

True (1) if the Control key was held down during this event, false (0) otherwise.       

.shiftDown

True (1) if the Shift key was held down during this event, false (0) otherwise.  

 keyTyped

Fires when a key is pressed and then released when source component has the input focus. Only works for characters that can be printed on the screen.

.source

The component that fired this event.       

.keyCode

The key code for this event. Used with the keyPressed and keyReleased events. See below for the key code constants.       

.keyCharThe character that was typed. Used with the keyTyped event.       
.keyLocation

Returns the location of the key that originated this key event. Some keys occur more than once on a keyboard, e.g. the left and right shift keys. Additionally, some keys occur on the numeric keypad. This provides a way of distinguishing such keys. See the KEY_LOCATION constants in the documentation, the keyTyped event always has a location of KEY_LOCATION_UNKNOWN.       

.altDown

True (1) if the Alt key was held down during this event, false (0) otherwise.    

.controlDown

True (1) if the Control key was held down during this event, false (0) otherwise.       

.shiftDown

True (1) if the Shift key was held down during this event, false (0) otherwise.  

 mouse
 mouseClicked

This event signifies a mouse click on the source component. A mouse click the combination of a mouse press and a mouse release, both of which must have occurred over the source component. Note that this event fires after the pressed and released events have fired.

.source

The component that fired this event.       

.button

The code for the button that caused this event to fire.       

.clickCount

The number of mouse clicks associated with this event.       

.x

The x-coordinate (with respect to the source component) of this mouse event.       

.y

The y-coordinate (with respect to the source component) of this mouse event.       

.popupTrigger

Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.       

.altDown

True (1) if the Alt key was held down during this event, false (0) otherwise.       

.controlDown

True (1) if the Control key was held down during this event, false (0) otherwise.       

.shiftDown

True (1) if the Shift key was held down during this event, false (0) otherwise.       

 mouseEntered

This event fires when the mouse enters the space over the source component.

.source

The component that fired this event.       

.button

The code for the button that caused this event to fire.       

.clickCount

The number of mouse clicks associated with this event.       

.x

The x-coordinate (with respect to the source component) of this mouse event.       

.y

The y-coordinate (with respect to the source component) of this mouse event.       

.popupTrigger

Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.       

.altDown

True (1) if the Alt key was held down during this event, false (0) otherwise.       

.controlDown

True (1) if the Control key was held down during this event, false (0) otherwise.       

.shiftDown

True (1) if the Shift key was held down during this event, false (0) otherwise.       

 mouseExited

  This event fires when the mouse leaves the space over the source component.

.source

The component that fired this event.       

.button

The code for the button that caused this event to fire.       

.clickCount

The number of mouse clicks associated with this event.       

.x

The x-coordinate (with respect to the source component) of this mouse event.       

.y

The y-coordinate (with respect to the source component) of this mouse event.       

.popupTrigger

Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.       

.altDown

True (1) if the Alt key was held down during this event, false (0) otherwise.       

.controlDown

True (1) if the Control key was held down during this event, false (0) otherwise.       

.shiftDown

True (1) if the Shift key was held down during this event, false (0) otherwise.       

 mousePressed

  This event fires when a mouse button is pressed down on the source component.

.source

The component that fired this event.       

.button

The code for the button that caused this event to fire.       

.clickCount

The number of mouse clicks associated with this event.       

.x

The x-coordinate (with respect to the source component) of this mouse event.       

.y

The y-coordinate (with respect to the source component) of this mouse event.       

.popupTrigger

Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.       

.altDown

True (1) if the Alt key was held down during this event, false (0) otherwise.       

.controlDown

True (1) if the Control key was held down during this event, false (0) otherwise.       

.shiftDown

True (1) if the Shift key was held down during this event, false (0) otherwise.       

 mouseReleased

This event fires when a mouse button is released, if that mouse button's press happened over this component.

.source

The component that fired this event.       

.button

The code for the button that caused this event to fire.       

.clickCount

The number of mouse clicks associated with this event.       

.x

The x-coordinate (with respect to the source component) of this mouse event.       

.y

The y-coordinate (with respect to the source component) of this mouse event.       

.popupTrigger

Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.       

.altDown

True (1) if the Alt key was held down during this event, false (0) otherwise.       

.controlDown

True (1) if the Control key was held down during this event, false (0) otherwise.       

.shiftDown

True (1) if the Shift key was held down during this event, false (0) otherwise.       

 mouseMotion
 mouseDragged

Fires when the mouse moves over a component after a button has been pushed.

.source

The component that fired this event.       

.button

The code for the button that caused this event to fire.       

.clickCount

The number of mouse clicks associated with this event.       

.x

The x-coordinate (with respect to the source component) of this mouse event.       

.y

The y-coordinate (with respect to the source component) of this mouse event.       

.popupTrigger

Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.       

.altDown

True (1) if the Alt key was held down during this event, false (0) otherwise.       

.controlDown

True (1) if the Control key was held down during this event, false (0) otherwise.       

.shiftDown

True (1) if the Shift key was held down during this event, false (0) otherwise.       

 mouseMoved

Fires when the mouse moves over a component, but no buttons are pushed.

 

.source

The component that fired this event.       

.button

The code for the button that caused this event to fire.       

.clickCount

The number of mouse clicks associated with this event.       

.x

The x-coordinate (with respect to the source component) of this mouse event.       

.y

The y-coordinate (with respect to the source component) of this mouse event.       

.popupTrigger

Returns True (1) if this mouse event is a popup trigger. What constitutes a popup trigger is operating system dependent, which is why this abstraction exists.       

.altDown

True (1) if the Alt key was held down during this event, false (0) otherwise.       

.controlDown

True (1) if the Control key was held down during this event, false (0) otherwise.       

.shiftDown

True (1) if the Shift key was held down during this event, false (0) otherwise.       

 propertyChange
 propertyChange

Fires whenever a bindable property of the source component changes. This works for standard and custom (dynamic) properties.

.sourceThe component that fired this event.  
.newValueThe new value that this property changed to.
.oldValueThe value that this property was before it changed.
.propertyName

The name of the property that changed.

Remember to always filter out these events for the property that you are looking for! Components often have many properties that change.

      

Customizers

The Multi-State Button has its own Customizer. Here, you can define your states, change the order, values, and styles. You can organize your buttons to be a column, row, or grid by setting the Display Style property in the Property Editor. You'll notice that the Multi-State Button Customizer already has some preset states and pre-defined styles to help you get started.

The Multi-State Button works by defining a set of visual styles that change based on a single State. When one of the buttons is pressed, its state value is written to the Control Value property and the Indicator value, and then the visual style will change.


Multi-State Button Customizer Property Descriptions

PropertyDescription
PreviewLets you preview each button's display style, states, and the selected style and unselected style as you configure it.
StatesShows a list of all possible states. You can add, remove, and the change the order of each state listed. Each state also defines two visual styles for a button: Selected Style and Unselected Style.
Selected StyleShows the visual style when the button is selected. You can configure the styles you want to change: Text, Background Color, Foreground Color, Border type, and even add an Image.
Unselected StyleShows the visual style when the button is not selected. You can configure the styles you want to change: Text, Background Color, Foreground Color, Border type, and even add an Image.
TextText displayed on the button.
Background ColorColor of the button
Foreground ColorColor of the text
BorderType of border around the button
Image PathRelative path name for an image on the button

For additional customizers, see:

Examples


The Multi-State Button component in this example has its Display Style property set to Grid. Each button represents an integer-valued state. Each state defines two styles for a button: the selected style, and the unselected style. When a button is pressed, its state's value is written to the submit your changes property. The displayed state is based on the Indicator Value property. 

Stylized Multi-State Button

Property NameValue
Display StyleGrid
Styles

  • No labels