Skip to main content

Schaltfläche animieren

Eine Schaltfläche kann zur Laufzeit, wie bei Visualisierungselementen üblich, ihr äußeres Erscheinungsbild ändern. So kann das Element sich gesteuert in Bewegung setzen, die Farbe wechseln oder unterschiedliche Bilder darstellen. Sie animieren dies in den Eigenschaften des Elements. Eine Bewegung wird in den Eigenschaften Absolute Bewegung und Relative Bewegung gesteuert, die Farbe in der Eigenschaft Farbvariablen und ein Bilderwechsel in der Eigenschaft Bild-ID-Variable.

Zusätzlich kann eine Schaltfläche die Zustände „gedrückt“ und „hervorstehend“ einnehmen und sich dabei wie ein Schalter oder aber wie ein Taster verhalten. Ein Schalter wechselt zwischen gedrückt und hervorstehend hin und her, eine Taste oder ein Taster wechselt dagegen nur kurz nach „gedrückt“ und ist dann wieder „hervorstehend“. Schaltflächen visualisieren die Zustände gesteuert von der Eigenschaft Schaltflächenzustandsvariable. Die Eigenschaft ist standardmäßig mit einer Benutzereingabe gekoppelt.

Schaltflächenzustand animieren

Bestimmen Sie das Eingabeereignis, auf das eine Schaltfläche reagiert, indem Sie unter der Eigenschaft Eingabekonfiguration ein Eingabeereignis (Mausklickereignis) auswählen. Konfigurieren Sie dort die Aktion, die angestoßen wird.

Bestimmen Sie das Verhalten der Schaltfläche auf die Benutzereingabe: Wenn Sie die Eigenschaft Eingabekonfiguration, Umschalten mit einer Variablen belegen, haben Sie eine Schaltfläche konfiguriert, die sich wie ein Schalter verhält. Wenn Sie die Eigenschaft Eingabekonfiguration, Tasten mit einer Variablen belegen, haben Sie eine Schaltfläche konfiguriert, die sich wie ein Taster verhält.

Die Eigenschaft Schaltflächenzustandsvariable steuert, ob die Darstellung der Schaltfläche gedrückt oder hervorstehend ist. Wenn Sie eine Schaltfläche in Ihre Visualisierung einfügen, wird die Eigenschaft mit dem Platzhalter <Umschalten-/Tastenvariable> vorbelegt. Das bewirkt, dass bei einer Benutzereingabe automatisch die Darstellung der Schaltfläche reagiert. Wenn Sie statt dem Platzhalter eine Variable angeben, können Sie die Darstellung der Schaltfläche selbst programmieren. Sie bestimmen also, wann die Schaltfläche wie darzustellen ist, indem Sie im Code die in der Eigenschaften angegebene Variable entsprechend setzen.

Beispiel 12. Beispiel

Eine Visualisierung besteht aus der Schaltfläche „Push Button“, die als Taster fungiert und einem Textfeld, das die Anzahl der Tastereignisse anzeigt.

Wenn zur Laufzeit „Push Button“ einen Mausklick erkennt, schlägt die Farbe um und wird gedrückt dargestellt. Außerdem wird eine Zählvariable hochgezählt. Nach dem Mausklick ist der Taster wieder blau und hervorstehend. Zusätzlich wird im Textfeld der aktuelle Variablenwert ständig ausgegeben. Wenn auf das Textfeld geklickt wird, wird die Zählvariable auf Null gesetzt.

Prozedur. Taster mit Textausgabe konfigurieren
  1. Ziehen Sie ein Element Schaltfläche in den Editor.

    Die Eigenschaft Schaltflächenzustandsvariable ist mit dem Platzhalter <Umschalten-/Tastenvariable> vorbelegt. Somit ist die Darstellung der Schaltfläche mit der Benutzereingabe verbunden.

  2. Belegen Sie die Eigenschaft Texte, Text mit Push Button.

  3. Deklarieren Sie eine Programmvariable für die Benutzereingabe und eine Zählvariable für die Folgeaktion.

                                            PROGRAM PLC_PRG
                                            VAR
                                            xTap: BOOL := FALSE;
                                            iCntTaps : INT := 0;
                                            END_VAR
                                        
  4. Belegen Sie die Eigenschaft Eingabekonfiguration, Tasten, Variable mit der Eingabevariablen.

    PLC_PRG.xTap

    Die Schaltfläche hat eine Benutzereingabe und ist als Taster konfiguriert.

  5. Klicken Sie in Eingabekonfiguration, OnMouseClick auf Konfigurieren.

    Der Dialog Eingabekonfiguration öffnet sich.

  6. Wählen Sie aus der Liste der Folgeaktionen ST-Code ausführen aus und klicken Sie auf _visu_img_add_selected_alarm_group.png.

  7. Geben Sie im Editor folgenden Code ein:

    PLC_PRG.iCntTaps :=  PLC_PRG.iCntTaps + 1;

    Die Schaltfläche hat eine Folgeaktion. Der Zähler ist implementiert.

  8. Belegen Sie die Eigenschaft Farbvariablen, Farbumschlag mit dem Platzhalter <Umschalten-/Tastenvariable>.

    Die Eigenschaft ist über den Platzhalter mit der Eingabevariablen verbunden. Sobald eine Benutzereingabe erkannt wird und somit PLC_PRG.xTap TRUE wird, schlägt die Schaltfläche ihre Farbe um.

    Die Schaltfläche ist konfiguriert:

    _visu_config_push_button.png
  9. Ziehen Sie ein Element Textfeld in den Editor.

  10. Belegen Sie die Eigenschaft Texte, Text mit Number of taps: %i.

    Der Ausgabetext enthält einen Platzhalter für eine Integervariable.

  11. Belegen Sie die Eigenschaft Textvariablen, Textvariable mit PLC_PRG.iCntTaps.

    Zur Laufzeit wird der Platzhalter ersetzt und der Variablenwert statt dessen dargestellt.

    _visu_push_button.png
  12. Klicken Sie in Eingabekonfiguration, OnMouseClick auf Konfigurieren.

    Der Dialog Eingabekonfiguration öffnet sich.

  13. Wählen Sie aus der Liste der Folgeaktionen ST-Code ausführen aus und klicken Sie auf _visu_img_add_selected_alarm_group.png.

  14. Geben Sie folgenden Code ein:

    PLC_PRG.iCntTaps := 0;

    Als Folgeaktion ist der Reset des Zählers implementiert.

    Das Textfeld ist konfiguriert.

    _visu_config_text_field.png