FTUI Widget Pagebutton

Das Pagebutton Widget ist ein Widget für FHEM Tablet UI, das ein einfaches Element zur Verfügung stellt, um auf eine andere Seite zu navigieren. Auf der Zielseite wird das Widget als "ON" angezeigt. Das Pagebutton-Widget eignet sich zum Beispiel gut, um eine Navigation zu erstellen.

Attribute

Für das Pagebutton-Widget gelten alle Attribute des FTUI Widget Switch. Und zusätzlich die folgenden:

Attribut	Beschreibung	Standard-Wert	Beispiel
data-url	URL der Seite, die angezeigt werden soll		data-url="#content_main.html"
data-load	DIV-Container, in den der Inhalt der Zielseite geladen werden soll		data-load="#main"
data-active-pattern	RegEx, die bestimmt, wann das Widget "ON" sein soll		data-active-pattern="(./\|\|.#content_main.html)"
data-fade-duration	Zeit in Millisekunden oder "slow" bzw. "fast", die verwendet werden soll, um die Zielseite einzublenden	slow	data-fade-duration="1000"
data-icon	Vordergrund-Icon des Widgets	fa-power-off	data-icon="mi-home"
data-background-icon	Hintergrund-Icon des Widgets	fa-circle	data-background-icon="fa-square"
data-on-color	Farbe des Vordergrund-Icons, wenn der gewünschte Inhalt angezeigt wird	#222222	data-on-color="yellow"
data-on-background-color	Farbe des Hintergrund-Icons, wenn der gewünschte Inhalt angezeigt wird	#606060	data-on-background-color="gray"
data-off-color	Farbe des Vordergrund-Icons, wenn der gewünschte Inhalt nicht angezeigt wird	#505050	data-off-color="#000000"
data-off-background-color	Farbe des Vordergrund-Icons, wenn der gewünschte Inhalt nicht angezeigt wird	transparent	data-off-background-color="#cccccc"

CSS Klassen

blank	Öffnet die angegebene URL in einem neuen Fenster
nocache	Erzwingt das Neuladen eines Elementes (z.B. Bild, Seite, ...) bei jedem Aufruf statt der Zwischenspeicherung im Browser-Cache
default	Seite, die standardmäßig geladen wird bzw. Button, der standardmäßig "EIN" sein soll
prefetch	Browser lädt den Inhalt im Hintergrund bevor er angezeigt wird um Ladezeit zu sparen

Beispiele

Einfacher Link

<div data-type="pagebutton"
     data-url="index.html"
     data-icon="mi-home"></div>

Navigationsleiste

Für die Navigationsleiste braucht es zum einen die Leiste und zum anderen einen DIV-Container, in dem die zu ladenden Inhalte angezeigt werden. Die Container erhalten jeweils eine eindeutige ID, welche in der Navigationsleiste als Ziel referenziert wird.

Als erstes wird das Menü aufgebaut.

<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
    <div data-type="pagebutton"
         data-url="#page1.html"
         data-load="#page1"
         data-active-pattern=".*#page1.html"
         data-icon="mi-weekend"
         class="default"></div>
    <div data-type="pagebutton"
         data-url="#page2.html"
         data-load="#page2"
         data-active-pattern=".*#page2.html"
         data-icon="mi-music_video"></div>
    <div data-type="pagebutton"
         data-url="#page3.html"
         data-load="#page3"
         data-active-pattern=".*#page3.html"
         data-icon="mi-tv"></div>
</li>

Anschließend werden noch die DIV-Container benötigt, in die der Inhalt der Zielseite geladen wird.

<li data-row="1" data-col="2" data-sizex="5" data-sizey="4">
    <div class="page" id="page1"></div>
    <div class="page" id="page2"></div>
    <div class="page" id="page3"></div>
</li>

In der Zielseite ist wichtig, dass ein DIV-Container erstellt wird, dem die Klasse page zugewiesen wird und eine ID, die der ID entsprechen muss, in der bei data-load verwiesen wird. So eine Seite könnte wie folgt aussehen:

<div class="page" id="page1">
    <div data-type="label">Page 1</div>
</div>

Steuerung über ein Device

Der Aufruf einzelner Seiten kann auch über ein Device erfolgen; dies eröffnet Automatisierungsmöglichkeiten. Das obige Beispiel wird hierzu erweitert:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
    <div data-type="pagebutton"
         data-url="#page1.html"
         data-load="#page1"
         data-active-pattern=".*#page1.html"
         data-icon="mi-weekend"
         class="default"
         data-device="Seite"
         data-get="STATE"
         data-get-on="1"></div>
    <div data-type="pagebutton"
         data-url="#page2.html"
         data-load="#page2"
         data-active-pattern=".*#page2.html"
         data-icon="mi-music_video"
         data-device="Seite"
         data-get="STATE"
         data-get-on="2"></div>
    <div data-type="pagebutton"
         data-url="#page3.html"
         data-load="#page3"
         data-active-pattern=".*#page3.html"
         data-icon="mi-tv"
         data-device="Seite"
         data-get="STATE"
         data-get-on="3"></div>
</li>

Nimmt das device "Seite" die STATES "1", "2" oder "3" an, wird die jeweilige Seite aufgerufen.

Eine weitere Variante zeigt das nachfolgende Beispiel: Hier wird über das device "Musik" bei "on" die Seite 2 aufgerufen und bei "off" zur Hauptseite zurückgewechselt:

<li data-row="1" data-col="1" data-sizex="1" data-sizey="4">
    <div data-type="pagebutton"
         data-url="#page1.html"
         data-load="#page1"
         data-active-pattern=".*#page1.html"
         data-icon="mi-weekend"
         class="default"
         data-device="Musik"
         data-get="STATE"
         data-get-on="off"></div>
    <div data-type="pagebutton"
         data-url="#page2.html"
         data-load="#page2"
         data-active-pattern=".*#page2.html"
         data-icon="mi-music_video"
         data-device="Musik"
         data-get="STATE"
         data-get-on="on"></div>
    <div data-type="pagebutton"
         data-url="#page3.html"
         data-load="#page3"
         data-active-pattern=".*#page3.html"
         data-icon="mi-tv"></div>
</li>

Weblinks