FTUI 2.5 - Sheet > Row > Cell

[tomster]

Servus setstate,

nach anfänglicher Euphorie ob einer Darstellung mittels Sheet > Row > Cell muss ich gestehen, dass diese langsam Frustration weicht. Allerdings vermute ich den Grund hierfür bei mir. Irgendwie verstehe ich entweder die Syntax nicht, oder aber das funktioniert nur, wenn ALLE cells die exakt gleiche "Zeichenlänge" (wäre ja bei einzelnen Symbolen fast so) haben.
Mein Versuch mit unten stehendem Code reiht zwar alle Widgets einer Reihe aneinander, macht aber keine Abstände zwischen den Widgets. Die 2. Reihe sieht genauso aus, ist aber auf Grund unterschiedlicher Werte in der Gesamtlänge anders. Somit haut es auch mit Abstandsdefinitionen wie left-space oder right-space nicht hin. Die einzelnen Widgets wollen einfach nicht von Zeile zu Zeile genau untereinander stehen. Hab nun ich Deine Aussage falsch verstanden und Sheet > Row > Cell ist gar kein table-Ersatz, oder mach ich etwas falsch?

Code Auswählen Erweitern


<div class="sheet">
<div class="row rank1">
        <div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_01_date_weekday" class="cell left-align calendar"></div>
        <div data-type="weather" data-device="Wetter" data-imageset="meteocons" data-get="forecast_simpleforecast_forecastday_01_icon" class="cell left-align calendar tiny"></div>
        <div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_01_high_celsius" class="cell left-align calendar"></div>
        <div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_01_low_celsius" class="cell left-align calendar"></div>
        <div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_01_avewind_dir" class="cell left-align calendar"></div>
        <div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_01_avewind_kph" class="cell left-align calendar"></div>
        <div data-type="label" class="cell left-align calendar">km/h</div>
        </div>
<div class="row rank2">
        <div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_02_date_weekday" class="cell left-align calendar"></div>
        <div data-type="weather" data-device="Wetter" data-imageset="meteocons" data-get="forecast_simpleforecast_forecastday_02_icon" class="cell left-align calendar tiny"></div>
        <div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_02_high_celsius" class="cell left-align calendar"></div>
        <div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_02_low_celsius" class="cell left-align calendar"></div>
        <div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_02_avewind_dir" class="cell left-align calendar"></div>
        <div data-type="label" data-device="Wetter" data-get="forecast_simpleforecast_forecastday_02_avewind_kph" class="cell left-align calendar"></div>
        <div data-type="label" class="cell left-align calendar">km/h</div>
        </div>
</div>

Kannst Du etwas Licht in die Angelegenheit bringen?
Danke & LG,
Tom

[moonsorrox]

ich habe nu auch echt kein Bock mehr...
Für heute bin ich erledigt... mal sehen ob sich morgen wieder Lust weiter zu machen aufbaut 

[Standarduser]

Vielleicht solltest Du mal Row > Col ausprobieren, statt Row > Cell. Bei Col kannst Du die Spaltenbreite angeben.
Bin gerade zufällig darauf gestoßen, habe es aber nicht ausprobiert: https://github.com/knowthelist/fhem-tablet-ui#format

[tomster]

Das isses! Danke Standarduser!
Muss ich wohl nur noch anpassen, damit ich alle meine Spalten unterbringe.
Da lag die Fehlerursache Mal wieder 50cm vor dem Monitor...

Sorry, wenn mein Posting oben etwas "negativ" geklungen hat. War aus der Situation heraus...

[setstate]

Beim Sheet > Row > Cell Layout gehen nur gleiche Anzahl der Zellen und alle gleiche Breite. Wie in einem Spreadsheet-Tool z.B. Excel. Mergen von Zellen gibt es hier aber nicht. Man kann also nicht in der ersten Reihe 2 Zellen haben und in der 3. Reihe 3 Zellen. Wenn man das so bauen würde, würden die 2 Zellen der 2. Reihe über den Zelle 1 und 2 der 3.Reihe liegen

1 2
1 2 3

Die Breite der Zellen kann man aber ändern, indem man cell-1-2 (50%) oder cell-50 angibt. Aber immer innerhalb eine Spalte gleiche Breite !!! Wenn man unterschiedliche Breiten braucht, muss man ein neues Sheet anfangen, dann kann man wieder andere Cell-Breiten angeben.
Oder man nutzt das Row > Col Layout, dort sind unterschiedliche Breiten in jeder Reihe möglich. Beim Row > Col Layout werden aber die Reihen nicht so schön gleichmässig auf die Kachel-Höhe verteilt, wie beim Sheet > Row > Cell Layout.

