Hallo,
ich habe mir eigene Icons (JPG-Bilder) gebastelt, die ich mit eigenen CSS-Klassen definierte.
.meineCSSklasse{
width: 200px;
height: 150px;
border-style: dotted;
background: url(http://meineURL.jpg) no-repeat;
}
Wenn ich die Icons mit
data-type="symbol"
einbinde, dann wird mein Icon (es ist eigentlich schon ein Bild, da 200px breit) nur zu einem Bruchteil angezeigt.
Ich habe den Eindruck, dass die Definition data-type="symbol" bewirkt, dass das "Icon" nicht mehr als 50 (?) px breit sein darf.
Wie kann ich das Problem lösen?
Ein Auszug deines HTML codes mit diesem symbol widget wäre interessant. Darüberhinaus solltest du die Größendefinition analysieren.
Ein symbol widget erbt die width und hight als 2em (2-fache font-größe) (https://www.w3schools.com/cssref/css_units.asp) von der fa-stack klasse.
Im Übrigen kennt das symbol-widget (https://wiki.fhem.de/wiki/FTUI_Widget_symbol#Attribute) kein background image und auch kein data-class[es] attribut. Vielleicht kannst du das label widget (https://wiki.fhem.de/wiki/FTUI_Widget_Label#Attribute) für dein Vorhaben missbrauchen.
Zitat von: yersinia am 12 Mai 2020, 11:08:36Vielleicht kannst du das label widget (https://wiki.fhem.de/wiki/FTUI_Widget_Label#Attribute) für dein Vorhaben missbrauchen.
Ich benötige aber eine Abhängigkeit, d.h. je nach Wert soll ein anderes Icon/Bild angezeigt werden.
Mein Code sah bisher so aus:
<div data-type="symbol"
data-device="meinDevice"
data-get="value"
data-states='[0,10,20]'
data-icons='["meineCSSklasse","meineCSSklasse2","meineCSSklasse3"]'>
</div>Ich wüsste jetzt nicht, wie ich das auf in einem Label abbilden kann.
Zitat von: Pi_01 am 12 Mai 2020, 12:05:27
Mein Code sah bisher so aus:
<div data-type="symbol"
data-device="meinDevice"
data-get="value"
data-states='[0,10,20]'
data-icons='["meineCSSklasse","meineCSSklasse2","meineCSSklasse3"]'>
</div>
Das funktioniert so nicht, da die Icons nicht derart eingebunden werden. Du müsstest dem symbol-div ebenso eine class mit der entsprechenden Größe mitgeben. Dann kann es funktionieren, wage ich aber zu bezweifeln.
Ja, im Nachhinein kann das label widget auch nicht funktionieren, da es immer einen Wert anzeigt, ansonsten hätte ich es so versucht (ungetestet):
<div data-type="label"
data-device="meinDevice"
data-limits-get="value"
data-limits='[0,10,20]'
data-classes='["meineCSSklasse","meineCSSklasse2","meineCSSklasse3"]'>
</div>Eventuell mit data-substitution den text nachbearbeiten.
Du könntest aber auch mit dem image widget (https://wiki.fhem.de/wiki/FTUI_Widget_Image) arbeiten und einem dummy, der über ein Reading die url zur Verfügung stellt.
Zitat von: yersinia am 12 Mai 2020, 12:30:03
Du könntest aber auch mit dem image widget (https://wiki.fhem.de/wiki/FTUI_Widget_Image) arbeiten und einem dummy, der über ein Reading die url zur Verfügung stellt.
Danke für den Tipp!