[GELÖST][FTUI3] Icon-Farbe als Hex-Code aus device:reading zuweisen

[DocCyber]

Hallo zusammen.

Bei meiner bestehenden (alten) FTUI-Oberfläche funktioniert folgendes Konstrukt:

Code Auswählen Erweitern

data-states='["Wertstoff","Rest","Papier","Glas","Garten","Sperrgut","???"]'
data-icons= '["fa-trash-o","fa-trash-o","fa-trash-o","fa-glass","fa-tree", fa-box-open", ""]'
data-colors='["rcol:Wertstoff", "rcol:Rest",  "rcol:Papier", "rcol:Glas", "rcol:Garten", "rcol:Sperrgut", "transparent"]'Die Icon-Farben sind hierbei in dem Device rcol mit den Readings Wertstoff, Rest, Papier, ... als Hex-Code (#E5A941) hinterlegt.

Jetzt möchte ich die selbe Funktionaliät mit FTUI-3 realisieren, aber das klappt leider nicht.

Code Auswählen Erweitern

<ftui-icon>
  ...
  [color]="rcol:rubbishType |
    map('`Wertstoff`: rcol:Wertstoff, `Rest`: rcol:Rest, `Papier`: rcol:Papier, `Glas`: rcol:Glas, `Garten`: rcol:Garten, `Sperrgut`: rcol:Sperrgut')"
</ftui-icon>
Ich habe dann mal eine eigene *.css mit Farbefinition erstellt, die ich dann über [class-name] eingebunden habe. Klappt aber leider auch nicht.

Code Auswählen Erweitern

.rcGarten {color: #E5A941;}
.rcGlas {color: #3C942C;}
.rcPapier {color: #3B5DD2;}
.rcRest    {color: #8B8B8B;}
.rcSperrgut {color: #91775F;}
.rcWertstoff {color: #DDDD00;}

Code Auswählen Erweitern

[class-name]="rcol:rubbishType{{idx}} |
  map('`Wertstoff`: rcWertstoff, `Rest`: rcRest, `Papier`: rcPapier, `Glas`: rcGlas, `Garten`: rcGarten, `Sperrgut`: rcSperrgut')"

Kann mir jemand auf die Sprünge helfen?
Danke euch vorab!

[yersinia]

Ich habe dann mal eine eigene *.css mit Farbefinition erstellt, die ich dann über [class-name] eingebunden habe. Klappt aber leider auch nicht.

Code Auswählen Erweitern

.rcGarten {color: #E5A941;}
.rcGlas {color: #3C942C;}
.rcPapier {color: #3B5DD2;}
.rcRest    {color: #8B8B8B;}
.rcSperrgut {color: #91775F;}
.rcWertstoff {color: #DDDD00;}

Code Auswählen Erweitern

[class-name]="rcol:rubbishType{{idx}} |
  map('`Wertstoff`: rcWertstoff, `Rest`: rcRest, `Papier`: rcPapier, `Glas`: rcGlas, `Garten`: rcGarten, `Sperrgut`: rcSperrgut')"

Das HTML Attribut wäre class.

Code Auswählen Erweitern

[class]="rcol:rubbishType{{idx}} |
  map('`Wertstoff`: rcWertstoff, `Rest`: rcRest, `Papier`: rcPapier, `Glas`: rcGlas, `Garten`: rcGarten, `Sperrgut`: rcSperrgut')"Damit müsste die class gesetzt werden und ersetzt color entsprechend.

Ob FTUI3 im Standard mehrstufig Werte ermitteln kann, weiss ich nicht. Vlt hat @mr_petz eine smarte Idee.

[DocCyber]

Damit müsste die class gesetzt werden und ersetzt color entsprechend.

Hab ich jetzt probiert; klappt auch nicht. 
Ich habe aber irgendwo in den Tiefen des FTUI-Megathreads in den examples/icon.html ein Beispiel von setsate gesehen, wo er mit [class-name] arbeitet. Funktioniert nur hier nicht.

Ob FTUI3 im Standard mehrstufig Werte ermitteln kann, weiss ich nicht. Vlt hat @mr_petz eine smarte Idee.

Würde mich freuen...

[DocCyber]

Mit dem richtigen Namen für das Device ( ) geht es unter Verwendung von [class-name] und ohne [class] so:

Code Auswählen Erweitern

<ftui-icon
  [hidden]="rubbish:rubbishType | map('`none`:true, `.*`:false')"
  [name]="rubbish:rubbishType |
    map('`Wertstoff`: trash, `Rest`: trash, `Papier`: trash, `Glas`: glass, `Garten`:tree, `Sperrgut`:dropbox')"
  [class-name]="rubbish:rubbishType |
    map('`Wertstoff`: rcWertstoff, `Rest`: rcRest, `Papier`: rcPapier, `Glas`: rcGlas, `Garten`: rcGarten, `Sperrgut`: rcSperrgut') |
    append(' size--2')">
</ftui-icon>
Mit dieser Lösung kann ich leben, auch wenn das keine direkt Zuweisung des Farb-Hex-Codes darstellt, sondern über den Umweg einer eigenen CSS.