# Advanced Cluster Part 3 In part 3 of this Best Practice the Custom\_Gauge control will be further customized adding controls: - A **TextValue control** to display the gauge's current value numerically - A **Text control** above of the numeric value to display the gauge's scope (e.g. speed) - Another **Text control** below the numeric value, which can be used to display the unit (e.g. km/h) In order to make our control more versatile, various properties of our configured Custom\_Gauge (like all images and text styles) will be made public.

**Public Control Properties** are those that can be configured when using a Custom\_Gauge in a scene.

#### Create and Configure Two TextNodes and a TextValue Node 1. In Scene Composer's Solution Explorer navigate to the path below and double-click on the "Custom\_Gauge" control. - The Scene Tree panel shows the Custom\_Gauge control's tree. - Scene editor displays the Custom\_Gauge control.

Path in Solution Explorer	Control
Solution/Controls	Custom\_Gauge

2. From the **Toolbox** panel's **Nodes 2D** section drag and drop a **StackLayout** into the Scene Tree panel directly onto the Custom\_Gauge node. - In the Scene Tree panel you can see that a **StackLayout** has been created directly under the Custom\_Gauge node. 3. From the **Toolbox** panel's **Controls** section under Common drag and drop **2 Text** controls and **1 Text Value** control into the Scene Tree panel directly onto the StackLayout. - In the Scene Tree panel you can see the **2 Text** controls and the **Text Value** control directly under the StackLayout. 4. In the Scene Tree panel select the **StackLayout** as well as the **2 Text** controls one after the other and rename them according to the table below either via the context menu entry "Rename" or by pressing <F2> on your keyboard. - In the Scene Tree panel you can see that the Controls have been renamed.

Target Item	New Name
StackLayout	StackLayout\_Texts
Text	Text\_Top
Text\_1	Text\_Bottom

5. In the Scene Tree panel re-arrange StackLayout\_Texts and its contents via drag and drop until it looks like in the image below. - The Scene Tree looks as in the image below.

6. In the Scene Tree panel select StackLayout\_Texts controls. In the **Properties** panel under **Layouter** and **Layout** adjust the properties as in the table below. - In the Properties panel you can see that the correct values are set.

Property	Value
Layouter
Arrangement	Vertical
Layout
Vertical Alignment	VCenter
MinimumSize	X	250.00
	Y	0.00

7. In the Scene tree panel select **Text\_Top**, **Text Value** and **Text\_Bottom** one after the other. In the **Properties** panel under Layout and Control configure the properties as in the table below. - In the Properties panel you can see that the correct values are set. - In the Scene Editor the texts are centered and the Text Value appears in a bigger font.

Property	Text\_Top	Text Value	Text\_Bottom
Layout
VerticalAlignment	VCenter	VCenter	VCenter
HorizontalAlignment	HCenter	HCenter	HCenter
Control
Text	RPM	-	<empty String>
Text Style	OpenSans35	Vera96	OpenSans35
Text Alignment	Center	Center	Center
Text Format	-	%04d	-

#### Configure the TextNodes' and TextValue Node's Position 1. In the Scene Tree panel select **StackLayout\_Texts**. In the Scene Tree panel's right side click on the **\[Fusion...\]** button. - Fusion will be opened covering the Scene Editor. - StackLayout\_Texts Fusion diagram will be displayed. It only has one Fusion Node. 2. In Fusion use the StackLayout\_Texts' "Behaviors" connector to add 2 new Fusion Nodes: Connect **2 Value Processing > Value** behaviors to the StackLayout\_Texts Fusion Node.

