Visualisierungen in einer Visualisierung darstellen

Sie können innerhalb einer Hauptvisualisierung in einem „Frame“- oder einem „Registerkarten“-Element weitere Visualisierungen referenzieren und diese im Fensterbereich des Elements anzeigen.

Beim Element „Frame“ können Sie frei programmieren, welche der Visualisierungen wann angezeigt wird. Eine Möglichkeit ist, die Umschaltvariable des „Frame“-Elements zu verwenden, die automatisch eine Umschaltung entsprechend ihrem Wert auslöst. Sie können auch zusätzliche Steuerelemente programmieren, die nach Benutzereingaben Eingabeaktionen auslösen, die eine Visualisierungsumschaltung bewirken.

HINWEIS

Visualisierungen können mit Hilfe von „Frame“-Elementen beliebig tief verschachtelt sein. Um den Frame-Auswahltyp „Beliebige Visualisierung umschalten“ problemlos nutzen zu können, darf ein „Frame“ jedoch nicht mehr als 21 referenzierte Visualisierungen enthalten.

Sehen Sie hierzu auch die Beschreibung zur „Eingabekonfiguration“ eines Elements: Aktion „Frame-Visualisierung umschalten“.

Sie können außerdem das Element „Registerkarten“ verwenden, um Visualisierungen zu referenzieren. Dabei ist einfach und vorteilhaft, dass das Element „Registerkarten“ die Steuerung der Visualisierungsumschaltung vorkonfiguriert zur Verfügung stellt.

In CODESYS Forge finden Sie das Beispielprojekt "Visualization Switching". Dort ist eine Visualisierung zu sehen, die zur Laufzeit andere Visualisierungen in einem Framebereich nacheinander anzeigt. Die Visualisierungsumschaltung erfolgt dabei gesteuert durch den Benutzer, programmatisch oder über den FrameManager.

Siehe auch

‎⮫ Beispielprojekt in CODESYS Forge

Frame-Visualisierungen mit Variable umschalten

In der Hauptvisualisierung zeigt das Element „Frame “ zur Laufzeit eine der referenzierten Frame-Visualisierungen an. Über das Element „Radiobuttons“ kann der Benutzer auswählen, welche im Frame angezeigt wird.

Frame-Visualisierungen mit einem Radiobuttons-Element verbinden

Erstellen Sie in CODESYS ein neues Standardprojekt.
Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl „Objekt hinzufügen Visualisierung“.
Geben Sie im Dialog „Visualisierung hinzufügen“ als Name ‎VisuMain‎ ein und beenden Sie den Dialog mit „Hinzufügen“.
Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl „Objekt hinzufügen Visualisierung“.
Geben Sie im Dialog „Visualisierung hinzufügen“ als Name ‎Visu1‎ ein und beenden Sie den Dialog mit „Hinzufügen“.
Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl „Objekt hinzufügen Visualisierung“.
Geben Sie im Dialog „Visualisierung hinzufügen“ als Name ‎Visu2‎ ein und beenden Sie den Dialog mit „Hinzufügen“.
Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl „Objekt hinzufügen Visualisierung“.
Geben Sie im Dialog „Visualisierung hinzufügen“ als Name ‎Visu3‎ ein und beenden Sie den Dialog mit „Hinzufügen“.

Neben der Hauptvisualisierung gibt es 3 weitere Visualisierungsobjekte.
Öffnen Sie das Objekt ‎Visu1‎.
Wählen Sie in der Ansicht „Visualisierungswerkzeuge“ aus der Kategorie „Basis“ das Element „Radiobuttons“ aus und ziehen Sie es in den Visualisierungseditor.

Die Ansicht „Eigenschaften“ des Elements öffnet sich.
Konfigurieren Sie folgendermaßen die Eigenschaften des Rechtecks:
- Eigenschaft „Texte“, „Text“ mit ‎Visu1‎
- Eigenschaft „Texteigenschaft“, „Schriftart“ mit „Titel“
- Eigenschaft „Farben“, „Normalzustand“, „Füllfarbe“ mit „Hellgrau“
Programmieren Sie entsprechend das Objekt ‎Visu2‎.
Eigenschaften des Rechtecks:
- Eigenschaft „Texte“, „Text“ mit ‎Visu2‎
- Eigenschaft „Texteigenschaft“, „Schriftart“ mit „Titel“
- Eigenschaft „Farben“, „Normalzustand“, „Füllfarbe“ mit „Grau“
Programmieren Sie entsprechend das Objekt ‎Visu3‎.
Eigenschaften des Rechtecks:
- Eigenschaft „Texte“, „Text“ mit ‎Visu3‎
- Eigenschaft „Texteigenschaft“, „Schriftart“ mit „Titel“
- Eigenschaft „Farben“, „Normalzustand“, „Füllfarbe“ mit „Dunkelgrau“
Öffnen Sie das Objekt ‎VisuMain‎.
Wählen Sie in der Ansicht „Visualisierungswerkzeuge“ aus der Kategorie „Basis“ das Element „Frame“ aus und ziehen Sie es in den Visualisierungseditor.

