[Closed] Neues FTUI Widget Kartendarstellung mit Google Maps API

[eki]

Ich könnte relativ leicht einbauen, dass das Widget über data-latitude und data-longitude auch Listen akzeptiert. Du könntest dann also in FHEM einen Dummy anlegen, der die Koordinaten der Hydranten als Listen (z.B. mit Komma oder Space getrennt) enhält. Diese würden dann als einzelne Punkte mit den entsprechenden Symbolen angezeigt. Eventuell kann man auch noch im über Listen im alias attribut verschiedene Namen für die Melder hinterlegen.

Eine etwas bessere Methode wäre, die Liste der Hydranten in einem xml (eventuell auch direkt in einem kml file) file abzulegen und das dann entsprechend in die Karte einzubeziehen. Das wäre mehr Aufwand, allerdings eine recht saubere und flexible Lösung.
Um zu entscheiden, was besser ist, müsste ich noch wissen, ob Du die Hydranten in irgendeiner Weise in FHEM drin hast oder nicht (z.B. ob Du die per FHEM irgendwie überwachst).

[mackshot]

Poste hier mal bitte Deine Definition des widgets in FTUI.

Gerne

Code Auswählen Erweitern


<div id="myMap"
    style="height:100%; width:100%"
    data-type="gmaps"
    data-showdetails="true"
    data-device="Traffic_Arbeit_Markus"
    data-mapgroup="1"
    data-traffic="true"
    data-stroke="#000,0,50"></div>

Übrigens... Ich habe dein JS erweitert, sodass man auch Styles übergeben kann für eine Nachtdarstellung. Liegt der Quellcode in einem öffentlichen Repository wo ich das beisteuern darf?

[Kuzl]

Um zu entscheiden, was besser ist, müsste ich noch wissen, ob Du die Hydranten in irgendeiner Weise in FHEM drin hast oder nicht (z.B. ob Du die per FHEM irgendwie überwachst).

Ich denke, die zweite Variante wäre die bessere.
Ich benötige die Hydranten nicht unbedingt in FHEM, aber es wäre gut, wenn man die noch vom Einsatzort unterscheiden könnte 

Am schönsten wäre, wenn man für die verschiedenen Hydrantenarten (Oberflur, Unterflur) auch verschiedene Icons vergeben könnte, so wie es jetzt auch der Fall ist.

Der Andwendungsfall ist, dass in der Karte der Einsatzort und die umliegenden Hydranten zu sehen sind. Evtl noch die Route dahin vom Gerätehaus, je nach dem ob man dann noch was erkennt.

Wäre cool, wenn du das einbauen könntest

Vielen Dank und Grüße,
Kuzl

[eki]

Gerne

Code Auswählen Erweitern


<div id="myMap"
    style="height:100%; width:100%"
    data-type="gmaps"
    data-showdetails="true"
    data-device="Traffic_Arbeit_Markus"
    data-mapgroup="1"
    data-traffic="true"
    data-stroke="#000,0,50"></div>
[/code]

Ich denke, ich habe den Fehler gefunden und in der angehängten Version korrigiert. Bitte teste mal.

Übrigens... Ich habe dein JS erweitert, sodass man auch Styles übergeben kann für eine Nachtdarstellung. Liegt der Quellcode in einem öffentlichen Repository wo ich das beisteuern darf?

Ich habe die sourcen zwar in git, aber dort noch nicht aktuell, das muss ich erst noch mal richtig mit meiner IDE verdrahten. Du kannnst mir gern Deine Änderungen hier posten, dann baue ich das noch ein.[/code]

[MCh76]

Hallo eki,

das Widget ist wirklich ein Traum, große Klasse.
Eine Frage zum data-center habe ich:

data-center: Gibt das Zentrum der Karte an (als String mit "<Latitude>,<Longitude>"), kann auch weggelassen werden, wenn es sich um ein TRAFFIC Device handelt, dann wird der Wert aus GoogleMapsCenter Reading genommen oder, falls das auch nicht vorhanden ist, wird das Zentrum aus der Ausdehnung der Route(n) ermittelt.

Wenn ich nun einen Einzelausschnitt nur meiner näheren Umgebung des Wohnorts darstellen will und folgenden Code ansetze:

Code Auswählen Erweitern


<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="false"
data-device="global"
data-mapgroup="1"
data-label="fa-home"
data-stroke="#33dd00,7,70">
</div>


Wie kann ich dann die Werte gemäß des Längen-/Breitengrads aus dem global Device so an das Widget übergeben, damit es verstanden wird.
Und daran anschließend die Frage was denn ein geeigneter Zoom für diese "Umgebungskarte" wäre, sagen wir ca. 500m bis 1km ums Haus herum.

