Advanced Cluster Part 2

1. In the Solution Explorer 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.
     
     
2. 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

     
     
3. 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.
     
4. 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.
     
     
     
5. Let's change the images displayed by 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.
     
     
     
     
6. In the Fusion diagram change the ProvideImageProperty's image by clicking the magnifying glass icon to the property's right.
   • The [Choose Item] dialog will be displayed.
     
     
7. 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 Scene Tree panel.

     Node	ProvideImageProperty's image
     BackgroundImage	Solution > Resources > Bitmaps > Points_Blue_RedBmp
     ForegroundImage	Solution > Resources > Bitmaps > Numbers_0-8Bmp

     
     
     
8. In the Scene Tree panel create a clone of the "NeedleImage" and name it "NeedleEffectImage".
   • A clone of "NeedleImage" has been created. Its name is "NeedleEffectImage". The Scene tree looks as in the image below.

     Please follow the order of the nodes in the scene tree to ensure their proper visibility.

     
     
     
9. Let's change the images displayed by NeedleImage and NeedleEffectImage. This can be done similarly to above. Select the image, open Fusion and click on the magnifying glass next to the ProvideImageProperty'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