Der Dialog „Konfiguration der Frame-Visualisierungen“ öffnet sich.
Selektieren Sie im Fensterbereich „Verfügbare Visualisierungen“ in der Registerkarte „Nach Visualisierungsnamen“ das Objekt ‎Visu1‎ und klicken Sie unter „Ausgewählte Visualisierungen“ auf das Symbol „Hinzufügen“.
Selektieren Sie außerdem das Objekt ‎Visu2‎ und klicken Sie unter „Ausgewählte Visualisierungen“ auf das Symbol „Hinzufügen“.
Selektieren Sie außerdem das Objekt ‎Visu3‎ und klicken Sie unter „Ausgewählte Visualisierungen“ auf das Symbol „Hinzufügen“.
Beenden Sie den Dialog mit „OK“.

Das „Frame“-Element referenziert nun die 3 ausgewählten Visualisierungen. Die Referenzen (1) werden in den Elementeigenschaften des „Frame“-Elements unter der Eigenschaft „Referenzierte Visualisierungen“ aufgelistet. Neben dem Visualisierungsnamen wird der zugehörige Indexwert (2) angezeigt.

Hinweis: Sie können den Dialog öffnen, wenn Sie auf die Schaltfläche „Konfigurieren“ im Wertefeld der Eigenschaft „Referenzierte Visualisierungen“ klicken. Siehe (3). Über die Reihenfolge der Visualisierungen in der Liste „Ausgewählte Visualisierungen“ können Sie den Index beeinflussen.
Wählen Sie in der Ansicht „Visualisierungswerkzeuge“ aus der Kategorie „Allgemeine Steuerelemente“ das Element „Radiobutton“ aus und ziehen Sie es in den Visualisierungseditor.

Die Ansicht „Eigenschaften“ des Elements öffnet sich.
Klicken Sie in der Eigenschaft „Radiobuttoneinstellungen“, „Radiobutton“ auf die Schaltfläche „Neu erstellen“.

Das Element hat 3 Schalter zur Auswahl.
Konfigurieren Sie folgendermaßen die Eigenschaften des Radiobuttons:
- Eigenschaft „Radiobuttoneinstellungen“, „Bereiche“, „[0]“, „Text“ mit ‎Visu1‎
- Eigenschaft „Radiobuttoneinstellungen“, „Bereiche“, „[1]“, „Text“ mit ‎Visu2‎
- Eigenschaft „Radiobuttoneinstellungen“, „Bereiche“, „[2]“, „Text“ mit ‎Visu3‎
Deklarieren Sie im Programm ‎PLC_PRG‎ eine lokale Variable für die Nummer der Visualisierung, die aktiv ist.
```
VAR
	iActiveVisu : INT; // Index of visu activated by the user
END_VAR
```
Selektieren Sie das Element „Radiobuttons“ und klicken Sie in das Wertefeld der Eigenschaft „Variable “ auf die Schaltfläche .
Selektieren Sie im Dialog „Eingabehilfe“ die neu deklarierte Variable und beenden Sie den Dialog.
Eigenschaft des „Radiobuttons“-Element:
- Eigenschaft „Variable“ mit ‎PLC_PRG.iActiveVisu‎
Selektieren Sie das Element „Frame“ und klicken Sie in das Wertefeld der Eigenschaft „Umschaltvariable “, „Variable“ und geben Sie auch hier die neu deklarierte Variable ein.
Eigenschaft des „Frame“-Elements:
- Eigenschaft „Umschaltvariable “, „Variable“ mit ‎PLC_PRG.iActiveVisu‎
Die Steuervariable des „Radiobuttons“-Elements ist gleichzeitig die Umschaltvariable des „Frame“-Elements. Eine Benutzereingabe beim „Radiobuttons“-Element bewirkt somit eine Umschaltung der Frame-Visualisierung.
Wählen Sie den Menübefehl „Erstellen Code erzeugen“.
Wählen Sie „Online Einloggen“ und starten Sie die Applikation.

