FHEM Tutorial-Reihe - Part 5: Look and Feel von FHEM verändern
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**
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
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”.