[tomster]

Danke setstate!

Das mit cell-1-2, etc.  ist mir beim Studium des CSS inzwischen auch untergekommen.
Verzeih mir bitte meinen etwas harschen Ton im OP, aber zu diesem Zeitpunkt war ich echt gefrustet. Ich kann mich nur nochmal entschuldigen.

Nachdem ich mich aber ein bissl tiefer eingearbeitet habe, muss ich - trotz des "zerschossenen" Layouts nach dem Update - unumwunden zugeben:
Das FTUI ist mächtig geworden! Seeehr mächtig!
Danke, Danke, Danke für Deine Arbeit. An dieser Stelle darf ich deshalb nochmal auf folgenden Link verweisen:
https://github.com/knowthelist/fhem-tablet-ui/blob/master/README.md#donation

[tomster]

Kurzes Update:

Sheet->Row->Col funktioniert einwandfrei! Ich musste zwar noch ein paar weitere Styles (col-5, col-1-12, col-15, etc.) definieren, aber danach hatte ich eine wunderbar formatierte Tabellendarstellung. Kleiner Tipp hierzu:
Definiert Euch im fhem-tablet-ui.css bei den entsprechenden Style-Einträgen für die Erstellung einfach eine semitransparente background-color, dann seht ihr genau, ob die Spaltenbreite für Eure Widget-Outputs passt oder nicht. Ohne das fand ich das "Debugging" extrem schwer.
Beispiel:

Code Auswählen Erweitern


.col-5-6 {
    width: 83% !important;
    background-color: rgba(255,255,200,0.4);
}
Kommt danach natürlich wieder raus aus dem Stylesheet

[moonsorrox]

ich habe mir jetzt mal ein Sheet > Row > Cell Gerüst gebaut welches eigentlich schon ganz gut aussieht.
Folgende Frage, ich kann ja die Zellen mit % versehen z.B. cell-20, cell-50 geht das auch bei row..?

Ich bekomme die Formatierung noch nicht ganz so hin wie ich es möchte.
1. möchte ich gern das Circle Menü zentriert haben, gelingt mir aber noch nicht so richtig, habe ich mit den align Werten gespielt aber bekomme ich nicht ganz hin. Das Problem ist die Schrift darunter "Position" kann ich nicht hin und her schieben so das die mittig unter dem Circlemenü ist.

EDIT:// ich habe da "top-align" gefunden 
2. die Schrift unter den jeweiligen Button etwas höher, damit sie besser zugeordnet sind.. kann ich das mit class="" erreichen oder eben wenn es geht mit den Prozentangaben der row, was ist da besser zu händeln

Hier mal mein Menü und der Screenshot:

Code Auswählen Erweitern


<li data-row="3" data-col="7" data-sizex="4" data-sizey="4" class="semitransparent3d">
<header class="semitransparent3dtable">Rollladen - Schlafzimmer</header>
<div class="sheet">
<!-- ============= Reihe 1 =========== -->
<div class="row">
<div class="cell-20" data-type="label"></div>

<div class="cell-30"
data-type="push"
data-device="RollladenSZ"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-icon="fa-chevron-up"
data-on-color="#DC143C"
data-off-color="#808080"
data-background-icon="fa-square-o"
data-set-on="on">
</div>

<div class="cell-50"
data-type="push"
data-cmd="set"
data-device="RollladenSZ"
data-set-on="75"
data-icon=""
data-on-color="#E6FF57"
data-off-color="#808080"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-background-icon="fa-circle-thin">75
</div>

</div>
<!-- ============= Reihe 2 =========== -->
<div class="row">
<div class="cell-20" data-type="label"></div>

<div class="cell-30 medium narrow whiter" data-type="label">Hoch</div>

<div class="cell-50 medium narrow whiter" data-type="label">Home 75 %</div>
</div>
<!-- ============= Reihe 3 =========== -->
<div class="row">
<div class="cell-20"
data-type="circlemenu"
data-item-width="52"
data-item-hight="52"
data-device="RollladenSZ"
data-direction="right-half"
data-circle-radius="90">
<ul>
<li class="circleborder"><div data-type="label" data-device="RollladenSZ"></div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="on" data-icon="">⇧</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="75" data-icon="">75</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="50" data-icon="">50</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="25" data-icon="">25</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="75" data-icon="">⩸</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="off" data-icon="">⇩</div></li>
</ul>
</div>

<div class="cell-30"
data-type="push"
data-device="RollladenSZ"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-icon="fa-minus"
data-on-color="#DC143C"
data-off-color="#808080"
data-background-icon="fa-square-o"
data-set-on="stop">
</div>

