Image Watch

Das Image Watch Control bietet zusätzlich zu der Bildanzeige noch viele weitere Werkzeuge und Informationsanzeigen. Eine Übersicht über die Bereiche und Komponenten finden Sie im Unterkapitel Aufbau des Controls. Die Beschreibung der einzelnen Konfigurationsmöglichkeiten finden Sie unter den folgenden Kategorien auf dieser Seite. Zu den jeweiligen Kategorien gibt es Unterkapitel mit weiteren Informationen, Details und Anwendungsbeispielen. Um direkt TwinCAT Vision Bilder aus der SPS anzeigen zu können, wird zudem die Vision-Erweiterung für den HMI-Server benötigt.

	Für alle folgenden Attribute besitzt das Control eine Getter- und eine Setter-Methode. Zum Beispiel existieren für das Attribut `BarColor` die beiden Methoden `getBarColor(): SolidColor` und `setBarColor(value: SolidColor): void`. Die Benutzung der Attribute wird in den verlinkten Unterkapiteln näher erklärt. Alle weiteren Attribute, Events und Permissions die die Basisklasse Controls bereitstellt, finden Sie in der TwinCAT HMI Dokumentation.

Kategorie: Colors

Attribut	Typ	Beschreibung
`BarColor`	`SolidColor`	Farbe der Toolbar und der Infobar (siehe Kategorien Toolbar und Infobar).
`ShapeStrokeColor`	`SolidColor`	Farbe der Konturen der Formen, die auf dem Bild gezeichnet werden können (siehe Kategorie Shapes).
`ShapeHandleColor`	`SolidColor`	Farbe der Griffe der Formen, die auf dem Bild gezeichnet werden können (siehe Kategorie Shapes).

Kategorie: Common

Die folgenden Attribute legen die Ressource fest, von der die anzuzeigenden Bilder geladen werden.

Attribut	Typ	Beschreibung
`Image`	`String`	Ressource für das anzuzeigende Bild. Kann entweder ein Pfad zu einer Bilddatei oder eine Daten-URI sein.
`ImageList`	`ImageList`	Liste mit benannten Bild-Ressourcen. Bei nicht-leerer Liste wird das Binding von `Image` mit der durch `ImageIndex` ausgewählten Ressource ersetzt.
`ImageIndex`	`Number`	Wählt bei nicht-leerer `ImageList` aus, welche der Bildressourcen aus der Liste angezeigt wird.
`Alt`	`String`	Alternativ-Text, der angezeigt wird, wenn die aktuelle Bild-Ressource nicht verfügbar ist.

Funktion	Beschreibung
`downloadImage(fileName: string): void`	Löst einen browserspezifischen Download des aktuell angezeigten Bildes in Originalgröße aus. Kann alternativ über ein UI-Element in der Toolbar ausgelöst werden.

Funktion

Beschreibung

downloadImage(fileName: string): void

Löst einen browserspezifischen Download des aktuell angezeigten Bildes in Originalgröße aus.

Kann alternativ über ein UI-Element in der Toolbar ausgelöst werden.

Kategorie: View

Die folgenden Attribute und Funktionen bestimmen den Ausschnitt des angezeigten Bildes und wie dieser verändert werden kann.

Attribute	Typ	Beschreibung
`ImageFreeze`	`Boolean`	Wenn aktiv, ist das aktuell angezeigte Bild festgesetzt und wird nicht mehr aktualisiert bis `ImageFreeze` deaktiviert wird.
`Offset`	`[Number, Number]`	Position der oberen linken Bild-Ecke im Koordinatensystem des Controls.
`Scale`	`Number (%)`	Skalierung des Bildes in Prozent basierend auf `ScaleReference`.
`ScaleReference`	`ScaleReference`	Bei `ImageSize` entsprechen 100% der originalen Bildgröße. Bei `ControlWidth` entsprechen 100% der Breite des Controls. Bei `ControlHeight` entsprechen 100% der Höhe des Controls. Bei `ControlSize` entsprechen 100% entweder der Breite oder der Höhe des Controls, je nach dem welches die Größe des Bildes zuerst beschränkt.
`Draggable`	`Boolean`	Wenn aktiv, kann das Bild mittels Maus oder Touch verschoben werden. Dabei wird `Offset` automatisch angepasst.
`Scalable`	`Boolean`	Wenn aktiv, kann das Bild mittels Mausrad oder Multitouch skaliert werden. Dabei werden `Offset` und `Scale` automatisch angepasst.
`ScaleMin`	`Number`	Minimum `Scale` bei der Skalierung mittels Mausrad oder Multitouch.
`ScaleMax`	`Number`	Maximum `Scale` bei der Skalierung mittels Mausrad oder Multitouch.
`ScalingCenter`	`ScalingCenter`	Punkt, der bei Skalierung über das `Scale` Attribute fixiert bleibt. Bei `TopLeftCorner` bleibt die obere linke Ecke des Bildes fixiert. Bei `ImageCenter` bleibt der Mittellpunkt des Bildes fixiert. Bei `ControlCenter` bleibt der Mittelpunkt des Controls fixiert. Bei Skalierung mittels Mausrad bleibt immer die Position des Cursors fixiert.
`View` _(readonly)	`Number[4]`	Gibt den angezeigten Ausschnitt des Bildes im Sinne einer Region of Interest. Das Format ist: `[X, Y, Breite, Höhe]`.

