smartVISU Installation

Aus FHEMWiki
Version vom 26. Juni 2016, 16:41 Uhr von Joshi04 (Diskussion | Beiträge) (Komplette Überarbeitung/neuer Artikel im Rahmen des gesamten Themengebiets fronthem/smartVISU)
(Unterschied) ← Nächstältere Version | Aktuelle Version (Unterschied) | Nächstjüngere Version → (Unterschied)


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 php5-common php5-cgi php5

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

smartVISU 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.

smartVISU an richtige Stelle kopieren

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.

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

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

Installation überprüfen

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

Emblem-question-yellow.svgGgf. 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.

Installation SmartVISU.png

nicht offiziell veröffentlichte Version 2.8

Die Installation der nicht offiziell veröffentlichten Version 2.8 von smartVISU basiert auf diesem Git-Eintrag. Die Verwendung geschieht auf eigene Gefahr.

Da man das Softwarepaket für smartVISU direkt von der Quelle herunterläd, müssen die notwendigen Erweiterungen manuell eingefügt werden. Dabei ist der "Treiber" am wichtigsten.

Herunterladen von smartVISU von der Quelle 

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 Anpassungen 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/
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

Wie leicht zu erkennen, ist in diesem Beispiel das Root-Verzeichnis des Webserver /var/www/html und das Verzeichnis, in das smartVISU installiert wird "sv". Die smartVISU-Seite wird entsprechend nur mit http://<IP-Adresse>/sv aufgerufen.

ein eigenes "Haus" anlegen

Nun gilt es nur noch ein eigenes "Haus" anzulegen, dass man individuell konfiguriert.

  • im Ordner "/var/www/smartVISU/pages" einen neuen Ordner "MeinHaus" anlegen.
  • aus dem Ordner "../pages/_template" alles in den neuen Ordner ("/var/www/smartVISU/pages/MeinHaus") kopieren.
  • "rooms_menu.html" an eigene Gegebenheiten anpassen hierzu dienen die "_template-Dateien" als Orientierung.
  • alle rooms anlegen durch Kopien des Beispielraumes (room_sleeping.html) und passende icons und Überschriften verteilen. (SmartVisu Icons)
  • SmartVISU nutzt Twig als Template engine und die Seiten bestehen aus Blöcken und Widgets, die immer in doppelten geschweiften Klammern stehen {{ ... }}
  • Widget Syntax auf SmartVISU Doku nachschlagen und kopieren.
  • innerhalb eines Raums zwischen {% block content %} und {% endblock %} als Beispiel folgenden Abschnitt einfügen:
<h1><img class="icon" src='{{ icon0 }}scene_livingroom.png'/>Wohnzimmer</h1>
  <div class="preblock">
  </div>
  <div class="block">
    <div class="set-2" data-role="collapsible-set" data-theme="c" data-content-theme="a" data-mini="true">
      <div data-role="collapsible" data-collapsed="false" >
        <h3>Licht</h3>
          <table width="90%">
            <tr><td align="left" width="100px"> {{ basic.switch('Leselampe', 'Leselampe.sw', icon1~'light_floor_lamp.png', icon0~'light_floor_lamp.png') }}</td>
              <td>Leselampe</td>
            </tr>
          </table>
        </div>
      </div>
   </div>
  • Datei speichern und checken, dass die Rechte mindestens auf "755" stehen, ansonsten mit "sudo chmod 755" korrigieren.

Obwohl der folgende Teil bereits zur Einrichtung von fronthem gehört, sei es der Vollständigkeit halber des Beispiels hier trotzdem erwähnt:

  • In FHEM eine fronthemDevice Detailansicht öffnen
  • Nun sollten die GADs aufgelistet werden. Aus der Liste ein GAD auswählen (hier: "Leselampe.sw" wie im obigen Code-Beispiel definiert.) und die Parameter vergeben:
    device: <fhem-Name-des-fhem-devices> (in diesem Fall die Leselampe.sw)
    reading: state
    converter: OnOff
    cmd set: state
    write: ja (haken setzen)
    read: ja (haken setzen)
"state" immer klein schreiben und speichern nicht vergessen!
  • Die Settings für das Device gelten für alle Endgeräte, aber die read/write Rechte müssen für jedes Endgerät separat gesetzt werden.

Einrichtung Endgerät

Als letztes greift man vom Endgerät auf die smartVISU-Seiten zu und stellt auf der Config-Seite den Treiber, IP der Servers und den Port ein.

Unter smartVISU in die Konfigurationsoberfläche wechseln http://<IP-Adresse>/smartvisu/index.php?page=config bzw. Zahnrad = Config-Menü:

  • Im Feld "Interfaces" für pages das eigenes Haus auswählen (=Ordnername)
  • Der Pagecache sollte zumindest während der Einrichtung ausgeschaltet sein.
  • Im Feld I/O Connection den Treiber Fhem wählen
  • Die IP-Adresse des Servers mit dem Websocket-Server eintragen
  • Port 2121 einstellen

Nach allen Eintragungen die Konfiguration am unteren Ende der Seite speichern.

Damit die GADs nun im GAD-Editor auf der Detailseite von einem fronthemDevice auftauchen, ist es jetzt wichtig, die neue Seite in smartVISU einmal aufzurufen, damit im Hintergrund die GADs übertragen werden.

Vorausgesetzt, man hat vorher alle notwendigen Schritte für die Installation und Konfiguration von fronthem ausgeführt, kann man nun smartVISU in Verbindung mit FHEM benutzen.

Im Noramlbetrieb stellt man den Pagecache auf "on"- dann werden die templates compiliert gespeichert, was die Geschwindigkeit erhöht (Forum).

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.

Konfigurationsdateien

Konfigurationsdatei von smartVISU: 

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

Ordner und Dateien

Dokumenten Root für smartVISU: 

/var/www/html/sv/

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/<eigene page>
Abgerufen von „http://wiki.fhem.de/w/index.php?title=SmartVISU_Installation&oldid=15698“