IVI Sample Solution

• Overview
• Part 1: Smart Importer
• Part 2: Set-up Scene
• Part 3: Configure Behaviors
• Part 4: Animation settings
• Part 5: Configure State Machine

Overview

This tutorial describes how to configure a simple IVI solution using the file IVI_sample.psd. This file can be found in the following location:

...\2D\PSD\IVI_Sample.psd

Through this tutorial, users will learn the following:

Page	Theme	Main work content
Part 1	Basics of using Smart Importer to import a PSD file	Understanding how to use the Smart Importer to import a PSD file that was especially designed to be imported into Scene Composer. Identify various Controls and apply them in Smart Importer.  Configure Control's properties like values, texts, alternative graphics for e.g. Slider, RadioButtons Finally import the scene and prepare it for use in Scene Composer.
Part 2	Realization of a working RadioButtonGroup	Implementing a RadioButtonGroup where only one RadioButton can be selected at a time. Configuring a GroupBox with a group of RadioButtons Defining one of the RadioButtons will be defined to be the default selected object.
Part 3	Interaction using Slider, Progressbars and Buttons	Learning how to use Fusion to react on value changes and forward values using Scene Composer's predefined behaviors. Creating interactivity between a Slider and a DigitalClock using the Forward Value behavior. More interactivity between IconButtons sending a value to a ProgressBar which forwards the value to a TextValue Control. Verify the correct functionality of the configured interactions in the Player.
Part 4	Creating an Animation	Exploring the creation of an animation in Scene Composer. Introduction of Scene Composer's Animation Design and its panels. Configuring animated properties for position and size. Editing key frames. Verify the animation in the Player.
Part 5	Basics of State Machine and Transition Control	Learning how to control state transitions using a state machine. Configuring a global state machine and setting up transitions. Controlling group nodes' visibility using OnEntry/OnExit actions. Configuring the transitions to be triggered by button presses. Verifying transitions and behaviors in the Player.

Part 1: Smart Importer

This section describes the creation of a new Solution. We will use the Smart Importer to import a Photoshop .psd file. Smart Importer will analyze the PSD file and try to identify which controls are included in the picture. The final assignment of controls (such as RadioButtons, DigitalClocks, CheckBoxes, etc.) however has to be performed manually. After some configuration effort Scene Composer Controls can be imported into your Scene Composer solution.

Creating a new Solution

1. Start Scene Composer and double-click on [Empty] from [Samples and Templates] on the startup screen.
   • A new solution will be created based on the Empty solution template.
     

2. In the Render Targets panel, select [Display (0)].

   • • The [Properties] panel will display [Display] properties.

       

       
       
       

3. In the [Display] section of the [Properties] panel configure the resolution as in the table below.

   X Resolution	640
   Y Resolution	960

4. Click [Save solution...] in the toolbar.

   • The Windows [Save As] dialog will appear.

     

     
     

5. In the [Save As] dialog choose a location and name for your solution and click [Save].
   • The solution is saved.

Using Smart Importer

In our example we will use the Smart Importer to import a Photoshop .psd file. Smart Importer will analyze the PSD file and try to identify which controls are included in the picture. After some configuration effort you can directly create CGI Studio Controls wherever it is applicable.

Configuration of Header

1. Select [Import > Smart Importer > From Local File...] from the menu bar.
   • A Windows Open dialog titled Smart Importer will be opened.
     
     
2. Select the following Photoshop file and press [Open].
   • The [Smart Importer] window is opened (please be patient, this may take a while).
   • The Photoshop file's layers will be displayed in the Layer Tree area marked in orange in the image below.
   • The Layer Tree is displayed in tree style. Initially it is collapsed, but it can be expanded via double-clicking or using the triangle to the [IVI_Sample]'s left.
     

     File path

     <cgi-studio-root>\cgi_studio_content\2D\PSD\IVI_Sample.psd

      

     

     
     

3. Expanding the Layer Tree navigate to [IVI_Sample > Header > DigitalClock] and select [DigitalClock].
   • In the Smart Importer's Preview the DigitalClock on the top left is marked with a yellow border.
   • The Control List to the right displays applicable Controls.
     
     
4. In the [Control List] click on the [Apply] button on the right side of the [DigitalClock] control (see image below).
   • Based on the Photoshop file's DigitalClock the Scene Composer control DigitalClock will be created when the import is done.
   • DigitalClock will be displayed in a different color and with a different icon in the Layer Tree to indicate successful assignment of a Scene Composer control.
     

     
     

