11.2 Working with Custom Graphics

While building the Booster Station application page, you had the opportunity to experience the process from beginning to end, as you added the equipment piece by piece. Although this process is certainly functional for less complex equipment arrangements, there may be situations where you are building highly complex monitoring and control layouts of plant floors, geographical areas, and so forth. In such circumstances, it is more logical to use detailed static images as a page background, rather than drawing each portion of the background piece by piece. Examples of situations warranting background bitmaps might be station or plant floor layouts, detailed equipment images, geographical maps, scanned images, construction drawings, and so forth.

 

To demonstrate how to install and configure background bitmaps, we have provided you with a detailed equipment image to use as a background for the chlorination unit application page.

In order for a custom background or equipment bitmap to be accessible by VTS, it must be stored in the correct location. In this exercise, you will move the background bitmap to the appropriate directory so that in the exercise that follows, you can use it for the Chlorination Unit application page.

 

Whenever you create a new application, VTS automatically creates an application directory within the installation directory to house the pages, tags, configuration files and other necessary elements for your application. Custom graphics for your application can are also stored within your application's directory.

 

As you will see in this exercise, there is a "Bitmaps" directory within your application directory. This is where all the custom bitmaps for your application can be stored for access by VTS. When you open the "Bitmaps" directory, there is a "Backgrounds" directory within it. It is in this "Backgrounds" directory that you will store the new background bitmap for the Chlorination Unit application page.

 

The instructions that follow will first guide you to the location of the "custom" backgrounds, and will then help to correctly place copies of them so that your application has access to them.

 

1.  Start Windows Explorer (or your preferred file management utility) and navigate to the VTS installation directory to which you installed the VTS software.

2.  Once inside the VTS installation directory, navigate to a directory named "Example".

3.  Within the "Example" directory, you will find a "Bitmaps" directory. Open it.

4.  Within the "Bitmaps" directory is a "Backgrounds" directory. Open it. Two bitmap image files are contained within the "Backgrounds" directory. "TutorS.bmp" is a background bitmap designed for an 800 X 600 screen display, while "TutorL.bmp" is designed for a 1024 X 768 screen display.

Figure 141

5.  Copy the appropriate bitmap background file (based on your screen size) from the "Backgrounds" directory. If you are unsure which size to use, copy both.

6.  Navigate to your application directory within the VTS installation directory. Because we named our tutorial application "Tutorial", look for the "Tutorial" directory.

7.  Within the "Tutorial" directory, you will find a "Bitmaps" directory. Open it.

8.  Within the "Bitmaps" directory is a "Backgrounds" directory. Open it.

9.  Paste the bitmap background file "TutorS.bmp" (or "TutorL.bmp") into the "Backgrounds" directory.

10. Close Windows Explorer and return to the tutorial application.

Now that the background bitmap has been copied to the appropriate location, it is accessible by VTS from within the application.

In the exercise that follows, you will add the background bitmap to the Chlorination Unit application page.