Contents

Der Ordner Contents beinhaltet in weiteren Unterordnern alle vorhandenen Seiten bzw. .content-Dateien des Projektes. Die Contents sind nach gewissen Strukturen aufgebaut. Dabei handelt es sich lediglich um Empfehlungen.

Contents 1:

Der Ordner Contents/Navigation enthält alle Contents kategorisiert in Ordnern, die in der Navigation des HMI-Projektes der Plastic Application zu finden sind.

Contents 2:
Contents 3:

Der Ordner Contents/Popup enthält alle Contents, die als Popup-Fenster im HMI-Projekt der Plastic Application auftauchen.

Contents 4:

Der Ordner Contents/Slider enthält alle Contents kategorisiert in Ordnern, die im Sliderbereich des Plastic Application HMI-Projektes angewendet werden.

Contents 5:

Die Unterordner der beiden Ordner Contents/Navigation und Contents/Slider sind gleich aufgebaut, um die Zugehörigkeit der Contents aus dem Sliderbereich und den Contents des Hauptbereichs (in der Navigation enthalten) zu erkennen.

Nach Belieben können weitere Dateien vom Typ .content angelegt werden bzw. die bestehenden Contents gelöscht oder bearbeitet werden.

Contents 6:

Updatefähigkeit der Plastic Application HMI

Das Editieren der Plastic Application HMI kann zu einer Einschränkung der Updatefähigkeit führen. Dadurch kann die Unterstützung durch Beckhoff Automation beeinträchtigt werden.

Benennung von Controls

Die Benennung (Identifier) der Controls innerhalb eines Contents erfolgt nach einem speziellen Schema, um doppelte Benennungen zu vermeiden, da diese zu Fehlern führen.

Die Benennungen im Plastic Application HMI-Projekt richten sich an das folgende Schema: ContentName_XYZ_ControlType

  1. ContenName
  2. Der Name, also die ID des Contents (der Identifier des Controls vom Typ TcHmi.Controls.System.TcHmiContent).
  3. XYZ
  4. Beliebige Beschreibung des Controls möglich, dabei kann die hierarchische Anordnung innerhalb des Contents beachtet werden.
  5. ControlType
  6. Der Typ des Controls. Dabei wird eine Abkürzung verwendet.

Ergebnis: „Temperature_Parameters_Settings_Group1_Active_On_Button“ ist die ID des beschriebenen Buttons auf dem Content Temperature_Parameter_Settings.content mit dem zuvor beschriebenen Schema.

Übersicht der Controls mit möglichen Abkürzungen

Control Typ

Abkürzung

TcHmi.Controls.Beckhoff.TcHmiButton

Button

TcHmi.Controls.Beckhoff.TcHmiCheckbox

Checkbox

TcHmi.Controls.Beckhoff.TcHmiCombobox

Combobox

TcHmi.Controls.Beckhoff.TcHmiDatagrid

Datagrid

TcHmi.Controls.Beckhoff.TcHmiEllipse

Ellipse

TcHmi.Controls.Beckhoff.TcHmiEventGrid

EventGrid

TcHmi.Controls.Beckhoff.TcHmiEventLine

EventLine

TcHmi.Controls.Beckhoff.TcHmiLine

Line

TcHmi.Controls.Beckhoff.TcHmiLinearGauge

LinearGauge

TcHmi.Controls.Beckhoff.TcHmiLocalizationSelect

LocalizationSelect

TcHmi.Controls.Beckhoff.TcHmiRadialGauge

RadialGauge

TcHmi.Controls.Beckhoff.TcHmiRadioButton

RadioButton

TcHmi.Controls.Beckhoff.TcHmiRectangle

Rectangle

TcHmi.Controls.Beckhoff.TcHmiObjectBrowser

ObjectBrowser

TcHmi.Controls.Beckhoff.TcHmiStateImage

StateImage

TcHmi.Controls.Beckhoff.TcHmiTextblock

Textblock

TcHmi.Controls.Beckhoff.TcHmiTextbox

Textbox

TcHmi.Controls.Beckhoff.TcHmiToggleButton

ToggleButton

TcHmi.Controls.Beckhoff.TcHmiToggleSwitch

ToggleSwitch

TcHmi.Controls.Beckhoff.TcHmiTrendLineChart

TrendLineChart

TcHmi.Controls.Beckhoff.TcHmiUserManagement

UserManagement

TcHmi.Controls.FavoriteBarControl.FavoriteBarControl

FavoriteBar / FavoriteBarControl

TcHmi.Controls.Plastic.ArrowMotionGraphControl

ArrowMotionGraph / ArrowMotionGraphControl

TcHmi.Controls.Plastic.BlowPressureChart

BlowPressureChart

TcHmi.Controls.Plastic.CamControl

Cam / CamControl

TcHmi.Controls.Plastic.Configurator

Configurator

