TabletUI – Tablet als Schaltzentrale

Um das Steuern meines Zuhauses noch komfortabler zu gestallten, habe ich mich dazu entschlossen, ein einfaches Tablet als Schaltzentrale einzurichten. Nach einiger Recherche habe ich mich für die Web-Oberfläche TabletUI entschieden. TabletUI ist ein Framework, mit dem man relativ leicht FHEM-Geräte steuern kann. TabletUI stellt dazu bereits einige Widgets zur Verfügung , die man per HTML einbinden und konfigurieren kann. Ich persönlich habe mich an die TabletUI-Oberfläche von Roman Ueberück (www.ueberueck.com) inspirieren lassen. Er hat auf seinem Blog eine erstaunliche Oberfläche zusammengebastelt. Da ich seine Arbeit hier auf meinem Blog nicht 1:1 kopieren möchte, werde ich mich nur auf die Installation und einige grundlegenden Funktionen von TabletUI fokussieren.

Installation

Für die Installation sollte man sich zuerst die benötigten Pakete dafür holen, bzw. updaten. Dies geschieht direkt über das Eingabefeld in FHEM:

Anschließend kann man das Device TabletUI defnieren:

TabletUI FHEM

Das war es dann auch schon mit der Installation und man kann sich an das Konfigurieren machen.

Konfigurieren

Die Dateien der TabletUI Installation befinden sich im Ordner der FHEM-Installation unter …/www/tablet. In meinem Fall:

In diesem Ordner befindet sich bereits die Beispiel Startseite „index-example.html“.

TabletUI FTPTabletUI Aufrufen

Um diese erstmal zu verwenden, muss man diese in „index.html“ umbenennen. Über die Seitenleiste in FHEM lässt sich nun die TabletUI Oberfläche aufrufen. Alternativ geht dies natürlich auch direkt über die Adresse:

Es öffnet sich nun die Beispiel-Konfiguration. Wie man direkt bemerkt sind schon sehr viele Widgets eingerichtet.

TabletUI Beispiel

Man kann sich nun daran machen und diese Widgets nach seinen Bedürfnissen anpassen. Meiner Meinung nach, ist dies jedoch für den Anfänger eher suboptimal, da hier bereits viele Widgets konfiguriert sind und man als Anfänger schnell den Überblick verliert. Ich Empfehle also jedem Anfänger, dass er sich selber die Widgets nach und nach zusammen „bastelt“.

Um dies zu Vereinfachen, werde ich im Folgenden die wichtigsten Widgets erklären und anhand von Beispielen zeigen, wie man damit FHEM-Devices steuert.

eigene HTML-Seite erstellen

Bevor man mit dem Einrichten von Widgets beginnen kann, sollte man sich eine eigene index.html Datei erstellen. Die HTML-Seite sollte folgenden Inhalt haben:

Mehr Infos auf GitHub: https://github.com/knowthelist/fhem-tablet-ui

Die Beispiel-HTML-Seite sollte dann durch die selbst erstellte ersetz werden. Natürlich sollte man seine selbst erstellte Datei ein bisschen verstehen. Im folgenden erkläre ich nun die wichtigsten Einträge:

Die Oberfläche von TabletUI besteht aus einem Raster auf den die Widget angeordnet sind. Mit diesen beiden Einträgen lässt sich die Größe der einzelnen Felder anpassen. Die Angabe wird in Pixeln gemacht.

Über longpoll lässt sich die Aktualisierungsrate einstellen. Bei einer 1 wird der Inhalt bei neuen Werten sofort aktualisiert, z.B. bei neuen Werten eines Sensors. Bei einer 0 wird alle 30 Sekunden aktualisiert.

Dieser Eintrag verweist auf die eigene Style-Datei hin. In dieser kann man eigene Styles definiere. Für den ersten Start und das Erstellen erster Widgets reicht es jedoch, mit den Standard-Styles zu arbeiten.

Die restlichen Einträge sind im Groben für die ordnungsgemäße Funktion von TabletUI notwendig. Wehr sich genauer mit den einzelnen Einträgen beschäftigen möchte, sollte auf der GitHub-Seite, der FHEM-Wiki-Seite oder im Forum vorbeischauen.

Widgets zum Steuern von FHEM-Devices

Es gibt bereits eine große Anzahl an Widgets. Ein Übersicht findet man auf FHEM-Wiki Eintrag zu TabletUI. Anhand des Widgets „Switch“ werde ich euch kurz die Grundlage der Widgets näher bringen.

Mit dem Widgets lassen sich einfache Schaltvorgänge realisieren. In diesem Beispiel werden zwei Lampen geschaltet.

TabletUI Widget Switch

An diesem Beispiel erkennt man sehr gut die Funktionsweise des Rasters. Lampe 1 befindet sich im Feld Reihe 1, Spalte 1. Ähnlich wie beim Spiel Schiffe versenken. Das Feld für Lampe 1 hat dann eine Größe 1×1. Lampe 2 befindet sich genau daneben. Also Reihe 1, Spalte 2. So lassen sich mehrere Widgets anordnen.

