Advanced Cluster Part 3

•• In the “Custom_Gauge”“Custom_Gauge”, add new “StackLayout”“StackLayout” and name it “StackLayout_Texts”“StackLayout_Texts”

•• Add 2 “Text”“Text” controls and 1 ““Text Value”Value” control to the “StackLayout_Texts”“StackLayout_Texts”, rename the text controls to “Text_Top”“Text_Top” and “Text_Bottom”“Text_Bottom”

•• Ensure that the order of the items inside of this layout is the same as shown in the picture above.

•• Set these parameters: Arrangement = Vertical, MinimumSize = 250, VerticalAlignment = VCenter

•• Set these “Text_Top”“Text_Top” values: VerticalAlignment = VCenter, HorizontalAlignment = HCenter, Text Alignment = Center, Text Style = OpenSans35, Text = “RPM”“RPM”

•• Same for the “Text_Bottom”“Text_Bottom” values, but set Text = “”“” (to be empty)

•• Almost the same for the “Text_Value”“Text_Value”, with these differences: Format Text = ““%04d”04d”, Text Style = Vera96

•• Select the “StackLayout_Texts”“StackLayout_Texts” and add 2 Value behaviors (Toolbox->Behaviors->Value Processing->Value). Name them as “Value_TextPos_X”“Value_TextPos_X” and “Value_TextPos_Y”“Value_TextPos_Y”

•• To each of these behaviors, insert 1 ““Set Position”Position” behavior (Behaviors->Value Processing->Transformation->Set Position) as Receiver. Name them ““Set Position_X”Position_X” and ““Set Position_Y”Position_Y”

•• For both of them, set the target node Custom_Gauge->StackLayout_Texts. Select the proper axis (X for Set Position_X, Y for Set Position_Y)

•• For the “Value_TextPos_X”“Value_TextPos_X” behavior set the Receiver property Variant= (Float) 205 and for the “Value_TextPos_Y”“Value_TextPos_Y” behavior, configure Variant = (Float) 230. 

•• Click at the “Custom_Gauge”“Custom_Gauge” control and put ““Forward Value”Value” behavior into it

•• Set its target node to ““Custom_Gauge->StackLayout_Texts->TextValue”TextValue”

•• Go to the “Custom_Gauge”“Custom_Gauge”, click on the “ControlValueProvider”“ControlValueProvider” behavior and set the Receivers Maximum value to 8000. Then try to change its Variant value so you can see the text and needle updated.

•• Right-click at the “Custom_Gauge”“Custom_Gauge” and select ““Control Properties…”Properties…”. We will choose which properties should be available from the scene as the control properties

•• Follow the settings from the pictures below:                                                                                                       

ForegroundImage:

BackgroundImage:

NeedleImage:

NeedleEffectImage:

Text_Bottom:

Text_Top:

Text_Value:

Value_TextPosX and Value_TextPosY:

•• The custom gauge control should now be finished and ready to use