Top  | Previous | Next

Image

display_Image

Description

The image component is a deceptively powerful component. While you can use other components, like the Label, to display images as well, this component gives you much more flexibility. In particular, this component has 4 important features for displaying images:

1.Scaling.
2.Rotation. You can use rotation to create spinning animations by binding it to a Timer component.
3.Color Tinting. Dynamically apply a color tint to an image to allow it to display realtime status.
4.Color Swapping. Use color swapping to change one specific color in an image to another, on the fly. Also used for realtime status display.

 

To choose an image, simply press the browse button ( folder_view ) next to this component's Image Path property. You can drag new images (*.png, *.gif, *.jpg, *.bmp) into the Image Management window to upload them.

 

information2 Images are stored on the Gateway, not in your window or project. This means that you can alter an image globally, and it will affect all windows in all projects. It also means that you must be careful to migrate custom images if you do project backups (as opposed to Gateway backups, which will automatically include both projects and images)

Properties

Appearance

Styles

Contains the component's styles

Scripting name

styles

Data type

Dataset

Flags

bindable | expert

Behavior

Use Cache

If false, this image will bypass the client image cache and load the image directly from the source.

Scripting name

useCache

Data type

boolean

Flags

expert

Load In Background

Controls whether or not the image loading takes place on the UI thread or a background thread.

Scripting name

loadInBackground

Data type

boolean

Flags

expert

Common

Name

The name of this component.

Scripting name

name

Data type

String

Flags

bindable

Enabled

If disabled, a component cannot be used.

Scripting name

componentEnabled

Data type

boolean

Visible

If disabled, the component will be hidden.

Scripting name

visible

Data type

boolean

Flags

bindable

Border

The border surrounding this component. NOTE that the border is unaffected by rotation.

Scripting name

border

Data type

Border

Mouseover Text

The text that is displayed in the tooltip which pops up on mouseover of this component.

Scripting name

toolTipText

Data type

String

Cursor

The mouse cursor to use when hovering over this component.

Scripting name

cursorCode

Data type

int

Values

0

Default

1

Crosshair

2

Text

3

Wait

12

Hand

13

Move

4

SW Resize

5

SE Resize

6

NW Resize

7

NE Resize

8

N Resize

9

S Resize

10

W Resize

11

E Resize

Data

Image Path

The relative path of the image.

Scripting name

path

Data type

String

Flags

bindable

Disabled Image Path

The relative path of the image to be displayed when this component is not enabled.

Scripting name

disabledPath

Data type

String

Flags

expert

Data Quality

The data quality code for any tag bindings on this component.

Scripting name

dataQuality

Data type

int

Flags

bindable | expert

Image Manipulation

Stretch Mode

Sets the stretch mode for this image.

Scripting name

stretchMode

Data type

int

Values

0

No Stretch

1

Bounds

3

% Bounds

2

Parameters

Stretch Width

If stretch mode is "Parameters", this will be the stretched width of the image
If stretch mode is "% Bounds", this will be the percentage of the component's width.

Scripting name

stretchWidth

Data type

int

Flags

bindable

Stretch Height

If stretch mode is "Parameters", this will be the stretched height of the image
If stretch mode is "% Bounds", this will be the percentage of the component's height.

Scripting name

stretchHeight

Data type

int

Flags

bindable

Color Swap Filter

Swap a specific color to another.

Scripting name

useColorSwap

Data type

boolean

Flags

bindable

Swap From

If the Color Swap Filter is on, this color will be changed to the Swap To color.

Scripting name

swapFromColor

Data type

Color

Flags

bindable

Swap To

If the Color Swap Filter is on, the Swap From color will be changed to this color.

Scripting name

swapToColor

Data type

Color

Flags

bindable

Swap Threshold

Threshold (0-255) for the swap from color matching. 0 is no tolerance, 255 is max tolerance.

Scripting name

swapThreshold

Data type

int

Flags

expert

Tint Filter

Tint the entire image a color (works best with greyscale images)

Scripting name

useTint

Data type

boolean

Flags

bindable

Tint Color

If the Tint Filter is on, this is the color of the tint.

Scripting name

tintColor

Data type

Color

Flags

bindable

Flip Horizontal

Flip (mirror) the image horizontally.

Scripting name

flipHorizontal

Data type

boolean

Flip Vertical

Flip (mirror) the image vertically.

Scripting name

flipVertical

Data type

boolean

Rotation

The angle of rotation in degrees.

Scripting name

rotation

Data type

int

Scripting

Events

The following event sets are fired by this component. See Component Event Handlers to learn more.

•mouse
•mouseMotion
•propertyChange

 

Scripting Functions

This component has no special scripting functions.