Skip to main content

Visualisierungen referenzieren

Visualisierungen in einer Visualisierung darstellen

Wichtig

Visualisierungen können mit Hilfe von Frame 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.

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.

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.

Für weiter Informationen siehe: Benutzereingabe konfigurieren

Hinweis

Kann auch veraltet seinBeispielprojekt für das Umschalten von Visualisierungen innerhab eines Frames

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.

Prozedur. Frame-Visualisierungen mit einem Radiobuttons-Element verbinden

  1. Erstellen Sie in CODESYS ein neues Standardprojekt.

  2. Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl Objekt hinzufügen → Visualisierung .

  3. Geben Sie im Dialog Visualisierung hinzufügen als Name VisuMain ein und beenden Sie den Dialog mit Hinzufügen.

  4. Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl Objekt hinzufügen → Visualisierung .

  5. Geben Sie im Dialog Visualisierung hinzufügen als Name Visu1 ein und beenden Sie den Dialog mit Hinzufügen.

  6. Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl Objekt hinzufügen → Visualisierung .

  7. Geben Sie im Dialog Visualisierung hinzufügen als Name Visu2 ein und beenden Sie den Dialog mit Hinzufügen.

  8. Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl Objekt hinzufügen → Visualisierung .

  9. 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.

  10. Öffnen Sie das Objekt Visu1.

  11. 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.

  12. 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

    _visu_1_for_referencing.png

  13. 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

  14. 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

  15. Öffnen Sie das Objekt VisuMain.

  16. 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.

  17. 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.

  18. Selektieren Sie außerdem das Objekt Visu2 und klicken Sie unter Ausgewählte Visualisierungen auf das Symbol Hinzufügen.

  19. Selektieren Sie außerdem das Objekt Visu3 und klicken Sie unter Ausgewählte Visualisierungen auf das Symbol Hinzufügen.

  20. 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.

    _visu_main_with_properties.png

    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.

  21. 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.

  22. Klicken Sie in der Eigenschaft Radiobuttoneinstellungen, Radiobutton auf die Schaltfläche Neu erstellen.

    Das Element hat 3 Schalter zur Auswahl.

  23. 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

    _visu_main_for_referencing.png

  24. 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

  25. Selektieren Sie das Element Radiobuttons und klicken Sie in das Wertefeld der Eigenschaft Variable auf die Schaltfläche _cds_icon_three_dots.png.

  26. Selektieren Sie im Dialog Eingabehilfe die neu deklarierte Variable und beenden Sie den Dialog.

    . Eigenschaft desRadiobuttons-Element:

    • Eigenschaft Variable mit PLC_PRG.iActiveVisu

  27. 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 desFrame-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.

  28. Wählen Sie den Menübefehl Erstellen → Code erzeugen .

  29. 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.

    _visu_reference_1_within_a_frame.png
    _visu_reference_2_within_a_frame.png
    _visu_reference_3_within_a_frame.png

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.

Prozedur. Visualisierungen programmieren

  1. Erstellen Sie in CODESYSein neues Standardprojekt.

  2. Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl Objekt hinzufügen → Visualisierung .

  3. Geben Sie im Dialog Visualisierung hinzufügen als Name VisuMain ein und beenden Sie den Dialog mit Hinzufügen.

  4. Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl Objekt hinzufügen → Visualisierung .

  5. Geben Sie im Dialog Visualisierung hinzufügen als Name Visu1 ein und beenden Sie den Dialog mit Hinzufügen.

  6. Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl Objekt hinzufügen → Visualisierung .

  7. Geben Sie im Dialog Visualisierung hinzufügen als Name Visu2 ein und beenden Sie den Dialog mit Hinzufügen.

  8. Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl Objekt hinzufügen → Visualisierung .

  9. 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.

  10. Öffnen Sie das Objekt Visu1.

  11. 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.

  12. 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

    _visu_1_for_referencing.png

  13. 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

  14. 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

  15. Öffnen Sie das Objekt VisuMain.

  16. 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.

  17. 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.

  18. Selektieren Sie außerdem das Objekt Visu2 und klicken Sie unter Ausgewählte Visualisierungen auf das Symbol Hinzufügen.

  19. Selektieren Sie außerdem das Objekt Visu3 und klicken Sie unter Ausgewählte Visualisierungen auf das Symbol Hinzufügen.

  20. 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.

    _visu_main_with_properties.png

    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.

  21. 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.

  22. Konfigurieren Sie die Eigenschaft Texte, Text mit Visu1.

  23. Klicken Sie in der Eigenschaft Eingabekonfiguration, OnMouseDown auf die Schaltfläche Konfigurieren.

    Der Dialog Eingabekonfiguration öffnet sich.

  24. Selektieren Sie die Aktion Frame-Visualisierung umschalten und klicken Sie auf _icon_arrow_right.png.

    Die Aktion erscheint im rechten Fenster.

  25. . 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

  26. 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

  27. 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

  28. Wählen Sie den Menübefehl Erstellen → Code erzeugen .

  29. 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.

    _visu_1_in_runtime_action.png
    _visu_2_in_runtime_action.png
    _visu_3_in_runtime_action.png

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.

Prozedur. Registerkarten-Element konfigurieren

  1. Erstellen Sie in CODESYSein neues Standardprojekt.

  2. Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl Objekt hinzufügen → Visualisierung .

  3. Geben Sie im Dialog Visualisierung hinzufügen als Name VisuMain ein und beenden Sie den Dialog mit Hinzufügen.

  4. Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl Objekt hinzufügen → Visualisierung .

  5. Geben Sie im Dialog Visualisierung hinzufügen als Name Visu1 ein und beenden Sie den Dialog mit Hinzufügen.

  6. Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl Objekt hinzufügen → Visualisierung .

  7. Geben Sie im Dialog Visualisierung hinzufügen als Name Visu2 ein und beenden Sie den Dialog mit Hinzufügen.

  8. Selektieren Sie im Gerätebaum die Applikation und wählen Sie den Befehl Objekt hinzufügen → Visualisierung .

  9. 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.

  10. Öffnen Sie das Objekt Visu1.

  11. Ziehen Sie in den Visualisierungseditor ein Element Rechteck.

    Die Ansicht Eigenschaften des Elements öffnet sich.

  12. 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

    _visu_1_for_referencing.png

  13. 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

  14. 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

  15. Öffnen Sie das Objekt VisuMain.

  16. 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.

  17. 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.

  18. Selektieren Sie außerdem das Objekt Visu2 und klicken Sie unter Ausgewählte Visualisierungen auf das Symbol Hinzufügen.

  19. Selektieren Sie außerdem das Objekt Visu3 und klicken Sie unter Ausgewählte Visualisierungen auf das Symbol Hinzufügen.

  20. 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.

    _visu_main_with_properties.png

    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.

  21. 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.

  22. 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

    _visu_within_a_tab.png

  23. Wählen Sie den Menübefehl Erstellen → Code erzeugen .

  24. 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.

    _visu_within_a_tab_in_runtime.png
In diesem Abschnitt: