dl-breadcrumbs__homedl-breadcrumb-item__separatorKonfiguration und Programmierungdl-breadcrumb-item__separatorProgrammieren mit CODESYSdl-breadcrumb-item__separator...dl-breadcrumb-item__separatorCODESYS Visualizationdl-breadcrumb-item__separatorTutorialdl-breadcrumb-item__separatorClient-Animation verwenden
dl-pagination__prev-inactivedl-pagination__prev-activedl-pagination__next-inactivedl-pagination__next-active
Client-Animation verwendendl-permalink__symbolPermanentlink

Das Beispiel zeigt eine Visualisierung mit 3 Seiten. Die Seiten werden dabei über ein Menü umgeschaltet. Das Menü ist nicht im Sichtbereich und wird über eine so genannte Hamburger-Menü-Schaltfläche in dem Sichtbereich bewegt. Während der Bewegung wird die Transparenz des Menüs verändert. Nach der Wahl der Seite verschwindet das Menü wieder. Die Berechnung der Animation erfolgt dabei vollständig auf dem Zielsystem, die CODESYS-Visualisierung gibt dabei lediglich die Zielwerte (Positionen, Transparenz) vor.

1. Vorbereitung

  1. Erstellen Sie ein neues Standardprojekt mit der Steuerung CODESYS Control Win V3.

  2. Fügen Sie unterhalb der „Applikation“ ein Objekt „Visualisierung“ ein. Wählen Sie den Namen ‎Visu_Main‎.

  3. Öffnen Sie den Visualisierungsmanager im Editor und aktivieren Sie die Option „Client-Animation und Überlagerung systemeigener Elemente unterstützen“.

Siehe auch

  • linktarget doesn't exist but @y.link.required='true'

2. Programm PLC_PRG erstellen

Das Programm wertet aus, ob auf die Menüschaltfläche gedrückt wurde. Wenn die Menüleiste nicht sichtbar ist (Position -300) wird die Position in den sichtbaren Bereich (0) verschoben. Wenn die Menüleiste bereits sichtbar ist (Position 0), wird sie in den nicht sichtbaren Bereich verschoben.

  1. Öffnen Sie das Programm „PLC_PRG“ im Editor.

  2. Geben Sie im Deklarationseditor folgenden Code ein:

    PROGRAM PLC_PRG
VAR
	iSelection : INT;			      // to switch the referenced visualization page
	xVisible: BOOL; 			       // auxiliary variable to toggle the menu bar
	iMenuPos : INT := -300; 		   // position of the menu bar
	xToggle: BOOL; 			        // button variable to toggle the menu bar
END_VAR

  3. Geben Sie in der Implementierung folgenden Code ein:

    IF xToggle THEN
	xToggle := FALSE;
	IF xVisible THEN
		xVisible := FALSE;
		iMenuPos := -300;
	ELSE
		xVisible := TRUE;
		iMenuPos := 0;
	END_IF
END_IF
3. Erstellen der Menüleiste

Die Menüleiste besteht aus 3 Menüpunkten. Durch Klicken auf einen Menüpunkt wird die entsprechende Visualisierungsseite angezeigt.

  1. Fügen Sie unterhalb der Applikation eine Visualisierung „Visu_Menu“ ein.

  2. Öffnen Sie die Eigenschaften des Objekts und stellen Sie in der Registerkarte „Visualisierung“ die „Visualisierungsgröße“ auf „Breite“ 300 und „Höhe“ 180 ein.

  3. Öffnen Sie die Visualisierung im Editor.

  4. Aktivieren Sie in der Ansicht „Eigenschaften“ die Option „Erweitert“.

  5. Fügen Sie in der linken oberen Ecke eine Schaltfläche mit der „Breite“ 300 und der „Höhe“ 60 hinzu.

  6. Beschriften Sie die Schaltfläche mit "Visu 1". Stellen Sie die Schriftgröße auf 24.

  7. Öffnen Sie die Eigenschaft „Eingabekonfiguration  OnMouseClick“.

  8. Wählen Sie die Aktion „ST-Code ausführen“.

  9. Geben Sie folgenden ST-Code ein

    PLC_PRG.iSelection := 0;
PLC_PRG.xToggle := TRUE;

  10. Setzen Sie die Eigenschaft „Schaltflächenzustandsvariable  Digitale Variable“ auf ‎PLC_PRG.iSelection=0‎

  11. Fügen Sie zwei weitere Schaltflächen "Visu 2" und "Visu 3" hinzu.

  12. Passen Sie die Eigenschaften der Schaltflächen von "Visu2" (PLC_PRG.iSelection = 1) und "Visu3" (PLC_PRG.iSelection = 2) an.

    Ergebnis:

    _visu_img_animation_menu
