FTUI Warn-Symbol anpassen.

[JudgeDredd]

Hallo Zusammen,

wie es ja bekannt sein dürfte, ist es ja möglich bei Symbolen ein Warn-Symbol anzuzeigen.
(z.B. Beim Abfallkalender eine Mülltonne mit einer Zahl der verbleibende Tage zur Leerung).
s. "Beispiel_ist". Ich denke es ist klar was ich meine.

Was ich nun gerne hätte bzw. schön finden würde, wäre, wenn es eine Möglichkeit gäbe, das dieses Warn-Symbol nicht eine Ziffer darstellt,
sondern z.B. einen "spinner" oder ein "Zahnrad" um einen laufenden Prozess zu symbolisieren.
s. "Beispiel_soll". Ich denke es ist klar was ich meine.

Bevor ich nun selbst an das CSS Hand anlege, frage ich mal, ob evtl. hier schon eine fertige Lösung hierzu existiert.

Gruß,
JudgeDredd

[dt2510]

Farbe(n), Icon(s), Größe und Position wären auch nicht schlecht ... falls das nicht schon geht

[Vaddi]

Ich würde die warn Klasse bei dem Symbol weg lassen und anschließend ein neues Warn-Symbol
mit <data-type="symbol"> erstellen. Dazu eine neue CSS Klasse anlegen und damit das Symbol positionieren/Größe/usw.
Mit data-hide-on/off kannst du dann das Symbol verstecken/anzeigen. Hab ich vorhin bei mir mal gestestet, funktioniert
sehr gut.

[Ralf.E]

Ich würde die warn Klasse bei dem Symbol weg lassen und anschließend ein neues Warn-Symbol
mit <data-type="symbol"> erstellen. Dazu eine neue CSS Klasse anlegen und damit das Symbol positionieren/Größe/usw.

Hast Du für diejenigen welche Dir folgen können, aber nicht die Erfahrung haben evtl. ein Beispiel?

Danke
Ralf

[Vaddi]

Hey, dann hoffe ich mal, dass du damit was anfangen kannst.
Könnte allerdings sein, dass du die die Werte in der CSS noch etwas abändern
musst.

So sieht der Code (html) aus (Im Screenshot unten siehst du, wie es angezeigt wird)

Code Auswählen Erweitern

    <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
<header>Keller</header>
        <div class="cell">
            <div data-type="switch"
                 data-device="HM.SD.K.WM"
                 data-on-background-color="blue"
data-icon="fa-plug"
data-lock="running"
                 class="large"></div>
<div>Waschmaschine</div>

<div data-type="symbol"
data-device="HM.SD.K.WM"
data-on-background-color="red"
data-on-color="white"
data-icon="oa-edit_settings"
data-background-icon="fa-circle"
data-hide-off="on"
data-hide-on="off"
class="warn_symbol"></div>
</div>


</li>

In die fhem-tablet-ui-user.css muss dann folgendes rein

Code Auswählen Erweitern

.warn_symbol {
  position: relative;
    top: -14em;
    right: -3em;
    padding: 0.25em 0.3em;
    font-size: 0.5em;
    border-radius: 1em;
}
Und die fhem-tablet-ui-user.css muss natürlich in der index.html (Hauptseite)
aufgerufen werden.
Wie gesagt könnte es sein, dass das Symbol bei dir nicht an der richtigen Stelle sind,
dann musst du die Werte in der CSS anpassen.