Each button on the GUI has three different image states: default, pressed, and selected. This means that the button can also have three different images. To take advantage of this feature, you must set each image state.

  1. View a Button’s Image States
    To view the image states configured for a button, use the ‘Edit’ button in the builder.
    • Either right-click and press Edit button, or you can double-click the button.
      In the example, only the default image is populated.
  1. iPad with Current Setting
    The following video shows what happens when only the default image state is used. When the button is pressed, the command is sent as expected. But without feedback, the user has no way of knowing that the button was actually pressed.
  1. Add a Pressed State
    • Add an image to the pressed state. Take any image from the image library and drag it to the right-most dotted square next to Pressed.
  1. iPad with Current Setting
    When a button is pressed with both a default state and a pressed image state, the command is executed as expected but the GUI gives feedback showing that the button is pressed, providing a better experience for the user.
  1. Adding a Selected State
    The last step is not for all buttons but it does apply in this example. Assume that there are three inputs and one output. When an input is selected, we want to see it on the GUI. Adding a selected state accomplishes this.
    • To add the selected state, drag an image from the image library onto the right-most dotted square next to the Selected state.
  1. iPad with Current Setting
    The following video shows what happens when a button with a default state, a pressed state, and a selected image state is pressed. The command is executed as expected but the GUI provides feedback showing that the button is pressed.