Best Practice

• State Machine Solution
• Overview
• Part 1: Prepare Scenes
• Part 2: Configuring State Machine
• Part 3: Subchart and History State
• Part 4: Add an Incoming Call
• Part 5: Count Received Calls
• 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
• Advanced Cluster Solution
• Overview
• Advanced Cluster Part 1
• Advanced Cluster Part 2
• Advanced Cluster Part 3
• Advanced Cluster Part 4
• GettingStartedControls Solution
• Overview
• GettingStartedControls Part 1
• GettingStartedControls Part 2
• GettingStartedControls Part 3
• GettingStartedControls Part 4
• GettingStartedControls Part 5
• Content Design Best Practices
• Introduction
• Content Design Guidelines
• Content Creation
• Creating Content with various DCC Tools
• Creating a 3D Font for CGI Studio
• CGI Studio Smart Importer
• Smart Importer Best Practices
• Introduction
• Recommended PSD Layers Structure for Smart Importer
• Usage example (Importing and assigning Control)
• Mantis User Documentation
• Introduction
• View tickets
• How to create a ticket
• View ticket

State Machine Solution

Overview

This tutorial aims to help users master the state transition and behavior control mechanisms between multiple scenes using the state machine functionality in CGI Studio. Specifically, the tutorial covers a step-by-step approach to developing practical HMI (Human-Machine Interface) applications, including UI construction, scene management, switching behaviors based on user interactions, managing history, conditional branching, and displaying the number of incoming calls.

Through this tutorial, users will learn the following:

Page	Theme	Main work content
Part 1	Basics of Scene Composition and UI Design	Understanding how to create and manage multi-scene UIs in CGI Studio. Building 9 scenes including Main Menu, Navigation, Media, Phone, etc. Manipulating text nodes, overlay layouts, and node positioning. Adding Clear/Swap scenes to manage buffers and control sequences.
Part 2	Basics of State Machine and Transition Control	Learning how to control scene transitions using a state machine. Recreating a global state machine and linking it to scenes. Controlling scene visibility using OnEntry/OnExit actions. Configuring transitions using key inputs (left/right arrow keys). Verifying transitions and behaviors in the Player.
Part 3	Transition Optimization with Subcharts and History State	Using Subcharts and History State for advanced scene management. Converting the Media State into a Subchart to manage sub-scenes for Radio, Bluetooth, and USB. Implementing History State to retain information about the previously active scene. Configuring bidirectional transitions and state restoration between scenes. Verifying scene selection and behavior using the up/down arrow keys.
Part 4	Adding Incoming Call Scene and Popup Control	Implementing popup control and state transitions for incoming calls. Creating an IncomingCall scene based on the existing Phone scene. Controlling the display with the Enter key for call display and the ESC key for hiding. Constructing CallActive/CallInactive state machines. Customizing the visuals using SolidColorNode.
Part 5	Counting Incoming Calls and Updating UI	Understanding how to send events through the state machine and update the UI. Adding a text node with “Received Calls: %d” to the Main Menu scene. Counting the number of incoming calls when entering the CallActive State. Sending relative values as events using Send Value As Event. Displaying call count information in real time using Format String.

 

 

 

Part 1: Prepare Scenes

This page explains the procedure for creating and configuring a multi-scene user interface (UI) using CGI Studio.

It covers the creation, duplication, and editing of nine scenes, including Main Menu, Navigation, Media Menu, and Phone, where text nodes and overlay layouts are placed to build the UI. The process also includes deleting unnecessary scenes, configuring rendering settings, optimizing buffer management (introducing Clear/Swap scenes), and setting camera sequence numbers. Ultimately, the necessary preparations for state transitions (state machine configuration) between scenes will be completed.

The scenes you create will be used when you actually construct the State Machine in Part 2 and beyond.

Creating the Main Menu Scene

The Main Menu scene is used to display the current context (Navigation, Media, Phone).

Renaming the Scene and Placing Nodes

1. Start Scene Composer and select [Empty] from [Samples and Templates] on the startup screen.

   • A new solution will open as an Empty solution.
     
     

2. In the Solution Explorer, select [Scene2D] under the [Scenes] folder, then choose [Rename] from the context menu.

   • Scene2D will enter rename mode.
     
     

3. Rename it to [Main Menu].
   

   

   
   
   

4. Drag and drop [Overlay Layout] from [Nodes 2D] in the [Toolbox] panel onto the [Main Menu] scene tree.

   • [OverlayLayout] will be added to the scene tree.

   • The [Position] under [Transform] in the [Properties] panel will be automatically set to X=0, Y=0.
     
     

5. Similarly, drag and drop [Text Node] from [Nodes 2D] onto [Overlay Layout].

   • [TextNode] will be added as a child node of [OverlayLayout].
     

     

     
     
     

6. Select [TextNode], then choose [Clone] from the context menu.

   • The [Clone Item] dialog will appear.
     

     

     
     
     

7. In the [Clone Item] dialog, select the [Multiple Clone] tab, set [ Number of Copies ] to 2, and click [OK].

   • [TextNode_1] and [TextNode_2] will be added as child nodes of [OverlayLayout].
     

     

Renaming Text Nodes

1. Rename the three added text nodes to Navi, Media, and Phone.

   • To rename, select the node, choose [Rename] from the context menu, or press F2.
     

     

     
     
     

2. Select [Navi] in the scene tree.

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

3. In the [2D Text Node] section of the [Properties] panel, change [Text] to "Navi Title".

   • "Navi Title" will be displayed in the Scene Editor (overlapping with other text nodes).
     

     

     
     
     

4. Similarly, update [Text] for [Media] and [Phone].

   • The Scene Editor will display the text nodes overlapping.
     
     

5. Select [Media] and [Phone] together in the scene tree, then uncheck [Enable Rendering] in the [Properties] panel under [Item].

   • Rendering for [Media] and [Phone] will be disabled, displaying only "Navi Title" in the Scene Editor.
     

     

Deleting Unnecessary Scenes

Delete unnecessary scenes from the Empty sample solution that are not needed for this tutorial.

1. In [Solution Explorer], select [Scene3D] under the [Scenes] folder, then press Delete.

   • The [Delete Item] dialog will appear.
     
     

2. Click [OK] in the dialog to proceed with deletion.

   • [Scene3D] will be removed from the [Scenes] folder in [Solution Explorer].

The Main Menu scene setup is now complete.

Adding the Navigation Scene

Add two new scenes, setting them as Navigation and Phone, with text displaying "Navigation" and "Phone" respectively.

1. Click [Add a new 2D Scene] in the toolbar.

   • The [Add New Scene 2D] dialog will appear.
     

     

     
     
     

2. In the [Add New Scene 2D] dialog, rename [Name] to "Navigation", then click [OK].

   • The [Navigation] scene will be added under [Scenes] in [Solution Explorer].
     

   • The Navigation scene will appear in the scene tree.
     
     

3. Drag and drop [Text Node] from [2D Nodes] in the [Toolbox] onto the Navigation scene tree.

   • "Text" will be displayed in the Scene Editor.
     
     

4. In the [Properties] panel, change [Text] under [2D Text Node] to "Navigation".

   • The text displayed in the Scene Editor will change to "Navigation".
     

     

     
     
     

5. Set the text node position using [Transform] in the [Properties] panel as the below table.

   Position X	25
   Position Y	150

The Navigation scene setup is now complete.

Adding the Phone Scene

The Phone scene is created by duplicating the Navigation scene.

1. In [Solution Explorer], select [Scenes > Navigation], then choose [Clone] from the context menu.

   • The [Clone Item] dialog will appear.
     

     

     
     
     

2. In the [Clone Item] dialog, select [Single Clone], rename [Name] to "Phone", then click [OK].

   • The Phone scene will be created.

   • The scene tree will display the newly created Phone scene.
     
     

3. Select the text node in the Phone scene tree, then update [Text] in the [Properties] panel under [2D Text Node] to "Phone".

   • The text displayed in the Scene Editor will change to "Phone".

The Phone scene setup is now complete.

Adding the Media Menu Scene

This scene is similar to the Main Menu scene. It includes an overlay layout node with three child text nodes: Radio, Bluetooth, and USB. Therefore, the Main Menu scene will be duplicated and set up it as Media Menu scene.

1. In Solution Explorer, select [Scenes > Main Menu], then choose [Clone] from the context menu.

   • The [Clone Item] dialog will appear.
     
     

2. In the [Clone Item] dialog, select [Single Clone], rename [Name] to "Media Menu", and click [OK].

   • A new scene named Media Menu will be created.

   • The scene tree panel will display the Media Menu scene.

   • The scene tree will contain an overlay layout node with three text nodes.
     
     

3. Select the Overlay Layout in the scene tree, then update the [Position] under [Transform] in the Properties panel:

   Position X	0
   Position Y	50

   
   

4. Select each text node in the scene tree and update the Properties as follows:

   General > Name	2D Text Node > Text
   Radio	Radio Title
   Bluetooth	Bluetooth Title
   USB	USB Title

The Media Menu scene setup is now complete. Since this was duplicated from the Main Menu scene, the Enable Rendering setting for Bluetooth and USB text nodes is disabled, so only "Radio Title" will be displayed in the Scene Editor.

Creating the Media Radio Scene

The Media Radio scene is displayed when the Media Menu is selected. This scene is created by duplicating the previously created Navigation scene.

1. In Solution Explorer, select [Scenes > Navigation], then choose [Clone] from the context menu.

   • The [Clone Item] dialog will appear.
     
     

2. In the [Clone Item] dialog, select [Single Clone], rename [Name] to "Media Radio", and click [OK].

   • A new scene named Media Radio will be created.

   • The scene tree panel will display the Media Radio scene.
     
     

3. Select the Text Node in the scene tree and update the [Text] under [2D Text Node] in the Properties panel to "Radio".

   • The text displayed in the Scene Editor will change to "Radio".

The Media Radio scene setup is now complete.

Adding the Media Bluetooth and Media USB Scenes

Two additional scenes, Media Bluetooth and Media USB, will be created similarly to the Media Radio scene by duplicating it.

1. In Solution Explorer, select [Scenes > Media Radio], then choose [Clone] from the context menu.

   • The [Clone Item] dialog will appear.
     
     

2. In the [Clone Item] dialog, select [Multiple Clone], set [Number of Copies] to 2, and click [OK].

   • Two new scenes named Media Radio_1 and Media Radio_2 will be created.

   • The scene tree panel will display the newly created Media Radio_1 scene.
     
     

3. In Solution Explorer, rename Media Radio_1 to Media Bluetooth and Media Radio_2 to Media USB.
   
   

4. Select the text node in the Media Bluetooth scene tree and update the [Text] under [2D Text Node] in the Properties panel to "Bluetooth".

   • The text displayed in the Scene Editor will change to "Bluetooth".}
     
     

5. Similarly, select the text node in the Media USB scene tree and update the [Text] to "USB".

   • The text displayed in the Scene Editor will change to "USB".

The Media Bluetooth and Media USB scene setups are now complete.

Adding the Clear Scene

A Clear Scene containing only a camera is added to erase the contents of the old framebuffer. This scene is always rendered to ensure that previous frame contents do not appear.

1. Click the [Add a new 2D Scene] button in the toolbar.

   • The [Add New Scene 2D] dialog will appear.
     
     

2. In the dialog, set [Name] to "Clear", then click [OK].

   • The Clear scene will be added under the [Scenes] hierarchy in Solution Explorer.

The Clear Scene setup is now complete.

Adding the Swap Scene

An additional Swap Scene is required to ensure proper rendering (switching of render target buffers) and correct display in Scene Composer.

However, this scene is only necessary for Scene Composer display purposes and is not required for the Courier application, as buffer swapping is handled automatically in Courier.

1. Click the [Add a new 2D Scene] button in the toolbar.

   • The [Add New Scene 2D] dialog will appear.
     
     

2. In the dialog, set [Name] to "Swap", then click [OK].

   • The Swap scene will be added under the [Scenes] hierarchy in Solution Explorer.

   • The scene tree panel will display the newly created Swap scene.

The Swap Scene setup is now complete.

Disabling Clear Color Buffer

Since the Clear Scene erases the contents of the old framebuffer, the Clear Color Buffer setting should be disabled for all scene cameras except the Clear Scene camera. This is necessary as all scene cameras overlap.

1. In the [Render Targets] panel, select all cameras except the Clear Camera.

   • Hold down Shift key while selecting to choose multiple cameras.
     

     

     
     
     

2. In the Properties panel, under the [Camera] category, uncheck [Clear Color Buffer].

   • This will disable the Clear Color Buffer setting for all selected cameras at once.
     

     

Setting Enable Swapping

The Swap Scene executes buffer swapping. Therefore, the Enable Swapping setting must be disabled for all scene cameras except the Swap Scene.

1. In the [Render Targets] panel, select all cameras except the Swap Camera.

   • Hold down Shift key while selecting to choose multiple cameras.
     

     

     
     
     

2. In the Properties panel, under the [Camera] category, uncheck [Enable Swapping].

   • This will disable the Enable Swapping setting for all selected cameras at once.
     

     

Setting Camera Sequence Number

The rendering order of cameras is determined by the [Sequence Number] property. Cameras with smaller sequence numbers are rendered as backgrounds for those with larger numbers.

In the Render Targets panel, each camera's [Sequence Number] is displayed next to its name in parentheses, indicating their rendering order.

How to Set Sequence Number

The Sequence Number can be set using the following steps:

1. In the Render Targets panel, select the target camera(s) to be configured.

   • The Properties panel will display the properties of the selected camera.

   • To select multiple cameras, hold down Shift or Ctrl key while clicking.
     
     

2. In the Properties panel, under the [Camera] category, change the [Sequence Number] value.
   

   

Sequence Number Configuration

For this tutorial, set the Sequence Number for each camera as follows:

Sequence Number	Camera Name
0	Clear
1	Main Menu
2	Media Menu, Navigation, Phone
3	Media Bluetooth, Media Radio, Media USB
4	Swap

With this, all necessary scenes are now prepared for the State Machine Configuration in the next section.

Part 2: Configuring State Machine

This page explains the steps for building state transitions (state machines) between multiple scenes in CGI Studio.

It begins by recreating the Global State Machine for the scenes created in Part 1 and configuring state transitions for Main Menu, Navigation, Phone, Media Menu, and other scenes. Each state uses OnEntry/OnExit actions to control scene activation and deactivation, as well as the rendering of related text nodes. It also covers setting screen transitions using left and right key inputs (Key_RightArrow/Key_LeftArrow), configuring transitions using Fusion nodes, and defining transition conditions for each scene. Finally, transition behavior is verified using the Player.

Creating a new State Machine

The solution created in Part 1 (created based on the Empty solution) includes a GlobalStateMachine by default. In this part, we will delete this existing Global State Machine and create a new State Machine to deepen our understanding of custom settings.

Deleting the existing Global State Machine

1. Select the GlobalStateMachine in the [ State Machines ] folder in the Solution Explorer, and then select [ Delete ] from the context menu.
   
   • The [ Delete Items ] dialog will appear.
2. Click the [ OK ] button in the dialog to delete the item.

Creating a new State Machine

1. Select [ State Machines > New State Machine ] from the menu bar.
   • The [ New State Machine ] dialog will appear.
     
     
     
     
2. Click [ Browse ] at the top of the dialog.
   • The [ Select Location ] dialog will appear.
     
3. Select StateMachines and click [ OK ].
   • The location “/State Machines” is selected as the save location for the new State Machine.
4. Set [ Name ] in the dialog to "Main_StateMachine" and click the [ OK ] button.
   • The Main_StateMachine is newly created in the [ State Machines ] folder in the Solution Explorer.
     
     
     
     

Setting the Global State Machine

1. Select the Main_StateMachine in the [ State Machines ] folder in the Solution Explorer.
   • The Main_StateMachine properties will be displayed in the Properties panel.
2. Enable the [ Is Global ] checkbox in the [ General ] category of the properties.
   • The Main_StateMachine will be set as a Global State Machine.
     
     
     
     

For details on the functions of the Global State Machine, please refer to this page.

 

Basic Structure

Using the Main_StateMachine we created earlier, we will add a State to configure the initial state of the Main Menu scene, and then set the appropriate rendering settings. In addition, when the Main Menu State is entered, the Main Menu scene will be activated, and the Clear and Swap scenes will also be activated so that they are rendered correctly.

Initial State and State Addition for Main Menu

1. Double-click on the Main_StateMachine in the [ State Machines ] folder in the Solution Explorer. 
   
   • The State Machine Editor panel will be displayed.
   • There is already an Initial State and one State.
2. Select the State on the State Machine Editor.
   • The properties of the selected State will be displayed in the Properties Panel.
3. Change the [ Name ] in the [ General ] category of the Properties Panel to MainMenu.
   • The State name on the State Machine Editor will change to MainMenu.
     
     
     
     

Adding an OnEntry Action

1. With the MainMenu State selected, click [ Fusion ] at the bottom left of the State Machine Editor panel.
   • The Fusion panel for the MainMenu State will be displayed.
     
     
     
     
2. Drag the [ On Entry Actions ] connector on the right of the MainMenu Fusion node and move the mouse.
   
   
   
   
   
3. 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.
     
4. 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.
   • Transition Request is connected to MainMenu.
   • The default Activate is selected for the [RequestType] of Transition Request.
     
     
     
     
5. Press the select item button to the right of the [ Identifier ] of the Transition Request.
   • The [ Choose Item ] dialog box will appear.
     
     
     
     
6. Select [ Scenes > Main Menu ] from the left window.
   • The Main Menu you selected will be registered in the [ Identifier ] of the Transition Request.
     
     
     
     
7. Select the Transition Request Fusion node you set up, and execute [ Close ] from the context menu.
   
   
8. On the [ Clone Item ] dialog, select the [ Multiple Clone ] tab, specify 2 for [ Number of Copies ] and click the [ OK ] button.
   • The duplicated Fusion nodes overlap, so move them using the mouse.
   • The Fusion nodes named Transition Request_1 and Transition Request_2 are connected to the MainMenu Fusion node.
   • The [ RequestType ] of each Fusion node is set to the default Activate.
     
9. For the [ Identifier ] of the added Transition Request Fusion nodes, select the Swap and Clear scenes respectively.
   
   
   
   

This completes the settings for the OnEntry action for the MainMenu State. When you transition to the MainMenu State, the Clear and Swap scenes will be activated in addition to the Main Menu scene, so things like clearing the render will be executed at the same time.

Main Menu State Structure

Adding a State

1. Double-click on Main_StateMachine in the [ State Machines ] folder in the Solution Explorer.
   • The State Machine Editor will appear.
2. After selecting the MainMenu State, drag the resizing handles displayed in the four corners of the state with the mouse to expand the size of the MainMenu State.
   
   
3. Place one Initial State and three States in the MainMenu State from the toolbar at the top right of the State Machine Editor.
   
   
4. Change the names of the three added States to Navigation, Phone and Media respectively.
   • For instructions on how to change State names, please refer to here.
     
     
     
     

OnEntry/OnExit settings

When transitioning to each State (entering and exiting States), it is necessary to activate and deactivate the corresponding scenes. In addition, when each scene is activated or deactivated, it is necessary to set the Main Menu scene text to be displayed or hidden in conjunction with this.

Scene display settings

1. With the Navigation State selected, click [ Fusion ] in the lower left of the State Machine Editor panel.
   • The Fusion panel for the Navigation State will be displayed.
2. Drag the [ On Entry Actions ] connector on the right of the Navigation Fusion node and move the mouse.
   
   
3. 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.
     
4. 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 [Navigation > On Exit Actions].
     
5. Repeat the same process for the [On Exit Actions] of the Navigation Fusion node to connect the Transition Request Fusion node.
   
   
6. Make the following settings for the two Transition Requests that you have connected.
   
   
   
   

   On Entry Actions	RequestType	Activate
   	Identifier	Navigation
   On Exit Actions	RequestType	Deactivate
   	Identifier	Navigation

   
   
7. Repeat the same procedure to make similar settings for Phone and Media State.
   

   Phone State
   On Entry Actions	RequestType	Activate
   	Identifier	Phone
   On Exit Actions	RequestType	Deactivate
   	Identifier	Phone
   Media State
   On Entry Actions	RequestType	Activate
   	Identifier	Media Menu
   On Exit Actions	RequestType	Deactivate
   	Identifier	Media Menu

   
   

Text Display Settings

1. With the Navigation State selected, click [ Fusion ] at the bottom left of the State Machine Editor panel.
   • The Fusion panel for the Navigation State will be displayed.
2. Drag the [ On Entry Actions ] connector on the right of the Navigation Fusion node and move the mouse.
   
   
3. 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.
     
4. 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 [Navigation > On Exit Actions].
     
5. Repeat the same process for the [On Exit Actions] of the Navigation Fusion node to connect the Enable Rendering Fusion node.
   
   
6. Make the following settings for the two Enable Renderings that have been connected.
   
   
   
   

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

   
   
7. Follow the same procedure to make similar settings for Phone State and Media State.
   

   Phone State
   On Entry Actions	TargetNode	Scenes>Main Menu>OverlayLayout>Phone Title
   	Visible	Enable
   On Exit Actions	TargetNode	Scenes>Main Menu>OverlayLayout>Phone Title
   	Visible	Disable
   Media State
   On Entry Actions	TargetNode	Scenes>Main Menu>OverlayLayout>Media Title
   	Visible	Enable
   On Exit Actions	TargetNode	Scenes>Main Menu>OverlayLayout>Media Title
   	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 Navigation 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.
2. Drag and drop [ Transition ] from the toolbar at the top of the panel to the Initial State in the MaiMenu State.
   • The Transition will be connected to the Initial State, and it will be ready to be placed.
     
3. While the Transition is ready to be placed, click on the Navigation State.
   • The Initial State and Navigation State will be connected by the Transition.
     
   • The direction of the Transition connection is from the Initial State to the Navigation State.
     
     
     
     

With this setting, the transition to the Navigation State has been configured as the initial state of the MainMenu State.

Transition settings between each State

Next, we will set up the transitions between each State (Navigation, Phone, Media).

1. From the toolbar at the top right of the State Machine Editor, drag the Transition and drop it onto the Navigation 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 Media State (end of transition) and click.
   
   • The two states, Navigation and Media, 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_RightArrow
      Transition Request
      RequestType	Activate
      Identifier	Scenes＞Media Menu

      
      
      
      
      
      
      
      
      
      
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
      Media to Phone	Key_RightArrow	Scenes＞Phone
      Phone to Navigation		Scenes＞Navigation
      Navigation to Phone	Key_LeftArrow	Scenes＞Phone
      Phone to Media		Scenes＞Media Menu
      Media to Navigation		Scenes＞Navigation

      
      
      
      
      
      
      
      
      
      
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 has been set.

Checking the transition state

Use the Player to check the transition between the states set in the previous section.

Starting the Player

To start the Player, click the [ Play selected scenario ] icon in the toolbar.

If you have not saved the solution before performing this operation, a dialog box will appear prompting you to save the solution. In this case, click the [ OK ] button in the dialog box. The asset file will be automatically generated and opened in the CGI Player.

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.
     
2. By pressing the left and right arrow keys on the keyboard, you can switch the text on the screen and see that you have transitioned to the specified scene.
   
   
3. Close the CGI Panel and exit the Player.
   • All three windows that were open will close.

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.
2. 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.
2. Drag the [ On Entry Actions ] connector on the right of the Radio Fusion node and move the mouse.
   
   
3. 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.
     
4. 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].
     
5. Repeat the same process for the [On Exit Actions] of the Radio Fusion node to connect the Transition Request Fusion node.
   
   
6. 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

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

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.
2. Drag the [ On Entry Actions ] connector on the right of the Radio Fusion node and move the mouse.
   
   
3. 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.
     
4. 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].
     
5. Repeat the same process for the [On Exit Actions] of the Radio Fusion node to connect the Enable Rendering Fusion node.
   
   
6. 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)

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

1. Double-click on Main_StateMachine in the [ State Machines ] folder in the Solution Explorer.
   • The State Machine Editor will appear.
2. After selecting Media State, double-click on it and move it into the SubChart.
3. 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.
     
4. 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		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.
     
2. 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.
   
   
3. 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.
   
   
4. 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.
     
2. After selecting the Media State, double-click to move it into the SubChart.
   
   
3. Select the Initial State in the Subchart and press the Delete key.
   • The Initial State in the Subchart will be deleted.
4. 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.
     
5. 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.
6. 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.
     
2. 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).
     
3. Press the down arrow key on the keyboard once.
   • The text on the screen will change, and “Bluetooth Title” and “Bluetooth” will appear.
4. 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.
5. 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.

Part 4: Add an Incoming Call

This page explains the procedure for adding an Incoming Call scene and configuring the state machine to display the scene with the Enter key and hide it with the ESC key in CGI Studio.

The existing Phone scene is duplicated to create the IncomingCall scene, and the background is customized by placing a SolidColorNode. A new Global State Machine (IncomingCall_StateMachine) is created, and transitions between the CallInactive and CallActive states are configured. Conditions are set for transitioning to CallActive (displaying the call) with the Enter key and to CallInactive (hiding the call) with the ESC key. OnEntry/OnExit actions are used to control the activation and deactivation of the IncomingCall scene. Finally, screen transition operations are verified using the Player.

