Tablet UI in FHEM – Installation und erste Schritte

FHEM Tablet UI ist ein leichtgewichtiges und funktionsreiches Framework zum Erstellen von eigenen Userinterfaces für die Steuerung und Visualisierung von in FHEM integrierten Geräten.

Das Schöne an diesem Framework ist, dass man ganz ohne Programmier- oder Scriptingkenntnisse tolle Ergebnisse erzielen kann. Lediglich ein Verständnis für HTML (und CSS) ist notwendig um Codeschnipsel an die entsprechenden Stellen zu kopieren oder nach den eigenen Vorstellungen anzupassen.

Voraussetzungen

Grundinstallation von FHEM auf dem Raspberry Pi
Grundlagen in HTML und CSS: Buchempfehlung

Später werden die Daten das HomeMatic Thermostat HM-CC-RT-DN per Widget ausgegeben. Dafür ist folgender Artikel noch interessant:

FHEM Heizungssteuerung mit dem Heizkörperthermostat HM-CC-RT-DN – Einrichtung

Installation von Tablet UI

Die Installation ist in ein paar weniger Schritten abgeschlossen. Zu Beginn das Paket herunterladen und installieren:

Es ist keine eigentliche Installation, sondern es werden eine Vielzahl von Dateien in das FHEM Installations-Verzeichnis kopiert.

Im Anschluss sollte man FHEM neu starten:

Um das UI über eine URL verfügbar zu machen, muss dies bekannt gemacht werden:

Nun erscheint ein Reiter „Tablet-UI“ in dem Menü und Tablet UI ist erreichbar unter „http://<fhem-url>:8083/fhem/ftui“

Wir laden nun noch die Widgets nach

Vor dem nächsten geforderten Restart erst die Config speichern!

Jetzt loggen wir uns per SSH auf dem Raspberry ein und wechseln in das Tablet UI Verzeichnis

Hier nennen wir die Beispiel-index-Datei um, damit wir sie benutzen können

Ein Click auf „Table-UI“ im FHEM-Menü oder Aufruf der URL „http://<fhem-url>:8083/fhem/ftui“ zeigt uns den Inhalt der Beispiel-Index Seite:

Die hat natürlich erst einmal nichts mit unseren Sensoren zu tun, sondern soll einfach nur zeigen, was Tablet UI u.a. alles kann.

Grundgerüst anpassen und Widget einrichten

Damit wir im Falle eines Falles noch die Original-Version der index.html Datei haben, machen wir uns davon eine Sicherheitskopie

Jetzt öffnen wir die Datei mit dem Editor unserer Wahl (vi, nano, o.ä.) und löschen alles wie folgt angegeben:

In diese nahezu leere Datei fügen wir nun das erste Widget ein. Um bei unserem Beispiel mit dem Homematic Thermostat (siehe auch: FHEM Heizungssteuerung mit dem Heizkörperthermostat HM-CC-RT-DN – Einrichtung) zu bleiben, fügen wir ein Widget ein, mit dem wir die Temperatur des Thermostats auslesen und setzen können:

Mit den data-Attributen innerhalb des <li.. > Tags können wir die Größe des Widgets bestimmen:

  • data-row: Start-Zeile des Widgets
  • data-col: Start-Spalte des Widgets
  • data-sizex: Anzahl Spalten des Widgets (Breite)
  • data-sizey: Anzahl Zeilen des Widgets (Höhe)

Wenn wir jetzt Tablet UI neu laden, erscheint unser Widget mit den aktuellen Daten des Thermostats. Über dieses Widget kann man auch die Temperatur einstellen.

Eine Übersicht der Attribute des Thermostat-Widgets können auf der FHEM Wiki-Seite nachgelesen werden.

Auf diese Weise können eine Vielzahl von Widgets eingebunden werden.

Schreibe einen Kommentar

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

 
x