Button

    Buttons enable your users to express decisions and preferences that control the IntuiFace experience. There are three kinds of buttons in IntuiFace:

    • Simple button: use to run any action. You can modify its visible text and overall appearance like color and size.
    • Image button: use to run any action. Replaces the Simple button style with any image of your choice. (In fact, you assign two images: one image for when the button is untouched, another for when it is touched.) Can also have a label.
    • Toggle button: has two states: checked and unchecked. Each state can trigger its own set of actions.

    This article covers the Simple and Image Button styles. See this article for more about the Toggle Button style.

    Using Buttons in your Experiences

    Use the Simple and Image button to initiate any action supported by IntuiFace. Examples include:

    • navigation to a new space
    • start, stop, pause or rewind a video
    • turn a page
    • show/hide images
    • browse to a specific URL
    • open a map to particular coordinates

    Buttons can be placed into the scene either as a standalone control or can be inserted into any type of collection. This latter method, when used with Image buttons, can create very interesting display techniques for navigational control.

    To insert a button, either use the menu item Insert -> Button or select the Button icon in the quick action toolbar to the left of Composer. Buttons are always inserted with the Simple style.

    To switch between the Simple and Image styles, open the Properties panel for a selected button and modify it by clicking on the button icon displayed on the panel.

    style_prop.jpg

    To change the button text - or to delete the text entirely - you can either:

    • Double-click the button and edit text directly in the scene, or
    • Modify the Text property in the Properties panel.

    Properties, Triggers & Actions

    Properties

    See Common asset properties for details about common properties shared by all asset types

    Appearance

    You can change the label, position, orientation, colors and effects from here. For Image Buttons you can select the pressed and released images.

    For the following, different properties are available depending on the choice of button style.

    State

    • Enabled: disabled buttons will not respond to interaction

    Background [for Simple Button only]

    • Fill color: color of the interior of the button. Setting the Opacity to 0 will eliminate all color.
    • Outline color: color of the outline of the button. Setting the Opacity to 0 will eliminate all color.
    • Pressed color: color of the pressed state of the button. Setting the Opacity to 0 will eliminate all color.
    • Radius: roundness of the corners. A radius of 0 will square the corners
    • Flat: toggle whether fill color should have a gradient effect
    • Shadow: toggle whether the button is given some three dimensional depth

    Images [for Image Button only]

    • Released image: Image displayed when the Image Button is not being touched.
    • Pressed image: Image displayed when the Image Button is being touched. Can be the same image as for Released image. However, making the Pressed image - for example - a darker version of the Released image provides the user with helpful visual feedback.

    The image on the left illustrates the "Appearance" properties for Simple Button while the image on the right shows the "Appearance" properties for Image Buttons

    Button_Appearance_Properties.jpg

    Text

    • Text: Visible text in the button. Leave blank if you don't want to display any text.
    • Font size
    • Font color
    • Font
    • Bold
    • Italic
    • Underline
    • Line wrap
    • Horizontal alignment: Horizontal placement of text: Left, Center, or Right
    • Vertical alignment: Vertical placement of text: Top, Center, or Bottom
    • Margin: Margin width in pixels

    Button_text_property.jpg

    Triggers

    See Triggers Overview to get details of common triggers shared by all assets or collections

    • Is pressed: Raised when the button is pressed.
    • Is released: Raised when the button is released.

    The screenshot below illustrates the set of triggers specific to the Button Asset (click to zoom)
    We usually use the Released trigger in common UI Design.


    ButtonTA.jpg

    A very common example is to combine the Released trigger with a Go to Scene navigation action, as illustrated below:

    ButtonTA_gotoscene.jpg

    Actions

    See Actions Overview to get details of common actions shared by all assets or collections

    • Disable: Disable the button
    • Enable: Enable the button
    • Simulate a tap: Simulate a single tap on the button.

    The screenshot below illustrates the set of actions specific to the Button asset.

    Samples of usage:

    • When a Countdown Interface Asset reaches 0 Then Enable the button.
    • When a gesture is performed, Then simulate a tap on the button. This will give the user 2 choices (gesture or tap the button) to perform the same actions.


    buttonTAdetails.jpg