<div class="cell-50"
data-type="push"
data-cmd="set"
data-device="RollladenSZ"
data-set-on="50"
data-icon=""
data-on-color="#E6FF57"
data-off-color="#808080"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-background-icon="fa-circle-thin">50
</div>
</div>
<!-- ============= Reihe 4 =========== -->
<div class="row">
<div class="cell-20 medium narrow ligthblue" data-type="label">Position</div>

<div class="cell-30 medium narrow whiter" data-type="label">Stop</div>

<div class="cell-50 medium narrow whiter" data-type="label">Beschattung 50 %</div>
</div>
<!-- ============= Reihe 5 =========== -->
<div class="row">
<div class="cell-20" data-type="label"></div>

<div class="cell-30"
data-type="push"
data-device="RollladenSZ"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-icon="fa-chevron-down"
data-on-color="#DC143C"
data-off-color="#808080"
data-background-icon="fa-square-o"
data-set-on="off">
</div>

<div class="cell-50"
data-type="push"
data-cmd="set"
data-device="RollladenSZ"
data-set-on="25"
data-icon=""
data-on-color="#E6FF57"
data-off-color="#808080"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-background-icon="fa-circle-thin">25
</div>
</div>
<!-- ============= Reihe 6 =========== -->
<div class="row">
<div class="cell-20" data-type="label"></div>

<div class="cell-30 medium narrow whiter" data-type="label">Runter</div>

<div class="cell-50 medium narrow whiter" data-type="label">Beschattung 25 %</div>
</div>
</div>

</li>

[setstate]

Probiere mal immer ein Buttun und dessen Text zusammen in eine gemeinsame Cell einzuschließen.

Code Auswählen Erweitern


<div class="cell">
  <div data-type="switch" ... </div>
  <div>Text</div>
</div>


[moonsorrox]

das hatte ich am Anfang so, aber das geht gar nicht, der Text landet überall nur nicht darunter... bitte bedenken es ist das Circlemeü, evtl. verhält sich das dann anders...?

Deshalb habe ich alles in eigene cells gepackt um es dann richtig zu positionieren, aber das bekomme ich eben beim Text unter dem Circlemenü  nicht hin
Diese Klassen habe ich getestet, mal landet der Text im Kreis, mal rechts daneben und verschiebt alles andere nach rechts, dann wieder schräg rechts drüber, aber niemals drunter und schon gar nicht zentriert
Alignment: left-align, right-align, top-align, bottom-align

nur der relevante Teil aus meinem Code, jetzt so mit dem Text wie du es vorgeschlagen hast

Code Auswählen Erweitern

<div class="row">
<div class="cell-20 top-align"
data-type="circlemenu"
data-item-width="55"
data-item-hight="55"
data-device="RollladenSZ"
data-direction="right-half"
data-circle-radius="90">
<ul>
<li class="circleborder"><div data-type="label" data-device="RollladenSZ"></div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="on" data-icon="">⇧</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="75" data-icon="">75</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="50" data-icon="">50</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="25" data-icon="">25</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="75" data-icon="">⩸</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="off" data-icon="">⇩</div></li>
</ul>
</div>
<div class="left-align">Text</div>

[setstate]

Da ist ja das Circlemenu schon die cell. Ich meine das eher so

Code Auswählen Erweitern


<div class="cell-20 top-align" >
<div data-type="circlemenu"
data-item-width="55"


[moonsorrox]

das hatte ich schon alles, aber schau mal bitte den Screenshot an... ich habe 3 Spalten und 6 Reihen definiert und in jeder Cell ist ein Teil drin... die ganze rechte Seite (12 Teile) funktioneirt
Ganz links die Spalte die ich mit cell-20 definiert ist OK dort habe ich mehrere Leerfelder drin wo gar nichts drin steht um die Reihen/Spalten zu erhalten (du hast ja geschrieben das es sonst nicht geht)
hier kann ich das circlemenü welches in der 3 Reihe ist nicht positionieren und der Text "Position" klebt immer links dran und ist auch nicht so zu positionieren (center z.B.) wie der andere Text, also muss das circle irgend etwas verschieben.

Es heißt also im Klartext ich bekomme das Circlemenü und den Text dazu nicht richtig mittig zueinander positioniert...

Code hänge ich nochmal komplett dran
Vielen Dank fürs drauf schauen

Code Auswählen Erweitern

<li data-row="3" data-col="7" data-sizex="4" data-sizey="4" class="semitransparent3d">
<header class="semitransparent3dtable">Rollladen - Schlafzimmer</header>
<div class="sheet">
<!-- ============= Reihe 1 =========== -->
<div class="row">
<div class="cell-20" data-type="label"></div>

