# Part 3: Subchart and History State This page explains the procedure for setting up complex scene transitions using Subchart and History State in CGI Studio. Media State is converted into a Subchart, and bidirectional transitions between the three sub-scenes—Radio, Bluetooth, and USB—are configured. Up and down key inputs (Key\_UpArrow/Key\_DownArrow) are used to switch scenes, and OnEntry/OnExit actions control the visibility of each scene. Additionally, to retain the previous selection state when returning to the Media scene after transitioning to another scene, the Initial State is replaced with a History State to track the media device state. Finally, scene transition operations are verified and simulated using the Player. ### Configure SubChart The Media States that exist in Main\_StateMachine are configured as SubCharts. Within the Media States configured as SubCharts, the States for Radio, Bluetooth, and USB are placed. #### Converting a Media State to a Subchart 1. Double-click on Main\_StateMachineSolution in the \[ State Machines \] folder in the Solution Explorer. - The State Machine Editor will open and display the Main\_StateMachine diagram. 3. After selecting the Media State, select \[ Convert to Subchart \] from the context menu. - The Media State will be converted to a Subchart (the “S” indicating that it is a Subchart will be displayed in the lower right of the State).

The operation to convert Media State to SubChart is now complete. - To move to the SubChart, select Media State and double-click. - To return to the original State Diagram from the SubChart, use the \[Hierarchy Navigation Button\] in the State/Transition view screen in the upper right of the State Machine Editor panel. #### Adding an Initial State and States 1. Double-click on the Main\_StateMachine in the \[ State Machines \] folder in the Solution Explorer. - The **State Machine Editor** panel will be displayed. 2. After selecting the Media State, double-click to move it into the SubChart. - As this is immediately after the SubChart conversion, only the Subchart frame will be displayed. 3. Expand the size of the Subchart by dragging the Subchart frame handle with the mouse. - Expand it to a sufficient size to add the Initial State and States. 4. In the Subchart, place one Initial State and three States from the toolbar at the top right of the State Machine Editor. 5. Change the names of the three States you added to Radio, Bluetooth, and USB, respectively. The placement of the basic components is now complete. Continue to configure the OnEntry action and Transition settings. #### Structure of each State When transitioning to each State in the Subchart (entering and exiting States), the corresponding scene must be made active or inactive. In addition, when each scene is made active or inactive, the Media Menu scene text must be set to be displayed or hidden accordingly. ##### Scene display settings 1. With the Radio State selected, click \[ Fusion \] in the lower left of the State Machine Editor panel. - The Fusion panel for the Radio State will be displayed. 3. Drag the \[ On Entry Actions \] connector on the right of the Radio Fusion node and move the mouse. 4. A link will appear as you move the mouse, so release the left mouse button at the any location. - The \[ Select Behavior \] dialog will be displayed. - The selectable behaviors will be displayed by category. 6. Select “Action > Transition > Transition Request” from the list and connect it to the top node. - You can also narrow down the list of behaviors in the dialog by entering “Transition Request” in the search field at the top of the dialog. - The Transition Request is connected to \[Radio > On Exit Actions\]. 8. Repeat the same process for the \[On Exit Actions\] of the Radio Fusion node to connect the Transition Request Fusion node. 9. Make the following settings for the two Transition Requests that you have connected.

On Entry Actions	RequestType	Activate
On Entry Actions	Identifier	Media Radio scene
On Exit Actions	RequestType	Deactivate
On Exit Actions	Identifier	Media Radio scene

10. Repeat the same procedure to make similar settings for Bluetooth and USB State.

Phone State
On Entry Actions	RequestType	Activate
On Entry Actions	Identifier	Media Bluetooth scene
On Exit Actions	RequestType	Deactivate
On Exit Actions	Identifier	Media Bluetooth scene
Media State
On Entry Actions	RequestType	Activate
On Entry Actions	Identifier	Media USB scene
On Exit Actions	RequestType	Deactivate
On Exit Actions	Identifier	Media USB scene

