Ausgangspunkt

Basis meines Setups ist SmartHomeNG in neuster Version, dazu die SmartVISU 2.9. Vorgeschaltet ist NGINX als ReverseProxy wie einst in https://www.smarthomeng.de/nginx-als-reverseproxy beschrieben. Auf dem Tablet selber testete ich mich erneut durch diverseste Anleitungen zum automatischen Einschalten via Bewegungserkennung. Die Anleitungen basierten auf den Apps / Kombinationen der Apps MacroDroid, Tasker und Motion Detector. Ein Teil dieser Apps ist kostenpflichtig. Via Tasker und Motion Detector konnte ich das Ganze zumindest für 24 Stunden lauffähig bekommen. Allerdings stellte ich fest, dass oft eine der Apps wegen CPU Überlastung des Geräts beendet wurde. Auch landete ich regelmäßig in einem Zustand, in dem das Display des Tablets einfach nicht mehr ausgehen wollte, was sogar in leichtem Einbrenneffekt im OLED resultierte. Auch die Einrichtung des Ganzen war alles andere als einfach…

Frustriert wollte ich schon aufgeben, da bin ich auf die App „Fully Kiosk Browser & App Lockdown“ (bzw. https://www.fully-kiosk.com/de/) gestoßen. Vom Namen her klang das ganze etwas etwas seltsam, stellte sich im Nachhinein aber als praktikable und super einfache Lösung heraus.
In der Basisversion ist die App kostenlos. Für das was ich vorhatte (Authentifizierung via Clientzertifikaten + Bewegungserkennung) musste ich leider die volle Version für stolze 6.90 € (pro Gerät) freischalten.

Setup

Nach dem Download aus dem Playstore und der kostenpflichtigen Freischaltung der vollen Features, geht man in der App erstmal über die linke Randleiste in den Bereich „Settings“.

Unter „Web Content Settings“ muss als erstes die Start URL auf den DynDNS HTTPS-Einstiegspunkt für die smartVISU gelegt werden. Später habe ich die Start-URL hier noch angepasst, da ich ein 3-spaltiges Layout in die smartVISU implementiert habe, um die volle Breite des Tablets optimal zu nutzen.

Die Authentifizierung wird als nächstes im Bereich „Advanced Web Settings“ eingerichtet.

Relativ weit unten kann man mit der kostenpflichtigen PLUS Version der App das „Client Certificate File“ angeben. Über „PICK A FILE“ kann hier der volle Pfad auf die p12 Zertifikatsdatei ausgewählt werden, welche auf dem Gerät abliegen muss. Da das Clientzertifikat mit Passwort geschützt ist, muss dieses im darunterliegenden Punkt „Client Certificate Password“ gesetzt werden.

Würde man keine Clientzertifikate verwenden oder möchte man nicht für die PLUS Version zahlen, könnte man auch unter „Web Content Settings“ einfach den User und das Passwort für eine Basic Authentication hinterlegen.

Schließt man die Konfiguration nun, kann man links unter „Goto Start URL“ bereits den Zugriff testen.

Motion Detection

Der „Fully Kiosk Browser“ verfügt über eine integrierte Bewegungserkennung, die sich in meinen Tests robust und wenig CPU-lastig erwiesen hat. Auch im Dauerbetrieb gibt es hier keinerlei Probleme und die Bewegungserkennung zum Einschalten des Displays funktioniert einwandfrei, so lange der Browser die aktive Anwendung ist.

Die Einstellungen könnt ihr ebenfalls unter „Settings“ und dann „Motion Detection (PLUS)“ setzen. Die Bewegungserkennung gibt es – genauso wie die Clientzertifikate – nur in der Vollversion. Die gesetzten Einstellungen sind unten zu sehen. Sicher kann man je nach räumlicher Situation auch an der Detector Sensitivity und der Detector Frame Rate noch Feintuning betreiben.

Nach diesen Einstellungen konnte ich das Ganz erfolgreich in Betrieb nehmen. Mit einem dreispaltigen Layout kommt die smartVISU hier zudem voll zur Geltung. Das dreispaltige Layout habe ich mit einem einfachen <div class=“block“ style=“width: 33%;„> in den „block“ DIVs erreicht.

ich wurde vor längerer Zeit gefragt, ob ich den Weg meiner Implementierung mit Apache hier niederschreiben könnte, was ich hiermit erledigen möchte.

Warum man das macht und wie das ganze mit NGINX funktioniert hat psilo sehr gut auf dieser Seite erklärt!

Deswegen möchte ich auch hier nur auf die Änderungen zu Apache eingehen und setzte also Voraus, dass man weiß was man erreichen will und auch über die genannte Seite von psilo geschaut hat!

Als kleine Änderung will ich hier gleich anmerken, dass ich keine extra Maschine als Reverse Proxy einsetzte, da ich bei mir soweit alles abgesichert habe und darin einige Erfahrung habe

Damit gehe ich also auch davon aus, dass ihr Apache auch für eure smartVISU einsetzt, wie ich es mache. Falls nicht müsst ihr natürlich apache nachinstallieren.

Unter Debian/Ubuntu/Raspbian funktioniert das mit:

sudo apt-get update
sudo apt-get install apache2

Unter Ubuntu 18.04 habe ich auch keine weiteren Module (wie libapache2-mod-XXX) für Apache benötigt. Ob dies bei allen Debian-basierenden Distributionen der Fall ist müsste man im Einzelfall prüfen. Man wird es auf jeden Fall merken, wenn sich die kommenden Befehle zum aktivieren der Module nicht durchführen lassen.

Nun müssen wir die folgenden Module aktivieren:

sudo a2enmod proxy_wstunnel
sudo a2enmod rewrite
sudo a2enmod setenvif

Bei Apache arbeite ich gerne nach dem modularen Prinzip, weswegen ich mir für die Einstellungen die ich brauche, einer eigene Konfigurationsdatei mit dem Namen /etc/apache2/smartvisu.conf angelegt habe, die ich hier entsprechend erläutern möchte.

<IfModule mod_rewrite.c>
   RewriteEngine on

   # Eine Umleitung vom Ordner zur index.php (es gab da mal einen Bug,
   # in der alten VISU, keine Ahnung ob das noch aktuell ist, schaden
   # tut es aber nicht, man kann es aber gerne auch weglassen)
   RewriteCond %{REQUEST_URI} ^/smartVISU$ [NC,OR]
   RewriteCond %{REQUEST_URI} ^/smartVISU/$ [NC]
   RewriteRule .* /smartVISU/index.php [R=302,L]

   # Mit dieser Definition wird der Reverse Proxy für Websocket aktiviert
   # Da wie oben schon erwähnt, die VISU und SH bei mir auf dem lokalen Host
   # läuft, verwende ich hier als Ziel auch localhost. Das kann man aber
   # natürlich Anpassen und soll auch nur als Beispiel dienen.
   <IfModule mod_proxy.c>

      ProxyPreserveHost On
      ProxyVia On

      # socket.io 1.0+ starts all connections with an HTTP polling request
      RewriteCond %{QUERY_STRING} transport=polling [NC]
      RewriteRule /(.*) http://localhost:2424/$1 [P]

      # When socket.io wants to initiate a WebSocket connection, it sends an
      # "upgrade: websocket" request that should be transferred to ws://
      RewriteCond %{HTTP:Upgrade} websocket [NC]
      RewriteRule /(.*) ws://localhost:2424/$1 [P]
   </IfModule>

   # Hier ist Platz für spezielle Ausnahmen (die wie unten mit SetEnvIf
   # gezeigt nicht abgebildet werden können), z.B. für eine Manifest-Datei die
   # ich mir in die VISU rein Programmiert habe. Hier wird beim Auffinden
   # des entsprechenden Query-Strings die Umgebungsvariable
   # no_auth_required auf 1 gesetzt, was dann weiter unten ausgewertet wird
   # und dann dazu führt, dass keine Anmeldung erforderlich ist
   RewriteCond %{QUERY_STRING} page=manifest
   RewriteRule ^/smartVISU/index.php - [E=no_auth_required:1]
   # !! Das ist natürlich nur ein Beispiel und wäre bei euch nicht erforderlich !!

</IfModule>

# Hier definiere ich wann man sich anmelden muss und wann nicht und
# das gilt dabei für den kompletten Webserver Stamm also ab der Wurzel.
# Das ist !Wichtig!, da so auch automatisch die Websocket-Verbindung
# per Basic Auth geschützt wird!
<Location />
   # Hier kann ich dann wieder Dinge freigeben, die ohne Anmeldung funktionieren sollen
   # (wie auch weiter oben im Beispiel, nur das es mit SetEnvIf etwas einfacher geht)
   # z.B. kann sich jeder meine Temperatur Statistik im Unterordner /mytemplogger ohne
   # Anmeldung ansehen, dazu setzte ich wieder die Umgebungsvariable no_auth_required auf 1
   SetEnvIf Request_URI ^/mytemplogger no_auth_required=1

   # Dann definiere ich die Basic Auth Parameter
   AuthName "Private"
   AuthType Basic
   AuthUserFile /etc/apache2/htpasswd
   Require valid-user

   # Hier gebe ich an, dass man sich über die lokalen Netze nicht anmelden muss,
   # dass muss also jeder für sich Anpassen. Wer kein IPv6 hat kann die /64 Adressen
   # natürlich auch weg lassen
   Require ip 192.168.XX.0/24 2a02:810c:XXX:XXX::/64 fd00:XXXX:XXXX:XXXX::/64 fe80::/64
   # Und hier wird die Ausnahme mit der Umgebungsvariable definiert, so kann man einfacher
   # Seiten oder Aufrufe als Ausnahme definieren
   Require env no_auth_required

</Location>

Dann müssen wir uns natürlich die zuvor verwendete /etc/apache2/htpasswd anlegen:

htpasswd -cB /etc/apache2/htpasswd BENUTZER
New password: MEINSUPERPASSWORD
Re-type new password: MEINSUPERPASSWORD
Adding password for user visu

# Und dann die Rechte anpassen:
chmod 660 /etc/apache2/htpasswd

Wobei BENUTZER der Benutzername ist den man anlegen möchte. Es können natürlich mehrere Benutzer angelegt werden. Man sollte aber hier wirklich ein sicheres Passwort verwenden, da dies nicht vor Brute-Force Angriffen geschützt ist. Wobei man ganz klar die Webseite nochmal in mehreren wegen etwas weiter Schützen kann. Aber dazu später mehr.

Nun kann man auf jeden fall schon seine Konfiguration für den virtuellen Host anpassen. Im Standardfall wäre dass die /etc/apache2/sites-enabled/000-default.conf oder eben die von euch genutzte Datei. Da ich bei mir mehrere virtuelle Hosts habe, die jewels ein eigenes Zertifikat (Stichwort SSL) haben (für internen Host – ohne SSL, für externen Host – mit SSL, für den vom Internet und Intern aus erreichbaren IPv6 Host – mit SSL), kann ich jetzt die smartvisu.conf überall einbinden und hab eine zentrale Stelle für die Anpassungen.

Die nötige Anpassung zum Einbinden der Konfiguration sieht wie folgt aus:

Innerhalb des <VirtualHost></VirtualHost> Blocks muss nur noch folgende Zeile eingefügt werden:

Include /etc/apache2/smartvisu.conf

Jetzt könnte man den Apache2 neustarten und testen.

service apache2 restart

Nützliche Tipps zur Absicherung

Zum Absichern gibt es mehrere Faktoren – vieles hier setzt zwar auf Verschleierung/Tarnung (was eine gute Methode ist, Angriffe gar nicht erst aufkommen zu lassen), aber natürlich nicht ausschließlich:

• ) Die Webseite auf jeden Fall mit SSL absichern!! Auch ich verwende für die externen Zugriffe den kostenfreien Service von Let’s Encrypt. Möglich wäre aber auch ein self-signed Zertifikat (Anleitungen gibt es dazu wie Sand am Meer) aber eben nicht so schön und nicht ganz so sicher, oder wer von euch prüft schon den Fingerabdruck den Zertifikats?!
• ) die Brute-Force Angriffe auf die Basic-Anmeldung kann man ganz einfach mit fail2ban Abfangen/-mildern (Abmildern deswegen, da es möglich wäre auch ein Angriff von mehreren IPs zu koordinieren, was fail2ban nicht abfangen könnte), was ich trotzdem nur jeden empfehlen kann, weswegen ich es auch kurz erklären möchte:
  Zuerst installiert man das Paket mit sudo apt-get install fail2ban
  dann erstellen wir uns eine local.conf, in dem wir das definieren was nicht in der Standardkonfiguration erfasst ist. Man könnte zwar auch die Standardkonfiguration unter /etc/fail2ban/jail.conf bearbeiten, aber übersichtlicher wird es mit meiner vorgeschlagenen Variante. Dazu öffnen wir mit dem Editor unserer Wahl die Datei /etc/fail2ban/jail.d/local.conf und aktivieren die Jail für die Definition von apache-auth wie folgt:

  [apache-auth]
  enabled = true
  

  und danach können wir fail2ban neu laden mit sudo fail2ban-client reload und den Status prüfen mit sudo fail2ban-client status.
  
  Wichtig: Hat man den Protokollpfad seines Apache Vhosts modifiziert, muss man den Pfad für die Jail nochmals prüfen und ggf. in unserer local.conf überschreiben. Prüfen kann man das nochmal in der Datei /etc/fail2ban/jail.conf bzw. /etc/fail2ban/paths-arch.conf (dort steht bei meinem Ubuntu die Variable apache_error_log).

