[gelöst] [FTUI3] Frage ftui-icon Farbwechsel und springen gleichzeitig?

Begonnen von M.Piet, 29 Dezember 2022, 10:59:13

Vorheriges Thema - Nächstes Thema

M.Piet

Moin Zusammen,

ich bau grad alles von FTUI2 auf 3 um. Ich liebe FTUI3 jetzt schon. :)

In FTUI2 hatte ich mit dem "symbol" Readinabhängig die Farbe wechseln lassen. In dem Fall möchte ich sehen, ob alle Netzwerkgeräte Online sind.
In FTUI3 dachte ich das ich dies mit "ftui-icon" umsetzte (Frage: richtiger Weg?)

Ich finde es richtig schön, das ich das Sysbol hüpfen lassen kann, wenn "DeviceName:absent" aktiv ist. Im Ruhezustand ist es "DeviceName:present"
Darum habe ich es so aufgebaut: map('absent:hop size-4,present:')

Bekommt man es denn hin, dass auch die Farbe wechselt? Also grün/normal und rot/hüpfen? Die Suche hat nichts ergeben.

Danke schon mal für das Feedback. :)



    <ftui-grid-tile row="1" col="15" height="3.5" width="1">
      <header>Network</header>
      <ftui-row>
        <ftui-icon name="sitemap" color="red" [class-list]="Internet | map('absent:hop size-4,present:')"></ftui-icon>
      </ftui-row>
    <ftui-label margin="-20px 0 0 0">Internet</ftui-label>

      <ftui-row>
        <ftui-icon name="sitemap" color="red" [class-list]="Forti | map('absent:hop size-4,present:')"></ftui-icon>
      </ftui-row>
    <ftui-label margin="-20px 0 0 0">Fortigate</ftui-label>

      <ftui-row>
        <ftui-icon name="sitemap" color="red" [class-list]="Fritz.Box | map('absent:hop size-4,present:')"></ftui-icon>
      </ftui-row>
    <ftui-label margin="-20px 0 0 0">FritzBox</ftui-label>
    </ftui-grid-tile>

juemuc

#1
Ja mit [color]="Device:Reading |map ('zustand1:Farbe1, Zustand2:Farbe2')"

siehe auch hier https://knowthelist.github.io/ftui/www/ftui/examples/icon.html

Viele Grüße
Jürgen
3x Sonos Play 1, 1x Sonos Arc + Sub, 1 Sonos-One, 1x Sonos Playbar
FB6690 + FB7490 mit 4x Dect 200 und 3 Dect-ULE-Thermostate,  raspberry3B+, HM Funkmodul HM-MOD-RPI-PCB, HM Klingelsensor HM-Sen-DB-PCB, HM (IP) Fensterkontakte und  Amazon Echo Dot,  piVCCU, pi OS (bookworm).

mr_petz

#2
Für hop nicht [class-list] sondern Bsp.:

[class-name]="Internet | map('absent:hop,present:')"


LG mr_petz

Edit:
wobei [class-list] auch funktionieren sollte...

für size kannst du auch [size] anwenden. Bsp.:
[size]="Internet | map('absent:3,present:5')"

Hinweis:
wenn Bsp.: size="3" gesetzt und dann noch gleichzeitig mit Bsp.: [class-name]="device | map('0:size-5)" gearbeitet wird, zieht class nicht! Also entweder.. oder...

M.Piet

Zitat von: mr_petz am 29 Dezember 2022, 11:22:00
Für hop nicht [class-list] sondern Bsp.:

[class-name]="Internet | map('absent:hop size-4,present:')"


LG mr_petz
Hmmm...ich verstehe jetzt grad nicht den Unterschied zwischen class-list und class-name
Aber wenn ich es richtig verstanden habe, geht es nicht, das Farbwechel und Hop zusammen geht?

mr_petz

#4
Doch geht. Einfach beides definieren Bsp.:

<ftui-icon name="sitemap" [color]="Internet | map('absent:green,present:red')" [class-name]="Internet | map('absent:hop size-4,present:')"></ftui-icon>


LG

Edit:
Du musst nur bei map() aufpassen. map() will immer nur die angegebenen Zustände! step() hingegen aggiert von - bis....

M.Piet

Zitat von: mr_petz am 29 Dezember 2022, 11:30:45
Doch geht. Einfach beides definieren Bsp.:
WOW! Perfekt! Danke!

Das sieht jetzt richtig Top aus! Vielen Dank!