Transitions configuration

Using

Set up transitions between the Integratedthree StateStates Machinecreated

CGI Studio provides a powerful feature to realize application logic via an integrated state machine model. Combined with controls and behaviors, it supports building complex application logic withoutin the needprevious for programming.operation. In this section, scene transitions will be implemented via the State Machine.Machine TheEditor, goaltransitions are set using Transitions. This transition consists of a Sender, Condition, and Action. Therefore, if the set Condition is toevaluated triggeras scene transitions by clicking specific nodes in"true," the scene.set Action is executed.

 

Transition Configurations

How

The toTransition displayfunction of the State Machine Editor panelis

Theused stepsto set up transitions between states. Transitions are indicated by connecting each state with an arrow.

Drag a Transition from the toolbar in the upper right corner of the state machine editor, and drop the dragged transition into the "Car_Cluster" State (Transition start side).

A Transition (arrow) appears on howthe state machine editor and is in a dragging state.

Extend the Transition (arrow) to displaythe "Incoming_Call" State (Transition end side) and click.

The two states, "Car_Cluster" and "Incoming_Call", are connected by arrows.


With Transition selected, from the lower left of the State Machine Editor panelpanel, is explained below.

1. Click the triangular icon beside Solution > State Machines in Solution Explorer.

2. Double-click GlobalStateMachine[ thatFusion... is shown after expanding State Machines.

].

• The Statepanel Machinewill Editorswitch isto shown.the Fusion panel and the Fusion diagram for the Transition will be displayed.
  
• The Stateconnector Machine Editor can also be opened by selecting View > State Machine > State Machine Editor(Condition) in the menuupper bar.
  

right Make sure the checkbox of Is Global on Properties is checked.

The GlobalStateMachine already contains an Initial State (represented by the round icon), a State Transition (represented by the arrow), and a State (represented by the rectangle). An initial state is the entry pointcorner of the stateTransition machine.Fusion Anode stateis denotesconnected ato giventhe logicalCheck statusClick Fusion node.

Drag and canmove havethe amouse setover the Actions connector in the lower right corner of actionsthe associatedTransition whenFusion node and release the stateleft ismouse activatedbutton (Onanywhere. Entry)

andThe when[ deactivatedSelect (OnBehavior Exit)] dialog will appear.


Enter "Transition Request" in the search field at the top of the dialog.

The list of behaviors in the dialog will be narrowed down to [ Action>Transition>Transition Request ].

All actions definedDouble-click Transition Request.

The Transition Request Fusion node will be linked to the Actions connector of the Transition Fusion node.

The following settings are made for the stateTransition changesRequest areFusion executednode.
when

entering or leavingSet the state.

State setting

Configure each state for transitioningscene to thebe nexttransitioned scene.to Followin the steps[ belowIdentifier after].

displayingThis operation completes the Statetransition Machinesettings Editorfrom as"Car_Cluster" explanationto "Incoming_Call". Click the up arrow icon in Howthe upper right corner of the Fusion panel to displayswitch the State Machine Editor panel. 

1. Click State on State Machine Editor.

2. Change Name on Propertiesdisplay to Car_Cluster.

3. Create additional states for Car_Status and Incoming_Call. You can do this by dragging and dropping states from the State Machine Editor ToolBar into the State Machine Editor. Don't forget to adjust the name of the states to "Car_Status" and "Incoming_Call".

Whenever a certain state is entered, the corresponding scene should be activated. Therefore, an OnEntry action is necessary for all 3 states.

Whenever a certain state is exited, the corresponding scene should be deactivated.  Therefore, an OnExit action is necessary for all 3 states. 

4. Add an OnEntry and an OnExit action to each of the 3 states. To do this, select a state and click on the "+" signs next to "OnEntry" and "OnExit.

5. Configure the OnEntry and OnExit actions according to the following table:

Car_Cluster

PropertyRequestType