Die Visualisierung startet. Im Frame läuft eine der referenzierten Visualisierungen. Mit Klick auf eine nicht aktivierte Option des „Radiobuttons“-Elements schaltet die Visualisierung den Inhalt im Frame auf die gewünschte Visualisierung um.

Im Beispiel wird die Umschaltvariable mit einer Eingabevariablen verbunden. Sie können die Umschaltvariable statt dessen auch programmatisch im IEC-Code setzen.

Frame-Visualisierungen durch Folgeaktion umschalten

In der Hauptvisualisierung zeigt das Element „Frame “ zur Laufzeit eine der Frame-Visualisierungen an. Über Schaltflächen kann der Benutzer steuern, welche im Frame angezeigt wird. Die Benutzereingabe löst dabei die Eingabeaktion „Frame-Visualisierung umschalten“ aus.

Visualisierungen programmieren

Erstellen Sie in CODESYS ein neues Standardprojekt.
Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl „Objekt hinzufügen Visualisierung“.
Geben Sie im Dialog „Visualisierung hinzufügen“ als Name ‎VisuMain‎ ein und beenden Sie den Dialog mit „Hinzufügen“.
Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl „Objekt hinzufügen Visualisierung“.
Geben Sie im Dialog „Visualisierung hinzufügen“ als Name ‎Visu1‎ ein und beenden Sie den Dialog mit „Hinzufügen“.
Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl „Objekt hinzufügen Visualisierung“.
Geben Sie im Dialog „Visualisierung hinzufügen“ als Name ‎Visu2‎ ein und beenden Sie den Dialog mit „Hinzufügen“.
Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl „Objekt hinzufügen Visualisierung“.
Geben Sie im Dialog „Visualisierung hinzufügen“ als Name ‎Visu3‎ ein und beenden Sie den Dialog mit „Hinzufügen“.

Neben der Hauptvisualisierung gibt es 3 weitere Visualisierungsobjekte.
Öffnen Sie das Objekt ‎Visu1‎.
Wählen Sie in der Ansicht „Visualisierungswerkzeuge“ aus der Kategorie „Basis“ das Element „Rechteck“ aus und ziehen Sie es in den Visualisierungseditor.

Die Ansicht „Eigenschaften“ des Elements öffnet sich.
Konfigurieren Sie folgendermaßen die Eigenschaften des Rechtecks:
- Eigenschaft „Texte“, „Text“ mit ‎Visu1‎
- Eigenschaft „Texteigenschaft“, „Schriftart“ mit „Titel“
- Eigenschaft „Farben“, „Normalzustand“, „Füllfarbe“ mit „Hellgrau“
Programmieren Sie entsprechend das Objekt ‎Visu2‎.
Eigenschaften des Rechtecks:
- Eigenschaft „Texte“, „Text“ mit ‎Visu2‎
- Eigenschaft „Texteigenschaft“, „Schriftart“ mit „Titel“
- Eigenschaft „Farben“, „Normalzustand“, „Füllfarbe“ mit „Grau“
Programmieren Sie entsprechend das Objekt ‎Visu3‎.
Eigenschaften des Rechtecks:
- Eigenschaft „Texte“, „Text“ mit ‎Visu3‎
- Eigenschaft „Texteigenschaft“, „Schriftart“ mit „Titel“
- Eigenschaft „Farben“, „Normalzustand“, „Füllfarbe“ mit „Dunkelgrau“
Öffnen Sie das Objekt ‎VisuMain‎.
Wählen Sie in der Ansicht „Visualisierungswerkzeuge“ aus der Kategorie „Basis“ das Element „Frame“ aus und ziehen Sie es in den Visualisierungseditor.

Der Dialog „Konfiguration der Frame-Visualisierungen“ öffnet sich.
Selektieren Sie im Fensterbereich „Verfügbare Visualisierungen“ in der Registerkarte „Nach Visualisierungsnamen“ das Objekt ‎Visu1‎ und klicken Sie unter „Ausgewählte Visualisierungen“ auf das Symbol „Hinzufügen“.
Selektieren Sie außerdem das Objekt ‎Visu2‎ und klicken Sie unter „Ausgewählte Visualisierungen“ auf das Symbol „Hinzufügen“.
Selektieren Sie außerdem das Objekt ‎Visu3‎ und klicken Sie unter „Ausgewählte Visualisierungen“ auf das Symbol „Hinzufügen“.
Beenden Sie den Dialog mit „OK“.

