Mein TabletUI

Nachdem ich eine kurze Einleitung zur Weboberfläche TabletUI verfasst habe, möchte ich in diesem Beitrag etwas ausführlicher auf meine eigene TabletUI-Installation eingehen. Wie im Einführungs-Beitrag bereits erwähnt, habe ich mich selbst am TabletUI von Roman Ueberück inspirieren lassen. Ich werde also in diesem Beitrag weniger auf das Design eingehen, sondern eher auf die Widgets selber und wie man sie richtig konfiguriert.

Switch und Label für die Gerätesteuerung und Verbrauchsanzeige

Das Widget Switch nutze ich für die einfache AN/AUS-Steuerung meiner Geräte. Des Weiteren lasse ich mir mit dem Widget Label die Verbrauchsdaten anzeigen.

Im ersten Teil definiere ich das Widget „Switch“. Dies Lampe TabletUIgeschieht durch den Eintrag „data-typ“. Über „data-device“ gebe ich an, welches FHEM-Devices ich steuern möchte. Der Name muss exakt mit dem Namen in FHEM übereinstimmen. Durch das Weglassen der „data-get-on“ bzw. „data-get-off“ Angaben, wird automatisch das Reading STATE vom Device ausgelesen bzw. gesteuert. Die weiteren Angaben dienen dem Aussehen des Widgets. „data-on/off-color“ bestimmt die Farbe des Symbols im An/Aus-Zustand. Die Einträge „data-on/off-background-color“ bestimmen die Füllfarbe des „Buttons“. Zum Schluss definiere ich noch mit der Klasse „big“ die Größe des Buttons. Unter dem Button habe ich noch eine simple An/Aus-Beschriftung eingefügt.

Im zweiten Teil lasse ich mir mit dem Widget „Label“ die Verbrauchsdaten anzeigen. Diese Verbrauchsdaten werden mit PCA301-Funksteckdosen gemessen. Mit „Label“ lassen sich die Readings von beliebigen Devices anzeigen. Definiert wird das Label wieder mit dem Eintrag „data-typ“. Mit dem Eintrag „data-device“ wird angegeben von welchem Devices man ein Reading anzeigen lassen will. In meinem Fall vom dummy „WZ_Papierlampe_Verbrauch“. Das gewünschte Reading gibt man mit den Eintrag „data-get“ an. Nun lässt sich das Reading noch anpassen. Ich habe es durch den Eintrag „data-fix“ auf zwei Nachkommastellen begrenzt und lass es mit der Einheit W anzeigen („data-unit“). Um es etwas „aufzupeppen“ habe ich für unterschiedlich Werte-Bereiche unterschiedliche Textfarbe definiert. Dies geschieht durch die Angabe eines „Arrays“. Zuerst wird mit „data-limit“ die Grenzen der Werte-Bereiche angegeben. Danach gibt man mit „data-color“ die gewünschte Farbe für die Bereiche. Auch bei den „Labels“ habe ich mich wieder für die Größe „big“ entschieden. Als Überschrift habe ich einen einfachen Text genommen. Das Label und die Überschrift habe ich mit der Klasse „top-space“ umhüllt, damit der Abstand zum „Switch“ etwas größer ist.

Im unteren Teil habe ich das gleiche für den Gesamtverbrauch gemacht. Die Angaben entsprechend angepasst.

Lampe mit Farbwahl

Für meine MiLight RGB-Lampe habe ich einen „Switch“ für das Ein/Aus-Schalten verwendet und Taster (push) für das Einstellen der Farbe Weiß und für das Öffnen eines Pop-Ups für die Farbauswahl. Des Weiteren ein Dimm-Regler zum Dimmen der Lampe.

Zuerst wird wieder ein „Switch“ definiert für das An- und Ausschalten der Lampe mit der An/Aus Beschriftung. Das Vorgehen ist identisch wie oben bereits beschrieben.

Im zweiten Teil wird ein Taster definiert um die Lampe auf weiß zu Lampe RGB TabletUIstellen. Dies geschieht über das Widget „push“ – „data-typ=push“. Die restliche Konfiguration ähnelt dem Widget „Switch“. Das Reading „rgb“ wird gesteuert (data-set=“rgb“). Das Reading wird dann auf den gewünschten Farbwert gesetzt (data-set-on=“xxx“). Das Symbol hat die Farbe der gewünschten Farbe (data-off-color=“xxxx“). Die Größe ist wieder auf „big“ eingestellt (class=“big“). Unter dem Taster habe ich wieder eine einfache Beschriftung eingefügt.

Im dritten Teil wird es interessant. Anstatt ein „Color-Picker“ oder ähnliches zu konfigurieren, habe ich mich für Taster entschieden. Mit diesen Tastern lassen sich vordefinierte Farben auswählen. Um nicht alle Taster durchgehend anzuzeigen, wird ein Popup-Fenster definiert. Dies geschieht durch den Daten-Typ „popup“. Die nachfolgenden Einträge bestimmen die Größe des Popups (data-height, data-width). Danach wird der Taster zum Öffnen des Popups definiert mit der Beschriftung „Farbe“. Nun wird das Popup selbst definiert. Durch die Klasse „Dialog“ wird die Konfiguration „eingeleitet“. Innerhalb dieser Klasse werden dann die Taster für die unterschiedlichen Farben definiert.

Lampe RGB TabletUI

Zum Schluss dann noch ein Dimmer für die Helligkeit (data-typ=“small dim-tick dim-back“) Hier kann man natürlich durch ändern des Eintrages „small“ die Größe des Widgets ändern.

Abfahrtsmonitor

Nachdem man sich in FHEM einen Abfahrtsmonitor definiert hat, liegt es doch nahe, diesen auch auf seinen Tablet anzuzeigen. Der Abfahrtmonitor lässt sich einfach durch eine Tabelle realisieren. Der Inhalt der Zellen wird dann mit den Readings vom definierten DBPlan-Modul befüllt.

TabletUI Bahn FHEM

Fazit

Mit den Widgets „switch“, „push“ und „label“ lassen sich in der Regel alle wichtigen Infos aus eurer FHEM-Installation in TabeltUI anzeigen und die wichtigsten Geräte steuern. Ich hoffe ich konnte euch mit diese etwas ausführlicheren Erklärung meiner meist benutzen Widgets etwas helfen. Ansonsten einfach mal den Wiki-Eintrag zum Thema lesen. Da werden die Widgets erklärt und sind mit einem Beispiel versehen. Bei Fragen benutzt einfach die Kommentarfunktion 😉

 UPDATE 14.11.2016 – Light Version

Nachdem ich TabletUI schon ein paar Monate im Einsatz habe, habe ich gemerkt, dass ich viele Funktionen gar nicht verwende. Ich habe mir deswegen eine kleine „Light-Version“ zusammengebastelt.

Ich verwende nun nur noch eine Hauptseite auf der ich alle Temperatursensoren und Steckdosen aufliste. Zusätzlich dann noch eine kleine „Extra-Leiste“ um auf den Bahn-Fahrplan, Regenradar und Systeminfo-Seite zu gelangen.

Tablet UI v2

Wenn ihr mehr zum verwendeten HTML-Code wissen möchtet, dann meldet euch kurz in den Kommentaren. Ich versuche dann euch zu helfen.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*