Series: FHEM Tablet-UI Dashboard

FHEM Dashboard – Installation

Die Standard-UI von FHEM ist zwar sehr praktisch und kann mit CSS auch entsprechend verändert werden, dennoch sieht es nicht gerade sehr schön aus und die Gebrauchstauglichkeit – insbesondere auf mobilen Endgeräten – ist eher mäßig. Nach dem Motto „Alle neu macht der Mai!“ bin ich durch Zufall auf das Projekt FHEM Tablet UI von Mario Stephan gestoßen. In diesem Beitrag möchte ich zeigen, wie man es installiert und ein einfaches Dashboard erstellt. Installation Für die Installation sind zwei Dinge erforderlich. Einfach die folgenden Befehle in die Eingabebox von FHEMWEB kopieren. update all https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt update all https://raw.githubusercontent.com/nesges/Widgets-for-fhem-tablet-ui/master/controls_widgets-for-fhem-tablet-ui.txt Als nächstes muss...

Mehr

FHEM Dashboard – Grundgerüst für Tablet-UI

Nachdem ich vor geraumer Zeit gezeigt habe, wie man Tablet-UI installiert, möchte ich heute etwas tiefer eintauchen und zeigen, wie ihr mit Tablet UI ein Dashboard bauen könnt. Alternativ könnt ihr auch einen Kindle Paperwhite eReader, 15 cm (6 Zoll) hochauflösendes Display (300 ppi) mit integrierter... zur Statusanzeige verwenden. Wie das geht findet ihr in meinem Beitrag FHEM Status auf Kindle Paperwhite 3. Allgemeines Nach der Installation findet ihr in dem Verzeichnis www/tablet die erforderlichen Dateien bzw. könnt dort eure eigenen anlegen. Der Grundaufbau Für den Grundaufbau sollte man zuvor sorgfältig zwei Dinge festlegen: 1. Wie soll die Navigation...

Mehr

FHEM Dashboard – Tablet-UI Widgets

In diesem Beitrag möchte ich zeigen, wie ich die einzelnen Tablet-UI Widgets in FHEM verwendet habe. Das Grundgerüst haben wir ja bereits im vorherigen Beitrag geschaffen. FHEM Tablet-UI Widgets Anhand des folgenden Beispiels zeige ich, wie die verschiedenen Widgets verwendet werden können: Was ist hier zu sehen? Ganz links befindet sich die Hauptnavigation, in der zweiten Spalte sieht man oben das aktuelle Wetter und darunter den Familienkalender. In der dritten Spalte habe ich eine Wettervorschau sowie einige Schalter für die Rollläden im Haus. Ganz unten sieht man wann das nächste Mal Müllabfuhr ist und welche Personen sich im Haus...

Mehr

FHEM Dashboard – Tablet-UI Code-Beispiele

Um meine Implementierung von Tablet-UI etwas verständlicher zu machen, hier einige Code-Beispiele. Diese kannst Du als Ausgangspunkt verwenden und nach Belieben anpassen. Bitte beachte, dass einige Geräte noch gesonderte Konfiguration in FHEM benötigen. Hierzu zählen zum Beispiel der Müllkalender, Familienkalender oder die Anwesenheitserkennung. Tablet-UI Code-Beispiel für index.html <!DOCTYPE html> <html> <head> <title>FHEM-Tablet-UI</title> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <meta name="widget_base_width" content="60"> <meta name="widget_base_height" content="65"> <meta name="mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec --> <meta name="debug" content="0"> <!-- 1=output to console;0=not output --> <meta name="widget_margin" content="3"> <meta name="gridster_disable" content="1"> <link rel="stylesheet"...

Mehr