Autor Thema: Symbole nebeneinander  (Gelesen 265 mal)

Offline wolfram

  • Full Member
  • ***
  • Beiträge: 150
Symbole nebeneinander
« am: 11 Oktober 2018, 12:36:53 »
Liebe Community,

ich versuche seit 2 Tagen eine Lösung für mein "Problem" zu finden. Ziel ist es in einem Gritster Element 6 Widgets gleichmäßig zu verteilen. 2 Zeilen mit jeweils 3 Widgets. In der 1. Zeile klappt das auch wunderbar. In der zweiten Zeile breche ich mir einen ab.

<li data-row="1" data-col="2" data-sizex="2" data-sizey="1">
        <header>BAD</header>
        <div data-type="label" data-device="HUE_temp_Bad" data-fix='1' class="bigger inline" data-limits='[10,23,25]' data-colors='["#00bfff","#6699FF","#FF0000"]' data-unit=" %B0C%0A"></div>
        <div data-type="symbol" data-device="F_BA_1" data-on-color="#aa6900" data-get-on="true|1|on|open|Open" data-get-off="false|0|off|closed|0|Closed" class="inline"></div>
        <div data-type="symbol" data-device="F_BA_2" data-on-color="#aa6900" data-get-on="true|1|on|open|Open" data-get-off="false|0|off|closed|0|Closed" class="inline"></div>
        <div data-type="switch" data-device="Sonos_Bad" data-get='state' data-get-on='Play' data-get-off='Pause' data-states="PLAYING, PAUSED_PLAYBACK" class="small" data-icon="fa-play, fa-stop"></div>
        <div data-type="image" data-device="Sonos_Bad" data-get="currentAlbumArtURL" data-size="15%" class="inline"></div>
        <div data-type="label" data-device="Sonos_Bad" data-get="transportState" class="inline"></div>
</li>>

Das Ergebnis sieht wie folgt aus (siehe Anlage).

Eigentlich möchte ich nur, dass die Elemente "switch", "image" und "label" sauber nebeneinander stehen, wie in der 1. Zeile.

Kann mir bitte jemand auf die Sprünge helfen, wo mein Denkfehler ist?

vielen Dank

wolf


Offline Vaddi

  • Full Member
  • ***
  • Beiträge: 126
Antw:Symbole nebeneinander
« Antwort #1 am: 11 Oktober 2018, 17:47:20 »
Versuch mal folgendes

   <li data-row="1" data-col="2" data-sizex="2" data-sizey="1">
        <header>BAD</header>
        <div data-type="label" data-device="HUE_temp_Bad" data-fix='1' class="bigger inline" data-limits='[10,23,25]' data-colors='["#00bfff","#6699FF","#FF0000"]' data-unit=" %B0C%0A"></div>
        <div data-type="symbol" data-device="F_BA_1" data-on-color="#aa6900" data-get-on="true|1|on|open|Open" data-get-off="false|0|off|closed|0|Closed" class="inline"></div>
        <div data-type="symbol" data-device="F_BA_2" data-on-color="#aa6900" data-get-on="true|1|on|open|Open" data-get-off="false|0|off|closed|0|Closed" class="inline"></div>
<div class="cell">
<div class="inline">
        <div data-type="switch" data-device="Sonos_Bad" data-get='state' data-get-on='Play' data-get-off='Pause' data-states="PLAYING, PAUSED_PLAYBACK" class="small" data-icon="fa-play, fa-stop"></div>
</div>
<div class="inline">
        <div data-type="image" data-device="Sonos_Bad" data-get="currentAlbumArtURL" data-size="15%"></div>
</div>
<div class="inline">
        <div data-type="label" data-device="Sonos_Bad" data-get="transportState"></div>
</div></div>
</li>
fhem auf RPi 3
HM-MOD-RPI-PCB sowie 433mhz Sender
Mehrere HM und 433mhz Produkte

Offline wolfram

  • Full Member
  • ***
  • Beiträge: 150
Antw:Symbole nebeneinander
« Antwort #2 am: 12 Oktober 2018, 09:23:48 »
Danke Vaddi,

leider ist es das gleiche Ergebnis.

Liebe Grüße
wolf

Offline Thorsten Pferdekaemper

  • Developer
  • Hero Member
  • ****
  • Beiträge: 4969
  • Finger weg von der fhem.cfg
Antw:Symbole nebeneinander
« Antwort #3 am: 12 Oktober 2018, 10:44:21 »
Hi,
hast Du schon mal FUIP ausprobiert?
https://wiki.fhem.de/wiki/FHEM_User_Interface_Painter
Gruß,
   Thorsten
RasPi
Heizkessel-Steuerung per Arduino und HTTPMOD
und einen Haufen Homematic (Wired)

Offline setstate

  • Hero Member
  • *****
  • Beiträge: 3843
  • FHEM TabletUI
    • FHEM Tablet UI
Antw:Symbole nebeneinander
« Antwort #4 am: 12 Oktober 2018, 11:05:37 »
- alle 'inline' raus schmeißen.
- alle Widgets, die neben einander sein sollen, mit <div class="hbox"> </div> umklammern
- alles was untereinander sein soll, mit <div class="vbox"> </div>

2 Zeilen a 3 Widgets sehen grob so aus:

vbox
  hbox
     switch
     switch
     switch
  hbox
     label
     label
     label

Das Ganze ist hier gut erklärt: https://wiki.fhem.de/wiki/FTUI_Layout_Flex

« Letzte Änderung: 12 Oktober 2018, 11:16:51 von setstate »

Offline wolfram

  • Full Member
  • ***
  • Beiträge: 150
Antw:Symbole nebeneinander
« Antwort #5 am: 12 Oktober 2018, 19:14:40 »
Danke setstate, so klappt es, gut erklärt !!! - Wiki hatte ich an dieser Stelle leider nicht verstanden.


Gesendet von iPhone mit Tapatalk Pro

Offline curt

  • Full Member
  • ***
  • Beiträge: 407
Antw:Symbole nebeneinander
« Antwort #6 am: 14 Oktober 2018, 06:58:37 »
2 Zeilen a 3 Widgets sehen grob so aus:

Möglicherweise ist das auch die Antwort auf die öfter gestellte (und unbeantwortete) Frage, wie man mehrere automatisch auftauchende Warn-Icons bei UWZ (Unwetterzentrale) nebeneinander zwingt.

Da ich derzeit nur eine Warnmeldung (Waldbrandwarn) habe, kann ich aber noch nicht zuverlässig sagen, ob Dein Vorschlag dort auch funktioniert.

Nein - leider doch nicht. War ein schöner Traum.
« Letzte Änderung: 15 Oktober 2018, 23:43:04 von curt »
RPI 3 Busware-CC1101 Jeelink HomeMatic Z-Wave (USB) + viele RPI Zero W