5. Switch to the [Basic Properties] tab and tick the checkboxes noted in the table below.
   • After import the created SceneComposer Control DigitalClock will be configured with these property values.
     

     ShowFull24Hours	TRUE
     ShowSeconds	TRUE

6. In the Layer Tree select [TellTale_Error].
   • In the Smart Importer's Preview the TellTale_Error on the top right is marked with a yellow border.
   • The Control List panel to the right displays applicable Controls.
     
     
7. In the Control List panel click the [Apply] button next to [Tell Tale].
   
   • The Scene Composer Control TellTale is applied to the Photoshop file's TellTale_Error layers.
     
   • In the Appearance Tab you can see that the Telltale's properties OnStateImage and OffStateImage are automatically configured with the Photoshop file's layers OnStateImage and OffStateImage.
   • TellTale_Error as well as its OnStateImage and OffStateImage will be displayed in a different color and with different icon in the Layer Tree to indicate successful assignment of a Scene Composer control.

Configuration of Menu Buttons

1. In the Layer Tree expand [Menu_button].
   • The Layer Tree displays 4 TextButtons, each of which has 3 images (NormalImage, PressedImage and FocussedImage).
     
     
2. In the Layer Tree select TextButton_Car.
   
   • The Control List offers a list of Controls to apply.
     
     
3. In the Control List apply the Scene Composer control TextButton.
   • In the Appearance tab you can see that NormalImage, PressedImage and FocussedImage have been configured automatically.
   • In the Layer Tree the TextButton has changed its color and its icon.
     
     
4. In the [Basic Properties] tab empty the textfield of the Text property (delete "Text...").
   • The textfield of property Text is empty.
     
     
5. Repeat the 3 steps above with the other TextButtons to achieve a configuration as in the table below.
   • The menu buttons are configured for importing.
     

     Target Layer	Control List	Basic Properties
     TextButton_Car	TextButton	Text	(blank space)
     TextButton_Navigation	TextButton	Text	(blank space)
     TextButton_Phone	TextButton	Text	(blank space)
     TextButton_Music	TextButton	Text	(blank space)

Configuration of Music Tree

Configuration of Comfort Tree

Configuration of Navigation Tree

Completing the Import

1. Since configuration is done now, click the [OK] button on the bottom of the Smart Importer window.
   • The Photoshop file will be imported with all configured controls and settings.
   • The imported content can be viewed in the Scene Composer's Solution Explorer.
   • The imported scene IVI_Sample will be displayed in the Scene Editor.
   • In the Scene Tree panel you can confirm that all configured controls and settings made in Smart Importer have been applied during the import.
     
2. In the Scene Tree panel right-click on the Navigation GroupNode and uncheck "Node Rendering Enabled" in the context menu. Alternatively press <Ctrl + E> on your keyboard.
   • The Navigation GroupNode will not be rendered (i.e. displayed) by default.
3. In the Render Targets panel enable displaying the imported "IVI_Sample\DocumentView" camera in display design.
   • Rendering of camera "IVI_Sample\DocumentView" is enabled.

Part 2: Set-up Scene

This section uses the scene imported in Part 1. The steps describe how to group RadioButtons with a GroupBox so that only one of the RadioButtons can be selected at a time.

Activating the Imported Scene

1. In the Solution Explorer navigate to the imported IVI_Sample scene and move it to the solution's scene folder via drag and drop. Please see the origin and destination paths in the table below.

   • The IVI_Sample scene has been moved to the Solution's Scenes folder, where you can also find Scene2D and Scene3D.
     

     Origin Path	Solution > Resources > IVI_Sample > Scenes > IVI_Sample
     Destination Path	Solution > Scenes > IVI_Sample

2. Delete the Scene2D and Scene3D that are in folder Solutions > Scenes.
   • Scene2D and Scene3D are deleted, IVI_Sample scene is the only scene in this folder.
     
3. Double-click the IVI_Sample scene to open it.
   • IVI_Sample scene is displayed in the Scene Editor.
   • IVI_Sample scene is displayed in the Scene Tree panel.
     
     
4. In the Scene Tree panel expand to [IVI_Sample > IVI_Sample > Comfort > Air].
   • In the Scene Tree panel the air flow RadioButtons are visible.
     
     
5. From the Toolbox panel's [Nodes 2D] section drag a [Group] node into the Scene Tree panel directly onto the [Air] Group node.
   • In the Scene Tree panel a new [Group] node has been created inside the [Air] Group node.
     
     