Funktion	Beschreibung
`centerImageToControl(): void`	Passt das `Offset` derart an, dass das aktuelle Bild mittig im Control ist.
`fitImageToControl(center: boolean): void`	Passt `Offset` und `Scale` derart an, dass das aktuelle Bild mittig und ausgefüllt im Control ist.
`setView(view: number[]): void`	Verändert `Offset` und `Scale`, sodass der spezifizierte Ausschnitt des Bildes angezeigt wird. Muss nicht zwangsläufig mit View übereinstimmen, wenn das Seitenverhältnis des Ausschnitts nicht mit dem Control übereinstimmt.

Kategorie: Toolbar

Mit folgenden Attributen kann die Toolbar des Controls angepasst werden.

Attribut	Typ	Beschreibung
`ToolbarVisible`	`Boolean`	Anzeige der Toolbar.
`ToolbarItems`	`ToolbarItems`	Auswahl von Elementen, die in der Toolbar angezeigt werden.
`ScaleOptions`	`Number[]`	Skalierungswerte, die in der `ScaleSelection` Combobox zusätzlich zur „Fit“-Option angezeigt werden und auswählbar sind.
`ToolbarHeight`	`Number (px)`	Höhe der Toolbar.
`ImageSelectionWidth`	`Number (px)`	Breite der `ImageSelection` Combobox.
`ScaleSelectionWidth`	`Number (px)`	Breite der `ScaleSelection` Combobox.
`ScaleSelectionEditable`	`Boolean`	Wenn aktiv, können manuell Werte in die `ScaleSelection` eingetippt werden. Wenn inaktiv, kann nur aus den angebotenen `ScaleOptions` ausgewählt werden.

Kategorie: Infobar

Mit folgenden Attributen kann die Infobar des Controls angepasst werden.

Attribut	Typ	Beschreibung
`InfobarVisible`	`Boolean`	Anzeige der Infobar.
`InfobarItems`	`InfobarItems`	Auswahl von Elementen, die in der Infobar angezeigt werden.
`PixelColorFormat`	`Function`	Funktion, die aus dem Wert des `PixelColor`-Attributs einen Text für die Infobar generiert.
`ShapeValueFormat`	`Function`	Funktion, die aus dem Wert des `ShapeValue`-Attributs einen Text für die Infobar generiert.
`InfobarHeight`	`Number (px)`	Höhe der Infobar.

Kategorie: Shapes

Folgende Attribute helfen beim Zeichnen von Formen auf dem Bild.

Attribut	Typ	Beschreibung
`ShapeSelectionActive`	`Boolean`	Wenn aktiv, kann auf dem Bild eine Form (basierend auf `ShapeType`) gezeichnet, angezeigt und bearbeitet werden.
`ShapeType`	`ShapeType`	Typ der Form. Möglich sind: Punkt Linie Rechteck / Quadrat Ellipse / Kreis Polygon
`ShapeIsRotatable`	`Boolean`	Wenn aktiv, können geeignete Formen mittels eines Handles in der UI rotiert werden. (Linie, Rechteck, Quadrat, Ellipse, Polygon)
`ShapeData`	`ShapeData`	Geometrische Beschreibung der Form. Kann genutzt werden, um die Daten einer gezeichneten Form abzufragen oder um eine bestimmte, vordefinierte Form anzuzeigen.
`ShapeAutoClear`	`Boolean`	Wenn aktiv, wird `ShapeData` auf den Basiswert des jeweiligen `ShapeType` zurückgesetzt, wenn `ShapeSelectionActive` deaktiviert wird.
`ShapeStrokeThickness`	`Number (px)`	Dicke der Linien der angezeigten Form.
`ShapeHandleSize`	`Number (px)`	Größe der Handles der angezeigten Form.
`ShapeClickableSize`	`Number (px)`	Größe der klickbaren Fläche für die Handles der angezeigten Form. Kann genutzt werden, um die Bearbeitung der Form auf Touch-Panels zu vereinfachen, ohne die Handles unnötig groß anzuzeigen.
`ShapeAngleInterval`	`Number (°)`	Schrittgröße, in der die Rotation der Form geändert werden kann. Z. B. gibt es bei einem Wert von `90` nur vier mögliche Ausrichtungen. Bei `0` ist die Rotation beliebig.
`ShapeIsInImageArea` _(readonly)	`Boolean`	Gibt an, ob die angezeigte Form vollständig innerhalb des Bildbereichs liegt oder nicht. Kann hilfreich sein, um die Validität von `ShapeData` für bestimmte PLC-Funktionen zu überprüfen. Dabei werden nur die Eckpunkte zur Berechnung verwendet.
`ShapeLimitToImage`	`Boolean`	Wenn aktiv, kann die Form nur innerhalb des Bildes gezeichnet oder bearbeitet werden.
`ShapeDataUpdate`	`DataUpdate`	Legt fest, ob `ShapeData` während (`onChanged`) oder am Ende (`onConfirmed`) einer grafischen Interaktion aktualisiert werden soll.