Jedes Widget benötigt zudem weitere , je nach Art des Widgets, unterschiedliche „Attribute“. Beim einfachen Switch (Button) sind dies zum einen „data-device“. Der hier eingegebene Name muss exakt mit dem FHEM-seitigen Gegenstück übereinstimmen. Des Weiteren wird natürlich die Angabe benötig, welcher Wert in FHEM gesteuert werden soll. Dies geschieht über data-get-on und data-set-on.

Bei anderen Widgets kommen natürlich andere „Attribute“ hinzu. Eine gute Übersicht und Beispiele erhält man auf der FHEM-Wiki-Seite zum Thema TabletUI.

Widgets anpassen

Es stehen einige Klassen bereit, mit der man das Aussehen eines Widgets anpassen kann.

Abstand nach oben

Mit der Klasse „top-space“ lässt sich der Abstand nach oben hin einstellen.

TabletUI topspace

 Größe des Widgets

Für die Größe des Widgets gibt es mehrere Klassen. Hier eine kleine Auswahl:

TabletUI GrößeEs gibt natürlich noch einige mehr Möglichkeiten seine Widgets anzupassen. Am besten auf der WIKI-Seite vorbeischauen.

Mein Alltagseinsatz – Telekom Puls-Tablet

Wie oben bereits erwähnt, habe ich mich von Roman Ueberück (www.ueberueck.com) inspirieren lassen. Mit TabletUI lassen sich einige hübsche Sachen realisieren. Es lassen neben den Schaltern und Reglern für die Steuerung der FHEM-Devices auch Wetter-Daten, Zugfahrpläne, Kalender-Einträge, Anruferlisten oder System-Meldungen anzeigen. Es lassen sich dank des relativ einfachen Aufbaues schnell Ergebnisse erzielen. Auch komplizierte Konstrukte lassen sich somit schnell realisieren.

Ich persönlich habe mir über die Telekom das Tablet Telekom Puls geholt. Für Telekom Kunden gibt es dies bereits ab 50€. Natürlich geht auch jedes andere Tablet. Damit man später jedoch auch das Tablet selbst über FHEM steuern kann, empfehle ich euch ein Android Tablet. Des Weiteren sollte man auf die Auflösung des Bildschirms achten. Allzu niedrig sollte sie nicht sein. Das Telekom Puls hat eine Auflösung von 1280X800.

TelekomPuls VerpackungTelekomPuls Verpackung2

TelekomPuls Inhalt

Mit einer Alu-Leiste und etwas Heizkleber habe ich dann das Tablet an der Wand befestigt.

TabletUI Wandhalterung

Mit Hilfe von TabletUI lässt sich eine sehr ansprechende Oberfläche kreieren. Mit Hilfe eines günstigen Tablets lässt sich so schnell eine schöne Wandsteuerung erstellen. Eine weitere Idee wäre auch, dass man für jeden Raum sich ein einfaches Android Handy besorgt und so in jedem Zimmer ein entsprechende Steuereinheit installiert.

Ich hoffe ich konnte euch den Einstieg ins Thema TabletUI etwas erleichtern. Bei Fragen einfach ein Kommentar hinterlassen. Und wie oben schon erwähnt, schaut ruhig mal bei Roman Ueberück (www.ueberueck.com) vorbei. Hier lassen sich einige Inspirationen holen.

Alternative zum Telekom Puls-Tablet:

Alternativ zum Telekom Puls-Tablet kann man sich auch ein anderes günstiges Android-Tablet kaufen. Als Einstieg empfehle ich dieses Tablet von JEJA. Es kostet knappe 40€.

JEJA 7 Zoll Android Google Tablet PC 4.2.2 8GB WiFi Dual...
  • Google Android 4.2.2 Jelly Bean OS, Allwinner A23 Dual Core CPU (1.2GHz) mit Quad core Mali-400 MP GPU, bieten beispiellose schnelles online surfen, Videospiele und 3D-Spiele Spielerfahrung
  • 7 Zoll Bildschirm, 5 point capacitive Touch Screen,800*480 Auflösung
  • 8GB Speicherkapazität, eingebaute Micro SD Karten Slot ermöglicht das Hinzufügen von bis zu 32GB extra Speicherplatz um Songs, Videos, Fotos und andere Dateien zu speichern

Letzte Aktualisierung am 3.12.2016 / Affiliate Links / Bilder von der Amazon Product Advertising API

Zwar ist die Auflösung mit 800×400 geringer als die des Puls-Tablets, für erste Schritte mit Tablet-UI jedoch genau richtig. Sollte seine eigene Tablet-UI-Seite irgendwann auf eine gewisse Größe gewachsen sein, kann man sich immer noch nach einem besseren (teureren) Tablet umschauen – mit einer höheren Auflösung.

Mein Tablet-UI

Wer sich ein paar Inspirationen holen möchte, kann sich gerne mein aktuelles Tablet-UI anschauen.

Schreibe einen Kommentar

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

*