TC3/TE2000: Nutze ich Buttons für Taster so richtig, wie realisiert man Schalter?

[oliver.tonn]

Zuviel Werbung?
-> Hier kostenlos registrieren

Hallo,
ich fange gerade an mich etwas in den HMI-Server (TE/TF2000, Ver. 1.12.760.59) in TC3 (Ver. 4024.47) einzuarbeiten.
Leider hat mich RTFM nicht weitergebracht.
Ich habe eine Visu erstellt mit mehreren Buttons. Bei den Buttons die sich wie Taster verhalten habe ich die Variable die gesetzt werden soll auf die Eigenschaft StateSymbol gebunden, oder wie das heißt. Das funktioniert soweit auch, aber nur weil es funktioniert muss es lange noch nicht gut sein. Daher die Frage an die Experten hier, ist das so in Ordnung oder Murks?
Dann sollen andere Buttons sich wie ein Schalter verhalten und hier scheitere ich. Ich habe beim Ereignis .onStatePressed eine Bedingung hinzugefügt, die eine Variable setzt, wenn sie noch nicht gesetzt ist und entsprechend umgekehrt, also ein Toggeln, das funktioniert soweit auch. Im Moment kann man am Button aber leider nicht sehen, ob die Variable jetzt TRUE oder FALSE ist. Mit einem Farbwechsel würde ich es vermutlich hinbekommen, aber ich würde gerne das er bei TRUE gedrückt aussieht und bei FALSE nicht. Hier scheitere ich jetzt leider.
Wer kann hier helfen?

 

[automation-consult]

schon lustig, die TF2000 hat mich bisher glücklich gemacht, was man da alles mit UserControls machen kann, aber mein Idee: (in der alten TargetVisu mal gemacht) Screenshot gemacht von beiden Zustanden und dann die png's umgeladen

 

[oliver.tonn]

Zuviel Werbung?
-> Hier kostenlos registrieren

schon lustig, die TF2000 hat mich bisher glücklich gemacht, was man da alles mit UserControls machen kann, aber mein Idee: (in der alten TargetVisu mal gemacht) Screenshot gemacht von beiden Zustanden und dann die png's umgeladen

OK, ist auch eine Möglichkeit, aber ich hoffe noch auf eine andere Lösung, wegen der Beschriftung.

 

[roboticBeet]

Hab gerade keinen Rechner zur Verfügung, aber kannst du das nicht mit einer Umschaltung der CSS-Klasse erreichen?

 

[oliver.tonn]

Hab gerade keinen Rechner zur Verfügung, aber kannst du das nicht mit einer Umschaltung der CSS-Klasse erreichen?

Ich weiß grob was CSS ist, aber leider nicht was Du mit CSS-Klasse umschalten meinst.

 

[roboticBeet]

Zuviel Werbung?
-> Hier kostenlos registrieren

Mit CSS kannst du ja das Aussehen von HTML Elementen beeinflussen. Und somit auch, ob ein Button „gedrückt“ aussehen soll oder nicht. Die CSS Einstellungen kannst du komfortabel im Theme Editor vornehmen, entweder in einer geführten Oberfläche für Control Classes oder frei in CSS-Dateien. Die Control Classes kann man später am jeweiligen Element in den Eigenschaften unter Common recht einfach auswählen und entsprechend auch einfach im Action&Condition Editor ändern lassen.

Falls du das direkt in einer CSS Datei mit einer individuellen CSS Klasse machen musst, kann man das glaube ich nicht mehr so einfach über die grafische Umgebung umstellen (falls doch bin ich um Belehrung sehr dankbar). Im Zweifelsfall geht das aber per JavaScript:

document.getElementById("MyControl").className = "MyClasses";

Als MyControl dann einfach den Id-Tag des Controls aus dem HTML angeben und unter MyClasses die Liste aller CSS-Klassen (Beckhoff spezifische + deine eigene). Über classList.add und classList.remove kannst du auch nur deine eigene CSS-Klasse zur bestehenden CSS-Klassenliste hinzufügen oder entfernen. Dann muss man sich um die Standard Beckhoff Klassen nicht kümmern. Das habe ich aber noch nicht gemacht. Details unter W3Schools.

Laut Infosys scheinen das die Standard Beckhoff CSS-Klassen für einen Button und einen gedrückten Button zu sein. Kannst du ggf. direkt übernehmen:

