SmartVISU Installation

Dieser Artikel beschreibt die Installation des Web-Frontends smartVISU und berücksichtigt mehrerer Alternativen für unterschiedliche Web-Server. Zum Betrieb von smartVISU mit FHEM ist die Installation und Konfiguration von fronthem erforderlich.

Alle Artikel zur Thematik fronthem/smartVISU sind hier kategorisiert.

---

Für die Installation ist es immer sinnvoll, von einem auf aktuellem Stand befindlichen System zu starten.

Für das Betriebssystem (Linuxderivat)

sudo apt-get update

sudo apt-get upgrade

Für FHEM

update in der Eingabezeile

Die Installation lässt sich in 4 Bereiche unterteilen.

Webserver installieren

Welcher Webserver zum Einsatz kommt, ist unerheblich. Im Folgenden sind Beispiele für lighttpd, nginx und Apache2 zu finden. Es wird nur eine Installation benötigt.

lighttpd

Dieses Beispiel basiert auf diesem Forumsbeitrag.

Webserver installieren:

sudo apt-get install lighttpd

PHP installieren:

sudo apt-get install php-common php-cgi php

PHP konfigurieren:

sudo lighty-enable-mod fastcgi-php

Webserver-Dienst einmal neu starten, damit die Einstellungen wirksam werden:

sudo service lighttpd force-reload

Welchseln in des Root-Verzeichnis des Webservers (bei Bedarf, wenn sich das Root-Verzeichnis einer Distribution woanders ist, muss dieser Pfad entsprechend angepasst werden):

cd /var/www

Setzen des Besitzers und der Gruppe für das Root-Verzeichnis (TODO: Ist dieser Schritt wirklich notwendig?):

sudo chown www-data:www-data /var/www

Setzen der Berechtigungen des Root-Verzeichnis (TODO: Ist dieser Schritt wirklich notwendig?):

sudo chmod 775 /var/www

nginx

mit PHP5

Dieses Beispiel basiert auf diesem Forumsbeitrag.

Für die Installation des Webservers und PHP5 werden folgende Pakete benötigt:

sudo apt-get install nginx php5-fpm

Die Konfiguration für PHP muss in der entsprechenden Konfigurationsdatei vorgenommen werden:

sudo nano /etc/nginx/sites-enabled/default

Folgende Konfiguration sollte direkt funktionieren:

server {
         listen 80;
         root /var/www;
         index index.html index.php;
         server_name localhost;
         location / {
               try_files $uri $uri/ /index.php?$args;
         }
         location ~ \.php$ {
                 try_files $uri =404;
                 fastcgi_pass unix:/var/run/php5-fpm.sock;
                 fastcgi_index index.php;
                 fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
                 include fastcgi_params;
          }
}

mit PHP7

Ubuntu 16.04 läuft standardmäßig mit PHP7. Der Betrieb ist noch nicht zu 100% getestet und daher ohne Garantie.

Für die Installation des Webservers und PHP werden folgende Pakete benötigt:

sudo apt-get install nginx php7.0-fpm

Die Konfiguration für PHP muss in der entsprechenden Konfigurationsdatei vorgenommen werden:

sudo nano /etc/nginx/sites-enabled/default

Folgende Konfiguration sollte direkt funktionieren:

server {
        listen 80 default_server;
        listen [::]:80 default_server;
        root /var/www/html;
        index index.php index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                try_files $uri $uri/ =404;
        }
        location ~ \.php$ {
                 try_files $uri =404;
                 fastcgi_split_path_info ^(.+\.php)(/.+)$;
                 fastcgi_pass unix:/run/php/php7.0-fpm.sock;
                 fastcgi_index index.php;
                 include fastcgi.conf;
                 fastcgi_read_timeout 600;
         }
         location ~* \.(js|css|png|jpg|jpeg|gif|ico|eot|otf|ttf|woff)$ {
                 access_log off; log_not_found off; expires 30d;
         }
         location = /robots.txt { access_log off; log_not_found off; }
         location ~ /\. { deny all; access_log off; log_not_found off; }
}