Das „Frame“-Element referenziert nun die 3 ausgewählten Visualisierungen. Die Referenzen (1) werden in den Elementeigenschaften des „Frame“-Elements unter der Eigenschaft „Referenzierte Visualisierungen“ aufgelistet. Neben dem Visualisierungsnamen wird der zugehörige Indexwert (2) angezeigt.

Hinweis: Sie können den Dialog selbstständig öffnen, wenn Sie auf die Schaltfläche „Konfigurieren“ im Wertefeld der Eigenschaft „Referenzierte Visualisierungen“ klicken. Siehe (3). Über die Reihenfolge der Visualisierungen in der Liste „Ausgewählte Visualisierungen“ können Sie den Index beeinflussen.
Wählen Sie in der Ansicht „Visualisierungswerkzeuge“ aus der Kategorie „Allgemeine Steuerelemente“ das Element „Schaltfläche“ aus und ziehen Sie es in den Visualisierungseditor.

Das Element ist selektiert und in der Ansicht „Eigenschaften“ sind dessen Eigenschaften sichtbar.
Konfigurieren Sie die Eigenschaft „Texte“, „Text“ mit ‎Visu1‎.
Klicken Sie in der Eigenschaft „Eingabekonfiguration“, „OnMouseDown“ auf die Schaltfläche „Konfigurieren“.

Der Dialog „Eingabekonfiguration“ öffnet sich.
Selektieren Sie die Aktion „Frame-Visualisierung umschalten“ und klicken Sie auf .

Die Aktion erscheint im rechten Fenster.
Konfigurieren Sie die Aktion:
- Aktivieren Sie die Option „Lokale Visualisierung umschalten“
- Setzen Sie die „Visualisierungsauswahl“ auf ‎Visu1‎
- Beenden Sie den Dialog mit „OK“
Unter der Eigenschaft „Eingabekonfiguration“ ist die Folgeaktion konfiguriert:

Eigenschaft „Eingabekonfiguration“, „OnMouseDown“, „Frame-Visualisierung umschalten“ mit ‎0‎
Ziehen Sie in den Visualisierungseditor ein weiteres Element „Schaltfläche“ und konfigurieren Sie die Schaltfläche entsprechend.
Eigenschaften der Schaltfläche:
- Eigenschaft „Texte“, „Text“ mit ‎Visu2‎
- Eigenschaft „Eingabekonfiguration“, „OnMouseDown“, „Frame-Visualisierung umschalten“ mit ‎1‎
Ziehen Sie in den Visualisierungseditor ein weiteres Element „Schaltfläche“ und konfigurieren Sie die Schaltfläche entsprechend.
Eigenschaften der Schaltfläche:
- Eigenschaft „Texte“, „Text“ mit ‎Visu3‎
- Eigenschaft „Eingabekonfiguration“, „OnMouseDown“, „Frame-Visualisierung umschalten“ mit ‎2‎
Wählen Sie den Menübefehl „Erstellen Code erzeugen“.
Wählen Sie „Online Einloggen“ für Ihr Gerät und starten Sie die Applikation.

Die Visualisierung startet. Im Frame läuft eine der referenzierten Visualisierungen. Mit Klick auf eine der Schaltflächen schaltet die Visualisierung den Inhalt im Frame auf die zugehörige Visualisierung um.

Visualisierungen in einem Registerkarten-Element anzeigen

Beim Element „Registerkarten“ wird die Navigation der referenzierten Visualisierungen automatisch zur Verfügung gestellt. Die erste der referenzierten Visualisierungen ist im Vordergrund, die anderen verdeckt "dahinter". Über die automatisch zur Verfügung stehenden Reiter kann der Benutzer zwischen ihnen navigieren.

Registerkarten-Element konfigurieren

Erstellen Sie in CODESYS ein neues Standardprojekt.
Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl „Objekt hinzufügen Visualisierung“.
Geben Sie im Dialog „Visualisierung hinzufügen“ als Name ‎VisuMain‎ ein und beenden Sie den Dialog mit „Hinzufügen“.
Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl „Objekt hinzufügen Visualisierung“.
Geben Sie im Dialog „Visualisierung hinzufügen“ als Name ‎Visu1‎ ein und beenden Sie den Dialog mit „Hinzufügen“.
Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl „Objekt hinzufügen Visualisierung“.
Geben Sie im Dialog „Visualisierung hinzufügen“ als Name ‎Visu2‎ ein und beenden Sie den Dialog mit „Hinzufügen“.
Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl „Objekt hinzufügen Visualisierung“.
Geben Sie im Dialog „Visualisierung hinzufügen“ als Name ‎Visu3‎ ein und beenden Sie den Dialog mit „Hinzufügen“.

