Build a Custom Meter

A meter is built up from several parts. By mixing, matching and altering the various components, you can build nearly any meter you can imagine.

The components of a meter include the following mix:

Static components:

•    A background.  This is a static image that provides a visual backdrop for the meter's needle.

•    A bezel.  This is a decorative border or edge for the overall meter.

•    A glass.  This transparent bitmap provides the illusion of a class cover on the meter.  A variety of images are available to simulate various background reflections.

Active components:

•    A scale. While not animated itself, the scale is considered to be an active component since it can be linked to a tag that provides the minimum and maximum values of its range.  You have a choice of bitmaps for both the major division tick marks and for the minor tick marks that appear between each major division.

•    A legend.  The numbers displayed for the scale's range are considered to be an active component since you have the option of linking the minimum and maximum values of the range to a tag's scaled values.

•    An indicator. This is the animated needle that displays the current value of the meter. It takes its value from the tag whose value is being displayed by the meter.  You have a choice of bitmap images to use for the indicator needle itself.

The static components are added using the Bitmap button of the toolbox.  When selecting an image to use, look for the Meters group.  This includes the subgroups backgrounds, bezels and glass as well as two subgroups used by the active components: indicators and tick marks.

 

The active components are added using the Meter Parts library.

 

While you can add the component parts in any order (using the Bring to Front and Send to Back commands to adjust their display order when necessary), you may find it easier to build up the meter from background to foreground.  That is the technique used in the following example.

Part 1: The background.

Open the configuration toolbox

1.   Click on the bitmap command

2.   Drop the sample "X" on the page, approximately where you would like the meter to be located.

The VTS Graphic Editor will open.

3.   Click on Select Bitmap button

4.   In the Select Bitmap dialog, scroll down to find the Meter parts group

5.   Click on Meter Parts

The meter parts library opens

6.   Click on Backgrounds

7.   Select a background. 

In this example, Background7 will be used.

You could adjust the hue, saturation, contrast, etc. of the background at this point if you wished.

8.   Click on OK.

At the end of part 1, your custom meter should look like the following image. DO NOT adjust the size of the image at this time.

 

Part 2 – The Legend

1.   In the configuration toolbox, click on the Libraries button.

The Libraries dialog opens.

2.   Click on the plus sign beside Drawing Tools to expand the menu.

3.   Click on the plus sign beside Meter Parts to expand the menu.

4.   Right-click on Radial Legend to open its context menu

5.   Click on Draw

6.   Drop the legend on the background

Initially, the legend will be difficult to see against the dark background. In the next step you will select a lighter color for it. 

The VTS Graphic Editor should now be open.

7.   Click on the Color button to open a Color Selector dialog

8.   Select a light color (white or pale grey).  Close the color selector.

9.   Select an analog input or analog status tag to use as the initial data source (see note at the beginning of this example)

10. Select a font tag to use for the legend text – MeterFont is a good choice.

11. Set the Minimum Angle to 245 and the Maximum Angle to 115.

Both the minimum and maximum angles are measured clockwise from the 12:00 position. The minimum angle sets the position for the start of the scale and the maximum angle for the end of the scale range.

12. Set the number of labels to 5.

The choice of how many labels to have depends on the data range.  5 works nicely for data ranging from 0 to 100 as shown in the following image, but 4,  6 or some other number might be a better choice for other ranges.

13. Check the box to use the tag's scaled min and max values

You could set an arbitrary range, but in general it is better to use the tag's scaled output to set the data range.

14. Click on okay to close the dialog.

 

At the end of part 2, your custom meter should now look similar to the following:

 

Part 3 – The Tick Marks

1.   Click on the Libraries button in the configuration toolbox.

2.   Open the Meter Parts Library.

3.   Right-click on Draw Scale to open its context menu.

4.   Select Draw.

5.   Drop the sample tick marks on the screen, near the top of meter pieces you have drawn previously.

The VTS Graphic Editor will open.

6.   Select Radial Scale in the Scale Options area.

7.   Set the Minimum Angle to 245.

8.   Set the Maximum Angle to 115.

The minimum and maximum angles should match those set for the legend, as described in part 2.

9.   Set the number of Major divisions to 4.

10. Set the number of Minor divisions to 5.