6. In the Scene Tree panel select the following RadioButtons and move them into the newly created [Group] node via drag and drop.

   • The respective RadioButton nodes are grouped together in the [Group] node.
     

     RadioButtons	RadioButton_Outside air
     	RadioButton_Inside air
     	RadioButton_AUTO

7. From the Toolbox panel's [Controls] section under [Container] drag a GroupBox into the Scene Tree panel directly onto the [Air] Group node.
   • A GroupBox node is created and is visible in the Scene Tree panel as last entry of the [Air] Group node.
     
     
8. In the Scene Tree panel click on the little triangle on the left of the newly created GroupBox node.
   • The GroupBox node is expanded in the Scene Tree panel and a Content anchor gets visible.
     
     
9. In the Scene Tree panel drag the [Group] node with the RadioButtons onto the [GroupBox]'s Content anchor.
   • The RadioButtons are now grouped together.
   • You can select only one of the grouped radio buttons at a time.
     
     
10. In the Scene Tree panel select the GroupBox node. In the Properties panel's [Control] section configure the properties according to the table below.
    
    • Enable Background is set to FALSE.
    • The GroupBox node's background is disabled.
      

      To easily configure the Default Selected Object lock the Properties panel to the GroupBox by clicking on the padlock in the Properties panel's top right corner. From the Scene Tree panel drag RadioButton_AUTO onto the Default Selected Object property and release as soon as the cursor changes. Unlock the Properties panel by clicking on the padlock again.

      Default Selected Object	Enable Background
      IVI_Sample > Comfort > Air > GroupBox > Content > Group > RadioButton_AUTO	FALSE

Part 3: Configure Behaviors

This page explains how to configure interaction between various components of the scene with Behaviors using Fusion.

Configuring the Music's Playback Time Slider

1. In the Scene Tree panel navigate to and select the Slider control, which can be found following the path below.
   • The Slider Control is selected.
     

     Scene Tree Path

     IVI_Sample > IVI_Sample > Music > Slider

     
     
     
     
2. In the Menu select [View > Fusion > Fusion].
   
   • The Fusion editor will be opened, hiding the Scene Editor.
   • The Slider Fusion Node is displayed as Top node with a set of properties.
     
     
3. In the [Slider] Fusion Node drag the Behaviors 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.
     
     
4. In the Select Behavior dialogue's input field start typing "Forward Value".
   
   • While you are typing the list of behaviors gets smaller as the content of the input field serves as a filter.
     
     
5. In the Select Behaviors dialog double-click the Forward Value behavior.
   • In Fusion a new [Forward Value] node is created, which is connected to the Slider's Behaviors connector.
     
     
6. In the [Forward Value] node click the search icon next to the property "Target Node".
   • The Choose Item dialog will be opened.
     
     
7. Select the IVI_Sample scene's DigitalClock_Time control, which can be found following the path below and click [OK].
   • DigitalClock_Time is set as Forward Value's TargetNode.
   • When the Slider's value is changed, the value will be forwarded to DigitalClock_Time.
     

     Path	IVI_Sample > IVI_Sample > Music > DigitalClock_Time

     
     

Configuring Seat Heater Setting

Creating Fusion Nodes

1. In the Scene Tree panel select the Seat_Right's "Icon_Button_-", which can be found following the path below.
   • Fusion displays the Fusion Node for "Icon_Button_-".
     

     Path	IVI_Sample > IVI_Sample > Comfort> Seat_Right > Icon_Button_-

     
     
     
     
2. In Fusion drag the Fusion Node's Behaviors connector to the right and release the mouse button.
   
   • The Select Behavior dialog will open.
     
     
3. Find the "Event Handler" behavior and double-click it.
   • A Fusion node for the Event Handler behavior is created.
     
     
4. Using the Event Handler's Condition connector connect a Check Click condition.
   • A Fusion node for the Check Click condition is created.
     
     
5. Using the Event Handler's Actions connector, connect a Send Value As Event behavior.
   
   • A Fusion node for the Send Value As Event behavior is created.
   • The Fusion diagram will look like in the image below.
     
     
     
     
6. Select the 3 Fusion Nodes you have just created (Event Handler, Check Click, Send Value As Event) and copy them either using the context menu "Copy" or via the keyboard shortcut <Ctrl + C>.
   • Fusion Nodes are copied and ready to be pasted into another Fusion diagram.
     
     
