Hi!
Ich fang gerade an, mit Tablet UI rumzuspielen und versuche, den Batteriestatus eines HM-Sen-MDIR-O grafisch anzuzeigen. Aber irgendwie wird das entsprechende Icon nicht angezeigt:
<div data-type="symbol" data-device="UG.Eingang.MotionDetect" data-get="battery"
data-icons='["fa_battery_4","fa_battery_1"]'
data-get-on='["ok","low"]'>
</div>
Es wird gar kein Icon angezeigt, obwohl der aktuelle Status "on" ist. In den Chrome Developer Tools sehe ich auch, dass er das richtige Icon eingebunden hat:
<div data-type="symbol" data-device="UG.Eingang.MotionDetect" data-get="battery" data-icons="["fa_battery_4","fa_battery_1"]" data-get-on="["ok","low"]" class="fa-stack fa-2x">
<i id="bg" class="fa fa-stack-2x" style="color: rgb(170, 105, 0);"></i>
<i id="fg" class="fa fa-stack-1x fa_battery_4" style="color: rgb(170, 105, 0);"></i>
</div>
Zum Vergleich der resultierende Quelltext des Dummy-Beispiels, welches ein statisches Icon anzeigt:
<div data-type="symbol" data-device="Switch1" data-icon="fa-battery-4" class="fa-stack fa-2x">
<i id="bg" class="fa fa-stack-2x" style="color: rgb(80, 80, 80);"></i>
<i id="fg" class="fa fa-stack-1x fa-battery-4" style="color: rgb(80, 80, 80);">
::before
</i>
</div>
Interessant ist hier das "::before", welches mir in den CDT angezeigt wird. Die dazugerige CSS-Klasse beinhaltet:
.fa-battery-4:before, .fa-battery-full:before {
content: "\f240";
}
Wenn ich das rausnehme, wird mir das Icon im Beispiel auch nicht mehr angezeigt.
Kann mir jemand nen Tipp geben, was ich falsch mache?
Oli
Vordergrund und Hintergrundfarbe sind gleich. Da sieht man das Symbol nicht. Gib mal noch data-colors mit an.
Beispiel aus der Readme im github
Example for a tristate icon
<div data-type="symbol" data-device="dummy1"
data-states='["wert1","wert2","wert3"]'
data-icons='["fa-arrow-up","fa-user","fa-arrow-down"]'
data-colors='["SeaGreen","SlateBlue","IndianRed"]'
class="cell big">
</div>
Berichtigung:
Farben sind nicht sooo wichtig, es funktioniert auch mit den default-Farben. Wichtig ist: die Icon-Namen richtig zu schreiben. Minus anstatt Unterstrich
data-icons='["fa-battery-4","fa-battery-1"]'
Zitat von: setstate am 16 Mai 2016, 19:10:12
Farben sind nicht sooo wichtig, es funktioniert auch mit den default-Farben. Wichtig ist: die Icon-Namen richtig zu schreiben. Minus anstatt Unterstrich
data-icons='["fa-battery-4","fa-battery-1"]'
Volltreffer! Das war wohl wieder so ein Ding mit Wald und Bäumen und so... ;D
Danke fürs Nase draufhalten.
Gruß
Oli