Skip to main content
Version: 8.1

Vision - Image

Component Palette Icon

The Image component is used to display images. While other components (such as the Label) are capable of displaying images, the Image component has four additional features:

  1. Scaling
  2. Rotation - Rotate to create spinning animations by binding to a timer component.
  3. Color Tinting - Dynamically apply a color tint to an image to allow it to display real-time status
  4. Color Swapping - Color swapping to change one specific color in an image to another in real time.

To choose an image, press the Browse icon () 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.

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)

External Images

The Image component can also be used to show external images stored relative to the local file system on the client. The file path is similar to having your browser view a local document:

file:///C:/folder/anotherFolder/image.PNG

Properties

PropertyDescriptionProperty TypeScriptingCategory
BorderThe border surrounding this component. Options are No border, Etched (Lowered), Etched (Raised), Bevel (Lowered), Bevel (Raised), Bevel (Double), and Field Border.
Note: The border is unaffected by rotation.

Changed in 8.1.21
As of 8.1.21, the "Button Border" and "Other Border" options are removed.
Border.borderCommon
Color Swap FilterSwap a specific color to another. Can be chosen from color wheel, chosen from color palette, or entered as RGB or HSL value. See Color Selector .boolean.useColorSwapImage Manipulation
CursorThe mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize.int.cursorCodeCommon
Disabled Image PathThe relative path of the image to be displayed when this component is not enabled.String.disabledPathData
EnabledIf disabled, a component cannot be used.boolean.componentEnabledCommon
Flip HorizontalFlip (mirror) the image horizontally.boolean.flipHorizontalImage Manipulation
Flip VerticalFlip (mirror) the image vertically.boolean.flipVerticalImage Manipulation
Image PathThe relative path of the image.String.pathData
Load In BackgroundControls whether or not the image loading takes place on the UI thread or a background thread.boolean.loadInBackgroundBehavior
Mouseover TextThe text that is displayed in the tooltip which pops up on mouseover of this component.String.toolTipTextCommon
NameThe name of this component.String.nameCommon
QualityThe data quality code for any Tag bindings on this component.QualityCode.qualityData
RotationThe angle of rotation in degrees.int.rotationImage Manipulation
Stretch HeightIf 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.
int.stretchHeightImage Manipulation
Stretch ModeSets the stretch mode for this image.int.stretchModeImage Manipulation
Stretch WidthIf 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.
int.stretchWidthImage Manipulation
StylesContains the component's styles.Dataset.stylesAppearance
Swap FromIf the Color Swap Filter is on, this color will be changed to the Swap To color.Color.swapFromColorImage Manipulation
Swap ThresholdThreshold (0-255) for the swap from color matching. 0 is no tolerance, 255 is max tolerance.int.swapThresholdImage Manipulation
Swap ToIf the Color Swap Filter is on, the Swap From color will be changed to this color. See Color Selector .Color.swapToColorImage Manipulation
Tint ColorIf the Tint Filter is on, this is the color of the tint. See Color Selector .Color.tintColorImage Manipulation
Tint FilterTint the entire image a color (works best with greyscale images).boolean.useTintImage Manipulation
Use CacheIf false, this image will bypass the client image cache and load the image directly from the source.boolean.useCacheBehavior
VisibleIf disabled, the component will be hidden.boolean.visibleCommon

Deprecated Properties

PropertyDescriptionProperty TypeScriptingCategory
Data QualityThe data quality code for any Tag bindings on this component.int.dataQualityDeprecated

Scripting

Component Functions

This component does not have component functions associated with it.

Extension Functions

This component does not have extension functions associated with it.

Event Handlers

Event handlers allow you to run a script based off specific triggers. See the full list of available event handlers on the Component Events page

Customizers

Examples

Property NameValue
Image PathBuiltin/Valve/Valve 29.png