• ) Keine Standard-Ports für den Zugriff auf den Webserver von Extern verwenden. Das hält die ganzen Scanner davon ab die Seite zufällig zu finden. Natürlich wird ein gezielter Angriff (mit Port-Scan) die Seite trotzdem aufdecken, egal welcher Port verwendet wird. Dies wiederum könnte man mit Port Knocking (fwknop/knockd) ausschalten, finde ich aber überflüssig, da es das ganze wieder unnötig verkompliziert.
• ) zusätzlichen Schutz würde auch noch eine zwei-Faktor Anmeldung bringen, z.B. über den Google Authenticator, der den offener Standard OATH (Initiative for Open Authentication) umsetzt und leicht verwendet werden kann. Dazu verweise ich aber z.B. auf diese Anleitung.
• ) Client Zertifikate wären natürlich auch möglich, halte ich aber auch für Übertrieben/zu kompliziert und diese können genau so gut über einen Trojaner geklaut werden – dann lieber 2-Faktor
• ) den Webserver vor Zugriffen aus dem Ausland schützen wäre natürlich auch unter Apache möglich, alternativ mit iptables. Aber mal ehrlich, wenn ich im Urlaub bin will ich auch darauf zugreifen und nicht extra dran denken müssen es frei zu schalten.
• ) die Seite nicht öffentlich im Web verlinken, da b) sonnst auch keinen Sinn macht. Nicht dass wir was zu verbergen haben – aber wie heist es so schön: Schlafende Hunde soll man nicht wecken
• ) dafür sorgen dass das System aktuell gehalten wird – Stichpunkt UnattendedUpgrades, was es sowohl unter Debian und Ubuntu gibt. Auch sollte nur eine Distribution eingesetzt werden, welche auch noch vom Anbieter unterstützt wird.
• ) Keine öffentliche (also ohne Anmeldung zugängliche) Index Seite auf dem internen Webserver anlegen, wo mögliche öffentliche Inhalte „sichtbar“ verlinkt sind. Auch sollten die öffentlichen Inhalte (wenn überhaupt unbedingt benötigt – man kann diese ja auch nur Intern erreichbar machen) nicht über Standard-Ordner laufen, wie z.B. wp (WordPress), Joomla, phpmyadmin, Webmail usw…
  Die Gefahr dabei besteht, dass in den gehosteten Inhalten, eine Sicherheitslücke dafür sorgt, dass jemand sich Zugriffsrechte auf den Webserver erschleichen kann, was dann wieder durch Intensivierung des Angriffs über eine Rechteausweitung zu ROOT-Rechte führen kann!!

TODO: Konfiguration LetsEncrypt

In https://www.smarthomeng.de/geozonen-basierte-services-mit-der-egigeozone-app-und-dem-network-plugin wurde beschrieben, wie man Positionsdaten in SmartHomeNG übertragen kann. In https://www.smarthomeng.de/das-traffic-plugin-am-beispiel-eines-staualarms wurde beschrieben, wie das Traffic Plugin (Google Directions) in SmartHomeNG eingebunden werden kann. Items aus beiden Artikeln werden für das Plugin benötigt!

Tipp: Am Ende des Artikels findet sich noch eine einfachere Version, die nur die aktuelle Position benötigt (und anzeigt)!

Items

Basis bilden ein Teil bzw. eine Erweiterung der Items aus dem EgiGeoZone und den Traffic Plugin Artikel. Bitte auf diese Artikel referenzieren, wie die Items belegt werden können.

%YAML 1.1
---
location:

	home:
		lat:
			type: str
			value: 48.263530
			cache: 'yes'

		lon:
			type: str
			value: 11.443952
			cache: 'yes'
	
	work:

		lat:
			type: str
			value: 48.143158
			cache: 'yes'

		lon:
			type: str
			value: 11.547755
			cache: 'yes'
			
	lat:
		type: str
		cache: 'yes'

	lon:
		type: str
		cache: 'yes'

travel_info:
       
        calculate_way_home:
                type: bool
                cache: 'yes'

        calculate_way_work:
                type: bool
                cache: 'yes'

        travel_summary:
                type: str
 

Neben den jeweiligen GPS Koordinaten der aktuellen Position (location.lat, location.lon), der Home-Koordinate (location.home.lat, location.home.lon) und der Koordinate der Arbeitsstelle (location.work.lat, location.work.lon), sind hier auch zwei boolsche Items, die angeben, ob jeweils der Weg nach Hause oder in die Arbeit angezeigt werden soll (travel_info.calculate_way_home und travel_info.calculate_way_work) Für die Anzeige darf jeweils nur eines dieser Items True sein. Näheres ist in https://www.smarthomeng.de/das-traffic-plugin-am-beispiel-eines-staualarms beschrieben.

Tipp: Man kann natürlich auch die „aktuelle“ Koordinate location.lat, location.lon fest im Item hinterlegen, ohne dieses via EgiGeoZone zu bedaten. Diese Koordinate ist, so lange keine Route angezeigt wird, das Zentrum der Karte!

Google Maps Widget

Für das Widget sind im Ordner dropins/widgets zwei Dateien zu erstellen. Im Javascript File wird dabei die Karte initialisiert und falls angegeben, die Verkehrsanzeige eingeschaltet. Daneben wird ein Marker auf die Home Koordinate und die aktuelle Position gesetzt. Letzterer ist mit einem Foto hinterlegt.

Im Update-Block werden die jeweiligen Positionen aktualisiert und die aktuelle Route gesetzt (falls eine Route aktuell angezeigt werden soll).

Im JS-File muss bedacht werden, dass der im Rahmen des Traffic Plugins eingerichtete API Key für die Google Directions API angegeben werden muss (<apikey>)! Zudem kann als Title noch der jeweilige Name <Mein Name> gesetzt werden.

dropins/widgets/gmaps.js:

