Contents

The folder Contents contains in further subfolders all existing pages or .content files of the project. The contents are built according to certain structures. These are only recommendations.

The Contents/Dashboard folder contains all the contents required for the dynamic dashboard in the Plastic Application HMI project.

The folder Contents/Navigation contains all Contents categorized in folders that can be found in the navigation of the Plastic Application HMI project.

The Contents/Popup folder contains all contents that appear as pop-up windows in the Plastic Application HMI project.

The folder Contents/Slider contains all contents categorized in folders that are applied in the slider area of the Plastic Application HMI project.

The subfolders of the two folders Contents/Navigation and Contents/Slider have the same structure in order to recognize the affiliation of the contents from the slider area and the contents of the main area (contained in the navigation).

As desired, additional files of the type .content can be created or the existing contents can be deleted or edited.

Update capability of the Plastic Application HMI Editing the Plastic Application HMI can lead to an impairment of the update capability. This may affect the support provided by Beckhoff Automation.

Naming controls

The naming (Identifier) of the controls within a content is done according to a special scheme to avoid duplicate naming, as this leads to errors.

The naming in the Plastic Application HMI project follows the following scheme: ContentName_XYZ_ControlType

1. ContenName
2. The name, i.e. the ID of the content (the identifier of the control of type TcHmi.Controls.System.TcHmiContent).
• Example: Temperature_Parameter_Settings
2. XYZ
3. Any description of the control is possible. The hierarchical arrangement within the content can be observed.
• Example: Group1_Active_On
3. ControlType
4. Type of the control. An abbreviation is used.
• Example: For the control of type TcHmi.Controls.Beckhoff.TcHmiButton the abbreviation Button would be used.

Result: "Temperature_Parameters_Settings_Group1_Active_On_Button" is the ID of the described button on the content Temperature_Parameter_Settings.content with the previously described scheme.

Standard Content structure

Most contents are built using grids. The grids make it easier to align the other controls that are in that grid to allow for the tile design that is consistent throughout the project. The contents or controls added to the grid are also arranged in smaller grids to make it easier to align the controls contained within a tile. The grid, which is to represent a tile, can be assigned the CSS class from the Beckhoff.TwinCAT.HMI.Plastic.Themes NuGet package with the name Tiles via the ClassNames property of the Common category to color the background color white, round the corners and add a slight shadow. Using the CSS class TilesHeadline from the same NuGet package, you can quickly customize the appearance of the text block for the tile heading. The class colors the background of the text block in an appropriate shade of gray, the text color becomes white and the corners are adjusted according to the tile. A height of 45 px is usually used for the heading text block.

Use of grids

When using grids in grids, pay attention to the Z-index of the controls. If a control (e.g. a TcHmiGrid) is located within a TcHmiGrid control and its size exceeds the specified range of the corresponding location in the grid, this may mean that some contained controls (such as TcHmiButton controls) can no longer be operated. Thus, the Zindex property of the Layout category of the control that is inside a grid should be given a higher value. For the outer grid, for example, the Zindex property can be set to 0.

Special case: Creation of multiple pages in one content

The content intended for the slider area can be larger than the actual available space. Thus, for example, the width of the content can be twice as wide as the actual available space of the TcHmiRegion control if a second page is to be created. By changing the Left properties from the Layout category, the included grid that fills the entire content will be shifted accordingly to display the specific content that is desired. This can be done, as in the Plastic Application HMI project, using controls of type TcHmiRadioButton.

Example: Manual functions

Available from version 12.6.0