Danke und VG,
Chris

[eki]

Habe gerade festgestellt, dass da noch ein Fehler drin ist, der auftritt, wenn man nur einen Punkt setzt ohne Wegstrecke. In der angefügten Version sollte es jetzt auch nur mit Punkten (ohne Wegstrecke) und ohne data-center funktionieren.

[mackshot]

Ich denke, ich habe den Fehler gefunden und in der angehängten Version korrigiert. Bitte teste mal.
Ich habe die sourcen zwar in git, aber dort noch nicht aktuell, das muss ich erst noch mal richtig mit meiner IDE verdrahten. Du kannnst mir gern Deine Änderungen hier posten, dann baue ich das noch ein.[/code]

Teste ich gerne, leider vermutlich erst kommende Woche.

Hier meine Erweiterung für ein Custom-Styling der Karte mit Beispiel für einen Nachtmodus:
Deinen JS Code habe ich erweitert um eine Zeile (siehe map_options_styles)

Code Auswählen Erweitern


        function init_map_options(elem) {
                if (!elem.data('map_options')) elem.data('map_options',{});
                if (!elem.data('map_options').center) elem.data('map_options').center = (elem.data('center')&& elem.data('center')!='auto')? {lat: parseFloat(elem.data('center').split(",")$
                if (!elem.data('map_options').zoom) elem.data('map_options').zoom = (elem.data('zoom')&&elem.data('zoom')!='auto') ? parseFloat(elem.data('zoom')) : 1;

                if (!elem.data('map_options').styles) elem.data('map_options').styles = elem.data('map_options_styles');

                if (!elem.data('direction_request')) elem.data('direction_request',{});
                elem.data('direction_request').provideRouteAlternatives = false;
                if (!elem.data('direction_request').travelMode) elem.data('direction_request').travelMode = elem.data('travel_mode') ? elem.data('travel_mode').toUpperCase() : 'DRIVING';

                //elem.data('size') =  elem.data('size');
        }


Weiter ergänze ich dann bei der Definition Folgendes für eine Kartendarstellung im Nightmodus (passend zur dunklen fhem Standardoerfläche):

Code Auswählen Erweitern


data-map_options_styles='[
            {"elementType": "geometry", "stylers": [{"color": "#242f3e"}]},
            {"elementType": "labels.text.stroke", "stylers": [{"color": "#242f3e"}]},
            {"elementType": "labels.text.fill", "stylers": [{"color": "#746855"}]},
            {
              "featureType": "administrative.locality",
              "elementType": "labels.text.fill",
              "stylers": [{"color": "#d59563"}]
            },
            {
              "featureType": "poi",
              "elementType": "labels.text.fill",
              "stylers": [{"color": "#d59563"}]
            },
            {
              "featureType": "poi.park",
              "elementType": "geometry",
              "stylers": [{"color": "#263c3f"}]
            },
            {
              "featureType": "poi.park",
              "elementType": "labels.text.fill",
              "stylers": [{"color": "#6b9a76"}]
            },
            {
              "featureType": "road",
              "elementType": "geometry",
              "stylers": [{"color": "#38414e"}]
            },
            {
              "featureType": "road",
              "elementType": "geometry.stroke",
              "stylers": [{"color": "#212a37"}]
            },
            {
              "featureType": "road",
              "elementType": "labels.text.fill",
              "stylers": [{"color": "#9ca5b3"}]
            },
            {
              "featureType": "road.highway",
              "elementType": "geometry",
              "stylers": [{"color": "#746855"}]
            },
            {
              "featureType": "road.highway",
              "elementType": "geometry.stroke",
              "stylers": [{"color": "#1f2835"}]
            },
            {
              "featureType": "road.highway",
              "elementType": "labels.text.fill",
              "stylers": [{"color": "#f3d19c"}]
            },
            {
              "featureType": "transit",
              "elementType": "geometry",
              "stylers": [{"color": "#2f3948"}]
            },
            {
              "featureType": "transit.station",
              "elementType": "labels.text.fill",
              "stylers": [{"color": "#d59563"}]
            },
            {
              "featureType": "water",
              "elementType": "geometry",
              "stylers": [{"color": "#17263c"}]
            },
            {
              "featureType": "water",
              "elementType": "labels.text.fill",
              "stylers": [{"color": "#515c6d"}]
            },
            {
              "featureType": "water",
              "elementType": "labels.text.stroke",
              "stylers": [{"color": "#17263c"}]
            }
          ]'


Man könnte natürlich auch überlegen einen Schalter für einen Nightmode zu hinterlegen wo man die Styles dann in Deinem JS hinterlegt.

Ich habe übrigens weiter die Idee, dass man für den Infodialog auch noch mehr Optionen einfügt. So würde ich gerne die Möglichkeit haben die Ankunftzeit auszublenden, denn wenn ich das ganze (zu Nachtzeiten) nur einmal in der Stunde aktualisiere, ist die Ankunftszeit nicht sehr hilfreich. Einfügen würde ich gerne eine Möglichkeit das letzte Update dort anzuzeigen. Sprich, es würde mich sehr freuen, wenn Du Deinen Code bei Github hochladen könntest, dann könnte ich Dir ein paar Pull-Requests einreichen .

Dank und Gruß
Markus

[eki]

Ich habe Deine Änderung jetzt mal eingebaut. Ich habe die Definitionen für den Nachtmodus ins js gepackt, und ein neues Attribut data-nightmode vorgesehen. Wenn data-nichtmode ="true" dann wird der Stil auf "Nacht" umgeschaltet. Man kann aber trotzdem noch einen eigenen Stil in die widget Konfiguration packen, wenn man das will.
Noch eine Frage dazu: Wenn man die Verkehrsdarstellung anschaltet (data-traffic="true") dann wird der Verkehrslayer noch genauso dargestellt wie beim "Tagmodus". Ist das Absicht? Ich habe auf die Schnelle auch nichts gefunden, wie man das ändern kann.

Ich melde mich, wenn ich das mit git soweit habe und freue mich auf Deine Pull-Requests .

[mackshot]

Ich melde mich, wenn ich das mit git soweit habe und freue mich auf Deine Pull-Requests .

Danke!

[mackshot]

Noch eine Frage dazu: Wenn man die Verkehrsdarstellung anschaltet (data-traffic="true") dann wird der Verkehrslayer noch genauso dargestellt wie beim "Tagmodus". Ist das Absicht? Ich habe auf die Schnelle auch nichts gefunden, wie man das ändern kann.

Habe dazu leider auch nichts gefunden. Sieht aber glücklicherweise gar nicht sooo schlecht aus

[eki]

Ich habe noch mal eine Änderung gemacht, man kann jetzt den Verkehrslayer über einen Button auf der Karte aus- und anschalten.

[eki]

Ich denke, die zweite Variante wäre die bessere.
Ich benötige die Hydranten nicht unbedingt in FHEM, aber es wäre gut, wenn man die noch vom Einsatzort unterscheiden könnte 

Am schönsten wäre, wenn man für die verschiedenen Hydrantenarten (Oberflur, Unterflur) auch verschiedene Icons vergeben könnte, so wie es jetzt auch der Fall ist.

Der Andwendungsfall ist, dass in der Karte der Einsatzort und die umliegenden Hydranten zu sehen sind. Evtl noch die Route dahin vom Gerätehaus, je nach dem ob man dann noch was erkennt.

Wäre cool, wenn du das einbauen könntest

Vielen Dank und Grüße,
Kuzl

Ich habe jetzt mal eine erste Version fertig (angehängt), die zusätzliche Informationen (wie z.B. Deine Hydranten) auf die Karte legen kann. Das bedarf aber einiger Erklärungen:

Es gibt 2 neue parameter data-geojson und data-feature_style.

Über data-geojson kannst Du auf eine Datei im geojson Format verweisen, die geladen wird, und deren Objekte auf der Karte angezeigt werden. Die Datei muss auf dem Server (FHEM) liegen (also typischerweise im www/tablet Verzeichnis). Ich habe z.B. unter www/table ein Unterverzeichnis data erstellt und geben data-geojson="data/file.geojson" an. In dem geojson file können beliebige Objekte definiert werden, das Format ist unter www.geojson.org beschrieben.

Über den Parameter data-feature_style kann man recht flexibel festlegen, wie die Objekte dargestellt werden sollen. Das Ganze ist ein js Objekt, wird also in '{}' eingeschlossen. Innerhalb des Objektes legen 3 Objekteigenschaften fest, wie die Darstellung aussehen soll.
Die Eigenschaft "popup_properties_click" hat als Wert eine Leerzeichen getrennte Liste von Expressions, welche, falls sie auf Properties der Objekte im geojson File zutreffen, dazu führen, dass beim Klick auf die angezeigten Objekte ein Info Window geöffnet wird, welches die entsprechenden geojson Objekteigenschaften anzeigt.
Die Eigenschaft "popup_properties_move" macht genau das Gleiche, allerdings sorgen die dort angegebenen Expressions dafür dass die dazu passenden geojson Objekte per Popup bei Überfahren mit der Maus und nicht bei Klick angezeigt werden und beim Verlassen mit der Maus dann auch wieder automatisch verschwinden.
Die Eigenschaft "display_styles" legt genau fest, wie die verschiedenen geojson Objekte dargestellt werden sollen. Der Wert dieser Eigenschaft ist wiederum ein Objekt. Als Eigenschaftsname wird ein Verweis auf ein bestimmtes Objekt im geojson File verwendet. Der Verweis kann entweder eine Eigenschaft eines Objekts im geojson File sein oder eine Kombination aus Eigenschaft und Wert (also nicht alle Objekte des gleichen Typs sondern nur die, die eine auch den passenden Wert haben). Dahinter wird dann der zu verwendete Stil als weiteres Objekt angegeben, welches aus einer Menge aus Property:Value pairs besteht, bei dem die Property die Displayeigenschaft (also z.B. Farbe) und der Wert dann den dazugehörigen Wert (also z.B. rot) festlegt. Alles was nicht explizit hier festgelegt wird, wird aus den "globalen" Einstellungen (z.B. data-stroke) übernommen.

Ich weiß, dass sich das sehr kompliziert anhört . Daher mal ein paar Beispiele:
Mal angenommen man verwendet das angehängte Beispiel geojson File. Dort sind Objekte enthalten, die entweder die Eigenschaft "emergency" oder die Eigenschaft "public_transport" aufweisen. Wenn man diese beiden Typen jetzt unterschiedlich darstellen will, kann man das mit folgenem data-feature_style parameter machen:

Code Auswählen Erweitern


data-feature_style='{
"popup_properties_click":"name network operator fire.*",
"popup_properties_move":"fire.*\\:diameter",
"display_styles":{
"emergency.fire_hydrant":{"label":"fa-fire-extinguisher","strokeColor":"red"},
"public_transport.station":{"label":"fa-train","strokeColor":"black"}}
}'


