Advanced Cluster Part 2

•

WeIn willthe startSolution modifyingExplorer double-click the "Custom_Gauge".

The control "Custom_Gauge" will be opened in the Scene Editor, ready to be edited. Scene Tree will display the tree of nodes the control is composed of.

In the Scene Tree panel rename the "Group" node to "Group_Bitmaps".

In the Scene Tree panel the Group node has been renamed.
Rename from Rename to Group Group_Bitmaps
In the Scene Tree panel select the root node Custom_Gauge. In the Properties panel's [Layouter] section change the Layout type from "Overlay" to "None".

The Layout Type has been changed.
In the Scene Tree panel clone the "BackgroundImage" using the context menu's [Clone...]. In the opening "Clone Item" dialog enter "ForegroundImage" as name.

A clone of "BackgroundImage" has been created. Its name is "ForegroundImage". The Scene Tree now looks as in the image below.
Let's change the images displayed by double-BackgroundImage and ForegroundImage: In the Scene Tree panel select the image. In the right side of the Scene Tree click on the [Fusion...] button.

Fusion will be opened, displaying the Fusion diagram for the image.

In the Fusion diagram change the ProvideImageProperty's image by clicking atthe magnifying glass icon to the property's right.

The [Choose Item] dialog will be displayed.

In the [Choose Item] dialog choose the image for BackgroundImage given in the table below and click [OK].

The images displayed by the BackgroundImage and ForegroundImage nodes have been changed. When activating the Scene Editor the Custom_Gauge with new Foreground and Background image can be viewed.

To switch to the Fusion diagram of the second image simply double click it in the solutionScene explorerTree panel.

•

Node ProvideImageProperty's image BackgroundImage Solution > Resources > Bitmaps > Points_Blue_RedBmp ForegroundImage Solution > Resources > Bitmaps > Numbers_0-8Bmp
In the Scene Tree,Tree renamepanel thecreate “Group” to “Group_Bitmaps”

• Change the Layout Type of Custom_Gauge from Overlay to None

• Inside of the group,a clone the “BackgroundImage” and name it “ForegroundImage”

• Change properties for BackgroundImage: in the behavior “ProvideImageProperty", change the picture from “GaugeSpeedBmp” to “Points_Blue_RedBmp”

• Change properties for ForegroundImage: in the behavior “ProvideImageProperty", change the picture from “GaugeSpeedBmp” to “Numbers_0-8Bmp”

• Cloneof the "NeedleImage" and name it "NeedleEffectImage"

.

•

ChangeA propertiesclone forof NeedleImage:"NeedleImage" has been created. Its name is "NeedleEffectImage". The Scene tree looks as in the behaviorimage "ProvideImageProperty",below. change

Please follow the pictureorder from "GaugeNeedleBmp" to "NeedleBmp"

• Change properties for NeedleEffectImage: inof the behavior "ProvideImageProperty", change the picture from "GaugeNeedleBmp" to "Needle_LighterBmp"

• Select the "NeedleEffectImage"nodes in the scene tree andto drag&dropensure ittheir aboveproper visibility.

Let's change the "NeedleImage"images sodisplayed itby getsNeedleImage renderedand beforeNeedleEffectImage. it.This Alsocan placebe done similarly to above. Select the "ForegroundImage"image, open Fusion and click on the bottommagnifying soglass itnext getsto renderedthe lastProvideImageProperty's image property. Configure the images given in the table below.

The images displayed by the NeedleImage and NeedleEffectImage nodes have been changed. When activating the Scene Editor the Custom_Gauge with new Needle and NeedleEffect image can be viewed. Node ProvideImageProperty's image NeedleImage Solution > Resources > Bitmaps > NeedleBmp NeedleEffectImage Solution > Resources > Bitmaps > Needle_LighterBmp

• Click NeedleImage. Rename the existing SetRotation behavior to "SetRotation_Needle"

• Click NeedleEffectImage. Rename the existing SetRotation behavior to "SetRotation_Effect". Drag the "SetRotation_Effect" behavior into the top node (Custom_Gauge)

• Click Custom_Gauge. Drag the SetRotation_Effect behavior as one of the Receivers of InterpolateValue

• Lastly, drag this SetRotation_Effect behavior back to the NeedleEffectImage in the Scene Tree. You will notice that an arrow sign will appear at the right side of SetRotation_Effect. Thanks to this, the needle effect will be rotated together with the needle.

• Go to the “NeedleEffectImage” and delete effect "Blend Mode"

• At the "NeedleEffectImage" change the settings of effect “BitmapBrushColorBlend”:
ColorBlendFactorSrc = DestColor, ColorBlendFactorDst = SourceAlpha

• Go to the “Custom_Gauge” behavior “MapValue” and set these properties:
OutputMin = -128.5, OutputMax = 128.5