Creatig the IncomingCall scene

Configure the IncomingCall Scene

The IncomingCall scene is created by duplicating the Phone scene.

1. In [Solution Explorer], select [Scenes > Phone], then choose [Clone] from the context menu.

   • The [Clone Item] dialog will appear.
     
     

2. In the [Clone Item] dialog, select [Single Clone], rename [Name] to "IncomingCall", then click [OK].

   • The IncomingCall scene will be created.

   • The scene tree will display the newly created IncomingCall scene.

    

3. Select the text node in the IncomingCall scene tree, then update [Text] in the [Properties] panel under [2D Text Node] to "Incoming Call".

   • The text displayed in the Scene Editor will change to "Incoming Call".
     
     

4. To change the position of the text node on the Scene Editor, change the [Transform] setting in the text node's properties panel to the following.
   

   Position X	28
   Position Y	220

   
   
   
   
   

5. Drag and drop a [Solid Color Node] from [Node 2D] in the [Toolbox] panel onto the TextNode in the [IncomingCall] scene tree.

   • The SolidColorNode will be placed on the scene tree.

   • By placing it above the TextNode on the scene tree, the added SolidColorNode can be used as the background for the TextNode.

   • If you are unable to place it below the TextNode, you can adjust its position by dragging and dropping it after placing it on the scene tree.

   • The node added to the scene tree by this operation will have its [Position] set to X=0, Y=0 automatically in the [Transform] section of the Properties panel.
     
     

      

6. To change the position of the SolidColorNode on the scene editor, change the [Transform] setting in the SolidColorNode's property panel to the following.
   

   Position X	5
   Position Y	200

   
   
   
   
   
7. After selecting the SolidColorNode on the scene tree, select the SolidColorBrushBlend that appears in the extra scene tree.
   
   • The properties of the SolidColorBrushBlend effect will be displayed in the Properties panel.
     
     
8. To change the color and size of the SolidColorNode, set the following items in the Properties panel as shown in the table below.
   

   Effect
   FillColor	Red	1.0
   	Green	0.0
   	Blue	0.0
   	Alpha	1.0
   Size	X	380
   	Y	90

The settings for the Incoming Call scene are now complete.

Sequence Number Configuration

Set the rendering order for the new scene created in the previous section. In this case, we will set it to 4, so we will also change the rendering order of the Swap Scene Camera, which was originally set to 4.

1. In the Render Target panel, select IncomingCall/Camera.
   • The properties of the IncomingCall camera will be displayed in the Properties panel.
     
     
2. In the Properties panel, change the value of [Sequence Number] in the [Camera] category to 4.
   
   

3. Next, select Swap\Camera in the Render Target panel. 
   

   • The properties of the Swap camera will be displayed in the Properties panel.
     
     

4. In the Properties panel, change the value of [Sequence Number] in the [Camera] category to 5.
   

   

Creating an IncomingCall State Machine

We will create and configure a new State Machine for the IncomingCall scene.

Creating a new State Machine

1. Select [ State Machines > New State Machine ] from the menu bar.
   • The [ New State Machine ] dialog will appear.
2. Click [ Browse ] at the top of the dialog.
   • The [ Select Location ] dialog will appear.
     
3. Select StateMachines and click [ OK ].
   • The location “/State Machines” is selected as the save location for the new State Machine.
4. Set [ Name ] in the dialog to "IncomingCall_StateMachine" and click the [ OK ] button.
   • The IncomingCall_StateMachine is newly created in the [ State Machines ] folder in the Solution Explorer.
     
     
     
     

Setting the Global State Machine

1. Select the IncomingCall_StateMachine in the [ State Machines ] folder in the Solution Explorer.
   • The IncomingCall_StateMachine properties will be displayed in the Properties panel.
2. Enable the [ Is Global ] checkbox in the [ General ] category of the properties.
   • The IncomingCall_StateMachine will be set as a Global State Machine.

Adding a State

1. Double-click on IncomingCall_StateMachine in the [ State Machines ] folder in the Solution Explorer.
   • The State Machine Editor will appear.
   • There is already one Initial State and one State.
     
     

2. Select a State on the State Machine Editor. 
   

   • The properties of the selected State will be displayed in the Properties Panel.

      

3. Change the [Name] in the [General] category of the Properties Panel to CallInactive. 
   

   • The State name on the State Machine Editor will change to CallInactive.
     
     

4. Next, place a State from the toolbar at the top right of the State Machine Editor.

    

5. Change the names of the added States to CallInActive.
   
   

6. Drag and drop [Transition] from the toolbar at the top of the panel to the Initial State in IncomingCall_State. 
   • Transition will be connected to the Initial State and become ready to be placed.
     
     
7. While Transition is ready to be placed, click on CallInactive State.
   
   
   
   

OnEntry/OnExit settings

When transitioning to each State (entering and exiting States), it is necessary to activate and deactivate the corresponding scenes. 

Scene display settings

1. With the CallActive State selected, click [ Fusion ] in the lower left of the State Machine Editor panel.
   • The Fusion panel for the Navigation State will be displayed.
2. Drag the [ On Entry Actions ] connector on the right of the CallActive Fusion node and move the mouse.
   
   
3. 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.
     
4. 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 [CallActive > On Exit Actions].
     
5. Repeat the same process for the [On Exit Actions] of the CallActive Fusion node to connect the Transition Request Fusion node.
   
   
6. Make the following settings for the two Transition Requests that you have connected.
   

   On Entry Actions	RequestType	Activate
   	Identifier	IncomingCall scene
   On Exit Actions	RequestType	Deactivate
   	Identifier	IncomingCall scene

Transition settings between each State

Next, we will set up the transitions between each State (CallInactive and CallActive).

1. From the toolbar at the top right of the State Machine Editor, drag the Transition and drop it onto the CallInactive 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 CallActive State (end of transition) and click.
   
   • The two states, CallInactive and CallActive, 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. Make the following settings for the Check Key Input 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_Enter

     
     
     
9. Repeat the above operations 1 to 8, this time connecting the Transition from CallActive State to CallInactive State, and set the Check Key Input Fusion as shown in the table below. 
   

   Check Key Input
   KeyCode	Key_ESC

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

Checking the transition state

Use the Player to check the transition between the states set in the previous section.

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.
     
     
2. By pressing the Enter key on the keyboard, the text “Incoming Call” will appear on the screen.
   • Using the left and right directional keys in this state will move the scene, but the “Incoming Call” text will remain displayed.
     
     
3. Pressing the ESC key on the keyboard hides the “Incoming Call” text displayed on the screen.
   
   
4. Close the CGI Panel and exit the Player.
   • All three windows that were open will close.

Part 5: Count Received Calls

This page explains the procedure for adding an incoming call count function and displaying the count on a text node in the Main Menu scene in CGI Studio.

A "Received Calls: %d" text node is added to the Main Menu scene, and the call count is updated as a relative value each time the IncomingCall_StateMachine enters the CallActive state using the Send Value As Event behavior. Furthermore, the Value and Format String behaviors are connected to the Fusion node of the TextNode to format and dynamically display the counted incoming calls on the screen. Finally, the operation of displaying calls with the Enter key, hiding them with the ESC key, and verifying that the incoming call count is correctly updated is performed using the Player.

 

Incoming Call Count Configuration

Adding a TextNode

1. After selecting the [ Scenes > Main Menu ] scene in the Solution Explorer, double-click it.
   • The Main Menu scene will be displayed in the Scene Tree panel.
     
     

2. Drag and drop the Text Node from the [Node 2D] in the Toolbox panel onto the Main Menu scene in the Scene Tree. 

   • The Text Node will be displayed in the Scene Editor as "Text".
     
     

3. Set the following properties for the added Text Node in the Properties panel.
   

   Transformations>Position	X	325
   	Y	0
   2D Text Node>Text		Received Calls: %d

OnEntry Settings

1. Double-click IncomingCall_StateMachine in the [ State Machines ] folder in the Solution Explorer. 
   

   • The State Machine Editor will be displayed.
     
     

2. With the CallActive State selected, click [ Fusion ] at the bottom left of the State Machine Editor panel. 
   

   • The Fusion panel for the CallActive State will be displayed.

      

3. Drag the [ On Entry Actions ] connector on the right of the CallActive 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.
     
     

5. Select “Action > Property > Send Value As Event” from the list and connect it to the top node. 
   

   • You can also narrow down the list of behaviors in the dialog by entering “Send Value As Event” in the search field at the top of the dialog.
   • Send Value As Event is connected to [ CallActive > On Exit Actions ].

      

6. The settings in the table below are made for the connected Send Value As Event. 
   

   • When the CallActive State is entered, a relative value (Relative) 1 is sent to the TextNode that was just added.
     

     TargetNode	Scenes>Main Menu>TextNode
     Value	Ulnt32, 1
     ChangeValue	Relative

     
     
     

Adding a TextNode

1. Double-click IncomingCall_StateMachine in the [ State Machines ] folder in the Solution Explorer. 
   

   • The State Machine Editor will be displayed.
     
     

2. After selecting a TextNode on the scene tree, click [Fusion] displayed in the Extra Scene Tree on the left side of the scene tree.
   • The Fusion panel will open, and the Fusion diagram for TextNode Fusion will open.
     
     

3. Drag the [ Behaviors ] connector on the right of the TextNode 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.
     
     

5. Select “Value Processing > Value” from the list and connect it to the top node. 
   

   • You can also narrow down the list of behaviors in the dialog by entering “Value” in the search field at the top of the dialog.
   • Send Value As Event is connected to [ TextNode > Behaviors ].

      

6. Drag the [ Receivers ] connector on the right of the Value Behavior Fusion node and move the mouse.

    

7. A link will appear as you move the mouse, so release the left mouse button at the any location.
   
   

8. Select “Value Processing > Format String” from the list and connect it to the top node. 
   

   • You can also narrow down the list of behaviors in the dialog by entering “Format String” in the search field at the top of the dialog.
   • Send Value As Event is connected to [ Value > Receivers ].

      

9. Enter “Received Calls: %d” in the [ Text ] of the Format String Behavior Fusion node.
   
   
   
   

Verifying Action

Use the Player to check the operation of the configuration you have set in the previous section.

Checking the incoming call count operation

1. Click the [ Play selected scenario ] icon on the toolbar to start the Player.
   
   • Three windows will open, and in one of them, the simulation display, in addition to “Navi Title” and “Navigation”, “Received Call: 0” will be displayed to the right of “Navi Title”.
     
2. By pressing the Enter key on the keyboard, the text “Incoming Call” will appear on the screen.
   • As a result, “Received Call: 0” changes to “Received Call: 1”.
     
3. Pressing the ESC key on the keyboard hides the “Incoming Call” text displayed on the screen.
4. Press the Enter key on the keyboard again to make “Incoming Call” reappear, and it will change to “Received Call: 2”.
   • As a result, you can confirm that the number of incoming calls is being counted correctly.
5. Close the CGI Panel and exit the Player.
   • All three windows that were open will close.

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

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.
     
     

Advanced Cluster Solution

Overview

This solution represents an advanced 2D cluster example. It consists of various scenes that are necessary to represent an advanced Cluster. The Main Scene consists of gauges that can be manipulated with Controls and Behaviors. This documentation includes a tutorial of how this advanced gauges can be implemented without coding. Other scenes, like the coverflow, show some other interactions in the solution and how this can be achieved with Behaviors. Culture is also used to support switching between display languages. Furthermore, a scene with a dynamic list is included in the sample. The dynamic list is the result of the tutorial that can be found under Dynamic List.

Advanced Cluster Part 1 to Part 4 are step-by-step tutorial of customizing a gauge by using the built in controls as a base. More design elements and behaviors are used to change its look and extend its logic. The gauges represent the main scene of this sample solution.

Advanced Cluster Part 1

This section of the Best Practice describes how to configure the render target for this solution. It shows how to imported images via [Import Resources]. Some of these images will be used in controls later. In order for them to correctly fit e.g. into a Gauge control they need to have their pivot point adjusted. Finally, a Custom Gauge control will be created based on Scene Composer's built-in Gauge control.

Create Solution and Setup Render Target

A new empty solution will be created and the render target configuration is performed. 

1. Create a new solution using the Empty Solution template and save it as shown in Creating a new Solution.
   • A new solution is created and saved.
     
     
2. In the Solution Explorer panel on the top left select "Scene3D" (under "Solution - Scenes") and delete it either using the <Del> key or via the context menu [Delete] as described in Delete a Scene.
   • A [Delete Items] dialog will popup.
     
     
3. Please resolve all dependencies with [Delete Usage Item] (which is the default) and click [OK].
   • Scene3D will be deleted.
     
     
4. Activate the Render Targets panel on the top right and select [Display (0)]. In the Properties panel below change the display's X and Y Resolution.
   • The horizontal and vertical resolution of the display is defined.
   • The aspect ratio of the display will be calculated automatically.
     

     Target Item	Setting Value
     X Resolution	1680
     Y Resolution	720

     
5. In the Render Targets panel select Scene2D\Camera (0). In the Properties panel check the checkbox to Enable Swapping.
   • Swapping has been enabled for Scene2D's camera.
   • The display will be refreshed after each time this scene is rendered.

     Camera	Enable Swapping
     Scene2D\Camera(0)	TRUE

     

Import Images and Configure Pivot Hints

The images needed for this solution will be imported. They will later be used to build up the gauge control. For correct positioning and alignment inside the control, the Pivot Hints for these images need to be configured. Additionally, the Custom_Gauge control will be created.

1. In the menu bar choose [Import] - [Import Resources...] as described in How to Import Resources.
   • [Import Resources] dialog will be opened
     
2. Navigate to the following folder, select all files provided in this folder and press [Open].
   <cgi-studio-root>/cgi_studio_content/Resources/AdvancedCustomGauge
   • [Import Images] dialog will be opened as seen in the image below the next step.
3. Use the settings as shown in the screenshot below and press [OK].
   • The images have been imported into the solution and are ready to be used.

     Select an item in the Solution Explorer panel to access its properties in the Properties panel.

     
     
     
4. To configure the Pivot Hint, select the image in the Solution Explorer panel. In the Properties panel under [Bitmap] you can adjust the image's Pivot Hint settings. Configure the images with the values given in the table below.
   • The images' Pivot Hints are correctly configured to be used in Scene Composer's Gauge Control: The needle images' Pivot Hints are their central point of rotation. The other images' Pivot Hints are configured to align the images correctly in the Gauge Control.

     Image	Enable Pivot Hint	Pivot Hint
     		X	Y
     NeedleBmp	TRUE	17.50	250.00
     Needle_Lighter	TRUE	241.00	245.00
     Numbers_0-24Bmp	TRUE	325.00	329.00
     Numbers_0-8Bmp	TRUE	325.00	329.00
     Points_BlueBmp	TRUE	282.00	282.00
     Points_Blue_RedBmp	TRUE	282.00	282.00

     
     
     
5. In the Toolbox panel's [Controls] section under "Common" copy the Gauge Control either via the context menu entry "Copy" or via the keyboard <Ctrl>+C. Paste the Gauge Control into the Solution Explorer's folder "Solution > Controls" either via the context menu entry "Paste" or via the keyboard <Ctrl>+V.
   • A copy of the Gauge Control has been created in the Scene Composer solution's Controls folder.
     
     
6. In the Solution Explorer panel rename the newly copied Gauge to "Custom_Gauge" either via the context menu entry "Rename" or via the keyboard <F2>.
   • The copy of the Gauge Control in the Solution Explorer's Controls folder is called "Custom_Gauge".

     The image below shows where to copy the Gauge Control from and where to copy it to.

     
     
     

Advanced Cluster Part 2

In this part of the Advanced Cluster Best Practice the Custom_Gauge control will be extended with a ForegroundImage and a NeedleEffectImage and new images will be configured to change the control's appearance completely.

Restructuring Custom_Gauge Control

1. In the Solution Explorer double-click the "Custom_Gauge".
   • The control "Custom_Gauge" will be opened in the Scene Editor, ready to be edited.
   • Scene Tree will display the tree of nodes the control is composed of.
     
     
2. In the Scene Tree panel rename the "Group" node to "Group_Bitmaps".
   • In the Scene Tree panel the Group node has been renamed.
     

     Rename from	Rename to
     Group	Group_Bitmaps

     
     
3. In the Scene Tree panel select the root node Custom_Gauge. In the Properties panel's [Layouter] section change the Layout type from "Overlay" to "None".
   • The Layout Type has been changed.
     
4. In the Scene Tree panel right-click on the "BackgroundImage" and choose [Clone...] from the context menu. In the opening "Clone Item" dialog enter "ForegroundImage" as name and press [OK].
   • A clone of "BackgroundImage" has been created. Its name is "ForegroundImage". The Scene Tree now looks as in the image below.
     
     
     

Exchanging Custom_Gauge Control's Images

In steps 1 - 3 of this section the Custom_Gauge new images for the ForegroundImage and BackgroundImage nodes will be configured. These steps need to be performed for the BackgroundImage node as well as for the Foreground Image node.

In steps 4 - 5 of this section the NeedleImage will be cloned and the images of NeedleImage and NeedleEffectImage will be exchanged.

1. In the Scene Tree panel select the image. In the right side of the Scene Tree click on the [Fusion...] button.
   • Fusion will be opened, displaying the Fusion diagram for the image.
     
     
     
     
2. In the Fusion diagram change the ProvideImageProperty's image by clicking the magnifying glass icon to the property's right.
   • The [Choose Item] dialog will be displayed.
     
     
3. In the [Choose Item] dialog choose the appropriate new image given in the table below and click [OK].
   • The images displayed by the BackgroundImage and ForegroundImage nodes have been changed.
   • When activating the Scene Editor the Custom_Gauge with new Foreground and Background image can be viewed. It should look like the image below.

     To switch to the Fusion diagram of the second image simply double click it in the Scene Tree panel.

     Node	new ProvideImageProperty image
     BackgroundImage	Solution > Resources > Bitmaps > Points_Blue_RedBmp
     ForegroundImage	Solution > Resources > Bitmaps > Numbers_0-8Bmp

     
     
     
4. In the Scene Tree panel create a clone of the "NeedleImage" and name it "NeedleEffectImage".
   • A clone of "NeedleImage" has been created. Its name is "NeedleEffectImage". The Scene tree looks as in the image below.

     Please follow the order of the nodes in the scene tree to ensure their proper visibility.

     
     
     
