Dundas Gauge for Reporting Services Send comments on this topic
Images
See Also

Glossary Item Box

Overview

This topic discusses images, and how they can be used with Dundas Gauge for Reporting Services™.

Custom images often have a strong visual impact, and can enhance your gauges. A good example of this is using a custom image as a needle pointer.

Image Types and Pathnames

There are three ways by which images are used in the Gauge:

1)  Top images, which are placed on top of the Gauge control.

2)  Gauge container images, which can be placed at any location within the Gauge control.

3)  Gauge element images (e.g. pointers, back frames, etc. ), displayed within the gauge element.

Image paths can be one of the following:

  1. Absolute path (e.g. http://www.MySite.com/Images/myImage.jpg).
  2. Absolute path (e.g. "c:\myImage.jpg).
  3. Relative path, which must be relative to the report and accessible (e.g. "../myImage.jpg"").

Gauge Control Top Images

A top image can be used to simulate a casing over a gauge, thereby giving your gauge a whole new look.

To add a top image use the Advanced Tab of the Gauge Designer dialog. Select the Gauge control, and then set the TopImage property (this is also where the TopImageTransColor property mentioned below is set).

In order to view the underlying gauges below a top image a transparent area must be set within the top image.  The transparent area is determined by the color set by the TopImageTransColor property (see figure below). 

 

Figure 1: The first image (shown top-left) displays a Gauge with no top image. The the second image (shown top-right), has a top image that does not have a transparent color assigned to it. The third image (shown bottom-left), has a top image with white as its transparent color.

 

Gauge Control Images

A gauge image can be added to the control's Images property, and can be placed anywhere within the control.

To add an image to the control's Images collection use the use the Advanced Tab of the Gauge Designer dialog. Select the Gauge control, and then open the GaugeImage collection editor using the Images property (see figure below). Once the editor is opened you can add images and set their properties (e.g. transparent color).
 

Gauge Image Collection Editor
Figure 2: Gauge Image Collection Editor.

The parent of the gauge image can be modified by using the Parent property, which will affect the coordinates system of the image.

To rotate the image, set the Angle property. 

Gauge images fully support transparency via the following properties:

Gauge Element Images

Images can be used to represent gauge elements by setting the element's Image property.

To assign an image to an element use the Advanced Tab of the Gauge Designer dialog. Select the desired element (e.g. a needle pointer), and then set its image-related properties in the Image property section (see figure below).
 

Adding Image to Pointer
Figure 3: Using the Advanced Tab of Gauge Designer dialog to set a needle pointer's image-related properties.

A custom pointer image can be re-positioned by modifying the Pointer.ImageOrigin property.  Also, the Pointer.ImageTransColor will add transparency to the image. 

Circular gauge pointers allow for a cap image to be set via the CircularPointer.CapImage property.  This allows for the needle circle (e.g. cap) to be represented by an image.  Once added this image can be re-positioned by modifying the CircularPointer.CapImageOrigin property.

The background of the frame and a state indicator can be also be represented with custom images, similar to pointers.

See Also

©2008. All Rights Reserved.