Ich möchte gerne den Hintergrund verschiedener Elemente in meinem FTUI3-Frontend variable einfärben. Grundsätzlich ginge das ja innerhalb eines ftui-row mit color und einem entsprechenden Reading. Soweit so gut.
Jetzt wird es aber etwas komplizierter, deshalb das Pipe.
Bei meinen Lampen möchte ich den Hintergrund abhängig von ihrem Zustand (also Ein-Ausgeschaltet) darstellen. Also im ausgeschalteten Zustand den normalen Hintergrund, aber im eingeschalteten Zustand einen anderen.
Da das aber an verschiedneen Stellen im Code vorkommt und auch nicht per Template lösbar ist würde ich es gerne mit einem Pipe probieren.
Mein Versuch:
[color]="HUEGroup22:onoff | map('0:``, 1:[device:reading]')"funktioniert aber natürlich nicht.
Habe es auch schon mit einer CSS-Variablen probiert:
[color]="HUEGroup22:onoff | map('0:``, 1:var(--background)')"Aber das klappt ebenfalls nicht.
Gibt es da keine Möglichkeit wie man dies lösen könnte?
Ich wüsste nicht, wie du mit dem (derzeitigen) Standard einfach einen Farbwert aus einem anderen Reading zuweisen kannst. Du könntest zwei buttons (?) bauen und die jeweils verstecken (via [hidden]): bei off einen mit standardhintergrund, bei on weisst du dem wert color den Farbwert (= in ftui3 vorhandene class) zu.
Alternativ könntest du auf das inline CSS einwirken, das hängt aber davon ab, welche farbeigenschaft (color, background-color, etc) du eigtl ändern willst und in welchem Wert die Farbdefinition vorliegt (hex, rgb, etc).
Ich würde eher versuchen das Thema auf dem FHEM-Seite zu klären, z.B. mit einem DOIF das direkt in Abhängigkeiten einen Wert liefert, mit welchem die FArbe direkt abgeholt werden kann. Es ist ggfs. auch eine Idee darüber nachzudenken Themes zu verwenden, wenn das ganze Farbschema betroffen sein sollte.
Gruß,
Matthias
Das ist genau das Problem, es ist eben nicht das ganze Schema betroffen aber genug Stellen um es aufwändig zu machen diese alle von Hand anzupassen.
Da ich keine richtige Anleitung zu den Pipes gefundne habe mal die Frage was kann denn bei einem map alles eingetragen werden, also als ausführend meine ich:
1:#dfgd56
1:red
1:<device>:<reding>
1:var(--xyz)
Sind beispiele die mir so einfallen, aber ich kann eben nicht sagen was davon auch wirklich akzeptiert wird und was nicht. Grundsätzlich müsste das was geht ja dann auf alle Pipe-Typen übertragbar sein.
Zitat von: MDietrich am 03 Januar 2025, 09:34:43Ich würde eher versuchen das Thema auf dem FHEM-Seite zu klären, z.B. mit einem DOIF das direkt in Abhängigkeiten einen Wert liefert, mit welchem die FArbe direkt abgeholt werden kann.
+1; alles was auf FHEM-Seite geschieht, muss nicht "aufwändig" auf Client-seite berechnet werden; wenn es sich einfach darstellen lässt, zB durch userReadings, dann würde ich FHEM FTUI3 rein aus Performance-Gesichtspunkten vorziehen.
Zitat von: Marko1976 am 03 Januar 2025, 10:05:36Da ich keine richtige Anleitung zu den Pipes gefundne
Es gibt keine Einsteigerfreundliche Anleitung, aber es gibt, neben dem riesen Hauptthread, weitere Stellen der Doku:
https://wiki.fhem.de/wiki/FTUI3_Pipelines#15._map(mappingString) (https://wiki.fhem.de/wiki/FTUI3_Pipelines#15._map(mappingString))
https://github.com/knowthelist/ftui#pipes (https://github.com/knowthelist/ftui#pipes) (und der code selbst)
Zitat von: Marko1976 am 03 Januar 2025, 10:05:36habe mal die Frage was kann denn bei einem map alles eingetragen werden, also als ausführend meine ich:
1:#dfgd56
1:red
1:<device>:<reding>
1:var(--xyz)
map ersetzt (mapped)
stumpf Eingabewerte einem neuen Ausgabewert zu (wertepaare wie in etwa on:An, 2:blue, `closed`:`das Fenster ist geschlossen`). Diese sollten zum FTUI3-HTML-Paramater (!) passen.
Zitat von: Marko1976 am 03 Januar 2025, 10:05:361:#dfgd56
Geht, wenn du den Readingswert 1 durch #dfgd56 ersetzt haben möchtest; geht mWn nicht mit dem Parameter color.
Zitat von: Marko1976 am 03 Januar 2025, 10:05:361:red
Geht, wenn du den Readingswert 1 durch red ersetzt haben möchtest; geht mWn mit dem Parameter color oder class wenn die css class
red definiert ist.
Zitat von: Marko1976 am 03 Januar 2025, 10:05:361:<device>:<reding>
Funktioniert nicht, es wird kein weiterer Event zum Abruf von einem anderen (Device) reading erzeugt.
Zitat von: Marko1976 am 03 Januar 2025, 10:05:361:var(--xyz)
Geht, wenn du den Readingswert 1 durch var(--xyz) ersetzt haben möchtest; ergibt aber ohne der Definition eines CSS Attributes, welchem du diesen Wert zuweisen möchtest, keinen Sinn.
Zitat von: Marko1976 am 03 Januar 2025, 10:05:36Grundsätzlich müsste das was geht ja dann auf alle Pipe-Typen übertragbar sein.
Nein, nicht wirklich mMn.
Welche Farbwerte würdest du denn übergeben wollen? Hast du über die zwei Lösungsoptionen nachgedacht?
Zitat von: yersinia am 02 Januar 2025, 08:00:15Ich wüsste nicht, wie du mit dem (derzeitigen) Standard einfach einen Farbwert aus einem anderen Reading zuweisen kannst. Du könntest zwei buttons (?) bauen und die jeweils verstecken (via [hidden]): bei off einen mit standardhintergrund, bei on weisst du dem wert color den Farbwert (= in ftui3 vorhandene class) zu.
Alternativ könntest du auf das inline CSS einwirken, das hängt aber davon ab, welche farbeigenschaft (color, background-color, etc) du eigtl ändern willst und in welchem Wert die Farbdefinition vorliegt (hex, rgb, etc).
Hier mal ein Beispiel, vielleicht hilft es weiter:
<ftui-grid-tile row="1" col="3" height="2" width="2" align-items="top" >
<ftui-button [(value)]="d_dummy1" states="success, warning, danger">Try me!</ftui-button>
</ftui-grid-tile>
<ftui-grid-tile row="1" col="5" height="2" width="2">
<ftui-label size="3" [text]="d_dummy1" [color]="d_dummy1"></ftui-label>
</ftui-grid-tile>
<ftui-grid-tile row="3" col="5" height="2" width="2" [color]="d_dummy1">
<ftui-label size="3" [text]="d_dummy1" [color]="d_dummy1 | map('success:red, warning:gray, danger:success')"></ftui-label>
</ftui-grid-tile>Gruß,
Matthias
ZitatIch würde eher versuchen das Thema auf dem FHEM-Seite zu klären, z.B. mit einem DOIF das direkt in Abhängigkeiten einen Wert liefert, mit welchem die FArbe direkt abgeholt werden kann.
ZitatZitat1:<device>:<reding>
Funktioniert nicht, es wird kein weiterer Event zum Abruf von einem anderen (Device) reading erzeugt.
Scheint sich ja sogesehen dann gegenseitig auszuschließen, da ich um ein Pip im Color-Tag nicht herum komme. Ich will ja optisch anzeigen ob eine Lampe ein- oder ausgeschaltet ist.
ZitatZitat1:#dfgd56
Geht, wenn du den Readingswert 1 durch #dfgd56 ersetzt haben möchtest; geht mWn nicht mit dem Parameter color
Ist das nicht ein Wiederspruch in sich? Wo sollte man sonst noch Farbcodes benötigen wenn nicht gerade bei Color-Attributen.
ZitatZitat1:red
Geht, wenn du den Readingswert 1 durch red ersetzt haben möchtest; geht mWn mit dem Parameter color oder class wenn die css class red definiert ist.
Klar, red muss natürlich vorher irgendwo definiert sein. Wobei red eigentlich zur Standarddefinition gehört und immer gelten sollte. Aber müsste dann nicht auch die Angabe eines Hefwertes direkt funktionieren? red ist ja nichts anderes als eine Definition für #ff0000.
ZitatZitat1:var(--xyz)
Geht, wenn du den Readingswert 1 durch var(--xyz) ersetzt haben möchtest; ergibt aber ohne der Definition eines CSS Attributes, welchem du diesen Wert zuweisen möchtest, keinen Sinn.
Auch klar mit der Definition, wobei ich es bisher noch nicht hinbekommen habe in einer FTUI-Unterseite so eine Definition einzubauen. Muss ich noch mal recherchieren wie das genau funktioniert.
ZitatWelche Farbwerte würdest du denn übergeben wollen? Hast du über die zwei Lösungsoptionen nachgedacht?
Ja habe ich, aber ehrlcih gesagt sehe ich da noch nicht durch. Da ich ja innerhalb der Pipe wohl kein <device>:<reading> angeben kann wüsste ich nicht wie ich da auf unterschiedliche Readings verweisen könnte.
Was die zweite Möglichkeit angeht weiß ich ehrlich gesagt nicht was genau du mit Inline-CSS meinst. Die CSS-Datei zur jeweiligen Components.js? Falls ja wäre es ja wieder nicht flexible sondern eine starre Lösung so als wenn ich einfach ein anderes Thema lade.
Ich möchte halt mein FTUI so flexible wie möglich aufbauen, so dass ich schnell und einfach - am besten aus Fhem heraus - optische Änderungen vornehmen kann. Beispielweise habe ich für alle Schaltzeiten unserer Heizung ein Reading angelegt in dem die Zeit eingetragen ist und über das FTUI angepasst werden kann. Genauso die Temperaturen. So würde ich es auch gerne mit den Text- und Hintergrundfarben halten.
Nur das bei den Lampen eben je nach Zustand ein abweichender Hintergrund angezeigt wird den ich im Moment mit ftui-row und dem color-Attribut erstelle. Es ginge natürlich auch über das style-Attribut und richtigen CSS-Code, aber flexibler würde es dadurch ja auch nicht.
Wenn ich es nicht komplett falsch verstehe, dann sollte es ja im Prinzig so funktionieren:
[color]="dein_device:dein_reading | map('status1:farbe, status2:farbe2, status3:farbe3')"
wie im oben stehenden Beispiel:
[color]="d_dummy1 | map('success:red, warning:gray, danger:success')"
Gruß,
Matthias
Zitat von: Marko1976 am 03 Januar 2025, 22:50:19ZitatIch würde eher versuchen das Thema auf dem FHEM-Seite zu klären, z.B. mit einem DOIF das direkt in Abhängigkeiten einen Wert liefert, mit welchem die FArbe direkt abgeholt werden kann.
ZitatZitat1:<device>:<reding>
Funktioniert nicht, es wird kein weiterer Event zum Abruf von einem anderen (Device) reading erzeugt.
Scheint sich ja sogesehen dann gegenseitig auszuschließen, da ich um ein Pip im Color-Tag nicht herum komme. Ich will ja optisch anzeigen ob eine Lampe ein- oder ausgeschaltet ist.
Ja, dafür ist color geeignet. Aber du kannst den Farbwert nicht aus einem beliebigen
anderen/weiteren reading ableiten. Du kannst ein readings-wert nutzen, der dem
validen (!) Farbwert entspricht, nutzen. Ansonsten geht mWn nur das, was dir FTUI3 (https://github.com/knowthelist/ftui?tab=readme-ov-file#colors) bietet.
Zitat von: Marko1976 am 03 Januar 2025, 22:50:19ZitatZitat1:#dfgd56
Geht, wenn du den Readingswert 1 durch #dfgd56 ersetzt haben möchtest; geht mWn nicht mit dem Parameter color
Ist das nicht ein Wiederspruch in sich? Wo sollte man sonst noch Farbcodes benötigen wenn nicht gerade bei Color-Attributen.
Nicht wenn du verstehst, dass das FTUI3 color Attribut (http://[quote%20author=marko1976%20link=msg=1329385%20date=1735941019) kein HTML color Attribut (https://www.geeksforgeeks.org/html-font-color-attribute/) ist. Es ist eher eine CSS Klasse, welche du auswählst. Neben denen, die FTUI3 dir bereitstellt (https://github.com/knowthelist/ftui/blob/master/www/ftui/themes), kannst du sehr frei eigene definieren. Aber die typischen HTML-Color-Codes, Hex-Farbewerte, rgb, hsl etc kennt FTUI3 color nicht. Willst du andere Farbwerte nutzen, sind eigene CSS Klassen, welche du über color dann referenzierst, ein möglicher Weg.
Zitat von: Marko1976 am 03 Januar 2025, 22:50:19Auch klar mit der Definition, wobei ich es bisher noch nicht hinbekommen habe in einer FTUI-Unterseite so eine Definition einzubauen. Muss ich noch mal recherchieren wie das genau funktioniert.
Du kannst in deiner Startseite einfach eins, mehrere CSS Files einbinden, oder dynamisch in deinen Unterseiten. Und dann kannst du dich dort austoben.
<link href="deine_eigene_CSS_datei.css" rel="stylesheet" type="text/css" />Zitat von: Marko1976 am 03 Januar 2025, 22:50:19Ja habe ich, aber ehrlcih gesagt sehe ich da noch nicht durch. Da ich ja innerhalb der Pipe wohl kein <device>:<reading> angeben kann wüsste ich nicht wie ich da auf unterschiedliche Readings verweisen könnte.
Was die zweite Möglichkeit angeht weiß ich ehrlich gesagt nicht was genau du mit Inline-CSS meinst. Die CSS-Datei zur jeweiligen Components.js? Falls ja wäre es ja wieder nicht flexible sondern eine starre Lösung so als wenn ich einfach ein anderes Thema lade.
Nur das bei den Lampen eben je nach Zustand ein abweichender Hintergrund angezeigt wird den ich im Moment mit ftui-row und dem color-Attribut erstelle. Es ginge natürlich auch über das style-Attribut und richtigen CSS-Code, aber flexibler würde es dadurch ja auch nicht.
Das wirklich coole an FTUI3 ist, dass du mit ftui-binding (https://github.com/knowthelist/ftui#local-binding) jedes beliebiges HTML Element und Attribut manipulieren kannst. Auch bei FTUI3 eigenen Elementen.
Wenn du für deine Lampen zB einen Farbwert als Hex (zB #aabbcc) vorliegen hast, kannst du dies zwar nicht an color aber an Style (aka Inline CSS (https://www.w3schools.com/css/css_howto.asp)) übergeben. Ein Denkanstoß:
<ftui-label [text]="device:farbwert"
[style]="device:farbwert | prepend('background-color: ') | append(';')">
</ftui-label>generiert folgendes inline CSS für das Element
style="background-color: #aabbcc;"ftui-binding kann aber noch mehr:
<div ftui-binding [class]="device:readingA | map('on:`eigeneClass1`, off:`eigeneClass2`')"
[style]="device:reading2 | map('0:`animation: none; display: none;`, 1:`animation: 15s meineAnimation infinite ease-in-out; animation-delay: 10s;`')">
</div>Einfach mal bauen und dann im generierten Code schauen (Entwickler-Tools beim FF zum Beispiel), was daraus entsteht.
@MDietrich
Im Prinzip schon, doch das Problem ist ja, dass an diesen Stellen eben fixe Werte eingegeben werden müssen Ich es aber eben gerne generisch, also am besten im FTUI oder Fhem änderbar haben möchte.
@yersinia
erst einmal sehr viel Input, da muss ich mich mal langsam durcharbeiten um alles zu verstehen.
ZitatDu kannst in deiner Startseite einfach eins, mehrere CSS Files einbinden, oder dynamisch in deinen Unterseiten. Und dann kannst du dich dort austoben.
Zitat<link href="deine_eigene_CSS_datei.css" rel="stylesheet" type="text/css" />
Mit dieser Art und einem einfach Mapping für ein- und ausgeschaltet arbeitet ich zur Zeit, doch ist es damit ja nicht möglich den Farbwert im Stylesheet dynamisch zu ändernt. Ich müsste immer in den Code gehen und den Farbwert direkt ändern.
Zitat<ftui-label [text]="device:farbwert"
[style]="device:farbwert | prepend('background-color: ') | append(';')">
</ftui-label>
Interessanter Ansatz, so wäre ein Farbwert für jedes Attribut (Vorder-/Hintergrundfarbe etc.) aus einem Reading auslesbar. Wenn ich den Code aber richtig verstehe geht das jeweils nur mit einem Reading oder kann man '[style]="device:farbwert | prepend('background-color: ') | append(';')"' ,it unterschiedlichen Prepend innerhalb eines ftui3-Tags nutzen?
Beispiel:
Zitat<ftui-label [text]="device:background"
[style]="device:background | prepend('background-color: ') | append(';')"
[style]="device:front | prepend('color: ') | append(';')">
</ftui-label>
Das bringt mich aber auf ein indirektes Thema:
Ich habe einige Button die ich mit dem Pipe hidden ausgehend aus einem Reading verstecke - funktioniert soweit sehr gut. Jeder Button wird nur angezeigt wenn die jeweilige Aktion zur Verfügung steht.
Ich würde allerdings gerne ALLE Button per Schalter dennoch und egal des jeweiligen Zustandes anzeigen - also quasi als übergeordnete Funktion. Das ginge ja mit ftui-binding und einem div-Tag, doch bleiben dabei die Buttons weiter ausgeblendet die durch die jeweilige Butten-Funktion ausgeblendet werden.
Theoretisch müsste in dem Hidden-Attribut des jeweiligen Buttons nicht nur das Reading für die jeweilige Funktion abgefragt werden, sondern auch das übergeordnete Reading.
Hast du dafür auch eine Idee?
Zitat von: Marko1976 am 04 Januar 2025, 18:30:37Wenn ich den Code aber richtig verstehe geht das jeweils nur mit einem Reading oder kann man '[style]="device:farbwert | prepend('background-color: ') | append(';')"' ,it unterschiedlichen Prepend innerhalb eines ftui3-Tags nutzen?
<ftui-label [text]="device:background"
[style]="device:background | prepend('background-color: ') | append(';')"
[style]="device:front | prepend('color: ') | append(';')">
</ftui-label>
Der Einfachheit reicht ein Device:reading-Pärchen; ansonsten wird es zu komplex für FTUI3 und der Client-seitigen-Berechnung. Daher: userReading in FHEM und dann einfach übernehmen.
Allerdings kann FTUI3 tatsächlich mehrere verschiedene Readings verschiedener Devices innerhalb eines Attributes abfragen - dafür benötigt man aber etwas JavaScript-Kenntnis.
- https://forum.fhem.de/index.php?topic=137042.msg1303294#msg1303294
- https://forum.fhem.de/index.php?topic=115259.msg1289243#msg1289243
- https://forum.fhem.de/index.php?topic=115259.msg1254997#msg1254997
Ungefähr so:
<ftui-label [text]="device:background"
[style]="device:background | b=>this.b=b; device:front | f=>this.f='background-color: '+this.b+'; color: '+f+';'">
</ftui-label>Wie gesagt, diese "Berechnungen" würde ich als userReading definieren; insb bei mehreren solcher Definitionen auf der FTUI3 Seite.
Zitat von: Marko1976 am 04 Januar 2025, 18:30:37Ich habe einige Button die ich mit dem Pipe hidden ausgehend aus einem Reading verstecke - funktioniert soweit sehr gut. Jeder Button wird nur angezeigt wenn die jeweilige Aktion zur Verfügung steht.
Ich würde allerdings gerne ALLE Button per Schalter dennoch und egal des jeweiligen Zustandes anzeigen - also quasi als übergeordnete Funktion. Das ginge ja mit ftui-binding und einem div-Tag, doch bleiben dabei die Buttons weiter ausgeblendet die durch die jeweilige Butten-Funktion ausgeblendet werden.
Theoretisch müsste in dem Hidden-Attribut des jeweiligen Buttons nicht nur das Reading für die jeweilige Funktion abgefragt werden, sondern auch das übergeordnete Reading.
Schau mal hier -> https://forum.fhem.de/index.php?topic=115259.msg1254997#msg1254997
Ansonsten würde ich das über einer eigenen JavaScript Funktion (Bsp (https://stackoverflow.com/questions/70265557/how-do-i-disable-multiple-buttons-when-i-click-a-button)) über die buttons durchiterieren und entsprechend auf aktiv/inaktiv setzen. Dafür benötigen die buttons eigene ids und dann kannst du via
this.document.getElementById(id).style.display = "none";ausblenden oder via
this.document.getElementById(id).style.display = "unset";wieder einblenden.
Ich glaube das wird mir zu komplex.
Ich schaue mal ob ich nicht einen komplett anderen Ansatz finde.
Zur näheren Erklärung für die hidden-Frage:
Es geht um Bestätigungsbutton für Hausarbeiten wie Blumengiessen, Fenster putzen etc., welche bei Erledigung der Arbeit betätigt und damit die Aufgabe zurücksetzen.
Das klappt auch alles perfekt, nur kommt es halt schon mal vor, dass eine Aufgabe vorzeitig erledigt werden soll und ich (da der Button erst eingeblendet wird wenn er fällig ist) dann keine Möglichkeit habe ihn vorzeitig zu bestätigen und damit zurück zu setzen. Nur mal als grundlegende Info zum Warum und Wieso.
Die Komplexität kommt von deiner Anforderung - und der Tatsache, dass du es in FTUI3 lösen möchtest. Du bist auf FHEM-Ebene wesentlich flexibler.
Zitat von: Marko1976 am 05 Januar 2025, 18:24:54Ich glaube das wird mir zu komplex.
Ich schaue mal ob ich nicht einen komplett anderen Ansatz finde.
Zur näheren Erklärung für die hidden-Frage:
Es geht um Bestätigungsbutton für Hausarbeiten wie Blumengiessen, Fenster putzen etc., welche bei Erledigung der Arbeit betätigt und damit die Aufgabe zurücksetzen.
Das klappt auch alles perfekt, nur kommt es halt schon mal vor, dass eine Aufgabe vorzeitig erledigt werden soll und ich (da der Button erst eingeblendet wird wenn er fällig ist) dann keine Möglichkeit habe ihn vorzeitig zu bestätigen und damit zurück zu setzen. Nur mal als grundlegende Info zum Warum und Wieso.
Hallo,
Pack dir doch irgendwo einen unsichtbaren Button (Hintergrundfarbe) hin mit dem du ein Popup mit allen deinen Buttons anzeigst. Damit kannst du dann alle vorher bestätigen und dein Layout sieht immer noch aus wie vorher.
Gruß
Eisix
@yersinia
Nein, nicht zwingend. Ich finde nur keinen Möglichkeit Werte die ich in Fhem setze entsprechend auszuwerten um in FTUI3 darauf zu reagieren.
@Eisix
Interessante Idee, dann müsste ich das ganze Layout im Popup und der eigentlichen Seite aber doppelt pflegen, oder? Wenn ich es als Template einlade würden ja die hidden-attribute der einzelnen Buttons mit ins Popup übernommen.
Hallo,
Das popup müsstest du extra pflegen ohne hidden. Copy & Paste und alle hidden Sachen löschen. Der Aufwand sollte sich in Grenzen halten.
Gruß
Eisix
@Eisix
Ja so hatte ich es verstanden. Ist halt nur im Fall einer Änderung immer eine Doppelpflege.