Hallo zusammen,
zur Zeit bastele ich am FTUI (eval 2.2) mit sehr starker Anlehnung hieran (https://forum.fhem.de/index.php/topic,37378.msg418985.html#msg418985).
Im Anhang ein screenshot der Hauptseite und die entsprechende index.html.
Das Umschalten der einzelnen Seiten habe ich mich pagebuttons im unteren Teil der Seite realisiert.
Nun würde ich gerne in der Kopfzeile die Uhrzeit und das Datum fest stehen haben, die Daten daneben (im screenshot die Daten zur Photovoltaikanlage) sollen aber je nach über die pagebuttons gewählter Seite andere sein.
Wenn ich den Abschnitt aber mit in die aufzurufenden Seiten packe (z.B. Wetterseite <div class="page" id="wetter"></div>) rutschen die Sachen in die zweite Zeile, da der "Hauptteil" in der index.html ja erst in der zweiten Zeile beginnt.
An dieser Stelle komme ich bisher nicht weiter und weiß nicht, wie ich die Daten in die erste Zeile bekomme...kann man das so überhaupt umsetzen?
Ich hoffe, ihr versteht, was ich meine...
Danke schonmal für jegliche Hilfe!
Gruß
Andreas
man braucht doch nur in der index.html im Haupteil das <li auf row 1 setzen und die Y-Größe +1 setzen, nachdem man die beiden <li mit row="1" in die Sub-Page verlagert hat
<ul>
<!-- Kopfzeile -->
<!-- nach home.html verlagert -->
<!-- Hauptteil -->
<li data-row="1" data-col="1" data-sizex="12" data-sizey="7">
<div class="page" id="home"></div>
<div class="page" id="raeume"></div>
...
Guten Morgen,
danke für die Antwort, Mario. Das hab ich soweit verstanden, wenn man die komplette Kopfzeile verlagern möchte...ABER...
eigentlich möcht ich den Teil mit Uhrzeit/Datum
<li data-row="1" data-col="1" data-sizex="4" data-sizey="1">
<div data-type="clock" data-format="H:i" class="bigplus centered inline top-space right-space-2x"></div>
<div data-type="clock" data-format="d. F Y" class="bigplus centered inline top-space"></div>
</li>
"fest" in der index.html behalten und nicht jeweils in die einzelnen Unterseiten verlagern. Der bleibt immer gleich, und dann müsste der Teil ja nicht jedes Mal wieder neu aufgerufen werden, oder?
Verlagern, weil Möglichkeit zum Ändern, möchte ich nur diesen Teil
<li data-row="1" data-col="5" data-sizex="8" data-sizey="1" style="background-color:#404040">
<div data-type="label" class="inline big top-space-10px">PV:</div>
<div data-type="label" data-device="httpmod_piko" data-get="Ausgangsleistung" data-unit=" W" class="big thin inline top-space-10px right-space-2x"></div>
<div data-type="label" class="inline big top-space-10px left-space-2x">HAUS:</div>
<div data-type="label" data-device="httpmod_senec_online" data-get="consumption_now" data-fix="3" data-unit=" kW" class="big thin inline right-space-2x top-space-10px"></div>
<div data-type="label" class="inline big top-space-10px left-space-2x">AKKU:</div>
<div data-type="label" data-device="httpmod_senec_akku" data-get="Akku-Füllstand" data-unit=" %" class="big thin inline top-space-10px"></div>
</li>
Gruß
Andreas
Sowas habe ich mir schon beinahe gedacht :)
Dann würde ich versuchen die Uhr-Kachel wieder in die Index Seite zu schieben, aber diesmal in ein eigenes Gridster-div und hoffen, dass sich beide Gridster in der richtigen Reihenfolge überlagern. Ggf. muss das grosse Gridster an der Stelle, wo die Uhr ist etwas Transparenz verpasst bekommen.
Ok, dann werd ich nacher mal testen und versuchen, deine Tipps umzusetzen...
Danke nochmal!
Gruß
Andreas
Hallo,
greife hier mal auf, besteht die Möglichkeit den "data-load" so anzupassen das man mehrere ids angeben kann? So könnte man zum Beispiel die komplette row 1 und die komplette col1 also Menü nutzen und individuelle Teile per class page austauschen. Die Content müsste dann natürlich in der selben contentxx.html verfasst werden.
Habe so als Idee mal was schnell zusammenkopiert.
<body>
<div class="gridster">
<ul>
<li class="halbTransparent border-left border-right" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
<header> Räume </header>
<div data-type="pagebutton"
data-url="#page_home.html"
<!-- data-load könnte dann so aussehen oder aber data-loads wie bei states oder icons etc -->
data-load='["#content_xyz","#content_home"
data-off-background-color="transparent"
data-off-color="#606060"
data-on-background-color="blue"
data-on-color="#222222"
data-active-pattern=".*#page_home.html"
data-icon="fa-home"
class="default top-space">
</div>
</li>
<li class="halbTransparent border-left border-right" data-row="1" data-col="2" data-sizex="1" data-sizey="1">
<header class="headerTransparent">Unwetter</header>
</li>
<!-- Hier wäre dann ein individueller Block der "#conten_test" aufruft -->
<li class="halbTransparent border-left border-right" data-row="1" data-col="2" data-sizex="2" data-sizey="1">
<div class="page" id="content_test"></div>
</li>
<!-- Hier wieder fester Content -->
<li class="halbTransparent border-left border-right" data-row="1" data-col="5" data-sizex="3" data-sizey="1">
<header class="headerTransparent">Uhrzeit</header>
</li>
<li class="halbTransparent border-left border-right" data-row="2" data-col="1" data-sizex="1" data-sizey="1">
<div data-type="pagebutton"
data-url="#page_content2.html"
data-load="#content2"
data-off-background-color="transparent"
data-off-color="#606060"
data-on-background-color="#606060"
data-on-color="#222222"
data-active-pattern=".*#page_content2.html"
data-icon="oa-scene_livingroom"
class="prefetch top-space">
</div>
</li>
<li class="halbTransparent border-left border-right" data-row="3" data-col="1" data-sizex="1" data-sizey="1">
<div data-type="pagebutton"
data-url="#page_content3.html"
data-load="#content3"
data-off-background-color="transparent"
data-off-color="#606060"
data-on-background-color="#606060"
data-on-color="#222222"
data-active-pattern=".*#page_content3.html"
data-device="ftuitest"
data-states='["0","1"]'
data-icons='["fa-sliders","fa-sliders activate"]'
class="prefetch top-space">
</div>
</li>
<li data-row="2" data-col="2" data-sizex="7" data-sizey="5">
<div class="page" id="content_home"></div>
<div class="page" id="content2"></div>
<div class="page" id="content3"></div>
</li>
</ul>
</div>
</body>
Die content_home.html könnte dann so aussehen:
<html>
<title>FHEM</title>
<head>
<!--
/* FHEM tablet ui */
/*
* first page
* -->
</head>
<body>
<!-- Erster Content -->
<div class="page" id="content_home">
<div class="gridster">
<ul>
<li class="Transparent" data-row="1" data-col="1" data-sizex="1" data-sizey="1">
</li>
<li class="halbTransparent border-left border-right" data-row="2" data-col="1" data-sizex="1" data-sizey="1">
</li>
</ul>
</div>
</div>
<!-- zweiter Content -->
<div class="page" id="content_test">
<div class="gridster">
<ul>
<li class="Transparent" data-row="1" data-col="1" data-sizex="2" data-sizey="1">
<header class="headerTransparent">Raumtemperatur</header>
</li>
</ul>
</div>
</body>
</html>
So müsste man keinen Content wiederholen mehrfach laden etc.
Weiss nicht ob es überhaupt möglich ist. Die Idee kam mir wo ich auch gerade die pagetab auf pagebutton umstelle.
Gruß
Micha
Wäre ein Versuch wert.
Man müsste im pagebutton um das load eine for each Schleife drum herum bauen.
Hallo Mario,
wollte noch kurz Rückmeldung zu deinem Vorschlag mit den zwei gridstern und der Transparenz geben.
Klappt soweit wunderbar. Man muss aber aufpassen, dass man die Transparenz sowohl in der index.html als auch jeweils in den Unterseiten an den richtigen Stellen setzt, damit Uhr und Datum sichtbar bleiben.
Dann muss man noch die Größen der einzelnen <li>-Abschnitte passend wählen und diese positionieren, damit die sich ordentlich "zusammenpuzzeln"...
Danke nochmal für den entscheidenden Hinweis!
Gruß
Andreas