5. Let's change the images displayed by NeedleImage and NeedleEffectImage. This can be done similarly to above. Select the image, open Fusion and click on the magnifying glass next to the ProvideImageProperty's image property. Configure the images given in the table below.
   • The images displayed by the NeedleImage and NeedleEffectImage nodes have been changed.
   • When activating the Scene Editor the Custom_Gauge with new Needle and NeedleEffect image can be viewed. It should look like the image below (the needle is pointing to 3 o'clock).

     Node	ProvideImageProperty's image
     NeedleImage	Solution > Resources > Bitmaps > NeedleBmp
     NeedleEffectImage	Solution > Resources > Bitmaps > Needle_LighterBmp

     

Configuring the Gauge Needle's Rotation Behavior

1. In the Scene Tree panel select the NeedleImage node. In the Scene Tree panel's right side rename the existing SetRotation behavior according to the table below. Repeat the same steps for the NeedleEffectImage node.
   • The SetRotation behaviors of NeedleImage and NeedleEffectImage have been renamed.

     Node	New Name of SetRotation Behavior
     NeedleImage	SetRotation_Needle
     NeedleEffectImage	SetRotation_Effect

2. In the Scene Tree panel select the Custom_Gauge node. In the Scene Tree panel's right side select the InterpolateValue behavior. In the Properties panel's [Receivers] section press the [+] button in the top right corner. This [+] button is marked in orange in the image of step 4.
   • In the Properties panel's Receivers section you can see that a new line for a new Receiver is added for the InterpolateValue behavior.
     
     
3. Press the magnifying glass icon next to the new Receivers 1 entry.
   • The [Choose Item] dialog will be opened.
     
     
4. Select the behavior SetRotation_Effect, which can be found under the path given below, and click [OK].
   • The NeedleEffectImage's SetRotation_Effect is referenced as one of the Receivers of the CustomGauge's InterpolateValue behavior as you can see in the imaged below.

     Set Rotation_Effect	Path
     	Custom_Gauge > Group_Bitmaps > NeedleEffectImage > SetRotation_Effect

     
     
     

Configuring Effects and MapValue Behavior's Limits

Advanced Cluster Part 3

In part 3 of this Best Practice the Custom_Gauge control will be further customized adding controls: 

• A TextValue control to display the gauge's current value numerically
• A Text control above of the numeric value to display the gauge's scope (e.g. speed)
• Another Text control below the numeric value, which can be used to display the unit (e.g. km/h)

In order to make our control more versatile, various properties of our configured Custom_Gauge (like all images and text styles) will be made public.

Public Control Properties are those that can be configured when using a Custom_Gauge in a scene. 

Create and Configure Two TextNodes and a TextValue Node

1. In Scene Composer's Solution Explorer navigate to the path below and double-click on the "Custom_Gauge" control.
   • The Scene Tree panel shows the Custom_Gauge control's tree.
   • Scene editor displays the Custom_Gauge control.
     

     Path in Solution Explorer	Control
     Solution/Controls	Custom_Gauge

2. From the Toolbox panel's Nodes 2D section drag and drop a StackLayout into the Scene Tree panel directly onto the Custom_Gauge node.
   • In the Scene Tree panel you can see that a StackLayout has been created directly under the Custom_Gauge node.
     
     
3. From the Toolbox panel's Controls section under Common drag and drop 2 Text controls and 1 Text Value control into the Scene Tree panel directly onto the StackLayout.
   • In the Scene Tree panel you can see the 2 Text controls and the Text Value control directly under the StackLayout.
     
     
4. In the Scene Tree panel select the StackLayout as well as the 2 Text controls one after the other and rename them according to the table below either via the context menu entry "Rename" or by pressing <F2> on your keyboard.
   • In the Scene Tree panel you can see that the Controls have been renamed.
     

     Target Item	New Name
     StackLayout	StackLayout_Texts
     Text	Text_Top
     Text_1	Text_Bottom

     
     
5. In the Scene Tree panel re-arrange StackLayout_Texts and its contents via drag and drop until it looks like in the image below.
   • The Scene Tree looks as in the image below.
     
     
     
6. In the Scene Tree panel select StackLayout_Texts controls. In the Properties panel under Layouter and Layout adjust the properties as in the table below.
   • In the Properties panel you can see that the correct values are set.
     

     Property	Value
     Layouter
     Arrangement	Vertical
     Layout
     Vertical Alignment	VCenter
     MinimumSize	X	250.00
     	Y	0.00

     
     
7. In the Scene tree panel select Text_Top, Text Value and Text_Bottom one after the other. In the Properties panel under Layout and Control configure the properties as in the table below.
   • In the Properties panel you can see that the correct values are set.
   • In the Scene Editor the texts are centered and the Text Value appears in a bigger font.

   Property	Text_Top	Text Value	Text_Bottom
   Layout
   VerticalAlignment	VCenter	VCenter	VCenter
   HorizontalAlignment	HCenter	HCenter	HCenter
   Control
   Text	RPM	-	<empty String>
   Text Style	OpenSans35	Vera96	OpenSans35
   Text Alignment	Center	Center	Center
   Text Format	-	%04d	-

Configure the TextNodes' and TextValue Node's Position

1. In the Scene Tree panel select StackLayout_Texts. In the Scene Tree panel's right side click on the [Fusion...] button.
   • Fusion will be opened covering the Scene Editor.
     
   • StackLayout_Texts Fusion diagram will be displayed. It only has one Fusion Node.
     
     
2. In Fusion use the StackLayout_Texts' "Behaviors" connector to add 2 new Fusion Nodes: Connect 2 Value Processing > Value behaviors to the StackLayout_Texts Fusion Node.

   Please check Fusion's Basic Operations documentation on how to add Fusion Nodes. 

   • In Fusion 2 new Fusion Nodes "Value" and "Value_1" have been created.
     
     
3. In Fusion select and right-click on the behavior nodes and rename them according to the table below.
   • In Fusion the Value behavior fusion nodes have been renamed.
     

     Target Item	New Name
     Value	Value_TextPos_X
     Value_1	Value_TextPos_Y

     
     
4. In Fusion use the Value behaviors' "Receivers" connectors to add a Value Processing > Transformation > SetPosition Fusion Node to each of them.
   
   • In Fusion 2 new Fusion Nodes "Set Position" have been created, one of which is connected to Value_TextPos_X, the other to Value_TextPos_Y.
     
     
5. In Fusion select and right-click on the behavior nodes and rename them according to the table below.
   • In Fusion the Set Position behavior fusion nodes have been renamed.
     

     Target Item	New Name
     Value_TextPos_X > Set Position	Set Position_X
     Value_TextPos_Y > Set Position	Set Position_Y

6. In Fusion configure the behaviors' Fusion Nodes according to the table below.
   • In Fusion the Fusion Nodes' Properties have been changed.
   • In Scene Editor the position of StackLayout_Texts has been changed. The texts are now neatly placed inside the Custom_Gauge control as you can see in the image below.

     	Fusion Node
     Property	Set Position_X	Set Position_Y
     TargetNode	Custom_Gauge > StackLayout_Texts	Custom_Gauge > StackLayout_Texts
     TranslationAxis2D	AxisX	AxisY
     Property	Value_TextPosX	Value_TextPosY
     Variant	(Float) 205	(Float) 230

     
     

     

Configure Value Forwarding and Maximum Value

1. In Fusion add a Value Processing > Forward Value behavior to the Behaviors connector of the Custom_Gauge Fusion Node. Configure its TargetNode according to the table below.
   • In Fusion the property will be changed accordingly.
     

     Forward Value Fusion Node
     Property	Value
     TargetNode	Custom_Gauge > StackLayout_Texts > Text Value

2. In Fusion in the ControlValueProvider Fusion Node configure the property Maximum according to the table below.
   • In Fusion the the property is changed accordingly.
   • Custom_Gauge's Fusion diagram will look as in the image below.

     ControlValueProvider
     Property	Value
     Maximum	(Float) 8000.00

     

Configure Public Control Properties

1. In the Scene Tree panel right click "Custom_Gauge" and select "Control Properties..." from the context menu.
   • The Configure Public Control Properties dialog will be opened.
     
     
2. In the Configure Public Properties dialog the Properties which should be public to the user of the Custom_Gauge control need to be marked with the "Is Public" checkbox. Check the "Is Public" checkbox and eventually change the image properties' names according to the table and images below.
   • Image properties necessary for using and configuring the Custom_Gauge will be made public.
   • The Custom_Gauge control is now fully configured and ready to use.
     

     Custom_Gauge > Group_Bitmaps >
     Property	Is Public	Source	Name
     BackgroundImage > ProvideImageProperty	x	Image	BackgroundImage
     NeedleImage > ProvideImageProperty	x	Image	NeedleImage
     NeedleEffectImage > ProvideImageProperty	x	Image	NeedleEffectImage
     ForegroundImage > ProvideImageProperty	x	Image	ForegroundImage

     
     
     
3. In the Configure Public Properties dialog check the "Is Public" checkbox and perform other configurations according to the table and images below.
   • Image properties necessary for using and configuring the Custom_Gauge will be made public.
   • The Custom_Gauge control is now fully configured and ready to use.

     The properties made public in this Configure Public Properties dialog will be configurable in the Properties panel's Controls section.

Custom_Gauge > StackLayout_Texts >
Property	IsPublic	Source	Name
TextBottom	x	Text	Bottom_Text
	x	TextColor	Bottom_TextColor
	x	TextStyle	Bottom_TextStyle
Text_Top	x	Text	Top_Text
	x	TextColor	Top_TextColor
	x	TextStyle	Top_TextStyle
Text Value	x	FormatText	Value_FormatText
	x	Style	Value_Style
	x	TextColor	Value_TextColor
Behaviors > Value_TextPos_X	x	Variant	TextPosX
Behaviors > Value_TextPos_Y	x	Variant	TextPosY

Advanced Cluster Part 4

The following steps describe how to use the Custom_Gauge control in a scene. Speed gauge and RPM gauge are realized with the same control. Using the public properties for customization these Gauge controls appear similar yet different.

Once the advanced cluster scene is fully configured, it's time to test its functionality using the Scene Composer's Player.

Create a Cluster Scene with 2 Custom_Gauge Controls

1. In the Solution Explorer navigate to the Scene2D and double click it.
   • Scene2D will be opened and visible in Scene Editor and Scene Tree panel.
   • In Scene Tree panel you can see that the scene contains a camera.
     
     
2. In the Scene Editor's bottom toolbar make sure that "active rendering" and "widgets updating" is enabled. 
   • In the Scene Editor's bottom toolbar "active rendering" and "widgets updating" are highlighted as seen in the image below.
     
     
     
     
3. From the Toolbox panel under [Nodes 2D] drag a Group node into the Scene Tree panel or the Scene Editor.
   • In the Scene Tree panel you can see the newly created Group node.
     
   • In the Scene Editor you can see an indicator of the Group node's current position.
     
     
4. Rename the Group node according to the table below either via the context menu "Rename" or the keyboard shortcut <F2>. 
   • The Group node has been renamed accordingly.

     Old Name	New Name
     Group	Group_Content

     
     
5. In the Scene Tree panel select the Group node. In the Properties panel's [Transformations] section reset the Position property according to the table below.
   • In the Scene Editor you can see the Group node's current position.

     A property can easily be reset in the Properties panel by clicking on the curled arrow icon on the property's left.

     Target Item	Position
     	X	Y
     Group_Content	0.00	0.00

6. From the Solution Explorer drag the image according to the table below into the Scene Tree panel directly onto the Group_Content node.
   • In Scene Tree panel you can see that a new RenderNode2D with a BitmapBrushBlend effect has been created inside Group_Content.
   • In Scene Editor you can see the rendered background image.

     Path in Solution Explorer	Image
     Solution > Resources > Bitmaps	BackgroundBmp

7. From the Solution Explorer drag two Custom_Gauge into the Scene Tree panel directly onto the Group_Content. The path to the Custom_Gauge control is given in the table below.
   • In the Scene Editor only one Custom_Gauge will be displayed since both controls are located at the same position and therefore are completely overlapping. One Custom_Gauge is hiding the other.
   • In the Scene Tree panel the Group_Content node contains a RenderNode2D and the newly created Custom_Gauges.

     Path in Solution Explorer	Control
     Solution > Controls	Custom_Gauge

8. Rename the Custom_Gauge nodes according to the table below either via the context menu "Rename" or the keyboard shortcut <F2>. 
   • The Custom_Gauge node has been renamed accordingly.

     Old Name	New Name
     Custom_Gauge	Custom_Gauge_Speed
     Custom_Gauge_1	Custom_Gauge_RPM

9. Select the Custom_Gauge controls one after the other. In the Properties panel configure the properties as given in the tables below.
   • In the Scene Editor the gauge controls for RPM and Speed are both visible.
   • The Scene2D starts to look like a cluster, see image below.

     Custom_Gauge_RPM Property	Value
     Transformation
     Position X	965.00
     Position Y	30.00

     Custom_Gauge_Speed Property	Value
     Transformation
     Position X	60.00
     Position Y	30.00
     Control
     Value	120
     Input Max	240
     Top_Text	Speed
     Value_Format Text	%d
     Bottom_Text	km/h
     BackgroundImage	Solution/Resources/Bitmaps/Points_BlueBmp
     ForegroundImage	Solution/Resources/Bitmaps/Numbers_0-240Bmp

     

     
     

Check the Scene in the Player

1. Save your work and start the Player to test the functionality of your configuration. To do this, please perform similar steps to the ones described in the GettingStartedControls Best Practice.
   • The Speed Gauge can be tested by manipulating Custom_Gauge_Speed's Value Property (The property is changed to 50 in the image below).
   • The RPM Gauge can be tested by manipulating Custom_Gauge_RPM's Value Property.
     

GettingStartedControls Solution

Overview

The GettingStartedControls solution is a sample solution primarily focused on gauge clusters and center clusters. It consists of various scenes for displaying advanced gauge clusters and center clusters.

GettingStartedControls Parts 1 to 4 introduce the basics of using controls. In addition to using individual controls, we also show how to connect them to each other to implement basic HMI logic.

GettingStartedControls Part 1

This part of the tutorial describes how to configure the Home Scene of this solution.

The scene is built up using imported images and configuring various controls (such as TellTale, Gauge, DigitalClock, TextValue, Text, FlipBook). The use of a ForwardValue behavior will ensure that the Speed Gauge and an additional textual display will show the same value at any time.

Finally, the Panel is started to verify the coherency of the Speed Gauge and the speed's textual display.

---

Setting up the SceneComposer Solution

1. Create a new solution using the Empty Solution template and save it as shown in Creating a new Solution.
   • A new solution is created and saved.
     
     
2. Activate the Render Targets panel on the top right and select [ Display (0) ]. In the Properties panel below change the display's X and Y Resolution.
   • The horizontal and vertical resolution of the display will be defined.
   • The aspect ratio of the display will be calculated automatically.
     

     Target Item	Setting Value
     X Resolution	1024
     Y Resolution	768

     

     
     

Preparing the Scene

1. In the Solution Explorer panel on the top left select "Scene3D" (under "Solution - Scenes") and delete it either using the <delete> key or via the context menu [ Delete ] as described in Delete a Scene.
   • A "Delete Items" dialog will popup.
2. Please resolve all dependencies with "Delete Usage Item" and click [ OK ].
   • Scene3D will be deleted.
     
3. Select "Scene2D" and rename it to "SceneHome" either by pressing <F2> on your keyboard or via the context menu "Rename".
   • The scene's name has been changed to "SceneHome"
     
4. In the Solution Explorer panel double-click the "SceneHome" to open it in the Scene Editor (see also 2D Scene Editor).
   • "Scene Home" will be displayed in the Scene Editor on the right of the Solution Explorer panel.
   • The content of this scene will be displayed in the Scene Tree panel below the Solution Explorer panel.
     
5. Save the solution using the <Ctrl+S> keyboard combination or via the menu bar File - Save Solution.
   • The asterisk next to the filename in the SceneComposer window's titlebar will disappear, indicating that the solution has been saved.

It might be a good idea to make a backup of your solution now! If you destroy something during execution of the following steps you always have the possibility to restart with a clean solution. To make a copy just make a copy of the GettingStartedControls folder or create a copy by archiving into a zip file.

Import Images

The images needed for this solution will be imported. Some of them will be used as plain static images, but most will be used to configure controls.

1. In the menu bar choose [ Import ] - [ Import Resources... ] as described in How to Import Resources.
   • [ Import Resources ] dialog will be opened
     
2. Navigate to the following folder, select all files provided in this "Cluster" folder and press [ Open ].
   <cgi-studio-root>/cgi_studio_content/Resources/GettingStartedControls/Cluster
   • [ Import Images ] dialog will be opened
3. Use the settings as shown in the screenshot and press [ OK ].
   • The images have been imported into the solution and are ready to be used in SceneHome.
     
     

Position Images

1. In the Solution Explorer select the Bitmap "Navi60Bmp" and drag it into the Scene Editor.
   
   • The image with the curved orange arrow will be placed in the Scene Editor.
   • It also appears in the Scene Tree panel.
2. Select "NewWarning80Bmp" in the Solution Explorer and drag it into the Scene Editor too.
   • The image with the speed limit will be placed in the Scene Editor.
   • It also appears in the Scene Tree panel.
3. In the Scene Editor or in the Scene Tree panel select the images individually and modify their Transformation Position X and Y in the Properties panel on the bottom right.
   • Navi60Bmp and NewWarning80Bmp are on their final position.
     

     Render Node	Transformations
     	Position X	Position Y
     Navi60Bmp	38	121
     NewWarning80Bmp	38	612

     

Configure Tell Tale Controls

Controls are special types of nodes that already contain logic for handling of user actions (touch, click) and state changes. They can be found in the Controls section of the Toolbox, which is by default located in the top right corner.

1. From the Toolbox panel in the Controls section drag and drop 3 "Tell Tale" Controls into the Scene Editor.
   • 3 Tell Tale Controls with the default images are visible in Scene Editor
   • These 3 Tell Tale Controls also appear in the Scene Tree.
     

     
     

2. Select the 3 "Tell Tale" Controls individually to rename each of them in the Scene Tree panel and configure their properties in the Properties panel according to the table below. Position X and Y can be changed in the Properties panel's [ Transformations ] section. The State property in can be changed in the [ Control ] section.
   •  The properties are applied to the "Tell Tale" Controls.
     

     Scene Tree	Transformations		Control
     Rename Node to	Position X	Position Y	State
     Tell Tale_Snow	387	612	Off
     Tell Tale_Gas	594	612	Off
     Tell Tale_Call	800	612	Blinking

3. Select the 3 "Tell Tale" Controls individually again to apply new OnState and OffState Images to the "TellTale" Controls in the [ Controls ] section of Properties panel according to the table below. To change "On State Image" and "Off State Image" click on the respective magnifying glass.
   • The [ Choose Item ] dialog will be opened.
4. Navigate to your desired image, select it and click [ OK ].
   

   Scene Tree	Control
   Node	On State Image	Off State Image
   Tell Tale_Snow	NewWeather_BBmp	NewWeather_HBmp
   Tell Tale_Gas	Ev_HBmp	Ev_Bmp_HBmp
   Tell Tale_Call	NewCall_HBmp	NewCallBmp

   
   
   
   
   
5. In the Scene Tree or in the Scene Editor select "Tell Tall_Call". This Tell Tale Control is configured to keep blinking. Therefore, the speed of blinking has to be configured. 
   
   • The blinking interval of "Tell Tale_Call" is configured
     
   • When "active rendering" is activated, this Tell Tale will be blinking in Scene Editor. "Active rendering" can be toggled using pinwheel button in the Scene Editor's bottom toolbar (see image below).
     

   Item Name	On Time Ms	Off Time Ms
   Tell Tale_Call	800	800

   

Configure a Gauge Control

To display the current speed of the car a "Gauge Control" will be used.

1. From the Toolbox panel in the Controls section drag and drop "Gauge" Controls into the Scene Editor.
   • A Gauge control with default images will be visible in the Scene Editor.
     
   • The Gauge Control also appears in the Scene Tree.
     
     
     
     
2. In the Properties panel's [ Transformations ] section configure the Gauge Control's position according to the table.
   
   • Gauge Control will be on it final position.
     

     Item Name	Position X	Position Y
     Gauge	319	217

     
     

3. Adapt the Background Image and Needle Image by clicking the corresponding magnifying glass icon.
   
   • The [ Choose Item ] dialog will be opened.
4. Navigate to your desired image, select it and click [ OK ].
   • The newly configured images will be displayed in the Scene Editor.
     

     Item Name	Background Image	Needle Image
     Gauge	NewClusterBmp	NewNeedleBmp

     

     
     

5. The image "NewClusterBmp" needs to be repositioned in order to be in the center of the Gauge. In the Solution Explorer select NewClusterBmp. In the Properties panel's [ Bitmap ] section tick the checkbox "Enable Pivot Hint" and configure the Pivot Hint according to the table below.
   
   • After defining the Pivot Hints for both images, the needle will be displayed in the center of the gauge.
6. If no change is visible, try to forcing a screen invalidation by pressing the <F5> key.
   

   Solution Explorer	Properties panel [ Bitmap ]
   Item Name	Pivot Hint X	Pivot Hint Y
   NewClusterBmp	194	194
   NewNeedleBmp	112	8

   

You may need to trigger a refresh by hitting the <F5> button on your keyboard if the images' positions are not updated automatically.

Configure Digital Speed Display

A "Text Value" Control will be used to display the current speed as digits

1. From the Toolbox panel under [ Controls ] - [ Common ] drag a "Text Value" control to the Scene Editor just below the Gauge Control.
   • The control will be visible in the Scene Editor and in the Scene Tree panel.
2.  While the Text Value control is selected, adjust its position in the Properties panel's [ Transformation ] section as follows:
   
   • The control will be positioned as configured.
     

     Item Name	Position X	Position Y
     Text Value	486	492

3. In the Properties panel's [ Control ] section configure properties from the table below.
   

   • The Format Text property is a template for the text using the standard printf value formatter syntax (%d for int or %03d for a 3 digit integer).
   • The Text Value control is now positioned and configured correctly.
     

     Item Name	Format Text	Style	Text Alignment
     Text Value	%3d	OpenSans25	Center

     
     
     

     
     

    

4. From the Toolbox panel under [ Controls ] - [ Common ] drag a "Text" control to the Scene Editor and perform the following configurations in the Properties panel's [ Transformation ] and [ Control ] section.
   • The Text control that displays a static text is now positioned and configured correctly.
     

     	Transformation		Control
     Item Name	Position X	Position Y	Text	Text Style
     Text	482	522	km/h	OpenSans25

      

     

Connect TextValue Control and Gauge Control

The Text Value control will now be connected to the Gauge control, so that both controls display the same value.

1. Select the Gauge Control in the Scene Tree panel and click on the [Fusion...] button in the right side of the Scene Tree panel.
   • Fusion will be opened and Scene Editor will be put to the background.
   • The Fusion diagram displays the Fusion node of the Gauge control.
     
2. In Fusion drag the Fusion node's Behaviors connector to the right and release the mouse button.
   • The Select Behavior dialog will be opened displaying a list of behaviors.
   • The list of behaviors is organized similar to the behaviors in the Toolbox.
   • There is an input field just above the behaviors list.
3. Click into the Select Behavior's input field and start typing "Forward Value".
   • While typing the list of behaviors will be filtered so you can easier find the desired behavior.
4. Double-click the "Forward-Value" behavior.
   • The Select Behavior dialog will be closed.
   • Fusion has added a Forward Value node to its diagram.
   • This behavior is responsible for copying the speed value from the Gauge control to the TextValue control.
5. Configure a TargetNode for the Forward Value behavior, so it knows, where it should forward the value to. Click on the magnifying glass in the Forward Value Fusion Node.
   • The Choose Item dialog will be opened.
6. Navigate to the Text Value control, select it and click [ OK ].
   • The Text Value control is selected as TargetNode for the Forward Value behavior.
     

     Item Name	TargetNode
     Forward Value	Scenes/SceneHome/CompositeNode2D:Text Value

     
     

Add a FlipBook

The top center of our home screen is decorated with a "DigitalClock" control. We will also add a "FlipBook" control to the upper right corner of the scene. 

1. Drag and drop a DigitalClock control from the ToolBox (under [ Controls ] - [ Common ]) to the Scene Editor.
   • A DigitalClock control will be placed into the scene.
2. Configure its Position properties in the Properties panel's [ Transformation ] section.
   • The DigitalClock control will be positioned as configured.
     

     Item Name	Position X	Position Y
     DigitalClock	439	116

3. Drag and drop a FlipBook from the ToolBox (under [ Controls ] - [ Common ]) to the Scene Editor. Place it in the upper right corner.
   
   • A FlipBook control will be placed into the scene.
4. Configure its properties in the Properties panel's [ Transformation ] section.
   • The FlipBook control will be positioned as configured.
     

     Item Name	Position X	Position Y	Scale X	Scale Y
     FlipBook	745	121	0.50	0.50

Check the First Scene

The first screen/scene is now finished.

1. To check the result of configuring the first scene, open the display view. This view represents the final rendered result and can be opened via the menu bar: View - Display - Display-0.
   • The display panel will be opened in a floating way displaying the scene configured in the steps above.
     
     

     
     

2. In the Toolbar make sure that the item "Generate and Play" is selected in the drop-down menu and click the [ > ] button to the left.
   • This will generate the asset so it is available as input for the Player. After that the CGI Panel will be started.
     
     
     
     
3. In the CGI Panel select "Scenes#SceneHome" on the left and click on the [ Controls ] tab.
   • All of the scene's controls are listed.
4. Select the Gauge control.
   • The Gauge control's properties are displayed in a table on the right.
5. To check the functionality of the configured ForwardValue behavior click in the table's field of the property "Value" and manipulate its "Value" to e.g. 35.
   • The Gauge's needle will adjust its rotation to display 35.
     
   • The TextValue control will also update its value to 35.
     
     
     
     

GettingStartedControls Part 2

Part 2 of the GettingStartedControls Tutorial covers the creation of a scene for climate control using various predefined Scene Composer controls. As basis for part 2 of our GettingStartedControls creation tutorial please use your own created solution from part 1.

The final result of our ClimateControl Scene will look like this:

---

Preparing the Climate Scene

1. Create a new scene via the menu bar "Scene" - "New 2D Scene" or press < Ctrl+2 > on your keyboard
   
   • The "Add New Scene 2D" dialog will be opened.
     
2. In the first row select "/Scenes" from the drop-down menu. Enter "SceneClimate" as name and press [OK]. We use the prefix "Scene" to have all scenes listed next to each other in the Solution Explorer panel.
   • A new scene "SceneClimate" is created and visible in the Solution Explorer panel in folder "Scenes".
   • The new scene is opened in the Scene Editor and in the Scene Tree panel.
   • In the Scene Tree panel you can see that the scene already has a camera.
   • In the Render Targets panel you can see that the camera is already added to the RenderTarget.
     
     

     
     

3. In the Render Targets panel check the checkbox of "SceneClimate\Camera" in order to enable rendering.
4. In the Render Targets panel select the SceneClimate\Camera. In the Properties panel's [ Camera ] section change the sequence number to 1.
   • The camera's sequence number is set to 1.
   • In the Scene Tree panel the red Information/Warning/Error square disappears.

Configure the ClimateScene's Layout

For the climate scene we will use a more realistic setup of the scene than before, because very often the layout of the elements of a scene are dependent to the screen size or language. Some languages for example are written from right to left and others from left to right. This for sure will influence the layout of texts and controls. Instead of absolute positioning of all elements, we will use a GridLayout.

1. In the Toolbox panel under [ Nodes 2D ] drag and drop a GridLayout (see image below) into the Scene Editor or into the Scene Tree panel on the SceneClimate node.
   • A GridLayout is visible in the Scene Tree panel.
   • It is also available in the Scene Editor, but only its pivot point is visible when it is selected.
     

     
     

2. In the Scene Tree panel right-click on the GridLayout to open the context menu and choose "Configure Layouter...".
   • The "Grid Layouter Editor" will popup where the GridLayout can be configured.
     

     
     

3. On the Grid Layout Editor's lower left corner, use the [ + ] buttons to add rows and columns (see image below). Configure 6 rows and 4 columns.
   • The GridLayout is configured with 6 rows and 4 columns.
     

     
     

4. Configure the columns' widths and the rows' heights according to the table below using the input fields on the top and right.
   • Rows and columns are configured as in the image above.

     Column	Width		Row	Width
     Column 1	0.05		Row 1	0.20
     Column 2	0.30		Row 2	0.20
     Column 3	0.50		Row 3	0.20
     Column 4	0.05		Row 4	0.20
     			Row 5	0.20
     			Row 6	0.20

5. When you're done configuring, press the [OK] button.
   • The Grid Layout Editor will be closed.

     Be aware that you cannot see the GridLayout. Its size is 0 as long as no size and no content for its cells has been configured.

     
     

6. In the Properties panel's [ Transformations ] section configure the following position of the GridLayout.
   
   • The position of the GridLayout in the Scene Editor has changed.
     

     Target Item	Setting Value
     Position X	0
     Position Y	0

7. In the Properties panel's [ Transformations ] section configure the following size of the GridLayout.

   The size is currently calculated automatically. In order to be able to change the values for the size, you have to click on the [ A ] button to disable the automatic calculation of the size.

    

   • The size of the GridLayout has changed.
   • The GridLayout's grid is now visible.
     

     Target Item	Setting Value
     Size X	1024
     Size Y	714

     

     
     

8. It is recommended to save the Scene Composer solution.
   

---

Creating and Configuring the Labels

Each of the Controls in the Climate Control Scene has a label, telling the user which setting he is able to change with it.

1. From the Toolbox panel drag and drop a "Text" control into the Scene Tree panel directly onto the "GridLayout" node. The "Text" control can be found in the Toolbox panel's [ Control ] section in the list of "Common" controls.
   • The "Text" Control can be seen in the Scene Editor's top left corner.
   • It is also visible in the SceneTree panel, hierarchically ordered below the GridLayout.
2. In the Properties panel's [ Control ] section click on the magnifying glass icon next to the "Text Style" property.
   
   • The "Text Style Palette" dialog will be opened displaying a list of text styles. The currently configured "OpenSans35" is selected.
     
3. In this "Text Style Palette" dialog select "OpenSans25" and click [OK]
   • In the Scene Editor the size of the "Text" control's text has decreased.
4. In the Scene Tree right-click on the "Text" control to open the context menu and select "Clone".
   • The "Clone Item" dialog is opened.
5. In the "Clone Item" dialog set the "Number of Copies" to 5 and click [OK].
   • In the Scene Tree panel you can see that 5 new "Text" controls have been added, named "Text_1", "Text_2" ...
     
6. In the Scene Tree panel right-click on the "GridLayout" and choose "Configure Layouter..." from the context menu.
   • The Grid Layout Editor will be opened.
   • The 6 "Text" controls are listed in the panel on the left.
   • By default the 6 "Text" controls are also positioned in the top left cell of the GridLayout.
7. In the "Grid Layout Editor" drag and drop the "Text" controls from the left into their destination cells one by one as seen in the image below and click [OK].
   • The "Text" controls' position in the GridLayout are now configured correctly.
   • In the Scene Editor you can see that the "Text" controls are now neatly positioned in the Scene.
   • The layout is done by the GridLayout according to its configuration.
     
8. In the Scene Tree panel select all "Text" nodes. Keeping the <SHIFT> key pressed allows you to add items to your selection. In the Properties panel's [ Layout ] section configure VerticalAlignment to "VCenter"
   • "VertigalAlignment" is configured to "VCenter" for all "Text" controls.
   • In the Scene Editor all "Text" controls are vertically centered in their cell.
     
     
9. In the Scene Tree panel select the "Text" controls one after the other and rename them either via the context menu entry "Rename" or by pressing <F2> on your keyboard. Apply the names provided in the table below.
   • In the Scene Tree panel you can see that the "Text" controls have been renamed.

     Target Item	Name
     Text	Text_Temperature
     Text_1	Text_Steering wheel heating
     Text_2	Text_Air Condition
     Text_3	Text_Fan
     Text_4	Text_Seat heater
     Text_5	Text_Heating

10. In the Scene Tree panel select the "Text" controls one after the other again and change text that is displayed by the "Text" controls according to the table below. This can be done in the Property panel's [ Control ] section.
    
    • In the Scene Editor you can see that the "Text" controls display different texts.

      Target Item	Text
      Text_Temperature	Temperature
      Text_Steering wheel heating	Steering wheel heating
      Text_Air Condition	Air Condition
      Text_Fan	Fan
      Text_Seat heater	Seat heater
      Text_Heating	Heating

      

Importing Images

This scene uses the built-in Scene Composer controls but they will be customized with new images. Therefore these images have to be imported into the Scene Composer solution.

1. In the menu bar select Import > Import Resources...
   • The "Import Resources" dialog will be opened.
2. In the "Import Resources" dialog navigate to the path given in the table below. Select all 36 files and press [ Open ]
   • The "Import Images" dialog will be opened.

     Import Resources	Path
     	/cgi_studio_content/Resources/GettingStartedControls/Climate

3. In the "Import Images" dialog select folder "/Resources", make sure to create a new folder "Climate" for the imported images and click [OK].
   • In the Solution Explorer you can see that there is a new folder "Climate" in folder "Resources" that contains the 36 imported images.
   • The images have been imported and can be used in the Scene Composer solution.
     
     

Configuration of Temperature Controls

The temperature settings of this scene are composed of a multitude of different controls that are arranged by a GridLayout. The currently set temperature value can be increased and decreased using the buttons on the left and right side of the Slider. The temperature value can also be controlled dragging the Slider knob.

The configured temperature value is displayed in digits above the Slider. Therefore the Slider and the Text Value Control displaying the value will be connected with a ForwardValue behavior.

To finish the configuration of the temperature controls, the look and feel of the configured temperature controls will be adjusted by exchanging the Slider's and Buttons' default images to be consistent with the scene's design.

Configuring the Layout for the Temperature

The temperature setting for this sample is composed by

• a Text Value control that will displays the current value
• a Slider control that shows the current value as well as the range of the possible values
• a Button control to decrease the currently set value
• a Button control to increase the currently set value
• a GridLayout that layouts the controls above.

The following steps show how to arrange all these fragments to a temperature configuration item.

1. From the Toolbox panel's [ 2D Nodes ] drag and drop a "GridLayout" into the Scene Tree panel directly onto the already configured "GridLayout" node.
   
   • In the Scene Tree the new GridLayout will be inserted as element of the already existing GridLayout.
2. From the Toolbox panel drag and drop a "Text Value" control into the Scene Tree panel directly onto the new GridLayout. The "TextValue" control can be found in the Toolbox panel's [ Controls ] section under "Common".
   • In the Scene Tree panel the "Text Value" control is visible as subordinates to the new GridLayout.
3. From the Toolbox panel drag and drop 2 "Button" controls and a "Slider" control into the Scene Tree panel directly onto the new GridLayout. "Button" and "Slider" control can be found in the Toolbox panel's [ Controls ] section under "Touchable".
   • In the Scene Tree panel the Buttons and the Slider are visible as subordinates to the new GridLayout.
4. In the Scene Tree panel rename the newly created controls according to the table below using the context menu or pressing <F2> on your keyboard.
   • In the Scene Tree panel the controls appear with their new names.

     Target Item	Name
     GridLayout	GridLayout_Slider
     Text Value	Text Value
     Button	Button_TempDec
     Button_1	Button_TempInc
     Slider	Slider_Temperature

5. In the Scene Tree panel right-click on GridLayout_Slider and choose "Configure Layouter..." from the context menu.
   • The "Grid Layout Editor" will be opened.
6. In the "Grid Layout Editor" configure 2 rows and 5 columns using the buttons on the bottom left.
   • In the "Grid Layout Editor" a grid with rows and columns will be displayed as configured.
7. In the "Grid Layout Editor" drag and drop the controls to their destination position as seen in the image below and click [OK].
   • The "Grid Layout Editor" is configured as in the image.
     
8. In the Scene Tree panel right-click on the (outer, older) GridLayout and choose "Configure Layouter..." from the context menu.
   
   • The "Grid Layout Editor" will be opened.
9. In the "Grid Layout Editor" drag and drop GridLayout_Slider into the cell right next to the "Text_Temperature" Text control. Then click [OK].
   • In Scene Editor GridLayout_Slider and all its content is now placed at the correct position.
     
     
     

Connect Slider and Text Value Control

The Temperature controls' functionality will be configured in the following steps: The slider's default, minimum and maximum values, the Text Value control's formatting text as well as the "Forward Value Behavior" that takes care that Slider and Text Value will display the same value at all times.

1. In the Scene Tree panel select the "Text Value" control. In the Properties panel apply the changes according to the table below.
   
   • In the Scene Editor, the "Text Value" will display "0.0°C" in the center.
     

     Item Name	Section	Property	Value
     Text Value	Control	Format Text	%2.1f°C
     	Layout	HorizontalAlignment	HCenter

2. In the Scene Tree panel select the Slider_Temperature. In the Properties panel in the [ Control ] section apply the changes according to the table below.
   
   • The slider's current value, its minimum and maximum value are configured.
   • In the Scene Editor the knob of the slider is on a different position than before.
     

     Item Name	Section	Property	Value
     Slider_Temperature	Control	Value	22
     		Minimum	15
     		Maximum	28

3. In the Scene Tree panel select the Slider_Temperature and click on the [Fusion...] button on the right side of the Scene Tree.
   • Fusion will be opened, hiding the Scene Editor.
   • The Fusion diagram displays the Slider_Temperature's Fusion node.
     
4. In Fusion drag the Slider_Temperature node's Behaviors connector to the right and then release the mouse button.
   
   • The Select Behaviors dialog will be opened, which displays a list of behaviors. The behaviors in this list are organized in categories similar to the list of behaviors in the Toolbox panel's [Behaviors] section.
   • Directly above the list of behaviors is an input field.
5. Click into the input field above the behaviors list and start typing "Forward Value".
   • While typing the list of behaviors will be narrowed down, so that you can easily find the Forward Value behavior.
6. As soon as you can find the "Forward Value" behavior, double-click it.
   • A [Forward Value] node will be added to the Fusion diagram.
7. In the [ForwardValue] Fusion node click on the magnifying glass icon next to the property "TargetNode".
   • The Choose Item dialog will be opened.
     
8. Select the TargetNode as in the table below and click [OK].
   • The [Forward Value] Fusion node's TargetNode is configured.
     

     TargetNode	Path
     	/Scenes/SceneClimate/GridLayout/GridLayout_Slider/Text Value

9. Switch back to the Scene Editor and press the <F5> key to trigger a refresh.
   • In the Scene Editor you can see that the Text Value will display "22°C", which is the value currently configured in the Slider control.
     

Beautifying Temperature Setting Controls

The default visual appearance of the Scene Composer's Slider does not fit to this sample's design. Luckily the Slider's images are exchangeable, so are the Button's images.

1. In the Scene Tree panel select Button_TempDec. In the Properties panel press the magnifying glass icon next to the property "Normal Image" to open the "Choose Item" dialog.
   • The "Choose Item" dialog will be opened.
2. Select image "/Resources/Climate/NewTempDecreaseBmp" and press OK.
   • The "Choose Item" dialog will be closed.
   • Property "Normal Image" is set to "NewTempDecreasBmp".
   • In the Scene Editor a new image will be displayed differently.
     
     
     
3. Repeat steps 1 and 2 to set a new "Pressed Image" for Button_TempDec. Finally, Button_TempDec should be configured according to the table below.
   
   • Button_TempDec is configured with new "Normal Image" and "Pressed Image" which completely changed its appearance.
     

     Target Item	Property	Image
     Button_TempDec	Normal Image	/Resources/Climate/NewTempDecreaseBmp
     	Pressed Image	/Resources/Climate/NewTempDecrease_pressedBmp

     
4. In the Scene Tree panel select Button_TempInc and repeat steps 1 to 3 above to configure new images for "Button_TempInc" according to the table below.
   
   • Button_TempInc is configured with new "Normal Image" and "Pressed Image" changing its appearance completely.
     

     Target Item	Property	Image
     Button_TempInc	Normal Image	/Resources/Climate/NewTempIncreaseBmp
     	Pressed Image	/Resources/Climate/NewTempIncreae_pressedBmp

     
5. In the Scene Tree panel select "Slider_Temperature". In the [ Control ] section of the Properties panel set new images according to the table below.
   • In the Properties panel the Slider Control's image properties are configured with new images.
   • In the Scene Editor you can see the final result of the configured Temperature Slider Control.

     Property	Image
     Knob Normal Image	/Resources/Climate/NewSliderKnobBmp
     Knob Pressed Image	/Resources/Climate/NewSliderKnobPressedBmp
     Track Image	/Resources/Climate/NewSliderBackgroundBmp
     Track Fill Image	/Resources/Climate/NewSliderBmp

     

Configuration of Steering Wheel Heating CheckBox

Configuration of Air Conditioning RadioButtons

This scene uses RadioButtons to configure Air Conditioning values. RadioButtons need to be put into a common GroupBox in order to ensure their functionality.

Since these RadioButtons should fit into the scene's design, we will exchange the images for various states like normal, pressed, selected and selected pressed.

Setting up the Air Conditioning Controls

In this section we focus on the Radio Buttons for Air Condition (AC). Two Radio Buttons are configured inside a horizontal Stack Layout. They are grouped together in a GroupBox to help with the RadioButtons' functionality.

Configure the Air Conditioning RadioButtons

To adjust the Radio Buttons to the general look and feel of the scene we will configure new images for them.

Remember: If you select both RadioButtons in a "multiple selection" in the Scene Tree panel, you can configure the properties that are the same for both RadioButtons at once.

Configuration of Fan Controls

In our scenario the value of the fan can be controlled by two Buttons and a MultiStateButton. These Controls are arranged by a GridLayout.

The MultiStateButton is configured to have 8 different states, for which 8 different images are provided.

The Buttons' images are updated as well, matching to the scene's design and their functionality.

Interactivity between each Button and the MultiStateButton is provided by an EventHandler. A SendValueByEvent behavior will send a configured value to the TargetNode "MultiStateButton" whenever a button is clicked.

Setting up the Fan Controls

Configuring GridLayout_Fan

Configuring MultiStateButton_Fan

1. In the Properties panel's [ Control ] section set "Maximum State" to the value of "7".
   • In the properties panel the Maximum State property is set to 7.
2. In the Properties panel's [ Control ] section click on the "StateImages" property.
   • In the Properties panel the StateImage property will be expanded.
3.  Press the [ + ] button on the right of the "StateImages" property until there are 8 StateImages in the list below.
   • In the Properties panel the list of StateImages will consist of entries from "StateImages 0" to "StateImages 7".
4. In the Properties panel click on the magnifying glass next to "StateImages 0".
   • The "Choose Item" dialog will be opened.
5. In the Choose Item dialog navigate to "/Resources/Climate/NewClimate-0Bmp", select this image and click [OK].
   • In the Properties panel the first StateImage has been configured.
6. Repeat steps 4 and 5 to configure the remaining StateImages as in the table below.
   • In Properties panel all StateImages are configured.
   • In Scene Editor you can see the newly configured images.

   • If the new images are not visible try refreshing the screen by pressing the <F5> key on your keyboard.

     StateImages	Image Path
     StateImages 0	/Resources/Climate/NewClimate-0Bmp
     StateImages 1	/Resources/Climate/NewClimate-1Bmp
     StateImages 2	/Resources/Climate/NewClimate-2Bmp
     StateImages 3	/Resources/Climate/NewClimate-3Bmp
     StateImages 4	/Resources/Climate/NewClimate-4Bmp
     StateImages 5	/Resources/Climate/NewClimate-5Bmp
     StateImages 6	/Resources/Climate/NewClimate-6Bmp
     StateImages 7	/Resources/Climate/NewClimate-7Bmp

     
     
     

Configuring Fan Buttons

1. In the Scene Tree panel select "Button_Fan Off". In the Properties panel's [ Control ] section click the magnifying glass icon next to the "Normal Image" property.
   • The "Choose Item" dialog will be opened.
2. In the Choose Item dialog select "/Resources/Climate/NewButton offBmp" and click [OK].
   • A new image is configured for "Button_Fan Off".
   • In the Scene Editor the new image for the button is displayed.
3. Repeat steps 1 and 2 above to configure the images for "Button_Fan Off" and "Button_Fan Max" according to the table below
   • The images for the Fan Buttons have been changed.
   • In Scene Editor the new normal images can are visible.
     

     Target Item	Property	Image Path
     Button_Fan Off	Normal Image	/Resources/Climate/NewButton offBmp
     	Pressed Image	/Resources/Climate/NewButton offselectedBmp
     Button_Fan Max	Normal Image	/Resources/Climate/NewButton maxBmp
     	Pressed Image	/Resources/Climate/NewButton max_selectedBmp

     

Add Interactivity to Fan Controls

Configuration of Seat Heater MultiStateButton

Configuration of Heating SpinBox

In this section we will configure the Heating control. The SpinBox allows the user to change the values by clicking the uptick and downtick buttons.

Check the Climate Scene

GettingStartedControls Part 3

In Part 3 of the GettingStartedControls Sample we will create a (Phone Connection) Options scene. This scene offers the possibility to choose the connection type (Cable, Bluetooth and other) from a Dial Control on the left side. The right side displays a List of devices. When a device gets selected, an associated Sub-List Control with two TextButtons will be shown. 

As basis for step 3 of our GettingStartedControls tutorial, please use your own created solution from the previous "GettingStartedControls" tutorial.

And this is what the final scene will look like:

---

Preparing the Options scene

A scene will be created and the camera will be configured in the Render Targets panel.

1. Create a new scene via the menu bar "Scene" - "New 2D Scene" or press < Ctrl+2 > on your keyboard
   
   • The "Add New Scene 2D" dialog will be opened.
     
2. In the first row select "/Scenes" from the drop-down menu. Enter "SceneOptions" as name and press [OK]. We use the prefix "Scene" to have all scenes listed next to each other in the Solution Explorer panel.
   • A new scene "SceneOptions" is created and visible in the Solution Explorer panel in folder "Scenes".
   • The new scene is opened in the Scene Editor and in the Scene Tree panel.
   • In the Scene Tree panel you can see that the scene already has a camera.
   • In the Render Targets panel you can see that the camera is already added to the RenderTarget.
     
3. In the Render Targets panel check the checkbox of "SceneOptions\Camera" in order to enable rendering.
   • Rendering of the scene is enabled.
     
     
4. In the Render Targets panel select the SceneOptions\Camera. In the Properties panel's [Camera] section change the sequence number to 2.
   • The camera's sequence number is set to 2.
   • In the Scene Tree panel the red Information/Warning/Error square disappears.
     

Importing Images

This scene uses the built-in Scene Composer controls but they will be customized with new images. Therefore these images have to be imported into the Scene Composer solution.

Configuring the Background

This scene is composed of two parts: Connection and Devices. For each of these parts a 2D Group node will be created. To position the background image a BitmapNode will be configured with one of the images imported in the previous section.

1. From the Toolbox panel's [Node 2D] section drag a 2D Group node into the Scene Tree directly onto the node "SceneOptions".
   • In the Scene Tree panel you can see a 2D Group node.
     
     
2. From the Toolbox panel's [Node 2D] section drag a BitmapNodes onto the 2D Group node.
   • In the Scene Tree panel you can see that a BitmapNodes has been created.
     
     
3. In the Scene Tree panel select the 2D Group and create a copy either via the context menu entries "Copy" and "Paste" or via the keyboard <Ctrl>+C and <Ctrl>+V.
   • A copy of the 2D Group with its BitmapNode has been created.
   • In Scene Tree panel the name of the copy is "Group_1".
     
     
4. In the Scene Tree panel select the nodes added in the steps before one after the other and rename them either via the context menu entry "Rename" or by pressing <F2> on your keyboard. Apply the names provided in the table below.
   • In the Scene Tree panel you can see that the nodes have been renamed.

     Target Item		Name
     Group		Connection
     	BitmapNode	Background
     Group_1		Devices
     	BitmapNode	Background

     
5. In the Scene Tree panel select the BitmapNodes called "Background" one after the other and perform the following instructions on both background nodes: In Scene Tree panel's right side select the "BitmapBrushBlend" effect. In the Properties panel's [Effect] section click on the magnifying glass icon next to the Image property.
   • The "Choose Item" dialog will be opened.
     
     
6. In the "Choose Item" dialog select the image as in the table below and click [OK].
   • The Choose Item dialog will be closed.
   • In the Scene Editor a background image is visible displaying a vertical grey-black gradient.

     Node	Effect	Property	Path
     Connection > Background	BitmapBrush Blend	Image	/Resources/Options/ConnectionOptionsENBOSBmp
     Connection > Background	BitmapBrush Blend	Image	/Resources/Options/ConnectionOptionsENBOSBmp

     
7. In the Scene Tree panel select the "Connection" group. In the Properties panel's [Transformations] section adjust the "Position" property according to the table below. Repeat this step with the "Devices" group.
   • In Scene Editor two rectangles with a gradient background are visible.

     Target Name	Position X	Position Y
     Connection	78.00	58.00
     Devices	551.00	58.00

     

Configuration of the "Connection" Nodes

The left side of the scene offers the possibility to choose the connection type. The Scene Composer's built-in Dial control will be customized with new images that fit to the scene's design. TextNodes will be added as labels.

Creation and Positioning of the Dial Control

1. From the Toolbox panel's [Controls] section under Touchable drag a Dial control into the Scene Tree panel directly onto the "Connection" group.
   • In the Scene Tree panel a Dial control has been added into the "Connection" group.
   • In the Scene Editor the Dial control is visible in the top left corner of the left gradient image.
     
     
2. In the Scene Tree panel select the Dial control. In the Properties panel's [Transformation] section adjust its position according to the table below.
   • In the Scene Editor the Dial control is positioned in the lower center of the gradient image.

     Target Name	Position X	Position Y
     Dial	72.00	163.00

Configuration of the Dial Control

The following steps show how to configure the Dial control with new images.

1. In the Properties panel's [Control] section click on the magnifying glass icon next to property "Knob Image".
   • The "Choose Item" dialog will be opened.
     
     
2. In the "Choose Item" dialog select the image as in the table below and click [OK].
   • The "Choose Item" dialog will be closed.
   • In the Scene Editor an orange ring will become visible.

     Property	Path
     Knob Image	/Resources/Options/NewDial_arrow_middleBmp

3. In the Properties panel's [Control] section click on the the "BackgroundImages" section.
   • In the Properties panel the "BackgroundImages" section will be expanded.
     
     
4. In the Properties panel's [BackgroundImages] section click on the magnifying glass next to "BackgroundImages 0".
   • The "Choose Item" dialog will be opened.
     
     
5. In the "Choose Item" dialog select the image as in the table below and click [OK].
   
   • The "Choose Item" dialog will be closed.
   • In the Properties panel the first one of the BackgroundImages has been configured.

     Property	Path
     BackgroundImages 0	/Resources/Options/NewDial_background_leftBmp

     
     
6. Repeat steps 4 and 5 to configure the remaining BackgroundImages. After this step the BackgroundImages are configured according to the table below.
   • In Properties panel all BackgroundImages are configured.
   • In Scene Editor you can see the newly configured images.

     If the new images are not visible try refreshing the screen by pressing the <F5> key on your keyboard.

     StateImages	Image Path
     BackgroundImages 0	/Resources/Options/NewDial_background_leftBmp
     BackgroundImages 1	/Resources/Options/NewDial_background_middleBmp
     BackgroundImages 2	/Resources/Options/NewDial_background_rightBmp

     
7. In the Solution Explorer panel select the new Knob Image "/Resources/Options/NewDial_arrow_middleBmp". In the Properties panel's [Bitmap] section enable "Pivot Hint" by checking the respective checkbox.
   • A new property "Pivot Hint" becomes visible.
     
     
8. Configure the "Pivot Hint" as in the table below.
   • The Pivot Hint for the Knob Image is configured correctly.

     Target Name	Enable Pivot Hint	Pivot Hint X	Pivot Hint Y
     NewDial_arrow_middleBmp	true	84,50	88,00

     
     
9. In the Solution Explorer select the three images that were configured as BackgroundImages. In the Properties panel proceed similar to steps 7 and 8, enabling and configuring the Pivot Hint of these three images according to the table below.
   • The Pivot Hint is configured correctly.
   • In Scene Editor the Dial's images are neatly aligned. The images have a common center.

     If the the images are still not aligned correctly try refreshing the screen by pressing the <F5> key on your keyboard.

     Target Name	Enable Pivot Hint	Pivot Hint X	Pivot Hint Y
     NewDial_background_leftBmp	true	130,50	130,50
     NewDial_background_middleBmp	true	130,50	130,50
     NewDial_Background_rightBmp	true	130,50	130,50

     
     

Adding TextNodes as Connection Labels

TextNodes will be configured with an attractive font and positioned as labels for choosing the connection type.

1. From the Toolbox panel's [Nodes 2D] drag and drop a TextNode into the Scene Tree panel directly onto the "Connection" group node.
   • In the Scene Tree panel a TextNode will become visible.
   • In the Scene Editor the text "Text" will appear.

     If the text does not appear in Scene Editor, the BitmapNode "Background" might be covering the TextNode. Make sure that "Background" is the first (top) item inside the "Connection" group. Nodes can be re-arranged in the Scene Tree panel via drag&drop.
     

2. In the Scene Tree panel select the new TextNode. In the Properties panel's [2D Text Node] section click on the magnifying glass icon next to property "Style".
   • The "Text Style Palette" dialog will be opened.
     
     
3. In the "Text Style Palette" dialog select "OpenSans25" and click [OK].
   • In Scene Editor the Text Style of the TextNode will change.
     
     
4. In the Scene Tree panel right click onto the TextNode and select "Clone..." from the context menu.
   • The "Clone Item" dialog will be opened.
     
     
5. In the "Clone Item" dialog change to the "Multiple Clone" tab. Configure "Number of Copies" to "3" and click [OK].
   
   • In the Scene Tree panel 4 TextNodes are now available inside the "Connection" group.
     
     
6. In the Scene Tree panel select the newly created TextNodes one after the other and configure their names in the Scene Tree panel and the remaining properties in the Properties panel as in the table below.
   • The TextNodes are fully configured.
   • The final result of the Connection part can be seen in the images below.

     TextNode Name	2D Text Node	Transformations
     	Text	Position X	Position Y
     TextNode_Connection	Connection	141	61
     TextNode_Bluetooth	Bluetooth	149	134
     TextNode_Cable	Cable	20	200
     TextNode_Other	Other	315	200

     

Setting up the "Devices" nodes

The right side of the scene displays a list of devices. Scene Composer's built-in List control will be expanded to facilitate customization later on. Based on the existing List control a new reusable MyList control template will be created.

1. In the Scene Tree panel copy the TextNode_Connection from the Connection Group2D either via the context menu "Copy"  or via the keyboard shortcut <Ctrl + C>. Paste the TextNode into the Devices Group2D either via the context menu "Paste" or via the keyboard shortcut <Ctrl + V>.
   
   • In the Scene Tree panel you can see that TextNode_Connection has been copied to the Devices group.
   • In the Scene Editor another Textnode with "Connection" is visible.
     
     
2. In the Scene Tree panel select the new TextNode_Connection from the Devices group and rename it to TextNode_Devices either via the context menu "rename" or via the keyboard shortcut <F2>.
   • In the Scene Tree panel you can see a TextNode called TextNode_Devices inside of the Devices Group2D.
     
     
3. In the Scene Tree panel select TextNode_Devices. In the Properties panel's [2D Text Node] section change the TextNode's Text property and in the [Transformation] section adapt its Position according to the table below.
   • Text and position of the TextNode are configured.
   • In the Scene Editor you can see that the devices part has got a headline.

     TextNode Name	2D Text Node	Transformations
     	Text	Position X	Position Y
     TextNode_Devices	Devices	145	61

4. From the Toolbox panel's [Control] section under "Touchable" drag a List Control into the Scene Tree panel directly onto the "Devices" group node.
   • In the Scene Tree panel a "List" node is visible directly under the "Background" node.
   • This list node contains a "ListContentGroupAnchor", that is visible in Scene Tree panel by expanding the List node via a click on the triangle on its left.
     
     
5. In the Scene Tree panel right-click on the newly created List node and choose [Expand Control Node] from the context menu.
   • In the Scene Tree panel the expanded List now shows a "ListContentGroup" and a "Scrollbar".
     
     
6. In the Scene Tree panel right-click on the "Scrollbar" and once again choose [Expand Control Node] from the context menu.
   • In the Scene Tree panel the expanded Scrollbar shows 6 sub-nodes.
     
7. In the Scene Tree panel right-click on the List node and choose [Save as Control...] from the context menu.
   • The "Add New Templates" dialog will be opened.
     
     
8. In the "Add New Templates" dialog select the "/Controls" folder to store the new control in, enter "MyList" as name and click [OK]. 
   • A new customizable control "MyList" has been created. It is visible in the Solution Explorer panel in the Controls folder and in the Toolbox panel's [Controls] section as last item of the list.

   • The Scene Editor doesn't display SceneOptions any more, it displays the control MyList. 
     

   • The Scene Tree panel shows the structure of MyList.

   • The Properties panel shows the properties of "MyList (Control)".
     

     

Configure MyList Control

Expose MyList's ScrollBarVisibility

Scene Composer's List internally holds a property for the scrollbar's visibility, which is not shown in the Properties panel by default. The following steps show how to access a list of hidden properties. For this sample solution we will make the scrollbar's visibility property publicly editable in the Properties panel.

1. In the Solution Explorer right-click on the newly created control "MyList" and choose [Control Properties...] from the context menu.
   • The "Configure Public Control Properties" dialog will be opened.
     
2. In the "Configure Public Control Properties" dialog's tree on the left side select the following item MyList > List > Scrollbar > Behaviors > ScrollbarBehavior. In the dialog's centered panel "Internal properties" find property "ScrollbarVisibility", check the "Is Public" checkbox and click [OK].
   • The "Configure Public Control Properties" dialog will be closed.
   • For every instance of the MyList control, there will be a property available to configure the visibility of the scrollbar.
     
     
3. In the Scene Tree navigate back to SceneOptions by pressing the arrow in the top left corner.
   • The Scene Tree panel navigates back to SceneOptions and displays SceneOptions and its nodes.
   • The Scene Editor displays SceneOptions.
     
     
4. In the Scene Tree delete the List node.
   • The "Delete Item" dialog will be opened.
     
     
5. In the "Delete Item" dialog press [OK].
   • The List node is deleted.
     
     
6. From the Toolbox panel's [Control] section drag and drop a MyList control into the Scene Tree panel directly onto the Devices group.
   • In the Scene Tree panel, a new MyList node will be visible.
     
     
7. In the Scene Tree panel select "MyList". In the Properties panel's [Control] section set the "Scrollbar Visibility" to "Visible".
   • In the Scene Editor a small blue scrollbar becomes visible.
     
     

Customize MyList's Scrollbar

Scene Composer's default scrollbar has a blue base color. For our orange based design the scrollbar will be customized in the steps below.

1. In the Scene Tree panel double-click on the MyList node.
   • Scene Tree panel will switch from displaying SceneOptions to displaying the MyList template.
2. In the Scene Tree panel select the "Thumb" button node. In the Properties panel change the button's image properties according to the table below by clicking the magnifying glass icon and selecting the appropriate image in the "Select Item" dialog.
   • New images for the scrollbar's "Thumb" have been defined.

     MyList > List > Scrollbar > Thumb
     Thumb Images	Image Path
     Normal Image	/Resources/Options/ThumbNormalBmp2Bmp
     Pressed Image	/Resources/Options/ThumbPressedBmp2Bmp
     Focused Image	/Resources/Options/ThumbNormalBmp2Bmp

3. In the Scene Tree panel select the "VerticalPrevItem" button node. In the Properties panel change the button's image properties according to the table below by clicking the magnifying glass icon and selecting the appropriate image in the "Select Item" dialog.
   • New images for the scrollbar's "VerticalPrevItem" have been defined.

     MyList > List > Scrollbar > PrevItem > VerticalPrevItem
     VerticalPrevItem Images	Image Path
     Normal Image	/Resources/Options/ArrowUpNormalBmp2Bmp
     Pressed Image	/Resources/Options/ArrowUpPressedBmp2Bmp
     Focused Image	/Resources/Options/ArrowUpNormalBmp2Bmp

4. In the Scene Tree panel select the "VerticalNextItem" button node. In the Properties panel change the button's image properties according to the table below by clicking the magnifying glass icon and selecting the appropriate image in the "Select Item" dialog.
   • New images for the scrollbar's "VerticalNextItem" have been defined.

     MyList > List > Scrollbar > NextItem > VerticalNextItem
     VerticalNextItem Images	Image Path
     Normal Image	/Resources/Options/ArrowDownNormalBmp2Bmp
     Pressed Image	/Resources/Options/ArrowDownPressedBmp2Bmp
     Focused Image	/Resources/Options/ArrowDownNormalBmp2Bmp

5. In the Scene Tree navigate back to SceneOptions by pressing the arrow in the top left corner.
   
   • The Scene Tree displays SceneOptions.
   • In the Scene Editor the scroll bar is now rendered with the new images in orange color.
     
     

Configure MyList's Main Item

Our MyList control will be composed of MainItems. Whenever a certain MainItem gets selected, the appropriate Sub-List will be displayed. The following steps explain how to build up a MainItem.

1. In the Scene Tree panel double-click on the MyList node.
   • Scene Tree panel switches from SceneOptions to MyList.
   • You are now able to edit the MyList template.
     
     
2. From the Toolbox panel's [2D Nodes] section drag an OverlayLayout into the Scene Tree panel directly onto the List's "ListContentGroup" (MyList > List > ListContentGroup).
   • In the Scene Tree panel there is an OverlayLayout inside of "ListContentGroup".
     
     
3. From the Toolbox panel's [2D Nodes] section drag a RenderNode and a TextNode into the Scene Tree panel directly onto the OverlayLayout that was created in the previous step.
   • In the Scene Tree panel there are a RenderNode and a TextNode inside the OverlayLayout that was created in the previous step.
   • In the Scene Editor the TextNode is visible displaying the TextNode's default text "Text".
     
4. In the Scene Tree panel select the nodes created in the previous steps and rename them either via the context menu entry "Rename" or by pressing <F2> on your keyboard according to the table below.
   • In the Scene Tree panel the nodes are renamed according to the following table.

     Initial Name	New Name
     OverlayLayout	MainItem
     TextNode	EntryName
     RenderNode	FocusImage

5. In the Scene Tree panel select the List (Group2D). In the Properties panel's  [Transformation] section configure the position and size according to the following table.
   
   • In Scene Editor the Position and size of the selected rectangle is adjusted according to the new settings.

     Size X and Size Y properties are initially set to "Automatic" and greyed out. Clicking onto the "A" next to the greyed-out input field allows you to edit these properties.

     Target Item	Transformation		Layout
     	Position X	Position Y	Size X	Size Y
     List (Group2D)	58	134	300	300

Configure MyList's Highlight for Selected Item

In a list it is useful to highlight the selected item. This will be done using a FocusImage drawing a border around the focused MainItem.

1. From the Toolbox panel's [Effects] section drag a BitmapBrushColorBlend effect into the Scene Tree panel directly onto the MainItem's FocusImage.
   • In the Scene Tree panel's right side you can see BitmapBrushColorBlend effect under "Effects" when FocusImage is selected.
     
     
2. In the Scene Tree panel select FocusImage. In the Scene Tree panel's right side select the BitmapBrushColorBlend effect. In the Properties panel click on the magnifying glass icon next to the "Image" property.
   • The "Choose Item" dialog will be opened.
     
     
3. In the "Choose Item" dialog select the image as in the table below and click [OK]. 
   • The "Choose Item" dialog will be closed.

     Target Item	Image
     MyList > List > >ListContentGroup > MainItem > FocusImage > BitmapBrushColorBlend	//ConstructionKit/ConstructionKit/Controls/Images/Common/BorderFocusedBmp

4. In the Properties panel change the Color property by entering new values for "Red", "Green" and "Blue" according to the table below.
   • In the Properties panel the configured orange color will be visible.

     The Color property can also be edited in the Color Palette window, which can be opened by clicking on the color preview rectangle next to the Color property.

     Target Item	Color
     	Red	Green	Blue
     MyList > List > >ListContentGroup > MainItem > FocusImage > BitmapBrushColorBlend	1.0	0.62	0.00

     
5. In the Scene Tree panel select the FocusImage node. In the Properties panel's [Layout] section set the StretchBehavior to "Fill" according to the table below.
   
   • In the Scene Editor the FocusImage RenderNode will appear highlighted with an orange outline.

     Target Item	Layout > StretchBehavior
     MyList > List > >ListContentGroup > MainItem > FocusImage	Fill

     
     
     

Create MyList's Sub-List

A Sub-List will be used to display 2 TextButtons to "Connect" or "Unpair" the associated device. The TextButtons will be positioned by a StackLayout. New images for normal, pressed and focused image will be defined.

1. From the Toolbox panel's [Controls] section under "Touchable" drag a Sub-List into the Scene Tree panel directly onto the List's ListContentGroup
   • In the Scene Tree panel the Sub-List node is positioned inside of ListContentGroup just below the MainItem.
   • The Sub-List has a SubListAnchor.
     
     
2. From the Toolbox panel's [Node 2D] section drag a StackLayout into the Scene Tree panel directly onto the Sub-List's SubListAnchor.
   • In the Scene Tree panel the StackLayout appears beneath the Sub-List's SubListAnchor.
     
     
3. From the Toolbox panel's [Controls] section under "Touchable" drag a TextButton Into the Scene Tree panel directly onto the StackLayout you added in the step before.
   • In the Scene Tree panel the TextButton appears beneath the StackLayout.
     
     
4. In the Scene Tree panel select the StackLayout. In the Properties panel's [Transformation] and [Layout] section configure the properties as in the table below.
   • In the Scene Editor the dashed line of the TextButton's boundings will decrease.
     

     Target Item	Transformations		Layout
     	Scale X	Scale Y	Margin Left
     TextButton	0,75	0,75	12

5. In the Properties panel's [Control] section click on the magnifying glass icon next to the TextButton's "Normal Image" property.
   • The "Choose Item" dialog will be opened.
     
     
6. In the "Choose Item" dialog select the image according to the table below and click [OK].
   • A new image for "Normal Image" has been configured.
     
     
7. Repeat steps 5 and 6 for the TextButton's "Pressed Image" and "Focused Image".
   • New images are configured for the TextButton.
     

     Target Item	Image Path
     Normal Image	/Resources/Options/ButtonNorma_BkBmp
     Pressed Image	/Resources/Options/ButtonNorma_Prss_OreBmp
     Focused Image	/Resources/Options/NOTBorderFocusedBmp

8. In the Scene Tree panel select the TextButton and create a copy either via the context menu entries "Copy" and "Paste" or via the keyboard <Ctrl>+C and <Ctrl>+V.
   • A copy of the TextButton has been created.
   • In Scene Tree panel the name of the copy is "TextButton_1".
     
     
9. In Scene Tree panel rename the TextButtons according to the table below. Renaming can be done either via the context menu "Rename" or pressing <F2> on your keyboard.
   • In Scene Tree panel the TextButtons are renamed.
     
     
10. In Scene Tree panel select the TextButtons individually and change the text they are displaying in the Properties panel's [Control] section according to the table below.
    • The texts of the TextButtons have been changed.
      

      Target Item	New Name	Control - Text
      TextButton	TextButton_Connect	Connect
      TextButton_1	TextButton_Unpair	Unpair

      

Configure Behaviors for the Focus Handling of MyList's MainItem

Whenever MyList's MainItem gets focused, an orange border shall be displayed. Focus and FocusLeave behaviors are used to enable or disable the rendering of the FocusImage. The behaviors are configured using Fusion. 

A detailed explanation about Fusion, how to operate Fusion (how to add Fusion Nodes) and a configuration example can be found in the documentation about Fusion. 

1. In the Scene Tree panel select the MainItem's FocusImage. In the Properties panel's [Item] section uncheck "Enable Rendering".
   • In the Scene Editor FocusImage (the orange rectangle) is not visible any more.
   • In the Scene Tree panel an icon indicates the FocusImage node's disabled rendering.
     
2. In the Scene Tree panel select the MainItem GroupNode. Then press the [Fusion...] button on the right side of the Scene Tree.
   • Fusion panel is opened displaying the Fusion diagram with the MainItem Fusion Node.
   • The MainItem Fusion node has a Behaviors connector on its right side.
     
     
3. Add Fusion Nodes to the MainMenu Fusion Node using its Behaviors connector according to the table below.
   • Three new Fusion node will be added to the Fusion diagram: Handle Control State, Focus, FocusLeave.
   • Focus Fusion Node and FocusLeave Fusion Node can be configured with [Action] connectors.
     

     Connect to	Connector	Add Fusion Nodes
     MainItem Fusion Node	Behaviors	Handle Control State
     	Behaviors	Focus
     	Behaviors	FocusLeave

4. Add Fusion Nodes to the Focus Fusion Node and the FocusLeave Fusion Node using their Actions connectors according to the table below.
   
   • An EnableRendering Fusion Node will be connected to the Focus Fusion Node.
   • An EnableRendering Fusion Node will be connected to the FocusLeave Fusion Node.

     Connect to	Connector	Add Fusion Nodes
     Focus Fusion Node	Actions	EnableRendering
     FocusLeave Fusion Node	Actions	EnableRendering

5. Configure the properties "Visible" and "Target Node" for both EnableRendering Fusion Nodes nodes according to the table below.
   • MyList's behaviors for focus handling are configured.
   • Whenever the MainItem gets the focus, the FocusImage will get visible.
   • Whenever the MainItem looses the focus, the FocusImage will get invisible.
     

     Behavior	Visible	Target Node
     Focus - EnableRendering	True	MyList > List > ListContentGroup > MainItem > FocusImage
     FocusLeave - EnableRendering	False	MyList > List > ListContentGroup > MainItem > FocusImage

     
     
     

Configure Behaviors for MyList's MainItem

When an item in the Devices list is clicked, a Sub-List will become visible. This Sub-List contains buttons for connecting/disconnecting.

1. In the Scene Tree panel select item MyList > List > ListContentGroup > MainItem. Then press the [Fusion...] button on the right side of the Scene Tree.
   • Fusion is opened displaying the Fusion diagram with the MainItem Fusion Node.
   • The MainItem Fusion Node has a Behaviors connector on its right side.
     
     
2. Add Fusion Nodes to the MainItem Fusion Node using its Behaviors connector according to the table below.
   • A new Fusion node will be added to the Fusion diagram: Event Handler Fusion Node.
   • The Event Handler Fusion node has 2 connectors on its right: a Condition connector and an Action connector.

     Connect to Fusion Node	Connector	Add Fusion Nodes
     MainItem	Behaviors	Event Handler

3. Add Fusion Nodes to the Event Handler Fusion Node according to the table below.
   • A new Fusion node will be added to the Fusion diagram: Check Logic Condition Fusion Node.

     With the Check Logic Condition you can combine 2 conditions with a configurable logic operation (And, Or, Xor).

     Connect to Fusion Node	Connector	Add Fusion Nodes
     Event Handler	Condition	Check Logic Condition

4. Add two Fusion Nodes to the Check Logic Condition Fusion Node using its Conditions connector according to the table below.
   
   • 2 new Fusion Nodes will be added to the Fusion diagram: Check Key Input Fusion Node and Check Click Fusion Node.
     

     Connect to Fusion Node	Connector	Add Fusion Nodes
     Check Logic Condition	Condition	Check Key Input
     	Condition	Check Click

5. Configure the Condition Fusion Nodes according to the table below.
   • Check Click and Check Key Input condition are logically combined through Check Logic condition.
   • The Check Logic condition will evaluate to TRUE if either the Check Click condition or the Check Key Input condition is TRUE.
     

     Condition	Property	Value
     Check Logic Condition	Operation	Or
     Check Key Input	KeyCode	Key_Enter
     Check Click	-	-

6. Add a Fusion Node the Event Handler Fusion Node using its Action connector according to the table below.
   
   • A new Fusion Node will be added to the Fusion diagram: Send Value as Event Fusion Node.

     Connect to Fusion Node	Connector	Add Fusion Nodes
     Event Handler	Action	Send Value As Event

     
     
7. Configure the [Send Value as Event] Fusion node according to the table below.
   • Send Value As Event is configured according to the table.
   • On every click or enter key press a boolean value will be sent to the Sub-List control.

     To configure the TargetNode click on the magnifying glass icon to open the [Choose Item] dialog. Navigate to the desired object and press [OK].

     Behavior	Property	Value
     Send Value As Event	Target Node	/Controls/MyList/List/ListContentGroup/Sub-List
     	Value	Bool - TRUE
     	Change Value	Relative

     

1. 
   

Configure Behaviors for MyList's Sub-List

The visibility of the Sub-List shall be toggled by clicking the MainItem. Let's configure the necessary behaviors to the Sub-List.

1. In the Scene Tree panel select item MyList > List > ListContentGroup > Sub-List node. Then click the [Fusion...] button on the right side of the Scene Tree.
   • Fusion is opened displaying the Fusion diagram with the Sub-List's Fusion Node.
   • The Fusion node has a Behaviors connector on its right side.
     
     
2. Add a Fusion Node the Sub-List Fusion Node using its Behaviors connector according to the table below.
   
   • A new Fusion Node will be added to the Fusion diagram: Value Fusion Node.

     Connect to Fusion Node	Connector	Add Fusion Nodes
     Sub-List	Behaviors	Value

3. Configure the Value Fusion Node according to the table below.
   • The Value behavior's type has been changed to Bool.
     

     Behavior	Property	Value
     Value	Variant	Bool - FALSE

     
     
4. Add a Fusion Node the Value Fusion Node using its Receivers connector according to the table below.
   
   • A new Fusion Node will be added to the Fusion diagram: Action On Value Fusion Node.

     Connect to Fusion Node	Connector	Add Fusion Nodes
     Value	Receivers	Action On Value

5. Add two Fusion Node the Action On Value Fusion Node according to the table below.
   
   • 2 new Fusion Nodes will be added to the Fusion diagram: Check Processed Value Fusion Node and Set Control State Fusion Node.
     

     Connect to Fusion Node	Connector	Add Fusion Nodes
     Action On Value	Condition	Check Processed Value
     	Actions	Set Control State

6. Configure the newly added Fusion Nodes according to the table below.
   • The Action On Value Fusion Node is configured with an action that will be executed whenever a new value is received. In our case the Sub-List's Control State is set to enabled when the Bool value "TRUE" is received.
     

     Behavior	Property	Value
     Check Processed Value	ConditionOperator	Equal
     	ConditionValue	Bool, TRUE
     Set Control State	State	Enabled
     	ChangeTo	TRUE

7. Repeat steps 4 and 5 to configure another set of Fusion Nodes to the Value Fusion Node using its Receivers connector according to the table below. 
   • 3 new Fusion Nodes will be added to the Fusion diagram: Action On Value_1 Fusion Node, Check Processed Value_1 Fusion Node and Set Control State_1 Fusion Node.

     Connect to Fusion Node	Connector	Add Fusion Nodes
     Value	Receivers	Action On Value_1
     Action On Value	Condition	Check Processed Value_1
     	Actions	Set Control State_1

8. Configure the newly added Fusion Nodes according to the table below.
   • The Action On Value_1 Fusion Node is configured with an action that will be executed whenever a new value is received. In our case the Sub-List's Control State is set to disabled (enabled = FALSE) when the Bool value "FALSE" is received.
     

     Behavior	Property	Value
     Check Processed Value_1	ConditionOperator	Equal
     	ConditionValue	Bool, FALSE
     Set Control State_1	State	Enabled
     	ChangeTo	FALSE

     

Test MyList in the Player

Let's test if the configured behaviors of MyList control are functional.

1. Save your solution either via the menu bar "File - Save Solution" or via the keyboard <Ctrl + S>.
   
   • The solution has been saved.
2. In the Scene Composer's Toolbar click on "Play selected scenario...".
   • The resources will be generated and the Player will be started.
     
3. In the CGI Panel check Scenes#SceneOptions and uncheck SceneHome and SceneClimate
   • In the Player window SceneOptions will be displayed with the Connection Dial on the left side and the empty Devices List on the right side, displaying the scrollbar.
     
4. In the Player window click the first item of the Devices List, the text of which is "Text".
   • In the Player window's Devices List an orange border will be displayed indicating the selected MainItem.
   • Additionally, the Sub-List with the TextButtons "Connect" and "Unpair" will be displayed below the selected MainItem.
     
5. In the Player window click the selected MainItem again.
   • The TextButtons of the Sub-List will disappear.
6. In the Scene Composer's Toolbar click the "Close the Player" button.
   • The Player and CGI Panel window will be closed.
     

Configure a Devices List using MyList

So far we have been working on our MyList control with only one single list entry. Now that this first list entry is fully configured, we can create more of them.

1. In the Scene Tree panel select the Main Item and the Sub-List. Copy and paste them to create 4 more instances. This can be done either via the context menu [Copy] and [Paste] or via the keyboard shortcuts <Ctrl + c> and <Ctrl + v>.
   • In the Scene Tree panel you can see that MyList's ListContentGroup now contains 5 MainItems and 5 Sub-Lists.
     
2. In the Scene Tree panel select the MainItems individually. Use Fusion to configure the appropriate TargetNode for the [Send Value As Event] Fusion nodes (see table below).
   
   • The "Send Value As Event" behaviors' TargetNodes are configured with the respective MainItems.

     To easily set the Target Node lock the Properties panel using the pad lock icon in the top right corner. From the Scene Tree panel drag the Sub-List node into the Properties panel directly onto the input field next to "TargetNode". Finally, don't forget to unlock the Properties panel clicking the pad lock icon once again.

     SendValueAsEvent of	TargetNode
     MainItem	/Controls/MyList/Group2D:List/Group2D:ListContentGroup/CompositeNode2D:Sub-List
     MainItem_1	/Controls/MyList/Group2D:List/Group2D:ListContentGroup/CompositeNode2D:Sub-List_1
     MainItem_2	/Controls/MyList/Group2D:List/Group2D:ListContentGroup/CompositeNode2D:Sub-List_2
     MainItem_3	/Controls/MyList/Group2D:List/Group2D:ListContentGroup/CompositeNode2D:Sub-List_3
     MainItem_4	/Controls/MyList/Group2D:List/Group2D:ListContentGroup/CompositeNode2D:Sub-List_4

3. In the Scene Tree panel select MainItem's EntryName. In the Properties panel's [2D Render Node] section change the property "Text" according to the table below.
   
   • In the Scene Editor you can see the changed texts.
     

     TextNode2D	Text
     MainItem > EntryName	Phone (Private)
     MainItem_1 > EntryName	Phone (Work)
     MainItem_2 > EntryName	New Device
     MainItem_3 > EntryName	New Device
     MainItem_4 > EntryName	New Device

     
     

Check the Options Scene

GettingStartedControls Part 4

In the first 3 parts of this sample we have created 3 individual scenes. In the Player it was necessary to enable and disable the displayed scenes manually. In this part we will add menu tabs to the bottom of the screen so the user can switch between scenes as he likes. 

As basis for step 4 of our GettingStartedControls tutorial, please use your own created solution from the previous "GettingStartedControls" tutorial.

Our menu tabs scene can be seen on the bottom of the climate scene in below image.

Our goal is to create a tab bar to enable the user to switch between different scenes. As this bar shouldn't be displayed permanently, it will be put into a drawer control. This way it can be made visible by hovering an image and it can be hidden again by clicking on a close button. The buttons will be realized using customized radio buttons.

This tab bar will be placed on the bottom of every screen. To avoid having to create this bar inside every scene where it should be displayed, we will define a separate scene, which we can reuse on all screens.

Importing Images

We will use the built-in Scene Composer controls but they will be customized with new images. Therefore these images have to be imported into the Scene Composer solution.

Creating the TabButton

We will use Scene Composer's built-in RadioButtons as controls for our tab bar. Since the usual RadioButtons' appearance doesn't fit into a tab bar optically, we are going to customize the RadioButton to create a TabButton. We will use the radio button control as our base template.

Remove the RadioButton's Knob

The RadioButton control will be customized to look like buttons: the typical RadioButton circle icon will be replaced by background images for the button's various states (normal, selected, pressed...).

1. In the Solution Explorer navigate to "References > SCL: ConstructionKit > ConstructionKit > Controls > RadioButton" and copy the RadioButton control either via the context menu "Copy" or the keyboard shortcut <Ctrl + C>.
   • The RadioButton control is in the clipboard and ready to be pasted.
     
     
2. In the Solution Explorer navigate to "Solution > Controls" and paste the RadioButton control either via the context menu "Paste" or the keyboard shortcut <Ctrl + V> into the Controls folder.
   • In Solution Explorer you can see that the RadioButton has been pasted into the Solution/Controls folder.
     
     
3. In the Solution Explorer rename the RadioButton control in the Solutions/Controls folder to "TabButton" either via the context menu "Rename" or the keyboard shortcut <F2>.
   • In the Solution Explorer you can see that the RadioButton in the Solutions/Controls folder is renamed to "TabButton".
   • In the Toolbox panel's [ Controls ] section you can see a new folder "Touchable" with the newly created TabButton.
     

     
     

4. In the Solution Explorer or in the Toolbox double-click the newly created TabButton.
   • In the Scene Editor you can see the TabButton, which currently looks like Scene Composer's RadioButton.
   • In the Scene Tree panel you can see the complete design of the TabButton, which is a copy of the RadioButton. On the Scene Tree panel's left side you can see the node structure, on the right side you can see the applied behaviors that form the control's logic.

     The important thing to know is that all changes you perform here will be applied to ALL instances of this control class immediately. 
     This is also valid when changing properties as long as your control class is opened. You can close it by clicking the left arrow at the top of the Scene Tree or by using the context menu of the Control in the SceneTree and choosing "Go To Previous Element".
     If you are outside of the control's "Edit mode", all changes in the properties or behavior panel will influence a single instance of the control.

5. In the Scene Tree panel navigate to and select the RadioButtonNode (TabButton > StackLayout > OverlayLayout > RadioButtonNode). In the Scene Tree panel's right side select the RadioButtonNode behavior actions for setting images one by one as (see the table in the next step below). For each of the behaviors click on the magnifying glass icon next to the Image property in the Properties panel.
   • The Choose Item dialog will be opened
     
     
6. In the "Choose Item" dialog select the image as in the table below and click [ OK ]. 
   • The "Choose Item" dialog will be closed.
   • The respective image has been changed.
   • In the Scene Editor the TabButton (former RadioButton) has changed as you can see in the image below.
     

     RadioButtonNode - Behavior	Image
     SetNormalImage	/Resources/MenuTabs/ButtonNorma_BkBmp
     SetSelectedImage	/Resources/MenuTabs/ButtonNorma_Prss_OreBmp
     SetSelectedPressedImage	/Resources/MenuTabs/ButtonNorma_Prss_OreBmp
     SetNormalPressedImage	/Resources/MenuTabs/ButtonNorma_Prss_OreBmp

     

Configure the Text's Position

The positioning of text and background is not quite right. The following steps will correct that.

1. In the Scene Tree panel select the TextNode (TabButton > StackLayout > TextNode). In the Properties panel's [Layout] section change the HorizontalAlignment and the Margin according to the table below.
   
   • In the Scene Editor panel minor changes in text positioning are visible.
     

     Target Node	HorizontalAlignment	Margin
     		Left	Right
     RadioButtonNode	HCenter	6	6

2. In the Scene Tree panel select the TextNode (TabButton > StackLayout > TextNode). In the Scene Tree panel's right side select the ProvideTextProperty. In the Property panel change the Text property to "TabButton".
   
   • In the Scene Editor the TabButton's text is changed to "TabButton".
     
     
3. In the Scene Tree panel select the TextNode and drag it onto the root node TabButton, which is called "TabButton".
   • In the Scene Tree panel you can see that the TextNode is now directly under the TabButton.
   • In the Scene Editor the TextNode with the text "TabButton" is visible. It is hidden behind the Image of the RadioButtonNode.
     
     
4.  In the Scene Tree panel select the RadioButtonNode and drag it onto the root node TabButton as well.
   • In the Scene Tree panel you can see that the RadioButtonNode is now between the TabButton and the TextNode.
   • In the Scene Editor the TextNode with the text "TabButton" is visible again as in the picture below.
     
     
5. In the Scene Tree panel select the StackLayout (with the OverlayLayout) and delete it either via the context menu "Delete" or by pressing the delete key on your keyboard.
   • The Delete Item dialog will be opened displaying which items are going to be deleted.
     
     
6. In the Delete Item dialog press the [OK] button.
   • In the Scene Tree panel you can see that StackLayout and OverlayLayout have been deleted.
   • The Scene Tree looks as in the image below.
     
7. In the Scene Tree panel select the RadioButtonNode. In the Properties panel's [Layout] section change Alignment and Margin properties as well as the StretchBehavior according to the table below.
   • In the Scene Editor the TextNode's text "TabButton" is neatly positioned in the center of the button (see image below).
   • We have successfully created and customized our own TabButton control, which can be used like any other control.
     

     Target Node	Vertical	Horizontal	Margin		StretchBehavior
     	Alignment		Left	Right
     RadioButtonNode	VStretch	HStretch	0	0	Fill

     

Creating MenuTabs Scene

A MenuTabs scene will be created and configured with a GridLayout holding various Buttons.

Setting up the Scene

In the following steps a scene is created and the camera as well as the viewport are configured.

1. Create a new scene via the menu bar "Scene" - "New 2D Scene" or press < Ctrl+2 > on your keyboard
   
   • The "Add New Scene 2D" dialog will be opened.
     
     
2. In the first row select "/Scenes" from the drop-down menu. Enter "SceneMenuTabs" as name and press [OK]. We use the prefix "Scene" to have all scenes listed next to each other in the Solution Explorer panel.
   • A new scene "SceneMenuTabs" is created and visible in the Solution Explorer panel in folder "Scenes".
   • The new scene is opened in the Scene Editor and in the Scene Tree panel.
   • In the Scene Tree panel you can see that the scene has a camera.
   • In the Render Targets panel you can see that the camera is already added to the RenderTarget.
     

     
     

3. In the Render Targets panel check the checkbox of "SceneMenuTabs\Camera" in order to enable rendering.
   • Rendering of the scene is enabled.
     
     
4. In the Scene Tree panel select the Camera. In the Properties panel's [Camera] section configure the Viewport height to 54. 

   The value of this property is calculated automatically. In order to be able to edit it, you have to click on the [A] button to the property's right, which will switch auto off.

   • In the Scene Editor you can see that the height of the viewport is reduced to 54, which is about the height of the TabButton control.
     
     
5. In the Scene Tree panel select the Camera. In the Properties panel's [Camera] section change the sequence number to 3.
   • The camera's sequence number is set to 3.
   • In the Scene Tree panel the red Information/Warning/Error square disappears.
     

Adding and Arranging Buttons

A GridLayout is configured to arrange 3 different kinds of buttons forming our menu of our configured car HMI.

1. From the Toolbox panel's [Controls] section under "Container" drag a GroupBox into the Scene Tree panel directly onto SceneMenuTabs.
   • In the Scene Tree panel you can see that there is a GroupBox node.
   • In the Scene Editor you can see a square with a white dashed outline.
     
     
2. In the Scene Tree panel select the GroupBox node. In the Properties panel's [Layout] section configure the Size according to the table below.

   The value of this property is calculated automatically. In order to be able to edit it, you have to click on the [A] button to the property's right, which will switch auto off.

   • In the Scene Editor the white dashed outline will match the yellow line that marks the viewport.
     

     Target Node	Size
     	X	Y
     GroupBox	1024	54

3. In the Scene Tree panel click on the little triangle to the left of the GroupBox to expand its content.
   
   • In the Scene Tree panel the GroupBox node will open and you can see the Content anchor below.
     
     
4. From the Toolbox panel's [Node 2D] section drag a GridLayout into the Scene Tree panel directly onto the GroupBox's Content anchor.
   • In the Scene Tree panel you can see the GridLayout node.
     
     
5. In the Scene Tree panel select the GridLayout. In the Properties panel's [Layouter] section change the Column Count to 6.
   • The Column Count has been changed to 6.
     
     
6. From the Toolbox panel's [Controls] section drag Controls into the Scene Tree panel directly onto the GridLayout according to the table below.
   • In the Scene Tree panel you can see that a Button, 4 TabButtons and a TextButton have been added to the GridLayout.
   • In the Scene Editor the blue Button and 4 TabButtons (with the dark background) are rendered directly over each other, so that not all of them are visible.
     
     

     Controls Section	Controls
     		Touchable <ConstructionKit>	1 Button
     Touchable	4 TabButtons
     Touchable <ConstructionKit>	1 TextButton

     

     
     

7. In the Scene Tree panel select the GridLayout. In the Properties panel's [Layout] section configure GridAutoArrangement for "horizontal".
   • In the Scene Editor you can see that the Button, TabButtons and TextButton are neatly arranged.
     

     
     

8. In the Scene Tree panel right-click on the GridLayout and choose [Configure Layouter...] from the context menu.
   • The Grid Layout Editor will be opened.
   • In the Grid Layout Editor you can see that the Controls are bunched together inside of the first cell.

   The Controls don't have to be configured for a certain column. The Controls will be arranged at runtime using the GridAutoArrangement property that we configured in the previous step.

9. In the Grid Layout Editor configure the columns' widths according to the table below and press [OK].
   
   • In the Scene Editor you can see that the columns widths have changed.
     

     Column 1	Column 2	Column 3	Column 4	Column 5	Column 6
     0.10	0.20	0.20	0.20	0.20	0.10

     
     
     

Configuring the Menu Bar's Buttons

The following steps will adapt the Buttons' visual appearance to the intended design and configure the Buttons' texts.

1. In the Scene Tree panel expand the Button by clicking on the little triangle on its left.
   
   • In Scene Tree panel a Content anchor will get visible.
     
     
2. From the Toolbox panel's [Controls] section under "Common <ConstructionKit>" drag a Text control and drop it directly onto the Button's Content anchor.
   • In the Scene Tree panel the Text control appears beneath the Content anchor.
   • In the Scene Editor the Button is displayed with the text "Text" on it.
     
     
3. In the Scene Tree panel select the Text control. In the Properties panel change the properties according to the table below.
   • In the Scene Editor the Button is displayed with the centered sign ">".
     

     Properties Section	Property	Value
     Control	Text	>
     Layout	Vertical Alignment	VCenter
     	Horizontal Alignment	HCenter

4. In the Scene Tree panel select the Button. In the Properties panel's [Control] section change the Button's Image properties according to the table below. To change the images click on the magnifying glass icon to open the Choose Item dialog, select the appropriate image and click [OK].
   • In the Scene Editor the Button's background will be displayed in almost black color.
     

     Properties Section	Property	Value
     General	Name	Next
     Control	Normal Image	/Resources/MenuTabs/ButtonNorma_BkBmp
     	Pressed Image	/Resources/MenuTabs/ButtonNorma_Prss_OreBmp
     	Focused Image	/Resources/MenuTabs/ButtonNorma_Prss_OreBmp

5. In the Scene Tree panel select the TabButtons one by one (from top to bottom) and apply the properties in the Properties panel according to the table below.
   • In the Scene Tree panel all TabButtons are renamed.
   • In the Scene Editor you can see the TabButtons' texts (from left to right): HOME, CLIMATE, PHONE, OPTIONS.
     

     General > Name	Control > Text
     TabHome	HOME
     TabClimate	CLIMATE
     TabPhone	PHONE
     TabOptions	OPTIONS

6. In the Scene Tree panel select the TextButton. In the Properties panel apply the properties as given in the table below.
   • In the Scene Editor the TextButton's Text and Background have changed according to the configuration
   • In the Scene Tree panel the TextButton is renamed.
     

     Properties Section	Property	Control > Text
     General	Name	CloseButton
     Control	Text	X
     	Normal Image	/Resources/MenuTabs/ButtonNorma_BkBmp
     	Pressed Image	/Resources/MenuTabs/ButtonNorma_Prss_OreBmp
     	Focused Image	/Resources/MenuTabs/ButtonNorma_Prss_OreBmp

7. In the Scene Tree panel select the GroupBox. In the Properties panel's [Control] section click on the magnifying glass icon next to property "Default Selected Object". 
   • The "Choose Item" dialog will be opened.
     
     
8. In the Choose Item dialog navigate to and select the "TabHome"  TabButton which can be found via the path below, and click [OK].
   • In the Scene Editor the "TabHome" TabButton will be displayed selected as in the image below.
     

     Default Selected Object	Path
     	/Scenes/SceneMenuTabs/GroupBox/Content/GridLayout/TabHome

     

Integration of SceneMenuTabs

To integrate the SceneMenuTabs into the Display we have to reduce the height of our Home and Climate scenes.

1. In the Render Targets panel select the cameras one by one and change the properties in the Properties panel's [Camera] section according to the table below.
   • In the Scene Editor for SceneHome, SceneClimate and SceneOptions you can see that the height of the yellow camera viewport rectangle is reduced to 714.
     

     Camera	Viewport			Enable Swapping
     	Left	Top	Height
     SceneHome\Camera	0	0	714	TRUE
     SceneClimate\Camera	0	0	714	TRUE
     SceneOptions\Camera	0	0	714	TRUE
     SceneMenuTabs\Camera	0	714	54	FALSE

2. In the menu bar go to View > Display > Display-0.
   • The Display(0) window will be opened.
     
     
3. In the Render Targets panel check the SceneMenuTabs\Camera and one of the other cameras. 
   • In the Display(0) window you should be able to see the SceneMenuTabs on the bottom of the window and the other scene on the top just like in the image below. 
     

Adding Functionality to the MenuTabs

When pressing a TabButton the respective scene should be displayed. This will be solved by configuring conditions and behaviors using Fusion to trigger scene activation and deactivation.

A detailed explanation about Fusion, how to operate Fusion (how to add Fusion Nodes) and a configuration example can be found in the documentation about Fusion. 

1. In the Solution Explorer double-click on SceneMenuTabs.
   • In the Scene Editor and in the Scene Tree panel SceneMenuTabs will be opened.
     
     
2. In the Scene Tree panel navigate to SceneMenuTabs > GroupBox > Content > GridLayout > TabHome. Click on the Fusion button on the Scene Tree panel's right side.
   • Fusion will be opened with the TabHome Fusion Node in the center.
     
   • The TabHome Fusion Node has a Behaviors connector.
     
     
3. Add Fusion Nodes to Fusion diagram the according to the table below.
   • 3 new Fusion node will be added to the Fusion diagram: Event Handler Fusion Node, Check Control State Fusion Node and Transition Request Fusion Node.

     Connect to Fusion Node	Connector	Add Fusion Nodes
     TabHome	Behaviors	Event Handler
     Event Handler	Condition	Check Control State
     	Action	Transition Request

4. Configure the newly added Fusion nodes according to the table below.
   • If TabHome's selected state changes to true, a transition to activate SceneHome is requested.

     Fusion Node	Property	Value
     Check Control State	State	Selected
     	StateCondition	ChangedToTrue
     Transition Request	RequestType	Activate
     	Identifier	SceneHome

     

      

5. In Fusion select the 3 newly added EventHandler Fusion Node, the Check Control State Fusion Node and Transition Request Fusion Node. Now copy and paste these nodes into the Fusion diagram (either via the context menu or via the keyboard shortcuts <Ctrl>+c and <Ctrl>+v).
   • The Fusion nodes are copied, resulting in: Event Handler_1 Fusion Node, Check Control State_1 Fusion Node and Transition Request_1 Fusion Node.
     
     
6. Change the configuration of the Fusion Nodes created via Copy&Paste according to the table below.
   • If TabHome's selected state changes to false, a transition to deactivate SceneHome is requested.

     Fusion Node	Property	Value
     Check Control State_1	State	Selected
     	StateCondition	ChangedToFalse
     Transition Request_1	RequestType	Deactivate
     	Identifier	SceneHome

     
     
7. Copy all Fusion Nodes of this Fusion diagram except for the TabHome Fusion Node and paste them into the Fusion diagrams of TabClimate and TabOptions. Adapt the TransitionRequest Fusion Nodes' Identifier to SceneClimate or SceneOptions respectively according to the table below.
   
   • If TabClimate's selected state changes to true, a transition to activate SceneClimate is requested.
   • If TabClimate's selected state changes to false, a transition to deactivate SceneClimate is requested.
   • The same is true for TabOptions and SceneOptions.
   • With these configurations done, the SceneMenuTabs works as a navigation bar, enabling the user to switch between different scenes.
     

     For this tutorial, ScenePhone has been skipped, since most controls have already been covered by other scenes.

     Fusion Diagram of	Fusion Node	Identifier Value
     TabClimate	Transition Request	SceneClimate
     	Transition Request_1	SceneClimate
     TabOptions	Transition Request	SceneOptions
     	Transition Request_1	SceneOptions

8. Save your work and start the Player to test the functionality of your configuration.
   • Pressing TabClimate will activate SceneClimate, Pressing TabOptions will activate SceneOptions and Pressing TabHome will activate SceneHome.

Configuring the Menu Bar to Hide/Reappear

We want to make our menu bar with our TabButtons appear on hovering an indicator and disappear when clicking a button. To achieve this, the GroupBox will be moved into a Drawer Control. The indicator RenderNode2D will be enhanced with Control functionality.

Configuring a Drawer Control

Our menu bar will be encapsulated into a Drawer Control that can then be opened and closed like a drawer at a desk, hiding or showing its contents according to its opened/closed state.

1. Open SceneMenuTabs. From the Toolbox panel's [Controls] section under "Touchable <ConstructionKit>" drag a Drawer control and drop it into the Scene Tree panel directly onto the SceneMenuTabs.
   • In the Scene Tree panel you can see that a Drawer control has been added to your scene.
     
     
2. In the Scene Tree panel expand the newly added Drawer control.
   • A ContentAnchor will be displayed.
     
     
3. In the Scene Tree panel drag the SceneMenuTabs > GroupBox directly onto the Drawer's ContentAnchor.
   • The GroupBox and all its content will be moved into the Drawer control.
     
     
     
4. Configure the Drawer Control's properties in the Properties panel according to the table below.
   • The Drawer is configured to only appear if needed and to appear from the Bottom.
   • The Drawer is configured closed and its content won't be visible.
     

     By unchecking the "Open" property, the Drawer Control will be closed, so it will hide its content. The content is still available, just hidden in a drawer (like in a desk drawer, where you can put away stuff).
     You can check and uncheck this property during editing as you like and watch it appear and disappear, but please make sure to uncheck it in the end.
     If there is no visual change when toggling the "Open" property, try forcing a refresh by pressing <F5> on your keyboard.

     Drawer Properties Section	Property	Value
     Control	Open	False
     	Appear Direction	Bottom

5. In the Solution Explorer panel navigate to the image arrowTabsBmp which can be found following the path below and drag this image into the Scene Editor or into the Scene Tree panel.
   • In Scene Editor the arrowTabsBmp image will be displayed.
   • In Scene Tree panel a new RenderNode2D with the arrowTabBmp image will be available.
     

     arrowTabsBmp	Solution Explorer Path
     	Solution > Resources > MenuTabs > arrowsTabBmp

6. In the Scene Tree panel make sure that arrowsTabBmp is positioned above the Drawer control as seen in the image below.
   • The indicator is now hidden while the drawer is open and our menu bar is displayed.
     
     

     
     

7. In the Scene Tree panel select the newly created RenderNode2D arrowsTabBmp. In the Properties panel change the properties as in the table below.
   • The RenderNode2D is positioned correctly.

     arrowsTabBmp Properties Section	Property		Value
     Transformations	Position	X	469
     	Position	Y	21
     	Scale	X	0.5
     	Scale	Y	0.5

Opening and closing the Drawer Control

The Drawer Control shall be opened when hovering or clicking the indicator and it shall be closed when the Close Button is pressed. This functionality is configured using Fusion.

A detailed explanation about Fusion, how to operate Fusion (how to add Fusion Nodes) and a configuration example can be found in the documentation about Fusion. 

1. While arrowsTabBmp is selected in the Scene Tree panel click on the [Fusion...] button on the right side of the Scene Tree.
   
   • Fusion will be opened, displaying the arrowsTabBmp Fusion Node.
     
     
2. Add a HandleControlState Fusion Node to the arrowTabBmp Fusion Node using its Behaviors connector according to the table below.
   
   • A new HandleControlState Fusion Node will be added to the Fusion diagram.
   • RenderNode2D is now enhanced with control functionality.

     Connect to Fusion Node	Connector	Add Fusion Nodes
     arrowsTabBmp	Behaviors	HandleControlState

     
     
3. Add Fusion Nodes to the Fusion diagram according to the table below to build up the Fusion diagram shown in the image below.
   • 4 new Fusion nodes have been created: OnClick Fusion Node, Hover Fusion Node, Change Drawer State Fusion Node and Change Drawer State_1 Fusion Node.

     Connect to Fusion Node	Connector	Add Fusion Nodes
     arrowsTabBmp	Behaviors	Hover
     	Behaviors	OnClick
     OnClick	Actions	Change Drawer State
     Hover	Actions	Change Drawer State_1

     
     
     
4. In Fusion configure the TargetNode of Change Drawer State Fusion Node and Change Drawer State_1 Fusion Node according to the table below. To do this, click on the magnifying glass icon on the right side of the TargetNode property and follow the path to the Drawer control given in the table below.
   
   • The Drawer will now be opened when the indicator is hovered or clicked.

     TargetNode	Choose Item Path
     Change Drawer State	Scenes > SceneMenuTabs > Drawer
     Change Drawer State_1	Scenes > SceneMenuTabs > Drawer

5. In the Scene Tree panel select the CloseButton, which can be found in the path below. Then click on the [Fusion...] button on the Scene Tree panel's right side.
   • Fusion will be opened with the CloseButton's Fusion diagram.
   • The CloseButton is already a Control and has an EventHandler and a Check Click condition.
     

     CloseButton	Scene Tree Path
     	SceneMenuTabs > Drawer > ContentAnchor > GroupBox > Content > GridLayout > CloseButton

6. Add a Fusion Node to the Event Handler Fusion Node using its Actions connector according to the table below.Change Drawer State action.
   • In Fusion a new Fusion Node has been added to the Fusion diagram: Change Drawer State Fusion Node.
     

     Connect to Fusion Node	Connector	Add Fusion Nodes
     Event Handler	Actions	Change Drawer State

     
     
7.  In Fusion configure the Change Drawer State Fusion Node as in the table below.
   • The Close Button is now configured to close the drawer.
   • The Fusion diagram looks like in the image below.
     

     Change Drawer State Property	Value
     TargetNode	Scenes > SceneMenuTabs > Drawer
     Action	Close

     
     
     

     
     

8. Save your work and start the Player to test the functionality of your configuration.
   • The Drawer will close when the [Close] button is pressed.
   • The Drawer will open when the indicator is hovered.
     

GettingStartedControls Part 5

Data-bound clock

In this step we will add a new Control that represents a clock. This clock works via data-binding. The Player that comes with CGI Studio provides one sample data-source that represents the current UTC time. This value will be bound to the clock Control. Scene Composer offers an analog and a digital clock control. In this example digital clock will be used. Note that the following steps work similarly for the analog clock.

Application specification

The data-source is defined in the Player. Therefore a connection between the Player and the Scene Composer Solution has to be defined. The following approach needs to be followed if data-binding should be used.

1. In the menu bar go to [File] >[Define application specification].
   • The "Courier Editor Parameters" dialog will pop up. See image below
     
   • This dialog requires two paths.

     File	This is the path to the XHCDL file where the binding sources are stored
     Include Path	This is root path to the source of CGI Studio Courier.

     
2. Enter the paths as given in the table below and press [OK].
   • The specification is saved.
   • The Output panel will show whether the validation is valid (Validation finished!) or not (Validation failed!).
     

     File	\cgi_studio_player\src\Player\xhcdl\PlayerDataBinding.xhcdl
     Include Path	\cgi_studio_courier\src

Add Data-Binding to the DigitalClock Control

1. In the Solutions Explorer double-click SceneHome, which can be found under path given in the table below. 
   • Scene Tree panel displays the scene tree of SceneHome. There is a DigitalClock control under the root node (SceneHome > DigitalClock).
     
   • Scene Editor displays the editable scene. There is a DigitalClock control in the top center above the gauge.
     

     Open Scene	Solution Explorer Path
     SceneHome	Solution > Scenes > SceneHome

2. Either in Scene Editor or in Scene Tree panel select the DigitalClock control and view the configurable properties in the Properties panel.
   
   • In the Properties panel under [Control] there is a Time property.
   • The Time property has a button with a chain icon on its right side. Its tooltip says "Bind property to a data source item".
     
3. Click on this button.
   • The Define Data Binding dialog will be opened.
   • In the top of this dialog you can see that for the property "Time" the datatype "Variant" is preselected.
     
     
4. From the list of Data items choose the Time binding source and click [OK].
   • The Data Binding has been configured successfully.

     To find the binding source more easily, the dialog offers a search field.

     
5. You can now generate a new asset library and try it out in the Player.

Conclusion

This concludes the Getting Started Controls tutorial. However, by providing your own custom images and further modifying the layout of the controls, you can create even more visually stunning solutions. The GettingStartedControls sample provided in CGI Studio is just one example of what can be achieved using this tutorial as a basis.

Content Design Best Practices

Introduction

CGI Studio - Scene Composer, and the Candera Graphics Engine - provides a tool chain which is targeted at embedded real-time 2D/3D graphics. As embedded platforms do not have the computing power of modern desktop hardware it is often necessary to adapt 2D/3D graphical content to fit the platform demands.

The scope of this document is to explain best practices regarding design of graphical content, to meet specific needs of the CGI Studio tool chain importing such content.

Further, experiences and potential pitfalls by using specific content generation tools are described.

After reading this document, a Graphics Designer shall know how to benefit from the key features of CGI Studio.

Content Design Guidelines

Embedded 2D/3D hardware is optimized for low power consumptions and reliable operation in industrial environments (e.g. very low or very high temperature). The processing power of embedded devices thus can’t be compared to desktop graphics hardware which has significantly less limitations in computing power, memory, power consumption, and cooling requirements.

Generally, 3D models need to be optimized to make use of the strengths, and to minimize the impact of limitations set by the embedded graphics hardware. With 3D models tailored specifically to the capabilities of the embedded hardware, it is possible to achieve a high visual appeal and also a high frame rate.

This chapter explains, what has to be considered in the very early design phases regarding the graphical composition of an application, to meet the requirements of an embedded 2D/3D system.

Content Design in the Planning Phase

Optimized Screen Updates

If possible, avoid effects/animations etc. that would change all content of the screen at the same time. This allows updating only parts of the screen that really changed. Partial screen updates will improve performance compared to full screen updates.

Define 2D and 3D Content

Consider which parts of the content have to be a fully modeled 3D mesh and which can be flat 2D/3D-Surfaces. If it is possible to use a dedicated 2D-Core, then this would be the preferred way to realize 2D or flat surfaces. If only a 3D-Core is available, it is often preferable to use flat meshes with textures instead of complex 3D meshes. Good candidates for flat surfaces are objects that are only seen and lit from one direction.

Anti-Aliasing Requirements

Anti-Aliasing is a costly technique and should therefore only be used sparsely. If the platform supports layers, it is advised to make the layers with content which needs to be anti-aliased as small as possible. The need for anti-aliasing can also be avoided if textures are used that are fully transparent on the edges of a mesh which can be easily done for most flat objects.

Content Separation by Dynamics

Enable separation of content regarding its dynamic during runtime. Less dynamic content can be rendered less frequently which leaves more performance headroom for rendering high dynamic content. 
If the target platform supports (hardware) layers, it’s advised to put content like background images on separate layers. E.g. background content doesn’t need to be heavily optimized as much if it can be rendered only once and never updated again. 

Zooming Requirements (Level of Detail)

If objects are seen from varying distances additional low-poly variants can be used when the object is far away. A high-poly version should only be used when the object is close to the camera.

Content Creation Guidelines

Simplify Meshes

Often high-Polygon versions of meshes are reduced with the help of automated tools. While this gets fast results the reduced meshes are also often sub optimal. A low poly mesh created from scratch often has fewer polygons than one made with an optimizer while still having the same visual appearance.
Small geometric details of meshes can also be imitated with textures to reduce the polygon count further.

Optimized Billboards

To avoid drawing fully transparent pixels, create special meshes that have no geometry where the texture would be transparent. These meshes don’t have to fit the texture exactly since they should only have very few polygons. 
Refer to the following example: Instead of a single Billboard with 2 triangles this mesh uses 40, but also avoids a lot of transparent pixels in the center that otherwise would be drawn:

Optimize Number of Nodes

To reduce the number of draw calls object parts that share the same material and are not transparent can be combined into one single object.

Use Level of Detail (LoD)

For the best possible results, it’s also advised to create LoD-Meshes manually instead of using optimizer tools.

Lighting

Lighting is a costly operation so as few light sources as possible should be used. In terms of performance an ambient light is faster than a directional light which in turn is faster than a point light. The slowest light is a spotlight. In the Candera Graphics Engine, all light types can act as an implicit ambient light so in most cases there is no need to create an explicit one.
In any case, avoid scenes with partly covered lights (as might be done in real life). The same effect can usually be achieved with other but less costly techniques.

Textures

The general rule for textures is to make them as small as possible. Textures shouldn’t be bigger than the size they have when displayed on the target system. Though, depending on hardware limitations texture dimensions could be restricted to a power of 2.
Textures can often be reduced further in size through clever usage of texture coordinates and stretching. If the texture is regular, it could be stretched or repeated or mirrored.

Also, large empty areas inside of textures should be avoided. This can be done by chopping up the texture and packing the filled parts as close as possible. Then adapt the mesh texture coordinates accordingly. A mesh with a few more polygons and a small texture is often faster than one with a big texture.

In above example, the texture is reduced to ¼ of the original size by cutting and packing parts closer together to avoid large empty areas. To display the object without errors again a special mesh needs to be created much like the one displayed in Figure 1.
Another possibility is to use 16-Bit Textures instead of 24/32-Bit to reduce the size of the content.

DCC Tool Specific Features and Capabilities

DCC Tool specific features and capabilities such as path extrusion, bone animations, shape morphing, particle effects, shadow casting, etc. are often either not transferable by simple export-import process or achieved in a different way on the target system. It is recommended to completely avoid these features or – if desired for early preview – not to rely on the availability of exactly these features on the target system. Nevertheless, most desired effects can be realized using specifically modeled objects and adding the regarding effect implementation with CGI Studio. How to implement a certain effect best needs to be clarified case by case with the Technical Artist implementing that effect for the target.

Content Creation

Formats supported by CGI Studio

3D File Format: FBX

While import software (Autodesk FBX SDK) supports several file formats, due to limitations of different formats, Scene Composer supports FBX import only.

Supported 3D Content

• Mesh: Geometry as Array Buffer, indexed Array Buffer 
  
• Nurb: converted to Mesh 
  
• Patch: converted to Mesh 
  
• Material: Ambient color, Diffuse, Emissive, Specular, Specular Power 
  
• Light: Spot, Directional, Point 
  
• Camera: field of View, near Plane, far Plane, aspect Ratio 
  
• Animation: Translation, Rotation, Scaling, Visibility
  
• Scene Graph: Object position, deep Groups, flat Groups (i.e. linked objects)
  
• Skeleton: converted to Group

2D Image and Texture Formats

A wide range of 2D content is supported for texture generation:

• Jpeg - .jpg, .jpe, .jpeg 
  
• Portable Network Graphics - .png 
  
• Graphics Interchange Format - .gif
  
• Truevision Targa - .tga 
  
• Windows Bitmap - .bmp 
  
• Tagged Image File Format - .tif 
  
• Various others

During image export, gamma correction must be disabled!

Content Creation Rules 

Procedural Shaders

Procedural shaders and special hardware shaded materials are not supported by Candera and not exported by FBX plug-in. Use only textures and standard material properties like diffuse color, specular, emissive and ambient.

Procedural Meshes

Procedural generated meshes are not supported by Candera and not exported by FBX plug-in. Convert your procedural generated meshes to static meshes before exporting.

Reflective Materials

Reflective materials are ignored by Candera and not exported by FBX plug-in. Reflective effects have to be done by environment mapping in Candera.

Material Count

Only the first material of a mesh will be considered by Candera. All other materials are ignored.

Animations

A keyframe sequence cannot contain keyframes with different interpolation types. If a keyframe sequence has different interpolation types Candera takes only the interpolation type of the first keyframe into account. (linear, spline or step)

Different Handling of 3D Coordinate Systems

Almost every 3D DCC tool uses an own interpretation of the 3D coordinate system. Due to this mix-up of coordinate systems, it is not always possible to mix the content of this DCC tools without any problems. Here some examples:

Autodesk 3ds Max

Autodesk 3ds Max uses +Z as up-vector and a right-handed coordinate system.

Autodesk Maya

Autodesk Maya uses +Y as up-vector and a right-handed coordinate system.

MAXON Cinema 4D

MAXON Cinema 4D uses +Y as up-vector and a left-handed coordinate system.

CGI Studio 

The Scene Composer and the Candera rendering engine are using the default OpenGL coordinate system which is Y as up-vector and a right-handed coordinate system.

Creating Content with various DCC Tools

As CGI-Studio is building on standard data formats like FBX, PNG, TIFF or TGA it is possible to use almost all modern digital content creation tools (DCC tools) to create 2D/3D content. Examples for 3D content tools are Autodesk 3DS Max, Autodesk Maya or MAXON Cinema 4D. Examples for 2D DCC Tools are Adobe Photoshop or Corel Draw. Usually, it is no problem to use many of them for one project but sometimes it can lead to problems because of the different creation methods these tools prefer. In this chapter we want to explain best practices in the CGI-Studio tool chain and how to overcome different obstacles you may face.

General Recommendations

Use a single 3D DCC Tool

It is recommended to use only one 3D DCC tool for one project and not to mix content created from e.g. Cinema 4D and 3ds Max. This guarantees the best outcome without import problems. If there is a need to use more than one tool you have to be aware to fix import/export problems afterwards. 

Mixing Content from 3ds Max and Cinema 4D

If you are forced to mix the content from 3ds Max and Cinema 4D you have to be aware that the handling of the coordinate systems is totally different. If you use an exported camera from Cinema 4D this camera usually has Y as up vector. So, if you load a 3D object from 3ds Max in the Scene Composer into a scene which was created by Cinema 4D you will see that your object is maybe rotated 90 degrees around the X axis. A simple fix is to rotate the object back -90 degrees around the X axis. However, by exporting the FBX file with option “Up Vector: Y” this can also be handled easy. 

Use same FBX Plugin Version in whole Workflow

Using different FBX plugins within the workflow will may result in strange behavior and appearance of objects after importing them into CGI-Studio or when editing them in your 3D DCC tool after re-import with another plugin version. 

The FBX versions are recommended as in the following table:

Scene Composer Version	FBX Version
3.3.0	7.4 or newer
3.3.1 or newer	7.4 or newer

FBX Export Settings

In general, we recommend starting with the default preset “Autodesk Media & Entertainment” and then manually setting the following options (Figure 4):

• Include -> Geometry -> Triangulate [ON] 
  (To ensure conversion of all polygons to triangles. Not available in some older FBX plugin versions.)
  
• Include -> Animation -> Bake Animation [ON]
  (To preserve non-standard animations such as camera movement along a spline.)
  
• Advanced Options -> FBX File Format -> Type: ASCII 
  (Is human readable and easier to version in SCM tools.)
  Only if you use a virtual Y-up axis” in 3ds Max (as shown in Switching to a virtual Y-up Axis in 3ds Max) then you should also set:
  
• Advanced Options -> Axis Conversion -> Up Axis: Z-up

  Tip: It’s advisable to save the modified export settings as new preset.

Best Practice for 3ds Max

If you use 3ds Max alone for the whole project, then it is best to stay with its Z-up coordinate system. This means that you do not have to rotate every single object till it fits the OpenGL coordinate system used by CGI-Studio. The only thing you must consider when exporting a scene with the Autodesk 3ds Max FBX plug-in you have to choose Y as up vector to match the OpenGL coordinate system. 
However, in some cases you may need to work with a Y-up coordinate system in 3ds Max. Examples are animations in 3ds Max which are to be combined with Cinema 4D content in Scene Composer. The following chapter shows how to setup a virtual Y-up axis.

Switching to a virtual Y-up Axis in 3ds Max

As 3ds Max uses “Z” as default up axis it is not possible with an in-built option to switch to another up axis. But with some tweaks you can change the up axis to “Y” and work within 3ds Max the same as you are working in a usual OpenGL coordinate system:

1. Create a new Grid in the 3ds Max menu “Create” -> “Helpers” -> “Grid” and span the new Grid over the already existing one (refer to following two figures)

2. Remove the existing Grid with the shortcut “G” in 3ds Max. (see the result in Figure 3)

3. Right click on the new grid an select “Activate Grid” from the context menu:

4. Go to the “Modifier” Tab and change the Grid orientation to “ZX Plane”:

5. Right click on the Grid, in the context menus select “Freeze Selection”.

6. Orbit the whole view to see the world axis like in OpenGL, which is Y-up, X-right, Z-front:

7. Click “Top” on the View Cube to fix the view to a 100% “top view”. Please take care that the North-South-East-West is the same as in Figure 8.

8. As last step, click on the small plus (“+”) sign in the top left corner and select “View Cube” -> “Select current view as front”

You have created now a new “virtual” OpenGL view coordinate system and can work in 3ds Max with “Y” as up axis. (Hint: the easiest way to orbit around the scene is now with the help of the View Cube).
But please remember to export with the Option “Z” as up axis in the FBX Exporter when working in this way.

Render Settings Width and Height 

The 3ds Max FBX import plug in does not read out the film width and height stored in the FBX file. So, if you open a FBX file in 3ds Max and save it back again you have to take care to type in always the correct width and height of your project. Otherwise, the aspect ratio of the camera will not be calculated correctly, and you will have a distorted view in your project. 

Camera “Near Range” and “Far Range”

3ds Max has camera properties “Near Range” and “Far Range”. These values are imported correctly by CGI-Studio Scene Composer but 3ds Max does not take these values into account. 
This means: If you create a camera in 3ds Max and look through the Camera on your scene then you can see always infinitely far into your scene. The Far Range has no limiting effect in 3ds Max. Please consider this when exporting the camera – it could be that you see your scene in 3ds Max but nothing in the Scene Composer because the Scene Composer (i.e., the Candera engine) always takes the near and far range into account.

 
Camera FOV

Sometimes, especially at wide angles, the camera field of view may appear different in SceneComposer from how it has been set up in 3ds Max: 

That’s because in OpenGL the FOV angle is defined vertically while in 3ds Max the default is horizontal. Therefore, when working with CGI content always set the camera FOV to vertical within the 3ds Max camera parameters:

Multi/Sub-Object Materials

If multi materials have been assigned to (sub objects of) a mesh, only the first material is taken over into Scene Composer.

The easiest way to overcome this is to run the Detach by Material ID script by Jefferson Lim. It splits the mesh into sub objects based on the different sub-object materials assigned to it.

Material Brightness Discrepancies

Often a scene which is lit just right in 3ds Max appears overexposed in Scene Composer:

That’s due to differences how 3ds Max and Scene Composer handle Ambient and Specular material settings. To fix that kind of overexposure just make sure that Ambient and Specular are set to a dark color. Black might be a good start if no explicit highlights and ambient tones are used in the scene.

 

Affect Pivot only / Affect Object only / Affect Hierarchy only

3ds Max has tools to move the pivot point of an object independent from the object itself. (Affect Pivot only / Affect Object only / Affect Hierarchy only) They are can be found in the Adjust Pivot section under the Hierarchy tab. 

Our recommendation is to not use these tools but to create additional Groups in 3ds Max if Pivot functionality is needed. The reason for this is that 3D-Engines usually (like Candera) do not support independent Pivot Points from Objects. The recommended way to realize this feature is to generate empty Groups or Dummy Objects (“Null”-Nodes) and make the 3D object a child of the Group. After the 3D Object is a child of the (Pivot) Group or Dummy object the position of the Group serves as Pivot point for the object.

Fix 3ds Max files with translated Pivot Points

If you come across a 3ds Max or FBX file which already has translated (moved) Pivot Points, it can happen that this FBX file is not correctly imported by the Scene Composer. The experienced effect is seen as objects that are floating around in the scene at arbitrary positions. There are two ways to fix this:

• Use the free ResetXForm plugin by PEN-Productions. For installation drag and drop the *.mzp file into a Max viewport. Then go to “Customize – Customize User Interface… – Tab Toolbars – Category ‘PEN Tools’. Select ‘Reset XForm UI’ and drop it as new button on the Max toolbar. For correct script usage and configuration please see the following screenshots:

The most important option in the plug-in for fixing the wrong import of Pivot Points is the “Preserve Pivot Orientation” option in the ResetXForm plug-in (Figure 25). This option has to be de-selected to create a correct 3D Object for importing in the Scene Composer. (Tipp: You may permanently set the default state of this checkbox by changing the text entry “preserveOrientation=true” to “false” in the script file “PEN_resetXformV2.ms”.)
Then you may select the objects you wish to reset – or just hit ‘Select All’ – and press ‘Reset X Form’.

You must ensure that none of the selected elements in the plugin’s object listing has an active sublevel selection (vertex, edge, border, polygon or element, as shown in Figure 26) otherwise single scene elements might be placed, scaled or rotated in an unwanted way.

• For scenes with flat object hierarchy, you may also use the ResetXForm functionality from 3ds Max (see 3ds Max documentation). Please keep in mind that objects in groups cannot be reset correctly by 3ds Max. You will have to move the object outside of any group to fix the Transform. You can move back the object into the group after the transform has been fixed.
  

Animations are cut-off in Scene Composer

100 frames is the default animation length in 3ds Max. If you import an FBX file in 3ds Max which contains an animation with e.g. 200 frames, the animation will be cut off upon re-saving at frame #100 if you didn’t manually change the timeline length. (In fact the keys after #100 are not deleted but still remain in the FBX. They are just ‘hidden’ by a lower “TimeLineStopTime” value.)
Solution: 

• Activate „Fill Timeline” (Figure 28) when importing an FBX into 3ds Max. Then the animation timeline is automatically updated in 3ds Max to the correct length. 
  
• Unfortunately this is not the default setting within the importer but remembered if changed once.
   
  
  
  
  

Animations along a Path don’t work after FBX Export

In 3ds Max you can animate objects along a path or spline. After FBX export this kind of animation may not work anymore. 
Solution: Activate “Bake Animation” as described in ‎FBX Export Settings.

Best Practice for Cinema 4D

Cinema 4D uses Y-Axis by default as an up-vector and it can be changed to X-Axis or Z-Axis when exporting to FBX in the Geometry section as demonstrated in Figure 29.

Best Practice for Maya

Pivot Point

The Local Rotate Pivot and Local Scale Pivot of an object can’t be exported to CGI Studio; all transformations need to be done in the world coordinate system. To simulate a local rotate or scale point, the object can be put under an additional group which translates the objects to the desired position of the local pivot, while the translation of the object itself reverses this translation. See the screenshot for an example. Animating the group will then have the same effect as using a local pivot point.

General Pitfalls

Empty FBX Import in Scene Composer

Sometimes instead of showing the new content the Scene Composer import dialogue stays empty after importing an FBX file. This happens mainly on Windows XP systems and seems to be a problem with external system components which may be resolved by future updates. Until then following workarounds may help:

1. Close the import dialogue and retry a few times to import the FBX. Sometimes each 2nd to 5th try may work.
2. If your scene contains special geometry like NURBS convert it all to meshes before exporting to FBX.
3. Only export part of the scene and try to import into Scene Composer part by part.  
   

Creating a 3D Font for CGI Studio

The scope of this section is providing step-by-step instructions for creating a 3D font which can be used within the CGI Studio tool chain.

Overview

Any TrueType font can easily be adapted for use within the CGI tool chain. All needed is an FBX file containing a set of meshes which represent the 3D letters of the font. The name of each character mesh within the set must end with a four-digit code, the so called “code point”, which identifies a character in Unicode space. 
All character meshes within the set must be aligned at the same baseline and at their left ends, resulting in a 3D scene with all character meshes being stacked on top of each other.
A single helper object, a “dummy” in 3ds max, is placed at the left end and baseline of the meshes. It not only serves as the root object within the scene hierarchy but will also become the anchor point, a kind of “physical” pivot, for character manipulation (moving, rotating, resizing) within CGI font widgets at a later step.

Creating a 3D Font in 3ds Max 2023

Get Name Suffix for the Character Mesh

For being automatically identified within CGI Studio the name of each character’s mesh must end with the four digits Unicode code point. If working in Windows, you can find this hex value using the Charmap (Windows -> Start -> Run… “Charmap”). Just select a letter and look up its four-digit code point in the bottom left corner.

In Figure 29, the value of the selected letter “M” is “004D”.
The code points may also be found on the Internet (e.g.: http://www.utf8-chartable.de/).

Create First Character

1. Start 3ds Max.
   
2. Create -> Shapes -> Text
   Choose desired font (in our example “Arial Black”), set Size to e.g., 100, type a character into the text field (e.g. “A”) and then, preferably in the “Front” viewport, place the character on the grid.
   
3. Give the mesh a meaningful name (without using special characters or spaces) and as suffix add the Unicode code point explained in chapter Get Name Suffix for the Character Mesh. Valid names would be “Letter_A_0041”, “PlusSign002B” or just “007A”.
   
4. Finally set the mesh position to 0,0,0.
   
   
    
   
   

Extrude Character

Modifiers -> Mesh Editing -> Extrude -> Set “Amount” to e.g., “-10”.

 

Clone and Create Remaining Characters

1. Select the character mesh -> Edit -> Clone
   
2. Set “Object” to “Copy” and enter a name for the new character.
   
   
   
   
3. Go to the Modify panel -> select the “Text” object -> replace the character in the text field with new one. You should now see two overlapping character meshes in your viewport.
   
4. Repeat until all needed characters are created.
    
   
   
   
   

Anchor Object

Currently the pivot point of each mesh is set to 0,0,0 – therefore positioned at each character’s Z-baseline Y-front and X-center (given that Z is the up axis in the scene).
However, for usage within CGI Studio we need an anchor at the left side of the characters and at the center of their Y (depth) dimension. Moving the pivot point won’t serve that purpose because pivot settings will be ignored later in the tool chain. So, we have to introduce a dummy which will become the root object of all character meshes and will serve as pivot or anchor point for object manipulation within CGI Studio.

Align the Character Meshes

To ease the process, we first align all character meshes along their left minimum:

1. 1. Select all character meshes -> Tools -> Align -> Align… -> Edit -> Select by -> Name
      
   2. While the align cursor still is visible select any character mesh in the “Pick Object” dialog and press “Pick”. 
      
   3. In the “Align Selection” dialog remove all checkmarks except for “X Position”. Set “Current Object” and “Target Object” to “Minimum” and press “Apply”.
      
      
       
      
      

Anchor Creation and Positioning

1. 1. Create -> Helpers -> Dummy 
      Drag the mouse inside the viewport until a rectangle – or in perspective view a cube – becomes visible. Tipp: Always keep dummies very small in relation to the meshes to prevent their bounding boxes from cluttering the viewport later on.
      
   2. Assign some meaningful name to the dummy, e.g., in our case the font name: “Arial_Black”.
      
   3. Set the dummy’s Z position to “0”, so its pivot is aligned with the character baseline.
      
   4. For aligning X and Y we again need the align tool. Select the dummy and as learned in ‎5.2.5.1, pick any character mesh as target object. 
      
2.  
   1. In the “Align Selection” dialog again remove all checkmarks except “X Position” but this time as “Current Object” set “Pivot Point”, as shown in Figure 36. “Target Object” again is “Minimum”. Click “Apply” to leave the dialog open after X alignment.
      
   2. Now remove the “X Position” checkmark and check “Y Position”. Change “Target Object” to “Center” and click “OK”. (Note: If Y is your up axis you might have to align along Z instead of Y.)
      
      
       
      
      

Create Object Hierarchy

1. 1. Go to Tools -> Open Explorer: Container Explorer
      
      
       
      
   2. Disable display of helpers via toolbar button   (or Display -> Object Types -> Display Helpers).
      
   3. Select all objects (Ctrl + A) and re-enable display of helpers.
      
   4. Now move the mouse to the yellow highlighted line -> drag the icon at the left   -> drop it in the line of the dummy helper object  . After this step the explorer view should look similar to Figure 38.
      
      
       
      
      

Export as FBX

The final step is to export the scene as FBX. Please ensure that in the FBX export dialog “Y-up” is set as “Up Axis”.

CGI Studio Smart Importer

Overview

Use the Smart Importer to quickly and easily import digital assets to your solution. With AI assistance you can assign functional HMI controls to elements within your design in a straightforward manner. Several other useful features are included, such as layer merging or multiple scene support.
With the Smart Importer you can import Photoshop files or files in Candera’s “XML Scene Composer Intermediate Format” (xscil) into your Scene Composer solution.
The Smart Importer uses Artificial Intelligence (AI) to analyze the content of the imported PSD or XSCIL file.

How to Use the Smart Importer

Select File for Smart Importer

The Smart Importer will analyze imported files with the assistance of AI to detect, propose and create controls for your Scene Composer solution. Use the Import > Smart Importer… option from the menu bar to open the dialog box for the Smart Importer.

After choosing “Smart Importer” from the menu, choose your import location. 

Importing "From Local File..." will open the Windows "Open" dialog box, allowing to select the following file types: 

• *.psd 
  
• *.xscil 
• *.xd 
• *.rp 
  
• *.sketch
  

Smart Importer Windows

Once you have selected a file to import, the Smart Importer window will be opened.

The Smart Importer window consists of the following panels:

(1)	Preview	The preview panel displays a preview of the graphics file o be imported. You can use the mouse wheel to zoom in and out, with the zoom percentage displayed in the lower left corner of the preview panel. By pressing the button displaying four arrows, you can modify the preview image’s size within the panel’s maximum available space. By clicking within the preview panel, you can select design elements from the displayed image. The AI will then attempt to detect and define a suitable control for the selected element.
(2)	Import Settings	The import settings panel will allow you to select a destination folder to import template solutions. You can choose to create a custom imports folder, which will be created inside the destination folder. In the Scenes section below, you can edit template scenes you are configuring with the Smart Importer. Use the shortcut menu to add, clone, remove, or rename scenes. To make modifications to the content from a particular scene, select the scene in the import settings panel (2), then check or uncheck the checkboxes next to the desired layers and controls in the layer tree (3). With the “Toggle Applied Controls Preview” checkbox enabled, you can verify which portions of the displayed graphic already have a control applied to them. Portions which already have a control applied will be marked with a green outline in the preview panel (1). By checking the “Resize Display Resolution” checkbox, the imported design will automatically resize itself to fit within the display resolution configured for your solution. The “Import State Machine” option allows you to import state machines from your design file directly to your CGI Studio solution. If a global state machine already exists within your solution, a prompt will be displayed in which you can choose whether or not to import the new state machines with the IsGlobal property enabled.
(3)	Layer Tree	The layer tree panel will display the elements imported from your graphic file as a branching list. The list displayed within this panel is equivalent to the template scene’s Scene Tree within Scene Composer. You can select one or multiple items within this list to begin the AI detection process. The filter bar located on top of the layer tree will allow you to more easily identify a specific layer when dealing with multiple layers. Using the checkboxes, you can decide if a layer is part of the scene that is currently selected in the import settings panel (2). If you uncheck a layer’s checkbox for all scenes, the layer will not be imported.
(4)	Control List, Appearance and Basic Properties	By selecting a layer, the AI will attempt to detect which controls are suitable for the selected elements. The result of this analysis will be displayed in the ControlList panel, listing the candidate control from greatest to least probability. The list of controls can also be filtered using the input field on the top. Use the “Apply” button in the control list to apply a control to the selected element. If the AI has detected only a weak probability for your selected control, you will be prompted to confirm your choice. After applying a control to a design element, you can then configure the control’s properties using the Appearance Tab. For example, you could select two images to represent both TellTale states, or modify the position of the pivot point for the gauge’s needle image. You can modify additional properties in the Basic Properties tab.
(5)	Revert & Revert All	You can select an item in the layer tree panel (3) and revert the already applied control using the “Revert” button. You can choose to revert all applied controls in the “Layer Tree” by pressing the Revert All button. You will be prompted to confirm this action in order to keep you safe.
(6)	AI Settings	In the AI Settings you can change the Transparent Background Color for AI detection. The selected color is used by the AI to analyze the graphics to be improved. It pretty much depends on the content of the image, which transparent background color works best for detecting controls. IN case the AI is having problems in detection controls, you can try to change this setting.

Configure Scenes

In the Import Settings Panel you can manage the scenes you want to import into Scene Composer. Opening the shortcut menu, you will see the available options: Add Scene, Close Scene, Remove Scene, and Rename Scene. Double-clicking on the scene’s name allows you to rename an existing scene.

If you choose to add a new scene or clone the existing scene, you will be prompted to input the name for the new scene.

The AddScene and Remove Scene options will be disabled when multiple scenes are included within the imported Intermediate Language file.

Configure the Scene’s Content

Let’s assume you got a graphic file from your designer with 2 scenes, an IVI scene (e.g. with a music player and climate control) and a Cluster scene. You will create two scenes in the Import Settings panel: an “IVI_Scene” and a “Cluster_Scene”. Select the “IVI_Scene” and adjust the visibility of the layers in the Layer Tree panel – only “IVI” and “Background_1” will be checked. Handle the “Cluster Scene” similarly – only “Cluster” and “Background_1” will be checked.

Clus

When clicking the OK button, the import is started. You can then see the imported scenes and resources in the Solution Explorer panel and in the Imports panel of Scene Composer.

      

Detection, Configuration and Import of a GaugeControl

When you import a graphics file that includes a gauge using the Smart Importer the AI will detect this control and import the template scene including the correctly identified gauge control-
To make the AI detect the gauge in your graphics file, open the graphics file with the Smart Importer (via the Menu: Import – Smart Importer and choose your graphics file). Your graphics file will be displayed in the “Preview” panel.
Now you can select your gauge by clicking on the corresponding graphics in the “Preview” panel. The Layer Tree panel will expand the layers and mark the layer you selected.
As an alternative, you can browse to the desired layer in the “Layer Tree” panel. If you know at least part the layer’s name, you may use the filter field in the top of the Layer Tree panel to find the correct layer more easily. The content you select in the “Layer Tree” panel will be highlighted with a yellow frame in the “Preview” panel.

Whenever you select any content – no matter if selecting single layers or multiple layers – the AI tries to detect known controls. You can see the list of detected controls in the “Control List” panel on the bottom right.
In our example the AI correctly detected a Gauge Control, so you will press the “Apply” button on the right. The Appearance Tab is put to the foreground, offering you the possibility to configure the GaugeControl’s NeedleImage and BackgroundImage. After performing this Layer Mapping, you will see the GaugeControl Layer in the “Layer Tree” panel and its content will be colored, indicating a successful application of the GaugeControl (blue font) and a successful mapping of the image (yellow font).

Configure the Pivot Point

For all images configured in the Layer Mapping, you can configure the pivot point in the Appearance Tab on the bottom right. In our example for the GaugeControl it is important that the pivot point of the needle image is set correctly in order to guarantee the correct movement of the needle in Scene Composer.
There are 3 ways to configure the pivot point:

• Enter digits for the X/Y coordinate.
  
• Freehand position a crosshair cursor using the mouse.
  
• Configure the pivot point to be in the center of the image.

• X/Y: You can choose this option to enter the X/Y coordinates for the pivot point in the following editor.
   
  
  
  
  
• Freehand: If you choose this option, you can move the crosshair cursor to the desired pivot point in the “Bitmap Preview” panel.
   
  
  
  
  

• Center: With this option, the pivot point will be configured to the center of the image. A center configuration of the pivot point will be indicated by the text “centered” in the Appearance tab.
  
  
  
  
  

Configure Basic Properties

The controls have been detected by the AI and you have applied them to your layers. In the appearance tab you have mapped your layers to images that are part of the controls (i.e. the gauge’s needle image and the background image). You can also define values for basic properties of the applied control.
The following basic properties are available for the gauge control. To easily find our gauge control instance in Scene Composer after the import, you may also change its name to e.g. “Gauge_for_speed”.

Individual properties from your design will be automatically mapped if the property’s name is the same as the control’s property name.

Import to Scene Composer

Once you are finished applying the detected controls and configuring images, pivot points and other properties, click the OK button to import your configured file.
You can now see that the folder “AI_Advanced_Cluster_Sample§ has been created and the content of your psd file has been imported. The gauge control instance “Gauge_for_speed” you configured using the Smart Importer can be found in the “Imports” panel.

You may create an instance of your “Gauge_for_speed” by dragging it into your scene – either into the Scene Editor panel or into the Scene Tree panel.

7.3.5. Layer Merging

Sometimes the graphics file to import will be quite complex, having several images for a gauge’s background and a few images for a gauge’s needle to achieve a brilliant HMI. The built in GaugeControl of Scene Composer however requires only one image for the background and one image for the needle. To meet the needs of both, complex graphics files and a clear implementation and configuration of the control, the Smart Importer is able to configure several layers for a single image of the control.
In the following example the layers for the gauge’s background are marked in orange and the layers for the needle are marked in red.

Select the root of the gauge in the “Layer Tree” panel that includes both the background images and the needle images. In our example this layer is called “LayerGroup”. In the “Control List” panel you will see that the AI has detected the GaugeControl. After pressing the “Apply” button next to the GaugeControl you can map the layers to the GaugeControl’s background and needle image.

Useful Hints:

• You can configure a complex layer group by selecting and configuring only the root. All its children will be configured similarly.
  
• You can select multiple layers and configure them all at once. For multi selection you can keep the <ctrl> or <shift> key pressed while selecting the layers with a mouse click or you can click-and-drag a box around the layers you want to select. 
  

Finalize the configuzration of your GaugeControl by setting the NeedleImage’s pivot point to exactly that point where the needle should rotate around as described in Configure the Pivot Point.
After the configuration is complete you can press the “OK” Button of the Smart Importer to import your graphics file and the configured GaugeControl Instance into SceneComposer.
Smart Importer has created a single image for the needle and a single image for the background as you can see in the Solution Explorer.

To test the functionality of the GaugeControl, drag and drop the configured GaugeControl instance to the scene (as described in Import to Scene Composer). When altering the GaugeControl’s value in the Properties panel, the needle of the GaugeControl in the Scene Editor panel will rotate in front of the background according to the alteration of the Control’s value. 

Re-Importing of Graphics Content

When importing the same content to the same location once again, the resources and scenes in Scene Composer are overwritten. This allows you to replace outdated graphics of your scene with newly updated graphics from your designer while maintaining the mapping between layers and controls.

Reload Configuration for New Graphics File

If you use the Smart Importer to open the same graphics file (same path, same filename) again, which you have already made configurations to, you will see your configurations are available again (marked with orange font in the layer tree panel). The applied controls as well as the Layer Mapping have been loaded.
You will be notified by blue information icons that the import target folder or the scene already exist (A tooltip gives you the necessary information once you hover those icons). Starting the import as currently configured will overwrite already imported resources and scenes and therefore update the graphics of your Scene Composer solution to the newest graphics version, while keeping the information of mapped layers and applied controls.

If you want to import graphics content to your Scene Composer solution for a second time, maintaining the resources and scenes from both imports, you can choose a different import location or a different scene name.

Re-Import of a Graphics File with Different Layers

When importing a graphics file with the same path and filename but partially different layers, you will see the configuration of the layers that are still available has been loaded.

• The orange font indicates that a bitmap from the node assigned to the control is currently in use within another control.
  
• Layers that had not been part of the graphics file before will be displayed in green font. They are not visible in the preview panel since they are disabled by the layer tree panel’s checkbox.
  
• Layers that are missing in the currently loaded file are displayed in red font in the layer tree panel. The content of layers that are not available in the currently loaded graphics file cannot be displayed since the image data is simply missing. Checking the checkbox in the layer tree panel won’t make any change in the preview panel.
  

Restore a Configuration

If you have already imported a graphics file into a certain folder and you are attempting to import the same graphics file to the same folder again, the Smart Importer will load the configuration you applied last time. If you are reverting your configuration using the Revert All button, the loaded configuration is gone. However, the configuration of the last successful import is still saved with the lastly imported scene. So, changing the import location and changing it back to the original import location, where the configuration is saved, makes a dialog pop up asking you whether you want to restore the saved configuration.
Choose Restore to restore the configuration from your last import or Cancel to start configuring all over again.

Merge Configurations

A configuration that has been imported to Scene Composer is saved to the imported scene. You can use one graphics file, import various configurations to Scene Composer and merge them together into one final configuration.

I. Create Configurations

1. Open your Cluster graphics file using the Smart Importer, configure the Telltale controls and import them to folder Cluster_Telltales for example.
   
2. Open the graphics file again and configure the Gauge Controls; import them to folder Cluster_Gauge.
   
3. Once again open the graphics file and configure the ProgressBar Controls; import them to folder Cluster_ProgressBar.

II. Merge Configurations

1. If you now open the Cluster graphics file again and set the import folder to Cluster_Telltale you can restore the configuration for your Telltale controls by clicking Restore in the Restore a Configuration dialog.
   
2. Now, change the import folder to Cluster_Gauge, which triggers the following dialog, where you choose Merge to add the Gauge configuration to the currently loaded Telltale configuration.
    
   
   
   
   
3. Change the import folder to Cluster_Progressbar and merge the configuration of the progressbars to your currently loaded and merged configurations.
   And finally, you’ll end up with a configuration having applied TellTale Controls, Gauge Controls and ProgressBar Controls.

Advanced Configuration of PSD Content for Import to Scene Composer

Import Bitmap Resources

Images of Image Layers in psd data are imported as Bitmap Resources. By default, the value of the Pivot Hint of imported Bitmap Resources is calculated to be in the center as follows:

Pivot Hint X = Image Layer width /2
Pivot Hint Y = Image Layer height /2

You can set the Pivot Hint in Photoshop by embedding the token into the layer’s name. The Pivot Hint tokens are removed from the Bitmap Resource name upon import.

E.g. 1: If the layer’s name in the photoshop file is "Image@X30.5@Y40"
the Bitmap resource name will be “Image”,

Pivot Hint X = 30.50
Pivot Hint Y = 40.00

E.g. 2: If the layer’s name in the photoshop file is "ImageData@Y40.55"
the Bitmap resource name will be “ImageData”,

Pivot Hint X = "ImageData@Y40.5" layer width / 2
Pivot Hint Y = 40.55

TextStyle

When importing a Text Layer into Scene Composer, a new TextStyle is created. Its name will be a combination of the font name and the font size used in the Text Layer of the PSD file. Upon creation of a new TextStyle Scene Composer checks if a font resource with the corresponding name is registered in the Scene Composer solution. In case no suitable font resource has been found in the solution, a new TextStyle will be created using the font resources displayed in the “Not imported font” dialog.

Fonts that are not imported are also marked with a warning sign in the “Layer Tree” panel. A tooltip offers additional information:

Technical Details

Collaboration of Scene Composer, ControlsAIService and ControlsAIApp

Scene Composer comes with two additional applications that are needed to make the AI detection work:

• ControlsAIService: A windows service application that provides the AI data for Scene Composer.
  
• ControlsAIApp: A tray icon application that controls the service.

The following diagram explains the collaboration of the Scene Composer, the ControlsAIService and the ControlsAIApp: 

XML Scene Composer Intermediate Format – XSCIL

XML Scene Composer Intermediate Format (XSCIL) is an open and well-defined format which has been invented to export graphics data from various user experience design tools (Axure RP, Adobe XY, Sketch etc.) and import them into Scene Composer via the Smart Importer. An API is available which you can use to implement an exporter for your favorite graphics editor, if it isn’t already available.

Recommended Photoshop (.PSD) Layer Structure for Smart Importer

These are the recommended steps for Photoshop layers’ naming and structure of a Control when creating a PSD file with Adobe Photoshop. Tis procedure makes it easier to apply properties to a Control via the Smart Importer.

1. Create a group for the target Control – in this case, a TextButton (blue highlight in Figure below)
   
2. Create layers for the properties of the Control under the group created in step 1. (red and green highlight in Figure 88 below)
   
3. Set the names of the layers to be the same as the property names of the target Control. (layers names in Figure 88 below correspond to property names in Figure 89)
    
   
   
   

How to set appropriate group and layer names:

• The group name is arbitrary.
  
• For the layer name, use the property name but remove the spaces. For example, “Normal Image” becomes “NormalImage”.

Figure 90 shows the Smart Importer dialog when a PSD file following the correct format is opened.
It is imported according to the layer structure of the PSD file.

In the Smart Importer dialog, if you apply the TextButton control to the TextButton node, the layers of the PSD file will be reflected in each property as shown in Figure 91. 

Figure  shows the Properties panel after import settings shown in Figure 91. The contents/layers of the PSD file are reflexted in the Properties panel. 

The size of the imported Control will be adjusted to the Width and Height of the largest image layer applied to a property.

In Figure 92, when Button is applied instead of TextButton, Text property is not applied correctly since a Button control does not have this property.

If you import a node whose layers and properties do not match, a new Group node will be created and the extra property is added as its child element. 

7.5.1. Layer Structure and Naming Guideline for Controls

In general, it is recommended to keep the PSD layer format close to the standard Controls. Below is a guide on how the layers for some Controls should be formatted and named.

AnalogClock	Breadcrumb	CheckBox
SecondsNeedleImage  MinutesNeedleImage  HoursNeedleImage  FaceImage	Name  EllipsisText  Button NormalImage  PressedImage  FocusImage	NormalImage  PressedImage  SelectedImage  SelectedPressedImage  FocusedImage
CircularSlider	Gauge	GroupBox
BackgroundImage  ActiveImage  ThumbImage  ThumbImagePressed  FocusImage	NeedleImage  BackgroundImage	BackgroundImage
IconButton	InputField	Menu Icon
NormalImage  PressedImage  FocusedImage  IconNormalImage  IconPressedImage  IconFocusedImage	CaretImage  BackgroundImage  FocusedImage	Image  BackgroundImage
Menu Item	Menu Screen	Mesh2D
FocusImageOnSelection  FocusImageOnDragging  DeleteButtonNormalImage  DeleteButtonPressedImage  Image	BackgroundImage  FocusBorderImage	Image
MultiStateButton	PageIndicator	RadioButton
ButtonState1Bmp  ButtonState2Bmp  ButtonState3Bmp  ButtonState4Bmp  FocusedImage	PressedImage  SelectedPressedImage  SelectedIndicatorImage  IndicatorImage  SelectedIndicatorPressedImage IndicatorPressedImage	NormalImage  PressedImage  SelectedImage  SelectedPressedImage  FocusedImage
Roll	SpinBox	TextButton
DecorationImage  TextEditBackground	BackgroundImage  ArrowUpNormalImage  ArrowUpPressedImage  ArrowDownNormalImage  ArrowDownPressedImage	Text  NormalImage  PressedImage  FocusedImage
ToggleButton	TouchIndication
FirstImage  FirstPressedImage  SecondImage  SecondPressedImage  FocusedImage	Image

Smart Importer Best Practices

Introduction

The Smart Importer will allow you to easily and quickly import digital assets to your solution. With AI assistance, you can assign functional HMI controls to elements within your design in a straightforward manner. Several other useful features are included, such as layer merging or multi-scene support.

 This document explains how to configure the layer structure on PSD file in order to effectively use Control mapping by Smart Importer.

 The IVI sample, which is partially explained in this document, is attached on this PDF.

Recommended PSD Layers Structure for Smart Importer

When creating PSD files using Adobe Photoshop, it is recommended that the naming and structure of the Photoshop layer controls be pre-matched to SceneComposer. This will allow for smooth application of controls and their properties when importing with SmartImporter. The list below shows the Controls that will be assigned in Scene Composer via Smart Importer. Press the links on each Control to jump to the page showing the recommended layer structure in detail.

It is important to note that the Smart Importer cannot process effects, masks, filters in Photoshop. Therefore, if you want to use these features, please rasterize the images in advance. 

 Some Controls are included in the sample file "IVI_Sample.psd" and are explained with specific examples.

---

PSD layer settings for Control

In this section, the recommended layer configuration in PSD file is described for each control. And, you can confirm its configuration in the sample file about CheckBox, Gauge, IconButton, RadioButton, and TextButton.

• Setting Group name is optional, but it is recommended to use the Control name (as seen in Scene Composer)
• It is also recommended to use the property names (as seen in Scene Composer) as layer names (in Photoshop), but please don't use spaces in the layer names.

 

CheckBox

The CheckBox Control can easily be configured with a text, images for a normal and a pressed state as well as for a selected and a selected pressed state. 

 

 

 

Gauge

The Gauge allows to rotate a needle on a background according to its input value.

 

 

 

 

 

IconButton

IconButton has similar functionality as the standard button, but in addition an icon (image) is placed on top of the button.

 

 

 

 

RadioButton

The RadioButton Control can easily be configured with a text, images for a normal and a pressed state as well as for a selected and a selected pressed state.

 

 

 

RadioButton (In the image, it is RadioButton_Outside_air to distinguish it.)

  

TextButton

The TextButton Control offers an easy way to define all different states of a button and an action that is performed when clicking it.

 

 

 

AnalogClock

An analog clock with images for the certain needles (hours, minutes, seconds).

 

 

 

Breadcrumb

A Breadcrumb shows the history/flow through the screen hierarchy and allows user, for example, to navigate between scenes using breadcrumb's elements.

 

 

Button

The Button Control offers an easy way to define all different states of a button and an action that is performed when clicking it.

 

 

CircularSlider

Circular slider is a control that allows user to set the value using circular slide movement or directly indicate value on slider's bar.

 

 

GroupBox

The GroupBox offers an easy way to combine RadioButtons to a RadioButtonGroup.

 

InputField

The InputField contains an editable text.

 

 

Menu Icon

The MenuIcon Control is an “icon” like in graphical environments of most known operating systems.

 

 

Menu Item

A MenuItem is a basic building block of MenuScreens. It can represent for example an application or a deeper level in a menu hierarchy.

 

 

 

Menu Screen

The Control represents a menu in the form of a grid of icons (instances of the Menu Item Control).

 

 

Mesh2D

Performs a perspective projection of a 3D rotated effect based on the configured origin, rotation and field of view.

 

 

MultiStateButton

The MultiStateButton Control offers an easy way to define all different states of a button.

 

 

PageIndicator

A Page Indicator is a control that indicates currently visible page of set and provides method to switch to another page directly by click or if focused on a stepping manner using rotary action input.

 

 

 

Roll

The Control represents a vertical list of numeric values from a specified range with a specified step.

 

 

SpinBox

A spin box or spin button is a control that enables users to increase or decrease the number value by a specific increment via clicking an up or down arrow button.

 

 

 

ToggleButton

The ToggleButton Control offers an easy way to define all different states of a toggle button and an action that is performed when clicking it.

 

TouchIndication

The TouchIndication indicates the location of touch events.

 

 

Usage example (Importing and assigning Control)

In this section describes the Control assignment procedure when importing a PSD file with the layer structure described in the previous chapter. The file to be imported on Scene Composer is the IVI sample attached to this document.

1.  From the menu bar on Scene Composer, select Import > Smart Importer... on the menu bar and select a Photoshop file (IVI sample.psd).
2. Smart Importer dialog box appears.
3. Click on the group in the tree for which you want to set Control. In this example case, select TextButton_Car to assign TextButton Control.
4. Since its layer structure in Photoshop follows the structure of Textbutton Control, Smart Importer's AI detects "TextButton" Control.
   
   
5. From the ControlList, click Apply button on the far right of the TextButton control to assign that Control.

• • • Depends on its Control usage and/or Solution to be created, will set on "Appearance" and "Basic Properties" tabs.

 

As described above, you can efficiently import operations in Scene Composer by configuring the layer structure in Photoshop according to Controls you want to use.

Mantis User Documentation

Introduction

Mantis is the ticketing system used by Candera GmbH. By itself Mantis is seen as a bug-tracking tool, whereas most of the reported tickets are bugs that have to be fixed. The system can be found under the following URL: http://support.cgistudio.at/

Please log in with your received login credentials.

View tickets

To view the tickets please click on “View Issues” in the menu on the left side. 

 
What is important is that only the issues of the currently selected project will be shown. The project can be selected in the top right corner next to the “Report Issue” button. For instance, if “CGI – Studio: Candera Engine” is selected as the current project only tickets that were reported in this project will be shown.

Filters can be applied for listing the issues. Please expand the filters section (first section) to be able to modify them. Plenty of attributes can be changed here to be able to filter the issues.

For instance if the issues assigned to a specific developer should be displayed please click on the field “Assigned To:” and choose the developer. If you click on “Apply Filter” the filtered issues will be displayed. A filter can also be saved by clicking on “Save Current Filter.” If the filter is saved it can be chosen in the drop-down list next to “Save Current Filter.”

How to create a ticket

In the menu on the left side click on “Report Issue.”

For creating a ticket there are a couple of fields to fill. Some of them are mandatory (marked with *), while the most of them are not. Although most of the fields are not mandatory it is recommended to fill them because the more information a developer has the better base he has for fixing the bug. This pertains especially to the field “Product Version.”

• Category: The category the ticket belongs to.
  
• Reproducibility: If a bug is reproducible or not.
  
• Severity: How hard is the impact of the bug not being fixed.
  
• Priority: How urgent a bug should be fixed
  
• Select Profile: The target hardware and operating system on which the bug occurs.
  
• Product Version: The product version in which the bug occurs. Although it’s not mandatory it is recommended to fill especially this field.
  
• Assign to: The developer that will get this ticket assigned.
  
• Target version: The version in which this bug should be fixed.
  
• Summary: A short summary of the issue.
  
• Description: A more detailed description of the issue.
  
• Steps to reproduce: Which steps are necessary to reproduce the issue.
  
• Additional Information: Can contain information about attached files, i.e.
  
• Attach Tags: Tags can be attached which allow an easier search for this ticket.
  
• Upload files: Attached files like screenshots, logs or e-mail-threads.
  
• Complexity: after estimating the ticket by Candera it is set to status Analyzed and the Complexity gives an estimate about the time needed for solving    
  
  • Low - up to 2 md and work absolutely clear
    
  • Medium - up to one week, clear what to do
    
  • High - more than one week or not yet clear in detail how to solve
     

Once all the necessary fields are filled please click on “Submit Issue” to submit the ticket.

View ticket

Once a ticket has been reported it can be viewed. If the status has not been set yet it will be set to “new.” This means that one way to find the ticket is to click on “View Issues” in the menu and sort the issued by “Status.” The newly created ticket can be found in the list.

The following figure shows the possible states of a ticket and how they depend among each other.

The view of a ticket contains some sections:

• View Issue Details: The fields that were filled at the creation time can be viewed here.
  
• Relationships: Tickets can be parented. The relations of the current ticket to its parent or children are shown here. Further wise it is also shown if a ticket is a duplicate of another one.
  
• Users monitoring this issue: Users can monitor an issue to see its history being changed. The monitoring users are listed here.
  
• Activities: Contains additional information if a comment has been added. Also, if a file has been added after creating the ticket it will be shown here.
  
• Add note: A note can be added which will afterwards be shown in “Activities.”
  
• Issue History: The changed of the issue can be tracked here.