Positionierung und Größenberechnung von Controls
Für die Positionierung und die Größenberechnung von Controls bietet das TwinCAT HMI verschiedene Möglichkeiten. Allgemein wird jedes Control immer durch die Position innerhalb seines Containers definiert. In den Standardeinstellungen sind das die Werte für Left und Top kombiniert mit Width und Height. Diese vier Werte sind in der Einheit Pixel (px) angegeben. Wird als Einheit für diese Werte Prozent (%) eingestellt, so wird als Referenz die Größe des Eltern-Controls genutzt. Ein Control mit 50% Breite ist also halb so breit wie das Eltern-Control.
Der Einfluss der verschiedenen Attribute auf die Größe des Controls wird mithilfe der Attribute WidthMode bzw. HeightMode festgelegt. Alle Controls verfügen über die Modi Value und Parent. Viele Controls bieten zusätzlich den Modus Content. In der folgenden Tabelle sind die für die Modi notwendigen Attribute aufgezählt. Die verschiedenen Trennzeichen haben die Bedeutung:
- ‚,‘: Beide Attribute können verwendet werden.
- ‚&‘: Beide Attribute müssen verwendet werden.
- ‚|‘: Eines von den beiden Attributen muss verwendet werden.
Value (Standard) | Width, Height | Left, Right | Top, Bottom |
Parent | - | Left & Right | Top & Bottom |
Content | - | Left | Right | Top | Bottom |
Value
Der Modus Value ist als Default zusammen mit den zuvor genannten Attributen Left, Top, Width und Height konfiguriert. Es ist allerdings eine beliebige Kombination von jeweils zwei der drei möglichen Attribute in horizontaler und vertikaler Richtung möglich, um die Position und die Größe eines Controls festzulegen:
sowie
- Top (inklusive TopUnit)
- Height (inklusive HeightUnit)
- Bottom (inclusive BottomUnit)
Sind für alle drei Größen pro Richtung Werte konfiguriert, so wird der letzte in dieser Auflistung (also Right bzw. Bottom) verworfen. Ist für ein Control nur eine Größe pro Richtung konfiguriert, so kann es nicht dargestellt werden!
Parent
Beim Modus Parent werden die Attribute Width und Height ignoriert. Die Größe des Controls richtet sich nach der Größe des Eltern-Controls. Zusätzlich müssen über die Attributpaare Left, Right und Top, Bottom die Abstände zu den Rändern des Eltern-Controls festgelegt werden. Nach dem Wechsel des Modus von Value auf Parent, müssen also alle vier Attribute konfiguriert sein, damit das Control dargestellt wird.
Content
Die meisten Container-Controls verfügen zusätzlich über den Modus Content. Auch hier werden die Attribute Width und Height ignoriert. Die Größe des Controls richtet sich nach der Größe der Kind-Controls. Das Control ist in diesem Modus also so groß, dass jedes Kind-Control voll sichtbar ist. Es folgen Beispiele für diesen Modus:
- Ist das einzige Kind-Control mit Left=10px und Width=200px konfiguriert, so erhält das Container-Control die Breite 210px.
- Ist das einzige Kind-Control mit Right=20px und Width=200px konfiguriert, so erhält das Container-Control die Breite 220px.
- Ist das einzige Kind-Control mit Left=30px und Right=20px und ohne Width konfiguriert, so erhält das Container-Control die Breite 50px und das Kind-Control hat keine Breite.
- Hat das einzige Kind-Control Left=100px und Width=50% so würde das Elternelement nur 100px groß werden.
- Ist ein Kind-Control selbst ausschließlich am Eltern-Control ausgerichtet (hat beispielsweise Left=10% und Width=50%) so wird dieses in der Größenanpassung des Eltern-Controls übersprungen. Ist sonst kein Kind-Control vorhanden, so hat das Container-Control die Breite 0px und kann damit nicht dargestellt werden!
Minimum / Maximum Width / Height
Zusätzlich kann zu jedem Control in horizontaler und vertikaler Richtung eine Minimal- und Maximalgröße festgelegt werden. Hierfür sind die Attribute Minimum Width (inklusive Minimum Width Unit), Maximum Width (inklusive Maximum Width Unit) beziehungsweise Minimum Height (inklusive Minimum Height Unit) und Maximum Height (inklusive Maximum Height Unit) zuständig.
Priorität: Berechnete Größe > berechneter Maximal-Wert > berechneter Minimal-Wert
Ein eingestellter Maximal-Wert überschreibt also die berechnete Größe, aber ein eingestellter Minimal-Wert überschreibt den Maximal-Wert.
Hiermit kann beispielsweise die Höhe der View an den Inhalt angepasst werden (WidthMode=Content) gleichzeitig jedoch die Minimalhöhe auf 100% gestellt werden, damit beispielsweise kein Bereich ohne ein Hintergrundbild entsteht.
Überlappung
Belegen zwei Controls (teilweise) die gleiche Fläche auf dem Bildschirm, so wird die Reihenfolge beachtet. Diese Reihenfolge kann per Drag und Drop innerhalb des Document Outline oder direkt im HTML Quelltext verändert werden.
Zusätzliche Möglichkeiten bietet das Attribut Z-Index. Dieses kann keine negativen Zahlenwerte annehmen und hat den Standardwert 0. Ein Control mit höherem Zahlenwert in diesem Attribut wird "weiter vorne" gezeichnet, verdeckt im Zweifelsfall also ein Control mit niedrigen Zahlenwert. Zu beachten ist, dass auch der Z-Index keine globale Bedeutung hat, sondern nur innerhalb eines Containers gilt.
Überfüllung
Ein Container-Control gruppiert beliebige Kind-Controls. Dabei muss die Größe des Containers ausreichen, um alle Kind-Controls aufzunehmen, da jede Überfüllung abgeschnitten wird.