Please check [Fusion's Basic Operations ](https://doc316en.candera.eu/books/fusion/page/basic-operations#bkmrk-adding-a-fusion-node)documentation on how to add Fusion Nodes.

- In Fusion 2 new Fusion Nodes "**Value**" and "**Value\_1**" have been created. 3. In Fusion select and right-click on the behavior nodes and rename them according to the table below. - In Fusion the Value behavior fusion nodes have been renamed.

Target Item	New Name
Value	Value\_TextPos\_X
Value\_1	Value\_TextPos\_Y

4. In Fusion use the Value behaviors' "Receivers" connectors to add a **Value Processing > Transformation > SetPosition** Fusion Node to each of them. - In Fusion 2 new Fusion Nodes "**Set Position**" have been created, one of which is connected to Value\_TextPos\_X, the other to Value\_TextPos\_Y. 5. In Fusion select and right-click on the behavior nodes and rename them according to the table below. - In Fusion the **Set Position** behavior fusion nodes have been renamed.

Target Item	New Name
Value\_TextPos\_X > Set Position	Set Position\_X
Value\_TextPos\_Y > Set Position	Set Position\_Y

6. In Fusion configure the behaviors' Fusion Nodes according to the table below. - In Fusion the Fusion Nodes' Properties have been changed. - In Scene Editor the position of StackLayout\_Texts has been changed. The texts are now neatly placed inside the Custom\_Gauge control as you can see in the image below.

	Fusion Node
Property	Set Position\_X	Set Position\_Y
TargetNode	Custom\_Gauge > StackLayout\_Texts	Custom\_Gauge > StackLayout\_Texts
TranslationAxis2D	AxisX	AxisY
Property	Value\_TextPosX	Value\_TextPosY
Variant	(Float) 205	(Float) 230

#### Configure Value Forwarding and Maximum Value 1. In Fusion add a **Value Processing > Forward Value** behavior to the **Behaviors** connector of the **Custom\_Gauge** Fusion Node. Configure its **TargetNode** according to the table below. - In Fusion the property will be changed accordingly.

Forward Value Fusion Node
Property	Value
TargetNode	Custom\_Gauge > StackLayout\_Texts > Text Value

2. In Fusion in the **ControlValueProvider** Fusion Node configure the property **Maximum** according to the table below. - In Fusion the the property is changed accordingly. - Custom\_Gauge's Fusion diagram will look as in the image below.

ControlValueProvider
Property	Value
Maximum	(Float) 8000.00

#### Configure Public Control Properties 1. In the Scene Tree panel right click "Custom\_Gauge" and select "**Control Properties...**" from the context menu. - The Configure Public Control Properties dialog will be opened. 2. In the Configure Public Properties dialog the Properties which should be public to the user of the Custom\_Gauge control need to be marked with the "Is Public" checkbox. Check the "Is Public" checkbox and eventually change the image properties' names according to the table and images below. - Image properties necessary for using and configuring the Custom\_Gauge will be made public. - The Custom\_Gauge control is now fully configured and ready to use.

Custom\_Gauge > Group\_Bitmaps >
Property	Is Public	Source	Name
BackgroundImage > ProvideImageProperty	x	Image	BackgroundImage
NeedleImage > ProvideImageProperty	x	Image	NeedleImage
NeedleEffectImage > ProvideImageProperty	x	Image	NeedleEffectImage
ForegroundImage > ProvideImageProperty	x	Image	ForegroundImage

3. In the Configure Public Properties dialog check the "Is Public" checkbox and perform other configurations according to the table and images below. - Image properties necessary for using and configuring the Custom\_Gauge will be made public. - The Custom\_Gauge control is now fully configured and ready to use.

The properties made public in this **Configure Public Properties** dialog will be configurable in the **Properties panel's Controls section**.

Custom\_Gauge > StackLayout\_Texts >
Property	IsPublic	Source	Name
TextBottom	x	Text	Bottom\_Text
	x	TextColor	Bottom\_TextColor
	x	TextStyle	Bottom\_TextStyle
Text\_Top	x	Text	Top\_Text
	x	TextColor	Top\_TextColor
	x	TextStyle	Top\_TextStyle
Text Value	x	FormatText	Value\_FormatText
	x	Style	Value\_Style
	x	TextColor	Value\_TextColor
Behaviors > Value\_TextPos\_X	x	Variant	TextPosX
Behaviors > Value\_TextPos\_Y	x	Variant	TextPosY