In einigen Beiträgen habe ich schon über die Visualisierung für FHEM geschrieben, z. B. in den Beiträgen Eigener Skin für FHEM oder FHEM CSS. Da immer mehr Komponenten hinzukommen und sich die Anforderungen an FHEM und somit auch der Visualisierung ändern, möchte ich Dir in diesem Beitrag mein neuestes Konzept vorstellen.

UPDATE 2017-11-07: Nachdem einige von euch Probleme mit der Anzeige des Menüs hatten, habe ich einen Algorithmus geschrieben, der das Problem beheben sollte. Abhängig davon wie viele Visualisierungen ihr nutzt (z. B. Tablet UI) ist die Anzahl der roomBlocks unterschiedlich.

UPDATE 2018-01-01: In der aktuellen Version von FHEM gibt es nun eine ähnliche Funktion. Damit mein Skript weiterhin funktioniert, sind ein paar Anpassungen erforderlich. Die Gruppierung erfolgt nun durch „__“ zwei Unterstriche anstatt Bindestriche

Funktionsumfang:

  1. Gruppierung von Räumen in der Navigationsleiste
  2. Geräte mit dem Zusatz „-hidden“ im Gerätenamen werden nicht angezeigt (display: hidden)
  3. Uhrzeit rechts oben in der Ecke
  4. Meta-Navigation in der Fusszeile (FHEM Commandref, Event Monitor, Save und Tablet UI)
  5. Header wird beim Scrollen aus- bzw. eingeblendet

Alles was Du brauchst, findest Du in der Datei dkstyles2017-02 UND in diesem Update dkstyle2018-update.

Das Ergebnis sieht dann wie folgt aus:

Die Anzeige der Uhrzeit und Meta-Navigation sowie das Ein- und Ausblenden des Headers ist ohne Konfiguration möglich.
Für die Gruppierung der Räume und dem Ausblenden einzelner Geräte sind Anpassungen am Raum- bzw. Gerätenamen erforderlich.

Gruppierung von Räumen in der Navigationsleiste

Damit die Räume in der Navigationsleiste gruppiert und als Untermenü dargestellt werden können, muss der Name des Raum-Attributes wie folgt aussehen:

attr DEINGERÄT room GRUPPENNAME__RAUMNAME
Die logische Trennung erfolgt durch die 2 Unterstriche in Gruppe und Raum.

Beispiele:
attr EG_Buero_IT_Drucker room Räume__Büro

Dies funktioniert auch mit der Zuweisung eines Gerätes für mehrere Räume:
attr AB_Carport_Beleuchtung room Aussenbereich__Carport,Intern__Homekit

Die Reihenfolge der Gruppen kann wie gewohnt über die Web-Konfiguration vorgenommen werden. Entsprechend dieser Reihenfolge werden die Gruppen gebildet. Werden die Gruppen gemischt (also Intern__System, System__Monitoring, Intern__Notifiers), so wird für die Reihenfolge das erste Vorkommnis gewählt. Die Untermenüpunkte (Räume) werden alphabetisch sortiert.

Geräte mit dem Zusatz „-hidden“ im Gerätenamen verstecken

Damit auch die Ansicht in den einzelnen Räumen übersichtlich bleibt, können einzelne Geräte mit dem Zusatz „-hidden“ im Gerätenamen versteckt werden. Durch den URL-Zusatz „showall=-1“ werden alle Geräte wieder angezeigt.

Die URL würde dann so aussehen:
http://DEINEIP:8083/fhem/DEINRAUM?showall=-1

Wo kommt welche Datei aus dem Archiv hin?

Die entsprechenden Dateien liegen in dem Ordner fhem/www/pgm2. Du brauchst die folgenden Dateien: dk.js und dkstyle.css. Darüber hinaus kannst Du noch die Dateien dksvg_style.css und dksvg_defs.svg kopieren. Wenn Du auch noch weitere Ansichten hast, kannst Du auch noch dksmallscreenstyle.css einfügen.

In dem Ordner /fhem/www/gplot kannst Du meine Dateien für die Visualisierung des Wetters und der Heizungsdaten einfügen. In dem Ordner /fhem/www/images/dk musst Du die SVG-Dateien ablegen.

Die Konfiguration in FHEM sieht dann wie folgt aus:

Meine Konfiguration sieht so aus:


define WEB FHEMWEB 8083 global
attr WEB stylesheetPrefix dk
attr WEB JavaScripts pgm2/dk.js
attr WEB defaultRoom Aktionen
attr WEB editConfig 1
attr WEB group FHEM
attr WEB iconPath fhemSVG:$styleSheetPrefix:openautomation:dk
attr WEB longpoll 1
attr WEB room System

Lass mich wissen, ob dies auch bei Dir zu einer besseren Übersichtlichkeit geführt hat oder wenn Du Verbesserungsvorschläge hast.