// dropins/widgets/gmaps.js
$.widget("sv.gmaps_map", $.sv.widget, {
    initSelector: 'div[data-widget="gmaps_map"]',

    options: {
        'traffic': null,
    },

    _create: function () {
        this._super();
        this._create_map();
    },

    _create_map: function () {
        try {
            this.map = new google.maps.Map(this.element[0], {
                zoom: 11,
                disableDefaultUI: false,
                clickableIcons: false,
                mapTypeControl: false,
                streetViewControl: false
            });
        }
        catch(e) {
            if(e.name == "ReferenceError") { // google maps script not loaded yet
                var that = this;
                // google maps script is already loading in another widget
                if(window.google_maps_loading) { 
                    window.setTimeout(function() { that._create_map() }, 100)
                    return;
                }
                // google maps script is not loading
                window.google_maps_loading = true;
                $.ajax({
                    url: 'https://maps.googleapis.com/maps/api/js?key=<apikey>',
                    dataType: "script",
                    complete: function() { window.google_maps_loading = false; that._create_map() }
                });
                return;
            }
            else  // other exceptions should be trown
                throw e;
        }

        this.directionsService = new google.maps.DirectionsService;
        this.directionsDisplay = new google.maps.DirectionsRenderer();
        this.directionsDisplay.setMap(this.map);

        if (this.options['traffic']) {
            var trafficLayer = new google.maps.TrafficLayer();
            trafficLayer.setMap(this.map);
        }

        var pinColorGreen = "20d24a";
        var pinImageGreen = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColorGreen,
            new google.maps.Size(21, 34),
            new google.maps.Point(0,0),
            new google.maps.Point(10, 34));
        var pinImageMyself = new google.maps.MarkerImage("/smartVISU/pics/phone/myself.jpg" ,
            null, null, null, new google.maps.Size(40, 40));
        var pinShadow = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_shadow",
            new google.maps.Size(40, 37),
            new google.maps.Point(0, 0),
            new google.maps.Point(12, 35));

        this.marker_home = new google.maps.Marker({
            map: this.map,
            icon: pinImageGreen,
            shadow: pinShadow,
            title:' Home '
        });

        this.marker_myself = new google.maps.Marker({
            map: this.map,
            icon: pinImageMyself,
            title:' <Mein Name>',
            zIndex:99999999
        });
    },

    _update: function(response) {

        if(!this.map) {
            var that = this;
            window.setTimeout(function() { that._update(response) }, 100)
            return;
        }

        this.map.setCenter({lat: response[0], lng: response[1]});
        var pos = new google.maps.LatLng(parseFloat(response[0]),parseFloat(response[1]));
        this.marker_myself.setPosition(pos);

        var pos_home = new google.maps.LatLng(parseFloat(response[2]),parseFloat(response[3]));
        this.marker_home.setPosition(pos_home);
        if (response[6] && response[7] && (response[4] == 1 || response[5] == 1)) {
            if (response[4] == 1) {
                var destination = { lat: parseFloat(response[2]), lng: parseFloat(response[3]) };
            } else if (response[5] == 1) {
                var destination = { lat: parseFloat(response[6]), lng: parseFloat(response[7]) };
            };
            var directionsDisplay = this.directionsDisplay;
            this.directionsDisplay.setMap(this.map);
            this.directionsService.route({
                origin: pos,
                //provideRouteAlternatives: true,
                destination: destination,
                travelMode: google.maps.TravelMode.DRIVING
            }, function(result, status) {
                if (status === google.maps.DirectionsStatus.OK) {
                    directionsDisplay.setDirections(result);
                } else {
                    console.log('Directions request failed due to ' + status);
                }
            });
        } else {
            if(this.directionsDisplay != null) {
                this.directionsDisplay.setMap(null);
            }
        }
    }
})

und dropins/widgets/gmaps.html:

// dropins/widgets/gmaps.html - API Key für Google Directions angeben!
/**
 * Displays a google maps map with current, home and work position, as well as routing
 *
 * @param unique id for this widget
 * @param a gad/item for latitude
 * @param a gad/item for longitude
 * @param a gad/item for home latitude
 * @param a gad/item for home longitude
 * @param a gad/item for bool flag, if route to home shall be calculated
 * @param a gad/item for bool flag, if route to work shall be calculated
 * @param a gad/item for work latitude
 * @param a gad/item for work longitude
 * @param traffic information on (=1) or off (=0)
 */
{% macro map(id, gad_lat, gad_lon, gad_home_lat, gad_home_lon, gad_calculate_way_home, gad_calculate_way_work, gad_work_lat, gad_work_lon, traffic) %}
    <div id="{{ uid(page, id) }}" style="width: 100%; height: 400px;" data-traffic="{{ traffic }}" data-widget="gmaps_map" data-item="{{ gad_lat }}, {{ gad_lon}}, {{ gad_home_lat }}, {{ gad_home_lon }}, {{ gad_calculate_way_home }}, {{ gad_calculate_way_work }}, {{ gad_work_lat }}, {{ gad_work_lon }}"></div>
{% endmacro %}

Weiterhin wird ein Bild, welches unter /smartVISU/pics/phone/myself.jpg abgelegt ist, verwendet! Damit das Widget ordentlich funktioniert, sollte dieses Bild auch dort existieren.

Einbindung in smartVISU 2.9

Da die Widgets mit smartVISU 2.9 automatisch geladen werden, muss nun nur noch das Widget auf der entsprechenden Seite eingebunden werden:

<div class="block" style="width: 100%;">
  <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>Verkehr:
      {{ basic.symbol('travel_info.calculate_way_home', 'travel_info.calculate_way_home', 'Nach Hause via ', '', '1') }}
      {{ basic.symbol('travel_info.calculate_way_work', 'travel_info.calculate_way_work', 'Zur Arbeit via ', '', '1') }}
      {{ basic.print('travel_info.travel_summary', 'travel_info.travel_summary', 'text') }}
      </h3>
      {{ gmaps.map('trafficmap', 'location.lat', 'location.lon', 'location.home.lat', 'location.home.lon', 'travel_info.calculate_way_home', 'travel_info.calculate_way_work', 'location.work.lat', 'location.work.lon', '1') }}
    </div>
  </div>
</div>  

Das Ergebnis mit aktivem Arbeitsweg, sieht dann wie folgt aus:

Einfachere Version:

Hier noch eine einfachere Version des Widgets, nur mit Koordinaten der aktuellen Position:

{{ gmaps.simple_map('trafficmap_simple', 'location.lat', 'location.lon') }}

/**
 * Displays a simple google maps map
 *
 * @param unique id for this widget
 * @param a gad/item for latitude
 * @param a gad/item for longitude
 */
{% macro simple_map(id, gad_lat, gad_lon) %}
<div id="{{ uid(page, id) }}" style="width: 100%; height: 400px;" data-widget="gmaps_simplemap" data-item="{{ gad_lat }}, {{ gad_lon}}"></div>
{% endmacro %}

$.widget("sv.gmaps_simplemap", $.sv.widget, {
    initSelector: 'div[data-widget="gmaps_simplemap"]',

    _create: function () {
        this._super();
        this._create_map();
    },

    _create_map: function () {
        try {
            this.map = new google.maps.Map(this.element[0], {
                zoom: 11,
                disableDefaultUI: false,
                clickableIcons: false,
                mapTypeControl: false,
                streetViewControl: false
            });
        }
        catch (e) {
            if (e.name == "ReferenceError") { // google maps script not loaded yet
                var that = this;
                // google maps script is already loading in another widget
                if (window.google_maps_loading) {
                    window.setTimeout(function () {
                        that._create_map()
                    }, 100)
                    return;
                }
                // google maps script is not loading
                window.google_maps_loading = true;
                $.ajax({
                    url: 'https://maps.googleapis.com/maps/api/js?key=<apikey>',
                    dataType: "script",
                    complete: function () {
                        window.google_maps_loading = false;
                        that._create_map()
                    }
                });
                return;
            }
            else  // other exceptions should be thrown
                throw e;
        }

        var pinColorGreen = "20d24a";
        var pinImageGreen = new google.maps.MarkerImage("https://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + pinColorGreen,
            new google.maps.Size(21, 34),
            new google.maps.Point(0,0),
            new google.maps.Point(10, 34));
        this.marker_myself = new google.maps.Marker({
            map: this.map,
            icon: pinImageGreen,
            title:' <Mein Name>',
            zIndex:99999999
        });
    },

    _update: function(response) {
        if(!this.map) {
            var that = this;
            window.setTimeout(function() { that._update(response) }, 100)
            return;
        }

        this.map.setCenter({lat: response[0], lng: response[1]});
        var pos = new google.maps.LatLng(parseFloat(response[0]),parseFloat(response[1]));
        this.marker_myself.setPosition(pos);
    }
});

Anmerkung: mittlerweile sind die API Keys für Wundergrund leider nicht mehr kostenlos! Die Anleitung muss also mit einem alternativen Plugin wie Darksky oder OpenWeatherMap durchgeführt werden!

Basis des Artikels sind Daten zu Windrichtung und Windgeschwindigkeit über das Wundergrund Plugin. Es lassen sich aber bspw. auch Daten der KNX Wetterstation verwenden, sofern vorhanden.

Das Wundergrund Plugin konfigurieren

Die automatisch generierte Doku zum Wundergrund Plugin findet sich unter https://www.smarthomeng.de/user/plugins_doc/config/wunderground.html.

Das Plugin liegt auf Github unter https://github.com/smarthomeNG/plugins/tree/master/wunderground.

Als Erstes muss das Plugin in der etc/plugin.yaml eingetragen werden. Der apikey kann kostenlos (Update: leider sind die API Keys inzwischen nicht mehr kostenlos!) über https://www.wunderground.com/weather/api/d/pricing.html beantragt werden. Es ist darauf zu achten, dass das Updateintervall eine bestimmte Zeitdauer nicht überschreitet, speziell, wenn man Wundergrund auch direkt in der smartVISU nutzt. Das Limit sind 500 Calls pro Tag bzw. 10 Calls pro Minute. Das Default-Updateintervall für das Plugin sind 600 Sekunden, also einmal in 10 Minuten. Per cycle Attribut ließe sich dieses in der plugin.yaml anpassen.

Als location setzt man bspw. seinen Ort, es sind hier neben dem Namen aber auch Geokoordinaten möglich.

wundergrund_wetter:
    class_name: Wunderground
    class_path: plugins.wunderground
    apikey: 'xxxxyyyyxxxxyyyy'
    language: 'de'
    location: 'Germany/Hamburg'
    item_subtree: weather.wundergrund
    # cycle: 600

