Positioning and calculation of the size of controls
The TwinCAT HMI offers various options for the positioning and calculation of the size of controls. In general, each control is always defined by its position inside its container. In the standard settings these are the values for Left and Top combined with Width and Height. These four values are specified in the unit pixel (px). If percent (%) is specified as the unit for these values, then the size of the parent control is used as a reference. A control with 50% width is thus half as wide as its parent control.
The influence of the different attributes on the size of the control is defined with the aid of the attributes WidthMode or HeightMode. All controls have the Value and Parent modes. Many controls additionally offer the Content mode. The attributes necessary for the modes are listed in the following tables. The various separators have the following meanings:
- ‚,‘: both attributes can be used.
- ‚&‘: both attributes must be used.
- ‚|‘: one of the two attributes must be used.
Value (Standard) | Width, Height | Left, Right | Top, Bottom |
Parent | - | Left & Right | Top & Bottom |
Content | - | Left | Right | Top | Bottom |
Value
The Value mode is configured as the default together with the aforementioned attributes Left, Top, Width and Height. However, an arbitrary combination of any two of the three possible attributes in the horizontal and vertical direction is possible in order to define the position and size of a control:
and
- Top (including TopUnit)
- Height (including HeightUnit)
- Bottom (including BottomUnit)
If values are configured for all three variables per direction, the last one in this list (i.e. Right or Bottom respectively) is discarded. If only one variable is configured per direction for a control, it cannot be displayed!
Parent
The attributes Width and Height are ignored in the Parent mode. The size of the control depends on the size of the parent control. In addition, the distances to the edges of the parent control must be defined by the attribute pairs Left, Right and Top, Bottom. After changing the mode from Value to Parent, therefore, all four attributes must be configured so that the control is displayed.
Content
Most container controls additionally have the Content mode. The attributes Width and Height are ignored here too. The size of the control depends on the size of the child control. In this mode, therefore, the control is just large enough so that every child control is fully visible. Here are some examples of this mode:
- If the only child control is configured with Left = 10 px and Width = 200 px, then the container control is given the width 210 px.
- If the only child control is configured with Right = 20 px and Width = 200 px, then the container control is given the width 220 px.
- If the only child control is configured with Left = 30 px and Right = 20 px and no Width, then the container control is given the width 50 px and the child control has no width.
- If the only child control has Left = 100 px and Width = 50%, then the parent element would only have a size of 100 px.
- If a child control itself is aligned exclusively to the parent control (e.g. it has Left = 10% and Width = 50%), then it is skipped in the size adjustment of the parent control. If there are otherwise no child controls, the container control has the width 0 px and thus cannot be displayed!
Minimum / Maximum Width / Height
In addition, a minimum and maximum size can be defined for each control in the horizontal and vertical directions. The attributes Minimum Width (including Minimum Width Unit), Maximum Width (including Maximum Width Unit) or Minimum Height (including Minimum Height Unit) and Maximum Height (including Maximum Height Unit) respectively are responsible for this.
Priority: calculated size > calculated maximum value > calculated minimum value
A set maximum value thus overwrites the calculated size, but a set minimum value overwrites the maximum value.
For example, this allows the height of the View to be adapted to the contents (WidthMode=Content), but at the same time the minimum height can be set to 100% so that, for example, no area is created without a background image.
Overlapping
If two controls (partly) occupy the same area on the screen, then the order will be observed. This order can be changed by drag & drop within the Document Outline or directly in the HTML source code.
The Z-Index attribute offers additional options. This can assume negative numeric values and has the default value 0. A control with a higher numerical value in this attribute will be drawn "further forward", i.e. in case of doubt it conceals a control with a lower numerical value. It must be noted that the Z-index also has no global meaning, but is valid only inside a container.
Overfilling
A container control groups together any child controls. The container must be large enough to accept all child controls, because any overfilling will be cut off.