<div class="cell-30"
data-type="push"
data-device="RollladenSZ"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-icon="fa-chevron-up"
data-on-color="#DC143C"
data-off-color="#808080"
data-background-icon="fa-square-o"
data-set-on="on">
</div>

<div class="cell-50"
data-type="push"
data-cmd="set"
data-device="RollladenSZ"
data-set-on="75"
data-icon=""
data-on-color="#DC143C"
data-off-color="#808080"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-background-icon="fa-circle-thin">75
</div>

</div>
<!-- ============= Reihe 2 =========== -->
<div class="row">
<div class="cell-20" data-type="label"></div>

<div class="cell-30 top-align large narrow whiter" data-type="label">Hoch</div>

<div class="cell-50 top-align medium narrow whiter" data-type="label">Home 75 %</div>
</div>
<!-- ============= Reihe 3 =========== -->
<div class="row">
<div class="cell-20 top-align"
data-type="circlemenu"
data-item-width="55"
data-item-hight="55"
data-device="RollladenSZ"
data-direction="right-half"
data-circle-radius="90">
<ul>
<li class="circleborder"><div data-type="label" data-device="RollladenSZ"></div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="on" data-icon="">⇧</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="75" data-icon="">75</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="50" data-icon="">50</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="25" data-icon="">25</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="75" data-icon="">⩸</div></li>
<li><div data-type="push" data-cmd="set" data-device="RollladenSZ" data-set-on="off" data-icon="">⇩</div></li>
</ul>
</div>

<div class="cell-30"
data-type="push"
data-device="RollladenSZ"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-icon="fa-minus"
data-on-color="#DC143C"
data-off-color="#808080"
data-background-icon="fa-square-o"
data-set-on="stop">
</div>

<div class="cell-50"
data-type="push"
data-cmd="set"
data-device="RollladenSZ"
data-set-on="50"
data-icon=""
data-on-color="#DC143C"
data-off-color="#808080"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-background-icon="fa-circle-thin">50
</div>
</div>
<!-- ============= Reihe 4 =========== -->
<div class="row">
<div class="cell-20 top-align large narrow ligthblue" data-type="label">Position</div>

<div class="cell-30 top-align large narrow whiter" data-type="label">Stop</div>

<div class="cell-50 top-align medium narrow whiter" data-type="label">Beschattung 50 %</div>
</div>
<!-- ============= Reihe 5 =========== -->
<div class="row">
<div class="cell-20" data-type="label"></div>

<div class="cell-30"
data-type="push"
data-device="RollladenSZ"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-icon="fa-chevron-down"
data-on-color="#DC143C"
data-off-color="#808080"
data-background-icon="fa-square-o"
data-set-on="off">
</div>

<div class="cell-50"
data-type="push"
data-cmd="set"
data-device="RollladenSZ"
data-set-on="25"
data-icon=""
data-on-color="#DC143C"
data-off-color="#808080"
data-on-background-color="#4169e1"
data-off-background-color="#4169e1"
data-background-icon="fa-circle-thin">25
</div>
</div>
<!-- ============= Reihe 6 =========== -->
<div class="row">
<div class="cell-20" data-type="label"></div>

<div class="cell-30 top-align large narrow whiter" data-type="label">Runter</div>

<div class="cell-50 top-align medium narrow whiter" data-type="label">Beschattung 25 %</div>
</div>
</div>

</li>

[tomster]

Ich glaube, setstate meint so wie auf dem Bild.

Überleg Dir aber Mal die Anordnung in eine Art Table mit sheet row col zu packen. Dann stehen die Widget-Kombos auch wunderbar untereinander

[moonsorrox]

Überleg Dir aber Mal die Anordnung in eine Art Table mit sheet row col zu packen. Dann stehen die Widget-Kombos auch wunderbar untereinander

vielen Dank für deine Unterstützung 
schau mal in meinen Code, ich habe es doch in sheet row col nur eben in mehreren Reihen... heißt jeder Teil ob nun Button oder Text in einer celle

Ich habe andere Kombinationen wo es wunderbar funktioniert nur in dem Bereich des circlemenüs nicht..!
Schau mal auf meinen Screenshot ich habe mal ein anderes Icon genommen und das Circlemenü raus und schon funktioniert es..

wenn du den Text direkt darunter schreibst landet er immer rechts daneben, da kann man formatieren was man will, ist das bei dir anders..?

[setstate]

Da hat das Circlemenu bestimmt noch so blöde feste Offsets drin, die ich weiter oben meinte. Dumme Workarounds, damit es irgendwie in Linie liegt.
Das entferne ich noch, damit sich alle Widgets gleich alignen.