Apache2

Dieses Beispiel basiert auf diesem Blogeintrag.

Für die Installation des Webservers und PHP5 werden folgende Pakete benötigt:

sudo apt-get install apache2 php5 libapache2-mod-php5

Für das git /cleaninstall: da liegt die erweiterte smartVISU, mit Mandanten und reparierten widgets (wo nötig) - ansonsten aber unverfälscht und nicht mit widgets erweitert.

smartVISU Installation

Für das Klonen (Herunterladen) wird folgendes Paket benötigt:

sudo apt-get install git

Verfügbare Versionen (Stand Juli 2016)

Bis zur V2.7 gibt es ein offizielles Release, auf dem sowohl die Dokumentation auf der Seite [www.smartVISU.de] basiert, als auch das nachfolgend beschriebene smartvisu-cleaninstall.

Die nicht offizielle V2.8 kann aus den Entwicklungszweig von smartVISU heruntergeladen werden, muss aber im Anschluss um die Erweiterungen für den Betrieb mit FHEM ergänzt werden. Ob es ein offizielles Release V2.8 geben wird, ist derzeit unbekannt. Unabhängig davon wird an einem Fork in Zusammenhang für den Betrieb mit FHEM gearbeitet.

Zwar sollten alle Widgets, die auf V2.7 lauffähig sind, auch mit V2.8 kompatibel sein, dieses ist derzeit aber nicht getestet und kann nicht garantiert werden. Die Widgets müssen bei Bedarf entsprechend angepasst werden. Andererseits gibt es bereits Widgets, die V2.8 voraussetzen. Bei manchen Widgets sind die Voraussetzungen ist der Dokumentation beschrieben.

Die Unterschiede zwischen V2.7 und V2.8 sind in diesem Beitrag zusammengefasst.

Derzeit kann aber bereits empfohlen werden, bei einer Neuinstallation gleich V2.8 zu installieren (Forum).

smartVISU-cleaninstall, V2.7

Herunterladen

Für die Installation gibt es ein fertig zusammengestelltes Paket aus dem git-Repo von Jörg Herrmanns ([1]).

Hierbei handelt es sich um das Original smartVISU inkl. einigen Anpassungen (fhem-Treiber, Widget-Korrekturen, ...).

Einrichten eines Installationsordners im home-Verzeichnis:

mkdir ~/install

Wechseln in das Verzeichnis:

cd ~/install

Klonen der Pakets:

git clone https://github.com/herrmannj/smartvisu-cleaninstall.git

Dabei wird der Unterordner ./smartvisu-cleaninstall angelegt, in den die Dateien heruntergeladen werden.

Kopieren in das Webserver Root-Verzeichnis

Damit der Webserver die Seiten von smartVISU zur Verfügung stellt, müssen diese an die richtige Stelle in Abhängigkeit des verwendeten Webservers und Konfiguration kopiert werden. Ggf. muss die Konfiguration des Webservers entsprechend angepasst werden.

Das neu erstellte Verzeichnis in das Root-Verzeichnis des Webservers kopieren. Dass, wie in diesem Fall angegeben, das Verzeichnis /var/www/ das richtige Verzeichnis ist, kann z.B. dadurch bestätigt werden, dass dort bereits die Default-Seite des Webservers nach der Ersteinrichtung zu finden ist. Bei Bedarf ist das Verzeichnis anzupassen.

sudo cp -rp smartvisu-cleaninstall /var/www/smartVISU

Selbstverständlich lässt dich auch ein anderes Installationsverzeichnis wählen. Die folgenden Schritte müssen dann entsprechend angepasst werden.

Config.ini kopieren

Hierbei handelt es sich um die Hauptdatei mit der das Verhalten von smartVISU gesteuert wird.

Die Datei "config.ini.default" muss zu "config.ini" umbenennen oder besser kopiert werden:

sudo cp /var/www/smartVISU/config.ini.default /var/www/smartVISU/config.ini

Berechtigungen setzen

Später wird zumindest die Konfiguration von dem, was auf dem Endgerät angezeigt werden soll, vom Endgerät aus konfiguriert. Damit dieses auch funktioniert, müssen die Berechtigungen der Seiten entsprechend angepasst werden.

Wechseln in das Verzeichnis:

cd /var/www

Setzen des Besitzers und der Gruppe für das Root-Verzeichnis von smartVISU

chown -R www-data:www-data smartVISU

Setzen der Berechtigungen für das Root-Verzeichnis "smartVISU" und alle Unterordner

chmod -R 775 smartVISU

ggf. Gruppenmitgliedschaft anpassen

Dieser Schritt ist optional und dann hilfreich, wenn man mit einem normalen user z.B. über fileZilla die Dateien austauschen möchte. Da der Schritt zulasten der Sicherheit geht, sollte man ihn nach Abschluss der Konfiguration ggf. wieder rückgängig machen.

In diesem Beispiel wird der user "pi" zur Gruppe www-data hinzugefügt. Verwendet man einen anderen user, muss dieses selbstverständig angepasst werden.

sudo usermod -a -G www-data pi

Rückgängig machen kann man die Gruppenzugehörigkeit über

sudo deluser pi www-data

Installation überprüfen

Beim Aufruf der Seite http://<IP-Adresse>/smartVISU sollte folgende Seite angezeigt werden:

Ggf. in der php.ini (error_reporting) die Ausgabe von Warnings abschalten, wenn so was kommt wie "Notice: Undefined index..."

Diese Seite wird ggf. nur einmal direkt nach der Ersteinrichtung angezeigt und ist im Folgenden nicht mehr notwendig.

nicht offizielle Version, V2.8

Die Beschreibung für die Installation der nicht offiziellen Version 2.8 von smartVISU basiert auf diesem Git-Eintrag von [user=dev0].

Da man das Softwarepaket für smartVISU direkt aus dem Entwicklungszweig herunterläd, müssen die notwendigen Erweiterungen für den Betrieb mit FHEM nachträglich manuell eingefügt werden. Dabei ist der "Treiber" am wichtigsten.

Wie leicht zu erkennen, ist im folgenden Beispiel das Root-Verzeichnis des Webservers /var/www/html und das Verzeichnis, in das smartVISU installiert wird "sv". Die smartVISU-Seite wird am Ende der Installation entsprechend mit http://<IP-Adresse>/sv aufgerufen.

Anpassen der Gruppenmitgliedschaften kann nach dem oben beschriebenen Muster durchgeführt werden.

Herunterladen

Die Dateien werden direkt aus dem Entwicklungszweig heruntergeladen.

git clone https://github.com/Martin-Gleiss/smartvisu.git

Kopieren in das Webserver Root-Verzeichnis

sudo cp -rp smartvisu /var/www/html/sv

Herunterladen der Erweiterungen für FHEM

git clone https://github.com/herrmannj/smartvisu-cleaninstall.git

Kopieren der Erweiterungen

sudo cp ./smartvisu-cleaninstall/readme.txt /var/www/html/sv/
sudo cp ./smartvisu-cleaninstall/lib/functions_config.php /var/www/html/sv/lib/
sudo cp ./smartvisu-cleaninstall/lib/includes.php /var/www/html/sv/lib/
sudo cp ./smartvisu-cleaninstall/config.ini.default /var/www/html/sv/
sudo cp ./smartvisu-cleaninstall/pages/base/configure.php /var/www/html/sv/pages/base/
sudo cp ./smartvisu-cleaninstall/driver/io_fhem.js /var/www/html/sv/driver/
sudo cp ./smartvisu-cleaninstall/driver/io_fhem.min.js /var/www/html/sv/driver/

Config.ini kopieren

sudo cp /var/www/html/sv/config.ini.default /var/www/html/sv/config.ini

Setzen der Berechtigungen (Besitzer und Gruppe)

cd /var/www/html
sudo chown -R www-data:www-data sv

Troubleshooting

SSL

Wird derzeit nicht unterstützt (Forum).