item_subtree ist der Ast im Itemtree, unter dem die Wundergrund-relevanten Items liegen. Im Beispiel ist es weather.wundergrund.
Die notwendigen Items sehen wie folgt aus:

%YAML 1.1
---
# items/wetter.yaml
weather:

    wundergrund:

        windrichtung:
            type: str
            wug_matchstring: current_observation/wind_dir

        windrichtung_grad:
            type: num
            wug_matchstring: current_observation/wind_degrees

        windgeschwindigkeit:
            type: num
            value: -9999
            wug_matchstring: current_observation/wind_kph
            wug_datatype: positive

            ms:
                type: num
                eval: (sh.weather.wundergrund.windgeschwindigkeit()/3.6)
                eval_trigger: weather.wundergrund.windgeschwindigkeit

            beaufort:
                type: num

            string:
                type: str
               
        windboeen:
            type: num
            value: -9999
            wug_matchstring: current_observation/wind_gust_kph
            wug_datatype: positive

Tipp: Neben dem Wind gibt es über Wundergrund noch viele weitere Wetterdaten.

Anzeige der Windrichtung in der smartVISU

Die Windrichtung lässt sich nun in der smartVISU 2.9 sehr einfach ausgeben:

{{ icon.compass('weather.wundergrund.windrichtung_compass', '', 'weather.wundergrund.windrichtung_grad',  '0', '360', '') }}
{{ basic.print('weather.wundergrund.windrichtung', 'weather.wundergrund.windrichtung', 'text') }}

Das Ergebnis ist eine sehr schöne Darstellung der Windrichtung:

Windstärke auswerten und in der smartVISU anzeigen

Als nächstes soll die Windstärke ausgewertet werden. Dafür dient die nach Sir Francis Beaufort benannte Beaufortskala, die Windstärken in 13 Bereichte von 0 (Windstille) bis 12 (Orkan) klassifiziert.

Für diese Skala ist der Wert im Item weather.wundergrund.windgeschwindigkeit.ms notwendig, das via Eval-Ausdruck die Windgeschwindigkeit von Kilometer pro Stunde in Meter pro Sekunde umrechnet (sh.weather.wundergrund.windgeschwindigkeit()/3.6). Die Umrechnung triggert jedes Mal, wenn sich weather.wundergrund.windgeschwindigkeit verändert.

Für die Auswertung der Windstärke muss unter logics/wind.py eine neue Logik erstellt werden, die die Items weather.wundergrund.windgeschwindigkeit.string und weather.wundergrund.windgeschwindigkeit.beaufort befüllt:
Der Eintrag in der etc/logic.yaml sieht wie folgt aus:

WindLogic:
    crontab: init
    filename: wind.py
    watch_item: weather.wundergrund.windgeschwindigkeit.ms

Die Logik löst also jedes Mal aus, wenn sich weather.wundergrund.windgeschwindigkeit.ms ändert.

Der Code der Logik in der Datei logics/wind.py mappt nun die Windgeschwindigkeit in Meter pro Sekunde auf die Beaufortskala:

if sh.weather.wundergrund.windgeschwindigkeit.ms() < 0.3:
    sh.weather.wundergrund.windgeschwindigkeit.string("Windstille")
    sh.weather.wundergrund.windgeschwindigkeit.beaufort(0)
elif 0.3 <= sh.weather.wundergrund.windgeschwindigkeit.ms() < 1.6:
    sh.weather.wundergrund.windgeschwindigkeit.string("leiser Zug")
    sh.weather.wundergrund.windgeschwindigkeit.beaufort(1)
elif 1.6 <= sh.weather.wundergrund.windgeschwindigkeit.ms() < 3.4:
    sh.weather.wundergrund.windgeschwindigkeit.string("leichte Brise")
    sh.weather.wundergrund.windgeschwindigkeit.beaufort(2)
elif 3.4 <= sh.weather.wundergrund.windgeschwindigkeit.ms() < 5.5:
    sh.weather.wundergrund.windgeschwindigkeit.string("schwacher Wind")
    sh.weather.wundergrund.windgeschwindigkeit.beaufort(3)
elif 5.5 <= sh.weather.wundergrund.windgeschwindigkeit.ms() < 8.0:
    sh.weather.wundergrund.windgeschwindigkeit.string("mäßiger Wind")
    sh.weather.wundergrund.windgeschwindigkeit.beaufort(4)
elif 8.0 <= sh.weather.wundergrund.windgeschwindigkeit.ms() < 10.8:
    sh.weather.wundergrund.windgeschwindigkeit.string("frischer Wind")
    sh.weather.wundergrund.windgeschwindigkeit.beaufort(5)
elif 10.8 <= sh.weather.wundergrund.windgeschwindigkeit.ms() < 13.9:
    sh.weather.wundergrund.windgeschwindigkeit.string("starker Wind")
    sh.weather.wundergrund.windgeschwindigkeit.beaufort(6)
elif 13.9 <= sh.weather.wundergrund.windgeschwindigkeit.ms() < 17.2:
    sh.weather.wundergrund.windgeschwindigkeit.string("steifer Wind")
    sh.weather.wundergrund.windgeschwindigkeit.beaufort(7)
elif 17.2 <= sh.weather.wundergrund.windgeschwindigkeit.ms() < 20.8:
    sh.weather.wundergrund.windgeschwindigkeit.string("stürmischer Wind")
    sh.weather.wundergrund.windgeschwindigkeit.beaufort(8)
elif 20.8 <= sh.weather.wundergrund.windgeschwindigkeit.ms() < 24.5:
    sh.weather.wundergrund.windgeschwindigkeit.string("Sturm")
    sh.weather.wundergrund.windgeschwindigkeit.beaufort(9)
elif 24.5 <= sh.weather.wundergrund.windgeschwindigkeit.ms() < 28.5:
    sh.weather.wundergrund.windgeschwindigkeit.string("schwerer Sturm")
    sh.weather.wundergrund.windgeschwindigkeit.beaufort(10)
elif 28.5 <= sh.weather.wundergrund.windgeschwindigkeit.ms() < 32.7:
    sh.weather.wundergrund.windgeschwindigkeit.ms.string("orkanartiger Sturm")
    sh.weather.wundergrund.windgeschwindigkeit.beaufort(11)
else:
    sh.weather.wundergrund.windgeschwindigkeit.string("Orkan")
    sh.weather.wundergrund.windgeschwindigkeit.beaufort(12)

Damit die Logik effektiv wird, muss SmartHomeNG neu gestartet oder die Logik via Backend-Plugin aktiviert werden.

Sinnvollerweise kann diese Logik auch in einer Funktion gekapselt werden. Dies ist an einem Alternativansatz, der mit einer Lookup-Tabelle arbeitet, im Folgenden dargestellt:

#!/usr/bin/env python3
# beaufort3.py

def get_beaufort(speed):
    """
    :parameter speed: windspeed in meter per second
    :return: a tuple of a string with the (german) description and an integer with beaufort speed
    """
    table = [ 
        (  0.3, "Windstille",0),
        (  1.6, "leiser Zug",1),
        (  3.4, "leichte Brise",2),
        (  5.5, "schwacher Wind",3),
        (  8.0, "mäßiger Wind",4),
        ( 10.8, "frischer Wind ",5),
        ( 13.9, "starker Wind",6),
        ( 17.2, "steifer Wind",7),
        ( 20.8, "stürmischer Wind",8),
        ( 24.5, "Sturm",9),
        ( 28.5, "schwerer Sturm",10),
        ( 32.7, "orkanartiger Sturm",11),
        ( 999,  "Orkan",12) ]
    
    try:
        description = min(filter(lambda x: x[0] >= speed, table))[1]
        bft = min(filter(lambda x: x[0] >= speed, table))[2]
        return description,bft
    except ValueError:
        return None, None

decription, bft = get_beaufort(sh.weather.wundergrund.windgeschwindigkeit.ms())
sh.weather.wundergrund.windgeschwindigkeit.string(description)
sh.weather.wundergrund.windgeschwindigkeit.beaufort(bft)

In der smartVISU können diese Werte nun wie folgt angezeigt werden:

{{ basic.symbol('', '', '', 'weather_wind_speed_bft') }}                       
Bft: {{ basic.print('wind_weatherstation_bfvalue', 'knx.weather.wind.beaufort') }}, 
{{ basic.print('wind_weatherstation_string', 'knx.weather.wind.string', 'text') }}

Das Ergebnis:

(Die in diesem Artikel verwendeten Screenshots wurden selber erstellt. Das Titelbild ist unter der Creative Commons Zero (CC0) Lizenz veröffentlicht und wurde von www.pexels.com bezogen.)

Eine häufige Frage dabei ist, wie sich das icon.zenith, dass den aktuellen Sonnenstand darstellt, von SmartHomeNG aus bedaten lässt.
Zwar bietet SmartHomeNG unter lib/env/location.yaml eine ganze Reihe Default-Items mit Werten zum Sonnenstand an, jedoch sind diese für das icon.zenith nicht notwendig.

Dieses Kurz-Tutorial zeigt, wie sich der Wert für das Icon mit einer simplen Logik näherungsweise berechnen lässt.

SmartHomeNG

Basis ist ein einfaches numerisches Item namens weather.sun.icon:

weather:

    sun:

        icon:
            type: num
            visu_acl: ro

Als nächstes wird unter etc/logic.yaml eine neue Logik eingehängt, die auf den Sonnenstand reagiert:

SunPositionLogic:
    filename: sun_position.py
    watch_item: env.location.sun_position.azimut.degrees

Die Logik löst also bei jeder Veränderng des System-Items env.location.sun_position.azimut.degrees aus. Dieses gibt den Sonnenstand in Grad wieder. Neben der untenstehenden Berechnung des Wertes für das <code>icon.zenith</code> könnte man in der Logik auch noch weitere Sonnenstands-abhängige Aktionen einbinden, etwa das Herunterfahren von Rollläden.

In der Logik-Datei logics/sun_position.py selber, werden nun sehr einfache Berechnungen vorgenommen:

# Berechnungen für icon.zenith
now = datetime.datetime.utcnow().hour * 60 + datetime.datetime.utcnow().minute
sunrise = sh.sun.rise().hour * 60 + sh.sun.rise().minute
sunset = sh.sun.set().hour * 60 + sh.sun.set().minute
icon = int(round(255 * ((now - sunrise) / (sunset - sunrise)),0))

sh.weather.sun.icon(icon)

Über das Intervall vom Sonnenaufang bis zum Sonnenuntergang, wird der aktuelle Zeitpunkt auf eine Skala von 0 – 255 gemappt.

smartVISU

Dieser Wert dient nun als Basis für das icon.zenith, welches in der smartVISU wie folgt eingebunden wird:
{{ icon.zenith('weather.sun.icon', '', 'weather.sun.icon') }}.
Neben dem Icon kann man bspw. noch die aktuellen Daten des Sonnenwinkels anzeigen:

<table>
  <tr>
  <td width="55px;"> 
    {{ icon.zenith('weather.sun.icon', '', 'weather.sun.icon') }}
  </td>
  <td> 
     H: {{ basic.print('env.location.sun_position.azimut', 'env.location.sun_position.azimut.degrees') }} ° 
  <br/>
     V: {{ basic.print('env.location.sun_position.elevation', 'env.location.sun_position.elevation.degrees') }} °
  </td>
  </tr>
</table>

Das fertige Ergebnis sieht nun wie folgt aus:

(Die in diesem Artikel verwendeten Screenshots wurden selber erstellt. Das Titelbild ist unter der Creative Commons Zero (CC0) Lizenz veröffentlicht und wurde von www.pexels.com bezogen.)

Es gibt zurzeit drei verschiedene Datenbank Plugins:

• database
• sqlite
• sqlite_visu2_8

Wenn Du neu mit SmartHomeNG beginnst, solltest Du das Plugin database verwenden. Das database Plugin unterstützt sowohl MySQL Datenbanken, als auch SQLite Datenbanken. Welcher Datenbank-Typ verwendet wird, wird in ../etc/plugin.yaml konfiguriert.

sqlite und sqlite_visu2_8

Die beiden SQLite Plugins dienen nur der Rückwärts-Kompatibilität für bestehende SmartHomeNG bzw. smarthome.py Umgebungen und werden nicht mehr weiterentwickelt.

Das Plugin sqlite unterstützt smartVISU bis zur Version v2.7.

Zur Unterstützung von smartVISU v2.8 und v2.9 muss das Plugin sqlite_visu2_8 verwendet werden. Das Plugin führt beim ersten Start eine Konvertierung der Datenbank von sqlite auf das sqlite_visu2_8 Format durch. Einen Weg zurück gibt es dann nicht. Es sollte also vorher eine Sicherung der Datenbank Datei ../var/db/smarthome.db durchgeführt werden.

Wichtig: Vor Beginn der Sicherung SmartHomeNG beenden.

Eine Routine zur Konvertierung der Datenbanken der sqlite Plugins zu einer Datenbank für das database Plugin gibt es (noch) nicht.

In diesem Kurz-Tutorial wird beschrieben, wie sich das Widget-Framework SteelSeries-Canvas (Beispiele) in die smartVISU 2.9 integrieren lässt. Dies wird am Beispiel einer „Bezug/Einspeisungs“-Anzeige mit Daten aus dem SMA_EM-Plugin durchgeführt. Das Plugin ist aber keine Pflicht: es können aber auch beliebige andere Items mit ähnlichen Daten verwendet werden.

Der Thread zu SteelSeries-Canvas im Forum findet sich mit weiteren Beispielen in https://knx-user-forum.de/forum/supportforen/smartvisu/39225-steelseries-canvas-in-smartvisu.

SMA_EM-Plugin einrichten

Das SMA_EM-Plugin (Support-Thread im Forum, generierte Doku, Plugin auf Github) kann man nutzen, wenn man ein EnergyMeter der Firma SMA in der ersten Generation besitzt. Dieses schickt einen Netzwerk-Multicast auf die Adresse 239.12.255.254, den das Plugin einfach „mithört“.

Das Plugin basiert auf der Implementierung https://github.com/datenschuft/SMA-EM/ von Florian Wenger. Teile des (open-source) Quelltexts wurden mit freundlicher Genehmigung des Entwicklers im Plugin wiederverwendet.

Das Plugin ist relativ schnell eingerichtet. Mit folgendem Eintrag in der plugin.yaml ist es getan:

sma_em:
    class_name: SMA_EM
    class_path: plugins.sma_em
    time_sleep: 4
    serial: xxxxxxxxxxx

Die Serial ist dabei die des SMA Energy Meters. Sie kann über die Weboberfläche einfach ausgelesen werden:

time_sleep ist die Zeit, die nach jedem Auslesen gewartet werden soll.

Die wichtigsten Items sind:

# items/items.yaml
%YAML 1.1
---

smaem:

    psurplus:
        name: Solar Energy Surplus
        sma_em_data_type: psurplus
        type: num

        kw:
            type: num
            eval: sh.smaem.psurplus() / 1000
            eval_trigger: smaem.psurplus

    pregard:
        name: Energy Regard
        sma_em_data_type: pregard
        type: num

        kw:
            type: num
            eval: sh.smaem.pregard() / 1000
            eval_trigger: smaem.pregard

Anmerkung: Neben diesen Items können über das SMA_EM-Plugin noch eine Vielzahl weiterer Daten ausgelesen werden.

Nach einem Neustart von SmartHomeNG ist das Plugin aktiv und Daten sollten in die entsprechenden Items fließen.

Erweiterung der smartVISU 2.9 mit SteelSeries-Canvas