7. Select the IconButtons in the table below one by one and paste these Fusion Nodes into their Fusion diagrams either using the context menu "Paste" or via the keyboard shortcut <Ctrl + P>.
   • EventHandler, Check Click condition and Send Value As Event behavior have been created for all 4 seat heating Icon_Buttons.
     

     Path	IVI_Sample > IVI_Sample > Comfort> Seat_Right > Icon_Button_+
     Path	IVI_Sample > IVI_Sample > Comfort> Seat_Left > Icon_Button_-
     Path	IVI_Sample > IVI_Sample > Comfort> Seat_Left > Icon_Button_+

     
     
     
     
     

Configuring Value Behaviors

When pressing Icon_Button_-, the value should be decreased (-1,00) and when pressing Icon_Button_+, the value should be increased (+1,00). These value changes need to be reflected in the corresponding ProgressBar, which will be set as TargetNode.

1. In Scene Tree panel select the Icon_Buttons of Seat_Right and Seat_Left one by one. In Fusion configure their Send Value As Event Nodes that you created in "Creating fusion nodes" as in the table below.
   • The Send Value As Event Nodes are fully configured and functional.
     

     Seat_Right	Icon_Button_-	Icon_Button_+
     TargetNode	Seat_Right > ProgressBar	Seat_Right > ProgressBar
     Value	-1,00	1,00
     Change Value	Relative	Relative

     
     
     
     
     
     
     

     Seat_Left	Icon_Button_-	Icon_Button_+
     TargetNode	Seat_Left > ProgressBar	Seat_Left > ProgressBar
     Value	-1,00	1,00
     Change Value	Relative	Relative

     
     
     
     
     
     
     
     
     
2. In the Scene Tree panel select the Seat_Right > ProgressBar. In Fusion drag the ProgressBar's Behaviors connector to the right and release the mouse button. 
   
   • The Select Behavior dialog box will open.
     
     
3. Find the "ForwardValue" behavior and double-click it.
   • A Fusion node for ForwardValue behavior is created.
     
     
4. Configure the ForwardValue behavior's TargetNode to the Seat_Right's TextValue_Temperature node.
   • The ProgressBar is configured to forward its value to the respective TextValue_Temperature node.
     

     	Seat_Right > ProgressBar --> Fusion ForwardValue Node
     TargetNode	IVI_Sample > IVI_Sample > Comfort> Seat_Right > TextValue_Temperature

     
     
     
     
     
5. Repeat steps 2 - 4 with Seat_Left > ProgressBar configure the TargetNode as in the table below.
   
   • The ProgressBar is configured to forward its value to the respective TextValue_Temperate node.
     

     	Seat_Left > ProgressBar --> Fusion ForwardValue Node
     TargetNode	IVI_Sample > IVI_Sample > Comfort> Seat_Left > TextValue_Temperature

     
     
     
     
     

Checking the Configuration in Player

Use the Player to check the functionality of the behaviors configured in Fusion. 

Checking the Behavior's Functionality

In the Player you can test the interactivity between the music Slider and the numeric display of the playback time.

1. Save your solution and 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 shows the IVI_Sample scene,
     
     
2. In the simulation display drag the slider's knob below the "Song Title".
   
   • While dragging you can watch the digital playback time, which is displayed below the slider, increase and decrease accordingly.

      

3. In the scene's lower "Comfort" part click on the [+] and [-] buttons for seat heating.
   

   • The progress bar will change its value
   • The numeric temperature displayed above the progress bar will be updated according to your operation.
     
     
     
     
     

Part 4: Animation settings

This section describes how to create an animation that animates the position and size of an object. Here, the thumbnail image of the music is animated.

Configuring the Animation

1. In the Scene Tree panel navigate to the RenderNode2D Cover and right-click it. Select [Add Animated Property...] from the context menu. The Cover node can be found in the path below.
   • The Property Animation Configuration dialog will be opened.
     

     Scene Tree Path

     IVI_Sample > IVI_Sample > Music > Cover

     
     
     
     
2. In the Property Animation Configuration apply the settings as in the table below and press [OK].
   • A new animation MyAnimation has been created.
   • The new animation is visible in the Solution Explorer.
   • Scene Composer switches to Animation Design. Three new panels are visible:
     • Animation Configuration panel
     • Animation Timeline panel
     • Animation Values panel
       

     To switch back to Scene Design press the [Scene Design] button in Scene Composer's main toolbar.

     Create new Animation	MyAnimation
     Location	/Animations
     Property	Position
     Interpolation	Spline
     Create new keyframe sequence	X and Y

     

     
     
3. In the Animation Configuration panel's scene tree select the same Cover node as before. In the Properties panel click on the [+] button.
   • The Property Animation Configuration will be opened.
     
     
