Bild-Ansicht

Die auf dieser Seite erklärten Attribute und Funktionen sind in der Kategorie View zu finden.

Intern ist die Größe und Position des angezeigten Bildes durch die Eigenschaften Offset, Scale und ScaleReference genau definiert. Der typische Anwendungsfall für die Änderung von Größe und Position ist jedoch die Verwendung von interaktiven Features wie Touch- und Mausgesten. Dabei werden die oben genannten Eigenschaften durch jene Gesten intern automatisch verändert.

Eigenschaft: Offset

Die Eigenschaft Offset gibt die Bildposition relativ zum Control selbst an. Die linke obere Ecke wird als Ursprung definiert, wobei die x-Achse nach rechts und die y-Achse nach unten verläuft. Der Versatz des Bildes wird ebenfalls von der oberen linken Ecke des Bildes aus gemessen. Die Offset-Koordinaten werden in Pixel angegeben.

Wie bereits erwähnt, wird die Eigenschaft Offset vom Control selbst geändert, z. B. wenn der Benutzer mit dem Bild durch Berührungs- oder Mausgesten interagiert.

Standardmäßig wird die Offset-Eigenschaft mit einem TwoWay-Binding verknüpft.

Eigenschaften: Scale und ScaleReference

Die Eigenschaft Scale gibt einen Skalierungsfaktor in Prozent an, um die Pixelgröße zu berechnen, in der das Bild auf dem Bildschirm angezeigt wird. Die Größe wird immer in Bezug auf die ursprüngliche Bildgröße oder bezogen auf die Größe des Controls berechnet, abhängig vom Wert des Attributs ScaleReference.

Die ScaleReference kann einer der folgenden Werte sein:

ImageSize	Die Größe des angezeigten Bildes entspricht der ursprünglichen Bildgröße multipliziert mit dem Wert der Eigenschaft `Scale`. Beispiel: Die Originalgröße des Bildes ist 300x200, die Eigenschaft `Scale` ist 150%. Die resultierende Größe des angezeigten Bildes ist 450x300.
ControlSizeWidth	Die Größe des angezeigten Bildes entspricht der Breite des Controls (oder genauer gesagt des Bildrahmens innerhalb des Controls) multipliziert mit dem Wert der Eigenschaft `Scale`.
ControlSizeHeight	Die Größe des angezeigten Bildes entspricht der Höhe des Controls (oder genauer gesagt des Bildrahmens innerhalb des Controls) multipliziert mit dem Wert der Eigenschaft `Scale`.
ControlSize	Die Größe des angezeigten Bildes entspricht der Größe des Controls (oder genauer gesagt des Bildrahmens innerhalb des Controls) multipliziert mit dem Wert der Eigenschaft `Scale`. Wenn das Seitenverhältnis des Controls nicht mit dem Seitenverhältnis des Bildes übereinstimmt, wird entweder die Höhe oder die Breite als Referenzgröße verwendet, je nachdem welche Abmessung stärker abweicht.

Der Vorteil der ImageSize Einstellung ist die direkte Beziehung zwischen der angezeigten Größe und der Originalgröße des Bildes. Zwei Bilder mit unterschiedlichen Größen in der SPS haben immer unterschiedliche Größen in der HMI. Der Vorteil der ControlSize Einstellung ist die automatische Anpassung des Bildes an das Control. Die Bilder haben immer die gleiche Größe, unabhängig davon, wie groß sie innerhalb der SPS tatsächlich sind.

	Seitenverhältnis Höhe und Breite des Bildes werden immer so berechnet, dass das Seitenverhältnis des Originalbildes erhalten bleibt.

Beispiel: Offset, Scale und ScaleReference

Funktion: FitImageToControl

Um das aktuell angezeigte Bild innerhalb des Image Viewers zu maximieren und zu zentrieren, kann die Funktion FitImageToControl aufgerufen werden. Soll dies von Anfang an erfolgen, sollte die Funktion mit dem .onAttached Event verknüpft werden. Wenn diese Funktion einmal aktiviert wurde, werden alle folgenden Bilder ebenfalls zentriert und maximiert, bis die Ansicht anderweitig geändert und der Modus dadurch abgebrochen wird.

Eigenschaft: ScalingCenter

Das ScalingCenter bietet eine Möglichkeit, das Skalierungsverhalten einzustellen. Eine individuelle Änderung der Scale-Eigenschaften führt immer zu einer Veränderung der unteren rechten Ecke des Bildes, während die obere linke Ecke fixiert bleibt. Um dies zu ändern und andere Punkte zu fixieren, kann die Eigenschaft ScalingCenter verwendet werden. In diesem Fall wird die Eigenschaft Offset automatisch angepasst. Die folgenden Optionen sind verfügbar:

ScaleCenter-Wert	Beschreibung
`TopLeftCorner`	Obere linke Ecke des Bilds bleibt beim Zoomen zentriert.
`ImageCenter`	Mittelpunkt des Bilds bleibt beim Zoomen zentriert.
`ControlCenter`	Mittelpunkt des Controls bleibt beim Zoomen zentriert.

Gesten

Der Benutzer kann die Größe und Position des Bildes durch die folgenden Gesten/Interaktionen ändern:

Halten Sie die linke Maustaste irgendwo im Bildrahmen und ziehen Sie die Maus, um das Bild zu verschieben und damit die Eigenschaft Offset zu ändern. Die Eigenschaft Scale bleibt davon unberührt.
Berühren Sie den Bildrahmen mit einem Finger und bewegen Sie den Finger, um das Bild zu verschieben und damit die Eigenschaft Offset zu ändern. Die Eigenschaft Scale bleibt davon unberührt.
Scrollen Sie mit dem Mausrad, um die Größe des Bildes und damit die Eigenschaft Scale zu ändern. Dabei wird der Mittelpunkt der Skalierung immer die Position des Mauszeigers sein. Infolgedessen kann sich auch die Eigenschaft Offset entsprechend ändern. Der Mauszeiger muss sich währenddessen immer über dem Control befinden.
Berühren Sie den Bildrahmen mit zwei Fingern und bewegen Sie beide Finger in eine Richtung, zueinander hin oder voneinander weg, um die Position und Größe des Bildes zu ändern. Die beiden Eigenschaften Offset und Scale werden angepasst.

Um diese Benutzerinteraktionen zu verhindern, können die beiden Eigenschaften Draggable und Scalable auf false gesetzt werden, um eine benutzerinduzierte Änderung der Position bzw. Größe zu verhindern. Eine Änderung des Wertes (z. B. durch Schreiben auf das Symbol) ist immer möglich und wird durch die beiden Eigenschaften nicht beeinflusst.

Eigenschaften: ScaleMin und ScaleMax

Das Positionierungs- und Skalierungssystem des Controls wendet Begrenzungsregeln an, um zu verhindern, dass der Benutzer verwirrende oder desorientierende Ansichten des Bildes erzeugt.

Die Eigenschaften ScaleMin und ScaleMax stellen Grenzen für die Einstellung der Scale-Eigenschaft bei Benutzerinteraktionen dar.

Darüber hinaus beschränkt das Control automatisch das Bild auf seine Grenzen mit einem bestimmten äußeren Padding (derzeit 10px). Positionen außerhalb dieser Begrenzung sind nicht sinnvoll, da man das Bild nicht sieht.

Eigenschaft: View (Schreibgeschützt)

Die Eigenschaften Offset und Scale eignen sich gut für die interne Handhabung der Bildansicht, sind aber für den Anwender nicht unbedingt intuitiv (z. B., um einen Bildbereich zu definieren). Menschen denken oft eher in Form von Regionen von Interesse oder ähnlichen Darstellungen. Daher wird nach Änderung der Größe oder Position des Bildes der aktuell sichtbare Bereich des Bildes berechnet und über die schreibgeschützte Eigenschaft View bereitgestellt.

Die interne Berechnung setzt grundsätzlich den Koordinatenursprung auf die linke obere Bildecke und berechnet von dort aus die linke obere Position sowie die Breite und Höhe des Bildrahmens.

Die Eigenschaft View wird als Array in der Form [X, Y, Breite, Höhe] bereitgestellt.

Um die Position und Größe über eine View-Beschreibung festzulegen, siehe nächster Abschnitt über die Methode SetView.

Methode: SetView

Mit der Methode SetView kann der Benutzer einen bestimmten Bereich des Bildes anzeigen lassen. Beim Aufruf dieser Methode wird der durch einen Parameter angegebene Bildbereich maximiert und innerhalb des Bildrahmens zentriert.

Der Bereich muss in den ursprünglichen Bildkoordinaten als [x, y, Breite, Höhe] angegeben werden.

	Abweichende Ansichten Abhängig von den Seitenverhältnissen des angegebenen Bereichs und des Bildrahmens kann die geforderte Ansicht von der tatsächlichen Ansicht abweichen. Diese kann wiederum über die schreibgeschützte Eigenschaft `View` abgerufen werden.

	Separate Aktion Die View-Funktionalität ist nicht über eine Eigenschaft zugänglich, sondern über eine schreibgeschützte Eigenschaft und eine Setter-Methode. Der Grund dafür ist der oben erwähnte Unterschied zwischen einer bestellten und der tatsächlichen Ansicht und auch, dass eine View-Eigenschaft mit den `Offset`- und `Scale`-Eigenschaften darüber streiten würde, welche Ansicht erreicht werden soll. Dies wird dadurch verhindert, dass der View-Setter eine einmalige Aktion anstelle einer gebundenen Eigenschaft ist.

Bildfluss anhalten

Wenn die Eigenschaft ImageFreeze wahr ist, ändert sich das aktuell angezeigte Bild nicht, auch wenn neue Bilder empfangen werden. Der vorgesehene Anwendungsfall ist das Einfrieren des aktuellen Bildes zur weiteren Überprüfung, ohne dass zusätzliche Logik innerhalb der SPS hinzugefügt werden muss.

Wenn die Eigenschaft ImageFreeze von true auf false geändert wird, zeigt das Control sofort wieder das letzte Bild an und ignoriert die Zwischenbilder.

Die Eigenschaft ImageFreeze kann über den Freeze-Button in der Symbolleiste gesteuert werden (siehe Eigenschaft FreezeButtonVisible in der Kategorie Toolbar).