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

<div class="contents" id="bkmrk-gettingstartedcontro-1"><div class="contents"><div class="textblock">- <span style="color: rgb(230, 126, 35);">[GettingStartedControls Part 1](https://doc316en.candera.eu/link/284#bkmrk-page-title)</span>
- <span style="color: rgb(230, 126, 35);">[GettingStartedControls Part 2](https://doc316en.candera.eu/link/290#bkmrk-page-title)</span>
- <span style="color: rgb(230, 126, 35);">[GettingStartedControls Part 3](https://doc316en.candera.eu/link/310#bkmrk-page-title)</span>
- <span style="color: rgb(230, 126, 35);">[GettingStartedControls Part 4](https://doc316en.candera.eu/link/311#bkmrk-page-title)</span>
- <span style="color: rgb(230, 126, 35);">[GettingStartedControls Part 5](https://doc316en.candera.eu/link/312#bkmrk-page-title)</span>

---

</div></div></div>

# GettingStartedControls Part 1

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

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

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

<div drawio-diagram="7940"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1739530517.png" alt=""/></div>

---

#### Setting up the SceneComposer Solution

1. Create a new solution using the Empty Solution template and save it as shown in<span style="color: rgb(230, 126, 35);"> [Creating a new Solution](http://cgi3151en.candera.eu/books/getting-started/page/creating-a-new-solution "Creating a new Solution")<span style="color: rgb(0, 0, 0);">.</span></span>
    - A new solution is created and saved.
2. Activate the Render Targets panel on the top right and select \[ Display (0) \]. In the Properties panel below change the display's X and Y Resolution. 
    - The horizontal and vertical resolution of the display will be defined.
    - The aspect ratio of the display will be calculated automatically.  
        <table border="1" class="align-center" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><thead><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Target Item**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Setting Value**</span></td></tr></thead><tbody><tr><td>X Resolution  
        </td><td>1024  
        </td></tr><tr><td>Y Resolution  
        </td><td>768  
        </td></tr></tbody></table>
        
        <div drawio-diagram="7939"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1739530492.png" alt=""/></div>

#### Preparing the Scene

1. In the Solution Explorer panel on the top left select "Scene3D" (under "Solution - Scenes") and delete it either using the &lt;delete&gt; key or via the context menu \[ Delete \] as described in <span style="color: rgb(230, 126, 35);">[Delete a Scene](http://cgi3151en.candera.eu/books/scene-design/page/delete-a-scene "Delete a Scene")</span>. 
    - 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 &lt;F2&gt; on your keyboard or via the context menu "Rename". 
    - The scene's name has been changed to "SceneHome" <div drawio-diagram="7938"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1739530470.png" alt=""/></div>
4. In the Solution Explorer panel double-click the "SceneHome" to open it in the Scene Editor (see also <span style="color: rgb(230, 126, 35);">[2D Scene Editor](http://cgi3151en.candera.eu/books/scene-design/page/2d-scene-editor "2D Scene Editor")</span>). 
    - "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 &lt;Ctrl+S&gt; 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.

<p class="callout info">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.</p>

#### 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 <span style="color: rgb(230, 126, 35);">[How to Import Resources](http://cgi3151en.candera.eu/books/import-of-resources/page/how-to-import-resources "How to Import Resources")</span>. 
    - \[ Import Resources \] dialog will be opened
2. Navigate to the following folder, select all files provided in this "Cluster" folder and press \[ Open \].  
    **&lt;cgi-studio-root&gt;/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.  
        <div drawio-diagram="7944"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1739533483.png" alt=""/></div>

<div class="contents" id="bkmrk--26"><div class="contents"><div class="textblock">  
</div></div></div>#### 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.  
        <table border="1" class="align-center" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col style="width: 50%;"></col><col style="width: 25%;"></col><col style="width: 25%;"></col></colgroup><thead><tr><td rowspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Render Node**</span>
        
        </td><td colspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Transformations** </span></td></tr><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Position X**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Position Y**</span></td></tr></thead><tbody><tr><td>Navi60Bmp  
        </td><td>38  
        </td><td>121  
        </td></tr><tr><td>NewWarning80Bmp</td><td>38  
        </td><td>612  
        </td></tr></tbody></table>
        
        <div drawio-diagram="7947"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1739538655.png" alt=""/></div>

<div class="contents" id="bkmrk--27"><div class="contents">  
</div></div>#### 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.

<div class="contents" id="bkmrk--34"><div class="contents"><div class="textblock">This tutorial uses "<span style="color: rgb(230, 126, 35);">[Tell Tale](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/common#bkmrk-tell-tale)</span>" Controls to indicate weather alerts, charging status information and incoming calls.</div></div></div>1. From the Toolbox panel in the Controls section drag and drop 3 "Tell Tale" Controls into the Scene Editor. 
    - 3 Tell Tale Controls with the default images are visible in Scene Editor
    - These 3 Tell Tale Controls also appear in the Scene Tree. <div drawio-diagram="7950"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1739540253.png" alt=""/></div>
2. Select the 3 "Tell Tale" Controls individually to rename each of them in the Scene Tree panel and configure their properties in the Properties panel according to the table below. Position X and Y can be changed in the Properties panel's \[ Transformations \] section. The State property in can be changed in the \[ Control \] section. 
    - The properties are applied to the "Tell Tale" Controls.  
        <table border="1" class="align-center" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col style="width: 40%;"></col><col style="width: 20%;"></col><col style="width: 20%;"></col><col style="width: 20%;"></col></colgroup><thead><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Scene Tree**</span></td><td colspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Transformations** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Control** </span></td></tr><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Rename Node to**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Position X**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Position Y**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**State** </span></td></tr></thead><tbody><tr><td>Tell Tale\_Snow</td><td>387  
        </td><td>612</td><td>Off</td></tr><tr><td>Tell Tale\_Gas</td><td>594  
        </td><td>612</td><td>Off</td></tr><tr><td>Tell Tale\_Call</td><td>800</td><td>612</td><td>Blinking</td></tr></tbody></table>
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 \].  
    <table border="1" class="align-center" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col style="width: 33%;"></col><col style="width: 33%;"></col><col style="width: 33%;"></col></colgroup><thead><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Scene Tree**</span></td><td colspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Control** </span></td></tr><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Node**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**On State Image** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Off State Image** </span></td></tr></thead><tbody><tr><td>Tell Tale\_Snow</td><td>NewWeather\_BBmp</td><td>NewWeather\_HBmp</td></tr><tr><td>Tell Tale\_Gas</td><td>Ev\_HBmp</td><td>Ev\_Bmp\_HBmp</td></tr><tr><td>Tell Tale\_Call</td><td>NewCall\_HBmp</td><td>NewCallBmp</td></tr></tbody></table>
    
      
    <div drawio-diagram="8010"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1740726932.png" alt=""/></div>
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).
    
    <table border="1" class="align-center" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col style="width: 33%;"></col><col style="width: 33%;"></col><col style="width: 33%;"></col></colgroup><thead><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Item Name**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**On Time Ms**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Off Time Ms**</span></td></tr></thead><tbody><tr><td>Tell Tale\_Call  
    </td><td>800</td><td>800</td></tr></tbody></table>
    
    <div drawio-diagram="7957"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1739546379.png" alt=""/></div>

#### Configure a Gauge Control

To display the current speed of the car a "[<span style="color: rgb(230, 126, 35);">Gauge Control</span>](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.  
        <div drawio-diagram="7955"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1739545645.png" alt=""/></div>
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.  
        <table border="1" class="align-center" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col style="width: 33%;"></col><col style="width: 33%;"></col><col style="width: 33%;"></col></colgroup><thead><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Item Name** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Position X** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Position Y** </span></td></tr></thead><tbody><tr><td>Gauge  
        </td><td>319</td><td>217
        
        </td></tr></tbody></table>
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.  
        <table border="1" class="align-center" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col style="width: 30%;"></col><col style="width: 30%;"></col><col style="width: 30%;"></col></colgroup><thead><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Item Name** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Background Image** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Needle Image** </span></td></tr></thead><tbody><tr><td>Gauge  
        </td><td>NewClusterBmp</td><td>NewNeedleBmp</td></tr></tbody></table>
        
        <div drawio-diagram="7960"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1739546992.png" alt=""/></div>
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 &lt;F5&gt; key.  
    <table border="1" class="align-center" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col style="width: 30%;"></col><col style="width: 30%;"></col><col style="width: 30%;"></col></colgroup><thead><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Solution Explorer** </span></td><td colspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Properties panel \[ Bitmap \]** </span></td></tr><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Item Name**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Pivot Hint X** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Pivot Hint Y** </span></td></tr></thead><tbody><tr><td>NewClusterBmp  
    </td><td>194</td><td>194</td></tr><tr><td>NewNeedleBmp  
    </td><td>112  
    </td><td>8  
    </td></tr></tbody></table>
    
    <div drawio-diagram="7963"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1739548998.png" alt=""/></div>

<dl class="note" id="bkmrk-you-may-need-to-trig"><dd><p class="callout info">You may need to trigger a refresh by hitting the &lt;F5&gt; button on your keyboard if the images' positions are not updated automatically.</p>

</dd></dl>

#### Configure Digital Speed Display

A "<span style="color: rgb(255, 128, 0);">[Text Value](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/common#bkmrk-text-value)</span>" Control will be used to display the current speed as digits

1. From the Toolbox panel under \[ Controls \] - \[ Common \] drag a "<span style="color: rgb(0, 0, 0);">Text Value</span>" 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.  
        <table border="1" class="align-center" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col style="width: 30%;"></col><col style="width: 30%;"></col><col style="width: 30%;"></col></colgroup><thead><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Item Name** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Position X** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Position Y** </span></td></tr></thead><tbody><tr><td>Text Value</td><td>486</td><td>492</td></tr></tbody></table>
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.  
        <table border="1" class="align-center" style="border-collapse: collapse; width: 601px; border-width: 1px;"><colgroup><col style="width: 25%;"></col><col style="width: 25%;"></col><col style="width: 25%;"></col><col style="width: 25%;"></col></colgroup><thead><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Item Name** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Format Text** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Style** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Text Alignment** </span></td></tr></thead><tbody><tr><td>Text Value  
        </td><td>%3d</td><td>OpenSans25</td><td>Center</td></tr></tbody></table>
        
          
        <div drawio-diagram="7997"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1740150745.png" alt=""/></div>
4. From the Toolbox panel under \[ Controls \] - \[ Common \] drag a "<span style="color: rgb(255, 128, 0);">[Text](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/common#bkmrk-text)</span>" 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.  
        <table border="1" class="align-center" style="border-collapse: collapse; width: 601px; border-width: 1px;"><colgroup><col style="width: 30%;"></col><col style="width: 16%;"></col><col style="width: 16%;"></col><col style="width: 16%;"></col><col style="width: 16%;"></col></colgroup><thead><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">  
        </span></td><td colspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Transformation** </span></td><td colspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Control**</span></td></tr><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Item Name** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Position X** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Position Y**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Text** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Text Style** </span></td></tr></thead><tbody><tr><td>Text  
        </td><td>482</td><td>522</td><td>km/h
        
        </td><td>OpenSans25</td></tr></tbody></table>
        
        <div drawio-diagram="7999"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1740151080.png" alt=""/></div>

#### 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. <div drawio-diagram="8435"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-06/drawing-5-1749194495.png" alt=""/></div>
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.  
        <table border="1" class="align-center" style="border-collapse: collapse; width: 601px; border-width: 1px;"><colgroup><col style="width: 30%;"></col><col style="width: 60%;"></col></colgroup><thead><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Item Name** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**TargetNode**</span></td></tr></thead><tbody><tr><td>Forward Value  
        </td><td>Scenes/SceneHome/CompositeNode2D:Text Value</td></tr></tbody></table>

#### Add a FlipBook

The top center of our home screen is decorated with a "<span style="color: rgb(255, 128, 0);">[DigitalClock](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/common#bkmrk-digitalclock)</span>" control. We will also add a "<span style="color: rgb(255, 128, 0);">[FlipBook](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/common#bkmrk-flipbook)</span>" control to the upper right corner of the scene.

1. Drag and dro<span style="color: rgb(0, 0, 0);">p a DigitalClock control from the ToolBox (under \[ Controls \] - \[ Common \]) to the Scene Editor.</span>
    - 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.  
        <table border="1" class="align-center" style="border-collapse: collapse; width: 601px; border-width: 1px;"><colgroup><col style="width: 50%;"></col><col style="width: 25%;"></col><col style="width: 25%;"></col></colgroup><thead><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Item Name** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Position X** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Position Y**</span></td></tr></thead><tbody><tr><td>DigitalClock  
        </td><td>439</td><td>116</td></tr></tbody></table>
3. <span style="color: rgb(0, 0, 0);">Drag and drop a FlipBook fr</span>om 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.  
        <table border="1" class="align-center" style="border-collapse: collapse; width: 601px; border-width: 1px;"><colgroup><col style="width: 30%;"></col><col style="width: 15%;"></col><col style="width: 15%;"></col><col style="width: 15%;"></col><col style="width: 15%;"></col></colgroup><thead><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Item Name** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Position X** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Position Y**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Scale X** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Scale Y** </span></td></tr></thead><tbody><tr><td>FlipBook  
        </td><td>745</td><td>121</td><td>0.50</td><td>0.50</td></tr></tbody></table>

#### 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.  
        <div drawio-diagram="8000"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1740151124.png" alt=""/></div>
2. In the Toolbar make sure that the item "Generate and Play" is selected in the drop-down menu and click the \[ &gt; \] 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.  
        <div drawio-diagram="8001"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1740151171.png" alt=""/></div>
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.  
        <div drawio-diagram="8002"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1740151286.png" alt=""/></div>

<div class="contents" id="bkmrk--69"><div class="contents">  
</div></div><div class="contents" id="bkmrk--88"></div>

# GettingStartedControls Part 2

<div class="contents" id="bkmrk-climate-scene-settin"><div class="contents"><div class="textblock">  
</div></div></div>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:

<div class="contents" id="bkmrk--0"><div class="contents"><div class="textblock"><div class="image"><div drawio-diagram="1336"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1676530817.png" alt=""/></div>

</div></div></div></div>---

#### Preparing the Climate Scene

1. Create a new scene via the menu bar "Scene" - "New 2D Scene" or press &lt; Ctrl+2 &gt; 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.  
        <div drawio-diagram="8014"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1740742661.png" alt=""/></div>
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.

<div class="contents" id="bkmrk--6"><div class="contents"><div class="textblock"><div class="image">  
</div></div></div></div>#### 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 <span style="color: rgb(255, 128, 0);">[GridLayout](http://cgi3151en.candera.eu/books/layouter/page/types-of-layouters#bkmrk-grid-layouter)</span>.

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. <div drawio-diagram="8017"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1740746353.png" alt=""/></div>
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. <div drawio-diagram="8016"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1740746340.png" alt=""/></div>
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. <div drawio-diagram="8018"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1740747781.png" alt=""/></div>
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. <table border="1" class="align-center" style="border-collapse: collapse; border-width: 1px; width: 600px;"><colgroup><col style="width: 25%;"></col><col style="width: 25%;"></col><col style="width: 1%;"></col><col style="width: 25%;"></col><col style="width: 24%;"></col></colgroup><thead><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Column**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Width**</span></td><td>  
        </td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Row**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Width** </span></td></tr></thead><tbody><tr><td>Column 1  
        </td><td>0.05</td><td>  
        </td><td>Row 1</td><td>0.20</td></tr><tr><td>Column 2  
        </td><td>0.30</td><td>  
        </td><td>Row 2  
        </td><td>0.20</td></tr><tr><td>Column 3  
        </td><td>0.50</td><td>  
        </td><td>Row 3  
        </td><td>0.20</td></tr><tr><td>Column 4  
        </td><td>0.05  
        </td><td>  
        </td><td>Row 4  
        </td><td>0.20</td></tr><tr><td>  
        </td><td>  
        </td><td>  
        </td><td>Row 5  
        </td><td>0.20</td></tr><tr><td> </td><td> </td><td>  
        </td><td>Row 6  
        </td><td>0.20</td></tr></tbody></table>
5. When you're done configuring, press the \[OK\] button. 
    - The Grid Layout Editor will be closed. <p class="callout info">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.</p>
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.  
        <table border="1" class="align-center" id="bkmrk-target-item-setting-" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Target Item**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Setting Value**</span></td></tr><tr><td>Position X</td><td>0</td></tr><tr><td>Position Y</td><td>0</td></tr></tbody></table>
7. In the Properties panel's \[ Transformations \] section configure the following size of the GridLayout.
    
    <p class="callout info">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.</p>
    
    
    - The size of the GridLayout has changed.
    - The GridLayout's grid is now visible.  
        <table border="1" class="align-center" id="bkmrk-target-item-setting--1" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Target Item**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Setting Value**</span></td></tr><tr><td>Size X  
        </td><td>1024</td></tr><tr><td>Size Y</td><td>714</td></tr></tbody></table>
        
        <div drawio-diagram="8020"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-02/drawing-5-1740758687.png" alt=""/></div>
8. It is recommended to save the Scene Composer solution.

<div class="contents" id="bkmrk--10"></div>---

#### 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 "<span style="color: rgb(255, 128, 0);">[Text](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/common#bkmrk-text)</span>" 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. <div drawio-diagram="8025"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741335570.png" alt=""/></div>
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" ... <div drawio-diagram="8051"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741935184.png" alt=""/></div>
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. <div drawio-diagram="8038"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741344470.png" alt=""/></div>
8. In the Scene Tree panel select all "Text" nodes. Keeping the &lt;SHIFT&gt; 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.  
        <div drawio-diagram="8052"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741935250.png" alt=""/></div>
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 &lt;F2&gt; 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. <table border="1" class="align-center" id="bkmrk-target-item-name-tex" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 299.5px;"><span style="color: rgb(255, 255, 255);">**Target Item**</span></td><td style="background-color: rgb(53, 152, 219); width: 299.5px;"><span style="color: rgb(255, 255, 255);">**Name** </span></td></tr><tr><td style="width: 299.5px;">Text  
        </td><td style="width: 299.5px;">Text\_Temperature</td></tr><tr><td style="width: 299.5px;">Text\_1</td><td style="width: 299.5px;">Text\_Steering wheel heating</td></tr><tr><td style="width: 299.5px;">Text\_2</td><td style="width: 299.5px;">Text\_Air Condition  
        </td></tr><tr><td style="width: 299.5px;">Text\_3</td><td style="width: 299.5px;">Text\_Fan  
        </td></tr><tr><td style="width: 299.5px;">Text\_4</td><td style="width: 299.5px;">Text\_Seat heater  
        </td></tr><tr><td style="width: 299.5px;">Text\_5</td><td style="width: 299.5px;">Text\_Heating  
        </td></tr></tbody></table>
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. <table border="1" class="align-center" id="bkmrk-target-item-text-tex" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 299.5px;"><span style="color: rgb(255, 255, 255);">**Target Item** </span></td><td style="background-color: rgb(53, 152, 219); width: 299.5px;"><span style="color: rgb(255, 255, 255);">**Text**</span></td></tr><tr><td style="width: 299.5px;">Text\_Temperature</td><td style="width: 299.5px;">Temperature</td></tr><tr><td style="width: 299.5px;">Text\_Steering wheel heating</td><td style="width: 299.5px;">Steering wheel heating</td></tr><tr><td style="width: 299.5px;">Text\_Air Condition  
        </td><td style="width: 299.5px;">Air Condition  
        </td></tr><tr><td style="width: 299.5px;">Text\_Fan  
        </td><td style="width: 299.5px;">Fan  
        </td></tr><tr><td style="width: 299.5px;">Text\_Seat heater  
        </td><td style="width: 299.5px;">Seat heater  
        </td></tr><tr><td style="width: 299.5px;">Text\_Heating  
        </td><td style="width: 299.5px;">Heating  
        </td></tr></tbody></table>
        
        <div drawio-diagram="8050"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741934993.png" alt=""/></div>

#### 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 &gt; 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. <table border="1" class="align-center" id="bkmrk-import-resources-pat" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr style="height: 29.8px;"><td style="background-color: rgb(53, 152, 219); width: 137.5px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Import Resources** </span></td><td style="background-color: rgb(53, 152, 219); width: 461.5px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Path** </span></td></tr><tr style="height: 29.8px;"><td style="width: 137.5px; height: 29.8px;">  
        </td><td style="width: 461.5px; height: 29.8px;">/cgi\_studio\_content/Resources/GettingStartedControls/Climate</td></tr></tbody></table>
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.  
        <div drawio-diagram="8040"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741348711.png" alt=""/></div>

### 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 "<span style="color: rgb(255, 128, 0);">[GridLayout](http://cgi3151en.candera.eu/books/layouter/page/types-of-layouters#bkmrk-grid-layouter)</span>" 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 "<span style="color: rgb(255, 128, 0);">[Text Value](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/common#bkmrk-text-value)</span>" 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 "<span style="color: rgb(255, 128, 0);">[Button](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-button)</span>" controls and a "<span style="color: rgb(255, 128, 0);">[Slider](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-slider)</span>" 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 &lt;F2&gt; on your keyboard. 
    - In the Scene Tree panel the controls appear with their new names. <table border="1" class="align-center" id="bkmrk-target-item-name-gri" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Target Item** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Name**</span></td></tr><tr><td>GridLayout  
        </td><td>GridLayout\_Slider  
        </td></tr><tr><td>Text Value  
        </td><td>Text Value  
        </td></tr><tr><td>Button</td><td>Button\_TempDec</td></tr><tr><td>Button\_1</td><td>Button\_TempInc</td></tr><tr><td>Slider  
        </td><td>Slider\_Temperature  
        </td></tr></tbody></table>
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. <div drawio-diagram="8043"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741357031.png" alt=""/></div>
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. <div drawio-diagram="8044"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741358144.png" alt=""/></div>

#### 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 "<span style="color: rgb(255, 128, 0);">[Forward Value Behavior](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/value-processing-behaviors#bkmrk-forward-value)</span>" 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.  
        <table border="1" class="align-center" id="bkmrk-gauge-left-123" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="border-width: 1px; background-color: rgb(53, 152, 219);"><span style="color: white;">**Item Name**</span></td><td style="border-width: 1px; background-color: rgb(53, 152, 219);">**<span style="color: white;">Section  
        </span>**</td><td style="border-width: 1px; background-color: rgb(53, 152, 219);">**<span style="color: white;">Property</span>**</td><td style="border-width: 1px; background-color: rgb(53, 152, 219);">**<span style="color: white;">Value</span>**</td></tr><tr><td rowspan="2">Text Value</td><td>Control  
        </td><td>Format Text</td><td>%2.1f°C</td></tr><tr><td>Layout  
        </td><td>HorizontalAlignment  
        </td><td>HCenter  
        </td></tr></tbody></table>
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.  
        <table border="1" class="align-center" id="bkmrk-item-name-section-pr" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="border-width: 1px; background-color: rgb(53, 152, 219);"><span style="color: white;">**Item Name**</span></td><td style="border-width: 1px; background-color: rgb(53, 152, 219);">**<span style="color: white;">Section  
        </span>**</td><td style="border-width: 1px; background-color: rgb(53, 152, 219);">**<span style="color: white;">Property</span>**</td><td style="border-width: 1px; background-color: rgb(53, 152, 219);">**<span style="color: white;">Value</span>**</td></tr><tr><td rowspan="3">Slider\_Temperature</td><td>Control  
        </td><td>Value</td><td>22</td></tr><tr><td>  
        </td><td>Minimum</td><td>15</td></tr><tr><td>  
        </td><td>Maximum  
        </td><td>28  
        </td></tr></tbody></table>
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. <div drawio-diagram="8438"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-06/drawing-5-1749199710.png" alt=""/></div>
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.  
        <table border="1" class="align-center" id="bkmrk-targetnode-path-%C2%A0-%2Fs" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr style="height: 29.8px;"><td style="background-color: rgb(53, 152, 219); width: 137.5px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**TargetNode** </span></td><td style="background-color: rgb(53, 152, 219); width: 461.5px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Path** </span></td></tr><tr style="height: 29.8px;"><td style="width: 137.5px; height: 29.8px;"> </td><td style="width: 461.5px; height: 29.8px;">/Scenes/SceneClimate/GridLayout/GridLayout\_Slider/Text Value</td></tr></tbody></table>
9. Switch back to the Scene Editor and press the &lt;F5&gt; 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. <div drawio-diagram="8053"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741938346.png" alt=""/></div>

#### 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. <div drawio-diagram="8056"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741944782.png" alt=""/></div>
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.  
        <table border="1" class="align-center" id="bkmrk-target-item-property" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 125px;"><span style="color: white;">**Target Item** </span></td><td style="background-color: rgb(53, 152, 219); width: 125px;"><span style="color: white;">**Property** </span></td><td style="background-color: rgb(53, 152, 219); width: 350px;"><span style="color: white;">**Image**</span></td></tr><tr><td rowspan="2">Button\_TempDec</td><td>Normal Image  
        </td><td>/Resources/Climate/NewTempDecreaseBmp</td></tr><tr><td>Pressed Image  
        </td><td>/Resources/Climate/NewTempDecrease\_pressedBmp</td></tr></tbody></table>
        
        <div drawio-diagram="8054"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741944378.png" alt=""/></div>
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.  
        <table border="1" class="align-center" id="bkmrk-target-item-property-1" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 125px;"><span style="color: white;">**Target Item** </span></td><td style="background-color: rgb(53, 152, 219); width: 125px;"><span style="color: white;">**Property** </span></td><td style="background-color: rgb(53, 152, 219); width: 350px;"><span style="color: white;">**Image**</span></td></tr><tr><td rowspan="2">Button\_TempInc</td><td>Normal Image  
        </td><td>/Resources/Climate/NewTempIncreaseBmp</td></tr><tr><td>Pressed Image  
        </td><td>/Resources/Climate/NewTempIncreae\_pressedBmp</td></tr></tbody></table>
        
        <div drawio-diagram="8055"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741944431.png" alt=""/></div>
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. <table border="1" class="align-center" id="bkmrk-property-image-knob-" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 247.667px;"><span style="color: white;">**Property** </span></td><td style="background-color: rgb(53, 152, 219); width: 351.667px;"><span style="color: white;">**Image**</span></td></tr><tr><td style="width: 247.667px;">Knob Normal Image  
        </td><td style="width: 351.667px;">/Resources/Climate/NewSliderKnobBmp</td></tr><tr><td style="width: 247.667px;">Knob Pressed Image  
        </td><td style="width: 351.667px;">/Resources/Climate/NewSliderKnobPressedBmp  
        </td></tr><tr><td style="width: 247.667px;">Track Image  
        </td><td style="width: 351.667px;">/Resources/Climate/NewSliderBackgroundBmp</td></tr><tr><td style="width: 247.667px;">Track Fill Image  
        </td><td style="width: 351.667px;">/Resources/Climate/NewSliderBmp</td></tr></tbody></table>
        
        <div drawio-diagram="8062"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741951638.png" alt=""/></div>

### Configuration of Steering Wheel Heating CheckBox  


<div class="textblock" id="bkmrk-steering-wheel-heati-1">Steering wheel heating is easy to configure. It uses a simple <span style="color: rgb(255, 128, 0);">[CheckBox ](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-checkbox)</span>Control for turning the steering wheel heating on and off.  
</div><div class="textblock" id="bkmrk-from-the-toolbox-pan-2">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 &lt;F2&gt; 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. <table border="1" class="align-center" id="bkmrk-property-image-norma" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 221.667px;"><span style="color: white;">**Property** </span></td><td style="background-color: rgb(53, 152, 219); width: 377.667px;"><span style="color: white;">**Image**</span></td></tr><tr><td style="width: 221.667px;">Normal Image</td><td style="width: 377.667px;">/Resources/Climate/NewCheckBoxDeselectedBmp</td></tr><tr><td style="width: 221.667px;">Pressed Image</td><td style="width: 377.667px;">/Resources/Climate/NewCheckBoxDeselectedPressedBmp  
        </td></tr><tr><td style="width: 221.667px;">Selected Image</td><td style="width: 377.667px;">/Resources/Climate/NewCheckBoxSelectedBmp</td></tr><tr><td style="width: 221.667px;">Selected Pressed Image</td><td style="width: 377.667px;">/Resources/Climate/NewCheckBoxSelectedPressedBmp</td></tr></tbody></table>
        
        <div drawio-diagram="8061"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741951610.png" alt=""/></div>

</div>### Configuration of Air Conditioning RadioButtons

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

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

#### Setting up the Air Conditioning Controls

In this section we focus on the Radio Buttons for Air Condition (AC). Two [<span style="color: rgb(255, 128, 0);">Radio Buttons </span>](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-radiobutton)are configured inside a horizontal <span style="color: rgb(255, 128, 0);">[Stack Layout](http://cgi3151en.candera.eu/books/scene-design/page/2d-laying-out#bkmrk-stack-layouter)</span>. They are grouped together in a <span style="color: rgb(255, 128, 0);">[GroupBox ](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/container "Container")</span>to help with the RadioButtons' functionality.

<div class="textblock" id="bkmrk-from-the-toolbox-pan-3"><div class="contents"><div class="contents"><div class="textblock"><div class="image">1. From the Toolbox panel's \[ Controls \] section under "Container" drag and drop a "<span style="color: rgb(255, 128, 0);">[GroupBox](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/container "Container")</span>" 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". <div drawio-diagram="8066"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741958892.png" alt=""/></div>
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 &lt;F2&gt; on your keyboard. 
    - In the Scene Tree panel, "RadioButton\_AC On" and "RadioButton\_AC Off" can be seen as in the image below. <table border="1" class="align-center" id="bkmrk-target-item-name-gro" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Target Item** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Name**</span></td></tr><tr><td>GroupBox</td><td>GroupBox\_AC</td></tr><tr><td>RadioButton</td><td>RadioButton\_AC Off</td></tr><tr><td>RadioButton\_1</td><td>RadioButton\_AC On</td></tr></tbody></table>
        
        <div drawio-diagram="8065"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741957809.png" alt=""/></div>
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". <div drawio-diagram="8067"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741965425.png" alt=""/></div>
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.

</div></div></div></div></div>#### Configure the Air Conditioning RadioButtons

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

<p class="callout info">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.</p>

<div class="textblock" id="bkmrk-in-the-scene-tree-pa-2"><div class="contents"><div class="contents"><div class="textblock"><div class="image">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. <table border="1" class="align-center" id="bkmrk-target-item-text-rad" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Target Item** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Text**</span></td></tr><tr><td>RadioButton\_AC On  
        </td><td>On</td></tr><tr><td>RadioButton\_AC Off  
        </td><td>Off</td></tr></tbody></table>
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 &lt;Shift&gt; 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. <table border="1" class="align-center" id="bkmrk-property-image-norma-1" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 209.667px;"><span style="color: white;">**Property** </span></td><td style="background-color: rgb(53, 152, 219); width: 389.667px;"><span style="color: white;">**Image**</span></td></tr><tr><td style="width: 209.667px;">Normal Image</td><td style="width: 389.667px;">/Resources/Climate/NewRadioButtonNormalBmp</td></tr><tr><td style="width: 209.667px;">Pressed Image</td><td style="width: 389.667px;">/Resources/Climate/NewRadioButtonNormalPressedBmp  
        </td></tr><tr><td style="width: 209.667px;">Selected Image</td><td style="width: 389.667px;">/Resources/Climate/NewRadioButtonActivatedBmp</td></tr><tr><td style="width: 209.667px;">Selected Pressed Image</td><td style="width: 389.667px;">/Resources/Climate/NewRadioButtonActivatedPressedBmp</td></tr></tbody></table>
        
        <div drawio-diagram="8070"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741966676.png" alt=""/></div>
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.  
        <table border="1" class="align-center" id="bkmrk-margin-value-left-0-" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Margin** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Value**</span></td></tr><tr><td>Left</td><td>0</td></tr><tr><td>Top</td><td>0</td></tr><tr><td>Right</td><td>100</td></tr><tr><td>Bottom</td><td>0</td></tr></tbody></table>
        
        <div drawio-diagram="8071"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1741968565.png" alt=""/></div>

</div></div></div></div></div><div class="textblock" id="bkmrk--50"><div class="contents" id="bkmrk--61"><div class="contents">  
</div></div></div>### Configuration of Fan Controls

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

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

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

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

#### Setting up the Fan Controls

<div class="textblock" id="bkmrk-from-the-toolbox-pan-4"><div class="contents"><div class="contents">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 <span style="color: rgb(255, 128, 0);">[MultiStateButton ](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-multistatebutton)</span>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 <span style="color: rgb(0, 0, 0);">MultiStateButton </span>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 &lt;Shift&gt;-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 &lt;F2&gt; on your keyboard. 
    - In the Scene Tree panel the newly created Controls appear as in the image below. <table border="1" class="align-center" id="bkmrk-target-item-name-gri-1" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Target Item** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Name**</span></td></tr><tr><td>GridLayout</td><td>GridLayout\_Fan</td></tr><tr><td>Button</td><td>Button\_Fan Off</td></tr><tr><td>Button\_1</td><td>Button\_Fan Max</td></tr><tr><td>MultiStateButton  
        </td><td>MultiStateButton\_Fan  
        </td></tr></tbody></table>
        
        <div drawio-diagram="8149"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1742547308.png" alt=""/></div>
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.

</div></div></div>#### Configuring GridLayout\_Fan

<div class="textblock" id="bkmrk-in-the-scene-tree-pa-3"><div class="contents" id="bkmrk--65"><div class="contents">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. <div drawio-diagram="8155"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1742553022.png" alt=""/></div>

</div></div></div>#### Configuring MultiStateButton\_Fan  


1. In the Properties panel's \[ Control \] section set "Maximum State" to the value of "7". 
    - In the properties panel the Maximum State property is set to 7.
2. In the Properties panel's \[ Control \] section click on the "StateImages" property. 
    - In the Properties panel the StateImage property will be expanded.
3. Press the \[ + \] button on the right of the "StateImages" property until there are 8 StateImages in the list below. 
    - In the Properties panel the list of StateImages will consist of entries from "StateImages 0" to "StateImages 7".
4. In the Properties panel click on the magnifying glass next to "StateImages 0". 
    - The "Choose Item" dialog will be opened.
5. In the Choose Item dialog navigate to "/Resources/Climate/NewClimate-0Bmp", select this image and click \[OK\]. 
    - In the Properties panel the first StateImage has been configured.
6. Repeat steps 4 and 5 to configure the remaining StateImages as in the table below. 
    - In Properties panel all StateImages are configured.
    - In Scene Editor you can see the newly configured images.
    - <p class="callout info">If the new images are not visible try refreshing the screen by pressing the &lt;F5&gt; key on your keyboard.</p>
        
        <table border="1" class="align-center" id="bkmrk-stateimages-image-pa" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**StateImages** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Image Path** </span></td></tr><tr><td>StateImages 0</td><td>/Resources/Climate/NewClimate-0Bmp</td></tr><tr><td>StateImages 1  
        </td><td>/Resources/Climate/NewClimate-1Bmp</td></tr><tr><td>StateImages 2  
        </td><td>/Resources/Climate/NewClimate-2Bmp</td></tr><tr><td>StateImages 3  
        </td><td>/Resources/Climate/NewClimate-3Bmp</td></tr><tr><td>StateImages 4  
        </td><td>/Resources/Climate/NewClimate-4Bmp</td></tr><tr><td>StateImages 5  
        </td><td>/Resources/Climate/NewClimate-5Bmp</td></tr><tr><td>StateImages 6  
        </td><td>/Resources/Climate/NewClimate-6Bmp</td></tr><tr><td>StateImages 7  
        </td><td>/Resources/Climate/NewClimate-7Bmp</td></tr></tbody></table>
        
        <div drawio-diagram="8154"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1742552581.png" alt=""/></div>

#### 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.  
        <table border="1" class="align-center" id="bkmrk-target-item-property-2" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 130px;"><span style="color: white;">**Target Item** </span></td><td style="background-color: rgb(53, 152, 219); width: 130px;"><span style="color: white;">**Property** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Image Path**</span></td></tr><tr><td rowspan="2">Button\_Fan Off</td><td>Normal Image</td><td>/Resources/Climate/NewButton offBmp</td></tr><tr><td>Pressed Image  
        </td><td>/Resources/Climate/NewButton offselectedBmp</td></tr><tr><td rowspan="2">Button\_Fan Max</td><td>Normal Image  
        </td><td>/Resources/Climate/NewButton maxBmp</td></tr><tr><td>Pressed Image  
        </td><td>/Resources/Climate/NewButton max\_selectedBmp</td></tr></tbody></table>
        
        <div drawio-diagram="8156"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1742556198.png" alt=""/></div>

#### Add Interactivity to Fan Controls  


<div class="textblock" id="bkmrk--59"><div class="contents" id="bkmrk--70"><div class="contents"><div class="textblock">  
</div></div></div></div><div class="textblock" id="bkmrk-in-scene-tree-panel-"><div class="contents"><div class="contents"><div class="textblock"><div class="image">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. <div drawio-diagram="8440"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-06/drawing-5-1749209005.png" alt=""/></div>
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 "<span style="color: rgb(255, 128, 0);">[Send Value as Event](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/action-behaviors#bkmrk-send-value-as-event)</span>". 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.  
        <table border="1" class="align-center" id="bkmrk-button_fan-off-fusio" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr style="height: 29.8px;"><td style="background-color: rgb(53, 152, 219); width: 129.583px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Fusion diagram of   
        Button\_Fan Off**</span></td><td style="background-color: rgb(53, 152, 219); width: 469.75px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Send Value As Event Fusion Node** </span></td></tr><tr style="height: 29.8px;"><td style="width: 129.583px; height: 29.8px;"> TargetNode</td><td style="width: 469.75px; height: 29.8px;">/Scenes/SceneClimate/GridLayout/GridLayout\_Fan/MultiStateButton\_Fan</td></tr><tr><td style="width: 129.583px;">Value  
        </td><td style="width: 469.75px;">Float 0.00  
        </td></tr></tbody></table>
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. <table border="1" class="align-center" id="bkmrk-button_fan-off-fusio-1" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr style="height: 29.8px;"><td style="background-color: rgb(53, 152, 219); width: 129.583px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Fusion diagram of   
        Button\_Fan Max**</span></td><td style="background-color: rgb(53, 152, 219); width: 469.75px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Send Value As Event Fusion Node** </span></td></tr><tr style="height: 29.8px;"><td style="width: 129.583px; height: 29.8px;"> TargetNode</td><td style="width: 469.75px; height: 29.8px;">/Scenes/SceneClimate/GridLayout/GridLayout\_Fan/MultiStateButton\_Fan</td></tr><tr><td style="width: 129.583px;">Value  
        </td><td style="width: 469.75px;">Float 7.00  
        </td></tr></tbody></table>
        
        <div drawio-diagram="8441"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-06/drawing-5-1749210399.png" alt=""/></div>

</div></div></div></div></div>### Configuration of Seat Heater MultiStateButton

<div class="textblock" id="bkmrk-from-the-toolbox-pan-5"><div class="contents"><div class="contents"><div class="textblock"><div class="image">1. From the ToolBox panel's \[ Controls \] section under "Touchable" drag and drop 1 <span style="color: rgb(255, 128, 0);">[MultiStateButton ](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-multistatebutton)</span>into the Scene Tree panel directly onto the scene's GridLayout.  
    
    - In the Scene Tree panel you can see that a <span style="color: rgb(0, 0, 0);">MultiStateButton </span>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 &lt;F2&gt; 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. <div drawio-diagram="8161"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1742565408.png" alt=""/></div>
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.
    - <p class="callout info">If the new images are not visible try refreshing the screen by pressing the &lt;F5&gt; key on your keyboard.</p>
        
        <table border="1" class="align-center" id="bkmrk-stateimages-image-pa-1" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**StateImages** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Image Path** </span></td></tr><tr><td>StateImages 0</td><td>/Resources/Climate/NewButtonState1Bmp</td></tr><tr><td>StateImages 1  
        </td><td>/Resources/Climate/NewButtonState2Bmp</td></tr><tr><td>StateImages 2  
        </td><td>/Resources/Climate/NewButtonState3Bmp</td></tr><tr><td>StateImages 3  
        </td><td>/Resources/Climate/NewButtonState4Bmp</td></tr></tbody></table>
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.  
        <div drawio-diagram="8192"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1743147149.png" alt=""/></div>

</div></div></div></div></div>### Configuration of Heating SpinBox  


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

<div class="textblock" id="bkmrk-from-the-toolbox-pan-6"><div class="contents"><div class="contents"><div class="textblock"><div class="image">1. From the Toolbox panel's \[ Controls \] section under "Touchable" drag and drop a <span style="color: rgb(255, 128, 0);">[SpinBox ](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-spinbox)</span>into the Scene Tree directly onto the scene's GridLayout.  
    
    - In the Scene Tree panel you can see that SpinBox<span style="color: rgb(0, 0, 0);"> </span>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 &lt;F2&gt; 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".   
    
    - <p class="callout info">To change the Size's X property you might have to click the disabled \[ A \] button first.</p>
    - In the Scene Editor SpinBox\_Heating is displayed vertically centered inside its cell and its width is reduced to 150px. <table border="1" class="align-center" id="bkmrk-target-item-value-ve" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Target Item** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Value** </span></td></tr><tr><td>Vertical Alignment</td><td>VCenter</td></tr><tr><td>Size X</td><td>150,00</td></tr></tbody></table>
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".
    - <p class="callout info">If the displayed value doesn't change to "22°C" try refreshing the screen by pressing the &lt;F5&gt; key on your keyboard</p>
        
        <table border="1" class="align-center" id="bkmrk-target-item-value-va" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Target Item** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Value** </span></td></tr><tr><td>Value</td><td>Float 22.00</td></tr><tr><td>Minimum Value</td><td>Float 15,00</td></tr><tr><td>Maximum Value</td><td>Float 28,00</td></tr><tr><td>Text Format</td><td>%02d°C</td></tr></tbody></table>
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.  
        <table border="1" class="align-center" id="bkmrk-target-item-value-ar" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 200px;"><span style="color: white;">**Target Item** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Value** </span></td></tr><tr><td>Arrow Up Normal Image</td><td>/Resources/Climate/New\_arrow\_incrementBmp</td></tr><tr><td>Arrow Up Pressed Image</td><td>/Resources/Climate/New\_arrow\_increment\_activeBmp</td></tr><tr><td>Arrow Down Normal Image</td><td>/Resources/Climate/New\_arrow\_decrementBmp</td></tr><tr><td>Arrow Down Pressed Image</td><td>/Resources/Climate/New\_arrow\_decrement\_activeBmp</td></tr></tbody></table>
        
        <div drawio-diagram="8164"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1742571558.png" alt=""/></div>

</div></div></div></div></div>### Check the Climate Scene  


<div class="textblock" id="bkmrk--83"><div class="contents" id="bkmrk--144"><div class="contents"><div class="textblock"><div class="image">The Climate scene is now finished.</div><div class="image">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. <div drawio-diagram="8193"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1743147225.png" alt=""/></div>
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 \[ &gt; \] 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. <div drawio-diagram="8171"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1742573876.png" alt=""/></div>
3. In the CGI Panel tick the checkbox next to "Scenes#SceneClimate" and uncheck "Scenes#SceneHome". 
    - SceneClimate will become visible in the Player. <div drawio-diagram="8194"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1743147304.png" alt=""/></div>
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

</div></div></div></div></div>

# GettingStartedControls Part 3

In Part 3 of the GettingStartedControls Sample we will create a (Phone Connection) Options scene. This scene offers the possibility to choose the connection type (Cable, Bluetooth and other) from a <span style="color: rgb(255, 128, 0);">[<span style="color: rgb(255, 128, 0);">Dial</span>](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-dial) </span>Control on the left side. The right side displays a <span style="color: rgb(255, 128, 0);">[List](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-list)</span> of devices. When a device gets selected, an associated <span style="color: rgb(255, 128, 0);">[Sub-List](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-sub-list)</span> Control with two TextButtons will be shown.

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

And this is what the final scene will look like:

<div class="contents" id="bkmrk--0"><div class="contents"><div class="textblock"><div class="image"><div drawio-diagram="8379"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1745577307.png" alt=""/></div>

</div></div></div></div>---

### Preparing the Options scene  


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

1. Create a new scene via the menu bar "Scene" - "New 2D Scene" or press &lt; Ctrl+2 &gt; on your keyboard  
    
    - The "Add New Scene 2D" dialog will be opened.
2. In the first row select "/Scenes" from the drop-down menu. Enter "SceneOptions" as name and press **\[OK\]**. We use the prefix "Scene" to have all scenes listed next to each other in the Solution Explorer panel. 
    - A new scene "SceneOptions" is created and visible in the Solution Explorer panel in folder "Scenes".
    - The new scene is opened in the Scene Editor and in the Scene Tree panel.
    - In the Scene Tree panel you can see that the scene already has a camera.
    - In the Render Targets panel you can see that the camera is already added to the RenderTarget. <div drawio-diagram="8197"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1743151576.png" alt=""/></div>
3. In the Render Targets panel check the checkbox of "SceneOptions\\Camera" in order to enable rendering. 
    - Rendering of the scene is enabled.
4. In the Render Targets panel select the SceneOptions\\Camera. In the Properties panel's **\[Camera\]** section change the sequence number to 2. 
    - The camera's sequence number is set to 2.
    - In the Scene Tree panel the red Information/Warning/Error square disappears. <div drawio-diagram="8200"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1743153260.png" alt=""/></div>

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

<div class="contents" id="bkmrk-in-the-main-menu-sel"><div class="contents"><div class="textblock"><div class="image">1. In the menu bar select Import &gt; 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. <table border="1" class="align-center" id="bkmrk-import-resources-pat" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr style="height: 29.8px;"><td style="background-color: rgb(53, 152, 219); width: 137.5px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Import Resources** </span></td><td style="background-color: rgb(53, 152, 219); width: 461.5px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Path** </span></td></tr><tr style="height: 29.8px;"><td style="width: 137.5px; height: 29.8px;">  
        </td><td style="width: 461.5px; height: 29.8px;">/cgi\_studio\_content/Resources/GettingStartedControls/Options</td></tr></tbody></table>
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. <div drawio-diagram="8201"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1743158462.png" alt=""/></div>

</div></div></div></div>### Configuring the Background  


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

1. From the Toolbox panel's **\[Node 2D\]** section drag a <span style="color: rgb(255, 128, 0);">[2D Group](http://cgi3151en.candera.eu/books/scene-design/page/2d-nodes#bkmrk-create-2d-nodes)</span> node into the Scene Tree directly onto the node "SceneOptions". 
    - In the Scene Tree panel you can see a 2D Group node.
2. From the Toolbox panel's **\[Node 2D\]** section drag a <span style="color: rgb(255, 128, 0);">[BitmapNodes](http://cgi3151en.candera.eu/books/scene-design/page/2d-nodes#bkmrk-create-2d-nodes)</span> onto the 2D Group node. 
    - In the Scene Tree panel you can see that a BitmapNodes has been created.
3. In the Scene Tree panel select the 2D Group and create a copy either via the context menu entries "Copy" and "Paste" or via the keyboard &lt;Ctrl&gt;+C and &lt;Ctrl&gt;+V. 
    - A copy of the 2D Group with its BitmapNode has been created.
    - In Scene Tree panel the name of the copy is "Group\_1".
4. In the Scene Tree panel select the nodes added in the steps before one after the other and rename them either via the context menu entry "Rename" or by pressing &lt;F2&gt; on your keyboard. Apply the names provided in the table below. 
    - In the Scene Tree panel you can see that the nodes have been renamed. <table border="1" class="align-center" id="bkmrk-target-item-name-tex" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td colspan="2" style="background-color: rgb(53, 152, 219); width: 228.767px;"><span style="color: rgb(255, 255, 255);">**Target Item**</span></td><td style="background-color: rgb(53, 152, 219); width: 370.567px;"><span style="color: rgb(255, 255, 255);">**Name** </span></td></tr><tr><td style="width: 99.8833px;">Group</td><td style="width: 128.883px;">  
        </td><td style="width: 370.567px;">Connection</td></tr><tr><td style="width: 99.8833px;"> </td><td style="width: 128.883px;">BitmapNode</td><td style="width: 370.567px;">Background</td></tr><tr><td style="width: 99.8833px;">Group\_1</td><td style="width: 128.883px;">  
        </td><td style="width: 370.567px;">Devices</td></tr><tr><td style="width: 99.8833px;"> </td><td style="width: 128.883px;">BitmapNode</td><td style="width: 370.567px;">Background</td></tr></tbody></table>
        
        <div drawio-diagram="8203"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1743165446.png" alt=""/></div>
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.  
        <div drawio-diagram="8580"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-09/drawing-5-1757661495.png" alt=""/></div>
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. <table border="1" class="align-center" id="bkmrk-property-path-image-" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr style="height: 29.8px;"><td style="background-color: rgb(53, 152, 219); width: 107.783px;"><span style="color: rgb(255, 255, 255);">**Node**</span></td><td style="background-color: rgb(53, 152, 219); width: 124.383px;"><span style="color: rgb(255, 255, 255);">**Effect**</span></td><td style="background-color: rgb(53, 152, 219); width: 85.3833px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Property** </span></td><td style="background-color: rgb(53, 152, 219); width: 281.783px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Path** </span></td></tr><tr style="height: 29.8px;"><td style="width: 107.783px;">Connection &gt; Background</td><td style="width: 124.383px;">BitmapBrush Blend</td><td style="width: 85.3833px; height: 29.8px;">Image  
        </td><td style="width: 281.783px; height: 29.8px;">/Resources/Options/ConnectionOptionsENBOSBmp</td></tr><tr><td style="width: 107.783px;">Connection &gt; Background</td><td style="width: 124.383px;">BitmapBrush Blend</td><td style="width: 85.3833px; height: 29.8px;">Image  
        </td><td style="width: 281.783px; height: 29.8px;">/Resources/Options/ConnectionOptionsENBOSBmp</td></tr></tbody></table>
        
        <div drawio-diagram="8207"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1743171365.png" alt=""/></div>
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. <table border="1" class="align-center" id="bkmrk-target-name-position" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr style="height: 29.8px;"><td style="background-color: rgb(53, 152, 219); width: 137.583px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Target Name** </span></td><td style="background-color: rgb(53, 152, 219); width: 230.883px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Position X** </span></td><td style="background-color: rgb(53, 152, 219); width: 230.867px;"><span style="color: rgb(255, 255, 255);">**Position Y** </span></td></tr><tr style="height: 29.8px;"><td style="width: 137.583px; height: 29.8px;">Connection
        
        </td><td style="width: 230.883px; height: 29.8px;">78.00  
        </td><td style="width: 230.867px;">58.00  
        </td></tr><tr><td style="width: 137.583px;">Devices
        
        </td><td style="width: 230.883px;">551.00  
        </td><td style="width: 230.867px;">58.00  
        </td></tr></tbody></table>
        
        <div drawio-diagram="8208"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1743172201.png" alt=""/></div>

### 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 <span style="color: rgb(255, 128, 0);">[Dial](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-dial)</span> 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. <table border="1" class="align-center" id="bkmrk-target-name-position-1" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr style="height: 29.8px;"><td style="background-color: rgb(53, 152, 219); width: 137.583px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Target Name** </span></td><td style="background-color: rgb(53, 152, 219); width: 230.883px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Position X** </span></td><td style="background-color: rgb(53, 152, 219); width: 230.867px;"><span style="color: rgb(255, 255, 255);">**Position Y** </span></td></tr><tr style="height: 29.8px;"><td style="width: 137.583px; height: 29.8px;">Dial
        
        </td><td style="width: 230.883px; height: 29.8px;">72.00  
        </td><td style="width: 230.867px;">163.00  
        </td></tr></tbody></table>

#### 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. <table border="1" class="align-center" id="bkmrk-property-path-knob-i" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr style="height: 29.8px;"><td style="background-color: rgb(53, 152, 219); width: 137.5px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Property** </span></td><td style="background-color: rgb(53, 152, 219); width: 461.5px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Path** </span></td></tr><tr style="height: 29.8px;"><td style="width: 137.5px; height: 29.8px;">Knob Image  
        </td><td style="width: 461.5px; height: 29.8px;">/Resources/Options/NewDial\_arrow\_middleBmp</td></tr></tbody></table>
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. <table border="1" class="align-center" id="bkmrk-property-path-backgr" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr style="height: 29.8px;"><td style="background-color: rgb(53, 152, 219); width: 149.583px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Property** </span></td><td style="background-color: rgb(53, 152, 219); width: 449.75px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Path** </span></td></tr><tr style="height: 29.8px;"><td style="width: 149.583px; height: 29.8px;">BackgroundImages 0  
        </td><td style="width: 449.75px; height: 29.8px;">/Resources/Options/NewDial\_background\_leftBmp</td></tr></tbody></table>
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. <p class="callout info">If the new images are not visible try refreshing the screen by pressing the &lt;F5&gt; key on your keyboard.</p>
        
        <table border="1" class="align-center" id="bkmrk-stateimages-image-pa" style="border-collapse: collapse; width: 600px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 205.667px;"><span style="color: white;">**StateImages** </span></td><td style="background-color: rgb(53, 152, 219); width: 393.667px;"><span style="color: white;">**Image Path** </span></td></tr><tr><td style="width: 205.667px;">BackgroundImages 0</td><td style="width: 393.667px;">/Resources/Options/NewDial\_background\_leftBmp</td></tr><tr><td style="width: 205.667px;">BackgroundImages 1  
        </td><td style="width: 393.667px;">/Resources/Options/NewDial\_background\_middleBmp</td></tr><tr><td style="width: 205.667px;">BackgroundImages 2  
        </td><td style="width: 393.667px;">/Resources/Options/NewDial\_background\_rightBmp</td></tr></tbody></table>
        
        <div drawio-diagram="8209"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1743176307.png" alt=""/></div>
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. <table border="1" class="align-center" id="bkmrk-target-name-enable-p" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 300px;"><span style="color: rgb(255, 255, 255);">**Target Name** </span></td><td style="background-color: rgb(53, 152, 219); width: 100px;"><span style="color: rgb(255, 255, 255);">**Enable Pivot Hint**</span></td><td style="background-color: rgb(53, 152, 219); width: 100px;"><span style="color: rgb(255, 255, 255);">**Pivot Hint X** </span></td><td style="background-color: rgb(53, 152, 219); width: 100px;"><span style="color: rgb(255, 255, 255);">**Pivot Hint Y** </span></td></tr><tr><td>NewDial\_arrow\_middleBmp</td><td>true</td><td>84,50  
        </td><td>88,00
        
        </td></tr></tbody></table>
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. <p class="callout info">If the the images are still not aligned correctly try refreshing the screen by pressing the &lt;F5&gt; key on your keyboard.</p>
        
        <table border="1" class="align-center" id="bkmrk-target-name-enable-p-1" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 300px;"><span style="color: rgb(255, 255, 255);">**Target Name** </span></td><td style="background-color: rgb(53, 152, 219); width: 100px;"><span style="color: rgb(255, 255, 255);">**Enable Pivot Hint**</span></td><td style="background-color: rgb(53, 152, 219); width: 100px;"><span style="color: rgb(255, 255, 255);">**Pivot Hint X** </span></td><td style="background-color: rgb(53, 152, 219); width: 100px;"><span style="color: rgb(255, 255, 255);">**Pivot Hint Y** </span></td></tr><tr><td>NewDial\_background\_leftBmp</td><td>true  
        </td><td>130,50  
        </td><td>130,50</td></tr><tr><td>NewDial\_background\_middleBmp</td><td>true  
        </td><td>130,50</td><td>130,50</td></tr><tr><td>NewDial\_Background\_rightBmp</td><td>true  
        </td><td>130,50</td><td>130,50</td></tr></tbody></table>

#### 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 <span style="color: rgb(255, 128, 0);">[TextNode ](http://cgi3151en.candera.eu/books/scene-design/page/2d-nodes#bkmrk-create-2d-nodes)</span>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. <p class="callout info">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&amp;drop.  
        </p>
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.  
        <div drawio-diagram="8211"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1743178223.png" alt=""/></div>
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. <table border="1" class="align-center" id="bkmrk-textnode-name-2d-tex" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr><td rowspan="2" style="background-color: rgb(53, 152, 219); width: 250px;"><span style="color: rgb(255, 255, 255);">**TextNode Name**</span></td><td style="background-color: rgb(53, 152, 219); width: 150px;"><span style="color: rgb(255, 255, 255);">**2D Text Node**</span></td><td colspan="2" style="background-color: rgb(53, 152, 219); width: 200px;"><span style="color: rgb(255, 255, 255);">**Transformations**</span></td></tr><tr><td style="background-color: rgb(53, 152, 219); width: 150px;"><span style="color: rgb(255, 255, 255);">**Text**</span></td><td style="background-color: rgb(53, 152, 219); width: 100px;"><span style="color: rgb(255, 255, 255);">**Position X**</span></td><td style="background-color: rgb(53, 152, 219); width: 100px;"><span style="color: rgb(255, 255, 255);">**Position Y**</span></td></tr><tr><td style="width: 250px;">TextNode\_Connection</td><td style="width: 150px;">Connection</td><td style="width: 100px;">141</td><td style="width: 100px;">61</td></tr><tr><td>TextNode\_Bluetooth</td><td>Bluetooth</td><td>149</td><td>134</td></tr><tr><td>TextNode\_Cable</td><td>Cable</td><td>20</td><td>200</td></tr><tr><td>TextNode\_Other</td><td>Other</td><td>315</td><td>200</td></tr></tbody></table>
        
        <div drawio-diagram="8219"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1743180340.png" alt=""/></div>

<div class="contents" id="bkmrk--21"><div class="contents"><div class="textblock">  
</div></div></div>### 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 &lt;Ctrl + C&gt;. Paste the TextNode into the Devices Group2D either via the context menu "Paste" or via the keyboard shortcut &lt;Ctrl + V&gt;.  
    
    - 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 &lt;F2&gt;. 
    - 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. <table border="1" class="align-center" id="bkmrk-textnode-name-2d-tex-1" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr><td rowspan="2" style="background-color: rgb(53, 152, 219); width: 250px;"><span style="color: rgb(255, 255, 255);">**TextNode Name**</span></td><td style="background-color: rgb(53, 152, 219); width: 150px;"><span style="color: rgb(255, 255, 255);">**2D Text Node**</span></td><td colspan="2" style="background-color: rgb(53, 152, 219); width: 200px;"><span style="color: rgb(255, 255, 255);">**Transformations**</span></td></tr><tr><td style="background-color: rgb(53, 152, 219); width: 150px;"><span style="color: rgb(255, 255, 255);">**Text**</span></td><td style="background-color: rgb(53, 152, 219); width: 100px;"><span style="color: rgb(255, 255, 255);">**Position X**</span></td><td style="background-color: rgb(53, 152, 219); width: 100px;"><span style="color: rgb(255, 255, 255);">**Position Y**</span></td></tr><tr><td style="width: 250px;">TextNode\_Devices</td><td style="width: 150px;">Devices</td><td style="width: 100px;">145</td><td style="width: 100px;">61</td></tr></tbody></table>
4. From the Toolbox panel's **\[Control\]** section under "Touchable" drag a <span style="color: rgb(255, 128, 0);">[List ](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-list)</span>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. <div drawio-diagram="8375"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1745575189.png" alt=""/></div>
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)".
        
        <div drawio-diagram="8245"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1743764698.png" alt=""/></div>

### 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. <div drawio-diagram="8240"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1743758575.png" alt=""/></div>
2. In the "Configure Public Control Properties" dialog's tree on the left side select the following item MyList &gt; List &gt; Scrollbar &gt; Behaviors &gt; 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.  
        <div drawio-diagram="8241"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1743759778.png" alt=""/></div>
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.  
        <div drawio-diagram="8243"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1743763279.png" alt=""/></div>
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.  
        <div drawio-diagram="8377"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1745575444.png" alt=""/></div>

#### 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. <table border="1" class="align-center" id="bkmrk-mylist-%3E-list-%3E-scro" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col width="200px"></col> <col width="400px"></col> </colgroup><tbody><tr><td colspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: white;">MyList &gt; List &gt; Scrollbar &gt; **Thumb** </span></td></tr><tr><td style="background-color: rgb(53, 152, 219); width: 150px;"><span style="color: white;">**Thumb Images** </span></td><td style="background-color: rgb(53, 152, 219); width: 450px;"><span style="color: white;">**Image Path** </span></td></tr><tr><td>Normal Image</td><td>/Resources/Options/ThumbNormalBmp2Bmp</td></tr><tr><td>Pressed Image</td><td>/Resources/Options/ThumbPressedBmp2Bmp</td></tr><tr><td>Focused Image</td><td>/Resources/Options/ThumbNormalBmp2Bmp</td></tr></tbody></table>
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. <table border="1" class="align-center" id="bkmrk-mylist-%3E-list-%3E-scro-1" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col width="200px"></col> <col width="400px"></col> </colgroup><tbody><tr><td colspan="2" style="background-color: rgb(53, 152, 219); width: 599.334px;"><span style="color: white;">MyList &gt; List &gt; Scrollbar &gt; PrevItem &gt; **VerticalPrevItem**</span></td></tr><tr><td style="background-color: rgb(53, 152, 219); width: 150px;"><span style="color: white;">**VerticalPrevItem Images** </span></td><td style="background-color: rgb(53, 152, 219); width: 450px;"><span style="color: white;">**Image Path** </span></td></tr><tr><td>Normal Image</td><td>/Resources/Options/ArrowUpNormalBmp2Bmp</td></tr><tr><td>Pressed Image</td><td>/Resources/Options/ArrowUpPressedBmp2Bmp</td></tr><tr><td>Focused Image</td><td>/Resources/Options/ArrowUpNormalBmp2Bmp</td></tr></tbody></table>
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. <table border="1" class="align-center" id="bkmrk-mylist-%3E-list-%3E-scro-2" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col width="200px"></col> <col width="400px"></col> </colgroup><tbody><tr><td colspan="2" style="background-color: rgb(53, 152, 219); width: 150px;"><span style="color: white;">MyList &gt; List &gt; Scrollbar &gt; NextItem &gt; **VerticalNextItem**</span></td></tr><tr><td style="background-color: rgb(53, 152, 219); width: 150px;"><span style="color: white;">**VerticalNextItem Images** </span></td><td style="background-color: rgb(53, 152, 219); width: 450px;"><span style="color: white;">**Image Path** </span></td></tr><tr><td>Normal Image</td><td>/Resources/Options/ArrowDownNormalBmp2Bmp</td></tr><tr><td>Pressed Image</td><td>/Resources/Options/ArrowDownPressedBmp2Bmp</td></tr><tr><td>Focused Image</td><td>/Resources/Options/ArrowDownNormalBmp2Bmp</td></tr></tbody></table>
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.  
        <div drawio-diagram="8253"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1743776784.png" alt=""/></div>

#### 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 <span style="color: rgb(255, 128, 0);">[OverlayLayout ](http://cgi3151en.candera.eu/books/scene-design/page/2d-laying-out#bkmrk-overlay-layouter)</span>into the Scene Tree panel directly onto the List's "ListContentGroup" (MyList &gt; List &gt; ListContentGroup). 
    - In the Scene Tree panel there is an OverlayLayout inside of "ListContentGroup".
3. From the Toolbox panel's **\[2D Nodes\]** section drag a <span style="color: rgb(255, 128, 0);">[RenderNode ](http://cgi3151en.candera.eu/books/scene-design/page/2d-nodes#bkmrk-create-2d-nodes)</span>and a <span style="color: rgb(255, 128, 0);">[TextNode ](http://cgi3151en.candera.eu/books/scene-design/page/2d-nodes#bkmrk-adding-text-to-the-2)</span>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". <div drawio-diagram="8255"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1743780067.png" alt=""/></div>
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 &lt;F2&gt; on your keyboard according to the table below. 
    - In the Scene Tree panel the nodes are renamed according to the following table. <table border="1" class="align-center" id="bkmrk-initial-name-new-nam" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col width="300px"></col> <col width="300px"></col> </colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Initial Name** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**New Name** </span></td></tr><tr><td>OverlayLayout</td><td>MainItem</td></tr><tr><td>TextNode</td><td>EntryName</td></tr><tr><td>RenderNode</td><td>FocusImage</td></tr></tbody></table>
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. <p class="callout info">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.</p>
        
        <table border="1" class="align-center" id="bkmrk-target-item-transfor" style="border-collapse: collapse; width: 601px; border-width: 1px;"><colgroup> <col style="width: 150px;"></col> <col style="width: 112px;"></col> <col style="width: 112px;"></col> <col style="width: 112px;"></col> <col style="width: 112px;"></col></colgroup><tbody><tr><td rowspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Target Item** </span></td><td colspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Transformation** </span></td><td colspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Layout** </span></td></tr><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Position X**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Position Y**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Size X**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Size Y**</span></td></tr><tr><td>List (Group2D)  
        </td><td>58  
        </td><td>134  
        </td><td>300  
        </td><td>300  
        </td></tr></tbody></table>

#### 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 <span style="color: rgb(255, 128, 0);">[BitmapBrushColorBlend ](http://cgi3151en.candera.eu/link/602#bkmrk-bitmapbrushcolorblen)</span>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. <table border="1" class="align-center" id="bkmrk-target-item-image-my-1" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 58.9334px;"><colgroup><col width="300px"></col><col width="300px"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="background-color: rgb(53, 152, 219); height: 29.4667px;"><span style="color: white;">**Target Item** </span></td><td style="background-color: rgb(53, 152, 219); height: 29.4667px;"><span style="color: white;">**Image** </span></td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">MyList &gt; List &gt; &gt;ListContentGroup &gt; MainItem &gt; FocusImage &gt; BitmapBrushColorBlend</td><td style="height: 29.4667px;">//ConstructionKit/ConstructionKit/Controls/Images/Common/BorderFocusedBmp</td></tr></tbody></table>
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. <p class="callout info">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.</p>
        
        <table border="1" class="align-center" id="bkmrk-target-item-color-re" style="border-collapse: collapse;"><colgroup><col style="width: 300px;"></col><col style="width: 100px;"></col><col style="width: 100px;"></col><col style="width: 100px;"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Target Item** </span></td><td colspan="3" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Color** </span></td></tr><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">  
        </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Red** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Green** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Blue** </span></td></tr><tr><td>MyList &gt; List &gt; &gt;ListContentGroup &gt; MainItem &gt; FocusImage &gt; BitmapBrushColorBlend</td><td>1.0  
        </td><td>0.62  
        </td><td>0.00  
        </td></tr></tbody></table>
        
        <div drawio-diagram="8297"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1744359604.png" alt=""/></div>
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. <table border="1" class="align-center" id="bkmrk-target-item-layout-%3E" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 58.9334px;"><colgroup><col width="300px"></col><col width="300px"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="background-color: rgb(53, 152, 219); height: 29.4667px;"><span style="color: white;">**Target Item** </span></td><td style="background-color: rgb(53, 152, 219); height: 29.4667px;"><span style="color: white;">**Layout &gt; StretchBehavior** </span></td></tr><tr style="height: 29.4667px;"><td style="height: 29.4667px;">MyList &gt; List &gt; &gt;ListContentGroup &gt; MainItem &gt; FocusImage   
        </td><td style="height: 29.4667px;">Fill  
        </td></tr></tbody></table>
        
        <div drawio-diagram="8374"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1745571777.png" alt=""/></div>

#### 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 <span style="color: rgb(255, 128, 0);">[Sub-List ](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-sub-list)</span>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.  
        <div drawio-diagram="8300"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1744363377.png" alt=""/></div>
2. From the Toolbox panel's **\[Node 2D\]** section drag a <span style="color: rgb(255, 128, 0);">[StackLayout ](http://cgi3151en.candera.eu/books/scene-design/page/2d-laying-out#bkmrk-stack-layouter)</span>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 <span style="color: rgb(255, 128, 0);">[TextButton ](http://cgi3151en.candera.eu/books/controls-and-behaviors/page/touchable#bkmrk-textbutton)</span>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.  
        <table border="1" class="align-center" id="bkmrk-target-item-transfor-1" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col width="200"></col><col width="100px"></col><col width="100px"></col><col width="200px"></col></colgroup><tbody><tr><td rowspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Target Item** </span></td><td colspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Transformations** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Layout** </span></td></tr><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Scale X** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Scale Y** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Margin Left** </span></td></tr><tr><td>TextButton  
        </td><td>0,75  
        </td><td>0,75  
        </td><td>12  
        </td></tr></tbody></table>
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.  
        <table border="1" class="align-center" id="bkmrk-target-item-image-pa" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col width="250px"></col><col width="350px"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Target Item** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Image Path** </span></td></tr><tr><td>Normal Image  
        </td><td>/Resources/Options/ButtonNorma\_BkBmp  
        </td></tr><tr><td>Pressed Image  
        </td><td>/Resources/Options/ButtonNorma\_Prss\_OreBmp</td></tr><tr><td>Focused Image  
        </td><td>/Resources/Options/NOTBorderFocusedBmp</td></tr></tbody></table>
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 &lt;Ctrl&gt;+C and &lt;Ctrl&gt;+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 &lt;F2&gt; 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.  
        <table border="1" class="align-center" id="bkmrk-target-item-new-name" style="border-collapse: collapse; width: 600px; border-width: 1px;"><colgroup><col width="200px"></col><col width="200px"></col><col width="200px"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Target Item** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**New Name** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Control - Text** </span></td></tr><tr><td>TextButton</td><td>TextButton\_Connect</td><td>Connect</td></tr><tr><td>TextButton\_1</td><td>TextButton\_Unpair</td><td>Unpair</td></tr></tbody></table>
        
        <div drawio-diagram="8301"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1744368683.png" alt=""/></div>

#### 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 <span style="color: rgb(230, 126, 35);">[Fusion](https://doc316en.candera.eu/books/fusion "Fusion")</span>.

<p class="callout info">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 <span style="color: rgb(230, 126, 35);">[Fusion](https://doc316en.candera.eu/books/fusion "Fusion")</span>. </p>

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. <div drawio-diagram="8302"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1744371732.png" alt=""/></div>
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.  
        <table border="1" class="align-center" id="bkmrk-target-name-visible-" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 134.667px;"><colgroup><col style="width: 162px;"></col><col style="width: 154px;"></col><col style="width: 284px;" width="390px"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connect to** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connector** </span></td><td style="background-color: rgb(53, 152, 219); height: 29.4667px;"><span style="color: rgb(255, 255, 255);">**Add Fusion Nodes** </span></td></tr><tr style="height: 29.4667px;"><td>MainItem Fusion Node  
        </td><td>Behaviors  
        </td><td style="height: 29.4667px;">Handle Control State  
        </td></tr><tr><td>  
        </td><td>Behaviors  
        </td><td>Focus</td></tr><tr style="height: 29.4667px;"><td>  
        </td><td>Behaviors  
        </td><td style="height: 29.4667px;">FocusLeave</td></tr></tbody></table>
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. <table border="1" class="align-center" id="bkmrk-connect-to-connector" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 134.667px;"><colgroup><col style="width: 179px;"></col><col style="width: 137px;"></col><col style="width: 284px;" width="390px"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connect to** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connector** </span></td><td style="background-color: rgb(53, 152, 219); height: 29.4667px;"><span style="color: rgb(255, 255, 255);">**Add Fusion Nodes** </span></td></tr><tr style="height: 29.4667px;"><td>Focus Fusion Node  
        </td><td>Actions</td><td style="height: 29.4667px;">EnableRendering</td></tr><tr><td>FocusLeave Fusion Node  
        </td><td>Actions</td><td>EnableRendering</td></tr></tbody></table>
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.  
        <table border="1" class="align-center" id="bkmrk-behavior-visible-tar" style="border-collapse: collapse; width: 601px; border-width: 1px;"><colgroup><col style="width: 140px;" width="140px"></col><col style="width: 70px;" width="70px"></col><col style="width: 390px;" width="390px"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Behavior** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Visible** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Target Node** </span></td></tr><tr><td>Focus - EnableRendering
        
        </td><td>True</td><td>MyList &gt; List &gt; ListContentGroup &gt; MainItem &gt; FocusImage</td></tr><tr><td>FocusLeave - EnableRendering
        
        </td><td>False</td><td>MyList &gt; List &gt; ListContentGroup &gt; MainItem &gt; FocusImage</td></tr></tbody></table>
        
        <div drawio-diagram="8444"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-06/drawing-5-1749231125.png" alt=""/></div>

#### 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 &gt; List &gt; ListContentGroup &gt; 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. <table border="1" class="align-center" id="bkmrk-connect-to-fusion-no" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 134.667px;"><colgroup><col style="width: 191px;"></col><col style="width: 125px;"></col><col style="width: 284px;" width="390px"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connect to Fusion Node** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connector** </span></td><td style="background-color: rgb(53, 152, 219); height: 29.4667px;"><span style="color: rgb(255, 255, 255);">**Add Fusion Nodes** </span></td></tr><tr style="height: 29.4667px;"><td>MainItem   
        </td><td>Behaviors  
        </td><td style="height: 29.4667px;">Event Handler</td></tr></tbody></table>
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. <p class="callout info">With the Check Logic Condition you can combine 2 conditions with a configurable logic operation (And, Or, Xor).</p>
        
        <table border="1" class="align-center" id="bkmrk-connect-to-fusion-no-1" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 134.667px;"><colgroup><col style="width: 197px;"></col><col style="width: 155px;"></col><col style="width: 248px;" width="390px"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connect to Fusion Node** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connector** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Add Fusion Nodes** </span></td></tr><tr><td>Event Handler  
        </td><td>Condition  
        </td><td>Check Logic Condition  
        </td></tr></tbody></table>
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.  
        <table border="1" class="align-center" id="bkmrk-connect-to-fusion-no-2" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 134.667px;"><colgroup><col style="width: 197px;"></col><col style="width: 155px;"></col><col style="width: 248px;" width="390px"></col></colgroup><tbody><tr style="height: 29.4667px;"><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connect to Fusion Node** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connector** </span></td><td style="background-color: rgb(53, 152, 219); height: 29.4667px;"><span style="color: rgb(255, 255, 255);">**Add Fusion Nodes** </span></td></tr><tr><td>Check Logic Condition  
        </td><td>Condition  
        </td><td>Check Key Input</td></tr><tr><td>  
        </td><td>Condition  
        </td><td>Check Click</td></tr></tbody></table>
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.  
        <table border="1" class="align-center" id="bkmrk-condition-property-v" style="border-collapse: collapse; width: 601px; border-width: 1px;"><colgroup><col style="width: 158px;" width="140px"></col><col style="width: 144px;" width="70px"></col><col style="width: 298px;" width="390px"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Condition** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Property** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Value** </span></td></tr><tr><td>Check Logic Condition  
        </td><td>Operation  
        </td><td>Or  
        </td></tr><tr><td>Check Key Input</td><td>KeyCode</td><td>Key\_Enter</td></tr><tr><td>Check Click</td><td> -</td><td>-   
        </td></tr></tbody></table>
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. <table border="1" class="align-center" id="bkmrk-connect-to-fusion-no-3" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 134.667px;"><colgroup><col style="width: 197px;"></col><col style="width: 155px;"></col><col style="width: 248px;" width="390px"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connect to Fusion Node** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connector** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Add Fusion Nodes** </span></td></tr><tr><td>Event Handler  
        </td><td>Action  
        </td><td>Send Value As Event  
        </td></tr></tbody></table>
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. <p class="callout info">To configure the TargetNode click on the magnifying glass icon to open the \[Choose Item\] dialog. Navigate to the desired object and press \[OK\].</p>
        
        <table border="1" class="align-center" id="bkmrk-behavior-property-va-1" style="border-collapse: collapse; width: 600.666px; border-width: 1px;"><colgroup><col style="width: 150px;"></col><col style="width: 120px;"></col><col style="width: 330px;"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Behavior** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Property** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Value** </span></td></tr><tr><td rowspan="3">Send Value As Event</td><td>Target Node</td><td>/Controls/MyList/List/ListContentGroup/Sub-List</td></tr><tr><td>Value</td><td>Bool - TRUE</td></tr><tr><td>Change Value  
        </td><td>Relative</td></tr></tbody></table>
        
        <div drawio-diagram="8445"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-06/drawing-5-1749231160.png" alt=""/></div>

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 &gt; List &gt; ListContentGroup &gt; 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. <table border="1" class="align-center" id="bkmrk-connect-to-fusion-no-4" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 134.667px;"><colgroup><col style="width: 197px;"></col><col style="width: 155px;"></col><col style="width: 248px;" width="390px"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connect to Fusion Node** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connector** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Add Fusion Nodes** </span></td></tr><tr><td>Sub-List  
        </td><td>Behaviors  
        </td><td>Value  
        </td></tr></tbody></table>
3. Configure the Value Fusion Node according to the table below. 
    - The Value behavior's type has been changed to Bool.  
        <table border="1" class="align-center" id="bkmrk-behavior-property-va-2" style="border-collapse: collapse; width: 600.666px; border-width: 1px;"><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Behavior** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Property** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Value** </span></td></tr><tr><td>Value  
        </td><td>Variant</td><td>Bool - FALSE  
        </td></tr></tbody></table>
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. <table border="1" class="align-center" id="bkmrk-connect-to-fusion-no-5" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 134.667px;"><colgroup><col style="width: 197px;"></col><col style="width: 155px;"></col><col style="width: 248px;" width="390px"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connect to Fusion Node** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connector** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Add Fusion Nodes** </span></td></tr><tr><td>Value  
        </td><td>Receivers  
        </td><td>Action On Value  
        </td></tr></tbody></table>
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.  
        <table border="1" class="align-center" id="bkmrk-connect-to-fusion-no-6" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 134.667px;"><colgroup><col style="width: 197px;"></col><col style="width: 155px;"></col><col style="width: 248px;" width="390px"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connect to Fusion Node** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connector** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Add Fusion Nodes** </span></td></tr><tr><td>Action On Value  
        </td><td>Condition  
        </td><td>Check Processed Value  
        </td></tr><tr><td>  
        </td><td>Actions  
        </td><td>Set Control State  
        </td></tr></tbody></table>
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.  
        <table border="1" class="align-center" id="bkmrk-behavior-property-va" style="border-collapse: collapse; width: 600.666px; border-width: 1px;"><colgroup><col style="width: 200px;"></col><col style="width: 200px;"></col><col style="width: 200px;"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Behavior** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Property** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Value** </span></td></tr><tr><td rowspan="2">Check Processed Value  
        </td><td>ConditionOperator</td><td>Equal</td></tr><tr><td>ConditionValue</td><td>Bool, TRUE</td></tr><tr><td rowspan="2">Set Control State  
        </td><td>State</td><td>Enabled</td></tr><tr><td>ChangeTo</td><td>TRUE</td></tr></tbody></table>
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. <table border="1" class="align-center" id="bkmrk-connect-to-fusion-no-7" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 134.667px;"><colgroup><col style="width: 197px;"></col><col style="width: 155px;"></col><col style="width: 248px;" width="390px"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connect to Fusion Node** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connector** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Add Fusion Nodes** </span></td></tr><tr><td>Value  
        </td><td>Receivers  
        </td><td>Action On Value\_1  
        </td></tr><tr><td>Action On Value  
        </td><td>Condition  
        </td><td>Check Processed Value\_1  
        </td></tr><tr><td>  
        </td><td>Actions  
        </td><td>Set Control State\_1  
        </td></tr></tbody></table>
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.  
        <table border="1" class="align-center" id="bkmrk-behavior-property-va-3" style="border-collapse: collapse; width: 600.666px; border-width: 1px;"><colgroup><col style="width: 200px;"></col><col style="width: 200px;"></col><col style="width: 200px;"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Behavior** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Property** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Value** </span></td></tr><tr><td rowspan="2">Check Processed Value\_1  
        </td><td>ConditionOperator</td><td>Equal</td></tr><tr><td>ConditionValue</td><td>Bool, FALSE</td></tr><tr><td rowspan="2">Set Control State\_1  
        </td><td>State</td><td>Enabled</td></tr><tr><td>ChangeTo</td><td>FALSE</td></tr></tbody></table>
        
        <div drawio-diagram="8443"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-06/drawing-5-1749228543.png" alt=""/></div>

#### 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 &lt;Ctrl + S&gt;.  
    
    - 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. <div drawio-diagram="8344"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1744988707.png" alt=""/></div>
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. <div drawio-diagram="8347"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1744988866.png" alt=""/></div>
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. <div drawio-diagram="8378"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1745576606.png" alt=""/></div>
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. <div drawio-diagram="8346"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1744988794.png" alt=""/></div>

#### 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 &lt;Ctrl + c&gt; and &lt;Ctrl + v&gt;. 
    - In the Scene Tree panel you can see that MyList's ListContentGroup now contains 5 MainItems and 5 Sub-Lists. <div drawio-diagram="8351"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1744989442.png" alt=""/></div>
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. <p class="callout info">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.</p>
        
        <table border="1" class="align-center" id="bkmrk-sendvalueasevent-of%C2%A0" style="border-collapse: collapse; width: 601px; border-width: 1px;"><colgroup><col style="width: 150px;"></col><col style="width: 350px;"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**SendValueAsEvent of** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**TargetNode** </span></td></tr><tr><td>MainItem</td><td>/Controls/MyList/Group2D:List/Group2D:ListContentGroup/CompositeNode2D:Sub-List</td></tr><tr><td>MainItem\_1</td><td>/Controls/MyList/Group2D:List/Group2D:ListContentGroup/CompositeNode2D:Sub-List\_1</td></tr><tr><td>MainItem\_2</td><td>/Controls/MyList/Group2D:List/Group2D:ListContentGroup/CompositeNode2D:Sub-List\_2</td></tr><tr><td>MainItem\_3  
        </td><td>/Controls/MyList/Group2D:List/Group2D:ListContentGroup/CompositeNode2D:Sub-List\_3</td></tr><tr><td>MainItem\_4  
        </td><td>/Controls/MyList/Group2D:List/Group2D:ListContentGroup/CompositeNode2D:Sub-List\_4
        
        </td></tr></tbody></table>
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.  
        <table border="1" class="align-center" id="bkmrk-textnode2d-text-main" style="border-collapse: collapse; width: 601px; border-width: 1px;"><colgroup><col style="width: 300px;"></col><col style="width: 300px;"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**TextNode2D** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Text** </span></td></tr><tr><td>MainItem &gt; EntryName  
        </td><td>Phone (Private)</td></tr><tr><td>MainItem\_1 &gt; EntryName</td><td>Phone (Work)</td></tr><tr><td>MainItem\_2 &gt; EntryName</td><td>New Device</td></tr><tr><td>MainItem\_3 &gt; EntryName  
        </td><td>New Device</td></tr><tr><td>MainItem\_4 &gt; EntryName  
        </td><td>New Device</td></tr></tbody></table>

<div class="contents" id="bkmrk--66"><div class="contents"><div class="textblock">  
</div></div></div>### Check the Options Scene

<div class="image" id="bkmrk-the-options-scene-is">The Options scene is now finished.</div><div class="image" id="bkmrk-to-check-the-result-">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. <div drawio-diagram="8380"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1745577902.png" alt=""/></div>
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 **\[&gt;\]** 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. <div drawio-diagram="8171"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-03/drawing-5-1742573876.png" alt=""/></div>
3. In the CGI Panel tick the checkbox next to "Scenes#SceneOptions" and uncheck "Scenes#SceneHome". 
    - SceneOptions will become visible in the Player. <div drawio-diagram="8381"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1745579387.png" alt=""/></div>
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.

</div><div id="bkmrk--69">  
</div>

# GettingStartedControls Part 4

<div class="contents" id="bkmrk-menu-using-tabs-crea"><div class="contents">  
</div></div>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.

<div class="contents" id="bkmrk--0"><div class="contents"><div class="textblock"><div class="image"><div drawio-diagram="1531"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1676537789.png" alt=""/></div>

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

<div class="contents" id="bkmrk-in-the-main-menu-sel"><div class="contents"><div class="textblock"><div class="image">1. In the menu bar select **Import &gt; 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. <table border="1" class="align-center" id="bkmrk-import-resources-pat" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 137.5px;"><span style="color: rgb(255, 255, 255);">**Import Resources** </span></td><td style="background-color: rgb(53, 152, 219); width: 461.5px;"><span style="color: rgb(255, 255, 255);">**Path** </span></td></tr><tr><td>  
        </td><td>/cgi\_studio\_content/Resources/GettingStartedControls/MenuTabs</td></tr></tbody></table>
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. <div drawio-diagram="8384"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1745824642.png" alt=""/></div>

</div></div></div></div>### Creating the TabButton

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

#### Remove the RadioButton's Knob

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

1. In the Solution Explorer navigate to "References &gt; SCL: ConstructionKit &gt; ConstructionKit &gt; Controls &gt; RadioButton" and **copy the RadioButton control** either via the context menu "Copy" or the keyboard shortcut &lt;Ctrl + C&gt;. 
    - The RadioButton control is in the clipboard and ready to be pasted.
2. In the Solution Explorer navigate to "Solution &gt; Controls" and **paste the RadioButton control** either via the context menu "Paste" or the keyboard shortcut &lt;Ctrl + V&gt; into the Controls folder. 
    - In Solution Explorer you can see that the RadioButton has been pasted into the Solution/Controls folder.
3. In the Solution Explorer **rename the RadioButton control** in the Solutions/Controls folder **to "TabButton"** either via the context menu "Rename" or the keyboard shortcut &lt;F2&gt;. 
    - In the Solution Explorer you can see that the RadioButton in the Solutions/Controls folder is renamed to "TabButton".
    - In the Toolbox panel's \[ Controls \] section you can see a new folder "Touchable" with the newly created TabButton. <div drawio-diagram="8387"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1745831130.png" alt=""/></div>
4. In the Solution Explorer or in the Toolbox **double-click** the newly created **TabButton**. 
    - In the Scene Editor you can see the TabButton, which currently looks like Scene Composer's RadioButton.
    - In the Scene Tree panel you can see the complete design of the TabButton, which is a copy of the RadioButton. On the Scene Tree panel's left side you can see the node structure, on the right side you can see the applied behaviors that form the control's logic. <p class="callout info">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.</p>
5. In the Scene Tree panel navigate to and **select** the **RadioButtonNode** (TabButton &gt; StackLayout &gt; OverlayLayout &gt; 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.  
        <table border="1" class="align-center" id="bkmrk-target-item-image-my-1" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 58.9334px;"><colgroup><col style="width: 235px;"></col><col style="width: 365px;"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**RadioButtonNode - Behavior**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Image** </span></td></tr><tr><td>SetNormalImage</td><td>/Resources/MenuTabs/ButtonNorma\_BkBmp</td></tr><tr><td>SetSelectedImage</td><td>/Resources/MenuTabs/ButtonNorma\_Prss\_OreBmp</td></tr><tr><td>SetSelectedPressedImage</td><td>/Resources/MenuTabs/ButtonNorma\_Prss\_OreBmp</td></tr><tr><td>SetNormalPressedImage
        
        </td><td>/Resources/MenuTabs/ButtonNorma\_Prss\_OreBmp</td></tr></tbody></table>
        
        <div drawio-diagram="8388"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1745834607.png" alt=""/></div>

#### 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 &gt; StackLayout &gt; 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.  
        <table border="1" class="align-center" id="bkmrk-target-node-horizont" style="border-collapse: collapse; width: 602px; border-width: 1px; height: 58.9334px;"><colgroup><col style="width: 200px;"></col><col style="width: 200px;"></col><col style="width: 100px;"></col><col style="width: 100px;"></col></colgroup><tbody><tr><td rowspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Target Node** </span></td><td rowspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**HorizontalAlignment** </span></td><td colspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Margin** </span></td></tr><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Left**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Right**</span></td></tr><tr><td>RadioButtonNode</td><td>HCenter</td><td>6</td><td>6</td></tr></tbody></table>
2. In the Scene Tree panel **select** the **TextNode** (TabButton &gt; StackLayout &gt; 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. <div drawio-diagram="8390"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1745839879.png" alt=""/></div>
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.  
        <table border="1" class="align-center" id="bkmrk-target-node-vertical" style="border-collapse: collapse; width: 602px; border-width: 1px;"><colgroup><col style="width: 100px;"></col><col style="width: 60px;"></col><col style="width: 60px;"></col> <col style="width: 40px;"></col><col style="width: 40px;"></col><col style="width: 100px;"></col></colgroup><tbody><tr><td rowspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Target Node** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Vertical** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Horizontal** </span></td><td colspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Margin** </span></td><td rowspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**StretchBehavior** </span></td></tr><tr><td colspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Alignment** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Left**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Right**</span></td></tr><tr><td>RadioButtonNode</td><td>VStretch</td><td>HStretch</td><td>0</td><td>0</td><td>Fill</td></tr></tbody></table>
        
        <div drawio-diagram="8391"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1745906588.png" alt=""/></div>

### 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 &lt; Ctrl+2 &gt; 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. <div drawio-diagram="8392"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1745908028.png" alt=""/></div>
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. <p class="callout info">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.</p>
    
    
    - 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. <div drawio-diagram="8394"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1745912910.png" alt=""/></div>

#### 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. <p class="callout info">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.</p>
    
    
    - In the Scene Editor the white dashed outline will match the yellow line that marks the viewport.  
        <table border="1" class="align-center" id="bkmrk-target-node-size-x-y" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 88.4001px;"><tbody><tr><td rowspan="2" style="background-color: rgb(53, 152, 219); width: 200px;"><span style="color: rgb(255, 255, 255);">**Target Node** </span></td><td colspan="2" style="background-color: rgb(53, 152, 219); width: 400px;"><span style="color: rgb(255, 255, 255);">**Size** </span></td></tr><tr><td style="background-color: rgb(53, 152, 219); width: 200px; height: 29.4667px;"><span style="color: rgb(255, 255, 255);">**X** </span></td><td style="background-color: rgb(53, 152, 219); width: 200px; height: 29.4667px;"><span style="color: rgb(255, 255, 255);">**Y** </span></td></tr><tr><td>GroupBox  
        </td><td>1024  
        </td><td>54  
        </td></tr></tbody></table>
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.  
          
        <table border="1" class="align-center" id="bkmrk-controls-section-con" style="border-collapse: collapse; width: 603px; border-width: 1px; height: 58.9334px;"><colgroup><col style="width: 301px;"></col><col style="width: 301px;"></col></colgroup><tbody><tr><td rowspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Controls Section** </span></td><td rowspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Controls** </span></td></tr><tr></tr><tr><td>Touchable &lt;ConstructionKit&gt;  
        </td><td>1 Button  
        </td></tr><tr><td>Touchable  
        </td><td>4 TabButtons  
        </td></tr><tr><td>Touchable &lt;ConstructionKit&gt;  
        </td><td>1 TextButton  
        </td></tr></tbody></table>
        
        <div drawio-diagram="8395"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1745914043.png" alt=""/></div>
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. <div drawio-diagram="8396"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1745914326.png" alt=""/></div>
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.
    
    <p class="callout info">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.</p>
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.  
        <table border="1" class="align-center" id="bkmrk-column-1-column-2-co" style="border-collapse: collapse; width: 604px; border-width: 1px; height: 58.9334px;"><colgroup><col style="width: 100px;"></col><col style="width: 100px;"></col><col style="width: 100px;"></col><col style="width: 100px;"></col><col style="width: 100px;"></col><col style="width: 100px;"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Column 1** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Column 2** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Column 3** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Column 4** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Column 5** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Column 6** </span></td></tr><tr><td>0.10</td><td>0.20</td><td>0.20</td><td>0.20  
        </td><td>0.20  
        </td><td>0.10  
        </td></tr></tbody></table>
        
        <div drawio-diagram="8397"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2025-04/drawing-5-1745916751.png" alt=""/></div>

#### 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 &lt;ConstructionKit&gt;" **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 "&gt;".  
        <table border="1" class="align-center" id="bkmrk-properties-section-p" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 58.9334px;"><colgroup><col style="width: 100px;"></col><col style="width: 100px;"></col><col style="width: 100px;"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Properties Section** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Property**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Value** </span></td></tr><tr><td>Control</td><td>Text</td><td>&gt;</td></tr><tr><td>Layout  
        </td><td>Vertical Alignment  
        </td><td>VCenter  
        </td></tr><tr><td>  
        </td><td>Horizontal Alignment  
        </td><td>HCenter</td></tr></tbody></table>
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.  
        <table border="1" class="align-center" id="bkmrk-properties-section-p-1" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 58.9334px;"><colgroup><col style="width: 140px;"></col><col style="width: 119px;"></col><col style="width: 341px;"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Properties Section** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Property**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Value** </span></td></tr><tr><td>General  
        </td><td>Name  
        </td><td>Next  
        </td></tr><tr><td>Control</td><td>Normal Image</td><td>/Resources/MenuTabs/ButtonNorma\_BkBmp</td></tr><tr><td> </td><td>Pressed Image</td><td>/Resources/MenuTabs/ButtonNorma\_Prss\_OreBmp</td></tr><tr><td>  
        </td><td>Focused Image  
        </td><td>/Resources/MenuTabs/ButtonNorma\_Prss\_OreBmp  
        </td></tr></tbody></table>
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.  
        <table border="1" class="align-center" id="bkmrk-general-%3E-name-contr" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 58.9334px;"><colgroup><col style="width: 299px;"></col><col style="width: 300px;"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**General &gt; Name**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Control &gt; Text** </span></td></tr><tr><td>TabHome</td><td>HOME</td></tr><tr><td>TabClimate</td><td>CLIMATE</td></tr><tr><td>TabPhone</td><td>PHONE</td></tr><tr><td>TabOptions</td><td>OPTIONS</td></tr></tbody></table>
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.  
        <table border="1" class="align-center" id="bkmrk-properties-section-p-2" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 58.9334px;"><colgroup><col style="width: 144px;"></col><col style="width: 120px;"></col><col style="width: 335px;"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Properties Section** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Property** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Control &gt; Text** </span></td></tr><tr><td>General  
        </td><td>Name  
        </td><td>CloseButton</td></tr><tr><td>Control  
        </td><td>Text  
        </td><td>X</td></tr><tr><td>  
        </td><td>Normal Image  
        </td><td>/Resources/MenuTabs/ButtonNorma\_BkBmp</td></tr><tr><td>  
        </td><td>Pressed Image  
        </td><td>/Resources/MenuTabs/ButtonNorma\_Prss\_OreBmp</td></tr><tr><td>  
        </td><td>Focused Image  
        </td><td>/Resources/MenuTabs/ButtonNorma\_Prss\_OreBmp  
        </td></tr></tbody></table>
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.  
        <table border="1" class="align-center" id="bkmrk-default-selected-obj" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 137.5px;"><span style="color: rgb(255, 255, 255);">**Default Selected Object** </span></td><td style="background-color: rgb(53, 152, 219); width: 461.5px;"><span style="color: rgb(255, 255, 255);">**Path** </span></td></tr><tr><td>  
        </td><td>/Scenes/SceneMenuTabs/GroupBox/Content/GridLayout/TabHome</td></tr></tbody></table>
        
        <div drawio-diagram="8457"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-06/drawing-5-1749814003.png" alt=""/></div>

### 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.  
        <table border="1" class="align-center" id="bkmrk-camera-left-top-heig" style="border-collapse: collapse; width: 603px; border-width: 1px;"><colgroup><col style="width: 172px;"></col><col style="width: 92px;"></col><col style="width: 119px;"></col><col style="width: 94px;"></col><col style="width: 125px;"></col></colgroup><tbody><tr><td rowspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Camera**</span></td><td colspan="3" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Viewport**</span></td><td rowspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Enable Swapping** </span></td></tr><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Left** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Top** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Height**</span></td></tr><tr><td>SceneHome\\Camera</td><td>0</td><td>0  
        </td><td>714</td><td>TRUE  
        </td></tr><tr><td>SceneClimate\\Camera</td><td>0</td><td>0  
        </td><td>714</td><td>TRUE  
        </td></tr><tr><td>SceneOptions\\Camera</td><td>0</td><td>0  
        </td><td>714  
        </td><td>TRUE  
        </td></tr><tr><td>SceneMenuTabs\\Camera</td><td>0  
        </td><td>714  
        </td><td>54  
        </td><td>FALSE  
        </td></tr></tbody></table>
2. In the menu bar go to **View &gt; Display &gt; 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. <div drawio-diagram="8461"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-06/drawing-5-1750058590.png" alt=""/></div>

#### 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 <span style="color: rgb(230, 126, 35);">[Fusion](https://doc316en.candera.eu/books/fusion "Fusion")</span> to trigger scene activation and deactivation.

<p class="callout info">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 <span style="color: rgb(230, 126, 35);">[Fusion](https://doc316en.candera.eu/books/fusion "Fusion")</span>. </p>

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 &gt; GroupBox &gt; Content &gt; GridLayout &gt; 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. <table border="1" class="align-center" id="bkmrk-connect-to-fusion-no" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 134.667px;"><tbody><tr style="height: 29.4667px;"><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connect to Fusion Node** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connector** </span></td><td style="background-color: rgb(53, 152, 219); height: 29.4667px;"><span style="color: rgb(255, 255, 255);">**Add Fusion Nodes** </span></td></tr><tr style="height: 29.4667px;"><td>TabHome  
        </td><td>Behaviors  
        </td><td style="height: 29.4667px;">Event Handler</td></tr><tr><td>Event Handler  
        </td><td>Condition  
        </td><td>Check Control State  
        </td></tr><tr><td>  
        </td><td>Action  
        </td><td>Transition Request  
        </td></tr></tbody></table>
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. <table border="1" class="align-center" id="bkmrk-fusion-node-property" style="border-collapse: collapse; width: 401.333px; border-width: 1px;"><colgroup><col style="width: 200px;"></col><col style="width: 150px;"></col><col style="width: 150px;"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Fusion Node** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Property** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Value** </span></td></tr><tr><td>Check Control State  
        </td><td>State  
        </td><td>Selected  
        </td></tr><tr><td>  
        </td><td>StateCondition  
        </td><td>ChangedToTrue  
        </td></tr><tr><td>Transition Request  
        </td><td>RequestType  
        </td><td>Activate  
        </td></tr><tr><td>  
        </td><td>Identifier  
        </td><td>SceneHome  
        </td></tr></tbody></table>
        
        <div drawio-diagram="8462"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-06/drawing-5-1750064868.png" alt=""/></div>
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 &lt;Ctrl&gt;+c and &lt;Ctrl&gt;+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&amp;Paste according to the table below. 
    - If TabHome's selected state changes to false, a transition to deactivate SceneHome is requested. <table border="1" class="align-center" id="bkmrk-fusion-node-property-1" style="border-collapse: collapse; width: 401.333px; border-width: 1px;"><colgroup><col style="width: 200px;"></col><col style="width: 150px;"></col><col style="width: 150px;"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Fusion Node** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Property** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Value** </span></td></tr><tr><td>Check Control State\_1  
        </td><td>State  
        </td><td>Selected  
        </td></tr><tr><td>  
        </td><td>StateCondition  
        </td><td>ChangedToFalse  
        </td></tr><tr><td>Transition Request\_1  
        </td><td>RequestType  
        </td><td>Deactivate  
        </td></tr><tr><td>  
        </td><td>Identifier  
        </td><td>SceneHome  
        </td></tr></tbody></table>
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.  
        <p class="callout info">For this tutorial, ScenePhone has been skipped, since most controls have already been covered by other scenes.</p>
        
        <table border="1" class="align-center" id="bkmrk-fusion-diagram-of%C2%A0-f" style="border-collapse: collapse; width: 401.333px; border-width: 1px;"><colgroup><col style="width: 157px;"></col><col style="width: 193px;"></col><col style="width: 150px;"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Fusion Diagram of** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Fusion Node** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Identifier Value** </span></td></tr><tr><td>TabClimate  
        </td><td>Transition Request</td><td>SceneClimate</td></tr><tr><td>  
        </td><td>Transition Request\_1</td><td>SceneClimate</td></tr><tr><td>TabOptions  
        </td><td>Transition Request</td><td>SceneOptions  
        </td></tr><tr><td>  
        </td><td>Transition Request\_1  
        </td><td>SceneOptions  
        </td></tr></tbody></table>
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 &lt;ConstructionKit&gt;" **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 &gt; GroupBox** directly onto the **Drawer's ContentAnchor.**
    - The GroupBox and all its content will be moved into the Drawer control. <div drawio-diagram="8488"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-07/drawing-5-1753426307.png" alt=""/></div>
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.  
        <p class="callout info">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 &lt;F5&gt; on your keyboard.</p>
        
        <table border="1" class="align-center" id="bkmrk-drawer-properties-se" style="border-collapse: collapse; width: 401.333px; border-width: 1px;"><colgroup><col style="width: 200px;"></col><col style="width: 150px;"></col><col style="width: 150px;"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Drawer Properties Section** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Property** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Value** </span></td></tr><tr><td>Control  
        </td><td>Open</td><td>False</td></tr><tr><td>  
        </td><td>Appear Direction</td><td>Bottom</td></tr></tbody></table>
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.  
        <table border="1" class="align-center" id="bkmrk-arrowtabsbmp-solutio" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 137.5px;"><span style="color: rgb(255, 255, 255);">**arrowTabsBmp** </span></td><td style="background-color: rgb(53, 152, 219); width: 461.5px;"><span style="color: rgb(255, 255, 255);">**Solution Explorer Path** </span></td></tr><tr><td>  
        </td><td>Solution &gt; Resources &gt; MenuTabs &gt; arrowsTabBmp  
        </td></tr></tbody></table>
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.  
        <div drawio-diagram="8465"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-06/drawing-5-1750152290.png" alt=""/></div>
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. <table border="1" class="align-center" id="bkmrk-arrowstabbmp-propert" style="border-collapse: collapse; width: 501px; border-width: 1px;"><colgroup><col style="width: 250px;"></col><col style="width: 100px;"></col><col style="width: 100px;"></col><col style="width: 150px;"></col></colgroup><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**arrowsTabBmp Properties Section** </span></td><td colspan="2" style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Property** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Value** </span></td></tr><tr><td>Transformations</td><td>Position</td><td>X  
        </td><td>469</td></tr><tr><td> </td><td>Position</td><td>Y  
        </td><td>21</td></tr><tr><td>  
        </td><td>Scale  
        </td><td>X  
        </td><td>0.5  
        </td></tr><tr><td>  
        </td><td>Scale  
        </td><td>Y  
        </td><td>0.5  
        </td></tr></tbody></table>

#### 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 <span style="color: rgb(230, 126, 35);">[Fusion](https://doc316en.candera.eu/books/fusion "Fusion")</span>.

<p class="callout info">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 <span style="color: rgb(230, 126, 35);">[Fusion](https://doc316en.candera.eu/books/fusion "Fusion")</span>. </p>

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. <table border="1" class="align-center" id="bkmrk-connect-to-fusion-no-1" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 134.667px;"><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connect to Fusion Node** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connector** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Add Fusion Nodes** </span></td></tr><tr><td>arrowsTabBmp  
        </td><td>Behaviors  
        </td><td>HandleControlState  
        </td></tr></tbody></table>
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. <table border="1" class="align-center" id="bkmrk-connect-to-fusion-no-2" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 134.667px;"><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connect to Fusion Node** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connector** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Add Fusion Nodes** </span></td></tr><tr><td>arrowsTabBmp  
        </td><td>Behaviors  
        </td><td>Hover  
        </td></tr><tr><td>  
        </td><td>Behaviors  
        </td><td>OnClick  
        </td></tr><tr><td>OnClick  
        </td><td>Actions  
        </td><td>Change Drawer State  
        </td></tr><tr><td>Hover</td><td>Actions</td><td>Change Drawer State\_1</td></tr></tbody></table>
        
          
        <div drawio-diagram="8464"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-06/drawing-5-1750152137.png" alt=""/></div>
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. <table border="1" class="align-center" id="bkmrk-targetnode-choose-it" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 175.583px;"><span style="color: rgb(255, 255, 255);">**TargetNode** </span></td><td style="background-color: rgb(53, 152, 219); width: 423.75px;"><span style="color: rgb(255, 255, 255);">**Choose Item Path** </span></td></tr><tr><td style="width: 175.583px;">Change Drawer State  
        </td><td style="width: 423.75px;">Scenes &gt; SceneMenuTabs &gt; Drawer  
        </td></tr><tr><td style="width: 175.583px;">Change Drawer State\_1  
        </td><td style="width: 423.75px;">Scenes &gt; SceneMenuTabs &gt; Drawer</td></tr></tbody></table>
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.  
        <table border="1" class="align-center" id="bkmrk-closebutton-scene-tr" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 137.5px;"><span style="color: rgb(255, 255, 255);">**CloseButton** </span></td><td style="background-color: rgb(53, 152, 219); width: 461.5px;"><span style="color: rgb(255, 255, 255);">**Scene Tree Path** </span></td></tr><tr><td>  
        </td><td>SceneMenuTabs &gt; Drawer &gt; ContentAnchor &gt; GroupBox &gt; Content &gt; GridLayout &gt; **CloseButton**  
        </td></tr></tbody></table>
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.  
        <table border="1" class="align-center" id="bkmrk-connect-to-fusion-no-3" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 134.667px;"><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connect to Fusion Node** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Connector** </span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: rgb(255, 255, 255);">**Add Fusion Nodes** </span></td></tr><tr><td>Event Handler  
        </td><td>Actions  
        </td><td>Change Drawer State  
        </td></tr></tbody></table>
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.  
        <table border="1" class="align-center" id="bkmrk-change-drawer-state-" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 235.583px;"><span style="color: rgb(255, 255, 255);">**Change Drawer State** </span>
        
        <span style="color: rgb(255, 255, 255);">**Property**</span>
        
        </td><td style="background-color: rgb(53, 152, 219); width: 363.75px;"><span style="color: rgb(255, 255, 255);">**Value** </span></td></tr><tr><td style="width: 235.583px;">TargetNode  
        </td><td style="width: 363.75px;">Scenes &gt; SceneMenuTabs &gt; Drawer</td></tr><tr><td style="width: 235.583px;">Action  
        </td><td style="width: 363.75px;">Close  
        </td></tr></tbody></table>
        
          
        <div drawio-diagram="8470"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-06/drawing-5-1751010735.png" alt=""/></div>
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. <div drawio-diagram="1617"><img src="http://cgi3151en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1676541122.png" alt=""/></div>

# 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\] &gt;\[Define application specification\]. 
    - The "Courier Editor Parameters" dialog will pop up. See image below
    - This dialog requires two paths. <table border="1" class="align-center" id="bkmrk-connect-to-fusion-no-2" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 134.667px;"><tbody><tr style="height: 29.4667px;"><td style="background-color: rgb(53, 152, 219); width: 135.167px;"><span style="color: rgb(255, 255, 255);">**File** </span></td><td style="width: 465.167px;">This is the path to the XHCDL file where the binding sources are stored</td></tr><tr><td style="background-color: rgb(53, 152, 219); width: 135.167px;"><span style="color: rgb(255, 255, 255);">**Include Path** </span></td><td style="width: 465.167px;">This is root path to the source of CGI Studio [Courier](http://dev.doc.cgistudio.at/APILINK/namespace_courier.html).
        
        </td></tr></tbody></table>
        
        <div drawio-diagram="8479"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-07/drawing-5-1751633050.png" alt=""/></div>
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!).  
        <table border="1" class="align-center" id="bkmrk-file-..%2F..%2F..%2F..%2Fcgi" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 134.667px;"><tbody><tr style="height: 29.4667px;"><td style="background-color: rgb(53, 152, 219); width: 135.167px;"><span style="color: rgb(255, 255, 255);">**File** </span></td><td class="align-left" style="width: 465.167px;">\\cgi\_studio\_player\\src\\Player\\xhcdl\\PlayerDataBinding.xhcdl</td></tr><tr><td style="background-color: rgb(53, 152, 219); width: 135.167px;"><span style="color: rgb(255, 255, 255);">**Include Path** </span></td><td class="align-left" style="width: 465.167px;">\\cgi\_studio\_courier\\src</td></tr></tbody></table>

<div class="contents" id="bkmrk--2"><div class="contents"><div class="textblock">  
</div></div></div>##### 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 &gt; DigitalClock).
    - Scene Editor displays the editable scene. There is a DigitalClock control in the top center above the gauge.  
        <table border="1" class="align-center" id="bkmrk-import-resources-pat" style="border-collapse: collapse; width: 600px; border-width: 1px; height: 59.6px;"><tbody><tr style="height: 29.8px;"><td style="background-color: rgb(53, 152, 219); width: 137.5px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Open Scene** </span></td><td style="background-color: rgb(53, 152, 219); width: 461.5px; height: 29.8px;"><span style="color: rgb(255, 255, 255);">**Solution Explorer Path** </span></td></tr><tr style="height: 29.8px;"><td style="width: 137.5px; height: 29.8px;">SceneHome  
        </td><td style="width: 461.5px; height: 29.8px;">Solution &gt; Scenes &gt; SceneHome  
        </td></tr></tbody></table>
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". <div drawio-diagram="8481"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-07/drawing-5-1751634634.png" alt=""/></div>
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. <p class="callout info">To find the binding source more easily, the dialog offers a search field.</p>
        
        <div drawio-diagram="8482"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-07/drawing-5-1751634970.png" alt=""/></div>
5. You can now generate a new asset library and try it out in the Player.

<div class="contents" id="bkmrk--0"><div class="contents"><div class="textblock">  
</div></div></div>#### 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.

<div class="contents" id="bkmrk--8"><div class="contents"><div class="textblock"><div class="image"><div drawio-diagram="1624"><img src="https://doc316en.candera.eu/uploads/images/drawio/2023-02/drawing-7-1676541303.png" alt=""/></div>

---

</div></div></div></div>