The number of major divisions should be one less than the divisions set for the legend (part 2). The number of minor divisions you set is arbitrary – use however many provide the most information without becoming crowded. 

 

The following few steps adjust the color and appearance of the tick marks.  There is no particular reason for the values chosen other than that the author felt that these looked right.  Feel free to experiment with the settings – the following values are provided for the sake of example only.

11. Set the Hue to -60 (Hue shifts the colors in the image to new values)

12. Set the Saturation to 1.6 (Saturation is a measure of how deep the  hue appears)

13. Set the Brightness to 1.2 (Brightness is a measure of how much light is shining on the object)

 

The tick marks need to be set inside the area of the meter. The next few steps will scale them down to 75% of their original size.

14. In the Graphic Editor menu, click on Scaling then Overall Scaling (refer to the following image for guidance).

15. Select the Advanced Option

16. For the input mode, select Expression

17. Set a constant value of 0.75 as the overall scaling amount

18. Click on OK to close the VTS Graphic Editor.

19. Select all three of the meter pieces that you have drawn so far.

20. In the configuration toolbox, click first on the Align Vertical Center button, then on the Align Horizontal Center button.

Part 4 – The Indicator Needle

1.   Re-open the Meter Parts Library if it is not still open from the last step.

2.   Right-click on Radial Indicator to open its context menu.

3.   Select Draw.

4.   Drop the sample radial indicator on the screen, near the center of meter pieces you have drawn previously.

The VTS Graphic Editor will open.

5.   Set the Data Source to be the tag you decided on at the beginning of this example.

6.   You could select a different needle to use at this point.  To do so, click on Select Bitmap button. Open the Meter Parts group, then the Indicators group, then the Radial group.

7.   Select the Dampen Movement checkbox in the Options area.

8.   Set the Minimum Angle to 245

9.   Set the Minimum Angle to 125

The minimum and maximum angles need to match those provided for the legend in part 2.

 

The following are suggested values only, chosen for visibility. See part 3 for a discussion of these settings.

10. Set the Hue to -150.

11. Set the Saturation to 0.5

12. Set the Brightness to 3

13. In the Scaling Options, check the option to use the tag's scaled min and max values.

14. Click on OK to close the graphic editor dialog.

 

If necessary, select all the parts you have drawn for the meter so far, (see Selecting Multiple Objects on a Page) then use the align vertical center and align horizontal center buttons.

 

Close the Libraries dialog.

 

Part 5 – The Glass

1.   Re-open the configuration toolbox if it isn't still open.

2.   Click on the bitmap command

3.   Drop the sample "X" on the page, close to the background image.

There is no point trying to align images at this stage – close is fine. 

The VTS Graphic Editor will open.

4.   Click on Select Bitmap button

5.   In the Select Bitmap dialog, scroll down to find the Meter parts group

6.   Click on Meter Parts

The meter parts library opens

7.   Click on Glass

8.   Select a round glass. 

In this example, Glass12 will be used.

9.   Click on OK.

 

Part 6 – The Bezel

1.   Re-open the configuration toolbox if it isn't still open.

2.   Click on the bitmap command

3.   Drop the sample "X" on the page, close to the background image.

There is no point trying to align images at this stage – close is fine. 

The VTS Graphic Editor will open.

4.   Click on Select Bitmap button

5.   In the Select Bitmap dialog, scroll down to find the Meter parts group

6.   Click on Meter Parts

The meter parts library opens

7.   Click on Bezels

8.   Select a bezel. 

In this example, Bezel 12 will be used.

9.   Click on OK.

To finish, select all the parts you have drawn for the meter, then use the Align Vertical Center and Align Horizontal Center buttons.

 

Part 7 – Group the parts into a User Draw Method

1.   Select all the parts of the meter, using a window or crossing selection to ensure that nothing is missed. (See Selecting Multiple Objects on a Page.)

2.   Right-click on any part of the meter – a context menu will open

3.   Click on Group

4.   Provide a name for your custom meter in the New Draw Method dialog box.

5.   Press Enter to set the name.

6.   Click on OK to close the dialog.

The components that you drew earlier will be replaced by an instance of the new draw method and the Drawing Method Editor will open.  You can use this to make adjustments to the component parts.  Note that the indicator needle will be animated in the drawing method editor since it is automatically put into Demo mode.

 For now, simply close the editor by clicking on the X in the upper right corner of the window.