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