Die geojson Objekte, die die Eigenschaft "emergency" mit dem Parameter "fire_hydrant" aufweisen, werden mit einem kleinen Feuerlöschersymbol in rot dargestellt. Die geojson Objekte, die die Eigenschaft "public_transport" mit dem Parameter "station" aufweisen, werden mit einem Zugsymbo und in schwarz dargestellt. Beim Anklicken wird ein Info Window angezeigt, welches für das angeklickte Objekt die Properties "name", "network", "operator", oder eine Property die mit fire beginnt (regexp fire.*) und deren Werte enthält. Wenn ein Objekt eine Eigenschaft, die mit fire beginnt hat und deren Wert diameter ist, wird beim überfahren mit der Maus ein Popup mit diesem Wertepaar dargestellt.
Am besten einfach mal ausprobieren und wenns nicht auf Anhieb klappt hier melden (habe ich das jetzt wirklich geschrieben  ). Damit das ein bisschen leichter wird, habe ich mal ein Beispiel geojson angehängt, was mit folgender Definition:

Code Auswählen Erweitern


data-geojson="data/firedata.geojson"
data-feature_style='{
"popup_properties_click":"name network operator fire.*",
"popup_properties_move":"fire.*\\:diameter",
"display_styles":{
"emergency.fire_hydrant":{"label":"fa-fire-extinguisher","strokeColor":"red"},
"public_transport.station":{"label":"fa-train","strokeColor":"black"}}
}'

Im Raum westlich von Stuttgart (um die Autobahnabfahrt Feuerbach) ein bisschen was auf die Karte darstellen sollte. Wie es aussehen sollte, ist im Bild zu sehen.

Noch etwas zusätzliches: Einge gute Möglichkeit sich geojson Files zu holen (von der auch das Beispiel stammt), ist die webseite http://overpass-turbo.eu/. Dort kann man sich für beliebige Gebiete per Wizard eine Abfrage basteln, die dann bestimmte Infos aus Open Street Maps herausfiltert und dann als geojson exportieren kann.

[Kuzl]

Das ist ja wunderbar und sehr flexibel
Ich probiers die Tage mal aus, VIELEN VIELEN DANK!

[eki]

Ich habe noch einen Fehler bei der Fontgröße der Labels entdeckt und oben eine neue Version des widget_gmaps.js angehängt.

[sek_is_back]

Sehr cooles widget hast Du gebaut, wäre es möglich die Funktion GoogleMapsDisableUI mit einzubauen?
Ich arbeite mich gerade in js ein und versuche den Code zu verstehen, ist mir aber noch zu hoch, sonst hätte ich es selbst ausprobiert.