# Advanced Cluster Part 1

This section of the Best Practice describes how to configure the **render target** for this solution. It shows how to imported images via **\[Import Resources\]**. Some of these images will be used in controls later. In order for them to correctly fit e.g. into a Gauge control they need to have their **pivot point** adjusted. Finally, a **Custom Gauge** control will be created based on Scene Composer's built-in Gauge control.

#### Create Solution and Setup Render Target

A new empty solution will be created and the render target configuration is performed.

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. In the Solution Explorer panel on the top left select "Scene3D" (under "Solution - Scenes") and delete it either using the &lt;Del&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.
3. Please resolve all dependencies with **\[Delete Usage Item\]** (which is the default) and click **\[OK\]**. 
    - Scene3D will be deleted.
4. 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 is 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>1680</td></tr><tr><td>Y Resolution  
        </td><td>720
        
        </td></tr></tbody></table>
        
        <div drawio-diagram="8497"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-08/drawing-5-1754040396.png" alt=""/></div>
5. In the Render Targets panel select Scene2D\\Camera (0). In the Properties panel check the checkbox to **Enable Swapping**. 
    - Swapping has been enabled for Scene2D's camera.
    - The display will be refreshed after each time this scene is rendered. <table border="1" class="align-center" 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);">**Camera**</span></td><td style="background-color: rgb(53, 152, 219);">**<span style="color: rgb(255, 255, 255);">Enable Swapping</span>**</td></tr><tr><td>Scene2D\\Camera(0)</td><td>TRUE</td></tr></tbody></table>
        
        <div drawio-diagram="8498"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-08/drawing-5-1754040778.png" alt=""/></div>

#### Import Images and Configure Pivot Hints

The images needed for this solution will be imported. They will later be used to build up the gauge control. For correct positioning and alignment inside the control, the <span style="color: rgb(230, 126, 35);">[Pivot Hints](https://doc316en.candera.eu/books/scene-design/page/pivot-hint "Pivot Hint")</span> for these images need to be configured. Additionally, the Custom\_Gauge control will be created.

1. In the menu bar choose **\[Import\] - \[Import Resources...\]** as described in <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 folder and press **\[Open\]**.  
    **&lt;cgi-studio-root&gt;/cgi\_studio\_content/Resources/AdvancedCustomGauge**
    - **\[Import Images\]** dialog will be opened as seen in the image below the next step.
3. Use the settings as shown in the screenshot below and press **\[OK\]**. 
    - The images have been imported into the solution and are ready to be used. <p class="callout info">Select an item in the Solution Explorer panel to access its properties in the Properties panel.</p>
        
        <div drawio-diagram="8494"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-08/drawing-5-1754027219.png" alt=""/></div>
4. To configure the <span style="color: rgb(230, 126, 35);">[Pivot Hint](https://doc316en.candera.eu/books/scene-design/page/pivot-hint "Pivot Hint")</span>, select the image in the **Solution Explorer** panel. In the **Properties panel** under **\[Bitmap\]** you can adjust the image's **Pivot Hint settings**. Configure the images with the values given in the table below. 
    - The images' Pivot Hints are correctly configured to be used in Scene Composer's Gauge Control: The needle images' Pivot Hints are their **central point of rotation**. The other images' Pivot Hints are configured to align the images correctly in the Gauge Control. <table border="1" class="align-center" style="border-collapse: collapse; width: 617px; border-width: 1px;"><thead><tr><td rowspan="2" style="background-color: rgb(53, 152, 219); width: 185.083px;"><span style="color: rgb(255, 255, 255);">**Image**</span></td><td rowspan="2" style="background-color: rgb(53, 152, 219); width: 152.083px;"><span style="color: rgb(255, 255, 255);">**Enable Pivot Hint**</span></td><td colspan="2" style="background-color: rgb(53, 152, 219); width: 279.166px;"><span style="color: rgb(255, 255, 255);">**Pivot Hint**</span></td></tr><tr><td style="background-color: rgb(53, 152, 219); width: 125.083px;"><span style="color: rgb(255, 255, 255);">**X**</span></td><td style="background-color: rgb(53, 152, 219); width: 154.083px;"><span style="color: rgb(255, 255, 255);">**Y**</span></td></tr></thead><tbody><tr><td style="width: 185.083px;">NeedleBmp</td><td style="width: 152.083px;">TRUE</td><td style="width: 125.083px;">17.50</td><td style="width: 154.083px;">250.00</td></tr><tr><td style="width: 185.083px;">Needle\_Lighter</td><td style="width: 152.083px;">TRUE</td><td style="width: 125.083px;">241.00</td><td style="width: 154.083px;">245.00</td></tr><tr><td style="width: 185.083px;">Numbers\_0-24Bmp</td><td style="width: 152.083px;">TRUE</td><td style="width: 125.083px;">325.00</td><td style="width: 154.083px;">329.00</td></tr><tr><td style="width: 185.083px;">Numbers\_0-8Bmp</td><td style="width: 152.083px;">TRUE</td><td style="width: 125.083px;">325.00
        
        </td><td style="width: 154.083px;">329.00</td></tr><tr><td style="width: 185.083px;">Points\_BlueBmp</td><td style="width: 152.083px;">TRUE</td><td style="width: 125.083px;">282.00</td><td style="width: 154.083px;">282.00</td></tr><tr><td style="width: 185.083px;">Points\_Blue\_RedBmp</td><td style="width: 152.083px;">TRUE</td><td style="width: 125.083px;">282.00</td><td style="width: 154.083px;">282.00</td></tr></tbody></table>
        
        <div drawio-diagram="8501"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-08/drawing-5-1754049472.png" alt=""/></div>
5. In the Toolbox panel's **\[Controls\]** section under "Common" **copy** the **Gauge Control** either via the context menu entry "Copy" or via the keyboard &lt;Ctrl&gt;+C. **Paste** the Gauge Control into the Solution Explorer's folder "Solution &gt; Controls" either via the context menu entry "Paste" or via the keyboard &lt;Ctrl&gt;+V. 
    - A copy of the Gauge Control has been created in the Scene Composer solution's Controls folder.
6. In the Solution Explorer panel **rename** the newly copied Gauge to **"Custom\_Gauge"** either via the context menu entry "Rename" or via the keyboard &lt;F2&gt;. 
    - The copy of the Gauge Control in the Solution Explorer's Controls folder is called "Custom\_Gauge". <p class="callout info">The image below shows where to copy the Gauge Control from and where to copy it to.</p>
        
        <div drawio-diagram="8500"><img src="https://doc316en.candera.eu/uploads/images/drawio/2025-08/drawing-5-1754044266.png" alt=""/></div>