FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Reinerlein am 31 März 2017, 15:12:54

Titel: Animation auf joinedlabel-Widget...
Beitrag von: Reinerlein am 31 März 2017, 15:12:54
Hallo,

ich versuche mich gerade an einer Laufschrift-Animation für ein joinedlabel-Widget. Drei Punkte sind mir da einfach zuwenig :)
Ich habe es soweit, dass bei einem übergroßen Text dieser nun hin- und hergeschoben wird, sodass man den kompletten Inhalt lesen kann.

Jetzt habe ich das Problem, dass auch animiert wird, wenn das Textfeld groß genug für den Inhalt wäre. Das ist natürlich unschön. In diesem Fall möchte ich gerne weiterhin eine zentrierte Darstellung haben.
Also habe ich mir gedacht, ich verwende ein bißchen Javascript, und versuche damit zur Laufzeit herauszufinden, ob ich nun die Laufschrift-CSS-Klasse anwenden muss, oder eben nicht.

Leider habe ich keinen allgemeinen Einsprungspunkt gefunden, wo ich Javascript ausführen lassen kann, wenn sich der Label-Inhalt ändert.
Gibt es so eine "Callback"-Möglichkeit? Ein onchange-Tag gibt es zumindest mal nicht :)
Kann ich die Widget-interne Update-Funktion irgendwie einfach dahingehend erweitern, dass ich ein solches onchange angeben könnte?
Ich bin in dieser Widget-Denke noch nicht so drin, dass ich das selber einfach reinbekomme...

Danke schon mal für sachdienliche Hinweise :)

Grüße
Reinerlein
Titel: Antw:Animation auf joinedlabel-Widget...
Beitrag von: Reinerlein am 04 April 2017, 23:50:02
Hallo setstate,

ich habe das nun hinbekommen. Dazu habe ich eine Javascript-Callbackmöglichkeit in das Widget joinedlabel eingebaut.

In der Update Funktion am Ende (nach me.update_color):

eval(elem.data('onupdate'));

Und in der init_attr Funktion noch ein

elem.initData('onupdate', '');


Damit sollte man Seiteneffektfrei diesen Parameter verwenden können. Damit kann man eine eigene Javascript-Funktion angeben, die immer nach einem Label-Update aufgerufen wird.
Dort prüfe ich nun die Größe des Labels, und zentriere entweder die Ausgabe, oder lasse sie durchanimieren (durch Zuweisen jeweils einer entsprechenden CSS-Klasse).
Das funktioniert bei mir sehr gut...

Kannst du die Änderungen nach eigener Prüfung so übernehmen?

Danke schon mal...

Grüße
Reinerlein