Anmerkung: Diese Anleitung basiert bereits auf der Funktionalität der smartVISU 2.9 und verwendet das smartvisu/dropins Verzeichnis (Details zum Dropin-System der SV2.9 siehe https://github.com/Martin-Gleiss/smartvisu/blob/develop/dropins/README.md).

Direkt unter smartvisu/dropins werden die Dateien steelseries-min.js und tween-min.js aus dem SteelSeries-Canvas Github Repository abgelegt. Diese werden nun automatisch von der smartVISU 2.9 eingebunden, wie im HTML Quelltext verifiziert werden kann:

Als Nächstes wird unter smartvisu/dropins/widgets eine Datei namens steelseries.html angelegt. In dieser definiert man seine SteelSeries-Widgets, die nun automatisch eingebunden werden:

/**
  * Displays a steelseries radial for energy balance
  *
  * @param unique id for this widget
  * @param the gad for the surplus
  * @param the gad for the regard
  * @param min value
  * @param max value
  * @param widgetSize size of the widget in pixels. if left empty, 200 is set.
  * @param pointerColor according to steelseries.ColorDef, e.g. RED or GREEN
  * @param title
  * @param unit
  */
{% macro radial_energy(id, gad_surplus, gad_regard, minValue, maxValue, widgetSize, pointerColor, title, unit) %}
  {% if not widgetSize %}{% set widgetSize = 200 %}{% endif %}
  <canvas id="{{ uid(page, id) }}" data-widget="steelseries.radial_energy" data-item="{{ gad_surplus }}, {{ gad_regard}}" width="{{ widgetSize }}" height="{{ widgetSize }}" data-widgetsize="{{ widgetSize }}" data-title="{{ title }}" data-unit="{{ unit }}" data-min-value="{{ minValue }}" data-max-value="{{ maxValue }}" {% if pointerColor %}data-pointercolor="{{ pointerColor }}"{% endif %}>
  </canvas>
{% endmacro %}

Weiterhin muss unter smartvisu/dropins/widgets eine Datei namens steelseries.js angelegt werden:

$.widget("sv.steelseries_radial_energy", $.sv.widget, {

        initSelector: 'canvas[data-widget="steelseries.radial_energy"]',

        options: {
          title: "",
          unit: "",
          widgetsize: 200,
          pointercolor: null,
          'min-value': null,
          'max-value': null,
        },

        _steelseries: null,

        _create: function() {
          this._super();

          var areas = [steelseries.Section(this.options['min-value'], 0, 'rgba(220, 0, 0, 0.3)'),
                    steelseries.Section(0, this.options['max-value'], 'rgba(0, 220, 0, 0.3)')];
          var params = {
              gaugeType: steelseries.GaugeType.TYPE4,
              size: this.options.widgetsize,
              titleString: this.options.title,
              unitString: this.options.unit,
              frameDesign: steelseries.FrameDesign.BLACK_METAL,
              backgroundColor: steelseries.BackgroundColor.TURNED,
              minValue: this.options['min-value'],
              maxValue: this.options['max-value'],
              ledVisible: false,
              lcdVisible: true,
              area: areas,
              lcdDecimals: 1,
              useOdometer: false
          };
          if(this.options.pointercolor)
            params.pointerColor = steelseries.ColorDef[this.options.pointercolor];

          this._steelseries = new steelseries.Radial(this.element[0].id, params);

        },

        _update: function(response) {
          if (response[0] > 0) {
             this._steelseries.setValueAnimated((-1)*parseFloat(response[0]));
          } else {
             this._steelseries.setValueAnimated(parseFloat(response[1]));
          }
        },
    });

Nachdem man gespeichert hat, kann man das Widget nun in seinen Pages mit folgendem Block nutzen:

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

            {{ steelseries.radial_energy('steel.radial_smaem','smaem.pregard','smaem.psurplus', -8000, 8000, '267', '', 'Energiebilanz', 'Watt') }}

        </div>
    </div>
</div>

Strombezug / Einspeisung – aktuell

Im Fall meiner Photovoltaik-Anlage habe ich „pi mal Daumen“ maximal 8000 Watt Erzeugung, daher die Normierung auf den Bereich -8000 (Bezug) bis +8000 (Einspeisung). Der Wert 267 gibt die Größe (widgetSize) des Widgets an – wird diese leer gelassen, ist der Default 200 Pixel. Die Farbe des Zeigers würde sich mit dem Wert pointerColor (im Beispiel leer) noch anpassen lassen.

Das fertige Resultat kann nun live bewundert werden:

(Die in diesem Artikel verwendeten Screenshots wurden selber erstellt.)

Überblick

Im Vergleich zum Visu Plugin der vorhergehenden smarthome/smarthomeNG Releases, wurden die Möglichkeiten zur automatischen Generierung von Seiten für die smartVISU stark erweitert. Unterstützt werden das smartVISU Release 2.7 und der nicht releaste Stand zur Version 2.8.

Die zusätzlichen Attribute, die in der item.yaml Datei für die Items konfiguriert werden können, sind in der README Datei des Plugins beschrieben.

Diese Seite und die zugehörien Unterseiten sollen einige der Möglichkeiten aufzeigen, die sich durch die Erweiterungen bieten:

Anzeige von zusätzlichen Informationen in der Navigation

In der Navigation können eine Reihe zusätzlicher Informationen angezeigt werden.

Möglichkeiten

Das folgende Beispiel zeigt die Möglichkeiten zur Anzeige von zusätzlichen Informationen in der Navigation. Es können zwei Zeilen angezeigt werden. Im Beispiel wird in der ersten Zeile die aktuelle Raumtemperatur angezeigt und in der zweiten Zeile werden Icons angezeigt, die den Zustand von Geräten in dem Raum anzeigen.

Das Beispiel zeigt folgendes an:

• Kaffeemaschine auf Standby in der Küche
• TV an im Wohnzimmer
• Im Gästezimmer ung im Bad wird geheizt
• Im Büro löuft das TV im Audio Mode
• Die Waschmaschine läuft

Am Beispiel der Küche zeigt die folgende Konfiguration, wie die zusätzlichen Informationen konfiguriert werden:

wohnung:

    kochen:
        name: Kochen
        sv_page: room
        sv_img: scene_cooking.png
	sv_nav_aside: "{{ basic.float('m_kochen.ist', 'wohnung.kochen.heizung.ist', '°') }}"
        sv_nav_aside2: "{{ basic.symbol('m_kochen_kaffee2', 'wohnung.kochen.kaffeeautomat.status', '', 'icons/ws/scene_coffee_maker_automatic.png', '2') }} 
            {{ basic.symbol('m_kochen_kaffee3', 'wohnung.kochen.kaffeeautomat.status', '', 'icons/or/scene_coffee_maker_automatic.png', '3') }} 
            {{ basic.symbol('m_kochen_heizen', 'wohnung.kochen.heizung.heizen', '', icon1~'sani_heating.png') }}"

Wie in den bisherigen Releases:

• sv_page zeigt an, dass [wohnung.kochen] ein Raum ist und für diesen ein Navigationseintrag und eine Seite generiert werden soll.
• sv_imggibt an, welches Icon in der Navigation und auf der Seite angezeigt werden soll.

Neu:

• sv_nav_asidespezifiziert, was an der Seite in der oberen Zeile angezeigt werden soll. In diesem Fall ist das die aktuelle Raumtemperatur.
• sv_nav_aside2spezifiziert,was an der Seite in der unteren Zeile angezeigt werden soll. In diesem Fall ist das eine Reihe von Symbolen: — Kaffeemautomat im Standby — Kaffeeautomat heizt — Die Heizung heizt

Wenn die Stati nicht aktiv sind, werden die jeweiligen Icons nicht angezeigt. Da der Kaffeeautomat nur entweder im Standby sein kann oder heizt, wird nur eines der Icons angezeigt. Wenn der Kaffeeautomat ausgeschaltet ist, wird kein Icon angezeigt.

Generierung einer Konfigurations-Navigation

Zusätzlich zum Aufbau einer Navigation über die Seiten der Räume, kann eine Navigation über mehrere Konfigurationsseiten aufgebaut werden.

Möglichkeiten

Das folgende Beispiel zeigt die Möglichkeiten zum generieren einer Kategorie Navigation. Die Kategorie Navigation wird durch anklicken des Hand-Symbols in der Titelzeile der smartVISU aktiviert.

Am Beispiel der obigen Konfigurations-Navigation zeigt die nachfolgende Konfig-Datei, wie die Navigation konfiguriert wird:

config:
    konfiguration:
        name: Konfiguration
        sv_page: category
        sv_img: control_all_on_off.png

    beschattung:
        name: Beschattung
        sv_page: category
        sv_img: fts_shutter_40.png

    beleuchtung:
        name: Beleuchtungsautomatik
        sv_page: category
        sv_img: light_light_dim_00.png

sv_page ist zum generieren eines Eintrages für die Konfigurations-Navigation auf den Seitentyp category einzustellen.

Trenner in der Navigation

Die Navigation kann durch Trenner unterteilt werden, um die Übersichtlichkeit zu erhöhen.

Möglichkeiten

Das folgende Beispiel zeigt die Möglichkeiten zur Anzeige von Trennern in der Navigation. Zwischen den Navigationseinträgen können mehrere Trenner angezeigt werden. Das Beispiel zeigt nicht die Raum-Navigation, sondern die Navigation auf der Konfigurationsseite.

Das Beispiel zeigt folgende Trenner:

• Tests
• Kategorien

Am Beispiel des Trenners Tests zeigt die folgende Konfiguration, wie Trenner konfiguriert werden:

config:
    verteilung:
        name: Verteilung
        sv_page: category
        sv_img: measure_current.png

    seperator_test:
        name: Tests
        sv_page: cat_seperator

    fritzboxen:
        name: Fritzboxen
        sv_page: category
        sv_img: it_router.png

sv_page ist zum generieren eines Trenners auf einen speziellen Seitentyp einzustellen.

• Wenn ein Trenner in die normale Raumnavigation eingefügt werden soll, so muss sv_page = seperator angegeben werden.
• Wenn ein Trenner in die Konfigurationsnavigation eingefügt werden soll, so muss sv_page = cat_seperator angegeben werden.

Unterschiedliche Visu-Styles

Zusätzlich zum von bisherigen Releases unterstützen Standard-Style, wird der Style blackunterstützt.

Möglichkeiten

Das folgende Beispiel zeigt die Möglichkeiten zur Auswahl des Styles der für smartVISU generierten Seiten.

Bisher wurden Blöcke generiert, die so aussahen (Style ‚Standard‘):

In der aktuellen Version ist es möglich, die Blöcke in folgender Optik generieren zu lassen (Style ‚Black‘):

Dieses ist eine Visu-weite Einstellung, die in der Datei /etc/plugin.yaml vorgenommen wird. Dort kann visu_style = std oder visu_style = blk eingetragen werden.

Eine vollständige Seite im Style ‚Black‘ sieht z.B. folgendermaßen aus:

Unterschiedliche Blockgrößen

Die Blöcke in denen Widgets angezeigt werden, hatten in den bisherigen Releases eine fest definierte (Mindest-)Größe. Jetzt stehen drei unterschiedliche Mindestgrößen zur Verfügung.

Möglichkeiten

Die smartVISU unterstützt Blöcke mit drei unterschiedlichen Größen. Gemeint ist hierbei die Mindestgröße des Blocks. Wenn in dem Block Widgets platziert werden, die mit dem Platz nicht auskommen, wird der Block automatisch höher. Die Blockhöhen unterscheiden sich in etwa um die Höhe der Heading-Zeile.

In den bisherigen Releases von smarthome/smarthomeNG wurden beim automatischen generieren von smartVISU Seiten immer Blöcke der Größe 2 (mittel) verwendet.

Im aktuellen Release können auch Blöcke der Größen 1 (groß) und 3 (klein) in die Seiten generiert werden.

Dieses kann als Item-Attribut sv_blocksize festgelegt werden.

Am Beispiel des Trenners Tests zeigt die folgende Konfiguration, wie Trenner konfiguriert werden:

wohnung:
    buero:
        verbraucher:
            name: Verbraucher
            sv_blocksize: 1
            sv_widget: "{{ basic.switch('wohnung.buero.tv', 'wohnung.buero.tv', icon0~'control_on_off.png', icon0~'control_standby.png') }} <br> 
                {{ basic.switch('wohnung.buero.computer', 'wohnung.buero.computer', icon0~'control_on_off.png', icon0~'control_standby.png') }} <br> 
                {{ basic.switch('wohnung.buero.schrank', 'wohnung.buero.schrank', icon0~'control_on_off.png', icon0~'control_standby.png') }} <br> 
                {{ basic.switch('wohnung.buero.steckdose_tuer', 'wohnung.buero.steckdose_tuer', icon0~'control_on_off.png', icon0~'control_standby.png') }}"

sv_blocksize dient zur Einstellung der (minimalen) Blockhöhe und dasrf die Werte 1, 2 oder 3 annehmen. Wird sv_blocksizenicht angegeben, so wird der Default-Wert 2 benutzt.

Unterschiedliche Blocktypen

Die Blöcke in denen Widgets angezeigt werden, hatten in den bisherigen Releases einen festen Typ. Nun ist ein Typ „Dual“ hinzugekommen.

Möglichkeiten

Die smartVISU unterstützt Blöcke zusätzlich zu den Standard-Blöcken auch Blöcke mit „2 Seiten“, die in den bisherigen Releases von smarthome/smarthomeNG nicht unterstützt wurden.

Im aktuellen Release können auch diese Dual-Blöcke in der automatischen Seitengenerierung verwendet werden.

Hier ein Beispiel, wie ein solcher DualBlock aussehen kann:

 Erste Seite des Dual-Blocks  Zweite Seite des Dual-Blocks

Ein solcher Dual-Block hat immer die Größe eines großen Blocks. Damit die Visu-Seite „aufgeräumt“ aussieht, sollte für den daneben liegenden Block die große Form gewählt werden (sv_blocksize = 1). Diehe dazu auch den Abschnitt Unterschiedliche Blockgrößen weiter oben in diesem Artikel.

Hier ist ein Beispiel auf einer Visu Seite:

1. EIBD oder KNXD: (welchen Deamon genutzt ist dabei nicht erheblich). Die Funktionsfähigkeit des Deamons kann mit dem Kommando GROUPSWRITE getestet werden. Solange das nicht funktioniert, kann auch die Ansteuerung aus SmartHomeNG und smartVISU nicht funktionieren.
2. SmartHomeNG: Damit SmartHomeNG mit dem KNX Bus reden kann, muss das KNX-Plugin richtig konfiguriert sein. Dieses erfolgt in der Datei /etc/plugin.conf.

   Um zu testen, ob SmartHomeNG mit dem KNX Bus redet, kann man Quick-and-Dirty in der Conf Datei bei dem Item das geschaltet werden soll, einen Eintrag value = 1 oder value = 0 ergänzen und SmartHomeNG neu starten. Dann sollte der KNX Aktor ein- bzw. ausschalten.

   Erst wenn diese Kommunikation funktioniert, macht es Sinn sich der Visu zuzuwenden.

3. smartVISU: Die smartVISU muss richtig konfiguriert sein, damit sie mit SmartHomeNG spricht. Sonst sieht es zwar aus, als würde sie schalten, tut sie aber nicht.

   Auf der Konfigurationsseite muss unter I/O-Connection folgendes eingetragen sein:

   • Driver: Smarthome.py
   • Address:
   • Port: 2424
   • Realtime: on

   Wichtig: Der Eintrag localhost als Adresse funktioniert nicht!

Um einen sicheren Zugriff auf SmartHomeNG und die smartVISU von außen (ohne VPN) zu ermöglichen, empfiehlt es sich, die Software NGINX als ReverseProxy mit Basic Authentication oder Clientzertifikaten zu nutzen.

Die Idee hinter einem ReverseProxy ist, dass man einen einzigen sicheren Eintrittspunkt in das Heimnetzwerk hat, ohne ein VPN nutzen zu müssen. Der ReverseProxy hängt direkt hinter dem Router und wird von dort via Portforwarding angesprochen. Üblicherweise wird der HTTPS Port 443 vom Router auf den ReverseProxy umgeleitet. Für die Installation ist temporär auch der HTTP Port 80 notwendig, damit ein SSL Serverzertfikat, bspw. von Let’s Encrypt, für die hinterlegte DynDNS URL installiert werden kann.

Im ReverseProxy kann ein Zugriffsschutz implementiert werden, der via Basic Authentication oder Clientzertifikate realisiert wird. Beides wird in diesem Artikel erklärt. Es wird zudem auf weitere Sicherheitsmaßnahmen, wie das Blockieren von Requests aus nicht vertrauenswürdigen Ländern, eingegangen.

Je nach angesprungenem Kontextpfad (also bspw. /smartVISU oder /alexa) wird dann in Richtung des Hauptservers und des jeweiligen Ports weitergeleitet. Das folgende Bild illustriert das schematisch:

Die folgende Dokumentation beschreibt eine Installation von NGINX als ReverseProxy auf eigenständiger Hardware unter Raspbian Stretch Lite. Dieser ReverseProxy ist bspw. auch für das Alexa Plugin oder die Nutzung von SmartHomeNG mit „EgiGeoZone“ / „Geofency“ notwendig, damit ein sicherer Zugriff aus dem Internet auf die SmartHomeNG Instanz erfolgen kann.

Annahmen

Diese Anleitung beruht auf folgenden Annahmen

• NGINX wird auf einem frisch aufgesetzten RaspberryPi mit „Raspbian Stretch Lite“ installiert.
• Der RaspberryPi dient ausschliesslich der Funktion als ReverseProxy
• Der Standarduser heißt weiterhin „pi“
• Eine DynDNS (o.ä.) Domain ist vorhanden und leitet auf die aktuelle Internet IP
• SmartHomeNG und smartVISU sind auf einem separaten Rechner im gleichen LAN installiert.

Basiskonfiguration

• Deutsches Keyboard festlegen: /etc/default/keyboard editieren und in der Zeile XKBLAYOUT="..." ein „de“ eintragen. Danach sudo reboot now eingeben, um neu zu starten.
• Aus Sicherheitsgründen das Standard-Passwort für „pi“ ändern: Als User „pi“ mit Standard-Passwort einloggen und mit passwd ein neues Passwort setzen.

NGINX installieren:

sudo apt-get update
sudo apt-get install nginx-full

GeoIP installieren:

Über GeoIP kann mittels der anfragenden IP herausgefunden werden, aus welchem Land eine Anfrage kommt. Darüber lassen sich bspw. Requests aus Risikoländern blockieren.

sudo apt-get install geoip-database libgeoip1
cd /usr/share/GeoIP/
sudo wget http://geolite.maxmind.com/download/geoip/database/GeoLiteCountry/GeoIP.dat.gz
sudo gunzip GeoIP.dat.gz

Let’s Encrypt Server-Zertifikate

(nach https://goneuland.de/debian-9-stretch-lets-encrypt-zertifikate-mit-certbot-erstellen/)

Über Let’s Encrypt lassen sich kostenlos SSL Zertifikate, bspw. für dyndns-Domains, ausstellen.

Certbot installieren:

sudo apt-get install certbot

Nun die Datei /etc/nginx/snippets/letsencrypt.conf bearbeiten:

sudo nano /etc/nginx/snippets/letsencrypt.conf

Dort folgenden Inhalt einfügen, damit certbot die Identität überprüfen kann.:

location ^~ /.well-known/acme-challenge/ {
 default_type "text/plain";
 root /var/www/letsencrypt;
}

sudo mkdir -p /var/www/letsencrypt/.well-known/acme-challenge

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

Dort unterhalb von listen [::]:80 default_server; die Zeile include /etc/nginx/snippets/letsencrypt.conf; einhängen:

server {
        listen 80 default_server;
        listen [::]:80 default_server;
        include /etc/nginx/snippets/letsencrypt.conf;
[...]

sudo service nginx restart

Temporär Port 80 im Router auf den RaspberryPi weiterleiten !

sudo certbot certonly --rsa-key-size 4096 --webroot -w /var/www/letsencrypt -d <mydomain>.<myds>.<me> 

Nachdem man seine E-Mail eingegeben hat, sollte die Generierung erfolgreich durch laufen und mit

Generating key (4096 bits): /etc/letsencrypt/keys/0000_key-certbot.pem
Creating CSR: /etc/letsencrypt/csr/0000_csr-certbot.pem

enden.

Port 80 im Browser wieder schließen, dafür Port 443 (https) entsprechend auf den ReverseProxy-RaspberryPi weiterleiten!

NGINX Konfiguration

/etc/nginx/nginx.conf bearbeiten und direkt im „http“ Block die GeoIP Einstellungen hinzufügen. Unter der Konfiguration der „virtual hosts“ noch einen Block als Schutz gegen Denial of Service Angriffe ergänzen:

http {
    ##
    # GeoIP Settings
    # Nur Länder aus erlaubten IP Bereichen dürfen den ReverseProxy
    # passieren!
    # https://www.howtoforge.de/anleitung/nginx-besucher-mit-dem-geoip-modul-nach-landern-blocken-debianubuntu/
    ##
    geoip_country /usr/share/GeoIP/GeoIP.dat;
    map $geoip_country_code $allowed_country {
        default yes;
        BY no;
        BR no;
        KP no;
        KR no;
        RS no;
        RO no;
        RU no;
        CN no;
        CD no;
        NE no;
        GH no;
        IQ no;
        IR no;
        SY no;
        UA no;
    }
[...]
    ##
    # Virtual Host Configs
    ##

    include /etc/nginx/conf.d/*.conf;
    include /etc/nginx/sites-enabled/*;

    ##
    # Harden nginx against DDOS
    ##

    client_header_timeout 10;
    client_body_timeout   10;
}

NGINX mit sudo service nginx restart neu starten.

/etc/nginx/conf.d/<mydomain>.<myds>.<me>.conf erstellen

server {
    server_tokens off;
    
    ## Blocken, wenn Zugriff aus einem nicht erlaubten Land erfolgt ##
    if ($allowed_country = no) {
        return 403;
    }    
    
    # https://www.cyberciti.biz/tips/linux-unix-bsd-nginx-webserver-security.html
    ## Block download agents ##
    if ($http_user_agent ~* LWP::Simple|BBBike|wget) {
        return 403;
    }

    ## Block some robots ##
    if ($http_user_agent ~* msnbot|scrapbot) {
        return 403;
    }

    ## Deny certain Referers ##
    if ( $http_referer ~* (babes|forsale|girl|jewelry|love|nudit|organic|poker|porn|sex|teen) )
    {
        return 403;
    }

    listen 443 ssl default_server;
    server_name <mydomain>.<myds>.<me>;

    ##
    # SSL
    ##
    
    ## Activate SSL, setze SERVER Zertifikat Informationen ## 
    # Generiert via Let's Encrypt! 
    ssl on;
    ssl_certificate /etc/letsencrypt/live/<mydomain>.<myds>.<me>/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/<mydomain>.<myds>.<me>/privkey.pem;
    ssl_session_cache builtin:1000 shared:SSL:10m;
    ssl_prefer_server_ciphers on;
    # unsichere SSL Ciphers deaktivieren!
    ssl_ciphers    HIGH:!aNULL:!eNULL:!LOW:!3DES:!MD5:!RC4;
    
    ##
    # HSTS
    ##

    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;

    ##
    # global
    ##

    root /var/www/<mydomain>.<myds>.<me>;
    index index.php index.htm index.html;
    
    # Weiterleitung zu SmartHomeNG (Websocket Schnittstelle) mit Basic Auth
    # Nur Verbindungen gegen "/" durchlassen! Also weder auf Dateien noch Verzeichnisse (= nur Websocket Connects)
    location = / {
        auth_basic "Restricted Area: smartVISU";
        auth_basic_user_file /etc/nginx/.smartvisu;      
        proxy_pass http://<SmartHomeNG LAN IP>:<Websocket Port>;        
    }

    # Zugriff auf die smartVISU mit Basic Auth
    location /smartVISU {      
        auth_basic "Restricted Area: smartVISU";
        auth_basic_user_file /etc/nginx/.smartvisu;
        proxy_pass http://<smartVISU Server LAN IP>/smartVISU;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
    
    # Alexa Plugin Weiterleitung
    location /alexa {
        auth_basic "Restricted Area: Alexa";
        auth_basic_user_file /etc/nginx/.alexa;
        proxy_pass http://<SmartHomeNG LAN IP>:<Alexa Plugin Port>/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    # Network Plugin Weiterleitung
    location /shng {
        auth_basic "Restricted Area: SmartHomeNG";
        auth_basic_user_file /etc/nginx/.shng;
        proxy_pass http://<SmartHomeNG LAN IP>:<Network Plugin Port>/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }
}

NGINX reloaden:

/etc/init.d/nginx reload

Passwort-Files für unterschiedliche User für smartVISU, Alexa, Network Plugin erstellen

sudo apt-get install apache2-utils

sudo htpasswd -c /etc/nginx/.smartvisu <username>
sudo htpasswd -c /etc/nginx/.alexa <username>
sudo htpasswd -c /etc/nginx/.shng <username>

Dann ein Passwort vergeben.

Der Zugriff auf https://../smartVISU sollte nun klappen.

Nacharbeiten: Port 80 in NGINX deaktivieren

Da NGINX im LAN aktuell noch auf Port 80 konfiguriert ist, sollte man in der /etc/nginx/sites-available/default noch ein return 403 ergänzen und NGINX neu starten:

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        return 403;

        include /etc/nginx/snippets/letsencrypt.conf;

/etc/init.d/nginx reload

Client Zertifikate erstellen (optional)

openssl.cnf editieren

sudo nano /etc/ssl/openssl.cnf

Folgende Zeilen anpassen:

dir = /etc/ssl/ca                       # Directory where everything is kept
[...]
new_certs_dir = $dir/certs               # default place for new certs.
[...]
certificate = $dir/ca.crt               # The CA certificate
[...]
crl = $dir/crl.pem                      # The current CRL
private_key = $dir/private/ca.key       # The private key
[...]
default_md = sha1 # use public key default MD

Drei neue Verzeichnisse und drei Dateien anlegen:

sudo mkdir -p /etc/ssl/ca/certs/users
sudo mkdir -p /etc/ssl/ca/crl
sudo mkdir -p /etc/ssl/ca/private

sudo touch /etc/ssl/ca/index.txt
sudo touch /etc/ssl/ca/index.txt.attr

In der Datei crlnumber den Wert „01“ eintragen und speichern.

sudo nano /etc/ssl/ca/crlnumber

Zertifikat für Certification Authority (CA) erstellen, Passwort für die CA wählen und eigene Daten eingeben:

sudo openssl genrsa -des3 -out /etc/ssl/ca/private/ca.key 4096
sudo openssl req -new -x509 -days 1095 -key /etc/ssl/ca/private/ca.key -out /etc/ssl/ca/certs/ca.crt
sudo openssl ca -name CA_default -gencrl -keyfile /etc/ssl/ca/private/ca.key -cert /etc/ssl/ca/certs/ca.crt -out /etc/ssl/ca/private/ca.crl -crldays 1095

Client Zertifikat für einen User erstellen und ein Passwort für das Client Zertifikat vergeben:

sudo openssl genrsa -des3 -out /etc/ssl/ca/certs/users/<USERNAME>.key 1024
sudo openssl req -new -key /etc/ssl/ca/certs/users/<USERNAME>.key -out /etc/ssl/ca/certs/users/<USERNAME>.csr

Bei folgendem Schritt das Passwort für die CA eingeben:

sudo openssl x509 -req -days 1095 -in /etc/ssl/ca/certs/users/<USERNAME>.csr -CA /etc/ssl/ca/certs/ca.crt -CAkey /etc/ssl/ca/private/ca.key -CAserial /etc/ssl/ca/serial -CAcreateserial -out /etc/ssl/ca/certs/users/<USERNAME>.crt

Bei folgendem Schritt mit dem Passwort für das Client Zertifikat bestätigen und ein Export Passwort wählen:

sudo openssl pkcs12 -export -clcerts -in /etc/ssl/ca/certs/users/<USERNAME>.crt -inkey /etc/ssl/ca/certs/users/<USERNAME>.key -out /etc/ssl/ca/certs/users/<USERNAME>.p12 

<USERNAME>.p12 File herunterladen:

sudo cp /etc/ssl/ca/certs/users/<USERNAME>.p12 /home/pi
cd /home/pi/
sudo chown pi <USERNAME>.p12

Bspw. nun via SFTP ziehen und aufs Datei aufs Android Handy übertragen und ausführen oder im Browser unter Zertifikate“ importieren. Dabei muss es mit Export Passwort bestätigt werden.

Client Zertifikate in NGINX nutzen (optional)

Anleitung nach https://arcweb.co/securing-websites-nginx-and-client-side-certificate-authentication-linux/

/etc/nginx/conf.d/<mydomain>.<myds>.<me>.conf bearbeiten und die Zeilen im SSL Block ergänzen („ab Client Zertifikat spezifisch“)

    ##
    # SSL
    ##

    ## Activate SSL, setze SERVER Zertifikat Informationen ##
    # Generiert via Let's Encrypt!    
    ssl on;
    ssl_certificate /etc/letsencrypt/live/<mydomain>.<myds>.<me>/fullchain.pem;
    ssl_certificate_key /etc/letsencrypt/live/<mydomain>.<myds>.<me>/privkey.pem;
    ssl_session_cache builtin:1000 shared:SSL:10m;
    ssl_prefer_server_ciphers on;
    # unsichere SSL Ciphers deaktivieren!
    ssl_ciphers    HIGH:!aNULL:!eNULL:!LOW:!3DES:!MD5:!RC4;

    # Client Zertifikat spezifisch
    ssl_client_certificate /etc/ssl/ca/certs/ca.crt;
    ssl_crl /etc/ssl/ca/private/ca.crl;
    ssl_verify_client optional;
    ssl_session_timeout 5m;

Die smartVISU relevanten Teile könnten jetzt folgendermaßen über Clientzertifikate geschützt werden:

    # Weiterleitung zu SmartHomeNG (Websocket Schnittstelle) mit Clientzertifikat
    location = / {
        # Clientzertifikat gültig?
        if ($ssl_client_verify != SUCCESS) {
                return 403;
        }
        proxy_pass http://<SmartHomeNG LAN IP>:<Websocket Port>;      
    }

    # Zugriff auf die smartVISU mit Clientzertifikat
    location /smartVISU {  
        # Clientzertifikat gültig?    
        if ($ssl_client_verify != SUCCESS) {
                return 403;
        }
        proxy_pass http://<smartVISU Server LAN IP>/smartVISU;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

Wer es doppelt sicher haben möchte, kann die Basic Auth in den jew. Blöcken auch beibehalten.

Testbar ist das Ganze, wenn es im Browser ohne Zertifikat einen 403er Fehler gibt und mit Zertifikat die smartVISU aufbaut.

Erweiterung: Stärkere Diffie-Hellman-Parameter

Damit die Sicherheit „perfekt“ wird, sollten stärkere Diffie-Hellman-Schlüssel verwendet werden. Dazu muss ein neues .pem File generiert werden. Es empfiehlt sich, die Erzeugung dieses Files nicht direkt auf den Raspi, sondern auf einem PC mit stärkerer CPU durchzuführen. Ein Test auf einem Raspi3 dauerte 24 Stunden (!). Ein Intel 4790k brauchte hingegen nur 30 Minuten.

Folgendes ist zu tun:

cd /etc/ssl/certs
sudo openssl dhparam -out dhparam.pem 4096

Alternativ kann die Datei auch einfach in /etc/ssl/certs kopiert werden.

Danach ist in der SSL Konfiguration von NGINX folgende Zeile zu ergänzen und NGINX neu zu starten:

# Konfiguration editieren
sudo nano /etc/nginx/conf.d/\<mydomain\>.\<myds\>.\<me\>.conf 

## Dort folgende Zeile im Block SSL einfügen:

##
# SSL
##
[...]
ssl_dhparam /etc/ssl/certs/dhparam.pem;
[...]

## NGINX neu starten
sudo service nginx restart

Die Sicherheit der eigenen https-Domain kann nun unter https://www.ssllabs.com/ssltest/ getestet werden. Mit den oben genannten Maßnahmen sollte ein A+ erreicht werden.

Der versiertere Nutzer kann sich unter https://mozilla.github.io/server-side-tls/ssl-config-generator/ auch gleich eine eigene Konfiguration generieren lassen.

Wartung: Zertifikat nach 3 Monaten erneuern

Nach 3 Monaten muss das Let’s Encrypt Serverzertifikat erneuert werden. Damit das Erneuerungs-Skript funktioniert, muss Port 80 im NGINX freigegeben, bzw. über einen separaten server Block auf HTTPS umgeleitet werden:

server {
    listen 80 default_server;
    listen [::]:80 default_server;
    server_name _;
    return 301 https://$host$request_uri;
}

Die Erneuerung geht dann wie folgendermaßen:
sudo certbot certonly --rsa-key-size 4096 --webroot -w /var/www/letsencrypt -d <mydomain>.<myds>.<me>

Im nun folgenden Dialog Option 2 (2: Renew & replace the cert (limit ~5 per 7 days)) auswählen. Danach NGINX neu starten:
sudo service nginx restart

Der Test über https://www.ssllabs.com/ssltest/ oder der Aufruf im Browser gibt nun Aufschluß über die Laufzeit des verlängerten Zertifikats.

Tipp: Endet die Erneuerung mit einem Timeout, kann dies ggf. an einer fälschlicherweise an den DNS Server propagierten IPV6 Addresse liegen. In diesem Fall testweise bei den DynDNS Einstellungen diese deaktivieren.

(Die in diesem Artikel verwendeten Screenshots und Grafiken wurden selber erstellt. Verwendete Symbole und Icons stammen von https://openclipart.org. Das Titelbild ist unter der Creative Commons Zero (CC0) Lizenz veröffentlicht und wurde von www.pexels.com bezogen.)