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

Mit ** gekennzeichne Links auf dieser Seite sind Affiliatelinks.

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!

Skin-Version 1.2

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

FHEM-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

FHEM-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".


Newsletter

Trage Dich jetzt in den Newsletter ein und genieße dadurch viele Vorteile:

  • 5€-Gutschein als Dankeschön
  • Zugang zu exklusiven Inhalten
  • Rabattaktionen für Kurse
  • Angebote für Produkte

* Durch Angabe meiner E-Mail-Adresse erkläre ich mich damit einverstanden, dass mir regelmäßig Informationen und Produktempfehlungen aus dem Fachgebiet Smart Home zugesendet werden. Mit dem Eintrag akzeptieren Sie unsere Datenschutzbestimmungen. Meine Einwilligung kann ich jederzeit widerrufen.

Matthias Kleine

Matthias Kleine

Großer Fan und Anhänger von OpenSource-Projekten und erweiterbaren Haus-Automatisierungskomponenten. Je offener und flexibler das System, desto besser. Ich lege mich ungern auf einzelne Protokolle oder Standards fest, sondern probiere aus allen Welten das Beste zu verheiraten. Unterwegs als Softwareentwickler, Trainer und Blogger im Bereich Smart Home.

Auf YouTube und hier im Blog gibt es bereits unzählige kostenlose Videos, Informationen und Tutorials. Wenn Dir das noch nicht reicht, ist ein Training genau das richtige für Dich! Die folgenden Trainings haben den Vorteil, dass immer von Anfang an gestartet wird und Du ohne Vorwissen teilnehmen kannst.