Google Maps mit verkehrslage

[oli82]

Genau.
Der Service läuft bei mir auf dem Server. Es gibt andere Apps, die das in einer Cloud speichern, aber das wollen wir ja nicht
Hier mal ein Paar Links zum Thema, teilweise mit Source:
http://homematic-forum.de/forum/view...p?f=31&t=15505
https://github.com/paresy/SymconMisc...aster/Geofency
http://www.loxwiki.eu/display/LOX/An...e+und+Geofency

Funktioniert nebenbei mit iOS und Android

[psilo]

oli82 ich schaus mir mal an.. ist vielleicht etwas besser zu pflegen als meine selbergecodete app in der ich händisch schnittlinien mit gps koordinaten definiere und zudem vielleicht sparsamer weil professionell entwickelt

btw: im google play store finde ich nur egigeozone geofence. das ist was anderes nehme ich an?

[oli82]

Ist zwar ein anderes Program, funktioniert aber auch. Geofency wird nicht mehr für Android angeboten. https://play.google.com/store/apps/d....geozone&hl=de ist die Alternative

[psilo]

oli82 ich nehme mir das mal als Kleinprojekt für das Wochenende vor.. im FHEM habt ihr wohl schon die Infrastruktur. Mal sehen wie ich das an SmartHomeNG andocke...
Wenn das funktioniert kann ich mal schauen, ob und wie ich die Karte anpasse.. für die Steelseries Widgets muss ich mir das ganze JS Handling in der SV sowieso noch tiefer ansehen

[oli82]

Danke psilo . Dein Kleinprojekt würde bei mir mehrere Tage benötigen. Ich kümmere mich da lieber um mein Fingerprint Projekt. Sowas kann ich besser

[psilo]

soweit ich die api unter http://www.egigeozone.de/manual/defa...reinstellungen sehe, sollte das wunderbar via network plugin gehen..

Update: Koordinaten und Zone sind jetzt im SmartHomeNG.. schonmal danke für die Nennung der App... sehr praktisch...

Für die dies interessiert:
Ich habe jew. für Entry und Exit eine Logik unter folgender URL via Network Plugin erreichbar gemacht (Beispiel bereits im YAML Format der DEV Version):

#plugin.conf
nw:
    class_name: Network
    class_path: plugins.network
    ip: 192.168.178.100
    tcp: 'yes'
    http: 8888

#logic.conf
GeoZoneEntry:
    filename: geozone_entry.py
    nw: 'yes'

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

Diese hört auf:
http://<local ip>:<port>/logic|GeoZoneEntry|${deviceId},${zone},${latitude} ,${longitude},${accuracy}
http://<local ip>:<port>/logic|GeoZoneExit|${deviceId},${zone},${latitude}, ${longitude},${accuracy}
Letzteres sind Parameter der EgiGeoZone App, die URLs hinterlege ich dort als ServerProfile und aktiviere dieses bei meinen Zonen.

In der Logik zerlege ich den String wieder (parts = value.split(',')) und belege Items mit den Arraywerten.. Darüberhinaus speichere ich mir noch Entry und Exit Zeit und beim Verlassen einer Zone setze ich hard coded "Unterwegs" als Zone.

Das Ganze funktioniert bei mir natürlich nur bei VPN Verbindung.

Die Sache mit dem live Update auf der Karte schaue ich morgen mal an.

[psilo]

So, nach langem Hin- und her ein Widget, dass zumindest dann tut, wenn man auf der gleichen Seite noch ein basic.value mit Längen und Breitengrad hat:
Aktuell kann man eine Position setzen, die bei Updates dann als Marker mitversetzt wird..

