Button

Table of Contents

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

    • 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.
    • Image Toggle Button: has two states: checked and unchecked. Each state can trigger its own set of actions and can be personalized with images.

    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.

    State

    • Enabled: disabled buttons will not respond to interaction

    Background

    • 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

    The image below illustrates the "Appearance" properties of a Button :

    Button_Appearance_Props.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

    Button_Appearance_Props.jpg

    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