Color Selector

The color selector is used in all cases where the color of a page, a widget or a shape can be changed (excepting pipes).

The Select Color dialog

In a few instances, such as when changing the background color of a page, a miniature color selector will be displayed. The miniature version is effective for quickly selecting a color when the full range of options is not required. Use the More Colors button in the miniature selector to open the full color selector.

This topic focuses on the options in the full version of the color selector.

For your convenience, the last several colors used are provided at the top left of the selector, allowing you to quickly match a new object to the color of an existing one.

A range of basic colors and matching shades is provided to help save you time when developing your applications. The second from the left is Active Orange, used with the Image Change widget.

The Pick Color tool works within any VTScada window, even though the eyedropper image appears only within the Idea Studio. In other VTScada windows, clicking the standard pointer on any object will pick up that object's color for the selector.

Numeric color values may be provided using either Hue-Luminosity-Saturation or Red-Green-Blue values. You may also set an opacity value if you would like the object being colored to be partially or completely transparent.

The color sample area and sliders are designed to be intuitive to use.

Note: Color values are stored in code using hexadecimal aRGBClosed A colour value, defined as four, two-digit hexadecimal values. Alpha - Red - Green - Blue. An Alpha value of FF is assumed if only the RGB values are provided. values, having the form "<AARRGGBB>" for alpha, red, green, blue, where "alpha" refers to opacity.

Active Orange

Active Orange is not supported with .PNG format files. When creating an image to use in an Image Change widget, or selecting one to be covered by an Image Change with no image of its own, use the .BMP format.
If tiling an Image Change over a background image that contains areas of Active Orange, the Color Replace property of that background image must be set to Active Orange. That property cannot be set when an image is used as a page background.

The shade known as Active Orange, or Orange 241 has been designated to work with the Image Change widget.

An image change, drawn without a selected image, is a rectangular region that will change color as the linked tag's value changes. The region will be visible only where it is above something drawn using Active Orange (see note, above).

Active orange is defined as color 241 in the VTScada palette, or the RGB value, R=255, G=160, and B=0, with full opacity. ("<FFFFA000>"). In the Select Color dialog, it is the second color in the row of Basic Colors.

The following example shows a static image that includes an area of Active Orange. An Image Change widget, linked to a digital status tag, is drawn above the region. As the linked tag changes in value between state 0 and state 1, only the region of the Image Change above the Active Orange swatch will be visible and change color. See also: Image Change Widget

The dashed lines in the second image mark the boundary of the Image Change. It does not matter that covers a larger area than the orange triangles as only the portion on top of the Active Orange color will be visible.

Transparent Black

In imported images that do not support transparency, areas that are pure black in color (RGB value, #000000) will be rendered as fully transparent in VTScada.

Transparent black is not supported with .PNG files or any other format that supports transparency. Save your image file using the .BMP format if you wish to use this feature.

Any parts of an image that are drawn using this color will be transparent when placed on a page or used as an icon.

To see an example of this at work, try opening any of the equipment graphics provided by VTScada using a graphic software program such as Paint. You will notice that all equipment objects actually have black backgrounds, however, when these images are placed on a VTScada application page, the backgrounds appear to be transparent. An example follows:

An image, with areas drawn using pure black:

The same image drawn on a white VTScada page:

To create your own custom graphics that include transparent areas, use the transparent black color wherever you want background objects on the page to show through.