So ich habe jetzt auch das Problem mit den Updates.. es liegt an der ID des DIVs über die alle zu updatenden Elemente ermittelt werden [base.js -> $('[id^="' + $.mobile.activePage.attr('id') + '-"][data-item]').each(function (idx)]... Vermutlich kann ich jetzt auch die Steelseries korrigieren..

Mit dem untenstehenden Code sollte es jetzt also auch ohne basic.value funzen.

/**
 * Displays a google maps map with one position
 *
 * @param unique id for this widget
 * @param a gad/item for latitude
 * @param a gad/item for longitude
 * @param traffic information on (=1) or off (=0)
 */
{% macro map(id, gad_lat, gad_lon, traffic) %}
    <div id="{{ uid(page, id) }}" style="width: 100%; height: 400px;" data-widget="gmaps.map" data-item="{{ gad_lat }}, {{ gad_lon}}"></div>
    <script src="https://maps.googleapis.com/maps/api/js?key=<apikey>&callback=initMap&signed_in=true" async defer>
    </script>
    <script>
        var map_{{ id }};
        var marker_{{ id }};

        function initMap() {
          map_{{ id }} = new google.maps.Map(document.getElementById('{{ uid(page, id) }}'), {
            zoom: 11,
            center: {lat: 48.16860, lng: 11.40060}
          });

          {% if traffic %}
          var trafficLayer_{{ id }} = new google.maps.TrafficLayer();
          trafficLayer_{{ id }}.setMap(map_{{ id }});
          {% endif %}        

          marker_{{ id }} = new google.maps.Marker({})
          marker_{{ id }}.setMap(map_{{id}});
        }    

        {% if gad_lat and gad_lon %}  
        $(document).on('pagecreate', function (bevent, bdata) {
             $(bevent.target).find('div[data-widget="gmaps.map"]').on({
        'update': function (event, response) {
                    event.stopPropagation();
                    var pos = new google.maps.LatLng(parseFloat(response[0]),parseFloat(response[1]));
                    marker_{{ id }}.setPosition(pos);    
                    //alert(parseFloat(response[0])+' '+response[1]);
                }
        });
        })
        {% endif %}
    </script>
{% endmacro %}

[gnarrf]

Guten Abend,
zunächst einmal vielen Dank für die großartige Vorarbeit.

Ich habe mich heute auch ein bisschen mit dem Widget beschäftigt und bin dazu übergegangen, mehr Parameter zu übergeben und ein paar Angaben in die config.php auszulagern. Vielleicht kann ich dann noch ein Konfig-Seite bauen, in der man die Parameter eintragen kann.
Das hätte den Vorteil, dass man auf unterschiedlichen Seiten auch Unterschiedliches anzeigen lassen kann.

config.php:

define(config_traffic_key, '<KEY>');
    define(config_traffic_homename, 'home');
    define(config_traffic_homelat, '45.950');
    define(config_traffic_homelon, '7.690');

Im minimalistischsten Fall ruft man das Widget so auf:

{% import "widget_traffic.html" as stau%}
{{ stau.traffic('stau')

Sinnvoller wäre natürlich zumindest mal Zoomstufe und Center:
{{ stau.traffic('stau','stau', 11, '46.050', '7.750') }}

Das eigentliche Widget:
widget_traffic.html

/**
 * Google Traffic Widget
 *
 * @param       unique id for this widget
 * @param       txt
 * @param       gad_key
 * @param       gad_zoom zoom-level: Default 10
 * @param       gad_lat center latitude
 * @param       gad_lan center longitude
 * @param       gad_width window width
 * @param       gad_height window height
 * @param       marker_txt
 * @param       marker_lat
 * @param       marker_lan
 *
 */
{% macro traffic(id, txt, gad_key, gad_zoom, gad_lat, gad_lan, gad_width, gad_heigth, marker_txt, marker_lat, marker_lan) %}
    {% set uid = uid(page, id) %}
    {% if txt %} <h2>{{ txt }}</h2> {% endif %}

<div id="map" style="
    {% if (gad_width) and (gad_heigth) %}
        width: {{ gad_width }} ;
        height: {{ gad_heigth }} ;
    {% else %}
        width: 100%; height: 400px;
    {% endif %}            
    ">
</div>
<script src="https://maps.googleapis.com/maps/api/js?key{{ gad_key }}=&callback=initMap&signed_in=false" async defer>
</script>
<script>        
    function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
                    {% if (gad_zoom) %}
                        zoom: {{ gad_zoom }},
                    {% else %}
                        zoom: 8,
                    {% endif %}
                    center: {
                        {% if (gad_lat) and (gad_lan) %}
                            lat: {{ gad_lat }} , lng: {{ gad_lan }},
                        {% else %}
                            lat: 45.950, lng: 7.690
                        {% endif %}
                        },
                    disableDefaultUI: false,
                    clickableIcons: false,
                    mapTypeControl: false,
                    streetViewControl: false
                });

            var trafficLayer = new google.maps.TrafficLayer();
            trafficLayer.setMap(map);

            {% if (marker_txt) and (marker_lat) and (marker_lan) %}
                var marker = new google.maps.Marker({
                    position: {lat: {{ marker_lat }}, lng: {{ marker_lan }} },
                    map: map,
                    title:' {{ marker_txt }} '
                      });
            {% endif %}

                }
            </script>

{% endmacro %}

Viele Grüße
Jan

[psilo]

Cool wäre, wenn man zu einer bestimmten zeit automatisch die route zur homelocation inkl fahrzeit anzeigen könnte.. muss da das wochenende experimentieren. das hätte mir gestern sicher 2h stau erspart

[oli82]

Guten Morgen.

kann jetzt nur von fhem sprechen. Dort ist das möglich, mit dem Modul Traffic die Fahrzeiten zu berechnen. Evtl könnt ihr da was abschauen.

[psilo]

Habe das jetzt ganz gut über den directionsService der directions API hinbekommen.. muss mir jetzt nur noch im smarthome eine logik überlegen, das ein und auszuschalten.. abhg. von uhrzeit und aktuellem ort

oli82 danke nochmal für den FHEM Tipp.. habe jetzt im smarthomeNG auch eine direkte Nutzung der Directions API eingerichtet. das vorher war nur per javascript.. das kombiniert mit geofency funktioniert 1a..

berechne jetzt wenn ich in der arbeit bin zu einer bestimmten zeit immer die fahrzeit nach hause und schicke wenn sich das verschlechter eine pushbullet note.. besser gehts fast nicht

[psilo]

vielleicht spannend für alle shNG Nutzer: https://knx-user-forum.de/forum/supp...support-thread

[psilo]

Wen es interessiert: hier eine Umsetzung für SmartVISU 2.9 unter Nutzung des SmartHomeNG Traffic Plugins und EgiGeoZone (mit Network Plugin):

https://www.smarthomeng.de/google-ma...-smartvisu-2-9

[Max2612]

Hab mal nach deiner Anleitung versucht, das auch hinzubekommen.
Also der sh- Teil funktioniert schonmal...

Rufe ich aber die Seite mit dem Widget auf, lädt sie unedlich.
Folgenden Fehler gibt die Konsole aus:

