Schaltzustand mit Gifs anstelle von Icons

[choetzu]

Hallo

ich möchte im Tablet UI gerne einen bestimmten Schaltzustand mit Gifs anstelle von Icons darstellen. Also, wenn z.B. eine Lampe geschaltet ist, dann soll L_on.gif geschaltet werden und wenn die Lampe nicht brennt dann L_off.gif. Bei den Icons macht man das ja mit data-limits und data-icons resp. data-on-colors. kann man dies auch mit gifs?

Danke für die Hilfe.

Lg c

[choetzu]

ich mache es nun doch mit data="symbol" ..

Aber wo ich nun anhacke ist die Grösse des Symbols. Da ich ein Tablet ui für mein iPhone bastle, sollte das gewählte Symbol um ein Vielfaches kleiner sein als class="small".

Code Auswählen Erweitern

<div data-type="symbol" data-device="EnO_019257C5" data-get="state" data-get-on='["on","off"]' data-icons='["fa-circle-o","fa-circle-o"]' data-on-colors='["green","red"]' class="mini"></div>

Ist es richtig, dass ich dies über css steuern kann, indem ich einen neuen class definiere wie z.b. "mini" und dem dann z.B. den Fontsize 70% gebe?

Kann mir da jemand helfen, wie ich das genau im css definieren muss? Ich habe eine fhem-tablet-ui-custom.css, weiss aber nicht, was genau ich da nun eintragen kann.. Herzlichen Dank für die Hilfe...

[choetzu]

so, dank eurer Hilfe bin ich einen Schritt weiter

ich habe in der fhem-tablet-ui-custom.css folgendes hinzugefügt:

Code Auswählen Erweitern

[data-type="symbol"].tiny, [data-type="multistatebutton"].tiny,
[data-type="switch"].tiny, [data-type="button"].tiny,
[data-type="push"].tiny, [data-type="pagebutton"].tiny {
    font-size: 50% !important;
}

nun habe ich die class="tiny" auf der Seite dargestellt.

Code Auswählen Erweitern

<td align="left" align="top">
  <div class="top-space inline">
  <div data-type="symbol" data-device="EnO_019257C5"
  data-get="state"
  data-get-on='["on","off"]'
  data-icons='["fa-circle-o","fa-circle-o"]'
  data-on-colors='["green","red"]'
  class="top-narrow-2x tiny"></div>
  </div>
  <div class="top-space inline">
  <div class="small">Aussenl_L</div>
  </div>
  </td>
  <td align="right" align="top">
  <div data-type="label" data-device="EnO_019257C5" data-get="state" data-limits='["on"]' data-colors='["blue"]' class="small"></div>
  </td>

Was ich nun aber nicht hinkriege, ist dass das Symbol (roter Kreis) und die Schrift "Aussenl_L" auf der selben Höhe wie "off" sind. Analog "Wohnzimmer_L". Die Reihe sollte ebenso gleich gross sein. Weiss hier jemand Rat?

siehe Anlage. Danke.

[choetzu]

wäre um Hilfe dankbar. Ich mit align in allen Varianten probiert und komm irgendwie nicht weiter. Auch Tante Google hilft nicht weiter. Oder ist dies gar nicht möglich? Danke für Hilfe.

[n4rrOx]

Hi,

class inline hast du ja gesetzt .... nur eine Vermutung:
Ist evtl. kein Platz für beide Elemente nebeneinander?
Versuch vllt. mal mit der td Breite zu spielen (größer definieren), so dass sichergestellt ist, dass ausreichend Platz vorhanden sein sollte.

[choetzu]

hallo n4rrOx

herzlichen dank für deine Hilfe. Ich habe den Fehler gefunden. Es lag am top-space in der class vor inline. Logisch irgendwie.. Jetzt sieht es richtig gut aus...

Happy..

[choetzu]

und doch noch nicht ganz am Ziel. Nun möchte ich den Abstand zwischen dem Icon (roter Kreis) und dem Text "Aussen_L" verringern. siehe Bild.
Wie kann ich dies machen. Mit class=narrow geht es nicht...

[n4rrOx]

Hi,

mal versucht mit CSS ein negatives margin zu definieren?
https://wiki.selfhtml.org/wiki/CSS/Eigenschaften/Abstand/margin

Damit müsste der gewünschte Effekt erzielt werden können.