Controls

Umschalten

Ein Umschalter ist eine Schaltfläche mit zwei Zuständen. Wenn der Benutzer auf die Schaltfläche klickt, ändert sich der Status. Beispiele für das Umschalten finden Sie in den folgenden Abbildungen.

CS3

Bindungstyp: BOOLEAN
Klickt ein Benutzer auf den Taster, wird über den Verbindungskanal zur SPS ein neuer Zustand gesetzt.

SVG-Element

'id = "labelOff"'

  • Ein Element (vorzugsweise eine Gruppe), das sichtbar sein soll, wenn der Wert der gebundenen Variablen falsch ist, muss die ID "LabelOff" haben.

'id = "labelOn"'

  • Umgekehrt muss das Element, das sichtbar sein soll, wenn der Wert true ist, die ID "labelOn" haben.

Beispiele für CSS-Styling

Es wird gezeigt, wie man '.css' verwendet, um die Farbpaletten (z.B. Hell / Dunkel Modi) zu implementieren und ein SVG-Element mit 'id="labelOn" und id="labelOff" zu steuern.

Wenn Sie dem PlcVisu-CSS-Editor die folgende Zeile hinzufügen:

.theme-light #labelOn{
        fill: red;
}
.theme-light #labelOff{
        fill: black;
}
.theme-dark #labelOn{
        fill: blue;
}
.theme-dark #labelOff{
        fill: white;
}

Sie können diese SVG-Datei steuern, z.B. über die 'id "#labelOn"' Einstellung der Farbe.
Und Sie können dies in Bezug auf den Lichtmodus -->Text ist rot

oder dunkler Modus -->Text ist blau

Fazit

Die SVG-Zeichnung des Umschalters kann beliebige Grafiken enthalten. Das Prinzip besteht darin, dass die Elemente, die unter der Gruppe "labelOff" verschachtelt sind, angezeigt werden, wenn der Wert der gebundenen Variablen falsch ist, und Elemente unter der Gruppe "labelOn", wenn der Wert wahr ist.

.theme-light #labelOn{ fill: red; } .theme-light #labelOff{ fill: black; } .theme-dark #labelOn{ fill: blue; } .theme-dark #labelOff{ fill: white; }