# Best Practice
# 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\]**.
| 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:
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.
3. 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.
3. Click \[ Browse \] at the top of the dialog.
- The \[ Select Location \] dialog will appear.
5. Select StateMachines and click \[ OK \].
- The location “/State Machines” is selected as the save location for the new State Machine.
7. 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.
3. 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](https://doc316en.candera.eu/link/203#bkmrk-globalstatemachine-%E3%81%AE).
### 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.
3. Select the State on the State Machine Editor.
- The properties of the selected State will be displayed in the Properties Panel.
5. 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.
3. Drag the \[ On Entry Actions \] connector on the right of the MainMenu Fusion node and move the mouse.
4. A link will appear as you move the mouse, so release the left mouse button at the any location.
- The \[ Select Behavior \] dialog will be displayed.
- The selectable behaviors will be displayed by category.
6. Select “Action > Transition > Transition Request” from the list and connect it to the top node.
- You can also narrow down the list of behaviors in the dialog by entering “Transition Request” in the search field at the top of the dialog.
- Transition Request is connected to MainMenu.
- The default Activate is selected for the \[RequestType\] of Transition Request.
8. Press the select item button to the right of the \[ Identifier \] of the Transition Request.
- The \[ Choose Item \] dialog box will appear.
10. Select \[ Scenes > Main Menu \] from the left window.
- The Main Menu you selected will be registered in the \[ Identifier \] of the Transition Request.
12. Select the Transition Request Fusion node you set up, and execute \[ Close \] from the context menu.
13. 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.
15. 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.
3. 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.
4. Place one Initial State and three States in the MainMenu State from the toolbar at the top right of the State Machine Editor.
5. 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](#bkmrk-initial-state-and-st).
#### 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.
3. Drag the \[ On Entry Actions \] connector on the right of the Navigation Fusion node and move the mouse.
4. A link will appear as you move the mouse, so release the left mouse button at the any location.
- The \[ Select Behavior \] dialog will be displayed.
- The selectable behaviors will be displayed by category.
6. Select “Action > Transition > Transition Request” from the list and connect it to the top node.
- You can also narrow down the list of behaviors in the dialog by entering “Transition Request” in the search field at the top of the dialog.
- The Transition Request is connected to \[Navigation > On Exit Actions\].
8. Repeat the same process for the \[On Exit Actions\] of the Navigation Fusion node to connect the Transition Request Fusion node.
9. Make the following settings for the two Transition Requests that you have connected.
| On Entry Actions | RequestType | Activate |
| Identifier | Navigation |
| On Exit Actions | RequestType | Deactivate |
| Identifier | Navigation |
10. 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.
3. Drag the \[ On Entry Actions \] connector on the right of the Navigation Fusion node and move the mouse.
4. A link will appear as you move the mouse, so release the left mouse button at the any location.
- The 'Select Behavior' dialog will appear.
- The available behaviors will be displayed in categories.
6. Select "Action > Property > Enable Rendering" from the list and connect it to the top node.
- You can also narrow down the list of behaviors in the dialog by entering "Enable Rendering" in the search field at the top of the dialog.
- Enable Rendering is connected to \[Navigation > On Exit Actions\].
8. Repeat the same process for the \[On Exit Actions\] of the Navigation Fusion node to connect the Enable Rendering Fusion node.
9. Make the following settings for the two Enable Renderings that have been connected.
| On Entry Actions | TargetNode | Scenes>Main Menu>OverlayLayout>Navi Title |
| Visible | Enable (check box selected) |
| On Exit Actions | TargetNode | Scenes>Main Menu>OverlayLayout>Navi Title |
| Visible | Disable (uncheck) |
10. 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.
3. 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.
5. 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.
3. 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.
4. 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.
3. After selecting the Media State, select \[ Convert to Subchart \] from the context menu.
- The Media State will be converted to a Subchart (the “S” indicating that it is a Subchart will be displayed in the lower right of the State).
The operation to convert Media State to SubChart is now complete.
- To move to the SubChart, select Media State and double-click.
- To return to the original State Diagram from the SubChart, use the \[Hierarchy Navigation Button\] in the State/Transition view screen in the upper right of the State Machine Editor panel.
#### Adding an Initial State and States
1. Double-click on the Main\_StateMachine in the \[ State Machines \] folder in the Solution Explorer.
- The **State Machine Editor** panel will be displayed.
2. After selecting the Media State, double-click to move it into the SubChart.
- As this is immediately after the SubChart conversion, only the Subchart frame will be displayed.
3. Expand the size of the Subchart by dragging the Subchart frame handle with the mouse.
- Expand it to a sufficient size to add the Initial State and States.
4. In the Subchart, place one Initial State and three States from the toolbar at the top right of the State Machine Editor.
5. Change the names of the three States you added to Radio, Bluetooth, and USB, respectively.
The placement of the basic components is now complete. Continue to configure the OnEntry action and Transition settings.
#### Structure of each State
When transitioning to each State in the Subchart (entering and exiting States), the corresponding scene must be made active or inactive. In addition, when each scene is made active or inactive, the Media Menu scene text must be set to be displayed or hidden accordingly.
##### Scene display settings
1. With the Radio State selected, click \[ Fusion \] in the lower left of the State Machine Editor panel.
- The Fusion panel for the Radio State will be displayed.
3. Drag the \[ On Entry Actions \] connector on the right of the Radio Fusion node and move the mouse.
4. A link will appear as you move the mouse, so release the left mouse button at the any location.
- The \[ Select Behavior \] dialog will be displayed.
- The selectable behaviors will be displayed by category.
6. Select “Action > Transition > Transition Request” from the list and connect it to the top node.
- You can also narrow down the list of behaviors in the dialog by entering “Transition Request” in the search field at the top of the dialog.
- The Transition Request is connected to \[Radio > On Exit Actions\].
8. Repeat the same process for the \[On Exit Actions\] of the Radio Fusion node to connect the Transition Request Fusion node.
9. Make the following settings for the two Transition Requests that you have connected.
| On Entry Actions | RequestType | Activate |
| Identifier | Media Radio scene |
| On Exit Actions | RequestType | Deactivate |
| Identifier | Media Radio scene |
10. Repeat the same procedure to make similar settings for Bluetooth and USB State.
| **Phone State** |
| On Entry Actions | RequestType | Activate |
| 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.
3. Drag the \[ On Entry Actions \] connector on the right of the Radio Fusion node and move the mouse.
4. A link will appear as you move the mouse, so release the left mouse button at the any location.
- The 'Select Behavior' dialog will appear.
- The available behaviors will be displayed in categories.
6. Select "Action > Property > Enable Rendering" from the list and connect it to the top node.
- You can also narrow down the list of behaviors in the dialog by entering "Enable Rendering" in the search field at the top of the dialog.
- Enable Rendering is connected to \[Radio > On Exit Actions\].
8. Repeat the same process for the \[On Exit Actions\] of the Radio Fusion node to connect the Enable Rendering Fusion node.
9. Make the following settings for the two Enable Renderings that have been connected.
| On Entry Actions | TargetNode | Scenes>Main Menu>OverlayLayout>Radio |
| Visible | Enable (check box selected) |
| On Exit Actions | TargetNode | Scenes>Main Menu>OverlayLayout>Radio |
| Visible | Disable (uncheck) |
10. Follow the same procedure to make similar settings for Bluetooth and USB State.
| **Phone State** |
| On Entry Actions | TargetNode | Scenes>Main Menu>OverlayLayout>Bluetooth |
| 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.
3. After selecting Media State, double-click on it and move it into the SubChart.
4. Drag and drop \[ Transition \] from the toolbar at the top of the panel to the Initial State in the Subchart.
- The Transition will be connected to the Initial State, and it will be ready to be placed.
6. While the Transition is ready to be placed, click on the Radio State.
- The Initial State and Radio State will be connected by the Transition.
- The direction of the Transition connection is from the Initial State to the Radio State.
With this setting, the transition to the Radio State has been configured as the initial state of the Media State (Subchart).
##### Transition settings between each State
Next, we will set up the transitions between each State (Radio, Bluetooth, USB).
1. From the toolbar at the top right of the State Machine Editor, drag the Transition and drop it onto the Radio State (the starting side of the transition).
- The Transition (arrow) will appear on the State Machine Editor and be ready to be dragged.
2. Extend the Transition (arrow) to the Bluetooth State (end of transition) and click.
- The two states, Radio and Bluetooth, will be connected by an arrow.
3. With the added Transition selected, click \[ Fusion... \] at the bottom left of the State Machine Editor panel.
- The Fusion panel will open, and the Fusion diagram for the Transition will be displayed.
- The Check Click Fusion node is connected to the connector (Condition) at the top right of the Transition Fusion node.
4. Select the Check Click Fusion node that is connected by default, and press the Delete key.
- The Check Click Fusion node will be deleted.
5. Drag the connector (Condition) at the upper right of the Transition Fusion node, move the mouse, and release the left mouse button at the any location.
- The \[Select Behavior\] dialog will open.
6. Enter “Check Key Input” in the search field at the top of the dialog.
- The list of behaviors in the dialog will be narrowed down, and Condition > Input > Check Key Input will be displayed.
7. Double-click Check Key Input.
- The Check Key Input Fusion node will be linked to the Condition connector of the Transition Fusion node.
8. Drag the connector (Actions) at the bottom right of the Transition Fusion node, move the mouse, and release the left mouse button at the any location.
- The \[Select Behavior\] dialog will open.
9. Enter “Transition Request” in the search field at the top of the dialog.
- The list of behaviors in the dialog will be narrowed down, and Action > Transition > Transition Request will be displayed.
10. Double-click Transition Request.
- The Transition Request Fusion node will be linked to the Actions connector of the Transition Fusion node.
11. Make the following settings for the Transition Request Fusion node.
- Clicking the upward-pointing arrow icon in the upper right of the Fusion panel will switch the display to the State.
| **Check Key Input** |
| KeyCode | Key\_DownArrow |
| **Transition Request** |
| RequestType | Activate |
| Identifier | Scenes＞Media Bluetooth |
12. Repeat the above steps 1 to 11 to set the following five transitions.
- The RequestType for all of these is Activate (default).
| **Transition**
| **Check Key Input＞KeyCode** | **Transition Request>Identifier** |
| Bluetooth to USB |
Key\_DownArrow | Scenes＞Media USB |
| USB to Radio | Scenes＞Media Radio |
| Radio to USB |
Key\_UpArrow
| Scenes＞Media USB
|
| USB to Bluetooth | Scenes＞Media Bluetooth |
| Bluetooth to Radio | Scenes＞Media Radio |
13. When all settings are complete, the screen will look like the one below.
With the above settings, the scene that is displayed when a transition occurs from each scene in the subchart has been set.
#### Checking the screen transition
Use the Player to check the screen transition.
1. Click the \[ Play selected scenario \] icon on the toolbar to start the Player.
- Three windows will open, and you can see that the simulation display, one of the windows, displays the “Navi Title” and “Navigation” text, and that the initial transition has occurred to the Main Menu and Navigation scenes.
3. Pressing the right arrow key on the keyboard switches the text on the screen, and “Media Title”, “Radio Title”, and “Radio” are displayed in the simulation display, and the transition to the Media Menu scene (Subchart) is performed.
4. Pressing the up and down arrow keys on the keyboard switches the text on the screen, and the transition to the “Radio”, “Bluetooth”, and “USB” scenes in the Subchart is performed sequentially.
5. Close the CGI Panel and exit the Player.
- All three windows that were open will close.
In addition to the switching between the Navigation, Phone and Media scenes set in Part 2, we were able to confirm that it is also possible to switch between the Radio, Bluetooth and USB scenes, which are subcharts. However, at present, even if you switch to a scene placed in a subchart in the Media scene, when you transition back to the Navigation or Phone scene (using the left and right directional keys) and then return to the Media scene, the Radio scene, which is always set as the initial scene of the Media scene, will be displayed.
If you want to display the scene that was displayed immediately before, you can do this by placing a History State in the Subchart.
### Configure History State
#### Placing the History State
1. Double-click on Main\_StateMachine in the \[ State Machines \] folder in the Solution Explorer.
- The State Machine Editor will appear.
3. After selecting the Media State, double-click to move it into the SubChart.
4. Select the Initial State in the Subchart and press the Delete key.
- The Initial State in the Subchart will be deleted.
6. Drag and drop \[ History State \] from the toolbar at the top of the panel into the Subchart.
- The History State will be placed in the Subchart.
8. Drag and drop \[Transition\] from the toolbar at the top of the panel into the Subchart.
- The Transition will be connected to the Initial State, and it will be ready to be placed.
10. While the Transition is ready to be placed, click on the Radio State.
- The History State and Radio State will be connected by the Transition.
#### Checking the screen transition
Use the Player to check the screen transition.
1. Press the \[Play selected scenario...\] icon on the toolbar to start the Player.
- Three windows will open, and you can see that the simulation display shows “Navi Title” and “Navigation” text, and that the initial transition has occurred to the Main Menu and Navigation scenes.
3. Press the right arrow key on the keyboard once.
- The text “Media Title”, “Radio Title” and “Radio” will appear, and you will be taken to the Media Menu scene (Subchart).
5. Press the down arrow key on the keyboard once.
- The text on the screen will change, and “Bluetooth Title” and “Bluetooth” will appear.
7. Press the right arrow key on the keyboard once, and then press the left arrow key once.
- On the simulation display, “Phone Title” will be displayed, and then “Media Title” will be displayed again.
- In this case, “Bluetooth” will be displayed.
9. Close the CGI Panel and exit the Player.
- All three windows that were open will close.
By replacing the Initial State in the Subchart with the History State, you can see that the scene transition in the Subchart has become a state that remembers the state of the previous transition.
# 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.
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.
3. Click \[ Browse \] at the top of the dialog.
- The \[ Select Location \] dialog will appear.
5. Select StateMachines and click \[ OK \].
- The location “/State Machines” is selected as the save location for the new State Machine.
7. 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.
3. 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.
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.
6. Select “Action > Transition > Transition Request” from the list and connect it to the top node.
- You can also narrow down the list of behaviors in the dialog by entering “Transition Request” in the search field at the top of the dialog.
- The Transition Request is connected to \[CallActive > On Exit Actions\].
8. Repeat the same process for the \[On Exit Actions\] of the CallActive Fusion node to connect the Transition Request Fusion node.
9. Make the following settings for the two Transition Requests that you have connected.
| On Entry Actions | RequestType | Activate |
| 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.
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**
- This sample uses the Smart Importer to import necessary images and create pre-configured Controls.
- RadioButtons will be organized inside a GroupBox so that only one RadioButton can be selected at a time.
- Behaviors will be configured using Fusion to create simple interactions.
- An animation will be created configuring key frames in Scene Composer's Animation Design.
- State Machine Editor is used to create transitions, and switching between Music and Navigation context. Necessary behaviors will be configured in Fusion.
| **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.
| 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
1. In the **Layer Tree** expand **\[Music\]**.
- The **Layer Tree** displays among other things a Slider, DigitalClock\_Time, DigitalClock\_Total\_Time and a CheckBox.
2. In the **Layer Tree** select the target layer. Apply the controls in the **\[Control List\]** tab and configure the property values in the **\[Basic Properties\]** tab according to the table below.
- The controls of the Music part are configured for importing.
| **Target Layer** | **Control List** | **Basic Properties** |
| Slider | Slider | Value | Float | 9000 |
| Minimum | Float | 0 |
| Maximum | Float | 18000 |
| DigitalClock\_Time | DigitalClock | ShowFull24Hours | Boolean | TRUE |
| ShowSeconds
| Boolean | FALSE
|
| DigitalClock\_Total\_Time
| DigitalClock
| Time | UInt32 | 18000 |
| ShowFull24Hours | Boolean | TRUE |
| ShowSeconds | Boolean | FALSE |
| CheckBox
| CheckBox
| Text | String | (blank space) |
1. In the **Layer Tree** expand **\[Comfort > Seat\_Left\]**.
- The **Layer Tree** displays among other things Seat\_Left with TextValue\_Temperature, Icon\_Button\_+, Icon\_Button\_-, ProgressBar and SeatHeating\_Left.
2. In the **Layer Tree** select the **Seat\_Left**'s target layer. Apply the controls in the **\[Control List\]** tab and configure the property values in the **\[Basic Properties\]** tab according to the table below.
- The controls of Comfort's Seat\_Left are configured for importing.
| **Seat\_Left** |
| **Target Layer** | **Control List** | **Basic Properties** |
| TextValue\_Temperature | Text Value | Value | Float | 23 |
| FormatText | String | %02d |
| Icon\_Button\_+ | IconButton | | | |
| Icon\_Button\_- | IconButton | | | |
| ProgressBar | ProgressBar | Value | Float | 23 |
| Minimum | Float | 16 |
| Maximum | Float | 28 |
| SeatHeating\_Left | CheckBox | Text | String | (blank space) |
3. In the **Layer Tree** expand **\[Comfort > Seat\_Right\]**.
- The **Layer Tree** displays among other things Seat\_Right with TextValue\_Temperature, Icon\_Button\_+, Icon\_Button\_-, ProgressBar and SeatHeating\_Left.
4. In the **Layer Tree** select the **Seat\_Right**'s target layer. Apply the controls in the **\[Control List\]** tab and configure the property values in the **\[Basic Properties\]** tab according to the table below.
- The controls of Comfort's Seat\_Right are configured for importing.
| **Seat\_Right** |
| **Target Layer** | **Control List** | **Basic Properties** |
| TextValue\_Temperature | Text Value | Value | Float | 23 |
| FormatText | String | %02d |
| Icon\_Button\_+ | IconButton | | | |
| Icon\_Button\_- | IconButton | | | |
| ProgressBar | ProgressBar | Value | Float | 23 |
| Minimum | Float | 16 |
| Maximum | Float | 28 |
| SeatHeating\_Right | CheckBox | Text | String | (blank space) |
5. In the Layer Tree expand **\[Comfort > Fan\]**.
- The **Layer Tree** displays among other things a Slider.
6. In the **Layer Tree** select **Fan**. Apply the control in the **\[Control List\]** tab and configure the property values in the **\[Basic Properties\]** tab according to the table below.
- The controls of the Comfort's Fan are configured for importing.
| **Fan** |
| **Target Layer** | **Control List** | **Basic Properties** |
| Slider | Slider | | | |
7. In the Layer Tree expand **\[Comfort > Air\]**.
- The **Layer Tree** displays among other things a RadioButton\_Outside air, RadioButton\_Inside air and RadioButton\_AUTO.
8. In the **Layer Tree** select **Air**. Apply the control in the **\[Control List\]** tab and configure the property values in the **\[Basic Properties\]** tab according to the table below.
- The RadioButtons are configured for importing.
| **Air** |
| **Target Layer** | **Control List** | **Basic Properties** |
| RadioButton\_Outside air | RadioButton | Text | String | (blank space) |
| RadioButton\_Inside air
| RadioButton
| Text
| String
| (blank space) |
| RadioButton\_AUTO
| RadioButton
| Text
| String
| (blank space) |
9. When expanding these **RadioButtons** in the Layer Tree, you can see that each of them contains a **Control\_Background**. **Uncheck the checkbox** of these Control\_Background images in the Layer Tree as seen in the image below.
- All images for the RadioButtons are configured for importing
| **\[Air\] In the Layer Tree Panel
** |
| **Target Layer** | **Configuration Details** |
| RadioButton\_Outside air/Control\_Background | disable (uncheck checkbox in Layer Tree)
|
| RadioButton\_Inside air/Control\_Background
| disable (uncheck checkbox in Layer Tree) |
| RadioButton\_AUTO/Control\_Background
| disable (uncheck checkbox in Layer Tree) |
1. In the Layer Tree enable the Navigation tree by checking the checkbox to the left of **Navigation**.
- Navigation will be enabled as seen in the image below.
| 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.
- Changing the playback time value by moving the slider knob for playback music
- Changing the state of the temperature progress bar by pressing the seat heater buttons
| 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](https://doc316en.candera.eu/link/293#bkmrk-page-title).
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](https://doc316en.candera.eu/link/275#bkmrk-page-title)
- [Advanced Cluster Part 2](https://doc316en.candera.eu/link/277#bkmrk-page-title)
- [Advanced Cluster Part 3](https://doc316en.candera.eu/link/278#bkmrk-page-title)
- [Advanced Cluster Part 4](https://doc316en.candera.eu/link/280#bkmrk-page-title)
---
| **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](https://doc316en.candera.eu/books/scene-design/page/pivot-hint "Pivot Hint") 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](http://cgi3151en.candera.eu/books/import-of-resources/page/how-to-import-resources "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](https://doc316en.candera.eu/books/scene-design/page/pivot-hint "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** |
1. In the Scene Tree panel select the **NeedleEffectImage** node. In the Scene Tree panel's right side under **\[Behaviors\]** select "**Blend Mode**" and press Delete on your keyboard to delete this behavior.
- The behavior Blend Mode has been deleted.
2. While **NeedleEffectImage** is selected in the Scene Tree panel select the **BitmapBrushColorBlend** effect in the Scene Tree panel's right side and adjust its properties in the Properties panel according to the table below.
- The BitmapBrushColorBlend effect is configured correctly.
- In the Scene Editor you can see that the **NeedleEffectImage** is not a white gradient anymore. You can rather **perceive a slight change of color** compared to the original BackgroundImage (see image below, the needle is pointing to 3 o'clock).
| **BitmapBrushColorBlend**
**Property**
| **Value** |
| ColorBlendFactorSrc | DestColor |
| ColorBlendFactorDst | SourceAlpha |
3. In the Scene Tree panel select the **Custom\_Gauge** node. In the Scene Tree panel's right side select the **MapValue** behavior. In the **Properties** panel configure its properties according to the table below.
- The MapValue behavior's minimum and maximum value have been configured.
| **MapValue Properties**
| **Value** |
| OutputMin | -128.50 |
| OutputMax | 128.50 |
**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 ](https://doc316en.candera.eu/books/fusion/page/basic-operations#bkmrk-adding-a-fusion-node)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](https://doc316en.candera.eu/books/player "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](https://doc316en.candera.eu/books/best-practice/page/gettingstartedcontrols-part-1#bkmrk-check-the-first-scen).
- 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](https://doc316en.candera.eu/link/284#bkmrk-page-title)
- [GettingStartedControls Part 2](https://doc316en.candera.eu/link/290#bkmrk-page-title)
- [GettingStartedControls Part 3](https://doc316en.candera.eu/link/310#bkmrk-page-title)
- [GettingStartedControls Part 4](https://doc316en.candera.eu/link/311#bkmrk-page-title)
- [GettingStartedControls Part 5](https://doc316en.candera.eu/link/312#bkmrk-page-title)
---
| **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](http://cgi3151en.candera.eu/books/scene-design/page/delete-a-scene "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](http://cgi3151en.candera.eu/books/scene-design/page/2d-scene-editor "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](http://cgi3151en.candera.eu/books/import-of-resources/page/how-to-import-resources "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.
This tutorial uses "[Tell Tale](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/common#bkmrk-tell-tale)" Controls to indicate weather alerts, charging status information and incoming calls.
| **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](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/common#bkmrk-gauge "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](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/common#bkmrk-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](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/common#bkmrk-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](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/common#bkmrk-digitalclock)" control. We will also add a "[FlipBook](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/common#bkmrk-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](http://cgi3151en.candera.eu/books/layouter/page/types-of-layouters#bkmrk-grid-layouter).
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](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/common#bkmrk-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](http://cgi3151en.candera.eu/books/layouter/page/types-of-layouters#bkmrk-grid-layouter)" 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](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/common#bkmrk-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](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-button)" controls and a "[Slider](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-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](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/value-processing-behaviors#bkmrk-forward-value)" 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
Steering wheel heating is easy to configure. It uses a simple [CheckBox ](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-checkbox)Control for turning the steering wheel heating on and off.
1. From the Toolbox panel's \[ Controls \] section under "Touchable" drag and drop a "CheckBox" into the Scene Tree panel directly onto the already configured "GridLayout" node.
- The CheckBox will appear in the Scene Tree panel.
- The CheckBox will also be visible in the Scene Editor.
2. In the Scene Tree panel select the CheckBox and rename it to "CheckBox\_Steering heater" either via the context menu entry "Rename" or by pressing <F2> on your keyboard.
- In the Scene Tree panel, the "CheckBox\_Steering heater" can be seen.
3. In the Scene Tree panel right-click on the "GridLayout". In the opened context menu choose "Configure Layouter...".
- The Grid Layout Editor will be opened.
- The newly added CheckBox will be placed in the grid's top left cell.
4. In the Grid Layout Editor drag and drop the CheckBox into the cell to the right of "Text\_Steering wheel heating". When you're done, press \[OK\].
- The Grid Layout Editor will be closed.
- In Scene Editor the CheckBox will be positioned in the correct cell of the GridLayout.
5. In the Properties panel's \[ Layout \] section change the "Vertical Alignment" to VCenter.
- In the Scene Editor the CheckBox's position has changed, it is now in the same line as the text "Steering wheel heating".
6. In the Properties panel's \[ Control \] section change the Text to "On" and configure the CheckBox's images as in the table below.
- In the Scene Editor the CheckBox has a different visual appearance with the new images.
- The Steering Wheel heating Controls have been configured correctly.
| **Property** | **Image** |
| Normal Image | /Resources/Climate/NewCheckBoxDeselectedBmp |
| Pressed Image | /Resources/Climate/NewCheckBoxDeselectedPressedBmp
|
| Selected Image | /Resources/Climate/NewCheckBoxSelectedBmp |
| Selected Pressed Image | /Resources/Climate/NewCheckBoxSelectedPressedBmp |
1. From the Toolbox panel's \[ Controls \] section under "Container" drag and drop a "
[GroupBox](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/container "Container")" into the Scene Tree panel directly onto the configured "GridLayout" node.
- In the Scene Tree panel the GroupBox is visible, hierarchically below the GridLayout.
2. In the Scene Tree panel click the triangle on the left of the GroupBox to open the GroupBox.
- "Content" gets visible below "GroupBox".
3. From the Toolbox panel's \[ Nodes 2D \] section drag and drop a "Stack Layout" into the Scene Tree panel directly onto the "Content" anchor of the GroupBox that has been added in the first step.
- In the Scene Tree panel the Stack Layout has been added as the GroupBox's content.
4. From the Toolbox panel's \[ Controls \] section under "Touchable" drag and drop 2 "Radio Buttons" into the Scene Tree panel directly onto the "Stack Layout" that has been added in the previous step.
- In the Scene Tree panel the RadioButtons have been added to the Stack Layout.
5. In the Scene Tree panel select the "GroupBox" and "RadioButtons" individually 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, "RadioButton\_AC On" and "RadioButton\_AC Off" can be seen as in the image below.
| **Target Item** | **Name** |
| GroupBox | GroupBox\_AC |
| RadioButton | RadioButton\_AC Off |
| RadioButton\_1 | RadioButton\_AC On |
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.
7. In the Grid Layout Editor drag and drop GroupBox\_AC onto its correct position to the right of "Text\_Air Condition". When you're done press \[OK\].
- In the Scene Editor you can see that GroupBox (and its RadioButton content) is in the correct cell in the GridLayout's grid.
8. In the Scene Tree panel select the Stack Layout. In the Properties panel's \[ Layout \] section set the Vertical Alignment property to "VCenter".
- In Scene Editor the Radio Buttons appear in correctly aligned with the text "Air Condition".
9. In the Scene Tree panel select GroupBox\_AC. In the Properties panel's \[ Control \] section uncheck the "Enable Background" property.
- In Scene Editor you can see that a border around the Radio Buttons disappears.
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.
1. In the Scene Tree panel select the Radio Buttons individually. In the Property panel's \[ Control \] section change the "Text" property according to the table below.
- In the Scene Editor the Radio Buttons' texts appear as configured.
| **Target Item** | **Text** |
| RadioButton\_AC On
| On |
| RadioButton\_AC Off
| Off |
2. In the Scene Tree panel select both Radio Buttons. This can be achieved by selecting one Radio Button and click on the second Radio Button while keeping the <Shift> key pressed.
- In the Scene Tree panel and in the Scene Editor you can see that both Radio Buttons are selected.
- In the Properties panel it says "Multiple items selected".
3. In the Properties panel's \[ Control \] section define new images according to the table below. To do this, click the magnifying glass icon next to the image property to open the "Choose Item" dialog, where you select the corresponding image.
- New images of the Radio Buttons have been configured.
| **Property** | **Image** |
| Normal Image | /Resources/Climate/NewRadioButtonNormalBmp |
| Pressed Image | /Resources/Climate/NewRadioButtonNormalPressedBmp
|
| Selected Image | /Resources/Climate/NewRadioButtonActivatedBmp |
| Selected Pressed Image | /Resources/Climate/NewRadioButtonActivatedPressedBmp |
4. In the Properties panel's \[ Layout \] section configure the Margin property of both Radio Buttons according to the table below.
- In Scene Editor the two Radio Buttons are further apart than before.
- The configuration of the Air Condition Radio Buttons and GroupBox is now complete.
| **Margin** | **Value** |
| Left | 0 |
| Top | 0 |
| Right | 100 |
| Bottom | 0 |
1. From the ToolBox panel's \[ Nodes 2D \] section drag and drop a GridLayout into the Scene Tree panel directly onto the already existing "GridLayout" node.
- In the Scene Tree panel you can see that a GridLayout has been created under the already existing GridLayout. The newly created GridLayout is hierarchically below the older GridLayout.
2. From the ToolBox panel's \[ Controls \] section under "Touchable" drag and drop 2 Buttons and 1
[MultiStateButton ](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-multistatebutton)into the Scene Tree panel directly onto the node "GridLayout" that was created in the previous step.
- In the Scene Tree panel you can see that 2 Buttons and 1
MultiStateButton have been created below the GridLayout that has been created in the previous step.
3. In the Scene Tree panel create a multiple selection of all Fan Buttons (the 2 Buttons and the MultiStateButton) by clicking on the first one, holding the <Shift>-key on your keyboard and then clicking on the last one.
- In the Scene Tree panel 3 items are selected.
- In the Properties panel's top it says "Multiple items selected".
4. In the Properties panel's \[ Layout \] section change the VerticalAlignment to VCenter.
- Vertical Alignment of all 3 nodes is set to center.
5. In the Scene Tree panel select the newly created GridLayout, Buttons and MultiStateButton individually 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 the newly created Controls appear as in the image below.
| **Target Item** | **Name** |
| GridLayout | GridLayout\_Fan |
| Button | Button\_Fan Off |
| Button\_1 | Button\_Fan Max |
| MultiStateButton
| MultiStateButton\_Fan
|
6. In the Scene Tree panel right-click on the "older" GridLayout and choose "Configure Layouter..." from the context menu.
- The "Grid Layout Editor" will be opened.
7. In the "Grid Layout Editor" drag and drop GridLayout\_Fan into the cell right next to the "Text\_Fan" Text control. Then click \[OK\].
- In Scene Editor GridLayout\_Fan and its content is now placed at the correct position.
- The MultiStateButton and the 2 Buttons are still overlapping. This will be solved by configuring the layout of GridLayout\_Fan in the next steps.
1. In the Scene Tree panel right-click on the GridLayout\_Fan and choose "Configure Layouter..." from the context menu.
- The "Grid Layout Editor" will be opened.
2. In the "Grid Layout Editor" configure 1 row and 6 columns using the buttons on the bottom left.
- In the "Grid Layout Editor" a grid with rows and columns will be displayed as configured.
3. In the "Grid Layout Editor" adjust the width of the columns on the top of the grid. Then 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.
- After pressing \[OK\], the controls of GridLayout\_Fan are arranged as in the image below.
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 |
1. In Scene Tree panel select "Button\_Fan Off" and click on the \[Fusion...\] button on the right side of the Scene Tree.
- Fusion will be opened, displaying a Fusion diagram as shown in the image below.
2. Drag the Event Handler Fusion Node's Actions connector of the right and release the mouse button.
- The Select Behavior dialog will be displayed.
3. Position the mouse cursor into the input field above the behaviors list and start typing "
[Send Value as Event](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/action-behaviors#bkmrk-send-value-as-event)". As soon as you find the behavior in the list, which is narrowed down while typing, double-click it.
- A new Fusion Node is added to the Fusion diagram: Send Value as Event Fusion Node.
4. Configure the Send Value as Event Event Node's TargetNode by pressing the magnifying glass icon next to it. In the opened Select Item dialog navigate to the MultiStateButton\_Fan, which can be found at the path given in the table below. Select MultiStateButton\_Fan and press \[OK\].
- MultiStateButton\_Fan is configured as TargetNode, where the value will be sent to when a click action occurs on "Button\_Fan Off".
5. Configure the Send Value As Event Fusion Node's value according to the table below.
- \[Button\_Fan Off\] is configured to send a value of 0.00 to MultiStateButton\_Fan whenever it is pressed.
6. Repeat steps 1 to 5 with "Button\_Fan Max" setting the Send Value As Event Fusion Node's value to the maximum fan value of "7".
- \[Button\_Fan Max\] is configured to send a value of 7.00 to MultiStateButton\_Fan whenever it is pressed.
1. From the ToolBox panel's \[ Controls \] section under "Touchable" drag and drop 1
[MultiStateButton ](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-multistatebutton)into the Scene Tree panel directly onto the scene's GridLayout.
- In the Scene Tree panel you can see that a
MultiStateButton has been created below the scene's GridLayout that has been created in one of our first steps on this page.
2. In the Scene Tree panel select the MultiStateButton and rename it to "MultiStateButton\_Seat" either via the context menu entry "Rename" or by pressing <F2> on your keyboard.
- In the Scene Tree panel, the "MultiStateButton\_Seat" can be seen.
3. In the Scene Tree panel select MultiStateButton\_Seat. In the Properties panel's \[ Layout \] section change the VerticalAlignment to VCenter.
- In the Scene Editor MultiStateButton\_Seat is displayed vertically centered inside its cell.
4. In the Scene Tree panel right-click on the scene's GridLayout and choose "Configure Layouter..." from the context menu.
- The "Grid Layout Editor" will be opened.
5. In the "Grid Layout Editor" drag and drop MultiStateButton\_Seat into the cell right next to the "Text\_Seat heater" Text control. Then click \[OK\].
- In Scene Editor MultiStateButton\_Seat is now placed at the correct position.
6. In the Scene Tree panel select MultiStateButton\_Seat. In the Properties panel's \[ Control \] section under "StateImages" click on the magnifying glass next to "StateImages 0".
- The "Choose Item" dialog will be opened.
7. In the Choose Item dialog navigate to "/Resources/Climate/NewButtonState1Bmp", select this image and click \[OK\].
- In the Properties panel the first StateImage has been configured.
8. Repeat steps 6 and 7 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/NewButtonState1Bmp |
| StateImages 1
| /Resources/Climate/NewButtonState2Bmp |
| StateImages 2
| /Resources/Climate/NewButtonState3Bmp |
| StateImages 3
| /Resources/Climate/NewButtonState4Bmp |
9. You can check the functionality by changing the Control's "Current State" property to any value from 0 to 3 in the Properties panel's \[ Control \] section.
- In the Scene Editor a different image will be displayed for the Seat heater depending on the configured value of the "Current State" property.
- Below you can see the MultiStateButton\_Seat when "Current State" is 3.
1. From the Toolbox panel's \[ Controls \] section under "Touchable" drag and drop a
[SpinBox ](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-spinbox)into the Scene Tree directly onto the scene's GridLayout.
- In the Scene Tree panel you can see that SpinBox
has been created below the scene's GridLayout that has been created in one of our first steps on this page.
2. In the Scene Tree panel select the SpinBox and rename it to "SpinBox\_Heating" either via the context menu entry "Rename" or by pressing <F2> on your keyboard.
- In the Scene Tree panel, the "SpinBox\_Heating" can be seen.
3. In the Scene Tree panel select SpinBox\_Heating. In the Properties panel's \[ Layout \] section change the VerticalAlignment to VCenter and change the Size's X property to "150".
-
To change the Size's X property you might have to click the disabled \[ A \] button first.
- In the Scene Editor SpinBox\_Heating is displayed vertically centered inside its cell and its width is reduced to 150px.
| **Target Item** | **Value** |
| Vertical Alignment | VCenter |
| Size X | 150,00 |
4. In the Scene Tree panel right-click on the scene's GridLayout and choose "Configure Layouter..." from the context menu.
- The "Grid Layout Editor" will be opened.
5. In the "Grid Layout Editor" drag and drop SpinBox\_Heating into the cell right next to the "Text\_Heating" Text control. Then click \[OK\].
- In Scene Editor SpinBox\_Heating is now placed at the correct position.
6. In the Scene Tree panel select Spinbox\_Heating. In the Properties panel's \[ Control \] section adjust the properties given in table below.
- SpinBox\_Heating is configured according to the table.
- In Scene Editor the displayed text is changed to "22°C".
-
If the displayed value doesn't change to "22°C" try refreshing the screen by pressing the <F5> key on your keyboard
| **Target Item** | **Value** |
| Value | Float 22.00 |
| Minimum Value | Float 15,00 |
| Maximum Value | Float 28,00 |
| Text Format | %02d°C |
7. In the Properties panel's \[ Control \] section click on the magnifying glass icon next to "Arrow Up Normal Image".
- The "Choose Item" dialog will be opened.
8. In the Choose Item dialog select /Resources/Climate/New\_arrow\_incrementBmp
- In Scene Editor you can see that a new image has been configured for the SpinBox.
9. Repeat steps 7 and 8 to configure new images according to the table below.
- In Properties panel new images are configured for the SpinBox\_Heating as seen in the image below.
- In the Scene Editor new images are visible for the SpinBox.
| **Target Item** | **Value** |
| Arrow Up Normal Image | /Resources/Climate/New\_arrow\_incrementBmp |
| Arrow Up Pressed Image | /Resources/Climate/New\_arrow\_increment\_activeBmp |
| Arrow Down Normal Image | /Resources/Climate/New\_arrow\_decrementBmp |
| Arrow Down Pressed Image | /Resources/Climate/New\_arrow\_decrement\_activeBmp |
The Climate 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 Scene Composer's 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 tick the checkbox next to "Scenes#SceneClimate" and uncheck "Scenes#SceneHome".
- SceneClimate will become visible in the Player.
4. You can now play around with the configured Climate Controls in the scene and watch the results.
- Temperature slider is working and the displayed temperature is updated.
- Steering wheel heating CheckBox can be checked and unchecked
- Air Conditioning RadioButtons can be toggled
- Fan Buttons and MultiStateButton can be clicked and are functional.
- Seat heater MultiStateButton can be clicked and will change its image
- Heating SpinBox can be configured for values from 15 to 28°C
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 16 files and press **\[Open\]**
- The "Import Images" dialog will be opened.
| **Import Resources** | **Path** |
|
| /cgi\_studio\_content/Resources/GettingStartedControls/Options |
3. In the "Import Images" dialog select folder "/Resources", make sure to create a new folder "Options" for the imported images and click **\[OK\]**.
- In the Solution Explorer you can see that there is a new folder "Options" in folder "Resources" that contains the 16 imported images.
- The images have been imported and can be used in the Scene Composer solution.
| **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](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-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 ](http://cgi3151en.candera.eu/books/scene-design/page/2d-nodes#bkmrk-create-2d-nodes)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 ](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-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 ](http://cgi3151en.candera.eu/books/scene-design/page/2d-laying-out#bkmrk-overlay-layouter)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 ](http://cgi3151en.candera.eu/books/scene-design/page/2d-nodes#bkmrk-create-2d-nodes)and a [TextNode ](http://cgi3151en.candera.eu/books/scene-design/page/2d-nodes#bkmrk-adding-text-to-the-2)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 ](http://cgi3151en.candera.eu/link/602#bkmrk-bitmapbrushcolorblen)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 ](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-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 ](http://cgi3151en.candera.eu/books/scene-design/page/2d-laying-out#bkmrk-stack-layouter)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 ](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-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](https://doc316en.candera.eu/books/fusion "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](https://doc316en.candera.eu/books/fusion "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
The Options 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 Scene Composer's 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 tick the checkbox next to "Scenes#SceneOptions" and uncheck "Scenes#SceneHome".
- SceneOptions will become visible in the Player.
4. You can now play around with the configured Options Controls in the scene and watch the results.
- Grab the Connection Dial Control and switch between Cable, Bluetooth and Other.
- Click into the Devices List to open the Sub-List.
- Click on the Sub-List's "Connect" and "Unpair" TextButtons and watch the configuredhover and click effects.
- Click on several devices in the Devices List to make multiple Sub-Lists visible. Now you can test the scrollbar.
# 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.
1. In the menu bar select **Import > Import Resources...**
- The Windows **"Import Resources"** dialog will be opened.
2. In the **"Import Resources"** dialog navigate to the path given in the table below. Select all 5 files and press **\[Open\]**
- The Windows **"Import Resources"** dialog will be closed.
- Scene Composer's **"Import Images"** dialog will be opened.
| **Import Resources** | **Path** |
|
| /cgi\_studio\_content/Resources/GettingStartedControls/MenuTabs |
3. In the **"Import Images"** dialog select folder "/Resources", make sure to create a new folder "MenuTabs" for the imported images and click **\[OK\]**.
- In the Solution Explorer you can see that there is a new folder "MenuTabs" in folder "Resources" that contains the 5 imported images.
- The **images have been imported** and can be used in the Scene Composer solution.
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 Proper**ties 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](https://doc316en.candera.eu/books/fusion "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](https://doc316en.candera.eu/books/fusion "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](https://doc316en.candera.eu/books/fusion "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](https://doc316en.candera.eu/books/fusion "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.
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](http://dev.doc.cgistudio.at/APILINK/namespace_courier.html).
|
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](#bkmrk-switching-to-a-virtu)) 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](http://www.scriptspot.com/3ds-max/scripts/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](https://www.scriptspot.com/3ds-max/scripts/reset-xform) 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](#bkmrk-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/](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](#bkmrk-get-name-suffix-for-). 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.)
| (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.
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](#bkmrk-configure-the-pivot-).
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](#bkmrk-import-to-scene-comp)). 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](#bkmrk-7.3.6.3.-restore-a-c) 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.
| **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.
| Group name
| CheckBox
|
| Layer
| SelectedImage
|
| SelectedPressedImage
|
| NormalImage
|
| PressedImage
|
| Group name
| Gauge
|
| Layer
| NeedleImage
|
| BackgroundImage
|
| Group name
| IconButton
|
| Layer
| NormalImage
|
| PressedImage
|
| FocusedImage
|
| IconNormalImage
|
| IconPressedImage
|
| Group name
| RadioButton
|
| Layer
| NormalImage
|
| PressedImage
|
| SelectedImage
|
| SelectedPressedImage
|
| FocusedImage
|
| Group name
| TextButton
|
| Layer
| NormalImage
|
| PressdImage
|
| FocusedImage
|
| Group name
| AnalogClock
|
| Layer
| SecondsNeedleImage
|
| MinutesNeedleImage
|
| HoursNeedleImage
|
| FaceImage
|
| Group name
| Breadcrumb
|
| Layer
| Name
|
| EllipsisText
|
| Group name
| CircularSlider
|
| Layer
| BackgroundImage
|
| ActiveImage
|
| ThumbImage
|
| ThumbImagePressed
|
| FocusImage
|
| Group name
| GroupBox
|
| Layer
| BackgroundImage
|
| Group name
| Mesh2D
|
| Layer
| Image
|
| Group name
| MultiStateButton
|
| Layer
| ButtonState1Bmp
|
| ButtonState2Bmp
|
| ButtonState3Bmp
|
| ButtonState4Bmp
|
| FocusedImage
|
| Group name
| PageIndicator
|
| Layer
| PressedImage
|
| SelectedPressedImage
|
| SelectedIndicatorImage
|
| IndicatorImage
|
| SelectedIndicatorPressedImage
|
| IndicatorPressedImage
|
| Group name
| Roll
|
| Layer
| DecorationImage
|
| TextEditBackground
|
| Group name
| SpinBox
|
| Layer
| BackgroundImage
|
| ArrowUpNormalImage
|
| ArrowUpPressedImage
|
| ArrowDownNormalImage
|
| ArrowDownPressedImage
|
| Group name
| ToggleButton
|
| Layer
| FirstImage
|
| FirstPressedImage
|
| SecondImage
|
| SecondPressedImage
|
| FocusedImage
|
| Group name
| TouchIndication
|
| Layer
| Image
|