##### Text Display Settings 1. With the Radio State selected, click \[ Fusion \] at the bottom left of the State Machine Editor panel. - The Fusion panel for the Radio State will be displayed. 3. Drag the \[ On Entry Actions \] connector on the right of the Radio Fusion node and move the mouse. 4. A link will appear as you move the mouse, so release the left mouse button at the any location. - The 'Select Behavior' dialog will appear. - The available behaviors will be displayed in categories. 6. Select "Action > Property > Enable Rendering" from the list and connect it to the top node. - You can also narrow down the list of behaviors in the dialog by entering "Enable Rendering" in the search field at the top of the dialog. - Enable Rendering is connected to \[Radio > On Exit Actions\]. 8. Repeat the same process for the \[On Exit Actions\] of the Radio Fusion node to connect the Enable Rendering Fusion node. 9. Make the following settings for the two Enable Renderings that have been connected.

On Entry Actions	TargetNode	Scenes>Main Menu>OverlayLayout>Radio
On Entry Actions	Visible	Enable (check box selected)
On Exit Actions	TargetNode	Scenes>Main Menu>OverlayLayout>Radio
On Exit Actions	Visible	Disable (uncheck)

10. Follow the same procedure to make similar settings for Bluetooth and USB State.

Phone State
On Entry Actions	TargetNode	Scenes>Main Menu>OverlayLayout>Bluetooth
On Entry Actions	Visible	Enable
On Exit Actions	TargetNode	Scenes>Main Menu>OverlayLayout>Bluetooth
On Exit Actions	Visible	Disable
Media State
On Entry Actions	TargetNode	Scenes>Main Menu>OverlayLayout>USB
On Entry Actions	Visible	Enable
On Exit Actions	TargetNode	Scenes>Main Menu>OverlayLayout>USB
On Exit Actions	Visible	Disable

#### Adding a Transition We will now create a transition between the states we have created so far. ##### Setting the Initial State We will set the transition from the Initial State to the Radio State, which is the initial state. 1. Double-click on Main\_StateMachine in the \[ State Machines \] folder in the Solution Explorer. - The State Machine Editor will appear. 3. After selecting Media State, double-click on it and move it into the SubChart. 4. Drag and drop \[ Transition \] from the toolbar at the top of the panel to the Initial State in the Subchart. - The Transition will be connected to the Initial State, and it will be ready to be placed. 6. While the Transition is ready to be placed, click on the Radio State. - The Initial State and Radio State will be connected by the Transition. - The direction of the Transition connection is from the Initial State to the Radio State. With this setting, the transition to the Radio State has been configured as the initial state of the Media State (Subchart). ##### Transition settings between each State Next, we will set up the transitions between each State (Radio, Bluetooth, USB). 1. From the toolbar at the top right of the State Machine Editor, drag the Transition and drop it onto the Radio State (the starting side of the transition). - The Transition (arrow) will appear on the State Machine Editor and be ready to be dragged. 2. Extend the Transition (arrow) to the Bluetooth State (end of transition) and click. - The two states, Radio and Bluetooth, will be connected by an arrow. 3. With the added Transition selected, click \[ Fusion... \] at the bottom left of the State Machine Editor panel. - The Fusion panel will open, and the Fusion diagram for the Transition will be displayed. - The Check Click Fusion node is connected to the connector (Condition) at the top right of the Transition Fusion node. 4. Select the Check Click Fusion node that is connected by default, and press the Delete key. - The Check Click Fusion node will be deleted. 5. Drag the connector (Condition) at the upper right of the Transition Fusion node, move the mouse, and release the left mouse button at the any location. - The \[Select Behavior\] dialog will open. 6. Enter “Check Key Input” in the search field at the top of the dialog. - The list of behaviors in the dialog will be narrowed down, and Condition > Input > Check Key Input will be displayed. 7. Double-click Check Key Input. - The Check Key Input Fusion node will be linked to the Condition connector of the Transition Fusion node. 8. Drag the connector (Actions) at the bottom right of the Transition Fusion node, move the mouse, and release the left mouse button at the any location. - The \[Select Behavior\] dialog will open. 9. Enter “Transition Request” in the search field at the top of the dialog. - The list of behaviors in the dialog will be narrowed down, and Action > Transition > Transition Request will be displayed. 10. Double-click Transition Request. - The Transition Request Fusion node will be linked to the Actions connector of the Transition Fusion node. 11. Make the following settings for the Transition Request Fusion node. - Clicking the upward-pointing arrow icon in the upper right of the Fusion panel will switch the display to the State.

