Image Watch

The Image Watch Control offers many other tools and information displays in addition to the image display. An overview of the areas and components can be found in the subchapter Structure of the control. The description of each configuration option can be found under the following categories on this page. For each category there are sub-chapters with further information, details and application examples. In order to directly display TwinCAT Vision images from the PLC, the Vision extension for the HMI server is also required.

	For all the following attributes, the control has a getter and a setter method. For example, the two methods `getBarColor(): SolidColor` and `setBarColor(value: SolidColor): void` exist for the attribute `BarColor`. The use of the attributes is explained in more detail in the linked subchapters. All further attributes, events and permissions provided by the base class Controls can be found in the TwinCAT HMI documentation.

Category: Colors

Attribute	Type	Description
`BarColor`	`SolidColor`	Toolbar and Infobar color (see categories Toolbar and Infobar).
`ShapeStrokeColor`	`SolidColor`	Color of the contours of the shapes that can be drawn on the image (see category Shapes).
`ShapeHandleColor`	`SolidColor`	Color of the handles of the shapes that can be drawn on the picture (see category Shapes).

Category: Common

The following attributes specify the resource from which the images to be displayed are loaded.

Attribute	Type	Description
`Image`	`String`	Resource for the image to be displayed. Can be either a path to an image file or a data URI.
`ImageList`	`ImageList`	List of named image resources. If the list is not empty, the binding of `Image` will be replaced with the resource selected by `ImageIndex`.
`ImageIndex`	`Number`	Selects which of the image resources from the list will be displayed if `ImageList` is not empty.
`Alt`	`String`	Alternative text that will be displayed if the current image resource is not available.

Function	Description
`downloadImage(fileName: string): void`	Triggers a browser-specific download of the currently displayed image in its original size. Can alternatively be triggered via a UI element in the toolbar.

Function

Description

downloadImage(fileName: string): void

Triggers a browser-specific download of the currently displayed image in its original size.

Can alternatively be triggered via a UI element in the toolbar.

Category: View

The following attributes and functions determine the section of the displayed image and how it can be changed.

Attributes	Type	Description
`ImageFreeze`	`Boolean`	If active, the currently displayed image is fixed and will not be updated until `ImageFreeze` is disabled.
`Offset`	`[Number, Number]`	Position of the upper left corner of the image in the coordinate system of the control.
`Scale`	`Number (%)`	Scaling of the image in percent based on `ScaleReference`.
`ScaleReference`	`ScaleReference`	At `ImageSize`, 100% corresponds to the original image size. At `ControlWidth`, 100% corresponds to the width of the control. At `ControlHeight`, 100% corresponds to the height of the control. At `ControlSize`, 100% corresponds to either the width or the height of the control, depending on which limits the size of the image first.
`Draggable`	`Boolean`	If active, the image can be moved using the mouse or touch. In the process, `Offset` is automatically adjusted.
`Scalable`	`Boolean`	If active, the image can be scaled using the mouse wheel or multitouch. In the process, `Offset` and `Scale` are automatically adjusted.
`ScaleMin`	`Number`	Minimum `Scale` when scaling via mouse wheel or multitouch.
`ScaleMax`	`Number`	Maximum `Scale` when scaling via mouse wheel or multitouch.
`ScalingCenter`	`ScalingCenter`	Point that remains fixed when scaled via the `Scale` attribute . At `TopLeftCorner` the upper left corner of the image remains fixed. At `ImageCenter` the center point of the image remains fixed. At `ControlCenter` the center of the control remains fixed. When scaling using the mouse wheel, the position of the cursor always remains fixed.
`View` _(readonly)	`Number[4]`	Specifies the displayed section of the image in terms of a region of interest. The format is: `[X, Y, Breite, Höhe]`.

Function	Description
`centerImageToControl(): void`	Adjusts the `Offset` so that the current image is in the centre of the control.
`fitImageToControl(center: boolean): void`	Adjusts `Offset` and `Scale` so that the current image is centered and filled in the control.
`setView(view: number[]): void`	Changes `Offset` and `Scale` so that the specified section of the image is displayed. Does not necessarily have to match View if the aspect ratio of the clipping does not match the control.