.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: #000000;
   box-shadow: inset 0px 0px 5px 0px rgba(0,0,0,0.6);
}

Ich bin wie gesagt aktuell unterwegs und erst Mitte des Monats wieder am Rechner mit TwinCAT. Sonst würde ich dir auch direkt Screenshots aus TC zeigen.

 

[roboticBeet]

Mhh, der Infosys Link funktioniert irgendwie nicht richtig. Ich habe das CSS-Snippet unter TwinCAT 3 > TExxxx > TE2000 > Themes > CSS-Theme gefunden.

 

[PatrickSt]

Der Tipp von roboticBeet führt dich zur Lösung. Wenn du aber die Finger von irgendwelchen CSS-Klassen lassen willst, dann kannst du die Umschaltung auch direkt über die Aktion "onPressed" machen. Hier musst du den Farbverlauf von Grau zu Weiß auf 135° einstellen:


und dann noch einen nach innen gerichteten Schatten hinzufügen (anm.: die "5px" aus der CSS sahen bei mir komisch aus, daher 20px, damit kommt man zumindest nah ran)



Die Frage ist aber, ob du das wirklich willst.
Du hast dann zwei Buttons, die nur bei näherem Hinsehen unterschieden werden können.


Oder du erstellst dir von Beginn an ein eigenes UserControl, das einen vernünftigen Farbumschlag hat, die ganzen Schattierungen, Ränder und Farbverläufe weglässt.
Ich hab z.B. ein Textfeld in ein Usercontrol gepackt, und schalte einfach den Hintergrund von Grau auf Blau um. Das erkennt man dann auch ohne Lupe und bei schwierigem Licht.
In meiner kompletten HMI hab ich keinen einzigen "Beckhoff-Button" verwendet.


Menu-Buttons bekommen dann noch Target Contents und einen Toggle-Index mit überreicht und können damit beim aktivieren die Seite umschalten und andere Buttons deaktivieren.

 

[PatrickSt]

Zuviel Werbung?
-> Hier kostenlos registrieren

@oliver.tonn :
Ich bin gerade mal wieder am HMI programmieren und hab gerade durch Zufall gesehen, dass eis auch einen speziellen "ToggleButton" gibt? Das wäre doch das wass du suchst, oder?


Da standen wohl alle, die dir helfen wollten etwas auf dem Schlauch

 

[oliver.tonn]

@oliver.tonn :
Ich bin gerade mal wieder am HMI programmieren und hab gerade durch Zufall gesehen, dass eis auch einen speziellen "ToggleButton" gibt? Das wäre doch das wass du suchst, oder?
Anhang anzeigen 77743

Da standen wohl alle, die dir helfen wollten etwas auf dem Schlauch

Ja, super, das wäre genau was ich suche, den habe ich völlig übersehen.
Leider hinterlässt die Anleitung vom TE2000 nur Fragezeichen. Bei der TE1800 habe ich einfach eine Variable angegeben die dann beim ersten Klick auf TRUE gesetzt wurde und beim zweiten wieder auf FALSE, aber hier kann ich zwar "Write To Symbol" auswählen, z.B. bei "onMouseClick" aber da muss ich ja TRUE oder FALSE angeben und kann nicht nur die Variable angeben. Wo muss ich da dann die Variable angeben.
Gut ist, dass man damit auch Radio Buttons realisiseren kann.

 

[oliver.tonn]

Eventuell kann ich die Antwort selber geben.
Unter "StateSymbol" die Variable angeben, dann läuft es so wie ich es mir vorstelle.
Die Frage ist nur, ist das so auch korrekt, nur weil es so läuft wie ich mir das denke muss es ja nicht die richtige Vorgehensweise sein.

 

[PatrickSt]

Zuviel Werbung?
-> Hier kostenlos registrieren

Doch, genau das sollte die richtige Vorgehensweise sein.

Ein tipp: wenn man mit der Maus über die Einträge unter "Eigenschaften" geht, dann sieht man die Beschreibung in einem Popup. Das hilft meist mehr wie 1000 Seiten Anleitung zusammen:


noch ein Tipp: anstelle von ".onMouseKlick" empfehle ich dir ".onPressed" zu nutzen, wenn du keinen speziellen Anforderungen hast. Dann funktioniert es nämlich mit Maus und Touch gleich.