Advanced Cluster Part 1

Create Solution and Setup Render Target

•A Opennew empty solution is created and the Scenerender Composertarget configuration is performed. 

•

OpenCreate a new solution using the Empty Solution template and save it as shown in Creating a new Solution.

A new solution

•is Savecreated and saved.

Activate the solutionRender toTargets yourpanel custom destination

• Importon the resourcetop bitmapsright and select [Display (right0)]. click inIn the SolutionProperties Explorerpanel ->below Solutionchange ->the Resourcesdisplay's ->X Bitmaps)

and Y

•Resolution. A

WindowsThe Openhorizontal Fileand Dialogvertical titledresolution "Importof Resources"the display will be opened.
defined.

•

The Selectaspect allratio of the imagesdisplay inwill folderbe "<cgi-studio-root>/cgi_studio_content/Resources/AdvancedCustomGauge"calculated andautomatically.
press[ Open ].Target Item Setting Value X Resolution
1680 Y Resolution

720

•

Uncheck In the "CreateRender newTargets folderpanel forselect import"Scene2D\Camera checkbox(0). and press [ OK ]

• Now you should be able to seeIn the importedProperties bitmaps in the solution explorer (Solution -> Resources -> Bitmaps). By clicking at a single bitmap in the solution explorer, we can access its properties

• To be able to manipulate with the bitmaps easily, we can predefine their pivot point. Later we will use it as center of needle rotation and also for aligning the bitmaps together. Therefore we need to set the pivot to the middle of a gauge

• Click at the bitmaps andpanel check the "Enable Pivot Hint" checkbox in its properties. Then set these numbers (in pixels) to setEnable theSwapping. pivot

pointSwapping tohas thebeen bitmaps:enabled

NeedleBmp:for xScene2D's =camera.

17.5, y = 250

Needle_LighterBmp: x = 241, y = 245

Numbers_0-8Bmp: x = 325, y = 329

Numbers_0-240Bmp: x = 325, y = 329

Points_BlueBmp: x = 282, y = 282

Points_Blue_RedBmp: x = 282, y = 282

• Delete the Scene3D (right click in the Solution Explorer -> Solution -> Scenes -> Scene3D and press "delete")

• Open the Scene2D (double click in the Solution Explorer -> Solution -> Scenes -> Scene2D)

• Set the

The display size (find the "Render Targets" tab) to X = 1680 and Y = 720 pixels

• Enable the camera swapping. This will leadbe to refreshing the displayrefreshed after each time this scene is rendered.

Camera Enable Swapping Scene2D\Camera(0) TRUE

• Select

In the EditorSolution cameraExplorer optionpanel -

• Now you should be able to moveScenes") and zoomdelete it either using the camera<delete> view.key Theor yellowvia rectanglethe context menu [Delete] as described in Delete a Scene.

A [Delete Items] dialog will showpopup.

Please resolve all dependencies with [Delete Usage Item] (which is the scenedefault) partand thatclick [OK].

Scene3D will be displayeddeleted.

 

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 Pivot Hints for these images need to be configured. Additionally, the Custom_Gauge control will be created.

In the menu bar choose [Import] - [Import Resources...] as described in How to Import Resources.

[Import Resources] dialog will be opened
Navigate to the following folder, select all files provided in this folder and press [Open].
<cgi-studio-root>/cgi_studio_content/Resources/AdvancedCustomGauge

[Import Images] dialog will be opened 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.

Select an item in the Solution Explorer panel to access its properties in the Properties panel.

To

•configure Gothe Pivot Hint, 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. Image Enable Pivot Hint Pivot Hint X Y NeedleBmp TRUE 17.50 250.00 Needle_Lighter TRUE 241.00 245.00 Numbers_0-24Bmp TRUE 325.00 329.00 Numbers_0-8Bmp TRUE

325.00

329.00 Points_BlueBmp TRUE 282.00 282.00 Points_Blue_RedBmp TRUE 282.00 282.00
In the Toolbox ->panel's Controls[Controls] ->section Commonunder and"Common" copy the gaugeGauge controlControl (righteither clickvia -the context menu entry "Copy" or via the keyboard <Ctrl> copy)

•+C. Paste tothe Gauge Control into the controlSolution Explorer's folder "Solution > Controls" either via the context menu entry "Paste" or via the keyboard <Ctrl>+V.

A copy of the Gauge Control has been created in yourthe solutionScene (Composer solution's Controls folder.

In the Solution Explorer -panel rename the newly copied Gauge to "Custom_Gauge" either via the context menu entry "Rename" or via the keyboard <F2>.

The copy of the Gauge Control in the Solution ->Explorer's Controls)Controls folder is called "Custom_Gauge".

•The Renameimage below shows where to copy the gaugeGauge Control from and where to “Custom_Gauge”copy it to.