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

Wetter-Widget

Das „Wetter-Widget“ ist etwas komplexer. Ich werde deswegen die verwendeten Devices etwas erklären. Die Wetterdaten werden vom Device „WetterProplante“ geladen. Mehr Infos zum Modul auf der FHEM-Wiki-Seite. Den Wetter-Trend habe ich mit dem Hilfs-Modul STATISTICS realisiert. Ich habe es wie folgt definiert:

Es wird somit eine Statistiks für das Device WetterProplanta und DR_Temperatur geführt. Anhand dieser Statistik wird dann ein Wetter-Trend erstellt. Das Device DR_Temperatur habe ich deswegen mit reingenommen, da ich dieses Device für die Außentemperaturmessung mit 1-Wire-Sensoren verwende.

Im folgenden der HTML-Code. Die Größe (data-row=“1″, data-col=“2″…) muss ggf. entsprechend angepasst werden. Ich habe sie nach langen rum probieren an mein Tablet angepasst. Dabei war das Zusammenspiel zwischen den Spalten- und Reihenangaben und den Zellenmaßen ausschlaggebend.

Spritmonitor

Nachdem ich mir einen eigenen Spritmonitor mit Tankalarm definiert habe (Blog-Beitrag folgt), habe ich diesen natürlich auch in mein TabletUI eingebunden. Der Spritmonitor ist eigentlich nichts anderes wie eine Tabelle. Ähnlich wie beim Abfahrtsmonitor. Den verwendeten Code findet ihr hier:

Status der Bewohner

Nachdem ich mir mit einem iBeacon und RESIDENTS und ROOMMATE eine Anwesenheitskontrolle eingerichtet habe, habe ich den Status natürlich auch im TabletUI eingebunden.

Als Vorbereitung solltet ihr meine beiden Beiträge zum Thema iBeacon / Geofancy und das Visualisieren von Bewohnern mit RESIDENTS und ROOMMATE anschauen.

Die Reihe (data-row), die Spalte (data-col) und natürlich der Name des ROOMMATE-Devices muss entsprechend angepasst werde. Auch die Zeilen data-get-on und data-alias müssen euren Umfeld angepasst werde.

Um euch das Anpassen etwas zu erleichtert, werde ich die wichtigesten Einträge etwas erläutern.

data-device – Der Name des ROOMMATE-Devices. In meinem Fall „Daniel“. Mehr Infos zu ROOMMATE in meinem Blogbeitrag dazu.

data-get – Der Name des Readings, welches visualisiert werde soll. In diesem Fall das Reading „location“, hier wird der aktuelle Ort abgespeichert, welcher über die Geofancy-App übermittelt wurde.

data-get-on – Eine Liste der möglichen Orte

data-icon – Eine Auflistung der Symbole, die den Orten unter „data-get-on“ zugeordnet werden.

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.

 

Hinterlasse einen Kommentar

9 Kommentare auf "Mein TabletUI"

Benachrichtige mich zu:
avatar
Fotos und Bilder
 
 
 
sonstiges Dateiformat
 
 
 
Sortiert nach:   neuste | älteste | beste Bewertung
fini
Gast
fini

moin,

bei philips hue iris muss  für farben data-set=“hue“ in  data-set=“rgb“  geändert werden, sonst geht es nicht.

 

ana
Gast
ana

mich würde das komplette setting für das wetter interessieren

(inkl ggf. devices und images)

Jan
Gast
Jan

Hallo Daniel,

mich würde dann noch interssieren wie du das mit dem Tendency eingeben hast. Bei mir legt er nur das standard PressureTendency an, alles andere fehlt. Dabei habe ich das im attr des statistics moduls angegeben.

Gruß

Jan

netsrac4th
Gast
netsrac4th

Hallo,

kannst Du uns den Code für den „homestatus“ zeigen? Ich versuche mich verzweifelt an einem wechselnden Symbol der „residents“ ausliest.

Danke 🙂

Sven
Gast
Sven

Gibt es für das TabletUI eine Vorlage für die einzelnen Auflösungen von 7 / 10 Zoll Tablets ? Ich muss mit meiner FTUI immer scrollen, sprich das Tablet zeigt mir dies nicht komplett im Vollmodus an.

wpDiscuz