TcHMI - Button als Schalter

[msauerpb]

Zuviel Werbung?
-> Hier kostenlos registrieren

Hallo zusammen,

in der alten Visu von Beckhoff (in TC3 integriert) gabe es ja Schalter Elemente, die Ihren Zustand gespeichert haben. In der TcHMI habe ich nur einen einfachen Button gefunden. Gibt es hier auch die Möglichkeit eine Art Schalter draus zu machen? Einmal Click schalte ich ein (setzte eine Variable auf True in der PLC) beim zweiten Click schalte ich wieder aus (Variable auf False)
Bzw. was sind denn die State Events?

Danke für Eure Hilfe.

gruss
martin

 

[Tobi-212]

Hallo Martin,

schau dir mal den Toggle-Button an.

 

[msauerpb]

Zuviel Werbung?
-> Hier kostenlos registrieren

Hallo Tobi-212,
danke Dir. Das hat geholfen.
Noch ne andere kurze Frage: Wie kann ich denn die Farbe des Gedrückt Zustandes ändern? Ich hab das jetzt über das Event onStatePressed bzw. onStateReleased gemacht.

 

[Tobi-212]

dafür gibts mehrere Möglichkeiten:
1. Definition über Theme (alle Toggle-Button werden geändert) oder
2. Deine Möglichkeit, musst halt für jeden Button einzeln ändern.

 

[Hack]

Im Theme Editor kann man auch noch CSS Klassen anlegen. Die kann man dann den gewünschten Elementen zuordnen.

 

[zuse]

Zuviel Werbung?
-> Hier kostenlos registrieren

Die Vorschläge mit dem Themeeditor und über CSS Klassen können nicht die gedrückt-Farbe ändern.
Da ist onStatePressed schon das richtige. Alternativ kann man das über eine eigene CSS Datei auch machen, aber das erfordert etwas mehr Vorwissen.

Der Standard CSS Code ist unten zu sehen, das kann man in einer projekt CSS Datei (auch teilweise, also ohne color / box-shadow) überschreiben:

/* Style for the main element */
.tchmi-button {
    /* color gradient for default view */
    background-image: linear-gradient(135deg, #eff1f3, #aeb9c2);
    /* default color for button text */
    color: #4794da;
    /* default box shadow */
    box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.6);
}


/* class down will be set/unset in the control on mouse/touch down */
.tchmi-button.down {
    /* another color gradient */
    background-image: linear-gradient(135deg, #aeb9c2, #eff1f3);
    color: #4c6374;
    box-shadow: inset 0px 0px 10px 0px rgba(0,0,0,0.3);
}