# IVI Sample Solution # 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**
- This sample uses the Smart Importer to import necessary images and create pre-configured Controls. - RadioButtons will be organized inside a GroupBox so that only one RadioButton can be selected at a time. - Behaviors will be configured using Fusion to create simple interactions. - An animation will be created configuring key frames in Scene Composer's Animation Design. - State Machine Editor is used to create transitions, and switching between Music and Navigation context. Necessary behaviors will be configured in Fusion.
Through this tutorial, users will learn the following:
**Page****Theme****Main work content**
Part 1Basics 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 ControlLearning 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 Resolution960
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.
ShowFull24HoursTRUE
ShowSecondsTRUE
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\_CarTextButtonText(blank space)
TextButton\_NavigationTextButtonText(blank space)
TextButton\_PhoneTextButtonText(blank space)
TextButton\_MusicTextButtonText(blank space)
#### Configuration of Music Tree
1. In the **Layer Tree** expand **\[Music\]**. - The **Layer Tree** displays among other things a Slider, DigitalClock\_Time, DigitalClock\_Total\_Time and a CheckBox. 2. In the **Layer Tree** select the target layer. Apply the controls in the **\[Control List\]** tab and configure the property values in the **\[Basic Properties\]** tab according to the table below. - The controls of the Music part are configured for importing.
**Target Layer****Control List****Basic Properties**
SliderSliderValueFloat9000
MinimumFloat0
MaximumFloat18000
DigitalClock\_TimeDigitalClockShowFull24HoursBooleanTRUE
ShowSeconds BooleanFALSE
DigitalClock\_Total\_Time DigitalClock TimeUInt3218000
ShowFull24HoursBooleanTRUE
ShowSecondsBooleanFALSE
CheckBox CheckBox TextString(blank space)
#### Configuration of Comfort Tree
1. In the **Layer Tree** expand **\[Comfort > Seat\_Left\]**. - The **Layer Tree** displays among other things Seat\_Left with TextValue\_Temperature, Icon\_Button\_+, Icon\_Button\_-, ProgressBar and SeatHeating\_Left. 2. In the **Layer Tree** select the **Seat\_Left**'s target layer. Apply the controls in the **\[Control List\]** tab and configure the property values in the **\[Basic Properties\]** tab according to the table below. - The controls of Comfort's Seat\_Left are configured for importing.
**Seat\_Left**
**Target Layer****Control List****Basic Properties**
TextValue\_TemperatureText ValueValueFloat23
FormatTextString%02d
Icon\_Button\_+IconButton
Icon\_Button\_-IconButton
ProgressBarProgressBarValueFloat23
MinimumFloat16
MaximumFloat28
SeatHeating\_LeftCheckBoxTextString(blank space)
3. In the **Layer Tree** expand **\[Comfort > Seat\_Right\]**. - The **Layer Tree** displays among other things Seat\_Right with TextValue\_Temperature, Icon\_Button\_+, Icon\_Button\_-, ProgressBar and SeatHeating\_Left. 4. In the **Layer Tree** select the **Seat\_Right**'s target layer. Apply the controls in the **\[Control List\]** tab and configure the property values in the **\[Basic Properties\]** tab according to the table below. - The controls of Comfort's Seat\_Right are configured for importing.
**Seat\_Right**
**Target Layer****Control List****Basic Properties**
TextValue\_TemperatureText ValueValueFloat23
FormatTextString%02d
Icon\_Button\_+IconButton
Icon\_Button\_-IconButton
ProgressBarProgressBarValueFloat23
MinimumFloat16
MaximumFloat28
SeatHeating\_RightCheckBoxTextString(blank space)
5. In the Layer Tree expand **\[Comfort > Fan\]**. - The **Layer Tree** displays among other things a Slider. 6. In the **Layer Tree** select **Fan**. Apply the control in the **\[Control List\]** tab and configure the property values in the **\[Basic Properties\]** tab according to the table below. - The controls of the Comfort's Fan are configured for importing.
**Fan**
**Target Layer****Control List****Basic Properties**
SliderSlider
7. In the Layer Tree expand **\[Comfort > Air\]**. - The **Layer Tree** displays among other things a RadioButton\_Outside air, RadioButton\_Inside air and RadioButton\_AUTO. 8. In the **Layer Tree** select **Air**. Apply the control in the **\[Control List\]** tab and configure the property values in the **\[Basic Properties\]** tab according to the table below. - The RadioButtons are configured for importing.
**Air**
**Target Layer****Control List****Basic Properties**
RadioButton\_Outside airRadioButtonTextString(blank space)
RadioButton\_Inside air RadioButton Text String (blank space)
RadioButton\_AUTO RadioButton Text String (blank space)
9. When expanding these **RadioButtons** in the Layer Tree, you can see that each of them contains a **Control\_Background**. **Uncheck the checkbox** of these Control\_Background images in the Layer Tree as seen in the image below. - All images for the RadioButtons are configured for importing
**\[Air\] In the Layer Tree Panel **
**Target Layer****Configuration Details**
RadioButton\_Outside air/Control\_Backgrounddisable (uncheck checkbox in Layer Tree)
RadioButton\_Inside air/Control\_Background disable (uncheck checkbox in Layer Tree)
RadioButton\_AUTO/Control\_Background disable (uncheck checkbox in Layer Tree)
#### Configuration of Navigation Tree
1. In the Layer Tree enable the Navigation tree by checking the checkbox to the left of **Navigation**. - Navigation will be enabled as seen in the image below.
#### 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\_AUTOFALSE
# Part 3: Configure Behaviors This page explains how to configure interaction between various components of the scene with Behaviors using Fusion.
- Changing the playback time value by moving the slider knob for playback music - Changing the state of the temperature progress bar by pressing the seat heater buttons
### 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.
PathIVI\_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\_-**".
PathIVI\_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.
PathIVI\_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**
TargetNodeIVI\_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**
TargetNodeIVI\_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**
0138.00140.00
1000104.00 207.00
IVI\_Sample\\Music\\Cover\\**Scale**\\XY
**Time****X****Y**
00.500.50
10001.001.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.