FHEM Forum

Hallo,

ich möchte gerne mit meinen Tablet UI Seiten loslegen, verzweifele aber nun schlicht am Layout.

<li data-row="1" data-col="2" data-sizex="3" data-sizey="2">
       <header>Fahrzeiten</header>
<table class="tg">
   <tr>
     <th align =left class="tg-yw4l">Ziel</th>
     <th class="tg-yw4l">Normal</th>
     <th class="tg-yw4l">Aktuell</th>
   </tr>
   <tr>
     <td class="tg-yw4l">H</td>
     <td class="tg-yw4l"><div data-type="label" data-device="L2H" data-get="duration"></div></td>
     <td class="tg-yw4l"><div data-type="label" data-device="L2H" data-get="duration_in_traffic"></div></td>
   </tr>
   <tr>
     <td class="tg-yw4l">B</td>
     <td class="tg-yw4l"><div data-type="label" data-device="L2B data-get="duration"></div></td>
     <td class="tg-yw4l"><div data-type="label" data-device="L2B" data-get="duration_in_traffic"></div></td>
   </tr>
</table>
</li>

So würde ich einzelne Tabellen anlegen.


<li data-row="2" data-col="4" data-sizex="6" data-sizey="3">
        <header>WOHNZIMMER</header>
        <div class="container">
          <div class="left">
                <div data-type="thermostat" data-device="WohnzimmerHeizung_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="cell left-space"></div>
                <div data-type="thermostat" data-device="WohnzimmerHeizung2_Clima" data-valve="ValvePosition" data-get="desired-temp" data-temp="measured-temp" class="top-narrow left-space"></div>
          </div>
          <div class="right right-space">
                <div data-type="switch" data-device="PowerAV_Sw" class="cell"></div>
                <div data-type="label" class="">SchrankLicht</div>
                <div data-type="dimmer" data-device="HUEDevice1" data-get-on="!off" data-get-off="off" class="top-space-2x" ></div>
                <div data-type="label" class="cell">Philips</div>
          </div>

Bei diesem Beispiel tue ich mich total schwer mir das ganze vorstellen zu können und nach meinen Wünschen anzupassen. Gibt es irgendwo eine Seite wo das etwas besser beschrieben ist?

Ich habe den Sinn hinter den "Klassen" glaube ich noch nicht ganz verstanden.. Ich hatte mal HTML in der Schule.. ;-(

Vielen Dank für Hilfestellungen!

Christoph

Die Klassen sind auf der Github Seite beschrieben:
https://github.com/knowthelist/fhem-tablet-ui#format

vllt. kommst du hiermit besser klar...!  ;)
https://wiki.fhem.de/wiki/FHEM_Tablet_UI (https://wiki.fhem.de/wiki/FHEM_Tablet_UI)

Hallo,

danke für die Links. Die Github-Seite war noch etwas besser!

Ich habe jetzt noch folgendes Problem:

<div data-type="label" class="top-space" class="gray" class="cell">Rollo</div>
-> Hier passt der Abstand "top-space" - jedoch wird "gray" ignoriert!

<div data-type="label" class="gray" class="top-space" class="cell">Rollo</div>
-> Hier ist es andersherum: es passt die Farbe "gray" - jedoch wird "topspace" ignoriert!

Danke für Hinweise!
Christoph

<div data-type="label" class="top-space, gray, cell" >Rollo</div>

Hallo,

das Ergebnis ist leider das gleiche...

<li data-row="1" data-col="4" data-sizex="2" data-sizey="2">
    <header>Aussentemperatur</header>
    <div data-type="label" class="top-space, gray, cell">Temperatur</div>
    <div data-type="label" class="bigger" data-device="GV.ga.TF.Aussentemperatur" data-get="temperature" data-unit="&deg;C" class="top-space"></div>
    <div data-type="label" class="top-space" >Luftfeuchte</div>
    <div data-type="label" class="bigger" data-device="GV.ga.TF.Aussentemperatur" data-get="humidity" data-unit="%" class="top-space"></div>
</li>



Danke,
Christoph

Jedes Element, ganz gleich ob HTML oder Widget, darf nur ein mal class bekommen. Gibst du dieses Attribut mehrfach an, wird immer nur das erste genommen.
Um mehrere Klassen zuweisen zu können, nutzt du 1x class und fügst alle gewünschten Klassen per Leerzeichen getrennt ein.

...class="klasse1 klasse2 klasse3"

Hallo Standarduser!

Besten Dank!