TcHmi.Controls.Plastic.CurveEditorControl

CurveEditor / CurveEditorControl

TcHmi.Controls.Plastic.InputBox

InputBox

TcHmi.Controls.Plastic.ManualOperation

ManualOperation

TcHmi.Controls.Plastic.MeasurementUnitSelector

MeasurementUnitSelector

TcHmi.Controls.Plastic.MonitoringControl

Monitoring / MonitoringControl

TcHmi.Controls.Plastic.PfwSingleTempControl

PfwSingleTempControl

TcHmi.Controls.Plastic.PfwTempParameters

PfwTempParameters

TcHmi.Controls.Plastic.ProcessScheduler

ProcessScheduler

TcHmi.Controls.Plastic.StateIndicator

StateIndicator

TcHmi.Controls.Plastic.Table

Table

TcHmi.Controls.Plastic.TimerControl

Timer / TimerControl

TcHmi.Controls.Plastic.UserLoggingViewer

UserLoggingViewer

TcHmi.Controls.Plastic.ZoneConfiguration

ZoneConfiguration

TcHmi.Controls.Plastic.ZoneGrouping

ZoneGrouping

TcHmi.Controls.Plastic.ZoneImageLayout

ZoneImageLayout

TcHmi.Controls.ResponsiveNavigation.TcHmiBreadcrumb

Breadcrumb

TcHmi.Controls.ResponsiveNavigation.TcHmiNavigationBar

NavigationBar

TcHmi.Controls.ResponsiveNavigation.TcHmiNavigationContent

NavigationContent

TcHmi.Controls.System.TcHmiContainer

Container

TcHmi.Controls.System.TcHmiContent

Content

TcHmi.Controls.System.TcHmiGrid

Grid

TcHmi.Controls.System.TcHmiPopup

Popup

TcHmi.Controls.System.TcHmiRegion

Region

TcHmi.Controls.System.TcHmiView

View

Standardaufbau von Contents

Die meisten Contents sind mithilfe von Grids aufgebaut. Durch die Grids können die weiteren Controls, die sich in diesem Grid befinden, leichter ausgerichtet werden, um das im gesamten Projekt durchgängige Kachel-Design zu ermöglichen. Die dem Grid hinzugefügten Inhalte bzw. Controls sind ebenfalls in kleineren Grids eingeordnet, um innerhalb einer Kachel die enthaltenen Controls einfacher ausrichten zu können. Dem Grid, das eine Kachel darstellen soll, kann über das ClassNames-Property der Kategorie Common die CSS-Klasse aus dem Beckhoff.TwinCAT.HMI.Plastic.Themes NuGet-Paket mit dem Namen Tiles zugeordnet werden, um die Hintergrundfarbe weiß zu färben, die Ecken abzurunden und einen leichten Schatten hinzuzufügen. Mithilfe der CSS-Klasse TilesHeadline aus dem gleichen NuGet-Paket kann das Aussehen des Textblocks für die Überschrift der Kachel schnell angepasst werden. Die Klasse färbt den Hintergrund des Textblocks in einem entsprechenden Grauton, die Textfarbe wird weiß und die Ecken werden entsprechen der Kachel angepasst. Für den Textblock der Überschrift wird üblicherweise eine Höhe von 45 px verwendet.

Verwendung von Grids

Bei der Verwendung von Grids in Grids ist auf den Z-Index der Controls zu achten. Wenn sich ein Control (z. B. ein TcHmiGrid) innerhalb eines TcHmiGrid-Controls befindet und mit seiner Größe den vorgegebenen Bereich der entsprechenden Stelle im Grid überschreitet, führt dies unter Umständen dazu, dass sich einige enthaltene Controls (wie z. B. TcHmiButton-Controls) nicht mehr bedienen lassen. Somit sollte das Zindex-Property der Kategorie Layout des Controls, dass sich innerhalb eines Grids befindet, einen höheren Wert erhalten. Bei dem äußeren Grid kann das Zindex-Property zum Beispiel auf 0 gesetzt werden.

Sonderfall: Erzeugung mehrerer Seiten in einem Content

Die Contents, die für den Sliderbereich gedacht sind, können nach Belieben größer als der eigentlich zur Verfügung stehende Platz sein. Somit kann zum Beispiel die Breite des Contents doppelt so breit sein, als der eigentlich zur Verfügung stehende Platz des TcHmiRegion-Controls, wenn eine zweite Seite erzeugt werden soll. Durch die Änderung des Left-Properties aus der Kategorie Layout wird das enthaltene Grid, das den gesamten Content füllt, entsprechend verschoben, um die bestimmten Inhalte anzuzeigen, die gewünscht sind. Dies kann, wie in dem HMI-Projekt der Plastic Application, über Controls vom Typ TcHmiRadioButton erfolgen.

Beispiel: Handfunktionen

Contents 7:

Verfügbar ab Version 12.6.0