Client-Animation verwenden

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. Entfernen Sie das Objekt TargetVisu unterhalb des Visualisierungsmanagers.

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

Siehe auch

• Objekt 'Visualisierungsmanager' - 'Einstellungen'

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

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:

    

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.

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:

    

Siehe auch

• Visualisierungselement 'Frame'

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

• Client-Animation