Neben der Hauptvisualisierung gibt es 3 weitere Visualisierungsobjekte.
Öffnen Sie das Objekt ‎Visu1‎.
Ziehen Sie in den Visualisierungseditor ein Element „Rechteck“.

Die Ansicht „Eigenschaften“ des Elements öffnet sich.
Konfigurieren Sie folgendermaßen die Eigenschaften des Rechtecks:
- Eigenschaft „Texte“, „Text“ mit ‎Visu1‎
- Eigenschaft „Texteigenschaft“, „Schriftart“ mit „Titel“
- Eigenschaft „Farben“, „Normalzustand“, „Füllfarbe“ mit „Hellgrau“
Programmieren Sie entsprechend das Objekt ‎Visu2‎.
Eigenschaften des Rechtecks:
- Eigenschaft „Texte“, „Text“ mit ‎Visu2‎
- Eigenschaft „Texteigenschaft“, „Schriftart“ mit „Titel“
- Eigenschaft „Farben“, „Normalzustand“, „Füllfarbe“ mit „Grau“
Programmieren Sie entsprechend das Objekt ‎Visu3‎.
Eigenschaften des Rechtecks:
- Eigenschaft „Texte“, „Text“ mit ‎Visu3‎
- Eigenschaft „Texteigenschaft“, „Schriftart“ mit „Titel“
- Eigenschaft „Farben“, „Normalzustand“, „Füllfarbe“ mit „Dunkelgrau“
Öffnen Sie das Objekt ‎VisuMain‎.
Wählen Sie in der Ansicht „Visualisierungswerkzeuge“ aus der Kategorie „Basis“ das Element „Frame“ aus und ziehen Sie es in den Visualisierungseditor.

Der Dialog „Konfiguration der Frame-Visualisierungen“ öffnet sich.
Selektieren Sie im Fensterbereich „Verfügbare Visualisierungen“ in der Registerkarte „Nach Visualisierungsnamen“ das Objekt ‎Visu1‎ und klicken Sie unter „Ausgewählte Visualisierungen“ auf das Symbol „Hinzufügen“.
Selektieren Sie außerdem das Objekt ‎Visu2‎ und klicken Sie unter „Ausgewählte Visualisierungen“ auf das Symbol „Hinzufügen“.
Selektieren Sie außerdem das Objekt ‎Visu3‎ und klicken Sie unter „Ausgewählte Visualisierungen“ auf das Symbol „Hinzufügen“.
Beenden Sie den Dialog mit „OK“

Das „Registerkarten“-Element referenziert nun die 3 ausgewählten Visualisierungen. Die Referenzen (1) werden in den Elementeigenschaften des „Frame“-Elements unter der Eigenschaft „Referenzierte Visualisierungen“ aufgelistet. Neben dem Visualisierungsnamen wird der zugehörige Indexwert (2) angezeigt.

Hinweis: Sie können den Dialog „Konfiguration der Frame-Visualisierungen“ selbstständig öffnen, wenn Sie auf die Schaltfläche „Konfigurieren“ im Wertefeld der Eigenschaft „Referenzierte Visualisierungen“ klicken. Siehe (3). Über die Reihenfolge der Visualisierungen in der Liste „Ausgewählte Visualisierungen“ können Sie den Index beeinflussen.
Wählen Sie in der Ansicht „Visualisierungswerkzeuge“ aus der Kategorie „Allgemeine Steuerelemente“ das Element „Registerkarten“ aus und ziehen Sie es in den Visualisierungseditor.

Die Ansicht „Eigenschaften“ des Elements öffnet sich.
Konfigurieren Sie folgendermaßen die Eigenschaften der Registerkarte:
- Eigenschaft „Registerbreite“: ‎40‎
- Eigenschaft „Referenzierte Visualisierungen“, ‎Visu1‎, „Überschrift“ mit ‎Visu1‎
- Eigenschaft „Referenzierte Visualisierungen“, ‎Visu2‎, „Überschrift“ mit ‎Visu2‎
- Eigenschaft „Referenzierte Visualisierungen“, ‎Visu3‎, „Überschrift“ mit ‎Visu3‎
Wählen Sie den Menübefehl „Erstellen Code erzeugen“.
Wählen Sie „Online Einloggen“ für Ihr Gerät und starten Sie die Applikation.

Die Visualisierung startet. Im „Registerkarten“-Element läuft eine der referenzierten Visualisierungen. Mit Klick auf den Reiter wird auf die zugehörige Visualisierung umgeschaltet.

Siehe auch