FHEM Tablet UI (FTUI) Anleitung Konfiguration

Seit Januar 2017 gibt es die Tablet UI in der Version 2.5. Da ich noch ein 7″ Lenovo Tablet (A7-40) Tablet habe war klar, dass ich die Tablet UI mal ausprobieren musste.

Bei FTUI handelt es sich um ein Frontend Framework basierend auf HTML CSS und Java Script. Die Oberfläche ist mit relativ einfachen HTML Code konfigurierbar. Ich betreibe die FTUI mit auf dem FHEM Raspberry.

Folgende Werkzeuge werden benötigt:
FTUI WIKI   https://wiki.fhem.de/wiki/FHEM_Tablet_UI
FTUI FAQ   https://wiki.fhem.de/wiki/FHEM_Tablet_UI_FAQ
GitHub knowthelist   https://github.com/knowthelist/fhem-tablet-ui

Auf die Installation der FTUI gehe ich in diesem Beitrag nicht ein, dafür gibt es schon genügend Anleitungen. Ich habe mich am 1.Kapitel des FHEM Wikis orientiert.

Die index.html der TUI bearbeite ich mit Notepad++. Um die Bearbeitungsschritte schnell sehen zu können ziehe ich die veränderte index.html per Drag&Drop in FileZilla (automatisches Überschreiben aktiviert) nach „/opt/fhem/www/tablet“.

Mein erster Schritt war die index.html aufzuräumen, sprich alles im <ul>****</ul> Tag flog raus. Es bleibt das Grundgerüst, die Kommentare habe ich zur vereinfachten Übersicht entfernt.

<!DOCTYPE html>
<html>
<head>
<title>FHEM-Tablet-UI</title>
</head>
<body>
<div class=“gridster“>
<ul>
</ul>
</div>
</body>
</html>

Jetzt müsst ich euch Gedanken über die Anzahl der Raster machen. Wieviele Objekte möchte ich unter bringen? Wie lang, breit, hoch und tief sollen diese sein? Steht das Grundsätzlich fest beginnt man mit der Erstellung der „data-rows“. In der index.html wie folgt definiert:

<li data-row=“1″ data-col=“1″ data-sizex=“1″ data-sizey=“1″></li>

„data-row=“ gibt die Reihe und „data-col=“ die Spalte an um das Objekt zu positionieren. „data-sizex=“ und „data-sizey=“ die tiefe und breite. Hier könnte ihr meine Aufteilung sehen:

<li data-row=“1″ data-col=“1″ data-sizex=“1″ data-sizey=“1″></li>
<li data-row=“2″ data-col=“1″ data-sizex=“1″ data-sizey=“1″></li>
<li data-row=“3″ data-col=“1″ data-sizex=“1″ data-sizey=“1″></li>
<li data-row=“4″ data-col=“1″ data-sizex=“1″ data-sizey=“1″></li>
<li data-row=“1″ data-col=“5″ data-sizex=“3″ data-sizey=“1″></li>
<li data-row=“1″ data-col=“3″ data-sizex=“2″ data-sizey=“2″></li>
<li data-row=“1″ data-col=“2″ data-sizex=“1″ data-sizey=“4″></li>
<li data-row=“2″ data-col=“4″ data-sizex=“1″ data-sizey=“1″></li>
<li data-row=“2″ data-col=“3″ data-sizex=“1″ data-sizey=“1″></li>
<li data-row=“2″ data-col=“5″ data-sizex=“1″ data-sizey=“1″></li>
<li data-row=“3″ data-col=“3″ data-sizex=“2″ data-sizey=“1″></li>
<li data-row=“3″ data-col=“6″ data-sizex=“2″ data-sizey=“1″></li>
<li data-row=“3″ data-col=“5″ data-sizex=“1″ data-sizey=“1″></li>
<li data-row=“4″ data-col=“3″ data-sizex=“5″ data-sizey=“1″></li>

Um den Einstieg zu erleichtern stelle ich ein einfaches Beispiel Gerüst zur Verfügung. Download hier -> index-geruest.html

Die „data-rows“ können jederzeit flexibel angepasst werden. Jetzt muss das Gerüst mit Inhalten gefüllt werde. Dafür gibt es unterschiedliche „data-type“ Widgets. Die Widget Liste findet ihr im FHEM Tablet UI Wiki unter „Integrierte Widgets“.

Ich erkläre ein einfachen „Switch“ – ein Button zum schalten zwischen zwei Zuständen z.B on/off.

<div data-type="switch"
	data-icon="fa-rss"
	data-device='Steckdose1'
	data-set-on="on" 
	data-set-off="off"
	class="green small">
</div>

Zuerst wird das Widget (data-type) festgelegt, es handelt sich um einen switch. Mit „data-icon“ logischerweise das Icon des Schalters. Jetzt wird das „data-device“ bestimmt, ein meinem Fall eine in FHEM definierte IT-Steckdose. Die Steckdose wird von meinem CUL geschaltet. Die Tablet UI benötigt also nur den Names des FHEM Device und die Befehle. So einfach können Schalter definiert werden.

In FHEM betreibe ich einen Jeelink v3c (33€) mit LaCrosse Temperatur und Feuchtigkeitssensoren (15€ Stück). Was eine sehr preiswerte Überwachung ermöglicht. Diese laufen inzwischen seit gut 2 Jahren. Um diese in der TFUI darstellen zu können habe ich mich für das „thermostat“ Widget entschieden. Zum Beispiel hier das Wohnzimmer:

<li data-row=“1″ data-col=“1″ data-sizex=“1″ data-sizey=“1″>
<div data-type=“thermostat“ -> Names des Widgets
<header>Wohnzimmer</header> -> Anzeigename
data-device=“Temp.Wohnzimmer“ -> Device Name
data-get=“temperature“ -> Namen der Readings in FHEM
data-get=“humidity“ -> Namen der Readings in FHEM
data-step=“0.1″ -> Formatierung des Werts
data-min=“-10″ -> Grafik minimum
data-max=“30″-> Garfik maximum
class=“readonly“ -> Da es sich nicht um eine Steuerung handelt „ro“</div>
</li>

Kommen wir zum nächsten Widget welches ich oft verwendet habe: „label“ z.B um die Luftfeuchtigkeit anzuzeigen. Das kann das termostat Widget leider nicht.

<div
data-type=“label-> Names des Widgets
data-device=“Temp.Wohnzimmer“ -> Device Name
data-get=“humidity“-> Namen der Readings in FHEM
data-color=“blue“ -> Farbe
data-unit=“%%0A“ -> Zeig ein kleines % Zeichen hinter dem Wert
class=“big narrow“ -> Foramtierung
</div>

Der Code landet dann natürlich innerhalb des Wohnzimmer data-rows.

<li data-row=“1″ data-col=“1″ data-sizex=“1″ data-sizey=“1″>
<header>Wohnzimmer</header>

#####  CODE HIER  ####

</li>

An dieser Stelle merk ihr bald, dass die Widget optisch angepasst werden müssen. Das ist schnell bei der Schriftgröße und der Positionierung der Widgets in einer „data-row“ der Fall. Dafür benutzt man die „class“ siehe GitHub Link:

Label or Symbol Size

  • mini : 50%
  • tiny : 60%
  • small : 80%
  • normal : 100%
  • large : 125%
  • big : 150%
  • bigger : 200%
  • tall : 350%
  • great : 450%
  • grande : 600%
  • gigantic : 144px

Common Positioning classes

  • inline : positioning elements in a row, no line break
  • newline : positioning elements at a new row, line break
  • top-space : 15px extra on top 
  • left-space : 15px extra on left 
  • right-space : 15px extra on right 
  • top-narrow : -15px closer on top
  • left-narrow : 15px closer on left
  • right-narrow : 15px closer on right
  • centered : horizontal centered (set this class to parent div)

So kann jedes Widget in der Größe und der Position angepasst werden.
Die Schrift ist zu klein? class=“bigger“
Die Schrift ist zu tief? class=“bigger top-narrow“
Die Schrift soll in eine neue Reihe? class=“bigger top-narrow newline“

Auf dem Tablet verwende ich die APP „Fully Kiosk Browser“ von Аlexеy Оzеrov.  Ein super Fullscreen Browser mit sehr vielen Funktionen.  http://www.ozerov.de/fully-kiosk-browser/de/

Für fast alle Probleme und optischen Mängel konnte ich mit Hilfe der 3 Links eine Lösung finden. Es lohnt sich also ein bisschen Zeit zu investieren und aus zu probieren.

Weiter plante ich einen optisch schönen Abfallkalender einzubauen. Eventuell weitere Seiten die über die index.html aufgerufen werden können um jeden Raum mit mehr Funktionen darstellen zu können.

Schreibe einen Kommentar

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