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.

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 und Event Monitor)
  5. Header wird beim Scrollen aus- bzw. eingeblendet

Alles was Du brauchst, findest Du in der Datei dkstyles2017-02.

Das Ergebnis sieht dann wie folgt aus:

FHEM Visualisierung / Skin 2017

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 Bindestriche 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-Dateiein 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.