Check Key Input
KeyCode	Key\_DownArrow
Transition Request
RequestType	Activate
Identifier	Scenes＞Media Bluetooth

12. Repeat the above steps 1 to 11 to set the following five transitions. - The RequestType for all of these is Activate (default).

Transition	Check Key Input＞KeyCode	Transition Request>Identifier
Bluetooth to USB	Key\_DownArrow	Scenes＞Media USB
USB to Radio	Key\_DownArrow	Scenes＞Media Radio
Radio to USB	Key\_UpArrow	Scenes＞Media USB
USB to Bluetooth		Scenes＞Media Bluetooth
Bluetooth to Radio		Scenes＞Media Radio

13. When all settings are complete, the screen will look like the one below.

With the above settings, the scene that is displayed when a transition occurs from each scene in the subchart has been set. #### Checking the screen transition Use the Player to check the screen transition. 1. Click the \[ Play selected scenario \] icon on the toolbar to start the Player. - Three windows will open, and you can see that the simulation display, one of the windows, displays the “Navi Title” and “Navigation” text, and that the initial transition has occurred to the Main Menu and Navigation scenes. 3. Pressing the right arrow key on the keyboard switches the text on the screen, and “Media Title”, “Radio Title”, and “Radio” are displayed in the simulation display, and the transition to the Media Menu scene (Subchart) is performed. 4. Pressing the up and down arrow keys on the keyboard switches the text on the screen, and the transition to the “Radio”, “Bluetooth”, and “USB” scenes in the Subchart is performed sequentially. 5. Close the CGI Panel and exit the Player. - All three windows that were open will close. In addition to the switching between the Navigation, Phone and Media scenes set in Part 2, we were able to confirm that it is also possible to switch between the Radio, Bluetooth and USB scenes, which are subcharts. However, at present, even if you switch to a scene placed in a subchart in the Media scene, when you transition back to the Navigation or Phone scene (using the left and right directional keys) and then return to the Media scene, the Radio scene, which is always set as the initial scene of the Media scene, will be displayed. If you want to display the scene that was displayed immediately before, you can do this by placing a History State in the Subchart. ### Configure History State #### Placing the History State 1. Double-click on Main\_StateMachine in the \[ State Machines \] folder in the Solution Explorer. - The State Machine Editor will appear. 3. After selecting the Media State, double-click to move it into the SubChart. 4. Select the Initial State in the Subchart and press the Delete key. - The Initial State in the Subchart will be deleted. 6. Drag and drop \[ History State \] from the toolbar at the top of the panel into the Subchart. - The History State will be placed in the Subchart. 8. Drag and drop \[Transition\] from the toolbar at the top of the panel into the Subchart. - The Transition will be connected to the Initial State, and it will be ready to be placed. 10. While the Transition is ready to be placed, click on the Radio State. - The History State and Radio State will be connected by the Transition.

#### Checking the screen transition Use the Player to check the screen transition. 1. Press the \[Play selected scenario...\] icon on the toolbar to start the Player. - Three windows will open, and you can see that the simulation display shows “Navi Title” and “Navigation” text, and that the initial transition has occurred to the Main Menu and Navigation scenes. 3. Press the right arrow key on the keyboard once. - The text “Media Title”, “Radio Title” and “Radio” will appear, and you will be taken to the Media Menu scene (Subchart). 5. Press the down arrow key on the keyboard once. - The text on the screen will change, and “Bluetooth Title” and “Bluetooth” will appear. 7. Press the right arrow key on the keyboard once, and then press the left arrow key once. - On the simulation display, “Phone Title” will be displayed, and then “Media Title” will be displayed again. - In this case, “Bluetooth” will be displayed. 9. Close the CGI Panel and exit the Player. - All three windows that were open will close. By replacing the Initial State in the Subchart with the History State, you can see that the scene transition in the Subchart has become a state that remembers the state of the previous transition.