4. Erstellen weiterer Visualisierungsseiten

  1. Fügen Sie unterhalb der Applikation die Visualisierung "Visu1" ein.

  2. Öffnen Sie die Eigenschaften des Objekts und stellen Sie in der Registerkarte „Visualisierung“ die „Visualisierungsgröße“ auf „Breite“ 800 und „Höhe“ 600 ein.

  3. Ändern Sie die Hintergrundfarbe der Seite, beispielsweise auf hellgrau.

  4. Fügen Sie in die Visualisierungsseite ein Objekt „Beschriftung“ ein und benennen Sie das Element (beispielsweise mit "Visu 1").

  5. Fügen Sie unterhalb der Applikation zwei weitere Visualisierungen "Visu2" und "Visu3" ein. Passen Sie die Eigenschaften analog zur "Visu1" an.

5. Erstellen der Hauptvisualisierungsseite

Auf dieser Seite ist die Menüleiste und eine Schaltfläche zum Ein- und Ausblenden der Menüleiste sichtbar. Die verschiedenen Visualisierungsseiten werden über ein Visualisierungselement „Frame“ umgeschaltet.

  1. Öffnen Sie die Eigenschaften der Visualisierung „Visu_Main“ und stellen Sie in der Registerkarte „Visualisierung“ die „Visualisierungsgröße“ auf „Breite“ 800 und „Höhe“ 600 ein.

  2. Öffnen Sie die Visualisierung im Editor.

  3. Fügen Sie ein Element „Frame“ in die Visualisierung ein.

    Der Dialog „Konfiguration der Frame-Visualisierungen“ öffnet sich.

  4. Fügen Sie die Visualisierungen „Visu1“ (Index 0), „Visu2“ (Index 1) und „Visu3“ (Index 2) hinzu.

  5. Setzen Sie die Werte der Eigenschaften von „Position“ auf „X“ = ‎0‎, „Y“ = ‎0‎, „Breite“ = ‎800‎ und „Höhe“ = ‎600‎.

  6. Setzen Sie den Wert der Eigenschaft „Umschaltvariable  Variable“ auf ‎PLC_PRG.iSelection‎.

  7. Fügen Sie ein Element „Schaltfläche“ in die Visualisierung ein.

  8. Setzen Sie die Werte der Eigenschaften von „Position“ auf „X“ = ‎0‎, „Y“ = ‎0‎, „Breite“ = ‎60‎ und „Höhe“ = ‎60‎.

  9. Setzen Sie den Wert der Eigenschaft „Texte  Text“ auf ‎=‎.

  10. Setzen Sie den Wert der Eigenschaft „Texteigenschaften  Schriftart“ auf ‎Arial; 36‎.

  11. Öffnen Sie die Eigenschaft „Eingabekonfiguration  OnMouseClick“.

  12. Wählen Sie darin die Aktion „ST-Code ausführen“.

  13. Geben Sie folgenden ST-Code ein

    PLC_PRG.xToggle := TRUE;

  14. Setzen Sie den Wert der Eigenschaft „Schaltflächenzustandsvariable  Digitale Variable“ auf ‎PLC_PRG.xVisible‎.

  15. Fügen Sie das Visualisierungselement „Visu_Menu“ aus der Kategorie „Aktuelles Projekt “in die Visualisierung ein.

  16. Setzen Sie die Werte der Eigenschaft „Position“ auf „X“ = ‎0‎, „Y“ = ‎60‎, „Breite“ = ‎300‎ und „Höhe“ = ‎180‎.

  17. Setzen Sie den Wert der Eigenschaft „Absolute Bewegung  Bewegung  X“ auf ‎PLC_PRG.iMenuPos‎.

  18. Setzen Sie den Wert der Eigenschaft „Zustandsvariablen  Unsichtbarkeit“ auf ‎not(PLC_PRG.xVisible)‎.

  19. Setzen Sie den Wert der Eigenschaft „Animationsdauer“ auf ‎2000‎.

    Ergebnis:

    _visu_img_animation_project
6. Projekt auf die Steuerung laden und WebVisu starten

  1. Übersetzen Sie das Projekt und laden Sie es auf die Steuerung.

  2. Starten Sie das Projekt.

  3. Verbinden Sie sich im Browser mit der Visualisierung: ‎http://localhost:8080‎.

    Die WebVisu verbindet sich mit der Steuerung, die Visualisierung erscheint.

  4. Klicken Sie in der Visualisierung auf die Menü-Schaltfläche.

    Das Menü bewegt sich in den sichtbaren Bereich.

  5. Wählen Sie einen Menüpunkt.

    Die Visualisierungsseite wird angewählt, das Menü verschwindet wieder.

Siehe auch

  • linktarget doesn't exist but @y.link.required='true'