Category: Toolbar

The following attributes can be used to customize the toolbar of the control.

Attribute	Type	Description
`ToolbarVisible`	`Boolean`	Toolbar display.
`ToolbarItems`	`ToolbarItems`	Selection of elements to be displayed in the toolbar.
`ScaleOptions`	`Number[]`	Scaling values displayed and selectable in the `ScaleSelection` combo box in addition to the "Fit" option.
`ToolbarHeight`	`Number (px)`	Height of the toolbar.
`ImageSelectionWidth`	`Number (px)`	Width of the `ImageSelection` combo box.
`ScaleSelectionWidth`	`Number (px)`	Width of the `ScaleSelection` combo box.
`ScaleSelectionEditable`	`Boolean`	If active, values can be manually typed into the `ScaleSelection`. If inactive, selection is only possible from the offered `ScaleOptions`.

Category: Infobar

The following attributes can be used to customize the infobar of the control.

Attribute	Type	Description
`InfobarVisible`	`Boolean`	Display of the infobar.
`InfobarItems`	`InfobarItems`	Selection of elements to be displayed in the infobar.
`PixelColorFormat`	`Function`	Function that generates a text for the infobar from the value of the `PixelColor` attribute.
`ShapeValueFormat`	`Function`	Function that generates a text for the infobar from the value of the `ShapeValue` attribute.
`InfobarHeight`	`Number (px)`	Height of the infobar.

Category: Shapes

The following attributes help to draw shapes on the image.

Attribute	Type	Description
`ShapeSelectionActive`	`Boolean`	If active, a shape (based on `ShapeType`) can be drawn, displayed and edited on the image.
`ShapeType`	`ShapeType`	Shape type. Possible are: Dotted Line Rectangle / square Ellipse / circle Polygon
`ShapeIsRotatable`	`Boolean`	If active, suitable shapes can be rotated using a handle in the UI. (line, rectangle, square, ellipse, polygon)
`ShapeData`	`ShapeData`	Geometric description of the shape. Can be used to query the data of a drawn shape or to display a specific predefined shape.
`ShapeAutoClear`	`Boolean`	If active, `ShapeData` is reset to the base value of the respective `ShapeType` when `ShapeSelectionActive` is deactivated.
`ShapeStrokeThickness`	`Number (px)`	Thickness of the lines of the displayed shape.
`ShapeHandleSize`	`Number (px)`	Size of the handles of the displayed shape.
`ShapeClickableSize`	`Number (px)`	Size of the clickable area for the handles of the displayed shape. Can be used to simplify editing the shape on touch panels without displaying the handles unnecessarily large.
`ShapeAngleInterval`	`Number (°)`	Step size in which the rotation of the shape can be changed. For example, with a value of `90`, there are only four possible alignments. At `0` the rotation is arbitrary.
`ShapeIsInImageArea` _(readonly)	`Boolean`	Indicates whether the displayed shape is completely within the image area or not. Can be useful to check the validity of `ShapeData` for certain PLC functions. Only the corner points are used for the calculation.
`ShapeLimitToImage`	`Boolean`	If active, the shape can only be drawn or edited within the image.
`ShapeDataUpdate`	`DataUpdate`	Specifies whether `ShapeData` should be updated during (`onChanged`) or at the end (`onConfirmed`) of a graphical interaction.

Function	Description
`clearShape(): void`	Deletes the displayed shape, also resetting `ShapeData` to the base value of the respective `ShapeType`.

Category: Thumbnail

The following attributes determine the display of a thumbnail. The thumbnail gives an overview of which section of the image is visible.

Attribute	Type	Description
`ThumbnailVisible`	`Boolean`	Display of the thumbnail.
`ThumbnailPosition`	`ThumbnailPosition`	Position of the thumbnail.
`ThumbnailSize`	`Number (px)`	Size of the thumbnail. Determines the width of the thumbnail; the height is automatically calculated based on the aspect ratio.

Category: Overlay

The following attributes allow objects to be overlaid on the image (e.g. as positioning or marking aids).

Attribute	Type	Description
`OverlayVisible`	`Boolean`	Display overlays.
`OverlayImage`	`String`	Image overlaid on the displayed image.
`OverlayElements`	`OverlayElements`	Geometric elements overlaid on the displayed image.

