FHEM Tutorial-Reihe - Part 5: Look and Feel von FHEM verändern

Mit ** gekennzeichnete Links auf dieser Seite sind Affiliatelinks.

FHEM Tutorial-Reihe - Part 5: Look and Feel von FHEM verändern
FHEM Tutorial-Reihe - Part 5: Look and Feel von FHEM verändern
  • Matthias Kleine
  • 16.05.2016
  • Darstellung

In diesem etwas kürzeren Video nehmen wir uns das Design vor. Ziel ist, ein etwas schöneres Erlebnis zu haben, während man sein Smart-Home-Erlebnis konfiguriert und verwaltet. Ich habe dabei für Euch ein exclusives haus-automatisierung.com-Design vorbereitet, welches man mit sehr wenig Aufwand integrieren kann. Doch dazu mehr im Video!

Achtung: Dieser Inhalt wurde vor mehreren Jahren aufgenommen und ist nicht mehr aktuell! Es ist nicht empfohlen nach dieser Anleitung vorzugehen.
Wichtig: Bitte Skin-Version 2.x einsetzen (siehe unten)

Skin-Version 1.2

*Bitte beachte, dass Version 1 veraltet ist, weiter unten im Beitrag findest Du eine aktualisierte Variante**

Hausbau-Kurs

Im Video wird noch der Skin in Version 1.1/1.2 gezeigt. In einem späteren Video (siehe nächste Überschrift) führen wir ein Update auf die etwas ausgereiftere Version 2.0 durch

Bevor das Tutorial durchgeführt wird, muss der Style auf “Default” geändert werden. Andernfalls kommt es zu seltsamen Seiteneffekten und FHEM sieht sehr komisch aus.

Das Design auf GitHub findet ihr hier

Folgende Befehle braucht ihr:

cd /opt/fhem/www
sudo apt-get install git-core
git clone https://github.com/klein0r/fhem-style-haus-automatisierung.git hausautomatisierung-com
sudo chown -R fhem:dialout hausautomatisierung-com
sudo chmod -R 0777 hausautomatisierung-com
attr CssFiles hausautomatisierung-com/styles.css

Skin-Version 2.0

Hausbau-Kurs

Als erstes muss der alte Skin deinstalliert / gelöscht werden. Wie das geht ist im Video zu sehen. Im Schnelldurchlauf sieht das Ganze wie folgt aus:

  • Das Attribut “CssFiles” auf dem WEB-Device löschen
  • Per ssh auf den Raspberry connecten und folgenden Befehl ausführen:
sudo rm -rf /opt/fhem/www/hausautomatisierung-com/

Das wars auch schon. Danach gehts mit der Installation des neuen Skins weiter.

update add https://raw.githubusercontent.com/klein0r/fhem-style-haus-automatisierung/version-2/controls_ha_theme.txt
update all ha_theme

Danach unter “Select style” einfach das Design auswählen und alle sollte schön aussehen. Um die Icons und noch ein wenig JavaScript einzufügen, müssen die beiden folgenden Befehle ausgeführt werden:

attr WEB JavaScripts codemirror/fhem_codemirror.js hausautomatisierung-com/custom.js
attr WEB roomIcons Save.config:message_attention

Willkommen auf Version 2.0. Ab jetzt wird mit einem “Update all” auch der Skin automatisch mit aktualisiert und ihr müsst nicht umständlich über ssh und git gehen. Also alles ein wenig mehr in der normalen “FHEM-Manier”.

Du willst mehr?

Smart-Home-Trainings von A-Z

Steig noch tiefer in die Themen ein und meistere Deine Projekte! Über 13.000 Teilnehmer konnten sich schon von der Qualität der Online-Kurse überzeugen.

ioBroker-Master-Kurs

ioBroker-Master-Kurs

Mehr Infos
Hausbau-Kurs

Hausbau mit KNX

Mehr Infos
Lox-Kurs

Lox-Kurs

Mehr Infos
Node-RED-Master-Kurs

Node-RED-Master-Kurs

Mehr Infos