FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: BlackHawk133 am 07 Oktober 2018, 10:25:43

Titel: Symbol Widgets zu gross bei kleinen Icons
Beitrag von: BlackHawk133 am 07 Oktober 2018, 10:25:43
Hallo,

ich habe heute meine FB_Calllist Anzeige im tabletui anpassen müssen. Bisher hatte ich hier eine sehr platzsparende Anzeige der MissedCalls. Jetzt brauche ich auch die Incoming Calls, daher will ich ein Icon des CallTyps mit integrieren. ABER: jedesmal wenn ich ein Icon in die Tabelle aufnehme explodiert die Höhe jedes Eintrags und passt nicht mehr auf den reservierten Tablet Space. Ich habe schon eigene kleine Icons definiert - hilft alles NIX. Die tabletUI Widgets haben ein Eigenleben.... Es scheint sowas wie eine Mindesthöhe zu geben, unter die ich nicht komme. Kann mir jemand helfen?

Hier der Code für die Icon Definition:

<style type="text/css" style="font-size:140%">
.outgoingCall {background: url(icons/OutgoingCall.png) no-repeat; width: 38px; height: 25px; background-size: contain; }
.incomingCall {background: url(icons/IncomingCall.png) no-repeat; width: 38px; height: 25px; background-size: contain; }
.missedCall {background: url(icons/IncomingCall_m.png) no-repeat; width: 38px; height: 25px; background-size: contain; }
scroll="no"
</style>


Hier der Code für die Liste:

<header class="headerTransparent">Anrufe</header>
<table width="100%" class="">
<tr>
<td>
<div data-type="switch" data-device="AnruflisteReal" data-get="1-state" data-background-icon=""
data-states='["=> O_O",   "<=",          "=>",          "=> X",      "=>  ((o))",   "<= ((o))",    "=>  [=]",     "<=  [=]",     "<= X"]'
data-icons='["missedCall","outgoingCall","incomingCall","missedCall","incomingCall","outgoingCall","incomingCall","outgoingCall","outgoingCall"]'
data-colors='["red",      "green",       "green",       "red",       "yellow",      "yellow",      "green",       "green",       "white"]'
data-class="">
</div>
</td>

<td>
<div data-type="label" data-device="AnruflisteReal" data-get="1-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="1-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="1-timestamp" data-part="3" class="inline"></div>
</td>
<td>
<div data-type="label" data-device="AnruflisteReal" data-get="1-timestamp" data-part="5" class=""></div>
</td>
<td>
<div data-type="label" data-device="AnruflisteReal" data-get="1-name"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="1-number"></div>
</td>
</tr>
<tr>
<td>
<div data-type="switch" data-device="AnruflisteReal" data-get="2-state" data-background-icon=""
data-states='["=> O_O",   "<=",          "=>",          "=> X",      "=>  ((o))",   "<= ((o))",    "=>  [=]",     "<=  [=]",     "<= X"]'
data-icons='["missedCall","outgoingCall","incomingCall","missedCall","incomingCall","outgoingCall","incomingCall","outgoingCall","outgoingCall"]'
data-colors='["red",      "green",       "green",       "red",       "yellow",      "yellow",      "green",       "green",       "white"]'
data-class="">
</div>
</td>

<td>
<div data-type="label" data-device="AnruflisteReal" data-get="2-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="2-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="2-timestamp" data-part="3" class="inline"></div>
</td>
<td>
<div data-type="label" data-device="AnruflisteReal" data-get="2-timestamp" data-part="5" class=""></div>
</td>
<td>
<div data-type="label" data-device="AnruflisteReal" data-get="2-name"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="2-number"></div>
</td>
</tr>
<tr>
<td>
<div data-type="switch" data-device="AnruflisteReal" data-get="3-state" data-background-icon=""
data-states='["=> O_O",   "<=",          "=>",          "=> X",      "=>  ((o))",   "<= ((o))",    "=>  [=]",     "<=  [=]",     "<= X"]'
data-icons='["missedCall","outgoingCall","incomingCall","missedCall","incomingCall","outgoingCall","incomingCall","outgoingCall","outgoingCall"]'
data-colors='["red",      "green",       "green",       "red",       "yellow",      "yellow",      "green",       "green",       "white"]'
data-class="">
</div>
</td>

<td>
<div data-type="label" data-device="AnruflisteReal" data-get="3-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="3-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="3-timestamp" data-part="3" class="inline"></div>
</td>
<td>
<div data-type="label" data-device="AnruflisteReal" data-get="3-timestamp" data-part="5" class=""></div>
</td>
<td>
<div data-type="label" data-device="AnruflisteReal" data-get="3-name"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="3-number"></div>
</td>
</tr>
<tr>
<td>
<div data-type="label" data-device="AnruflisteReal" data-get="4-timestamp" data-part="1" class="inline"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="4-timestamp" data-part="2" class="inline"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="4-timestamp" data-part="3" class="inline"></div>
</td>
<td>
<div data-type="label" data-device="AnruflisteReal" data-get="4-timestamp" data-part="5" class=""></div>
</td>
<td>
<div data-type="label" data-device="AnruflisteReal" data-get="4-name"></div>
<div data-type="label" data-device="AnruflisteReal" data-get="4-number"></div>
</td>
</tr>
</table>

Titel: Antw:Symbol Widgets zu gross bei kleinen Icons
Beitrag von: setstate am 07 Oktober 2018, 11:02:09
Symbol, Switch und co reservieren immer 2em Platz, damit Backgroundicon und Icon rein passen.
Wenn man nur das Icon benutzen will und sich den Platz für das backgroundicon sparen will, muss man

class="compress"

beim data-type="switch" hinzufügen.
Titel: Antw:Symbol Widgets zu gross bei kleinen Icons
Beitrag von: BlackHawk133 am 07 Oktober 2018, 11:30:37
Danke, das war die Lösung.....