4. In the Property Animation Configuration apply the settings as in the table below and press [OK].
   • A new keyframe sequence for the property "scale" has been added to the existing animation MyAnimation.
   • This can be seen in the Animation Timeline, in the Animation Values panel and in the Properties panel.
     

     Selected Animation	MyAnimation
     Property	Scale
     Interpolation	Spline
     Create new keyframe sequence	X and Y

     
     
     
     
     
     
     
     
5. In the Animation Values panel select the animated properties and enter the configurations from the table below.
   • The keyframes for the animated properties are fully configured.
     

     IVI_Sample\Music\Cover\Position\XY
     Time	X	Y
     0	138.00	140.00
     1000	104.00	207.00

     IVI_Sample\Music\Cover\Scale\XY
     Time	X	Y
     0	0.50	0.50
     1000	1.00	1.00

     
     
     
     
     
     
     
     

Check Animation in Player

Use the Player to check the configured animation.

1. Save your solution and 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 shows the IVI_Sample scene.
     
     
2. In CGI Panel below the menu select your animation from the drop-down list and press the "run animation" button right next to the drop-down list.
   
   • The configured animation of the Cover image will be started and played once in the simulation display.
     
   

Part 5: Configure State Machine

State Machine feature is used to configure a Music State and a Navigation State. Transitions are created from one state to the other. Behaviors are set up using the powerful Fusion Editor. These behaviors trigger the configured transitions and set GroupNodes visible and invisible.

Configuring the State Machine

Using the State Machine Editor configure the already existing GlobalStateMachine to incorporate 2 states: Music and Navigation. Connect these states with transitions in both directions. Define these transitions to be triggered by TextButton_Music and TextButton_Navigation.

1. In Solution Explorer navigate to the GlobalStateMachine which can be found following the path below. Double-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 Initial State to the State.
     

     Solution Explorer Path

     Solution > State Machines > GlobalStateMachine

     
     
     
     
2. In State Machine Editor add another state by dragging a State from the upper right toolbar and dropping it into the State Machine diagram below the already existing state.
   • A new state "State_1" will be created in the State Machine Editor.
     
     
3. In State Machine Editor add a transition from "State" to "State_1" and another transition from "State_1" to "State". To do this drag a Transition from the toolbar onto the outgoing state (e.g. State) then click onto the second state (e.g. State_1).
   • 2 Transitions will be added from State to State_1 and back
     
     
4. 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

     
     
     
     
     
5. In State Machine Editor select the transitions one by one. In the Properties panel's [Transition] section configure the Sender property according to the table below.
   • Both transitions are configured to be executed whenever the corresponding TextButton is pressed.

     To easily configure this property lock the Properties panel clicking the padlock icon in the panel's top right corner. Drag the desired node from the Scene Tree onto the input field of the property to be configured. Release the mouse button when the mouse cursor is changed. The input field will be filled. Finally click the padlock icon again to unlock the Properties panel.

     Transition	Sender [Event Filter]
     Music -> Navigation	IVI_Sample > IVI_Sample > Menu_button > TextButton_Navigation
     Navigation -> Music	IVI_Sample > IVI_Sample > Menu_button > TextButton_Menu

     
     
     
     
     
     
     
     

Configuring Behaviors using Fusion

Here we are using Fusion to define the actions to be performed when entering and exiting the Music and Navigation State. In the Fusion diagram of TextButton_Music and TextButton_Navigation we connect a HandleControlState behavior.

1. 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].
     
     

     
     

2. 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.
     
     
3. 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 Music'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.

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

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

     
     

     
6. 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 Entry Actions > EnableRendering
     TargetNode	IVI_Sample > IVI_Sample > Navigation
     Visible	TRUE

     
     
     

     NavigationNode	On Exit Actions > EnableRendering
     TargetNode	IVI_Sample > IVI_Sample > Navigation
     Visible	FALSE

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

     
     
     
     
8. Drag the Behaviors connector to the right and release the mouse button.
   • The Select Behaviors dialog will be opened
     
     
9. Find the "Handle Control State" behavior and double-click it.
   • A new Fusion node [Handle Control State] will be created.
     
     
10. 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

Check the Transitions in Player

Use the Player to check the configured transitions between Music and Navigation.

1. Save your solution and 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 shows the IVI_Sample scene.
     
   • The Music GroupNode will be displayed.
     
2. In the simulation display click the Navigation menu button.
   • The Navigation GroupNode will be displayed.
     
3. In the simulation display click the Music menu button.
   • The Music GroupNode will be displayed again.