# Advanced Cluster Part 4

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

Once the advanced cluster scene is fully configured, it's time to test its functionality using the Scene Composer's <span style="color: rgb(230, 126, 35);">[Player](https://doc316en.candera.eu/books/player "Player")</span>.

#### Create a Cluster Scene with 2 Custom\_Gauge Controls

1. In the Solution Explorer navigate to the Scene2D and double click it. 
    - Scene2D will be opened and visible in Scene Editor and Scene Tree panel.
    - In Scene Tree panel you can see that the scene contains a camera.
2. In the **Scene Editor's bottom toolbar** make sure that "**active rendering**" and "**widgets updating**" is enabled. 
    - In the Scene Editor's bottom toolbar "**active rendering**" and "**widgets updating**" are highlighted as seen in the image below.  
        <div drawio-diagram="8581"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-09/drawing-5-1757669749.png" alt=""/></div>
3. From the Toolbox panel under **\[Nodes 2D\]** drag a **Group node** into the Scene Tree panel or the Scene Editor. 
    - In the Scene Tree panel you can see the newly created Group node.
    - In the Scene Editor you can see an indicator of the Group node's current position.
4. **Rename** the **Group node** according to the table below either via the context menu "Rename" or the keyboard shortcut &lt;F2&gt;. 
    - The Group node has been renamed accordingly. <table border="1" class="align-center" id="bkmrk-target-item-image-my-1" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 58.9334px;"><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Old Name**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**New Name**</span></td></tr><tr><td>Group</td><td>Group\_Content</td></tr></tbody></table>
5. In the Scene Tree panel select the Group node. In the Properties panel's **\[Transformations\]** section reset the Position property according to the table below. 
    - In the Scene Editor you can see the Group node's current position. <p class="callout info">A property can easily be **reset** in the Properties panel by clicking on the **curled arrow icon** on the property's left.</p>
        
        <table border="1" class="align-center" id="bkmrk-target-item-position" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 58.9334px;"><tbody><tr><td rowspan="2" style="background-color: rgb(53, 152, 219); width: 200.1px;"><span style="color: white;">**Target Item**</span></td><td colspan="2" style="background-color: rgb(53, 152, 219); width: 200.1px;"><span style="color: white;">**Position**</span></td></tr><tr><td style="background-color: rgb(53, 152, 219); width: 200.1px;"><span style="color: white;">**X**</span></td><td style="background-color: rgb(53, 152, 219); width: 200.1px;"><span style="color: white;">**Y**</span></td></tr><tr><td style="width: 200.1px;">Group\_Content</td><td style="width: 200.1px;">0.00</td><td style="width: 200.1px;">0.00</td></tr></tbody></table>
6. From the Solution Explorer **drag** the **image** according to the table below into the Scene Tree panel **directly onto the Group\_Content** node. 
    - In Scene Tree panel you can see that a new RenderNode2D with a BitmapBrushBlend effect has been created inside Group\_Content.
    - In Scene Editor you can see the rendered background image. <table border="1" class="align-center" id="bkmrk-path-in-solution-exp" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 58.9334px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 244.167px;"><span style="color: white;">**Path in Solution Explorer**</span></td><td style="background-color: rgb(53, 152, 219); width: 356.167px;"><span style="color: white;">**Image**</span></td></tr><tr><td style="width: 244.167px;">Solution &gt; Resources &gt; Bitmaps</td><td style="width: 356.167px;">BackgroundBmp</td></tr></tbody></table>
7. From the Solution Explorer drag **two** **Custom\_Gauge** into the Scene Tree panel directly onto the **Group\_Content**. The path to the Custom\_Gauge control is given in the table below. 
    - In the Scene Editor only one Custom\_Gauge will be displayed since both controls are located at the same position and therefore are completely overlapping. One Custom\_Gauge is hiding the other.
    - In the Scene Tree panel the Group\_Content node contains a RenderNode2D and the newly created Custom\_Gauges. <table border="1" class="align-center" id="bkmrk-path-in-solution-exp-1" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 58.9334px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 244.167px;"><span style="color: white;">**Path in Solution Explorer**</span></td><td style="background-color: rgb(53, 152, 219); width: 356.167px;"><span style="color: white;">**Control**</span></td></tr><tr><td style="width: 244.167px;">Solution &gt; Controls</td><td style="width: 356.167px;">Custom\_Gauge</td></tr></tbody></table>
8. **Rename** the **Custom\_Gauge** nodes according to the table below either via the context menu "Rename" or the keyboard shortcut &lt;F2&gt;. 
    - The Custom\_Gauge node has been renamed accordingly. <table border="1" class="align-center" id="bkmrk-old-name-new-name-cu" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 58.9334px;"><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Old Name**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**New Name**</span></td></tr><tr><td>Custom\_Gauge</td><td>Custom\_Gauge\_Speed</td></tr><tr><td>Custom\_Gauge\_1</td><td>Custom\_Gauge\_RPM</td></tr></tbody></table>
9. Select the **Custom\_Gauge controls** one after the other. In the Properties panel **configure the properties** as given in the tables below. 
    - In the Scene Editor the gauge controls for RPM and Speed are both visible.
    - The Scene2D starts to look like a cluster, see image below. <table border="1" class="align-center" id="bkmrk-custom_gauge_rpm-pro" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 58.9334px;"><tbody><tr><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Custom\_Gauge\_RPM Property**</span></td><td style="background-color: rgb(53, 152, 219);"><span style="color: white;">**Value**</span></td></tr><tr><td colspan="2" style="background-color: rgb(35, 111, 161); width: 300.167px;"><span style="color: white;">**Transformation**</span></td></tr><tr><td>Position X</td><td>965.00</td></tr><tr><td>Position Y</td><td>30.00</td></tr></tbody></table>
        
        <table border="1" class="align-center" id="bkmrk-custom_gauge_speed-p" style="border-collapse: collapse; width: 601px; border-width: 1px; height: 58.9334px;"><tbody><tr><td style="background-color: rgb(53, 152, 219); width: 273.167px;"><span style="color: white;">**Custom\_Gauge\_Speed Property**</span></td><td style="background-color: rgb(53, 152, 219); width: 327.167px;"><span style="color: white;">**Value**</span></td></tr><tr><td colspan="2" style="background-color: rgb(35, 111, 161); width: 600.334px;"><span style="color: white;">**Transformation**</span></td></tr><tr><td style="width: 273.167px;">Position X</td><td style="width: 327.167px;">60.00</td></tr><tr><td style="width: 273.167px;">Position Y</td><td style="width: 327.167px;">30.00</td></tr><tr><td colspan="2" style="background-color: rgb(35, 111, 161); width: 600.334px;"><span style="color: white;">**Control**</span></td></tr><tr><td style="width: 273.167px;">Value</td><td style="width: 327.167px;">120</td></tr><tr><td style="width: 273.167px;">Input Max</td><td style="width: 327.167px;">240</td></tr><tr><td style="width: 273.167px;">Top\_Text</td><td style="width: 327.167px;">Speed</td></tr><tr><td style="width: 273.167px;">Value\_Format Text</td><td style="width: 327.167px;">%d</td></tr><tr><td style="width: 273.167px;">Bottom\_Text</td><td style="width: 327.167px;">km/h</td></tr><tr><td style="width: 273.167px;">BackgroundImage</td><td style="width: 327.167px;">Solution/Resources/Bitmaps/Points\_BlueBmp</td></tr><tr><td style="width: 273.167px;">ForegroundImage</td><td style="width: 327.167px;">Solution/Resources/Bitmaps/Numbers\_0-240Bmp</td></tr></tbody></table>
        
        <div drawio-diagram="8595"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-09/drawing-5-1758890507.png" alt=""/></div>

#### Check the Scene in the Player

1. **Save** your work and **start** the **Player** to test the functionality of your configuration. To do this, please perform similar steps to the ones described in the <span style="color: rgb(230, 126, 35);">[GettingStartedControls Best Practice](https://doc316en.candera.eu/books/best-practice/page/gettingstartedcontrols-part-1#bkmrk-check-the-first-scen)<span style="color: rgb(0, 0, 0);">. </span></span>
    - <span style="color: rgb(230, 126, 35);"><span style="color: rgb(0, 0, 0);">The Speed Gauge can be tested by manipulating Custom\_Gauge\_Speed's Value Property (The property is changed to 50 in the image below).</span></span>
    - <span style="color: rgb(230, 126, 35);"><span style="color: rgb(0, 0, 0);">The RPM Gauge can be tested by manipulating Custom\_Gauge\_RPM's Value Property.</span></span><div drawio-diagram="8584"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-09/drawing-5-1757685817.png" alt=""/></div>

<div class="contents" id="bkmrk--0"><div class="contents">  
</div></div><div class="contents" id="bkmrk--12"><div class="textblock"><div class="image">  
</div></div></div>