Verteilte Inhalte eines Pagebuttons

Ulm32b · 09 November 2016, 23:41:41

Liebe Leute,
ich brauche mal einen kleinen Schubser zur Pagebutton-Umsetzung: Wie bringe ich die Inhalte eines Pagebuttons an verschiedenen Stellen des Hauptdokumentes unter? Etwas greifbarer formuliert in folgendem Beispiel:

In der Index.html definiere ich die Pagebuttons im mittleren Gridster-Element:

Code Auswählen


[...]
<title>FHEM-Tablet-UI</title>
</head>
<body>
<div class="gridster">
<ul>

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

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

<div class="cell inline">
                <div data-type="pagebutton" data-url="#page_content1.html" data-load="#content1" data-off-background-color="transparent" data-off-color="#606060" data-on-background-color="#606060" data-on-color="#222222" data-active-pattern="(.*index.html|.*#page_content1.html)" data-icon="fa-home" class="prefetch top-space"></div>
                <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="fa-music" class="prefetch top-space"></div>
                <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-icon="fa-sliders" class="prefetch top-space"></div>
            
</div>

</li>

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

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

<div class="page" id="content1"></div>
<div class="page" id="content2"></div>
<div class="page" id="content3"></div>

</ul>

</div>
</body>
</html>

Mit dem Homebutton (page_content1.html) möchte ich nun das linke und rechte Gridsterelement mit spezifischen Inhalten füllen. Das mittlere bleibt für die Pagebuttons reserviert.
Mit dem nächsten Pagebutton (page_content2.html) sollen das linke und rechte Gridsterelement mit anderen Inhalten gefüllt werden.
Die Inhalte der Subpages sind also nicht zusammenhängend.

Ich habe es z.B.versucht mit page_content1.html = ...

Code Auswählen


<!DOCTYPE html>
<html>
<title>FHEM</title>
<head>
</head>
<body>
<div class="page" id="content1">

<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="3" data-sizey="1">

<div class="container top-space inline wider">
<div data-type="switch" data-device="Garage_Nord_ist_oben" data-icon="fa-toggle-up" data-get-on="wahr" data-get-off="falsch"></div>
<div data-type="label" class="">Status Nord oben</div>
</div>

<div class="container top-space inline wider">
<div data-type="switch" data-device="Garage_Nord_ist_unten" data-icon="fa-toggle-down" data-get-on="wahr" data-get-off="falsch"></div>
<div data-type="label" class="">Status Nord unten</div>
</div>
</li>

<!--
        <li data-row="1" data-col="2" data-sizex="4" data-sizey="1">
-->

        <li data-row="1" data-col="3" data-sizex="3" data-sizey="1">

<div class="top-space container inline wider">

<div	data-type="switch" data-device="Radio_1" data-icon="fa-music"></div>
<div data-type="label">1Live</div>

<div data-type="playstream" data-device="Radio_1" class="hide" data-url="http://1live.akacast.akamaistream.net/7/706/119434/v1/gnl.akacast.akamaistream.net/1live"></div>
     
</div>

<div class="top-space container inline wider">

<div	data-type="switch" data-device="Radio_2" data-icon="fa-info"></div>
<div data-type="label">B5 Aktuell</div>

     <div data-type="playstream" data-device="Radio_2" class="hide" data-url="http://br-mp3-b5aktuell-s.akacast.akamaistream.net/7/773/142694/v1/gnl.akacast.akamaistream.net/br_mp3_b5aktuell_s"></div>

</div>

</li>
</ul>
</div>

</div>
</body>
</html>

Diese und ähnliche Konstellationen funktionieren aber nicht.

Ein anderer Ansatz könnte lauten, einem Pagebutton mehrere Subpages zuzuordnen, die dann an definierter Stelle im Hauptdokument geladen werden. Wie aber lautet dann die Deklaration des Pagebuttons?

Mit Pagetab war das alles kein Problem. Wie geht es aber mit Pagebutton?
Please help.
Ulm 32b

setstate · 10 November 2016, 07:10:07

Multiple Elemente, die ausgetauscht werden sollen, kann pagebutton nicht behandeln.
Du kannst nur probieren, wie bei Pagetab, dass sich der pagebutton durch eine gleich aussehende Version von sich selbst austauscht. Also alles ersetzen, aber bestimmte Bereiche gleich aussehen lassen.

Ulm32b · 15 November 2016, 00:21:34

Hallo setstate,
Dein Vorschlag funktioniert (zumindest bei mir) nicht: Der Versuch, über die Subpages das Hauptdokument zu überschreiben, endete in einer Serie von Longpolls und der Selbstverstümmelung der Oberfläche; am Ende fehlten diverse Symbole.

Ich habe mich dann dazu durchgerungen, die Oberfläche neu zu ordnen und damit das Problem zu umgehen.

Offenbar gilt die Regel: Pagebutton setzt voraus, dass die auszutauschenden Inhalte sich in einem zusammenhängenden Rechteck befinden.

Trotz alledem ist Pagebutton eine tolle Sache. Vielen Dank dafür.
Ulm32b

FHEM Forum

Verteilte Inhalte eines Pagebuttons

Ulm32b

setstate

Ulm32b