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);
    }
});

Ein anderer Anwendungsfall ist es, von der aktuellen Zone (bspw. der Arbeitsplatz) mit dem Traffic Plugin die Fahrzeit nach Hause zu berechnen und via Pushbullet Plugin bei Überschreitung einer bestimmten Dauer Alarm zu schlagen. Dieser Anwendungsfall ist Thema eines separaten Artikels.

Einrichtung des Network Plugins für EgiGeoZone

Als erstes ist das Network Plugin in die etc/plugin.yaml aufzunehmen. Auf einem angegebenen Port muss es mit HTTP aufrufbar sein.

nw:
    class_name: Network
    class_path: plugins.network
    ip: 
    tcp: 'yes'
    http: 8888

Als nächstes wird in der etc/logic.yaml eine Logik für das Einfahren und das Verlassen einer Zone definiert, die via Network-Plugin aufgerufen werden kann:

GeoZoneEntry:
    filename: geozone_entry.py
    nw: 'yes'

GeoZoneExit:
    filename: geozone_exit.py
    nw: 'yes'

Damit das Ganze nun von außen über das Internet erreichbar ist, wurde via NGINX ein Reverse Proxy mit Basic Authentication eingerichtet. Alternativ kann das Smartphone auch im VPN eingeloggt sein und die Anfragen direkt gegen den SmartHomeNG Server unter http://<IP-Adresse von SmartHomeNG>:8888/ schicken.

Tipp: Grundlegende Informationen zur Nutzung von NGINX als Reverse Proxy für SmartHomeNG und die smartVISU können unter https://www.smarthomeng.de/nginx-als-reverseproxy gefunden werden!

In der /etc/nginx/.shng sind dabei mit htpasswd ein Username und ein Passwort generiert worden. So steht der Endpunkt geschützt im Internet. Diese Daten müssen später in der EgiGeoZone App eingetragen werden.

location /shng {
        auth_basic "Restricted Area: SmartHomeNG";
        auth_basic_user_file /etc/nginx/.shng;

        if ($allowed_country = no) {
                return 403;
                break;
        }
        proxy_pass http://<IP-Adresse von SmartHomeNG>:8888/;
        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;
    }

Im nächsten Schritt müssen einige Items angelegt werden:

location:

        lat:
            type: str
            visu_acl: ro
            cache: 'yes'

        lon:
            type: str
            visu_acl: ro
            cache: 'yes'
 
        prev_zone:
            type: str
            visu_acl: ro
            cache: 'yes'

        zone:
            type: str
            visu_acl: ro
            cache: 'yes'

        entry_date:
            type: str
            visu_acl: ro
            cache: 'yes'

        exit_date:
            type: str
            visu_acl: ro
            cache: 'yes'

Nun sind noch die beiden Logiken zu erzeugen.

logics/geozone_entry.py:

from lib.shtime import Shtime

sh_now = Shtime.get_instance().now()

parts = []
parts = value.split(',')

sh.location.prev_zone(sh.location.zone())

if sh.location.prev_zone() != parts[1]:
    sh.location.zone(parts[1])
    sh.location.lat(parts[2])
    sh.location.lon(parts[3])
    sh.location.exit_date('')
    sh.location.entry_date(sh_now.strftime("%Y-%m-%d %H:%M:%S"))
    if parts[1] == 'Home':
        # Tor öffnen
        sh.knx.outside.gate.driveway.open.full(1)

logics/geozone_exit.py:

from lib.shtime import Shtime

sh_now = Shtime.get_instance().now()

parts = []
parts = value.split(',')

sh.location.prev_zone(sh.general.location.zone())
sh.location.exit_date(sh_now.strftime("%Y-%m-%d %H:%M:%S"))
sh.location.entry_date('')
sh.location.zone("Unterwegs")

Spätestens jetzt muss SmartHomeNG neu gestartet werden.

EgiGeoZone einrichten