Performanceproblem

Während der Entwicklung gab es mehrere Evolutionen, was die Verbindung über den Treiber angeht. Trotzdem hat auch die Platform, auf der smartVISU läuft einen gehörigen Anteil an der Reaktivität der Oberfläche. Darüber hinaus hat selbstredend die Komplexität einer Seite Einfluss auf die Geschwindigkeit. Mit einem Webserver auf dem RPi2 scheint es noch potential nach oben zu geben, setzte man eine performantere Platform ein (Forum).

Config-Seite anstatt der individuellen Seite

Es wurde vergessen, die Datei config.ini.default nach config.ini zu kopieren (Forum).

Zugriffsprobleme mit Apache

Anscheinend gab es vereinzelt Zugriffsprobleme auf das smartVISU-Vereichnis, die sich aber mit dieser Erweiterung der Apache-Konfiguration beheben lies (Forum):

<Directory "/var/www/smartvisu">
    Options +Indexes FollowSymLinks +ExecCGI
    AllowOverride AuthConfig FileInfo
    Order allow,deny
    Allow from all
</Directory>

404 not found

Wird noch nicht einmal die Seite gefunden (404), sind bereits die statischen Seiteninhalte der Webseite nicht richtig konfiguriert. Es muss sichergestellt werden, dass eine Datei im Verzeichnis von smartVISU von einem Endgerät angezeigt werden kann (Forum).

*.js dateien

Sollte jemand Änderungen an den *.js Dateien bearbeiten muss man daran denken, dass in der config.ini ganz unten vereinbart wird welche Version der Datei benutzt wird (Forum).

verschiedene Devices, verschiedene Anzeigen

Möchte man sicherstellen, dass auf allen Endgeräten die gleiche page konfiguriert ist, verschiebt man den entsprechenden Teil in der config.ini in den [default]-Bereich.

An dieser Stelle sei eindringlich empfohlen, diese Änderung nur bei nicht laufendem Websocket durchzuführen und in jedem Falle ein Backup der Datei vorzuhalten. Bei Syntaxfehlern wird diese Datei neu erzeugt und überschreibt ohne Nachfrage die Vorversion (Forum) (Forum).

Welcher Treiber ist installiert

Um zu prüfen, welche Version vom Treiber man aktuell verwendet, kann man im Browser die Konsole öffnen und nach einem page reload diesen Log-Eintrag suchen:

[io.fhem]: init [V1.10] (address= ...

In diesem Beispiel ist es Version 1.10 (Forum).

neue Clients

Das Anlegen neuer Clients In smartVISU müssen nicht händisch ergänzt werden. In der config.ini gibt es den parameter auto_add = true|false. Wenn dieser auf true steht, werden neue Clients automatisch in smartVISU angelegt und bekommen eine Kopie der default Einstellungen. Im Anschluss können über die Config-Seite die individuellen Einstellungen über die smartVISU-Oberfläche konfiguriert und gespeichert werden (page, design, evtl. calender, etc) (Forum).

Ordner und Dateien

Auch wenn es im Normalfall nicht notwendig ist sollte, kann es manchmal sinnvoll sein, den genauen Speicherort aller Dateien und Konfigurationsdateien zu kennen und entsprechend Debugging-Trigger hinzuzufügen oder Konfigurationen direkt zu korrigieren.

Die folgenden Pfadangaben gehen davon aus, dass das Root-Verzeichnis des eingesetzten Webservers /var/www/html/ ist und smartVISU im Unterordner /var/www/html/sv liegt.

Dokumenten Root für smartVISU:

/var/www/html/sv/

Konfigurationsdatei von smartVISU:

/var/www/html/sv/config.ini

Treiber:

/var/www/html/sv/driver/io-fhem.js

/var/www/html/sv/driver/io_fhem.min.js 

Temp-Ordner:

/var/www/html/sv/temp

Template-Ordner für neue "page":

/var/www/html/sv/pages/_template

Eigener Page-Ordner

/var/www/html/sv/pages/<eigeneSeite>