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