Zeilenumbruch / neue Zeile in Tablet UI, ich verzweifle mit HTML

Begonnen von B.Stromberg, 25 Oktober 2018, 23:42:06

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten1
Benutzer-Aktionen

B.Stromberg

25 Oktober 2018, 23:42:06 Letzte Bearbeitung: 25 Oktober 2018, 23:44:11 von B.Stromberg
Hallo!
Brauche mal wieder eure Hilfe.

Ich bin grade dabei meine Tablet UI aufzupolieren.

Im Moment scheitere ich an der Anordnung der Widgets. Diese sollen nach Erdgeschoss und Dachgeschoss angeordnet werden.

Aber egal was ich mit data-row="" oder data-col="" mache, ich komme nicht ans gewünschte Ziel!

Die Widgets SchlafzimmerOG, EsszimmerOG und Bad OG sollen in der 2. Reihe dargestellt werden und neben dem Menü Links soll auch diese eine Zeile frei bleiben wie in der ersten Reihe.

Kann mir bitte jemand dabei helfen?

Hier der Code:

Code Auswählen

<html>
<title>FHEM</title>
<head>
    <!--
     /* FHEM tablet ui */
     /*
     * second page
     
     <li data-row="1" data-col="1" data-sizex="14" data-sizey="9">
        <header><div data-type="label" class="medium orange">Cam Garten</div></header>
       
     *
     load this page via widget pagebutton
     
     
                                     
                <div data-type="pagebutton" data-url="#2_heating_etage_vm.html" data-load="#heating_etage_vm" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#2_heating_etage_vm.html)" data-icon="oa-sani_boiler_temp" class="top-space"></div>               
                <div data-type="label" class="darker">Heizung</div>
                </div>
               
                <div data-type="pagebutton" data-url="#2_heating_etage_temp.html" data-load="#heating_etage_temp" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#2_heating_etage_temp.html)" data-icon="oa-temp_temperature" class="top-space"></div>               
                <div data-type="label" class="darker">Temps</div>
               
                <div data-type="pagebutton" data-url="#2_heating_etage_charts.html" data-load="#heating_etage_charts" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*#2_heating_etage_charts.html)" data-icon="fa-line-chart" class="top-space"></div>               
                <div data-type="label" class="darker">Charts</div>
                </div>
     
    -->
</head>
<body>
<div class="page" id="1_heating">

<div class="gridster">
<ul>
<li data-row="1" data-col="2" data-sizex="3" data-sizey="5">       
<header><div data-type="label" class="medium orange">Wohnzimmer</div></header>
<div data-type="thermostat" data-device="MAX_0bf1e6" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" data-set="desiredTemperature"></div>
<header><div data-type="label" class="medium orange">Terassentuer</div></header>
<div data-type="push" data-device="Jalousie_Tuer,MAX_0579d5" data-icon="oa-fts_door_slide" data-get-on="!off" data-get-off="closed" data-off-background-color='["black"]' data-off-color="#808080" class="inline big"></div>
</li>
<li data-row="1" data-col="3" data-sizex="3" data-sizey="5">       
<header><div data-type="label" class="medium orange">Buero</div></header>
<div data-type="thermostat" data-device="MAX_09e750" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" data-set="desiredTemperature"></div>
</li>
<li data-row="1" data-col="4" data-sizex="3" data-sizey="5">
<header><div data-type="label" class="medium orange">Schlafzimmer</div></header>
<div data-type="thermostat" data-device="MAX_0c42e2" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" data-set="desiredTemperature"></div>
<header><div data-type="label" class="medium orange">Schlafzimmer Fenster</div></header>
<div data-type="symbol" data-device="MAX_09d9f5" data-get-on="!off" data-get-off="closed" class="inline big"></div>
</li>
<li data-row="1" data-col="5" data-sizex="3" data-sizey="5">
<header><div data-type="label" class="medium orange">Badezimmer</div></header>
<div data-type="thermostat" data-device="MAX_07e547" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" data-set="desiredTemperature"></div>
<header><div data-type="label" class="medium orange">Badezimmer</div></header>
<div data-type="symbol" data-device="MAX_07f4e4" data-get-on="!off" data-get-off="closed" class="inline big"></div>
</li>
<li data-row="1" data-col="6" data-sizex="3" data-sizey="5">
<header><div data-type="label" class="medium orange">Herrenzimmer</div></header>
<div data-type="thermostat" data-device="MAX_09e747" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" data-set="desiredTemperature"></div>
</li>
<li data-row="1" data-col="7" data-sizex="3" data-sizey="5">
<header><div data-type="label" class="medium orange">Kueche</div></header>
<div data-type="thermostat" data-device="MAX_0beff9" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" data-set="desiredTemperature"></div>
<header><div data-type="label" class="medium orange">Kueche Fenster</div></header>
<div data-type="symbol" data-device="MAX_09d231" data-get-on="!off" data-get-off="closed" class="inline big"></div>
</li>
<li data-row="1" data-col="8" data-sizex="3" data-sizey="5">
<header><div data-type="label" class="medium orange">Gaeste WC</div></header>
<div data-type="thermostat" data-device="MAX_0c4303" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" data-set="desiredTemperature"></div>
<header><div data-type="label" class="medium orange">Gaeste WC Fenster</div></header>
<div data-type="symbol" data-device="MAX_09d2d7" data-get-on="!off" data-get-off="closed" class="inline big"></div>
</li>
<li data-row="1" data-col="9" data-sizex="3" data-sizey="5">
<header><div data-type="label" class="medium orange">Flur</div></header>
<div data-type="thermostat" data-device="MAX_09f4b0" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" data-set="desiredTemperature"></div>
</li>
<li data-row="2" data-col="2" data-sizex="3" data-sizey="5">       
<header><div data-type="label" class="medium orange">EsszimmerOG</div></header>
<div data-type="thermostat" data-device="MAX_0bf08c" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" data-set="desiredTemperature"></div>
</li>
<li data-row="2" data-col="3" data-sizex="3" data-sizey="5">       
<header><div data-type="label" class="medium orange">BadOG</div></header>
<div data-type="thermostat" data-device="MAX_07e626" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" data-set="desiredTemperature"></div>
</li>
<li data-row="2" data-col="4" data-sizex="3" data-sizey="5">       
<header><div data-type="label" class="medium orange">SchlafzimmerOG</div></header>
<div data-type="thermostat" data-device="MAX_0bf082" data-valve="valveposition" data-get="desiredTemperature" data-temp="temperature" data-set="desiredTemperature"></div>
</li>
</li>
    </div>
    </div>
</body>
</html>


OdfFhem

#1
26 Oktober 2018, 03:34:38
Ich kann derzeit nichts testen, aber das Problem liegt wohl an der falschen Berechnung von data-row und data-col.

Bei der Berechnung müssen auch immer die Dimensionen der einzelnen Kacheln berücksichtigt werden. Im Code wird davon ausgegangen, dass jede Kachel die Größe 1x1 hat, was ja nicht wirklich stimmt.

Siehe auch den Wiki-Artikel zu gridster.

B.Stromberg

#2
26 Oktober 2018, 10:35:51
Hmmm....

gibt es denn da keine andere Möglichkeit?

Allerdings wenn man sich die Beispiele hier ansieht:

https://wiki.fhem.de/wiki/FTUI_Layout_Gridster

Sind unten ja auch unterschiedlich große Kacheln.

OdfFhem

#3
26 Oktober 2018, 18:38:27
Ich bin mir nicht ganz sicher, ob wir uns richtig verstehen ...

In Deinem Code gehst Du bei der Berechnung von data-row und data-col davon aus, dass jede Kachel eine Größe von 1x1 (Breite x Höhe) hat.
In Wirklichkeit hat jede Deiner Kacheln aber eine Größe von 3x5 (Breite x Höhe).

Um die gewünschte Darstellung zu erhalten, müssen die Parameter für die Kacheln korrekt berechnet werden:

statt
Code Auswählen

<li data-row="1" data-col="2" data-sizex="3" data-sizey="5">       
</li>
<li data-row="1" data-col="3" data-sizex="3" data-sizey="5">       
</li>
<li data-row="1" data-col="4" data-sizex="3" data-sizey="5">
</li>

<li data-row="2" data-col="2" data-sizex="3" data-sizey="5">       
</li>
<li data-row="2" data-col="3" data-sizex="3" data-sizey="5">       
</li>
<li data-row="2" data-col="4" data-sizex="3" data-sizey="5">       
</li>


eher
Code Auswählen

<li data-row="1" data-col="2" data-sizex="3" data-sizey="5">       
</li>
<li data-row="1" data-col="5" data-sizex="3" data-sizey="5">       
</li>
<li data-row="1" data-col="8" data-sizex="3" data-sizey="5">
</li>

<li data-row="6" data-col="2" data-sizex="3" data-sizey="5">       
</li>
<li data-row="6" data-col="5" data-sizex="3" data-sizey="5">       
</li>
<li data-row="6" data-col="8" data-sizex="3" data-sizey="5">       
</li>

B.Stromberg

#4
26 Oktober 2018, 22:14:15 Letzte Bearbeitung: 26 Oktober 2018, 22:17:33 von B.Stromberg
Hey cool, genau das war der Denkfehler bei mir...

So wie von dir angegeben funktioniert es...

finde ich im Wiki "blöd" erklärt

Danke!

Einen Tipp, wie ich bei den Fensterkontakten das Rechte und Linke Fenster ZUSAMMEN unter das Thermostat bekomme kannst du mir nicht auch noch geben, oder?

OdfFhem

#5
27 Oktober 2018, 08:33:06
Ich würde das Fenster aus dem Badezimmer einfach mal testweise ins Schlafzimmer kopieren.
Vielleicht klappt es dann schon ... das inline-Attribut ist ja zumindest schon mal gesetzt.
Ansonsten könnte man z.B. noch hbox verwenden ...

Zum "blöden" Wiki: Ich schaue es mir dort noch mal an und ergänze ggfls. einen expliziten Hinweis ...
Drucken
Nach oben Seiten1
Benutzer-Aktionen