Eigener Skin für FHEM

Über die letzten Jahre habe ich das Aussehen von FHEM stark an meine Bedürfnisse angepasst. Der Skin erfreut sich großer Beliebtheit. Für 2017 wollte ich ihn noch weiter verbessern. Wie ich das gemacht habe und worauf Du bei dem Erstellen eines eigenen Skins achten musst, erkläre ich Dir in diesem Beitrag.

Generelles

Wie kann ich das Aussehen von FHEM verändern?

Du brauchst dafür im Idealfall nur eine eigene CSS-Datei. Wenn Du das Aussehen und Interaktionsverhalten von FHEM noch stärker verändern willst, kannst Du dies mit einer eigenen JS-Datei machen. Die Verknüpfung dieser Dateien erfolgt über die Konfigurationsdatei.

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

Wichtig sind hier stylesheetPrefix und JavaScripts.

Wo liegen die Skin-Dateien?

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 anlegen. Wenn Du auch noch weitere Ansichten hast, kannst Du auch noch dksmallscreenstyle.css anlegen.

Wir werden die einzelnen Schritte der Reihe nach durchgehen…

dkstyle.css

Ich habe Dir eine ZIP-Datei meiner Dateien erstellt, damit Du einen schnell einen Erfolg siehst.
Download dkstyles-2017.zip

Die Schriftart MetaWebPro brauchst Du nicht unbedingt. Ich wollte sie gerne verwenden, da es die Schriftart von der AVM Website ist. Du kannst diese in der dkstyle.css entsprechend durch Deine Lieblingsschrift ersetzen, z. B. durch eine Roboto von Google.

Für die Robot würde es wie folgt aussehen:


@import url('https://fonts.googleapis.com/css?family=Roboto');
* {
	font-family: 'Roboto', Arial, sans-serif;
}

Die einzelnen CSS-Dateien möchte ich nicht weiter kommentieren, da sie doch recht umfänglich sind. Wenn Du Fragen hast, nutze die Kommentarfunktion unten.

dk.js

Zusätzlich zur CSS-Datei habe ich noch eine JavaScript-Datei erstellt. Diese Erweitert FHEM um folgende Funktionen:

Uhrzeit rechts in der Ecke
Metanavigation in der Fusszeile (FHEM Commandref und Event Monitor)
Geräte mit dem Zusatz „-hidden“ werden nicht angezeigt (display: hidden)
Header wird beim Scrollen aus- bzw. eingeblendet

Den kompletten Code findest Du in der ZIP-Datei:
Download dkstyles-2017.zip

Uhrzeit rechts in der Ecke anziegen


function GetClock() {
	d = new Date();
	nhour = d.getHours();
	nmin = d.getMinutes();
	if (nmin &lt;= 9) { nmin = "0" + nmin; }
	document.getElementById('logo').innerHTML = nhour + ":" + nmin;
	setTimeout("GetClock()", 1000);
}

Zusätzlich muss diese Funktion über einen EventListener eingebunden werden. Am besten im $(document).ready(), siehe nächstes Code-Beispiel.


	window.addEventListener("load",GetClock,false);

Die weiteren Modifikationen nutzen jQuery und müssen in der Funktion $(document).ready() eingebunden werden. Also wie folgt:


$(document).ready(function() {

  // HIER KOMMEN DIE EINZELNEN FUNKTIONEN HIN

});

Metanavigation in der Fusszeile

Das Ergänzen der Fusszeile ist relativ einfach. Hier kannst Du nach Belieben weitere Links ergänzen.


	var footernav = $('&lt;div id="footernav"&gt;&lt;a href="/fhem/docs/commandref.html" target="_blank"&gt;Commandref&lt;/a&gt; | &lt;a href="/fhem?cmd=style%20eventMonitor"&gt;Event monitor&lt;/a&gt;&lt;/div&gt;');
	$('#content').append(footernav);

Geräte mit dem Zusatz „-hidden“ verstecken

FHEM kann relativ unübersichtlich werden, wenn man viele Geräte in einem Raum hat. Dies kann man beispielsweise durch einen versteckten Raum lösen. Dann verliert man aber schnell den Überblick, weil man die Gerät nur mit Mühe den einzelnen Räumen zuordnen kann.

Hierfür habe ich mir eine Lösung einfallen lassen:

Jedes Gerät, dass den Zusatz „-hidden“ im Gerätenamen beinhaltet, wird ausgeblendet. 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


	if(document.URL.indexOf("showall") != -1) {
		//don't hide anything
	} else {
		$("div.devType:contains('-hidden')").parent('td').hide();
	}

Header beim Scrollen aus- bzw. eingeblenden

Mit Hilfe des folgenden Scripts, kannst Du den Header beim Scrollen aus- bzw. einblenden.


	// JQUERY VERSION:
	;( function( $, window, document, undefined )
	{
		'use strict';

		var elSelector		= '#hdr, #logo',
			elClassHidden	= 'header--hidden',
			throttleTimeout	= 50,
			$element		= $( elSelector );

		if( !$element.length ) return true;

		var $window			= $( window ),
			wHeight			= 0,
			wScrollCurrent	= 0,
			wScrollBefore	= 0,
			wScrollDiff		= 0,
			$document		= $( document ),
			dHeight			= 0,

			throttle = function( delay, fn )
			{
				var last, deferTimer;
				return function()
				{
					var context = this, args = arguments, now = +new Date;
					if( last &amp;&amp; now &lt; last + delay )
					{
						clearTimeout( deferTimer );
						deferTimer = setTimeout( function(){ last = now; fn.apply( context, args ); }, delay );
					}
					else
					{
						last = now;
						fn.apply( context, args );
					}
				};
			};

		$window.on( 'scroll', throttle( throttleTimeout, function()
		{
			dHeight			= $document.height();
			wHeight			= $window.height();
			wScrollCurrent	= $window.scrollTop();
			wScrollDiff		= wScrollBefore - wScrollCurrent;

			if( wScrollCurrent &lt;= 50 ) // scrolled to the very top; element sticks to the top
			{
				$element.removeClass( elClassHidden );
			}
			else if( wScrollDiff &gt; 0 &amp;&amp; $element.hasClass( elClassHidden ) ) // scrolled up; element slides in
			{
				//$element.removeClass( elClassHidden );
			}
			else if( wScrollDiff &lt; 0 ) // scrolled down
			{

				if( wScrollCurrent + wHeight &gt;= dHeight &amp;&amp; $element.hasClass( elClassHidden ) ) // scrolled to the very bottom; element slides in
				{
					//$element.removeClass( elClassHidden );
				}
				else // scrolled down; element slides out
				{
					$element.addClass( elClassHidden );
				}
			}

			wScrollBefore = wScrollCurrent;
		}));

	})( jQuery, window, document );

Ich wünsche Dir viel Spaß mit Deinem neuen FHEM Skin.