Elemtente sind nicht in zugewiesender Spalte/Reihe + Probleme mit Mobil-Ansicht

[freetz]

Hallo zusammen,

erst einmal an ganz herzliches Dankeschön an den/die Programmierer von FTUI - das ist genau das, was ich schon immer für FHEM gesucht habe!

Ich habe nun ausgehend von der Beispielkonfiguration folgende HTML-Seite erstellt, quasi eigentlich nur eine Zeile übernommen und entsprechend vervielfältigt und die row/col-Werte angepasst:

Code Auswählen Erweitern

<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">
        <header>KLINGEL</header>
        <div data-type="switch" data-device="Klingel" data-get-on="1" data-get-off="0" data-set-on="1" data-set-off="0" data-icon="fa-power-off" class="center"></div>
</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">
        <header>THERME</header>
        <div data-type="switch" data-device="Therme" data-get-on="1" data-get-off="0" data-set-on="1" data-set-off="0" data-icon="fa-power-off" class="center"></div>
</li>
<li data-row="2" data-col="1" data-sizex="1" data-sizey="1">
        <header>L&Uuml;FTER</header>
        <div data-type="switch" data-device="Luefter" data-get-on="1" data-get-off="0" data-set-on="1" data-set-off="0" data-icon="fa-power-off" class="center"></div>
</li>
<li data-row="3" data-col="1" data-sizex="2" data-sizey="2">
        <header>KINDERZIMMER</header>
        <div data-type="thermostat" data-device="MAX_0588f2" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" class="cell center"></div>
</li>
<li data-row="3" data-col="2" data-sizex="2" data-sizey="2">
        <header>WOHNZIMMER</header>
        <div data-type="thermostat" data-device="MAX_095094" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" class="cell center"></div>
</li>
<li data-row="3" data-col="3" data-sizex="2" data-sizey="2">
        <header>SCHLAFZIMMER</header>
        <div data-type="thermostat" data-device="MAX_090a6c" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" class="cell center"></div>
</li>
<li data-row="3" data-col="4" data-sizex="2" data-sizey="2">
        <header>FREDERIKS ARBEITSZIMMER</header>
        <div data-type="thermostat" data-device="MAX_0748f5" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" class="cell center"></div>
</li>
<li data-row="3" data-col="5" data-sizex="2" data-sizey="2">
        <header>INGRIDS ARBEITSZIMMER</header>
        <div data-type="thermostat" data-device="MAX_0b7c62" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" class="cell center"></div>
</li>
</ul>
</div>
</body>
</html>

Nach meinem Verständnis sollten in der ersten Zeile links oben die drei Schalter Klingel, Therme und Lüfter (letzterer eine Zeile tiefer unter Klingel) erscheinen, dann darunter in einer Zeile die Temperatur-Anzeigen der einzelnen Räume.

Aussehen tut's aber so wie im Anhang. Kann mir jemand sagen, was ich da falsch gemacht habe?

Darüber hinaus ist die mobile Anzeige auf meinem iPhone 5S nur in der Horizontalen halbwegs korrekt, in der Vertikalen sind die Temperatur-Skalen losgelöst von den grauen Kacheln. Gibt es da Tipps, wie man die Oberfläche bauen sollte, das sie auch auf Mobilgeräten halbwegs sinnvoll benutzbar ist?

Vielen Dank schon mal im Voraus und nochmals danke für diese tolle Oberfläche,


F.

[setstate]

Es sind sehr viele Doppelvergaben vorhanden. Das Resultat ist dann eher zufällig.
Eine gute Vorstellung bekommt man, wenn man sich das Ganze auf Kästchenpapier vorstellt, und jedes Gridsterelement einzeichnet. Spalten 1,2,3,4 oben auftragen, links Zeile 1,2,3,4,...
Dann die Elemente rein: 1x1 Boxen hast du und 2x2. Die 2x2 Elemente überlagern sich sofort. Das musst du verhindern. Also kommt z.B. das nächste Element nicht bei col3, sondern bei col4: col3 + 2 = col5

[freetz]

...ah, danke! Den Fehler sehe ich jetzt in den Spalten, aber ich verstehe Deinen letzten Satz noch nicht: Kommt das nächste Element dann bei col4 oder col5?
Ich habe jetzt in Row 3 (Row 1+2 sind ja von den drei 1x1 Kacheln verwendet, richtig?) die data-col-Werte 1,3,5,7 und 9, aber auch damit haut es nicht hin. Selbst wenn ich Row 3 auf nur zwei Kacheln á 2x2 reduziere, landet die zweite Kachel immer rechts neben den vier 1x1 Kacheln, egal, ob ich dann als data-col-Wert 2,3,4 oder 5 angebe...

[freetz]

Habe jetzt noch etwas experimentiert, so wie es scheint, müssen alle Zeilen die gleiche Länge haben, damit es nicht zu Verschiebungen kommt.
Ich bin darauf gekommen, als ich alle Kacheln auf 1x1 gesetzt habe und dann in drei Zeilen positionieren wollte. Das Ergebnis der Kacheln aus Zeile 3 war ähnlich dem obigen Screenshot. Erst als ich hinter den beiden Kacheln in Zeile 1 und 2 noch eine Leer-Kachel mit entsprechender Breite eingefügt hatte, waren die Elemente richtig positioniert. Das Ganze sieht jetzt so aus, wie im Anhang.

Im Prinzip ist das kein Problem, aber kann man die Leerkacheln auch nur in der Hintergrundfarbe anzeigen lassen, so dass sie eben nicht auffallen, wenn man sie nur als Positionierungs-Hilfe braucht?

Und dann bliebe noch die Frage, ob sich die Anzeige auf dem Handy im Hochformat noch korrigieren lässt? In der Horizontalen sind zumindest die Anzeigeelemente in den korrekten Kacheln. Im Hochformat ist dann die Thermostat-Anzeige z.B. rechts außerhalb des Bildschirms. Ich frage nur deshalb noch mal nach, weil es ja eine Config-Option "apple-mobile-web-app-capable" gibt, die mich etwas hoffen lässt ...

Danke noch mal und Gruß,

Frederik

[freetz]

...hier noch mal zwei Screenshots vom Handy, einmal in der Vertikalen mit den "zerrissenen" Elementen, einmal in der Horizontalen, wo es funktioniert...