Part 5: Configure State Machine

State Machine feature is used for transitioning from one state to another. In our example, we will have a Music state and a Navigation state. The transitions between these two are triggered by pressing the Music and Navigation buttons in the Menu section.

To

configureIn Solution Explorer navigate to the StateMachineGlobalStateMachine clickwhich can be found following the triangularpath iconbelow. onDouble-click the GlobalStateMachine.

The State Machine Editor will be opened and GlobalStateMachine will be displayed. GlobalStateMachine consists of an Initial State (circle) and a State (rectangle) called "State" and a transition from the leftInitial ofState to the State.
Solution Explorer Path
Solution > State Machines in> SolutionGlobalStateMachine
Explorer. Double-click GlobalStateMachine that is shown after expanding State Machines.

Selectbelow the already existing state.

A new state "State_1" will be created State in the State Machine Editor, and change its Name to "Music" in the Properties panel.Editor.

Whenever

we enter the "Music" state, the "Music" GroupNode shall get visible. When leaving the "Music" State, it shall get invisible. Therefore, an OnEntry action and an OnExit action has to be configured.

Create a new "OnEntry" action by pressing the "+" sign next to OnEntry. Configure an "Enable Rendering" action, where the TargetNode is the IVI_Sample scene's "Music" GroupNode. Check the "Visible" checkbox to configure that the "Music" GroupNode shall be set to visible when executing the action.

To choose the TargetNode, press the magnifying glass icon. Then select the "Music" GroupNode in the Choose Item dialog and press "OK".

Create a new "OnExit" action by pressing the "+" sign next to OnExit similar to the OnEntry action you have just configured. This time, the "Visible" checkbox should be unchecked. This way the "Music" GroupNode will be set to invisible when executing the action.

Add a "Handle Control State" Behavior to TextButton_Music and TextButton_Navigation node (which are in the Menu_button group). This can be done by draging-and-dropping the behavior from the Toolbox Behaviors panel

Return to the

In State Machine Editor panel. Drag and dropadd a State (for the Navigation State)transition from the upper right toolbar.

Select that State in the State Machine Editor, and change its name"State" to "Navigation" in the Properties panel.

Whenever this state is entered, the Navigation GroupNode shall be visibleState_1" and wheneveranother thistransition statefrom is exited, the Navigation GroupNode shall get invisible.

Therefore, select the Navigation state and add an OnEnter and an OnExit action similar"State_1" to what"State". weTo diddo for the Music state.

Connect the two States in both directions with Transitions. Justthis drag a Transition from the toolbar onto the outgoing state (e.g. Music)State) then click onto the second state (e.g. Navigation)State_1).

2 Transitions will be added from State to State_1 and back
In State Machine Editor select the State and State_1 one by one. In the Properties panel's [General] section change their Name properties according to the table below.

In State Machine Editor you can see that the states have been renamed.
  Target State "State" Target State "State_1" General > Name
Music
Navigation
While the state "Music" is selected in the State Machine Editor click on the [Fusion...] button on the bottom left.

Fusion will be opened, displaying the Fusion node "Music". The displayed Fusion node offers 2 behavior connectors: one for [On Entry Actions] and one for [On Exit Actions].

In the [Music] Fusion Node drag the [On Entry Actions] connector circle to the right and release the mouse.

A Select Behavior dialog will be opened. This dialog has an input field on top and a list of behaviors organized as a tree on the bottom. This list of behaviors is similar to the one in the Toolbox panel's [Behaviors] section.

In the Select Behavior dialogue find the "Enable Rendering" behavior and double-click it.

In Fusion a new [Enable Rendering] node is created, which is connected to the Slider's [On Entry Actions] connector.

Use the dialogue's input field and start typing "Enable Rendering". While you are typing, the list of behaviors decreases as the content of the input field serves as a filter.

In Fusion configure the [Enable Rendering] node according to the table below.

The [Enable Rendering] node is fully configured. Whenever GlobalStateMachine enters the state "Music", the GroupNode "Music" will get visible.
    Music Node
On Entry Actions > EnableRendering
TargetNode
IVI_Sample > IVI_Sample > Music
Visible
TRUE
Repeat similar steps to create an [EnableRendering] Fusion Node for the [Music] node's [On Exit Action] connector. Configure this new [EnableRendering] node according to the table below.

The [Enable Rendering] node is fully configured. Whenever GlobalStateMachine exits the state "Music", the GroupNode "Music" will get invisible.
    Music Node
On Exit Actions > EnableRendering
TargetNode
IVI_Sample > IVI_Sample > Music
Visible
FALSE

In State Machine Editor select the [Navigation] state, switch to Fusion and configure a similar [On Entry Action] and [On Exit Action]. Necessary configuration details are given in the table below.

The [Navigation] State has been configured similar to the [Music] State. Whenever GlobalStateMachine enters the state "Navigation", the GroupNode "Navigation" will get visible. Whenever GlobalStateMachine exits the state "Navigation", the GroupNode "Navigation" will get invisible.
    Navigation Node
On Enter Actions > EnableRendering
TargetNode
IVI_Sample > IVI_Sample > Navigation
Visible
FALSE
    NavigationNode
On Exit Actions > EnableRendering
TargetNode
IVI_Sample > IVI_Sample > Navigation
Visible
FALSE

 

In the Scene Tree panel navigate to TextButton_Music which can be found following the path below and select it. Click on the Fusion button on the top right of the Scene Tree panel.

Fusion will be opened, displaying the TextButton_Music's Fusion node with a Behaviors connector.
Scene Tree Path
IVI_Sample > IVI_Sample > Menu_button > TextButton_Music
Drag the Behaviors connector to the right and release the mouse button.

The Select Behaviors dialog will be opened
Find the "Handle Control State" behavior and double-click it.

A new Fusion node [Handle Control State] will be created.
Repeat these steps for TextButton_Navigation which can be found following the path below.

A new Fusion node [Handle Control State] will be created.
Scene Tree Path
IVI_Sample > IVI_Sample > Menu_button > TextButton_Navigation

Next, we will configure how these transition are triggered. Select each Transition and set the displayed Properties as shown below.

Now, all configuration is done. Please save your solution and click the Play button in the menu bar to run CGI Player.

The Player starts displaying the Music screen (and we are in Music state). Use the menu buttons "Navigation" and "Music" to switch between Navigation and Music.