11.3 Adding a Background Bitmap to the Chlorination Unit Application page

 

In the last exercise, you stored the background bitmap in the Backgrounds directory in the Bitmaps directory within our application directory (i.e. "C:\VTS\Tutorial\Bitmaps\Backgrounds\"). As you will see, this makes the background accessible in VTS via the Backgrounds group of the Select Bitmap dialog. The steps below will assist you in adding the background bitmap to the Chlorination Unit application page.

 

1.  Click the Libraries button in the Configuration Toolbox.

The Configuration dialog opens.

Figure 142

2.  Click on the plus sign beside pages to open the list.

3.  Right-click on the "Chlorination Unit" application page from the list of pages.

4.  Click the Properties of the context menu.

The Page Properties dialog opens and displays the current configuration for the Chlorination Unit application page.

5.  Select the Properties tab

6.  Select the Use Bitmap checkbox. The Set Bitmap button becomes enabled.

7.  Click the Set Bitmap button. The Select Bitmap dialog opens and displays the bitmap groups.

8.  Click the Backgrounds group button. The background bitmap that you added in the last exercise now appears in the Backgrounds group.

9.  Select the background bitmap (either "TutorS.bmp" or "TutorL.bmp") depending upon your screen resolution.

You are returned to the Page Properties dialog where the background bitmap is now displayed in the background preview area. The Page Properties dialog should appear similar to Figure 143.

Figure 143

10. Click the OK button. The Page Properties dialog closes.

11. Click the Close button on the Page Manager. The Page Manager closes.

The background bitmap has been successfully added to the newly created Chlorination Unit application page. Use the menu or the page change buttons to navigate to the Chlorination Unit application page. It should appear similar to Figure 144.

Figure 144

The background bitmap includes images of a mixer, a dry chemical feeder, a water valve (delineated in orange), and a mixing tank graphic. These images have been provided to help us configure the page quickly.  Note that having these images available does not change the basic process of first creating, then drawing a tag.

 

Note the orange coloring on the mixer, the dry chemical feeder and the water valve. This is a special shade of orange known as "Active Orange (241)" that enables us to combine sections of the image with a special tag drawing method that will affect the orange color but will not change the appearance of the surrounding areas of the graphic. The tag drawing method that has been designed to change the appearance of "Active Orange" areas is the Image Change drawing method.

Note: If you intend to create background bitmaps with areas you wish to be affected by the Image Change drawing method, you can create active orange will the following RGB values: R=255, G=160, and B=0. Use this orange color to delineate those areas of a custom background bitmap or other graphic that you wish to change color according to tag value. Further information on special colors in VTS can be found in the VTS Developer's Guide.

For the mixing tank, you will add a Top Bar drawing method to portray the level of fluid in the tank. This process is very similar to the process you used when adding the Color Fill drawing method to show the level of water in the booster tank.

 

The exercises to complete the chlorination unit begin with tag creation.