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:
- Scaling
- Rotation - Rotate to create spinning animations by binding to a timer component.
- Color Tinting - Dynamically apply a color tint to an image to allow it to display real-time status
- 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​
| Property | Description | Property Type | Scripting | Category |
|---|---|---|---|---|
| Border | The 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 | .border | Common |
| Color Swap Filter | Swap 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 | .useColorSwap | Image Manipulation |
| Cursor | The mouse cursor to use when hovering over this component. Options are: Default, Crosshair, Text, Wait, Hand, Move, SW Resize, or SE Resize. | int | .cursorCode | Common |
| Disabled Image Path | The relative path of the image to be displayed when this component is not enabled. | String | .disabledPath | Data |
| Enabled | If disabled, a component cannot be used. | boolean | .componentEnabled | Common |
| Flip Horizontal | Flip (mirror) the image horizontally. | boolean | .flipHorizontal | Image Manipulation |
| Flip Vertical | Flip (mirror) the image vertically. | boolean | .flipVertical | Image Manipulation |
| Image Path | The relative path of the image. | String | .path | Data |
| Load In Background | Controls whether or not the image loading takes place on the UI thread or a background thread. | boolean | .loadInBackground | Behavior |
| Mouseover Text | The text that is displayed in the tooltip which pops up on mouseover of this component. | String | .toolTipText | Common |
| Name | The name of this component. | String | .name | Common |
| Quality | The data quality code for any Tag bindings on this component. | QualityCode | .quality | Data |
| Rotation | The angle of rotation in degrees. | int | .rotation | Image Manipulation |
| 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. | int | .stretchHeight | Image Manipulation |
| Stretch Mode | Sets the stretch mode for this image. | int | .stretchMode | Image Manipulation |
| 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. | int | .stretchWidth | Image Manipulation |
| Styles | Contains the component's styles. | Dataset | .styles | Appearance |
| Swap From | If the Color Swap Filter is on, this color will be changed to the Swap To color. | Color | .swapFromColor | Image Manipulation |
| Swap Threshold | Threshold (0-255) for the swap from color matching. 0 is no tolerance, 255 is max tolerance. | int | .swapThreshold | Image Manipulation |
| Swap To | If the Color Swap Filter is on, the Swap From color will be changed to this color. See Color Selector . | Color | .swapToColor | Image Manipulation |
| Tint Color | If the Tint Filter is on, this is the color of the tint. See Color Selector . | Color | .tintColor | Image Manipulation |
| Tint Filter | Tint the entire image a color (works best with greyscale images). | boolean | .useTint | Image Manipulation |
| Use Cache | If false, this image will bypass the client image cache and load the image directly from the source. | boolean | .useCache | Behavior |
| Visible | If disabled, the component will be hidden. | boolean | .visible | Common |
Deprecated Properties​
| Property | Description | Property Type | Scripting | Category |
|---|---|---|---|---|
| Data Quality | The data quality code for any Tag bindings on this component. | int | .dataQuality | Deprecated |
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 Name | Value |
|---|---|
| Image Path | Builtin/Valve/Valve 29.png |