FTUI Widget Pagebutton

Aus FHEMWiki

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.

  • FTUI Widget Pagebutton 01.png
  • FTUI Widget Pagebutton 02.png

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"
data-return-time Zeit in Sekunden, nach der die Standardseite (default) wieder aufgerufen wird data-return-time="60"
data-parent "Eltern-Seite" - Angabe erforderlich, wenn in einer mehrstufigen Menüstruktur direkt auf eine Unterseite gesprungen werden soll und diese nicht mit "prefetch" vorgeladen ist data-parent="main2"
data-device FHEM-Device, über welches das Verhalten des Widgets gesteuert wird
data-get Reading, welches ausgewertet wird STATE
data-get-on Wert, bei welchem das Widget ausgelöst wird
data-states Vektor mit Zuständen von data-get data-states='["0","1"]'
data-icons Vektor mit Symbolen, die auf data-states referenzieren data-icons='["fs-bag blink","fs-bag"]'
data-hide Reading, welches Ein- und Ausblenden des Widgets steuert data-hide="GelberSack_Anzeige"
data-hide-on Wert, bei dem das Widget ausgeblendet wird data-hide-on="false"
data-warn <device>:<reading> für den Inhalt des Warnhinweises
data-warn-background-color Hintergrundfarbe des Warnhinweises
data-warn-color Schriftfarbe des Warnhinweises

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

Hinweise

  • Für Sub-Pagebuttons kann eine eigene data-return-time festgelegt werden.
  • data-return-time muss nicht am ersten Button hängen. Der erste, der dieses Attribut hat, wird ausgewertet.

Beispiele

Einfacher Link

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

FTUI Widget Pagebutton 01.png


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>

FTUI Widget Pagebutton 02.png


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>


Querverweis auf eine Pagebutton-Seite

Es ist zulässig, dass mehrere Pagebutton-Widgets auf dieselbe Seite verweisen. Neben der Verwendung in Menüleisten könnnen somit zusätzlich "Links" an beliebiger Stelle platziert werden, bei deren Betätigung die definierte Pagebutton-Seite bzw. -Unterseite aufgerufen wird. Das Aussehen des Pagebutton-Widgets kann mittels data-icons und data-colors wie beim Symbol-Widget beeinflusst werden. Folglich erweitert das Pagebutton-Widget die Funktionalität des Symbol-Widgets dergestalt, dass bei Betätigung eine Unterseite aufgerufen wird. Beispiel: Auf der Hauptseite signalisiert das Symbol, ob alle Fenster geschlossen sind oder mindestens eines geöffnet ist. Bei Betätigung des Widgets wird dann die Unterseite aufgerufen, welche eine detaillierte Übersicht über den Zustand aller Fenster enthält. Im nachfolgenden Beispiel wird der Abholtermin des Gelben Sacks am Vortag (normale Anzeige) und am Abholtag (blinkend) angezeigt. Das Reading GelberSack_Anzeige begrenzt das Zeitfenster der Anzeige auf den Nachmittag des Vortages bis zum Vormittag des Abholtages. Wenn das Symbol angezeigt wird, kann durch manuelle Betätigung die Unterseite "#page_content6_4.html" aufgerufen werden (welche z.B. weitere Informationen zu anstehenden Abholterminen bereithält). 

<div class="vbox grow-0">
<div data-type="pagebutton" 
data-url="#page_content6_4.html" 
data-load="#content6_4" 
data-off-background-color="transparent" 
data-off-color="#FFFF7A" 
data-on-background-color="transparent" 
data-on-color="#FFFF7A" 
data-active-pattern=".*#page_content6_4.html" 
class="prefetch bigger compressed autohide" 
data-device="Entsorger" 
data-get="GelberSack_days" 
data-states='["0","1"]' 
data-icons='["fs-bag blink","fs-bag"]' 
data-hide="GelberSack_Anzeige" 
data-hide-on="false"></div>

<div data-type="label" 
data-device="Entsorger" 
data-hide="GelberSack_Anzeige" 
data-hide-on="false" 
data-get="GelberSack_days" 
data-substitution='["0","Heute","1","Morgen"]' 
data-color="#FFFF7A" class="compressed autohide" 
style="position: relative; top: 5px"></div>
</div>

Weblinks

Abgerufen von „http://wiki.fhem.de/w/index.php?title=FTUI_Widget_Pagebutton&oldid=28166“