Category: Info

The following attributes can be used to obtain information about the image or specific pixels of the image.

Attribute	Type	Description
`PixelInfoUpdate`	`PixelInfoUpdate`	Determines when `PixelColor` and `PixelPosition` are updated. At `Never` they are never updated. At `AtClick`, they are updated when you click on a specific part of the image. At `AtCursor` they are updated every time the cursor moves on the image. This always displays the values of the current cursor position.
`PixelColor` _(readonly)	`[Number, Number, Number, Number]`	Color of the selected image pixel.
`PixelPosition` _(readonly)	`[Number, Number]`	Position of the selected image pixel in image coordinates.
`ImageSize` _(readonly)	`[Number, Number]`	Original size of the displayed image.
`ImageDisplaySize` _(readonly)	`[Number, Number]`	Display size of the displayed image.

Events

All events are listed in the "Vision" category.

Event	Description
`.onPixelInfo`	This event is triggered if `PixelInfoUpdate <> Never` and the user clicks on a position in the image or moves the mouse pointer over it to select a pixel. Internally, the event updates the values of the attributes `PixelColor` and `PixelPosition`.
`.onImageReceived`	This event is triggered when the control receives an image.
`.onShapeChanged`	This event is triggered as soon as the attribute `ShapeData` changes.
`.onShapeConfirmed`	This event is triggered when a shape is set or an interaction with it is completed.

Themed Resources

The following attributes can be used to change the appearance of sub-controls (the combo boxes in the toolbar) at the Themes settings. A detailed description of the individual attributes can be found in the standard HMI documentation.

Attribute	Type
`ImageSelection_ContentPadding`	`Padding`
`ImageSelection_DataHeight`	`DataHeight`
`ImageSelection_DropDownBackgroundColor`	`Color`
`ImageSelection_DropDownFontFamily`	`FontFamily`
`ImageSelection_DropDownFontSize`	`MeasurementValue`
`ImageSelection_DropDownFontStyle`	`FontStyle`
`ImageSelection_DropDownFontWeight`	`FontWeight`
`ImageSelection_DropDownHorizontalAlignment`	`HorizontalAlignment`
`ImageSelection_DropDownTextColor`	`SolidColor`
`ImageSelection_DropDownVerticalAlignment`	`VerticalAlignment`
`ImageSelection_DropDownStyle`	`TcHmiCombobox.DropDownStyle`
`ImageSelection_FontFamily`	`FontFamily`
`ImageSelection_FontSize`	`Number (px)`
`ImageSelection_FontStyle`	`FontStyle`
`ImageSelection_FontWeight`	`FontWeight`
`ImageSelection_HorizontalAlignment`	`HorizontalAlignment`
`ImageSelection_MaxListHeight`	`Number (px)`
`ImageSelection_TextColor`	`SolidColor`
`ScaleSelection_ContentPadding`	`Padding`
`ScaleSelection_DataHeight`	`DataHeight`
`ScaleSelection_DropDownBackgroundColor`	`Color`
`ScaleSelection_DropDownFontFamily`	`FontFamily`
`ScaleSelection_DropDownFontSize`	`MeasurementValue`
`ScaleSelection_DropDownFontStyle`	`FontStyle`
`ScaleSelection_DropDownFontWeight`	`FontWeight`
`ScaleSelection_DropDownHorizontalAlignment`	`HorizontalAlignment`
`ScaleSelection_DropDownStyle`	`TcHmiCombobox.DropDownStyle`
`ScaleSelection_DropDownTextColor`	`SolidColor`
`ScaleSelection_DropDownVerticalAlignment`	`VerticalAlignment`
`ScaleSelection_FontFamily`	`FontFamily`
`ScaleSelection_FontSize`	`Number (px)`
`ScaleSelection_FontStyle`	`FontStyle`
`ScaleSelection_FontWeight`	`FontWeight`
`ScaleSelection_HorizontalAlignment`	`HorizontalAlignment`
`ScaleSelection_MaxListHeight`	`Number (px)`
`ScaleSelection_TextColor`	`SolidColor`

Further Information