Tutorial: Client-Animation verwenden

Das Beispiel zeigt eine Visualisierung mit drei 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.

Vorbereitung

Erstellen Sie ein neues Standardprojekt mit der Steuerung CODESYS Control Win.
Fügen Sie unterhalb der Applikation ein Objekt Visualisierung ein. Wählen Sie den Namen Visu_Main.
Öffnen Sie den Visualisierungsmanager im Editor und aktivieren Sie die Option Client-Animation und Überlagerung systemeigener Elemente unterstützen.

Für weitere Informationen siehe: Einstellungen

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.

Öffnen Sie das Programm PLC_PRG im Editor.

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

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

Menüleiste erstellen

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

Fügen Sie unterhalb der Applikation eine Visualisierung Visu_Menu ein.
Öffnen Sie die Eigenschaften des Objekts und stellen Sie in der Registerkarte Visualisierung die Visualisierungsgröße auf Breite 300 und Höhe 180 ein.
Öffnen Sie die Visualisierung im Editor.
Aktivieren Sie in der Ansicht Eigenschaften die Option Erweitert.
Fügen Sie in der linken oberen Ecke eine Schaltfläche mit der Breite 300 und der Höhe 60 hinzu.
Beschriften Sie die Schaltfläche mit „Visu 1“. Stellen Sie die Schriftgröße auf 24.
Öffnen Sie die Eigenschaft Eingabekonfiguration → OnMouseClick .
Wählen Sie die Aktion ST-Code ausführen.

Geben Sie folgenden ST-Code ein

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

Setzen Sie die Eigenschaft Schaltflächenzustandsvariable → Digitale Variable auf PLC_PRG.iSelection=0
Fügen Sie zwei weitere Schaltflächen Visu 2 und Visu 3 hinzu.
Passen Sie die Eigenschaften der Schaltflächen von Visu2 (PLC_PRG.iSelection = 1) und Visu3 (PLC_PRG.iSelection = 2) an.
Ergebnis:

Weitere Visualisierungsseiten erstellen

Fügen Sie unterhalb der Applikation die Visualisierung Visu1 ein.
Öffnen Sie die Eigenschaften des Objekts und stellen Sie in der Registerkarte Visualisierung die Visualisierungsgröße auf Breite 800 und Höhe 600 ein.
Ändern Sie die Hintergrundfarbe der Seite, beispielsweise auf hellgrau.
Fügen Sie in die Visualisierungsseite ein Objekt Beschriftung ein und benennen Sie das Element (beispielsweise mit Visu 1).
Fügen Sie unterhalb der Applikation zwei weitere Visualisierungen Visu2 und Visu3 ein. Passen Sie die Eigenschaften analog zur Visu1 an.

Hauptvisualisierungsseite erstellen

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.

Ö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.
Öffnen Sie die Visualisierung im Editor.
Fügen Sie ein Element Frame in die Visualisierung ein.
Der Dialog Konfiguration der Frame-Visualisierungen öffnet sich.
Fügen Sie die Visualisierungen Visu1 (Index 0), Visu2 (Index 1) und Visu3 (Index 2) hinzu.
Setzen Sie die Werte der Eigenschaften von Position auf X = 0, Y = 0, Breite = 800 und Höhe = 600.
Setzen Sie den Wert der Eigenschaft Umschaltvariable → Variable auf PLC_PRG.iSelection.
Fügen Sie ein Element Schaltfläche in die Visualisierung ein.
Setzen Sie die Werte der Eigenschaften von Position auf X = 0, Y = 0, Breite = 60 und Höhe = 60.
Setzen Sie den Wert der Eigenschaft Texte → Text auf =.
Setzen Sie den Wert der Eigenschaft Texteigenschaften → Schriftart auf Arial; 36.
Öffnen Sie die Eigenschaft Eingabekonfiguration → OnMouseClick .
Wählen Sie darin die Aktion ST-Code ausführen.
Geben Sie folgenden ST-Code ein
```
PLC_PRG.xToggle := TRUE;
```
Setzen Sie den Wert der Eigenschaft Schaltflächenzustandsvariable → Digitale Variable auf PLC_PRG.xVisible.
Fügen Sie das Visualisierungselement Visu_Menu aus der Kategorie Aktuelles Projekt in die Visualisierung ein.
Setzen Sie die Werte der Eigenschaft Position auf X = 0, Y = 60, Breite = 300 und Höhe = 180.
Setzen Sie den Wert der Eigenschaft Absolute Bewegung → Bewegung → X auf PLC_PRG.iMenuPos.
Setzen Sie den Wert der Eigenschaft Zustandsvariablen → Unsichtbarkeit auf not(PLC_PRG.xVisible).
Setzen Sie den Wert der Eigenschaft Animationsdauer auf 2000.
Ergebnis:

Projekt auf die Steuerung laden und WebVisu starten

Übersetzen Sie das Projekt und laden Sie es auf die Steuerung.
Starten Sie das Projekt.
Verbinden Sie sich im Browser mit der Visualisierung: http://localhost:8080.
Die WebVisu verbindet sich mit der Steuerung, die Visualisierung erscheint.
Klicken Sie in der Visualisierung auf die Menü-Schaltfläche.
Das Menü bewegt sich in den sichtbaren Bereich.
Wählen Sie einen Menüpunkt.
Die Visualisierungsseite wird angewählt, das Menü verschwindet wieder.

In diesem Abschnitt: