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 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. 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 Double-click on the Main_StateMachine in the [ State Machines ] folder in the Solution Explorer.  The State Machine Editor panel will be displayed. 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. 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. In the Subchart, place one Initial State and three States from the toolbar at the top right of the State Machine Editor. 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 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. Drag the [ On Entry Actions ] connector on the right of the Radio Fusion node and move the mouse. 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. 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]. Repeat the same process for the [On Exit Actions] of the Radio Fusion node to connect the Transition Request Fusion node. Make the following settings for the two Transition Requests that you have connected. On Entry Actions RequestType Activate Identifier Media Radio scene On Exit Actions RequestType Deactivate Identifier Media Radio scene Repeat the same procedure to make similar settings for Bluetooth and USB State. Phone State On Entry Actions RequestType Activate Identifier Media Bluetooth scene On Exit Actions RequestType Deactivate Identifier Media Bluetooth scene Media State On Entry Actions RequestType Activate Identifier Media USB scene On Exit Actions RequestType Deactivate Identifier Media USB scene Text Display Settings 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. Drag the [ On Entry Actions ] connector on the right of the Radio Fusion node and move the mouse. 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. 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]. Repeat the same process for the [On Exit Actions] of the Radio Fusion node to connect the Enable Rendering Fusion node. Make the following settings for the two Enable Renderings that have been connected. On Entry Actions TargetNode Scenes>Main Menu>OverlayLayout>Radio Visible Enable (check box selected) On Exit Actions TargetNode Scenes>Main Menu>OverlayLayout>Radio Visible Disable (uncheck) Follow the same procedure to make similar settings for Bluetooth and USB State.  Phone State On Entry Actions TargetNode Scenes>Main Menu>OverlayLayout>Bluetooth Visible Enable On Exit Actions TargetNode Scenes>Main Menu>OverlayLayout>Bluetooth Visible Disable Media State On Entry Actions TargetNode Scenes>Main Menu>OverlayLayout>USB Visible Enable On Exit Actions TargetNode Scenes>Main Menu>OverlayLayout>USB 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. Double-click on Main_StateMachine in the [ State Machines ] folder in the Solution Explorer. The State Machine Editor will appear. After selecting Media State, double-click on it and move it into the SubChart. 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. 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). 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. 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. 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. Select the Check Click Fusion node that is connected by default, and press the Delete key. The Check Click Fusion node will be deleted. 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. 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. Double-click Check Key Input. The Check Key Input Fusion node will be linked to the Condition connector of the Transition Fusion node. 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. 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. Double-click Transition Request. The Transition Request Fusion node will be linked to the Actions connector of the Transition Fusion node. 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 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 Scenes＞Media Radio Radio to USB Key_UpArrow Scenes＞Media USB USB to Bluetooth Scenes＞Media Bluetooth Bluetooth to Radio Scenes＞Media Radio 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. 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. 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. 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. 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 Double-click on Main_StateMachine in the [ State Machines ] folder in the Solution Explorer. The State Machine Editor will appear. After selecting the Media State, double-click to move it into the SubChart. Select the Initial State in the Subchart and press the Delete key. The Initial State in the Subchart will be deleted. 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. 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. 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. 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. 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). Press the down arrow key on the keyboard once. The text on the screen will change, and “Bluetooth Title” and “Bluetooth” will appear. 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. 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.