Funktion	Beschreibung
`clearShape(): void`	Löscht die angezeigte Form, wobei auch `ShapeData` auf den Basiswert des jeweiligen `ShapeType` zurückgesetzt wird.

Kategorie: Thumbnail

Folgende Attribute legen die Anzeige eines Thumbnails fest. Der Thumbnail gibt einen Überblick, welcher Ausschnitt des Bildes sichtbar ist.

Attribut	Typ	Beschreibung
`ThumbnailVisible`	`Boolean`	Anzeige des Thumbnails.
`ThumbnailPosition`	`ThumbnailPosition`	Position des Thumbnails.
`ThumbnailSize`	`Number (px)`	Größe des Thumbnails. Bestimmt die Breite des Thumbnails; die Höhe wird automatisch anhand des Seitenverhältnisses berechnet.

Kategorie: Overlay

Die folgenden Attribute ermöglichen das Einblenden von Objekten auf dem Bild (z. B. als Positionierungs- oder Markierungshilfen).

Attribut	Typ	Beschreibung
`OverlayVisible`	`Boolean`	Anzeige von Einblendungen.
`OverlayImage`	`String`	Bild, das über dem angezeigten Bild eingeblendet wird.
`OverlayElements`	`OverlayElements`	Geometrische Elemente, die über dem angezeigten Bild eingeblendet werden.

Kategorie: Info

Folgende Attribute können genutzt werden, um Informationen über das Bild oder bestimmte Pixel des Bildes zu erlangen.

Attribut	Typ	Beschreibung
`PixelInfoUpdate`	`PixelInfoUpdate`	Bestimmt, wann `PixelColor` und `PixelPosition` aktualisiert werden. Bei `Never` werden sie nie aktualisiert. Bei `AtClick` werden sie bei einem Klick auf eine bestimmte Stelle des Bildes aktualisiert. Bei `AtCursor` werden sie bei jeder Bewegung des Cursors auf dem Bild aktualisiert. Damit werden immer die Werte der aktuellen Cursor-Position angezeigt.
`PixelColor` _(readonly)	`[Number, Number, Number, Number]`	Farbe des ausgewählten Bild-Pixels.
`PixelPosition` _(readonly)	`[Number, Number]`	Position des ausgewählten Bild-Pixels in Bildkoordinaten.
`ImageSize` _(readonly)	`[Number, Number]`	Original-Größe des angezeigten Bildes.
`ImageDisplaySize` _(readonly)	`[Number, Number]`	Darstellungsgröße des angezeigten Bildes.

Events

Alle Events sind in der Kategorie „Vision“ gelistet.

Event	Beschreibung
`.onPixelInfo`	Dieses Event wird ausgelöst, wenn `PixelInfoUpdate <> Never` ist und der Nutzer auf eine Position im Bild klickt oder den Mauszeiger darüber bewegt und so ein Pixel auswählt. Intern werden mit dem Event die Werte der Attribute `PixelColor` und `PixelPosition` aktualisiert.
`.onImageReceived`	Dieses Event wird ausgelöst, wenn das Control ein Bild empfängt.
`.onShapeChanged`	Dieses Event wird ausgelöst, sobald sich das Attribut `ShapeData` ändert.
`.onShapeConfirmed`	Dieses Event wird ausgelöst, wenn eine Form gesetzt oder eine Interaktion mit dieser abgeschlossen wurde.

Themed Resources

Mit folgenden Attributen kann das Aussehen von Unter-Controls (den Comboboxen in der Toolbar) unter den Themes Einstellungen verändert werden. Eine detaillierte Beschreibung der einzelnen Attribute ist in der Standard-HMI-Dokumentation zu finden.

Attribut	Typ
`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`

Weiterführende Informationen