SmartVisu – Eine Alternative zu TabletUI

Ich persönlich verwende TabletUI für mein Steuertablet im Flur. Aber es gibt natürlich noch andere Visualisierungsmöglichkeiten. Eine davon ist smartVISU. In diesem Beitrag möchte ich euch zeigen wie ihr smartVISU einrichtet und die ersten FHEM-Devices visualisiert. Da ich persönlich TabletUI verwende, wird dies überwiegend eine Anleitung zur Einrichtung sein und kein How-To zu einer kompletten Visualisierung von FHEM mit smartVISU. 

Vorbereitung

SmartVisu erfordert einige Vorbereitungen auf eurem System. Unteranderem ist es notwendig einen Webserver auf dem Raspberry einzurichten. Dies und die notwendigen zusätzlichen Pakete lassen sich mot folgendem Befehl installieren:  

sudo apt-get update && sudo apt-get -y install php5 libapache2-mod-php5 apache2 git

Damit später auf den Webserver zugegriffen werden kann, müssen die Besitzrechte angepasst werden. Der Benutzer "pi" muss natürlich angepasst werden.

sudo chown -R pi /var/www/html

sudo chmod -R 775 /var/www/html

sudo service apache2 restart

Installation von smartVisu

Anschließend kann die Installation von smartVisu begonnen werden. Dazu werden die Dateien von Github heruntergeladen und auf dem Raspberry entpackt. 

sudo mkdir ~/install

cd ~/install

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

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

Nachdem die benötigten Daten kopiert wurden, kann mit der Serverseitige-Konfiguration begonnen werden. 

cd /var/www/html

sudo chown -R www-data:www-data smartvisu

sudo curl -L https://cpanmin.us | perl - --sudo App::cpanminus

sudo cpanm Net::WebSocket::Server

sudo cpanm JSON

sudo cp -r /var/www/html/smartvisu/pages/_template/ /var/www/html/smartvisu/pages/MeineWohnung

Der Ordnername ".../pages/MeineWohnung" kann natürlich angepasst werden.

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

sudo chmod -R 777 /var/www/html/smartvisu

Die Installation auf dem Raspberry ist nun abgeschlossen. Nun kann mit der Definition in FHEM begonnen werden. 

Einrichtung unter FHEM

Die Verbindung zwischen smartVisu und FHEM läuft über ein fronthem-Device. Damit dies in FHEM eingerichtet werden kann, muss noch das benötigte Modul in FHEM installiert werden.

update force https://raw.githubusercontent.com/herrmannj/fronthem/master/controls_fronthem.txt

shutdown restart

Anschließend kann in FHEM ein fronthem-Device in FHEM eingerichtet werden.

define fronthem fronthem

Jedes Gerät, welches später auf smartVisu zugreifen möchte, benötigt nun ein separates fronthem-Device mit der entsprechenden IP-Adresse des Gerätes.

define MacBook fronthemDevice 192.168.2.136

Die FHEM-Konfiguration sollte nun erstmal über "save config" abgespeichert werden. 

erste Konfiguration von smartVisu

Ähnlich wie bei TabletUI wird auch smartVisu die Räume über HTML-Dateien geregelt. Um also Räume anzulegen, ist es am besten, wenn man eine FTP-Verbindung zum Raspberry aufbaut. Im Ordner "/var/www/html/smartvisu/pages/MeineWohnung" befinden sich nun schon diverse Template-Dateien.

Diese Template-Dateien erzeugen bereits eine kleine Demo von smartVisu. Des Weiteren befinden sich im Ordner "/var/www/html/smarvisu/pages" noch diverse andere Demo-Installationen.

Bevor wir nun mit der Einrichtung des eigenen smartVisu beginnen, empfiehlt sich ein erster Besuch der smartVisu Seite. Dazu einfach folgende URL aufrufen (die IP-Adresse ist die eures Raspberrys).

http://192.168.2.125/smartvisu

Je nachdem von welchem Gerät ihr die URL aufruft (Desktop oder Mobil) sieht die nun erscheinen Seite entsprechend aus. In meinem Fall habe ich die Seite von einem Desktop-PC aufgerufen. Über das Zahnrad könnt ihr nun auswählen, welche smartVisu-Konfiguration ihr anzeigen wollt. 