Nach der Installation der EgiGeoZone App aus dem Android Play Store muss dieses initial konfiguriert werden.

Dazu muss über das Menü links oben der Punkt „Profile“ gewählt werden. Hier fügt man nun mit + ein neues Serverprofil hinzu („SmartHomeNG“):

In diesem Profil müssen der zuvor via htpasswd konfigurierte Benutzer und dessen Passwort hinterlegt werden. Wird das Ganze via VPN genutzt, kann die Angabe entfallen.

Für das Betreten / Verlassen der jeweiligen Zone, setzt man nun die jeweiligen URLs in den zugehörigen Felder („URL Zone betreten“, „URL Zone verlassen“).

Die URL besteht im Wesentlichen aus dem Namen der Logik und mehreren kommagetrennten Parametern, die die EgiGeoZone App befüllt. In der Logik werden diese aus dem übergebenen Wert (value) in das Array parts geschrieben.

Betreten der Zone:

https://<dyndns URL>/shng/logic|GeoZoneEntry|${deviceId},${zone},${latitude},${longitude},${accuracy}

bzw. im VPN:

http://<IP-Adresse von SmartHomeNG>:8888/logic|GeoZoneEntry|${deviceId},${zone},${latitude},${longitude},${accuracy}

Verlassen der Zone:

https://<dyndns URL>/shng/logic|GeoZoneExit|${deviceId},${zone},${latitude},${longitude},${accuracy}

bzw. im VPN:

http://<IP-Adresse von SmartHomeNG>:8888/logic|GeoZoneExit|${deviceId},${zone},${latitude},${longitude},${accuracy}

parts[0] ist die eindeutige Geräte-UUID, parts[1] der String der später in EgiGeoZone definierten Zone, parts[2] die Latitude, parts[3] die Longitude der jeweiligen GPS Koordinate der Zone, in der man sich befindet. Mit parts[4] wird noch die aktuelle Genauigkeit der Messung übertragen, die bisher in den Logiken nicht verwendet wird.

Die Werte werden nach dem Auslesen in das Array parts über die Logik in das jeweilige Item geschrieben.

Die erste Zone

Befindet man sich nun z.B. zu Hause, kann die erste Zone schnell definiert werden.

Auf der Hauptseite der EgiGeoZone App ist die Liste der „GeoZonen“ zu sehen. Diese ist initial leer. Über das „+“ Icon rechts unten fügt man eine neue Zone hinzu.

Entweder gibt man die Koordinaten des Zentrums direkt ein (bspw. via Google Maps zu bestimmen), oder man zieht sich über die kleine Weltkugel daneben den aktuellen Wert. Dazu kann man den Radius wählen, was auf einer Karte angezeigt wird.

Als Serverprofil ist nun das zuvor anlegte „SmartHomeNG“ Profil zu wählen.

Beim ersten Erkennen eines Aufenthalts in der Zone, wird nun sofort die GeoZoneEntry Logik aufgerufen. Die entsprechenden Items sollten nun aktualisiert werden.

Nach und nach kann man weitere Zonen festlegen und die Logik(en) entsprechend modifizieren.

Nutzung mit mehreren Geräten

Will man bei unterschiedlichen Smartphones entsprechend unterschiedlich reagieren, lässt sich über das Icon mit den drei Punkten in der rechten oberen Ecke von EgiGeoZone – und dort im Menüpunkt „Technische Info“ – die eindeutige Geräte-UUID einsehen (Achtung: diese ist unterhalb der Android-UUID zu finden und nicht mit dieser zu verwechseln).

In der Logik kann man gezielt auf diese UUID über parts[0] prüfen und daher unterschiedlich reagieren. Beispielsweise könnte man für jedes Endgerät eigenes Items definieren und deren aktuelle Zone getrennt voneinander tracken.

So können bspw. mehrere Familienmitglieder auf einer Google Maps Karte visualisiert werden. Dazu folgt demnächst ein weiterer Artikel.

(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.)