Eigene Entwicklung - Longpoll-Aktualisierung von SVG Icons

Begonnen von KernSani, 11 April 2015, 22:17:09

Vorheriges Thema - Nächstes Thema

KernSani

Hallo zusammen,

ich weiss nicht, ob ich hier an der richtigen Stelle bin, hoffe es aber. Ich versuche derzeit eine eigene Sub in 99_myUtils zu basteln, die in mit Hilfe des Web-Link Moduls in FHEMWEB eingebunden wird. Das Ganze funktioniert soweit, allerdings habe ic ein Problem, wo ich nicht weiterkomme:


  • In meiner Sub ermittle ich aufgrund verschiedener Readings einen Status und möchte diesen mit Hilfe eines SVG Icons in unterschiedlichen Farben anzeigen
  • Mit FW_makeImage gelingt es mir in der Sub, das Icon mit der Farbe für den aktuellen Zustand zu erzeugen.
  • Mit FW_Widgets/updateLine kann ich meine eigene JS Funktion aufrufen und Statusänderungen abfangen
  • Was mir jetzt fehlt: Gibt es eine Möglichkkeit innerhalb der JS-Funktion die Farbe eines SVG-Icons ändern?
  • Gibt es eine Möglichkeit über FW_cmd?XHR=1 eine myUtils-sub aufzurufen und das Ergebnis im JS zu verarbeiten

Wenn mir jemand ein paar Hinweise geben könnte, an welcher Stelle ich dazu Infos oder Beispiele finden könnte, wäre ich sehr dankbar.

Vielen Dank,

Grüße,

Oli
RasPi: RFXTRX, HM, zigbee2mqtt, mySensors, JeeLink, miLight, squeezbox, Alexa, Siri, ...

justme1968

FW_Widgets/updateLine ist die alte methode und inzwischen deprecated. zur neuen methode findest du hier: http://forum.fhem.de/index.php/topic,31293.0.html und hier: http://forum.fhem.de/index.php/topic,31891.0.html etwas.

es gibt fhem intern einen fertigen mechanismus der longpoll genannt wird um daten vom server an den browser zu senden. er wird z.b. verwendet um die reading in der device detail ansicht live zu aktualisieren, die slider und sonstigen widgets zu aktualisieren, die devStateIcon icons zu aktualisieren und noch ein paar dinge mehr. in readingsHistory wird es verwendet um die einzelnen history zeilen an den browser zu senden (noch nicht auf das neue verfahren umgestellt). in readingsGroup findest du im set visibility kommando ebenfalls ein beispiel wie etwas über das longpoll socket an eine UpdateLine js funktion gesendet wird. ich hab es noch nicht auf das neue verfahren umgestellt.

mit FW_directNotify kann man daten von der server seite aus an den browser senden der dann in über den ganz oben angesprochenen mechanismus  auf der js seite weiter verarbeiten. ein beispiel für die verwendung von FW_directNotify findest du hier: http://forum.fhem.de/index.php/topic,32305.msg248290.html#msg248290 bzw in dem direkt darunter beschriebenen neuen JS: event mechanismus das in fhemweb eingebaut ist. damit kannst du direkt von der fhem/perl seite eine js routine im browser aufrufen. das wird z.b. auch für das rote save fragezeichen verwendet.

das svg icon ist im prinzip auch nur text in dem du mit suchen und ersetzen farben ändern kannst.

in FW_cmd und FW_queryValue findest du beispiele wie man von der js seite kommandos an die fhem seite senden und die antwort auswerten kann. diese kommandos können über {}  im prinzip auch perl code und damit ein aufruf einer eigenen funktion sein. du musst hier aber einiges escapen weil es direkt nicht in der url erlaubt ist.

gruss
  andre

ps: was möchtest du denn genau umsetzen? eventuell ist webLink nicht der richtige ansatz? vielleicht kann readingGroup schon einiges (oder alles?) davon? unterschiedliche icons abhängig von readings oder anderen bedingungen anzuzeigen und live im browser zu ändern ist damit z.b. möglich.
hue, tradfri, alexa-fhem, homebridge-fhem, LightScene, readingsGroup, ...

https://github.com/sponsors/justme-1968

KernSani

Hi Andre,

vielen Dank für die ausführliche Antwort. Scheint doch komplizierter zu sein als ich gehofft hatte (aber irgendwann lese ich mich da noch im Detail ein), daher bin ich das Thema (ich will mir einen Mediaplayer mit Zusatzfunktionen bauen) dann doch mit readingsgroups angegangen (was ich zunächst verworfen hatte, da ich dachte das wäre nicht flexibel genug). Mit vielen Perl-Subs bin ich jetzt funktional schon relativ nahe an dem, was ich mir vorstelle (und den Rest bekomme ich auch noch hin), was mir allerdings noch Kopfschmerzen bereitet ist das Layout. Gibt es eine Möglichkeit, aus dem starren Tabellenformat "auszubrechen"? Schon ein einfaches "colspan=2" o.ä. würde mich schon an vielen Stellen glücklich machen. Als einfaches Beispiel, in Zeile 1 habe ich den Playernamen, in Zeile zwei sollen Buttons für previous, play/pause und next. Ich hätte gerne, dass der Playername (mindestens) die Vreite der drei Buttons nutzt (also colspan=3). Leider wird der cellstyle aber scheinbar auf ein div innderhalb der Zelle angewendet und nicht auf die Zelle selbst... Gibt es da einen Trick?

Danke,

Grüße,

Oli
 
RasPi: RFXTRX, HM, zigbee2mqtt, mySensors, JeeLink, miLight, squeezbox, Alexa, Siri, ...

justme1968

klar geht das.

dafür gibt es die valueColumns und valueColumn attribute.

gruss
  andre
hue, tradfri, alexa-fhem, homebridge-fhem, LightScene, readingsGroup, ...

https://github.com/sponsors/justme-1968