Unter Configuration lässt sich dann unter dem Reiter Interface die gewünschte Konfiguration auswählen. In unserem Fall also "MeineWohnung". Den Pagecache solltet ihr deaktivieren, damit Änderungen zeitgleich angezeigt werden. 

Des Weiteren sollt unter "I/O-Connection" die Verbindung zu FHEM eingestellt werden. Hier wird nun als Driver "Domotiga" ausgewählt mit der IP-Adresse eures Raspberrys und dem Port 2121. Alternativ kann auch "FHEM" als Driver verwendet werden.

Die Einstellungen lassen sich am Ende der Seite über "save" abspeichern. Über das Haus-Symbol oben links gelangt man nun zu seiner Konfiguration.

Räume und Etagen anlegen

Hier erkennt man nun das eine Etage (1st floor) und ein Raum (sleeping) eingerichtet wurde. Anhand der Dateien war dies bereits zu erahnen. Schauen wir also mal die einzelnen Dateien an.

Eine Datei ist die "rooms_menu.html". Wie der Name schon andeuten lässt, wird hier das Menü mit den Räumen definiert.

Hier erkennt man die erste Etage mit dem Name "1st floor" mit dem Raum "Sleeping". Um nun also mehr Räume in dieser Etage zu definieren oder einen neue Tag einzurichten, reicht aus den Code entsprechend zu kopieren. 

Wichtig beim kopieren ist, dass ihr die Parameter richtig angibt. Es gibt drei Parameter, welche je Raum angepasst werden müssen.

Zu einen den Namen der HTML-Datei für den Raum. In diesem Fall muss also im Ordner ".../pages/MeineWohnung" eine HTML-Datei mit dem Namen "room_schlafzimmer" erstellt werden. Der zweite Parameter ist das Icon. Ein Liste aller Icons finder ihr hier. Der letzte Parameter ist der anzuzeigender Text. In diesem Fall "Schlafzimmer".

Bevor ihr nun mit der Device-Konfiguration startet, legt euch die benötigten HTML-Datein an. Für jeden angelegten Raum eine extra Datei.

Device einrichten - basic switch

Das Einrichten eines Devices ist relativ einfach. Im Gegensatz zu TabletUI, wo die Konfiguration komplett in der HTML-Datei erfolgt, erfolgt die Konfiguration in smartVisu auf beiden Seiten ab. Zum einen in der HTML-Datei und zum anderen in FHEM selber., wobei der größte Teil in FHEM konfiguriert wird. 

Zur Veranschaulichung wird nun ein einfacher Schalter (Funksteckdose) im Wohnzimmer eingerichtet.

Einrichtung innerhalb der HTML-Datei

Eine leere Raum-Datei sieht wie folgt aus:

Die einzurichtenden Devices werden nun im Block Content platziert.

Die Definition in der HTML-Datei folgt dabei folgendem Syntax:

<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(
                   'Stehlampe', 
                  'Stechlampe.sw',
                    icon1~'light_floor_lamp.png',
                    icon0~'light_floor_lamp.png') }}
                </td>>
                <td>Stehlampe</td>
            </tr>
          </table>
      </div>
  </div>
</div>

Auch hier gibt es wieder ein paar Parameter die angepasst werden müssen.

Am Anfang wird der Name des Raumes festgelegt. Dies spiegelt die Überschrift des Raumes wieder. Als nächstes wir der Übersichts-Name angegeben. Dies ist vergleichbar mit dem Attribut "group" in FHEM. Darauf folgt die Definition des Devices. Ein Parameter innerhalb dieser Definition ist der Name des Devices, der angezeigt werden soll. Der zweite Parameter ist die eigentliche smartVisu Konfiguration. 

Diese smartVisu-Konfiguration wird immer innerhalb der doppelten geschweiften Klammern angegeben. In diesem Fall wird ein einfacher Schalter definiert - "basic.switch(...)". Eine Liste aller möglichen Widgets findet ihr auf der smartVisu-Seite

Die Syntax für den basic.switch ist wie folgt:

{{ basic.switch(id, gad, pic_on, pic_off, val_on, val_off) }}

Parameter

Beschreibung

id

eindeutige ID des Widgets

gad

Die Verbindungseinheit zwischen FHEM und smartVisu. Die Endung lautet .sw