gmaps.js:12 Uncaught ReferenceError: google is not defined
    at a.(/smartVISU/anonymous function).(anonymous function)._create (http://192.168.1.13/smartVISU/dropins/widgets/gmaps.js:12:24)
    at a.(/smartVISU/anonymous function).(anonymous function)._create (http://192.168.1.13/smartVISU/vendor/jquery.mobile/jquery.mobile-1.4.5.min.js:3:9626)
    at a.(/smartVISU/anonymous function).(anonymous function)._createWidget (http://192.168.1.13/smartVISU/vendor/jquery.mobile/jquery.mobile-1.4.5.min.js:3:11649)
    at new a.(/smartVISU/anonymous function).(anonymous function) (http://192.168.1.13/smartVISU/vendor/jquery.mobile/jquery.mobile-1.4.5.min.js:3:9187)
    at HTMLDivElement.<anonymous> (jquery.mobile-1.4.5.js:947)
    at Function.each (jquery-2.1.4.min.js:2)
    at n.fn.init.each (jquery-2.1.4.min.js:2)
    at n.fn.init.a.fn.(/smartVISU/anonymous function) [as gmaps_map] (http://192.168.1.13/smartVISU/vendor/jquery.mobile/jquery.mobile-1.4.5.min.js:3:10498)
    at n.fn.init.enhanceWithin (jquery.mobile-1.4.5.js:602)
    at a.(/smartVISU/anonymous function).(anonymous function)._create (http://192.168.1.13/smartVISU/vendor/jquery.mobile/jquery.mobile-1.4.5.min.js:4:13190)
_create @ gmaps.js:12
(anonymous) @ jquery.mobile-1.4.5.js:835
_createWidget @ jquery.mobile-1.4.5.js:1000
a.(anonymous function).(anonymous function) @ jquery.mobile-1.4.5.js:796
(anonymous) @ jquery.mobile-1.4.5.js:947
each @ jquery-2.1.4.min.js:2
each @ jquery-2.1.4.min.js:2
a.fn.(anonymous function) @ jquery.mobile-1.4.5.js:919
enhanceWithin @ jquery.mobile-1.4.5.js:602
_create @ jquery.mobile-1.4.5.js:4455
(anonymous) @ jquery.mobile-1.4.5.js:835
a @ jquery.mobile-1.4.5.js:822
_create @ jquery.mobile-1.4.5.js:6565
(anonymous) @ jquery.mobile-1.4.5.js:835
_createWidget @ jquery.mobile-1.4.5.js:1000
_createWidget @ jquery.mobile-1.4.5.js:4436
(anonymous) @ jquery.mobile-1.4.5.js:835
a.(anonymous function).(anonymous function) @ jquery.mobile-1.4.5.js:796
(anonymous) @ jquery.mobile-1.4.5.js:947
each @ jquery-2.1.4.min.js:2
each @ jquery-2.1.4.min.js:2
a.fn.(anonymous function) @ jquery.mobile-1.4.5.js:919
_enhance @ jquery.mobile-1.4.5.js:4876
(anonymous) @ jquery.mobile-1.4.5.js:835
_include @ jquery.mobile-1.4.5.js:4884
(anonymous) @ jquery.mobile-1.4.5.js:835
(anonymous) @ jquery.mobile-1.4.5.js:5095
f @ jquery-2.1.4.min.js:2
j @ jquery-2.1.4.min.js:2
fireWith @ jquery-2.1.4.min.js:2
x @ jquery-2.1.4.min.js:4
(anonymous) @ jquery-2.1.4.min.js:4
load (async)
send @ jquery-2.1.4.min.js:4
ajax @ jquery-2.1.4.min.js:4
load @ jquery.mobile-1.4.5.js:5240
(anonymous) @ jquery.mobile-1.4.5.js:835
_loadUrl @ jquery.mobile-1.4.5.js:5375
(anonymous) @ jquery.mobile-1.4.5.js:835
change @ jquery.mobile-1.4.5.js:5465
(anonymous) @ jquery.mobile-1.4.5.js:835
(anonymous) @ jquery.mobile-1.4.5.js:933
each @ jquery-2.1.4.min.js:2
each @ jquery-2.1.4.min.js:2
a.fn.(anonymous function) @ jquery.mobile-1.4.5.js:919
a.mobile.changePage @ jquery.mobile-1.4.5.js:5844
(anonymous) @ jquery.mobile-1.4.5.js:6133
dispatch @ jquery-2.1.4.min.js:3
r.handle @ jquery-2.1.4.min.js:3

Kannst du damit was anfangen?

[psilo]

Max2612 hast du das HTML auch im dropins ordner abgelegt? Hast Du den API Key angegeben?

Wichtig ist:

<script src="https://maps.googleapis.com/maps/api/js?key=xxx"></script>

Da bei Dir schon der erste aufruf auf "google" fehlschlägt, haut m.E. da was nicht hin..