FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: Amenophis86 am 16 Februar 2016, 10:54:55

Titel: Label Background-Icon
Beitrag von: Amenophis86 am 16 Februar 2016, 10:54:55
Ich finde leider nicht die Antwort auf meine Frage mittels der SuFu, daher stelle ich sie mal in die Runde.

Ich lese aus einem DOIF ein Reading aus, welches wie folgt aussieht:


timer_3_c6 17.02.2016 07:30:00


das ganze lasse ich mir als label verkürzt anzeigen, da ich nur hh:mm möchte:

<div data-type="label" data-device="WZ.Rollladen.Schalten" data-get="timer_3_c6" data-substitution="toString().substr(11,5)"></div>

Jetzt hätte ich gerne, dass icon fa-square, als Hintergrundbild. Aber irgendwie bekomme ich es nicht hin. Im Wiki habe ich gesehen, dass es data-background-icon nicht für Label gibt. Gibt es eine andere Möglichkeit dies zu realisieren?
Titel: Antw:Label Background-Icon
Beitrag von: setstate am 17 Februar 2016, 07:39:43
Das geht nicht.
Man könnte aber mit Style border, border-radius usw. etwas ähnliches hinbiegen
Titel: Antw:Label Background-Icon
Beitrag von: Amenophis86 am 17 Februar 2016, 20:28:56
Habe ich mir auch schon überlegt, dass ich es quasi mit Style selbst bauen muss. Aber danke für die Info :)
Titel: Antw:Label Background-Icon
Beitrag von: takaze am 18 Februar 2016, 13:40:41
wenn du das einzelne symbol und das label untereinander setzt kannst du vielleicht das label mit top-narrow in das symbol schieben

is bissl quick'n'dirty aber is mir schon öfter versehentlich passiert  ;D

Grüße
Titel: Antw:Label Background-Icon
Beitrag von: Amenophis86 am 18 Februar 2016, 14:35:58
ja, habe ich versucht, aber klappt nicht ganz. Da müsste man dann wohl mit position: absolut und relativ arbeiten.
Titel: Antw:Label Background-Icon
Beitrag von: setstate am 19 Februar 2016, 23:26:45
Ich habe jetzt mal ein paar CSS Klassen hinzugefügt, um ein Label im Icon-Stil anzuzeigen.

Einmal rund, reckteckig, mit vollem Hintergrund oder nur mit Rand.

Man kann jetzt auch den Hintergrund per data-limit ändern lassen (class="bg-limit"). Also rot bei aus und grün bei an.


<div class="cell">
    <div data-type="label" data-device="AvReceiver" data-get="input" class="icon round bg-red cell"></div>
    <div data-type="label" data-device="AvReceiver" data-get="input" class="icon square bg-blue cell"></div>
    <div data-type="label" data-device="AvReceiver" data-get="input" class="icon squareborder cell"></div>
    <div data-type="label" data-device="PowerAV_Sw" data-colors='["red","green"]' data-limits='["off","on"]' class="icon round bg-limit cell"></div>
</div>
Titel: Antw:Label Background-Icon
Beitrag von: Amenophis86 am 20 Februar 2016, 00:32:27
Cool, danke
Titel: Antw:Label Background-Icon
Beitrag von: kvo1 am 20 Februar 2016, 01:21:39
danke, vielleicht bekomme ich ja damit mein offenes Problem

http://forum.fhem.de/index.php/topic,48941.msg405960.html#msg405960 (http://forum.fhem.de/index.php/topic,48941.msg405960.html#msg405960)

irgendwie anderes gelöst!

kvo1