Value for OnEntry Value for OnExitActivate Action
Identifier TransitionRequest
TransitionRequest RequestType
Activate
Deactivate
Identifier
/Scene/Car_Cluster
/Scene/Car_ClusterSolution>Scenes>Incoming_Call

Car_Status

Property
Value for OnEntry Value for OnExit Action
TransitionRequest
TransitionRequest RequestType
Activate
Deactivate
Identifier
/Scene/Car_Status
/Scene/Car_Status

Incoming_Call

Property
Value for OnEntry Value for OnExit Action
TransitionRequest
TransitionRequest RequestType
Activate
Deactivate
Identifier
/Scene/Incoming_Call
/Scene/Incoming_Call

---

Transition setting

Set-up

Repeat the transitionstep settings1 inthrough step 7 above to set the Statefollowing Machinefive Editor.transitions. Transition

isAll represented by connecting each State with an arrow. 

To create a transition, use the Transitions icon from the State Machine Editor's toolbar.

And this is how a transition is made in State Machine Editor: Drag a Transition (arrow icon) from the State Machine Editor toolbar and drop it on a state (the state of the transition's origin). Then drag the mouse to the target state and click onto the target state. An arrowRequestType will be drawnActivate from the transition's origin state to the transition's target state.(default).

1. Draw transitions between the states clock-wise

Transition from State	Transition to StateIdentifier
Car_Cluster Incoming_Call to Car_Status	Solution>Scenes>Car_Status
Car_Status  to Car_Cluster	Solution>Scenes>Car_Cluster

Solution>Scenes>Car_Cluster>Car_Status Solution>Scenes>Car_Status Car_Status to Incoming_Call
Solution>Scenes>Incoming_Call Incoming_Call
 to Car_Cluster Solution>Scenes>Car_Cluster
When all settings have been completed, the diagram below shows the state.

2.The Drawabove settings set the scene to be displayed when the transition from each scene occurs.

Handle Control State

In the previous section, you used Transition to set the transition between each scene. Next, you will set the conditions under which these transitions betweenoccur. The Transition you added has a Condition behavior called "Check Click" initially set. Therefore, a "Handle Control State" is added to the statestarget counter-clock-wisenode in order to send state events from each scene as triggers to this Condition behavior.

From the Solution Explorer, click [ Scenes>Car_Cluster ].

"Car_Cluster" will appear in the scene tree. An extra scene tree will appear to the right of the scene tree.

Click on [ Cluster>StatusTop>Telltales ] in the scene tree to expand it.

The group nodes Brake, AirBag, Engine, OpenDoors, IndicatorRight, and IndicatorLeft will be displayed.

Click on the IndicatorRight group node and click on [ Fusion... ] in the Extra Scene tree.

Switch to the Fusion panel and the Fusion diagram of IndicatorRight will be displayed.


Drag and move the mouse over the connector on the right side of the IndicatorRight Fusion node in the Fusion diagram and release left click anywhere.

[ Select Behavior ] dialog will appear.

Enter "Handle Control state" in the search field at the top of the dialog.

The list of behaviors in the dialog will be narrowed down to [ Control>Internal>Handle Control state ].

Double-click the "Handle Control state".

A Handle Control state Fusion node will be linked to the IndicatorLeft Fusion node.


Perform the step 3 through step 6 above for "IndicatorLeft" as well.

With the above settings, State events are sent to Condition "Check Click" as State conditions.

Transition Conditions

Finally, to connect the event destination of the Handle Control State to the Condition, the configuration work is done in the State Machine Editor.

On the State Machine Editor, select Transition from "Car_Cluster" to "Incoming_Call".

With Transition selected, from the lower left of the State Machine Editor panel, click [ Fusion... ].

The panel will switch to the Fusion panel and the Fusion diagram for the Transition will be displayed.
The connector (Condition) in the upper right corner of the Transition Fusion node is connected to the Check Click Fusion node.

Click the Select item icon to the right of the [ Sender ] in the Check Click Fusion node.

[ Choose Item ] dialog will appear.

Select the IndicatorRight node of the scene that will be the source of the screen transition from the list on the left side of the dialog and press the [ OK ] button in the dialog.

In this case, select [ Solution>Car_Cluster>Cluster>StatusTop>IndicatorRight ]. IndicationRight will appear in the Sender of Check Click.


Click on the up arrow icon in the upper right corner of the Fusion panel.

The display switches from the Fusion panel to the State Machine Editor panel.

Repeat the above operation for other interstate transitions to set the Sender.

Specify IndicatorRight for clockwise transitions and IndicatorLeft for counterclockwise transitions.

Transition from State

TransitionCheck Click>Sender

Incoming_Call to StateCar_Status Incoming_Call
Car_Status to Car_Cluster Car_Status Car_Cluster
 to Car_Status Car_Cluster Car_Status to Incoming_Call
Car_Status Incoming_Call to Car_Cluster Car_Status
Car_Status
Car_ClusterIncoming_Call

3. The final State Machine diagram will look like this:

Each arrow represents a State Transition e.g. from the Car_Cluster state to the Car_Status state. A transition contains a sender object, a condition, and an event. If the newly added Transition is selected, by default it already contains a Check Click condition and a Clicked event.

In our example, we want to transition clock-wise when clicking on the IndicatorRight of the scenes' top status bar.
And we want to transition counter-clock-wise when clicking on the IndicatorLeft of the scenes' top status bar.

In order to achieve this, the left and right indicators of all three scenes have to be extended with a HandleControlState. The next part describes how this can be done.

---

Handle Control State

For the Check Click condition behavior, an event from the scene is expected to trigger and match this condition. Therefore, it is necessary to switch back to Scene Editor to setup the events/triggers. 

1. Double click Car_Cluster in Solution Explorer. 

Car_Cluster Scene Tree is shown. 

2. Click IndicatorRight after expanding Cluster > StatusTop > Telltales on Scene Tree. 

ExtraSceneTree of IndicatorRight is shown. 

3.The Selectabove Handlesteps Control State from Behavior ofcompletes the ToolBox. 

4. Add Handle Control State to IndicatorRight node by drag-and-drop operation. 

5. Also add Handle Control State to IndicatorLeft. 

6. Repeat the same steps 1 to 5setup for Incoming_Callexecuting and Car_Status scene. 

Following the steps above, State Events are sent to the state condition, particularly Check Click condition. To connect Handle Control State events to the condition, switch back to State Machine Editor. 

7. Display the State Machine Editor panel.

Please refer to How to display the State Machine Editor panel. 

8. In the State Machine Diagram select a transition that connects two states (e.g. the transitiontransitions between Car_Cluster and Car_Status).

9. Have a look at the transition's properties. In Properties panel, set the Sender to the IndicatorRight node of the scene where this transition originates.

In this example, set the Sender to IndicatorRight of Car_Cluster scene, because Handle Control State was set to IndicatorRight node.  Select the target node by clicking the browse button at the right end of Sender property and select the correct indicator in the Choose Item dialog.

10. Repeat steps 8 to 9 above on the other transitions that connect two states. Make sure to set to the correct Sender from the correct scene.

Set IndicatorRight for clock-wise transitions, and set Indicatorleft for counter-clock-wise transitions. 

The steps above set the parameters such that the state will transitionStates based on triggers and events received from nodes in the scene. 

Displaying Multiple Scenes 

To visualize the scene transitions, the cameras of the other two scenes need to be added to the render target. 

1. Referring to the operations described in Setting up the Display, add the cameras Car_Status\DocumentView and Incoming_Call\DocumentView to the RenderTarget. 

2. Click the Play button in the menu bar to run CGI Player.

Please refer to Run CGI Player on how to operate CGI Player. 

3. Click the IndicatorRight (the green arrow pointing to the right) in the Car_Cluster scene. It should show the Incoming_Call scene as seen below. 

By clicking the IndicatorRight arrow, the scene is changed to Incoming_Call and/then Car_Status scene.  By clicking the IndicatorLeft arrow after making scene transition using the right arrow, you can return to the original scene.