Skip to main content
Version: 7.9


Component Palette Icon

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 - 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, simply press the browse button () 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:



NameDescriptionProperty TypeScriptingCategory
BorderThe border surrounding this component. NOTE that the border is unaffected by rotation.Border.borderCommon
Color Swap FilterSwap a specific color to another.boolean.useColorSwapImage Manipulation
CursorThe mouse cursor to use when hovering over this
Data QualityThe data quality code for any tag bindings on this
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
RotationThe angle of rotation in 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 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 Manipulation
Swap ToIf the Color Swap Filter is on, the Swap From color will be changed to this color.Color.swapToColorImage Manipulation
Tint ColorIf the Tint Filter is on, this is the color of the tint.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


Scripting Functions

This component does not have scripting 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



Property NameValue
Image PathBuiltin/Air Flow/Air Flow 9.png