Ich empfehle euch, hier den gleichen Namen zu verwenden wie die id. Dies fördert die Übersichtlichkeit.

pic_on

Das Icon, welches für den on-state verwendet werden soll. Dieser Parameter ist optional.

pic_off

Das Icon, welches für den off-state verwendet werden soll. Dieser Parameter ist optional.

val_on

Wert, welcher für den on-State gesendet wird. Dieser Wert ist optional. Standardwert: 1

val_off

Wert, welcher für den off-State gesendet wird. Dieser Wert ist optional. Standardwert: 0

Im Fall meiner Stehlampe habe ich die Konfiguration wie folgt gemacht:

{{ basic.switch('Stehlampe', Stehlampe.sw, icon1~'light_floor_lamp.png', icon0~'light_floor_lamp.png') }}

Wie man erkannt, habe ich die beiden optionalen Werte "val_on" und "val_off" weggelassen, da bei einem einfachen Switch die Standartwerte 1 und 0 bereits ausreichen. Das "icon1~" bzw. "icon0~" vor dem Namen des Icons bewirkt, dass das Icon entweder eingefärbt wird (on) oder weiß bleibt (off).

Möchte man nun weitere Widgets einrichten, so muss man einfach nur den Code innerhalb des gelben Kasten kopieren und die Parameter entsprechend anpassen.

Nachdem die Widgets definiert wurden, kann die bearbeitete HTML-Datei auf den Raspberry hochgeladen werden. Für die weitere Einrichtung in FHEM ist es nun notwendig, die bearbeitete Seite kurz aufzurufen. Dazu einfach smartVisu öffnen und auf den entsprechenden Raum gehen. 

Hier sieht ihr nun das eingerichtete Widget, welches jedoch noch ohne Funktion ist.

Einrichtung innerhalb FHEM

Die Einrichtung in FHEM erfolgt nun über das eingerichtete fronthem-Device. Wer dies noch nicht gemacht hat, sollte dies nun nachholen:

define MacBook fronthemDevice 192.168.2.136

Öffnet man nun das Device sieht man direkt das eingerichtete smartVisu-Widget in der Liste.

Nach einem Klick auf das Widget "Stehlampe.sw" öffnet sich das Konfigurationsmenü des Widgets. Hier kann nun die weitere Einrichtung des Widgets vorgenommen werden.

Mit Hilfe des Drop-Down-Menüs lässt sich zunächst der "mode" feststellen. In diesem Fall ist es ein "itim". unter "itim" versteht man ein Hardware-Device. Alternative wäre hier ein Graph. 

Unter "device" wird das zusteuernde FHEM-Device eingetragen. In meinem Fall das Device "WZ_Papierlampe". 

Im Feld "reading" wird das Reading eingetragen, welches abgefragt werden soll. Nach diesem Reading werden die Icons gesetzt. 

Unter "converter" wird angegeben, wie FHEM die von smartVisu empfangenen Befehle interpretieren soll. In diesem Fall als On und Off. Eine Übersicht aller converter findet ihr auf der FHEM-Wikiseite.

Das Feld "cmd set" beinhaltet das Reading, welches durch ein Klicken in smartVisu gesetzt werden soll.  

Des Weiteren muss smartVisu "read-" und "write-Rechte" vergeben werden. Dies geschieht durch aktivieren des entsprechenden Auswahlfeldes.  

Speichert man nun die Konfiguration ab, lässt sich über das Widget das FHEM-Device schalten.

weitere Widgets 

Neben dem "basic.switch" gibt es natürlich noch weitere Widgets. Eine gute Übersicht erhält man auf der smartVisu Homepage. Zusätzlich gibt es spezielle Widgets, welche von diversen Users zur Verfügung gestellt wird. Eine Übersicht darüber erhalt man im FHEM-Wiki.

In der smartVisu findet man zudem eine ausführliche Dokumentation. So lässt sich relativ einfach diverse Widgets definieren. Bei Fragen könnt ihr einfach ein Kommentar hinterlassen oder das FHEM-Forum einen Besuch abstatten.

Hinterlasse einen Kommentar

avatar
Fotos und Bilder
 
 
 
sonstiges Dateiformat
 
 
 
  Subscribe  
Benachrichtige mich zu: