Advanced Cluster Part 2

In this part of the Advanced Cluster Best Practice the Custom_Gauge control will be extended with a ForegroundImage and a NeedleEffectImage and new images will be configured to change the control's appearance completely.

Restructuring Custom_Gauge Control

1. In the Solution Explorer double-click the "Custom_Gauge"Custom_Gauge".
   • The control "Custom_Gauge"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"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 cloneright-click on the "BackgroundImage" usingand choose [Clone...] from the context menu's [Clone...].menu. In the opening "Clone Item" dialog enter "ForegroundImage" as name.name and press [OK].
   • A clone of "BackgroundImage" has been created. Its name is "ForegroundImage". The Scene Tree now looks as in the image below.
     
     
     
5. Let'

Exchanging Custom_Gauge Control's changeImages

In steps 1 - 3 of this section the Custom_Gauge new images for the ForegroundImage and BackgroundImage nodes will be configured. These steps need to be performed for the BackgroundImage node as well as for the Foreground Image node.

In steps 4 - 5 of this section the NeedleImage will be cloned and the images displayedof by BackgroundImageNeedleImage and ForegroundImage:NeedleEffectImage will be exchanged.

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 the magnifying glass icon to the property's right.

• The [Choose Item] dialog will be displayed.
  
  

In the [Choose Item] dialog choose the appropriate new 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. It should look like the image below.

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

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

  
  
  

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.

  
  
  

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. It should look like the image below (the needle is pointing to 3 o'clock).

  Node	ProvideImageProperty's image
  NeedleImage	Solution > Resources > Bitmaps > NeedleBmp
  NeedleEffectImage	Solution > Resources > Bitmaps > Needle_LighterBmp

  
  
  

Rotation panel

•select Clickthe NeedleImage.NeedleImage Renamenode. In the Scene Tree panel's right side rename the existing SetRotation behavior according to "SetRotation_Needle"

• Click NeedleEffectImage. Rename the existingtable below. Repeat the same steps for the NeedleEffectImage node.

The SetRotation behaviorbehaviors toof "SetRotation_Effect".NeedleImage Dragand NeedleEffectImage have been renamed. Node New Name of SetRotation Behavior NeedleImage SetRotation_Needle NeedleEffectImage SetRotation_Effect In the "SetRotation_Effect"Scene behaviorTree intopanel select the Custom_Gauge node. In the Scene Tree panel's right side select the InterpolateValue behavior. In the Properties panel's [Receivers] section press the [+] button in the top noderight (Custom_Gauge)corner.

•This Click[+] Custom_Gauge.button Dragis marked in orange in the image of step 4.

In the Properties panel's Receivers section you can see that a new line for a new Receiver is added for the InterpolateValue behavior.

Press the magnifying glass icon next to the new Receivers 1 entry.

The [Choose Item] dialog will be opened.

Select the behavior SetRotation_Effect, which can be found under the path given below, and click [OK].

The NeedleEffectImage's SetRotation_Effect behavioris referenced as one of the Receivers of the CustomGauge's InterpolateValue

•

behavior Lastly,as dragyou can see in the imaged below. Set Rotation_Effect Path

Custom_Gauge > Group_Bitmaps > NeedleEffectImage > SetRotation_Effect

Configuring Effects and MapValue Behavior's Limits