Widget plazierung nebeneinander und untereinander

[Tueftler1983]

hallo zusammen ich würde gerne für meinen Garten einiges Nebeneinander Plazieren und anderes untereinander

Unwetter---- Wetter heute Symbol----Wetter morgen Symbol----Wetter übermorgen Symbol-----Aussen temp------Pool Temp
-------------- Wetter heute Text     ----Wetter morgen Text     ----Wetter übermorgen Text    -----Luftfeuchte                         ---- Garten_Licht                       
---------------Temp min max         ----Temp min max             ----Temp min max                           

So sollte es aussehen vom aufbau her ich bekomme es aber nicht hin

Code Auswählen Erweitern

<li data-row="5" data-col="1" data-sizex="5" data-sizey="2">
  <header>Garten</header>
  <div class="inline">
  <div class="inline">
  <div data-type="uwz"
  data-device="Unwetter"
  data-detail='["WarnUWZLevel_Color", "IconURL", "ShortText","WarnTime"]'
  data-max="5"
  class="inline"></div>
  <div class="inline">
</div>
  <div data-type="weather"
  data-device="Wetter"
  data-get="fc0_weatherDay"
  class="inline"></div>
<div data-type="label" data-device="Wetter" data-get="fc0_weatherDay" class="cell"></div>
<div data-type="label" data-device="Wetter" data-get="fc0_tempMin" data-unit="%B0C%0A" class="cell"></div>
<div data-type="label" data-device="Wetter" data-get="fc0_tempMax" data-unit="%B0C%0A" class="cell"></div>
<div data-type="weather"
  data-device="Wetter"
  data-get="fc1_weatherDay"
  class="inline"></div>
<div data-type="label" data-device="Wetter" data-get="fc1_weatherDay" class="cell"></div>
<div data-type="label" data-device="Wetter" data-get="fc1_tempMin" data-unit="%B0C%0A" class="cell"></div>
<div data-type="label" data-device="Wetter" data-get="fc1_tempMax" data-unit="%B0C%0A" class="cell"></div>
<div data-type="weather"
  data-device="Wetter"
  data-get="fc2_weatherDay"
  class="inline"></div>
<div data-type="label" data-device="Wetter" data-get="fc2_weatherDay" class="cell"></div>
<div data-type="label" data-device="Wetter" data-get="fc2_tempMin" data-unit="%B0C%0A" class="cell"></div>
<div data-type="label" data-device="Wetter" data-get="fc2_tempMax" data-unit="%B0C%0A" class="cell"></div>

   </div> 

  <div class="sheet">
<div class="row">
<div class="col-2-3">
<div data-type="label" class="inline">Temperatur</div>
<div data-type="label"
data-device="ESP2_DHT22"
data-get="temperature"
data-unit="&deg;C"
class="big"></div>
</div>
<div data-type="label" class="inline">Luftfeuchte</div>
<div data-type="label"
data-device="ESP2_DHT22"
data-get="Humidity"
data-unit="%"
class="big"></div>
</div>
<div class="col-1-3">
<div data-type="label" class="inline">Pool</div>
<div data-type="label"
data-device="Pool"
data-get="wasser_corr"
data-unit="&deg;C"
class="big"></div>
</div>
</div>
<div data-type="switch"
            data-device="d_GartenL"
            data-get="state"
data-set-on="toggle"
data-states='["on","off","toggle"]'
data-colors='["#ff0000","#00ff00","fffa02"]'
    ></div>
<div data-type="label" class="inline">Gaten Licht</div>


   </div>
</li>

kann mir jemand unter die Arme greifen

[setstate]

Schau dir mal im FHEM Wiki -> FTUI die verschiedenen Möglichkeiten des Layouts an. Entweder row + col oder hbox + vbox

Das kann man erst einmal als Grundgerüst vorbereiten mit nur 1,2,3,... als Inhalt und später mit Widgets auffüllen.

die Sachen mit class="inline" und class="cell" sind noch aus den Anfangszeiten von FTUI und möchte ich nur ungern noch weiterempfehlen.

[Tueftler1983]

Okay habe es jetzt mit table, td und trotzdem hinbekommen.

Code Auswählen Erweitern

<li data-row="5" data-col="1" data-sizex="5" data-sizey="2">
  <header>Garten</header>
<table>
<tr>
<td>
<div data-type="uwz"
  data-device="Unwetter"
  data-detail='["WarnUWZLevel_Color", "IconURL", "ShortText","WarnTime"]'
  data-max="5"
</td>
<td>
<div data-type="weather"
  data-device="Wetter"
  data-get="fc0_weatherDay"
  class="inline"></div>
<div data-type="label" data-device="Wetter" data-get="fc0_weatherDay" class="cell"></div>
<div data-type="label" data-device="Wetter" data-get="fc0_tempMin" data-unit="%B0C%0A" class="cell"></div>
<div data-type="label" data-device="Wetter" data-get="fc0_tempMax" data-unit="%B0C%0A" class="cell"></div>
</td>
<td>
<div data-type="weather"
  data-device="Wetter"
  data-get="fc1_weatherDay"
  class="inline"></div>
<div data-type="label" data-device="Wetter" data-get="fc1_weatherDay" class="cell"></div>
<div data-type="label" data-device="Wetter" data-get="fc1_tempMin" data-unit="%B0C%0A" class="cell"></div>
<div data-type="label" data-device="Wetter" data-get="fc1_tempMax" data-unit="%B0C%0A" class="cell"></div>
</td>
<td>
<div data-type="weather"
  data-device="Wetter"
  data-get="fc2_weatherDay"
  class="inline"></div>
<div data-type="label" data-device="Wetter" data-get="fc2_weatherDay" class="cell"></div>
<div data-type="label" data-device="Wetter" data-get="fc2_tempMin" data-unit="%B0C%0A" class="cell"></div>
<div data-type="label" data-device="Wetter" data-get="fc2_tempMax" data-unit="%B0C%0A" class="cell"></div>
</td>
<td>
<div data-type="label" class="inline">Temperatur</div>
<div data-type="label"
data-device="ESP2_DHT22"
data-get="temperature"
data-unit="&deg;C"
class="big"></div>
</div>
<div data-type="label" class="inline">Luftfeuchte</div>
<div data-type="label"
data-device="ESP2_DHT22"
data-get="Humidity"
data-unit="%"
class="big"></div>
<td/>
<td>
<div data-type="label" class="inline">Pool</div>
<div data-type="label"
data-device="Pool"
data-get="wasser_corr"
data-unit="&deg;C"
class="big"></div>
<div data-type="label"
data-device="Pool"
data-get="PH"
class="big"></div>

<td/>
<td>
<div data-type="switch"
            data-device="d_GartenL"
            data-get="state"
data-set-on="toggle"
data-states='["on","off","toggle"]'
data-colors='["#ff0000","#00ff00","fffa02"]'
    ></div>
<div data-type="label" class="inline">Gaten Licht</div>
<td/>
</tr>
</table>

</li>