Hallo zusammen,
ich wollte ursprünglich eine Darstellung meiner Wegezeiten auf eine Karte (ähnlich wie im FHEM Typ TRAFFIC) und habe nun ein Widget in einer ersten Version fertig, das eigentlich alles, was in FHEM eine geografische Koordinate als Reading Internal oder Attribut hat, auf einer Landkarte auf Basis Google Maps API darstellen kann.
Das Ganze ist noch eher Beta, ich zeige es aber hier schon mal, damit "early Adopters" es testen und mir Feedback geben können. Eventuell habt Ihr ja auch Ideen, was man noch so alles damit tun können sollte, dann wäre ich interessiert und bereit das auch noch zu erweitern.
Was kann das Widget:Darstellung von FHEM Devices, welche eine Koordinate (longitude/latitude) als Reading/Attribut/Internal haben (z. B. Anwesenheiten auf Basis von ROOMMATE/RESIDENT/GUEST, oder das global Device als Standort von FHEM).
Darstellung von Fahrwegen mit Fahrzeiten auf Basis des FHEM TRAFFIC Moduls. Hierbei können die Routen eingefärbt als Linien dargestellt werden und entsprechend per InfoWindow dann Details (wie z.B. die normale Fahrzeit bzw. die Fahrzeit bei aktuellem Verkehr) dazu dargestellt werden.
Was braucht man zur Nutzung/Installation:
- einen Google Maps API Key. Wie man den bekommt, ist bei der Beschreibung des TRAFFIC Moduls unter https://wiki.fhem.de/wiki/TRAFFIC (https://wiki.fhem.de/wiki/TRAFFIC) zu sehen. Den so erhaltenen Code muss man in die html index Datei als meta Tag eintragen. Das sieht z.B. so aus (<Key> muss natürlich noch durch den API Key selbst ersetzt werden):
<meta name="GoogleMapsApiKey" content="<Key>">
- das angehängte widget_gmaps.js entsprechend im js Verzeichnis der Installation von FTUI
- den folgenden Zusatz in der fhem-tablet-ui-user.css Datei (zur Formattierung der InfoWindows).
.gm-style-iw-parent {
opacity: 0.85;
}
.map_infowindow {
color: #8C8C8C;
text-align: left;
}
.firstHeading {
margin-top: 2px;
margin-bottom: 2px;
}
.bodyContent > p {
margin-top: 2px;
margin-bottom: 2px;
}
- data-alias: Hiermit kann man festlegen aus welchem Reading der Name für die Anzeige genommen werden soll (default 'alias')
data-latitude: Hiermit kann man festlegen aus welchem Reading die geografische Breite genommen werden soll (default 'latitude')
data-longitude: Hiermit kann man festlegen aus welchem Reading die geografische Länge genommen werden soll (default 'longitude')
data-language: Kann 'de' oder 'en' sein und stellt die Sprache für die Ausgabe in den Info Windows ein
data-size: Gibt die Größe des Kartenausschnittes an (als String mit "<Breite>,<Höhe>"), kann auch weggelassen werden, wenn es sich um ein TRAFFIC Device handelt, dann wird der Wert aus dem GoogleMapsSize Reading genommen oder, falls das auch nicht vorhanden ist, wird die Größe aus der Ausdehnung der Route(n) ermittelt.
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.
data-zoom: Gibt den Zoomwert der Karte an (als integer Wert, siehe Google Maps API), kann auch weggelassen werden, wenn es sich um ein TRAFFIC Device handelt, dann wird der Wert aus dem GoogleMapsZoom Reading genommen oder, falls das auch nicht vorhanden ist, wird der Zoom Wert aus der Ausdehnung der Route(n) ermittelt.
data-travel_mode: Gibt an, wie die Route berechnet werden soll. Es gibt die Möglichkeiten 'DRIVING', 'WALKING', 'BICYCLING', 'TRANSIT' (Details siehe TRAFFIC Modul von FHEM oder Google Maps API für den 'Directions' Service), kann auch weggelassen werden, wenn es sich um ein TRAFFIC Device handelt, dann wird der Wert aus dem trafficMode Reading genommen.
data-traffic: Gibt an, ob die Verkehrslage auf der Karte dargestellt werden soll (true/false default false)
data-showdetails: Gibt an ob per Default die Info Windows eingeblendet werden sollen (true/false, default false)
data-stroke: Gibt an, wie die Fahrstrecken oder Symbole dargestellt werden sollen. Besteht aus maximal 6 Werten (Farbe Hinweg, Breite Hinweg, Durchsichtigkeit Hinweg, Farbe Rückweg, Breite Rückweg, Durchsichtigkeit Rückweg), die Farbe wird per #rrggbb angegeben, die Breite in Pixel und die Durchsichtigkeit als Prozentwert zwischen 0% und 100%, siehe auch Details zum Modul TRAFFIC. Die Symbole zur Route werden in der doppelten angegebenen Breite des Pfades dargestellt
data-icon: Hiermit kann ein Icon angegeben werden, welches statt des standardmäßigen Pfeils verwendet werden soll, um die Position zu markieren. Kann eine URL auf eine icon Datei, die relativ zum Verzeichnis www/images/ liegt sein
data-label: Will man statt eines Icons ein FontAwesome/Openautomation/fhemSVG Font-Icon (z.B. 'fa-home', 'oa-weather_winter', 'fs-usb_stick') verwenden, wird das hiermit angegeben (es kann auch icon und Font-Icon zusammen verwendet werden (z.B. ein Kreis als Icon und darin ein Font-Icon.
data-mapgroup: Legt fest, ob jedes Widget in eine eigene Karte gezeichnet werden soll oder ob mehrer Informationen in einer Karte landen sollen.
Im Folgenden ist ein Minimalbeispiel enhalten, das 3 Instanzen des Widgets enthält, die eine Fahrstrecke, eine ROOMMATE position und die Position des global Devices in eine Karte malen.
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="false"
data-device="testTrf"
data-traffic="true"
data-mapgroup="1"
data-stroke="#111111,7,60">
</div>
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="false"
data-device="global"
data-mapgroup="1"
data-icon="default/HOME_Status.1.png"
data-stroke="#33dd00,7,70">
</div>
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="true"
data-device="myRoommate"
data-longitude="locationLong"
data-label="fa-home"
data-icon="no-icon"
data-latitude="locationLat"
data-mapgroup="1"
data-stroke="#dd0033,7,70">
</div>
Daraus ergibt sich dann beispielsweise folgendes Bild (nein, ich wohne nicht in Köln, das habe ich eher zufällig als Beispiel gewählt).
Hallo eki,
die EInrichtung hat super funktioniert.
Die Skriptzeile muss auf die Seite, auf der auch die Karte angezeigt werden soll. Daher kann es von der index.html abweichen.
Auch die css kann anders heißen. Wichtig ist nur, dass es eine eigene definierte css ist, da die default per update überschrieben werden.
In deinen Beispielen fehlt vom dem div schließen jeweils ein ">"
Ich kann nicht zwei Karten auf einer Seite anzeigen lassen (unterschiedliche Gridster). Mit data-mapgroup="0" werden mit die Karten untereinander angezeigt
Für was für die ID benötigt?
data-icon="fa-home" wird bei mir nicht angezeigt. Ohne data-icon jedoch ein grüner Pfeil, genau wie die Farbe des Weges. Wie kann ich die Pfeilfarbe beeinflussen?
Kann in einem <div> Hin- und Rückweg angegeben werden, oder muss es dafür zwei <div> geben? Ich benutze das Traffic Modul. Mit attr includeReturn 1 werden im Device die Werte angezeigt. Ab dem Zeitpunkt wird im Modul jedoch keine Route mehr angezeigt, auch nicht mehr, wenn ich das attr lösche.
Gruß
TWART016
ZitatDie Skriptzeile muss auf die Seite, auf der auch die Karte angezeigt werden soll. Daher kann es von der index.html abweichen.
Auch die css kann anders heißen. Wichtig ist nur, dass es eine eigene definierte css ist, da die default per update überschrieben werden.
Es muss letztendlich sicher gestellt sein, dass die Zeile im Browser abgearbeitet/aufgerufen wird. Wohin das dann muss, muss jeder für sein Setup beantworten ;).
ZitatIn deinen Beispielen fehlt vom dem div schließen jeweils ein ">"
Da hast Du recht, habe ich korrigiert, Danke.
ZitatIch kann nicht zwei Karten auf einer Seite anzeigen lassen (unterschiedliche Gridster). Mit data-mapgroup="0" werden mit die Karten untereinander angezeigt
data-mapgroup muss identisch und größer 0 sein (also z.B. 1) damit die Inhalte in eine gemeinsame Karte gezeichnet werden.
Zitatdata-icon="fa-home" wird bei mir nicht angezeigt. Ohne data-icon jedoch ein grüner Pfeil, genau wie die Farbe des Weges. Wie kann ich die Pfeilfarbe beeinflussen?
Da war noch etwas falsch in der Beschreibung (jetzt geändert). Wenn man Font Icons verwenden will, muss man das per data-label machen (z.B. data-label="fa-home").
ZitatKann in einem <div> Hin- und Rückweg angegeben werden, oder muss es dafür zwei <div> geben? Ich benutze das Traffic Modul. Mit attr includeReturn 1 werden im Device die Werte angezeigt. Ab dem Zeitpunkt wird im Modul jedoch keine Route mehr angezeigt, auch nicht mehr, wenn ich das attr lösche.
Das geht bisher noch nicht, ich bin aber dran.
Zitat von: eki am 06 November 2017, 09:42:07
Es muss letztendlich sicher gestellt sein, dass die Zeile im Browser abgearbeitet/aufgerufen wird. Wohin das dann muss, muss jeder für sein Setup beantworten ;).
Ist mir schon klar. FTUI Anfänger haben mit der Anleitung ggf. ein paar Probleme.
Zitat von: eki am 06 November 2017, 09:42:07
data-mapgroup muss identisch und größer 0 sein (also z.B. 1) damit die Inhalte in eine gemeinsame Karte gezeichnet werden.
Super, das klappt. Das sollte vielleicht in die Beschreibung ;)
Zitat von: eki am 06 November 2017, 09:42:07
Da war noch etwas falsch in der Beschreibung (jetzt geändert). Wenn man Font Icons verwenden will, muss man das per data-label machen (z.B. data-label="fa-home").
Kann man auch die Farbe und Größe anpassen?
Zitat von: eki am 06 November 2017, 09:42:07
Das geht bisher noch nicht, ich bin aber dran.
Super :D
Ich habe noch Probleme mit einem Traffic Modul. Ich bekomme die Route nicht angezeigt. Kopiere ich das Device, wird alles angezeigt. LÖsche ich es, und lege es mit gleichem Namen neu an, wird die Route auch nicht angezeigt.
Das war auch das Device, wo ich testweise IncludeReturn gesetzt habe. Wird da eventuell noch etwas gecached?
Farbe und Göße des Labels können genauso über den "Stroke" Parameter eingestellt werden. Für die Farbe ist aber Voraussetzung, dass beim icon die Eistellung 'no-icon' gesetzt wird, ansonsten wird davon ausgegangen, dass es ein Icon mit einem überlagerten Label handelt und dann wird das Label in Schwarz gemalt.
Bzüglich Traffic Modul kann ich nicht so viel sagen, bitte dafür den entsprechenden Thread für dieses Modul nutzen.
Was Du machen kannst, ist einen Dummy anzulegen, und dort nur die Parameter für "Start Address" und "End Address" zu setzen. Wenn das Traffic Modul die Readings für die Reisezeiten nicht liefert, dann macht das das FTUI Widget (letztendlich muss ich für die Darstellung im Widget sowieso die Google Funktion für die Wegeberechnung anwerfen und wenn das FHEM Modul da keine Inputs liefert, dannn nehm ich eben das was Google mir direkt liefert).
Das mit der Farbe versuche ist.
Das ist in meinen Augen kein Traffic Problem. In der Karte vom Modul wird alles korrekt angezeigt, nur in dem Widget nicht.
OK, dann habe ich es falsch verstanden. Poste mal Deine FHEM Definition, ein Listing des Devices (list <devicename> in der FHEM Kommandozeile) und die dazugehörige FTUI Konfiguration. Dann kann ich mal versuchen, das nachzuvollziehen.
Anbei dir 2 Codes
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="true"
data-device="home2work"
data-stroke="#FF1111,7,60"
data-traffic="false"
data-mapgroup="1"
data-label="fa-home"
>
</div>
Internals:
APIKEY xxx
CFGFN
DEF xxx 600
INTERVAL 600
NAME home2work
NR 734
STATE 1 hour 6 mins
TRIGGERTIME 1510334155.31427
TRIGGERTIME_FMT 2017-11-10 18:15:55
TYPE TRAFFIC
VERSION 1.3.2
READINGS:
2017-11-10 18:05:55 delay 4 min
2017-11-10 18:05:55 distance 60.9 km
2017-11-10 18:05:55 duration 1 hour 2 mins
2017-11-10 18:05:55 duration_in_traffic 1 hour 6 mins
2017-11-10 18:05:55 eta 19:11:57
2017-11-10 18:05:55 state OK
2017-11-10 18:05:55 status OK
helper:
GoogleMapsCenter 48.6324588,9.5116622
Poly 295Z0h7dmassGlDS1tdc0BHVUNfQVx5REZlSUBvQ1FvQG1AW2NATm1BekBj
QlNzQWNBa0J7QFtlQU9lQkFpRGNAc0NOaUdjQGVTU2dIZ0BlQndAdUBzQVVrQ0R1QExfQHlHa0B3
S09hRk1lWFF1SlJ3RnBAZ0RyQF9CbEFfQm5DX0J2QXdBekBlQ1BxQ3NAY0lnRm1lQEdtQ1RjQGpJ
ZkNyQXhBYkBiQmfdfAdEBmWFFmVmtAemBAY0JwaEF9RHBtQ3tB
aF9Bd0BuUX1BZlJvRHZYe0JkTWNFaFFzQ3hKfUVoTndUfGdAb2FAYF9BaU9iXnlGelBjQ2RKcUV8
U21DYFFpT2ByQWNCfk55RXhefUN6TnVGdFFpQ2xHfUJ6RXlHZkxjS2BQY0h2THVGaE13RHBLYUt0
WmdCZEZhQWZCb0R0SntBakRpQWRBd0V6QXNCYkBfQUdlQXFAdUBvQWFBaUVfQW1LX0JlT2dCYUlv
QV9EeUFlQ3NFaUVxRG9DaUxxSmFHX0h5Rn1IY0VhRmNEcUNrSGFFbUNrQnNDcUN1QnNDZ0N7RW1D
dUhvQnlJa0lzaUB3RXVYa0R3T19HY1RpR3dPc0tjU3NPY1VfSGVJeUl9SWFFZUR3Q3VBdUJfQGdC
R2NEbkB1Q3xBYURqQ3dDYERpQWxCa0R6Rn1DckhjRHhOeURiVW9RaHZAc0FmSWFBZExXbk9GbkZy
QGBOeEFuU2ZAaFFHenNBb0FkYEB7QWhPZUlsY0B1RGBWcUNgVmVBdkd7QmhLZ0h4WGFIfFtrUnBf
QW9Dckx5RHRJe0lyTnNGZk1nR2hOZUZqSmNEckphQ2BKX0ViTHtDZEpzQ2xOd0xsYkF5QWxSW3hO
bkBqX0BXaEljQmhMbUNfdsfdfGfERjRWBCeUliQ2tEaEFjRmBDaU9iSmlbdFJn
ZkFsbkB3UWZNdVRoUHFEYEV3Q2xFZUxqUX1Jfk57QnpFY1V2akB5U2poQHdBbkJ5QmhGa0F2Q2FA
a0BjQ2tEdUdtSm1Ie0ppRGpIbUF6Ql9CckR3SmpUbUZqTGVIZE9vQWhEX0R2S3dCfkRxQWZBX0N0
QGtCSntCQGFDUXdAZUB1QG1BX0FkQXNIaE9lR3hNdUBmQ29AcEZiQnJQdEJgUmJAbkhPbFBzQHxT
V3pDb0F4R2NEdkxhRHpLbUV4SHdFfkh7QWhCYUV0RG1FaEVnRXxDX1N0TGNCbkB3RGRAdUBeX0N2
QmtIfkZhQEJdR19AcUBfQ3FKRmtCXGlAZEBNZkBOWGRASnRBbUFyR2tBeER7QWBEYUR6RHNHaEZt
UnJNbU5oSV9FdEF3RFhfferetAe0JhQXtBYUF1RWFFc0VtRm9DYUV3Rm1NcUZfTmlFX0llQ3dE
X0ZzRl9Mb0p9SmtKfURvRndsdfgfrfgrttYUB3RUN1RlppR3BBd0Z4QmNJdkJlREdn
QUppQXpAX0FgQGFWbkBrRkFfREFCYkFGeElMYkpIZk0/eEVnQWZHY0ViTV1wQkd4QURiQ2dATHVB
XGtAWHtLfkNxRm5xO
Attributes:
GoogleMapsCenter 48.77220048965089,9.282335216015563
GoogleMapsZoom 10
end_address Mörikestraße 39-37, 71636 Ludwigsburg
outputReadings text
room Geo
start_address Ringstraße 18, 73271 Holzmaden
stateFormat duration_in_traffic
userattr GoogleMapsCenter GoogleMapsZoom end_address start_address stateFormat
verbose 1
Zoom und Center wird angepasst, nur die Route, sowie die Details werden nicht angezeigt.
Kann man einstellen ob in die Karte automatisch gezoomt wird, wenn man das Mausrad betätigt?
ZitatZoom und Center wird angepasst, nur die Route, sowie die Details werden nicht angezeigt.
Soweit ich das beurteilen kann, müsste Deine Definition passen. Bekommst Du irgendwelche Meldungen auf der Browser Konsole?
ZitatKann man einstellen ob in die Karte automatisch gezoomt wird, wenn man das Mausrad betätigt?
Standardmäßig wird mit Mausrad gescrollt. Über das API kann man das ändern, ist bisher aber nicht herausgeführt. Scrollt die Karte denn bei Dir oder nicht?
Hi eki,
klasse, Dass Du dich an ein Traffic widget für Ftui ransetzt.
Bisher habe ich leider kein Glück mit der Darstellung im FTUI bzw. der Basis-Einrichtung des widgets: ich erhalte nur einen schwarzen Bildschirm (mit meinem grauen Menürand) in FTUI.
Habe alles durchgeführt, das Du in Deinem 1. Beitrag gefordert hast:
1) die Zeile:
<script src="https://maps.googleapis.com/maps/api/js?key=???"></script> inkl. API key in den Head der anzeigenden Seite eingefügt (testweise später auch in die index.html - ohne Erfolg)
2) die widget_gmaps.js entsprechend kopiert
3) die css-Zusätze in die fhem-tablet-ui-user.css kopiert
4) den Code Deines Minimalbeispiels, das auf einem vorhandenen TRAFFIC-device basiert, in die anzeigende HTML-Seite kopiert:
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="false"
data-device="Ingrid_map"
data-traffic="true"
data-mapgroup="1"
data-stroke="#111111,7,60">
</div>
Hier das listing meines TRAFFIC-device:
Internals:
APIKEY xxxxxxxxxxxxxx
DEF yyyyyyyyyyyyyyyyyyyyyyyyyyyy 600
INTERVAL 600
NAME Ingrid_map
NR 44
STATE OK
TRIGGERTIME 1510772438.14606
TRIGGERTIME_FMT 2017-11-15 20:00:38
TYPE TRAFFIC
VERSION 1.3.2
Helper:
DBLOG:
delay:
logdb:
TIME 1510771839.2459
VALUE 0 min
delay_min:
logdb:
TIME 1510771839.2459
VALUE 0
distance:
logdb:
TIME 1510771839.2459
VALUE 12,5 km
duration:
logdb:
TIME 1510771839.2459
VALUE 14 Minuten
duration_in_traffic:
logdb:
TIME 1510771839.2459
VALUE 13 Minuten
duration_in_traffic_min:
logdb:
TIME 1510771839.2459
VALUE 13
duration_min:
logdb:
TIME 1510771839.2459
VALUE 14
eta:
logdb:
TIME 1510771839.2459
VALUE 20:03:22
state:
logdb:
TIME 1510771839.2459
VALUE OK
status:
logdb:
TIME 1510771839.2459
VALUE OK
READINGS:
2017-11-15 19:50:39 delay 0 min
2017-11-15 19:50:39 delay_min 0
2017-11-15 19:50:39 distance 12,5 km
2017-11-15 19:50:39 duration 14 Minuten
2017-11-15 19:50:39 duration_in_traffic 13 Minuten
2017-11-15 19:50:39 duration_in_traffic_min 13
2017-11-15 19:50:39 duration_min 14
2017-11-15 19:50:39 eta 20:03:22
2017-11-15 19:50:39 state OK
2017-11-15 19:50:39 status OK
helper:
GoogleMapsCenter 51.yyyyy,6.yyyyyyyyyyy
Poly aaaaaaaaaaaaaaaaaaaaaaaaa
Attributes:
GoogleMapsCenter 51.xxx,6.yyy
GoogleMapsSize 800,600
GoogleMapsStroke #000000,6,50,#FF0000,1,100
GoogleMapsTrafficLayer 0 (*** habe ich auch mit `1`versucht ***)
GoogleMapsZoom 13
end_address aaaaaaaaaaaaaa, 12345 bbbbb
language de
outputReadings text min
room Maps
start_address ccccccccccc, 12345 ddddddd
userattr GoogleMapsCenter GoogleMapsSize GoogleMapsStroke GoogleMapsTrafficLayer GoogleMapsZoom end_address language outputReadings start_address verbose
verbose 1
In der JS-Konsole von Windows10 erhalte ich nach Seitenaufruf: "TypeError: can't access dead object".
Des weiteren den Hinweis: "tab.js:1641:1"
Auszug aus der tab.js:
let handler = getDocShellChromeEventHandler(progress);
let onLoad = evt => {
// Ignore events from iframes
if (evt.target == window.document) {
handler.removeEventListener("DOMContentLoaded", onLoad, true);
this._tabActor._navigate(window);
}
Blau markiert ist die 4. Zeile 'if (evt.target ...'
Ich scheine hier aber irgend einen Grundsatz-Fehler gemacht zu haben. Bei TWART016 ging die Installation bis hin zur Darstellung ja wohl easy! Beschäftige mich aber auch erst seit ca. 2 Wochen mit FHEM.
Hat jemand bitte einen Hinweis für mich?
eki, nochmals vielen Dank für Deinen Einsatz. Ist ein aus meiner Sicht seeeeehr brauchbares Projekt.
Das hört sich für mich so ein bisschen danach an, dass Das Problem irgendwo anders liegt und Du gar nicht bis zu dem Teil kommst, wo die Karte aufgebaut wird. Die Definition sieht OK aus, das FHEM Device auch. Um da aber mehr sagen zu können, bräuchte ich mehr Infos bezüglich Deiner Seitendefinition.
Zitat... und Du gar nicht bis zu dem Teil kommst, wo die Karte aufgebaut wird.
eki ==> PROFI 8)
Hatte natürlich einen klitzekleinen Schreibfehler im Namen der aufzurufenden HTML-Seite mit der map !!!
Nun läuft's gnadenlos gut.
Bin hochgradig begeistert von Deiner Arbeit.
Ein dickes THUMBS UP !
Und: vielen Dank für Deine schnelle Hilfe. ;D
Hi,
habe es auch gerade testen wollen da es super aussieht.
Leider erhalte ich auf meiner Unterpage folgendes -siehe Bild
Wie kann ich auf Fehlersuche gehen?
pagehtml:
<body style="margin: 0px; padding: 0px;">
<div class="page" id="content_traffic">
<div class="gridster">
<ul>
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="false"
data-device="FahrzeitHomeArbeit"
data-traffic="true"
data-mapgroup="1"
data-stroke="#111111,7,60">
</div>
</ul>
</body>
habe ich die JS änderungen in der richtigen Datei gemacht : js/fhem-tablet-ui.js?
wie kann es debuggen?
nun auf einmal dieser Fehler polyline ... siehe bild 2
Zitathabe ich die JS änderungen in der richtigen Datei gemacht : js/fhem-tablet-ui.js?
??? Bitte nichts in der Datei fhem-tablet-ui.js ändern, das ist sozusagen die Basisdatei für FTUI. Du musst lediglich die oben verlinkte Datei widget_gmaps.js in das Verzeichnis js in Deinem Basisverzeichnis für deinen Webserver (das was Du per HTTPSRV als Basis für FTUI in FHEM definiert hast) für FTUI kopieren, die Änderungen an der Datei fhem-tablet-ui-user.css hinzufügen, dann in deinen HTML Pages entsprechend das Widget einbinden (also in Deine HTML Seite einbinden) und noch die Referenz im Header hinzufügen -> siehe Thema API Key.
Hi genau das habe ich gemacht. - meinen Fehler mal korrigiert.
Habe diese UserDatei angelegt und verlinkt.
/opt/fhem/www/tablet/css/fhem-tablet-ui-user.css
.gm-style-iw-parent {
opacity: 0.85;
}
.map_infowindow {
color: #8C8C8C;
text-align: left;
}
.firstHeading {
margin-top: 2px;
margin-bottom: 2px;
}
.bodyContent > p {
margin-top: 2px;
margin-bottom: 2px;
}
die js in den js ordner hochgeladen
und in meiner pagebutton seite das in den head
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaxxxxxxxxxxxxxxxxxxLY"></script>
<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />
muss das auf die hauptseite oder auf die pagebutton unterseite?
Es ist nur wichtig, dass es dann, wenn Du das gmap Widget zum ersten mal darstellst geladen wurde. Sollte also passen. Ansonsten würde da auch eine andere Fehlermeldung kommen, denke ich (bzw. wenn die css Datei nicht geladen wurde wäre nur die Darstellung etwas komisch).
Poste mal ein Listing Deines FHEM Devices (in FHEM Kommandozeile "list FahrzeitHomeArbeit").
hier ist es :)
Internals:
APIKEY apikey
DEF apikey 600
INTERVAL 600
NAME FahrzeitHomeArbeit
NR 192
STATE OK
TRIGGERTIME 1510913826.82539
TRIGGERTIME_FMT 2017-11-17 11:17:06
TYPE TRAFFIC
VERSION 1.3.2
READINGS:
2017-11-17 11:07:07 delay 0 min
2017-11-17 11:07:07 distance 9.6 km
2017-11-17 11:07:07 duration 19 mins
2017-11-17 11:07:07 duration_in_traffic 18 mins
2017-11-17 11:07:07 eta 11:24:42
2017-11-17 11:07:07 state OK
2017-11-17 11:07:07 status OK
helper:
GoogleMapsCenter 52.2793549,10.6107024
Poly fXhhfkh7a3dfQXdBQkN7SHlEQWlBQT9uQEZ4SEZqSER6Rkx0TnFCYmRAV2ZGSWxATWRAUWJAfUF+
Qm1FdEdXakBTdEBLfkBBaEBAYkJmQGZRUHRLYEF0WUBkQUd2QFF+QFlwQHFAcEBjQXZATUpGWHhA
bERqQmhIakNqTGJBYEZiQWBFaEZmVGpDYEx+QHRFaEF2R2hAaER2QWBMUGBCTGhERWxFaUBoUltk
RktuQz9wQUZyQXhAZEdwQGxGaEFwSV52Q0xgQ0J2Q1NkSkl4SkB+Q0R8QkpwQlx4RVx0Q2BAckN4
RGRYekFkTF5wRExsREJ6Q09kVEFmR05wS1pkUURuRkh2RkFyQFVDT0J5RGpCbUBYfUBUfUNyQV9C
dEBtQ25Bc0N2QXVFckJjQVJtQERvQUFbRVtDaUJdY0ZpQXlATWtCT3tARWNCP3VCRnNFRHVARn1F
RmNGTmdKWl9FUH1BSGVASHVBSmNCVm9JbkFjQ1xtRWhAZUJUQmhAYklxQUBsQA==
Attributes:
end_address richtige Adresse
outputReadings text
room Information
start_address richtige Adresse
userattr end_address outputReadings start_address verbose
verbose 1
Hmm...
Sieht auch OK aus. Dann musst Du mir wohl auch noch dein HTML posten (inklusive Header etc.). Alternativ mal Debug im index.html aktivieren
<meta name="debug" content="1"> <!-- 1=output to console;0=not output -->
und dann das Resultat aus der Browser Konsole posten.
Zitat von: eki am 13 November 2017, 15:47:17
Soweit ich das beurteilen kann, müsste Deine Definition passen. Bekommst Du irgendwelche Meldungen auf der Browser Konsole?
Das steht in der Console.
Base dir: ./
fhem-tablet-ui.js:2182 jQuery dynamically loaded
widget_gmaps.js:16 null
js?key=xxx:40 InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number
_.Ub @ js?key=xxx:40
_.Xb @ js?key=xxx:41
(anonymous) @ js?key=xxx:53
_.m.setValues @ js?key=xxx:120
zg @ js?key=xxx:87
init_ui @ widget_gmaps.js:523
(anonymous) @ widget_gmaps.js:233
each @ jquery.min.js:2
each @ jquery.min.js:2
init @ widget_gmaps.js:229
(anonymous) @ fhem-tablet-ui.js:1382
i @ jquery.min.js:2
add @ jquery.min.js:2
always @ jquery.min.js:2
(anonymous) @ fhem-tablet-ui.js:1371
i @ jquery.min.js:2
fireWith @ jquery.min.js:2
f.(anonymous function) @ jquery.min.js:2
script.onload @ fhem-tablet-ui.js:1423
fhem-tablet-ui.js:733 initPage: 188.847900390625ms
4js?key=xxx:40 InvalidValueError: unknown property includeReturn
_.Ub @ js?key=xxx:40
_.Xb @ js?key=xxx:41
$h @ directions.js:126
(anonymous) @ js?key=xxx:131
(anonymous) @ js?key=xxx:122
(anonymous) @ js?key=xxx:61
(anonymous) @ js?key=xxx:122
(anonymous) @ js?key=xxx:61
(anonymous) @ js?key=xxx:122
fe @ js?key=xxx:63
ee.na @ js?key=xxx:122
(anonymous) @ util.js:1
fhem-tablet-ui.js:840 get jsonlist2: 24.437744140625ms
fhem-tablet-ui.js:925 read jsonlist2: 16.714111328125ms
Zitat von: eki am 13 November 2017, 15:47:17
Standardmäßig wird mit Mausrad gescrollt. Über das API kann man das ändern, ist bisher aber nicht herausgeführt. Scrollt die Karte denn bei Dir oder nicht?
Die Ursache ist der Browser. Wenn ich auf der Browserseite scrollen kann, funktioniert das in der Map nicht. Sobald der Browser nicht scrollen kann, wird in die Karte gezoomt.
HI,
ich bekomme nun den gleichen Fehler - meine Api war wohl nicht aktiviert - oder nutze ich die falsche?:
VM178 fhem-tablet-ui.js:2183 Base dir: ./
VM178 fhem-tablet-ui.js:2183 Base dir: ./
fhem-tablet-ui.js:743 initPage: 304.150146484375ms
fhem-tablet-ui.js:743 initPage: 0ms
widget_pagebutton.js:30 fetch content: 33.677001953125ms
widget_pagebutton.js:30 fetch content: 0ms
VM219 widget_gmaps.js:16 null
js?key=MEINAPIKEYKENNTKEINER:40 InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number
_.Ub @ js?key=MEINAPIKEYKENNTKEINER:40
_.Xb @ js?key=MEINAPIKEYKENNTKEINER:41
(anonymous) @ js?key=MEINAPIKEYKENNTKEINER:53
_.m.setValues @ js?key=MEINAPIKEYKENNTKEINER:120
zg @ js?key=MEINAPIKEYKENNTKEINER:87
init_ui @ VM219 widget_gmaps.js:523
(anonymous) @ VM219 widget_gmaps.js:233
each @ jquery.min.js:2
each @ jquery.min.js:2
init @ VM219 widget_gmaps.js:229
(anonymous) @ fhem-tablet-ui.js:1392
j @ jquery.min.js:2
add @ jquery.min.js:2
always @ jquery.min.js:2
(anonymous) @ fhem-tablet-ui.js:1381
j @ jquery.min.js:2
fireWith @ jquery.min.js:2
e.(anonymous function) @ jquery.min.js:2
script.onload @ fhem-tablet-ui.js:1433
fhem-tablet-ui.js:743 initPage: 105.9462890625ms
fhem-tablet-ui.js:743 initPage: 0ms
fhem-tablet-ui.js:850 get jsonlist2: 62.989013671875ms
fhem-tablet-ui.js:935 read jsonlist2: 2.327880859375ms
Bei mir ist es der richtige API Key. Die anderen devices werden alle korrekt angezeigt.
Hallo eki,
ich habe mich heute mal mit deinem neuen widget gmap beschäftigt. Vielen Dank für die super Arbeit!
Ich bekomme es nach einfacher Einrichtung, wie du es beschrieben hast, nicht zum Laufen :-(
Die Fehlermeldung hängt im Anhang. Hatte dieses Problem schon mal jemand und konnte es lösen?
Im FF, Chrome und Fully bekomme ich immer den gleichen Fehler. FHEM habe ich auch schon neugestartet, ändert leider nichts.
Danke und beste Grüße,
Ingo
Hi,
habe eben bei der Einrichtung denselben Fehler gehabt. Du musst dir einen API-Key für die Maps JS API besorgen.
Hat jemand die Map schonmal in einem Popup dargestellt? Bei mir kommt dan nur eine graue Fläche :(
Zitat von: Wuehler am 18 November 2017, 15:47:20
Hat jemand die Map schonmal in einem Popup dargestellt? Bei mir kommt dan nur eine graue Fläche :(
Ich habe gleiches Verhalten.
Zitat von: Wuehler am 18 November 2017, 15:47:20
Hi,
habe eben bei der Einrichtung denselben Fehler gehabt. Du musst dir einen API-Key für die Maps JS API besorgen.
Hat jemand die Map schonmal in einem Popup dargestellt? Bei mir kommt dan nur eine graue Fläche :(
Hatte ich. Geht auch nicht
Gesendet von meinem FRD-L09 mit Tapatalk
OK. Danke. Ist auch nicht wirklich wichtig. Habs mit einer neuen Seite gelöst.
Was ich beim ausprobieren vergessen habe: Vielen Dank an eki und einen Daumen hoch.
Hallo zusammen,
vielen Dank für den schnellen support eurerseits. Jedoch bekomme ich das widget dennoch nicht zum Laufen.
Ich habe heute noch mal ein neues Projekt im Google API Manager angelegt und mir einen neuen API key erstellt. Es gibt ja hier keinen speziellen MAPS JS API key, sondern lediglich einen allgemeinen MAPS API key. Jedoch sind sämtliche Google MAPS API Schnittstellen aktiviert. Der Fehler besteht nach wie vor. Aber im Google API Manager Dashboard kann ich auch keine Anfragen von meinem RPI an die MAPS JS API Schnittstelle sehen (history).
Ich habe schon seit ca. 1 Jahr in FHEM mehrere TRAFFIC devices am Laufen, ohne jegliche Probleme. Dazu habe ich damals ebenfalls einen GMAPS API key erstellt. Auch dieser key funktioniert nicht mit dem widget_gmaps.js. Auch mit einem browser cache clear gibt es keine Änderung.
Weiterhin habe ich anstelle der "fhem-tablet-ui-user.css" eine eigene "fhem-tablet-ui-user_tablet.css" seit Anfang an am Laufen. Ziel ist es hier, dass diese nicht mal von fhem mit einem update überschrieben wird. Also habe ich die Erweiterungen von eki in dieser Datei mit eingepflegt.
Die Anbindung an die GMAPS API Schnittstelle:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>
habe ich auch an beiden Stellen von FTUI eingebunden. Also einmal direkt in der index-home.html und einmal in der Ziel-html Seite.
Ich habe ehrlich gesagt keinen Schimmer mehr, wo der Fehler liegen sollte :-(
Vielleicht hat noch jemand eine zündende Idee?
Danke und beste Grüße,
Ingo
Ruf mal die Entwicklertools in deinem browser auf. Da wirst du vermutlich in der console einen javascriptfehler finden. Mit meinem alten TRAFFIC-key gings bei mir auch nicht.
Zitat von: Wuehler am 18 November 2017, 23:32:59
Ruf mal die Entwicklertools in deinem browser auf. Da wirst du vermutlich in der console einen javascriptfehler finden. Mit meinem alten TRAFFIC-key gings bei mir auch nicht.
Ja bei mir kam mit dem neuen key auch eine neue Fehlermeldung. Siehe oben.
Gesendet von meinem FRD-L09 mit Tapatalk
Hallo,
also im Chrome bekomme ich dazu in der Konsole folgende Details zum Fehler:
Also ich habe den neu angelegten API key jetzt mal im TRAFFIC Modul ausprobiert. Er funktioniert in FHEM und ich sehe auch im google Dashboard die Anfragen von FHEM.
Daran sollte es also nicht liegen. Ich bin derzeit ratlos, was ich eventuell falsch gemacht bzw vergessen habe einzustellen oder zu aktivieren.
Ich bin für jede Hilfe dankbar!
Grüße und einen schönen Sonntag noch euch allen.
Ingo
Hi Ingo,
Genau dieselbe Meldung hatte ich auch. Die kommt, wenn die ,,Anmeldung" bei google nicht geklappt hat.
Reduziere die Ziel-Html-Seite mal auf das Wesentliche. Und wenn es dann immer noch nicht geht lade sie hier mal hoch.
Ich habe soeben erneut eine test page erstellt, mit den wirklich minimalen Inhalten.
Dazu den Auszug aus der Chrome Konsole.
Ergebnis ist immer noch keine Anzeige von GMAPS und gleiche Fehlermeldung.
Vielleicht sieht jemand mehr als ich.
Danke euch.
Hi,
in der Zeile hast du deine API-Key eingesetzt?
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>
Dann setzt bitte in folgender Zeile einen Headertext ein. Scheint komisches Verhalten zu geben wenn der fehlt:
<header class="headerTransparent"></header>
zB:
<header class="headerTransparent">Maps</header>
Ja natürlich, den API key habe ich nur aus dem code gelöscht, bevor ich es hier gepostet habe.
Den header hatte ich auch in einem anderen html file schon drinstehen. Daran sollte es nicht liegen.
Ich werde es heute jedoch noch mal bei diesem test file erneut prüfen und dir bescheid geben.
Grüße,
Ingo
habe mal bei google geschaut nach
InvalidValueError: setCenter: not a LatLng or LatLngLiteral: in property lat: not a number
scheint für Programmierer wohl einfach zu lösen sein - bin nur kein Programmierer :)
https://www.google.de/search?ei=Sv0SWvDuBZHasAfPkIWwAw&q=InvalidValueError%3A+setCenter%3A+not+a+LatLng+or+LatLngLiteral%3A+in+property+lat%3A+not+a+number&oq=InvalidValueError%3A+setCenter%3A+not+a+LatLng+or+LatLngLiteral%3A+in+property+lat%3A+not+a+number&gs_l=psy-ab.3..0i10k1j0i10i30k1j0i5i30k1.152114.171631.0.171908.5.5.0.0.0.0.116.116.0j1.1.0....0...1.1.64.psy-ab..4.1.115....0.cqaBjdow54E (https://www.google.de/search?ei=Sv0SWvDuBZHasAfPkIWwAw&q=InvalidValueError%3A+setCenter%3A+not+a+LatLng+or+LatLngLiteral%3A+in+property+lat%3A+not+a+number&oq=InvalidValueError%3A+setCenter%3A+not+a+LatLng+or+LatLngLiteral%3A+in+property+lat%3A+not+a+number&gs_l=psy-ab.3..0i10k1j0i10i30k1j0i5i30k1.152114.171631.0.171908.5.5.0.0.0.0.116.116.0j1.1.0....0...1.1.64.psy-ab..4.1.115....0.cqaBjdow54E)
EDIT: Kein Programmierer aber ein "Hacker" :)
Also im widget_gmaps.js
alt:if (!elem.data('map_options').center) elem.data('map_options').center = (elem.data('center')&& elem.data('center')!='auto')? {lat: parseFloat(elem.data('center')[0]),lng: parseFloat(elem.data('center')[1])} : {lat: UNDEFINED, lng: UNDEFINED};
neu:if (!elem.data('map_options').center) elem.data('map_options').center = (elem.data('center')&& elem.data('center')!='auto')? {lat: parseFloat(elem.data('center')[0]),lng: parseFloat(elem.data('center')[1])} : {lat: 0, lng: 0};
Dann erhalte ich ein Bild
Dafür gibt es dss Attribut data-center. Sieher erster Beitrsg des Threads. Muss man nicht setzen wenn data-device vom Typ TRAFFIC ist.
Zitat von: Wuehler am 20 November 2017, 17:19:49
Dafür gibt es dss Attribut data-center. Sieher erster Beitrsg des Threads. Muss man nicht setzen wenn data-device vom Typ TRAFFIC ist.
OK, was für Readings hast du in deinem TRAFFIC device? Da stimmt ja dann irgendwas nicht bei mir oder?
Also ich habe alle drei Varianten aus dem Beispiel ausprobiert ... ein TRAFFIC device, ein ROOMMATE device und einfach das home symbol.
Ich habe dazu jeweils schon vorhandene und funktionsfähige devices genommen.
Leider erscheint bei allen drei Varianten der gleiche Fehler, ohne Anzeige einer GMAP.
Im Anhang habe ich mal das TRAFFIC device beigefügt. Und im ROOMMATE device stehen auch korrekte Werte bei 'locationLat' und 'locationLong' drin.
Bezüglich des Header Namens im html habe ich auch mit eingefügten Namen keine Änderung, gleicher Fehler.
PS: Ich frag mich allerdings langsam, warum sich eki nicht an der Diskussion beteiligt :-( vlt ist er ja im Urlaub.
Grüße,
Ingo
@masterpete: Ein Reading zu Center habe ich auch nicht beim TRAFFIC-Device. Das macht Google automatisch wenn man eine route angibt. Braucht man dann also nicht beim Aufruf der API zu setzen.
Da wir beta-Tester sind, sind wohl noch Fehler im Widget ;-)
Ich habe eine gefixte Version der .js angehängt.
@eki: in folgender Zeile fehlte zweimal das split(",")
if (!elem.data('map_options').center) elem.data('map_options').center = (elem.data('center')&& elem.data('center')!='auto')? {lat: parseFloat(elem.data('center').split(",")[0]),lng: parseFloat(elem.data('center').split(",")[1])} : {lat: undefined, lng: undefined};
wenn man damit folgendes Widget definiert sollte es funktionieren (bisher ging nur TRAFFIC, aber auch nur, wenn data-center gefehlt hat). Bei mir durfte die style="height... ebenfalls nicht fehlen, ansonsten gab es eine graue Fläche. Die Center-Werte müsst ihr natürlich anpassen:
<div style="height:90%; width:90%"
data-type="gmaps"
data-device="global"
data-label="fa-home"
data-zoom="11"
data-center="52.001,9.118">
</div>
Hm, ich habe alle files wie beschrieben aktualisiert und es funktioniert immer noch nicht bei meinem System.
Ich glaub ich habe wirklich noch ein generelles Problem mit der API Anbindung zu GMAPS.
Jedoch weiß ich noch nicht so richtig, wie ich das analysiert bekomme.
Generell funktioniert die API Schnittstelle, das sehe ich beim TRAFFIC device. Im Google API Manager sehe ich auch über diesen key den traffic vom fhem TRAFFIC device.
Demnach muss die API Schnittstelle okay sein. Oder gibt es einen speziellen API JS key?
Bleibt dann nur noch das widget selbst bei meiner Überlegung.
Ich bin sehr gerne bereit einiges zu testen. Nur mir gehen langsam die Ideen aus.
Grüße,
Ingo
Etwas mehr Infos wären gut.
Hast du den Browsercache nach dem Austausch der js gelöscht?
Wie genau lautet denn deine Fehlermeldung in der console der Entwicklungstools des Browsers?
Wie sieht deine ftui aus?
Jep, browser cache lösche ich generell nach Änderungen.
Ich habe wie schon in meinen bisherigen posts nur die test_gmaps.html zu gange.
Die Fehlermeldung in der Konsole hat sich nicht geändert, siehe Anhang.
RPI3, FHEM v5.8, FTUI v2.6.31
Grüße,
Ingo
Jetzt bin ich auch etwas ratlos. Nimm mal die angehängte JS. Da sollte drei mal eine Warnmeldung aufpoppen. Was steht da dann drin? Oder alternativ: Kannst du debuggen? Mal in die Entwicklertools gehen und schauen ob du vor Zeile 481 und 523 (alte Version, nicht die angehängte) einen Breakpoint setzen kannst.
Hab mal kurz den debugger angeworfen ... so wie es aussieht wird mein API KEY nicht mit übertragen. Die Variable ist leer.
Definiert habe ich diesen in der html so:
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR-API-KEY"></script>
als letztes im head.
Natürlich habe ich dazu den phrase "YOUR-API-KEY" mit meinem key ersetzt.
Kann sich das jemand erklären?
Danke und beste Grüße,
Ingo
die Zeile mit var URL = ... ist irrelevant. Die URL wird später nicht verwendet.
Lass mal das Attribut data-mapgroup weg (oder schreibe es dazu). Mal sehen was dann passiert.
Edit: Hast du mal einen anderen Browser versucht?
ZitatPS: Ich frag mich allerdings langsam, warum sich eki nicht an der Diskussion beteiligt :-( vlt ist er ja im Urlaub.
Nein, ich bin nicht im Urlaub, aber ich habe da noch einen "Nebenjob" der auch irgendwie seine Zeiten fordert ;).
Vielen Dank an Wuheler und masterpete23 fürs Debuggen :). Ich habe die Korrekturen in die Datei im ersten Eintrag dieses Threads entsprechend angepasst (also am besten noch mal diese Datei herunterladen und damit die Alte im js Verzeichnis ersetzen).
Das Problem von ih-sqeezer habe ich mir auch mal angeschaut. Ich habe die Definition in test_gmaps.html ausprobiert. Was da noch fehlt, ist eine Höhe für das div mit der Karte. Im Moment wird die Höhe nicht angegeben und ist deshalb, zumindest bei mir, 0 und damit ist auch nichts zu sehen. Wenn man die Kofiguration folgendermaßen:
<div style="height: 100%;" data-type="gmaps"
data-showdetails="true"
data-device="rr_Ingo"
data-longitude="locationLong"
data-label="fa-home"
data-icon="no-icon"
data-latitude="locationLat"
data-mapgroup="1"
data-stroke="#dd0033,7,70">
</div>anpasst, dann wird, zumindest bei mir, eine Karte angezeigt (natürlich habe ich meinen API key eingetragen und ein dummy angelegt, der rr_Ingo heißt und zumindest die Attribute "locationLog" und "locationLat" besitzt und dort auch sinnvolle Werte eingetragen).
Die Fehlermeldung, die ih-sqeezer gepostet hat, deutet darauf hin, dass das Laden des Google Scripts nicht klappt, allerdings bekomme ich, wenn ich einen falschen Key eintrage, eine Fehlermeldung vom Google API, die besagt dass der Key falsch ist. Außerdem erscheint statt des Kartenfensters ein graues Fenster mit:
"Hoppla! Ein Fehler ist aufgetreten. Google Maps wurde auf dieser Seite nicht richtig geladen. Technische Details dazu entnimmst du der JavaScript-Konsole.".Wenn Du im Browser Dir mal den Datenverkehr anschaust (Rechte Maustaste, Inspect und dann den Network Reiter öffnen), dann sollten dort einige GET Aufrufe zu finden sein, die als Antwort irgenwelchen js Code enthalten.
Guten Abend zusammen,
@ eki:
Das war nur Spaß. Sicherlich geht jeder seiner Hauptarbeit nach, bevor man sich um solche freizeittechnischen Dinge kümmert. Geht mir doch genauso.
Zum Problem, ich habe heut noch mal alles mögliche ausprobiert. Also neues widget geladen, html angepasst, API-KEY in google geprüft, browser cache gelöscht.
Es hilft leider alles nix. Ich habe es in FF, Chrome und Fully geprüft. Dann habe ich erneut den "alten" API-KEY von meinem laufenden TRAFFIC device benutzt. Es bleibt immer beim gleichen Fehler: widget_gmaps.js: 523 | ReferenceError: google is not defined.
Dann habe ich weiter im debugger geforscht. In der Netzwerkanalyse erscheint das widget_gmap.js mit status grün:200, wie alle anderen Dateien.
Jedoch scheint mir es so, als ob die API Schnittstelle nicht korrekt läuft bzw ich keinen Zugang zu GMAPS bekomme.
Gruß,
Ingo
Ich habe jetzt noch mal den API-key direkt ins widget hart eingetragen. Selbst damit kommen keine traffics im google Dashboard an.
Hallo Ingo,
in der Liste mit den Netzwerkaktivitäten sollt auch ein GET mit "js?key=..." zu sehen sein. Siehst Du diesen Eintrag und wenn ja, wie ist das Ergebnis?
Hallo eki,
nein, das kommt bei mir nicht. Siehe Anhang.
Das scheint irgendetwas mit dem Timing der asynchronen GET Aufrufe zu tun zu haben (wenn das widget_gmaps.js schneller da ist und abgearbeitet wird, als das map API, dann fällt das Widget auf die Nase, weil die Google Funktionen noch gar nicht geladen und verfügbar sind).
Ich habe jetzt mal eine neue Version gebastelt, die das Google Maps API dynamisch vom Script aus lädt und bei der ich versuche das Problem mit entsprechenden Prüfungen und Timeouts zu umgehen. Ist angehängt, bitte probier das mal aus. Allerdings musst Du jetzt nur noch deinen API Key als meta im HTML hinterlegen, die Zeile mit dem <script src="https://maps.googleapis... musst Du löschen. Ich habe mal Deine Minimal HTML mit den entsprechenden Änderungen auch noch angehängt (bitte noch "myAPIKey" durch Deinen API Key ersetzen).
Bin mal gespannt, ob es jetzt bei Dir klappt. Falls ja, werde ich das oben entsprechend ändern.
Hi,
die läuft nun bei mir
Hallo eki,
danke zunächst für deinen support!
Ich bin leider heute nicht eher zum Ausprobieren gekommen. Nun zum (Teil-)Erfolg ...
Mit den Änderungen sehe ich jetzt zunächst für einige ms eine google map. Jedoch switched die Karte sofort in einen Fehler.
Es erscheint eine Toast-Message: "Could not find API key, pleas add to your html".
Hm, ich habe jedoch meinen API Key in das html file reingeschrieben bzw. geändert.
Zur Überprüfung habe ich in der Netzwerkanalyse erstmal den cache deaktiviert. Jedoch werden alle files und Befehle ohne Fehler ausgeführt.
Jetzt sehe ich zwar in der Netzwerkanalyse das GET zu google maps mit jedoch keinem APIKey angehängt. Steht der key niemals im Klartext mit drin? Setht nur die variable "APIKey" drin.
Das ist ja schon mal der richtige Weg würde ich sagen.
Wie kann ich dir bei der Fehlersuche weiter behilflich sein?
BTW: In der html Datei stand noch dein API key in Klartext drin. Und bei der Toast-Message solltest du noch das "e" bei "please" mit einbauen ;-)
Hast du denn in dem meta tag Deinen API Key eingetragen? Was passiert denn wenn Du einfach mal mein File aufrufst?
Ja habe ich. Es passiert leider nix anderes mit deinem file.
Bezüglich cache bin ich im debug mode mit deaktiviertem cache.
Update:
Chrome wirft noch etwas mehr Info an den Tag, siehe Anhang.
Scheint so, als ob der key üngültig sei. Ich habe deinen key mit deinem file und auch mein html file mit meinem key ausprobiert. Kommt immer auf das gleiche Ergebnis.
Unter https://developers.google.com/maps/documentation/javascript/error-messages?hl=de (https://developers.google.com/maps/documentation/javascript/error-messages?hl=de) sind diese beiden Fehler beschrieben. Deutet auf einen ungültigen oder abgelaufenen Schlüssel hin.
Eigenartig finde ich, dass das auch mit dem Schlüssel auftritt, der bei mir funktioniert?! Habe aber aktuell auch keine Idee was da bei Dir faul ist, werde aber weiter nachdenken.
Der key kann ja aber nicht abgelaufen sein, da ich damit mein TRAFFIC device betreibe. Und das läuft problemlos.
Das heißt noch gar nichts. Das TRAFFIC Modul in FHEM verwendet das Google Maps Directions API. Während das widget_gmaps.js die JS API verwendet. Möglicherweise hat Dein Schlüsse da ja Einschränkungen
Kannst Du bitte mal hier
https://console.developers.google.com/apis/credentials (https://console.developers.google.com/apis/credentials)
nachschauen. Dort sollte Dein Schlüssel aufgelistet sein. Wenn Du auf den Namen klickst, siehst Du die Eigenschaften. Dort kann man auch setzen, für welche Anwendungen (Apps, HTTP, ...) und für welche APIs (Directions, DistanceMatrix, Javascript) der Schlüssel gelten soll. Bitte check das mal ab.
Hallo eki,
hatte ich schon mal für mich gecheckt. Habe es heute noch mal gecheckt (siehe Anhang).
Demnach sollte der API-key uneingeschränkt sein. Ich meine, ich hatte ja auch den key in der html von dir genutzt und kam zum gleichen Fehler.
Weiterhin habe ich es mal vom Smartphone via LTE/HSDPA aufgerufen => gleicher Fehler.
hi eki - nochmals eine großes Dankeschön für Dein map-widget.
Ich habe da noch 2 kleinere Probleme bei Verwendung des widgets.
1. Keine Routenanzeige im FTUI (normale Map-Daten und Verkehr werden dargestellt)
In der Kartendarstellung im FHEM-Backend wird die Route dargestellt (siehe Bildausschnitt '1 mit Route - im FHEM Arbeitsbereich.jpg')
Im FTUI ist keine Routendarstellung zu sehen (siehe Bildausschnitt '2 ohne Route - im FTUI.jpg').
2. Error beim Seitenaufruf
Sobald ich im FTUI per seitlichem Menüklick die Routen-Seite aufrufe, erscheint ein leeres Fenster mit einer TypeError-Fehlermeldung (siehe Bild '3 Error.jpg'.
Wenn ich dann anschließend manuell die Seite reloade, erscheint die Map - wie oben erwähnt, ohne Route, aber mit kompletter Kartendarstellung.
List meines TRAFFIC devices
Internals:
APIKEY abc
DEF abc 600
INTERVAL 600
NAME Ingrid_map
NR 71
STATE OK
TRIGGERTIME 1512255941.72985
TRIGGERTIME_FMT 2017-12-03 00:05:41
TYPE TRAFFIC
VERSION 1.3.2
Helper:
DBLOG:
duration_in_traffic:
logdb:
TIME 1512255342.46786
VALUE 13 Minuten
duration_in_traffic_min:
logdb:
TIME 1512255342.46786
VALUE 13
eta:
logdb:
TIME 1512255342.46786
VALUE 00:08:46
return_duration_in_traffic:
logdb:
TIME 1512231342.35184
VALUE 12 Minuten
return_duration_in_traffic_min:
logdb:
TIME 1512231342.35184
VALUE 12
return_eta:
logdb:
TIME 1512255342.41536
VALUE 00:07:22
READINGS:
2017-12-02 23:55:42 delay 0 min
2017-12-02 23:55:42 delay_min 0
2017-12-02 23:55:42 distance 12,5 km
2017-12-02 23:55:42 duration 14 Minuten
2017-12-02 23:55:42 duration_in_traffic 13 Minuten
2017-12-02 23:55:42 duration_in_traffic_min 13
2017-12-02 23:55:42 duration_min 14
2017-12-02 23:55:42 eta 00:08:46
2017-12-02 23:55:42 return_delay 0 min
2017-12-02 23:55:42 return_delay_min 0
2017-12-02 23:55:42 return_distance 12,7 km
2017-12-02 23:55:42 return_duration 13 Minuten
2017-12-02 23:55:42 return_duration_in_traffic 12 Minuten
2017-12-02 23:55:42 return_duration_in_traffic_min 12
2017-12-02 23:55:42 return_duration_min 13
2017-12-02 23:55:42 return_eta 00:07:22
2017-12-02 23:55:42 return_state OK
2017-12-02 23:55:42 return_status OK
2017-12-02 23:55:42 state OK
2017-12-02 23:55:42 status OK
helper:
GoogleMapsCenter 51.xxx,6.xxx
Poly xyz
return_GoogleMapsCenter 51.xxx,6.xxx
return_Poly yyy
Attributes:
GoogleMapsCenter 51.xxx,6.xxx
GoogleMapsSize 800,500
GoogleMapsStroke #000000,6,50,#FF0000,1,100
GoogleMapsStyle default
GoogleMapsTrafficLayer 1
GoogleMapsZoom 13
end_address abc
event-on-change-reading .*
includeReturn 1
language de
outputReadings text min
room Maps
start_address def
userattr GoogleMapsCenter GoogleMapsSize GoogleMapsStroke GoogleMapsStyle GoogleMapsTrafficLayer GoogleMapsZoom end_address event-on-change-reading includeReturn language outputReadings start_address verbose
verbose 1
Hier die wichtigsten Segmente meiner index.html
<!DOCTYPE html>
<html>
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="/fhem/tablet_prod/lib/fhemSVG.css" />
<link rel="stylesheet" href="/fhem/tablet_prod/lib/openautomation.css" />
<link rel="stylesheet" href="/fhem/tablet_prod/lib/font-awesome.min.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui.css" />
<link rel="stylesheet" href="css/fhem-tablet-ui-user.css" />
<link rel="stylesheet" href="css/lobo60.css" />
<script src="js/fhem-tablet-ui.js" defer></script>
<script src="https://maps.googleapis.com/maps/api/js?key=xyz"></script>
<meta name="longpoll" content="1">
<meta name="gridster_cols" content="15">
<meta name="gridster_rows" content="12">
<meta name="widget_margin" content="1">
<title>FHEM-Tablet_prod</title>
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="12">
<div class="">
<div data-type="pagebutton" data-url="#lo_content_home.html" data-load="#content_home"
data-off-background-color="transparent" data-off-color="#606060"
data-on-background-color="#606060" data-on-color="#222222"
data-active-pattern="(.*/||.*index.html||.*#lo_content_home.html)"
data-icon="fa-home fa-lg"
class="default top-space">
</div>
...
... Über den folgenden Link wird die aktuelle Testseite für die Traffic-Map aufgerufen:
...
<div data-type="pagebutton" data-url="#lo_content_raspis.html" data-load="#content_raspis"
data-off-background-color="transparent" data-off-color="#606060"
data-on-background-color="#606060" data-on-color="#222222"
data-active-pattern=".*#lo_content_raspis.html"
data-icon="fa-server fa-lg"
class="top-space">
</div>
</div>
</li>
<li data-row="1" data-col="2" data-sizex="14" data-sizey="12">
<div class="page" id="content_home"></div>
<div class="page" id="content_rain"></div>
<div class="page" id="content_charts"></div>
<div class="page" id="content_cams"></div>
<div class="page" id="content_comm"></div>
<div class="page" id="content_maps"></div>
<div class="page" id="content_raspis"></div>
</li>
</ul>
</div>
</body>
</html>
Es folgt der komplette HTML-Code der Test-Map:
<html>
<title>FHEM</title>
<head>
</head>
<body>
<div class="page" id="content_raspis">
<ul>
<li data-row="1" data-col="2" data-sizex="9" data-sizey="9" class="map_bkgrd">
<header><div data-type="label">Test Maps-Traffic</div></header>
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="true"
data-device="Ingrid_map"
data-traffic="true"
data-mapgroup="1"
data-stroke="#111111,7,60">
</div>
</li>
</ul>
</div>
</body>
</html>
Zum CSS ist nicht viel zu sagen: ich habe Deine Vorgaben von Deinem 1. Post ans Ende meiner lobo60.css kopiert.
Ich würde mich freuen, wenn Du mich auf den richtigen Weg bringen könntest.
Schon mal danke im Voraus.
Ich werde es mir mal anschauen. Vorab eine Frage: Hast Du die Version vom Anfang dieses Beitrags genommen oder die, die ich am 22.11. gepostet hatte?
Hmmmm....
Ich war der Meinung, ich hätte Deine Version vom 22.11. eingebaut - scheinbar aber nicht !
Habe sie gerade heruntergeladen: der Error ist weg!!!
Hatte Deine neue Version also nicht verwendet.
Kann durch ein Update oder Update All Deine neue .js wieder auf die erste Version zurückgesetzt worden sein?
Also: Error ist weg. Leider erscheint die gesamte Google Map jetzt nicht mehr. Dunkelgrauer Hintergrund und die Menüleiste links. That's all. ???
Versuch mal ein wenig paar reloads der Seite, das Verhalten hatte ich auch schon mal. Manchmal hilft auch die Karte auf Fullscreen und wieder zurück zu schalten.
Durch ein Update sollte nichts verändert werden, das Widget ist ja so weit ich weiß noch gar nicht im Update drin.
Sorry, eki, kein Erfolg.
Habe Folgendes gerade veranstaltet:
1) ca. 10mal => 'Aktuelle Chronik löschen, Reload (dazwischen mal auf Vollbild gestellt und wieder zurück)
2) Habe auf meinem Test-PC mit Win10 einen frischen Firefox-Browser installiert und dort aufgerufen - nix zu sehen
3) Habe Deine erste Version noch mal aufgespielt: der Error kommt, aber die Map kommt auch (ohne Route, sonst alles da) !
Watt nu ???
Hast Du, wenn Du die neue Version verwendest, den API Key in das meta Tag geschrieben?
Falls nicht, musst Du die Zeile
<script src="https://maps.googleapis.com/maps/api/js?key=<key>"></script>
durch
<meta name="GoogleMapsApiKey" content="<key>">
ersetzen (<key> natürlich mit Deinem API key)
Ja - das war's! Karte wird wieder angezeigt dank 'meta name'.
Ich hätte wohl die Seite 4 Deines Threads etwas sorgfältiger studieren sollen. Dort steht's ja schon. SORRY!
Allerdings fehlt immer noch bei mir die Anzeige der Route.
Habe noch mal nen frischen Firefox aufgespielt - Routendarstellung fehlt leider noch.
Nach Reload der Page zeigt die Firefox-Konsole:
Beginn des console listings:
Base dir: ./ fhem-tablet-ui.js:2184:1
jQuery dynamically loaded fhem-tablet-ui.js:2193:17
initPage: Timer gestartetfhem-tablet-ui.js:687
initPage: 402.1msfhem-tablet-ui.js:744
fetch content: Timer gestartetwidget_pagebutton.js:19
fetch content: 69.08mswidget_pagebutton.js:32
initPage: Timer gestartetfhem-tablet-ui.js:687
null widget_gmaps.js:16:4
initPage: 331.07msfhem-tablet-ui.js:744
InvalidValueError: unknown property includeReturn js:41:473
_.Ob https://maps.googleapis.com/maps/api/js:41:473
_.Rb https://maps.googleapis.com/maps/api/js:42:242
ti https://maps.googleapis.com/maps-api-v3/api/js/31/0/intl/de_ALL/directions.js:126:412
Ne.prototype.route/< https://maps.googleapis.com/maps/api/js:133:951
Xd.prototype.oa/</d[a]< https://maps.googleapis.com/maps/api/js:124:3290
_.Sd/< https://maps.googleapis.com/maps/api/js:62:195
Xd.prototype.oa/< https://maps.googleapis.com/maps/api/js:124:3400
Yd https://maps.googleapis.com/maps/api/js:64:209
Xd.prototype.oa https://maps.googleapis.com/maps/api/js:124:3142
<anonym> https://maps.googleapis.com/maps-api-v3/api/js/31/0/intl/de_ALL/directions.js:1:1
get jsonlist2: Timer gestartetfhem-tablet-ui.js:845
fetch content: Timer gestartetwidget_pagebutton.js:19
...
...
Ende des console listings:
...
...
read jsonlist2: Timer gestartetfhem-tablet-ui.js:852
read jsonlist2: 4.01msfhem-tablet-ui.js:936
Die Verbindung zu ws://192.168.178.xxx:8083/fhem/?XHR=1&inform=type=status;filter=WEB,FritzCList,Ingrid_map,%20STATE%20longpoll%201-state%202-state%203-state%204-state%205-state%206-state%207-state%208-state%209-state%2010-state%2011-state%201-timestamp%201-number%201-name%201-duration%202-timestamp%202-number%202-name%202-duration%203-timestamp%203-number%203-name%203-duration%204-timestamp%204-number%204-name%204-duration%205-timestamp%205-number%205-name%205-duration%206-timestamp%206-number%206-name%206-duration%207-timestamp%207-number%207-name%207-duration%208-timestamp%208-number%208-name%208-duration%209-timestamp%209-number%209-name%209-duration%2010-timestamp%2010-number%2010-name%2010-duration%2011-timestamp%2011-number%2011-name%2011-duration%20alias%20start_address%20end_address%20latitude%20longitude%20GoogleMapsCenter%20GoogleMapsZoom%20GoogleMapsStroke%20GoogleMapsTrafficLayer%20waypoints%20returnWaypoints%20travelMode%20includeReturn%20language%20delay%20distance%20duration%20return_duration%20duration_in_traffic%20return_duration_in_traffic%20eta%20return_distance%20return_delay;since=1512385845132;fmt=JSON×tamp=1512385845233 wurde unterbrochen, während die Seite geladen wurde.
Ich bin diesbzgl. leider nicht erfahren genug, um daraus etwas zu erkennen.
Vielleicht hilft's Dir.
Und eki: wg. mir KEINE EILE.
Ich persönlich kann mit der aktuellen Darstellung ohne Route erst einmal gut leben.
Danke vielmals für Deinen Service und Deinen Einsatz.
Ich denke, ich habe das Problem gefunden (die Optoin includeReturn vom FHEM TRAFFIC Modul ist bisher im widget_gmaps noch nicht richtig eingebunden). Mit der angehängten Version klappt es hoffentlich. Bitte gib Bescheid ob das so ist, dann werde ich den Link am Anfang des Threads anpassen.
JA !!!
Alles wird prima angezeigt; Routenverlauf inkl. eines kleinen Info-Kastens (siehe angehängtes pic).
Das Info-Kästchen verschwindet leider beim Screenshot.
Danke Dir vielmals.
Was würden wir Noobs nur ohne unsere Profis machen!?
Hallo zusammen,
ich versuche mich gerade an dem Modul. Die Idee finde ich super. Leider will es bei mir nicht. Das Feld bleibt leer.
Dann habe ich eine Minimalseite mit global Position gebaut...auch ohne Erfolg.
Das Modul aus dem ersten Post habe ich in den entsprechenden Ordner kopiert. Es wird auch geladen.
Load widget : gmaps
fhem-tablet-ui.js:1845:13
Create widget : gmaps
fhem-tablet-ui.js:1845:13
dynamic load file:../../tablet/js/widget_gmaps.js / async:true
fhem-tablet-ui.js:1845:13
init templates - Done
fhem-tablet-ui.js:1845:13
dynamic load done:../../tablet/js/widget_gmaps.js
fhem-tablet-ui.js:1845:13
null
widget_gmaps.js:16:4
Try to init plugin: gmaps
fhem-tablet-ui.js:1845:13
Loaded plugin: gmaps
fhem-tablet-ui.js:1845:13
initWidgets - Done
fhem-tablet-ui.js:1845:13
initPage: 45.22ms
fhem-tablet-ui.js:744:13
start shortpoll in (ms):500
fhem-tablet-ui.js:1845:13
restartLongpoll
fhem-tablet-ui.js:1845:13
stopLongpoll
fhem-tablet-ui.js:1845:13
Error in parsing value for 'transition-duration'. Declaration dropped.
indexm.html
start shortpoll
css Daten liegen in der fhem-tablet-ui-user.css
Die Koordinaten werden auch empfangen (Ausschnitt aus dem response):
Name global
Internals {...}
STATE no definition
Readings {}
Attributes {...}
language DE
latitude 51.256132
longitude 11.175300
Minimalseite:
<!DOCTYPE html>
<html lang="de">
<!-- FHEM Tablet UI 2.6 -->
<head>
<link rel="icon" href="favicon.ico" type="image/x-icon" />
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="debug" content="3"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta name='toast' content='3'> <!-- 0 = keine Ausgabe von Protokollmeldungen -->
<meta name="longpoll_type" content="websocket"> <!-- "ajax" -> HTTP AJAX; "0" -> longpoll aus; "websocket" -> websocket -->
<meta name="GoogleMapsApiKey" content="meinkey">
<meta name="fhemweb_url" content="https://meinpi.dyndns.de:11443/zwei">
<link rel="stylesheet" href="../../tablet/css/fhem-mobil-ui.css" />
<link rel="stylesheet" href="../../tablet/css/fhem-tablet-ui-user.css" />
<script src="../../tablet/js/fhem-tablet-ui.js" defer></script>
<title>Test</title>
</head>
<body>
<div class="hbox">
<div class="vbox phone-width">
<div class="card lift">
<header>Test</header>
<section>
<div class="row">
<div class="cell-80 left-align right-space">
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="false"
data-device="global"
data-mapgroup="1"
data-icon="fa-home"
data-stroke="#33dd00,7,70">
</div>
</div>
</div>
</section>
</div>
</div>
</div>
</body>
</html>
Irgendwelche Vorschläge was ich falsch mache?
Grüße
Klaus
Ich habs mal bei mir ausprobiert (die Pfade und den Key von mir angepasst). Das Karteninterface wird geladen, allerdings liegt das Problem in der Höhe und Breite des Kartenfensters. So wie das aktuell definiert ist, wird das Fenster 0x0 pixel groß. Wenn Du mal einen absoluten Wert statt 100% einträgst (irgenwo muss er mal eine Größe haben, damit er dann mit Prozentzahlen weiter machen kann). Du könntest z.B. folgendes eintragen:
style="height:100vh; width:100vw"
dann füllt das Fenster den kompletten Viewport.
Zitat von: eki am 15 Dezember 2017, 08:23:56
style="height:100vh; width:100vw"
dann füllt das Fenster den kompletten Viewport.
Danke für den Hinweis, das hätte mir selbst auffallen sollen ???
Jetzt kommt schonmal die Karte (mit style="height:200px; width:100%")
Allerdings ist das Zoomlevel bisschen groß.
Ich habe auch bisschen mit data-size gespielt, leider ohne Ergebnis.
Die Position von global müsste doch als Icon angezeigt werden?
Habe ich irgendwas übersehen?
Für die Zentrierung und den Zoomfaktor gibt es mehrere Möglichkeiten:
- Entweder das FHEM Device hat ein Reading/Attribut/Internal welches GoogleMapsCenter bzw. GoogleMapsZoom heißt (das ist typischerweise für TRAFFIC Devices so. Wenn es das global Device ist, dann werden diese Parameter typischerweise nicht vorhanden sein.
- Oder Du setzt per data-center bzw. data-zoom den Wert entsprechend bei der Widget Definition.
Am Anfang des Threads ist ein Beispiel und die Beschreibung der Formate.
Ich nutze mit meiner Frau die Standortfreigabe von Google Maps.
Was ganz früher mal Google Latidude war, dann auf Google+ umgezogen ist und seit Frühjahr 2017 bei Google Maps zuhause ist, heißt nun "Standortfreigabe" und funktioniert recht zuverlässig.
Kann diese Funktion auch in diesem Widget genutzt werden (ungeachtet der ROOMATE/GUEST... Funktion)?
Vielen Dank und viele Grüße
Das müsste ich einbauen. Das API scheint es her zu geben. Ich teste mal.
Zitat von: eki am 18 Dezember 2017, 09:41:36
Für die Zentrierung und den Zoomfaktor gibt es mehrere Möglichkeiten:
- Entweder das FHEM Device hat ein Reading/Attribut/Internal welches GoogleMapsCenter bzw. GoogleMapsZoom heißt (das ist typischerweise für TRAFFIC Devices so. Wenn es das global Device ist, dann werden diese Parameter typischerweise nicht vorhanden sein.
- Oder Du setzt per data-center bzw. data-zoom den Wert entsprechend bei der Widget Definition.
Am Anfang des Threads ist ein Beispiel und die Beschreibung der Formate.
Den ersten Post hatte ich schon gelesen.
Ich hatte nur vermutet, das beim global device auch die long und lat Daten extrahiert werden.
Wenn nicht dann verstehe ich das Beispiel nicht.
Ich habe jetzt das myRoommate Beispiel als Basis verwendet. Das war sowieso mein Anwendungsfall.
Dort klappt es super.
Dummerweise gibt es dort kein GoogleMapsCenter. Daher wird die Position immer am Rand dargestellt.
Lässt es sich realisieren, das die Roommate Position automatisch das Zentrum ist?
Die long lat Daten werden beim global Device schon extrahiert und dann als Punkt auf der Karte dargestellt. Nur das Zentrum wird nicht da hin gelegt. Ich könnte natürlich, wenn sonst nichts angegeben ist, das Zentrum immer auf den Punkt legen, der dargestellt ist und wenn es mehrere sind dann eben auf den geographischen Mittelwert aller dargestellten Punkte (mach ich, wenn ich dazu komme).
Es geht aber auch mit Bordmitteln von FHEM. Wenn Du folgendes machst:
attr userReadings myRoommate GoogleMapsCenter {ReadingsVal("myRoommate","locationLat",0) . ", " . ReadingsVal("myRoommate","locationLong",0);;}
Dann sollte eigentlich bei dem Device myRoommate ein zusätzliches Reading GoogleMapsCenter entstehen, welches dann die richtigen Daten enthält (eventuell musst Du warten bis der Ort das nächste mal aktualisiert wird oder für eine Aktualisierung sorgen bis das zutätzliche Reading zum ersten mal angelegt wird).
Zitat von: eki am 20 Dezember 2017, 08:14:17
Die long lat Daten werden beim global Device schon extrahiert und dann als Punkt auf der Karte dargestellt. Nur das Zentrum wird nicht da hin gelegt. Ich könnte natürlich, wenn sonst nichts angegeben ist, das Zentrum immer auf den Punkt legen, der dargestellt ist und wenn es mehrere sind dann eben auf den geographischen Mittelwert aller dargestellten Punkte (mach ich, wenn ich dazu komme).
Das wäre super. Insbesondere letzteres 8)
Zitat von: eki am 20 Dezember 2017, 08:14:17
Es geht aber auch mit Bordmitteln von FHEM. Wenn Du folgendes machst:
attr userReadings myRoommate GoogleMapsCenter {ReadingsVal("myRoommate","locationLat",0) . ", " . ReadingsVal("myRoommate","locationLong",0);;}
Danke für den Tip, habs eingabaut
Mit der aktuellen Version wird bei mir überhaupt nichts mehr angezeigt.
Zitat von: TWART016 am 26 Dezember 2017, 00:43:58
Mit der aktuellen Version wird bei mir überhaupt nichts mehr angezeigt.
ich hab die *.js Datei erst heute geladen und bei mir funktionierts. Hab anfangs den Meta-Tag vergessen, aber da hat sich die Karte von selbst beschwert. Nach dem einbauen des Meta-Tags läufts bei mir mit einem Traffic-Device von Fhem.
Beste Grüße
Andy
P.s.: Danke fürs Modul ;)
Gibt es mittlerweile schon eine Lösung zu dem Problem mit einem Popup?
Sobald das Widget in einem Popup ist, wird die Karte nicht angezeigt.
Hatte ich überlesen :-[, ich schau's mir mal an und melde mich.
Bei der Verwendung von Wegepunkten kommt folgender Fehler: Cannot set property '0' of undefined
Ein wenig Nachforschung ermittelte in Zeile 692 folgende Ursache:
vorher
elem.data('direction_request').wayPoints = [];
nachher
elem.data('direction_request').waypoints = [];
Mit der Änderung ist der Fehler dann verschwunden und die Route wird auch mit allen Wegepunkten dargestellt.
Allerdings startet die Ansicht immer im "Weltmodus", so dass man erst mal in die Karte reinzoomen muss.
Zitat von: TWART016 am 15 Januar 2018, 17:59:44
Gibt es mittlerweile schon eine Lösung zu dem Problem mit einem Popup?
Sobald das Widget in einem Popup ist, wird die Karte nicht angezeigt.
Ich habe eine neue Version, die auch mit Popups funktionieren müsste. Bitte mal testen und hier Feedback geben.
Zitat von: OdfFhem am 21 Januar 2018, 08:02:45
Bei der Verwendung von Wegepunkten kommt folgender Fehler: Cannot set property '0' of undefined
Ein wenig Nachforschung ermittelte in Zeile 692 folgende Ursache:
vorher
elem.data('direction_request').wayPoints = [];
nachher
elem.data('direction_request').waypoints = [];
Mit der Änderung ist der Fehler dann verschwunden und die Route wird auch mit allen Wegepunkten dargestellt.
Allerdings startet die Ansicht immer im "Weltmodus", so dass man erst mal in die Karte reinzoomen muss.
Danke für den Hinweis, ist in der hier angehängten Version jetzt auch korrigiert. Das mit dem falschen Zoom bzw. Gebiet kann ich nicht nachvollziehen. Bitte poste mal Deine Definition des Charts und des TRAFFIC Devices (kannst ja die sensiblen Daten weglassen).
@eki
1) Ich habe die neue js-Datei aktiviert und bislang keine Ungereimtheiten festgestellt; Darstellung im popup scheint wie gewünscht zu funktionieren.
2a) Ich habe das "fehlerhafte" TRAFFIC-Device mal parallel unter anderem Namen neu angelegt; dann wird autom. der erwartete Kartenausschnitt dargestellt.
2b) Ein diff auf die list-Ergebnisse der beiden "identischen" Devices förderte in meinen Augen nichts Aufregendes zu Tage; ich hab's aber trotzdem mal unten eingefügt (< ist das neue; > ist das kaputte):
3d2
< CFGFN
6,7c5,6
< NAME Traffic999
< NR 320
---
> NAME Traffic201
> NR 208
9,10c8,9
< TRIGGERTIME 1517128589.58288
< TRIGGERTIME_FMT 2018-01-28 09:36:29
---
> TRIGGERTIME 1517128590.98809
> TRIGGERTIME_FMT 2018-01-28 09:36:30
19c18
< 2018-01-27 09:36:31 eta 10:11:53
---
> 2018-01-27 09:36:31 eta 10:11:51
49c48
< alias x2y
---
> alias a2b
Zitat von: eki am 19 Dezember 2017, 12:29:56
Das müsste ich einbauen. Das API scheint es her zu geben. Ich teste mal.
Hallo eki,
bist Du beim Thema "Standortfreigabe" schon weitergekommen? :)
Viele Grüße
Christoph
Hallo zusammen,
vielen Dank an eki für die Erstellung des Widgets. Ich habe dieses eingebunden und es gefällt mir sehr gut. Was bei mir nicht funktioniert, ist die Aktualisierung der Kartendarstellung.
Ich nutze das Widget mit Anbindung an ein TRAFFIC-device. Aktualisiert sich dieses, aktualisiert sich bei mir nicht die Kartendarstellung. Weder wenn ich die start oder end_address ändere noch (und das ist für mich der Fall den ich nutzen wollte) wenn sich die Verkehrslage geändert hat und somit auch die Fahrtzeit und entsprechend auch die Ankunftszeit.
Ich plane eine Anzeige der Fahrtzeit zur Arbeit jeden Morgen mit automatischer Aktualisierung der Karte in der Tablet-UI alle x-Minuten.
Ist das noch nicht unterstützt oder mache ich hier ggf. noch etwas falsch?
Dank und Gruß
Markus
Zitat von: daelch am 11 Februar 2018, 06:23:41
Hallo eki,
bist Du beim Thema "Standortfreigabe" schon weitergekommen? :)
Viele Grüße
Christoph
ng
Leider noch nicht, ich habe noch keine Lösung, die direkt über das Google Maps API funktioniert gefunden. Ich würde daher aktuell eher zur Nutzung des FHEM Moduls PRESENCE zusammen mit einer APP wie Geofency greifen. Falls ich noch was finde, melde ich mich.
Zitat von: mackshot am 13 Februar 2018, 22:02:32
Hallo zusammen,
vielen Dank an eki für die Erstellung des Widgets. Ich habe dieses eingebunden und es gefällt mir sehr gut. Was bei mir nicht funktioniert, ist die Aktualisierung der Kartendarstellung.
Ich nutze das Widget mit Anbindung an ein TRAFFIC-device. Aktualisiert sich dieses, aktualisiert sich bei mir nicht die Kartendarstellung. Weder wenn ich die start oder end_address ändere noch (und das ist für mich der Fall den ich nutzen wollte) wenn sich die Verkehrslage geändert hat und somit auch die Fahrtzeit und entsprechend auch die Ankunftszeit.
Ich plane eine Anzeige der Fahrtzeit zur Arbeit jeden Morgen mit automatischer Aktualisierung der Karte in der Tablet-UI alle x-Minuten.
Ist das noch nicht unterstützt oder mache ich hier ggf. noch etwas falsch?
Dank und Gruß
Markus
Poste hier mal bitte Deine Definition des widgets in FTUI.
Hallo zusammen,
ich würde gerne im Alarmmonitor für die Feuerwehr alle Hydranten mit in der Karte anzeigen, sodass man dann gleich sieht, wo die nächsten Hydranten vom Einsatzort aus zu finden sind.
Gibt es eine Möglichkeit mehrere Marker anzuzeigen, oder muss ich wirklich 200 Instanzen machen und alle mappen? ::)
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).
Zitat von: eki am 18 Februar 2018, 18:01:38
Poste hier mal bitte Deine Definition des widgets in FTUI.
Gerne :)
<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?
Zitat von: eki am 19 Februar 2018, 11:51:07
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 ;D
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
Zitat von: mackshot am 19 Februar 2018, 21:52:50
Gerne :)
<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.
Zitat von: mackshot am 19 Februar 2018, 21:52:50
Ü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]
Hallo eki,
das Widget ist wirklich ein Traum, große Klasse.
Eine Frage zum data-center habe ich:
Zitat
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:
<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
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.
Zitat von: eki am 20 Februar 2018, 15:36:45
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)
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):
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
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 :) .
Zitat von: eki am 22 Februar 2018, 10:40:54
Ich melde mich, wenn ich das mit git soweit habe und freue mich auf Deine Pull-Requests :) .
Danke!
Zitat von: eki am 22 Februar 2018, 10:40:54
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 :)
Ich habe noch mal eine Änderung gemacht, man kann jetzt den Verkehrslayer über einen Button auf der Karte aus- und anschalten.
Zitat von: Kuzl am 20 Februar 2018, 13:47:46
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 ;D
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 (http://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:
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:
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/ (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.
Das ist ja wunderbar und sehr flexibel :)
Ich probiers die Tage mal aus, VIELEN VIELEN DANK!
Ich habe noch einen Fehler bei der Fontgröße der Labels entdeckt und oben eine neue Version des widget_gmaps.js angehängt.
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.
Hi sek_is_back, hi eki,
so könnte das aussehen:
--- /tmp/widget_gmaps.js.orig 2018-04-14 09:32:35.128229678 +0200
+++ widget_gmaps.js 2018-04-14 09:42:06.885812584 +0200
@@ -201,6 +201,7 @@
elem.initData('center', 'auto');
elem.initData('zoom', 'auto');
elem.initData('travel_mode', 'DRIVING');
+ elem.initData('hide-ui', false);
elem.initData('traffic', false);
elem.initData('showdetails', false);
elem.initData('stroke', '#ffffff,7,50,#ffffff,7,50');
@@ -247,6 +248,10 @@
if (!elem.data('map_options').center) elem.data('map_options').center = (elem.data('center')&& elem.data('center')!='auto')? {lat: parseFloat(elem.data('center').split(",")[0]),lng: parseFloat(elem.data('center').split(",")[1])} : {lat: 0, lng: 0};
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('hide-ui')) {
+ elem.data('map_options').disableDefaultUI = true;
+ }
+
if (!elem.data('map_options').styles) {
if (elem.data('nightmode')) {
elem.data('map_options').styles = [
LG
Christian
ahhh sehr cool, danke. jetzt werde ich mal versuchen ob ich es mit meinem mini Grundverständnis schon eingebaut bekomme. ;D
Wahrscheinlich mache ich alles kaputt, hab dann aber einen super Lernerfolg.
Funktioniert perfekt, code verstanden und easy eingebaut... DANKE jetzt ist es für mich perfekt
Hi. Hat jemand die Karte im Swiper Widget hinbekommen? Ohne Swiper funktioniert es, mit Swiper wird die Karte nicht angezeigt und auch nicht abgerufen.
Hey zusammen,
ich logge aktuell minütlich meine Geokoordinaten mit. Ist es irgendwie möglich, z.B. die letzte Stunde oder auch den Tag (von - bis) als Wegstrecke darzustellen?
VG, Thomas
Zitat von: choenig am 14 April 2018, 09:34:07
Hi sek_is_back, hi eki,
so könnte das aussehen:
--- /tmp/widget_gmaps.js.orig 2018-04-14 09:32:35.128229678 +0200
+++ widget_gmaps.js 2018-04-14 09:42:06.885812584 +0200
@@ -201,6 +201,7 @@
elem.initData('center', 'auto');
elem.initData('zoom', 'auto');
elem.initData('travel_mode', 'DRIVING');
+ elem.initData('hide-ui', false);
elem.initData('traffic', false);
elem.initData('showdetails', false);
elem.initData('stroke', '#ffffff,7,50,#ffffff,7,50');
@@ -247,6 +248,10 @@
if (!elem.data('map_options').center) elem.data('map_options').center = (elem.data('center')&& elem.data('center')!='auto')? {lat: parseFloat(elem.data('center').split(",")[0]),lng: parseFloat(elem.data('center').split(",")[1])} : {lat: 0, lng: 0};
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('hide-ui')) {
+ elem.data('map_options').disableDefaultUI = true;
+ }
+
if (!elem.data('map_options').styles) {
if (elem.data('nightmode')) {
elem.data('map_options').styles = [
LG
Christian
Werde ich so bei mir einbauen. Im Prinzip hätte man das aber auch direkt durch:
data-map_options='{"hide-ui":true}' ohne Code Änderungen machen können.
Zitat von: ToM_ToM am 15 April 2018, 21:32:30
Hey zusammen,
ich logge aktuell minütlich meine Geokoordinaten mit. Ist es irgendwie möglich, z.B. die letzte Stunde oder auch den Tag (von - bis) als Wegstrecke darzustellen?
VG, Thomas
Das geht bisher nicht. Wenn Du ein Reading mit einer Liste von Geo-Koordinatenpaaren bauen könntest (über userReading) dann könnte ich das im Modul nutzen um daraus eine Strecke auf die Karte zu legen.
Zitat von: basty2 am 14 April 2018, 21:26:51
Hi. Hat jemand die Karte im Swiper Widget hinbekommen? Ohne Swiper funktioniert es, mit Swiper wird die Karte nicht angezeigt und auch nicht abgerufen.
Hast Du ein Beispiel html, mit dem ich das nachvollziehen könnte.
ZitatDas geht bisher nicht. Wenn Du ein Reading mit einer Liste von Geo-Koordinatenpaaren bauen könntest (über userReading) dann könnte ich das im Modul nutzen um daraus eine Strecke auf die Karte zu legen.
Hallo eki, klar das sollte kein Problem sein. :)
Hast du eine Vorgabe wie das Format aussehen soll? Irgendein JSON-Format evtl.? Was ich bieten kann, wäre Längen- und Breitengrad sowie dazugehöriger Timestamp.
Könnte z.B. so aussehen:
{
"2018-04-16 13:50:30": [
"49.773172",
"10.2488713"
],
"2018-04-16 13:51:35": [
"49.7711765",
"10.2626042"
],
"2018-04-16 13:52:40": [
"49.7682939",
"10.278397"
],
"2018-04-16 13:53:35": [
"49.7671851",
"10.2986531"
],
...
}
VG, Thomas
Na wenn Du mich so fragst ;).
Am einfachsten wäre geojson, das versteht das Modul ohnehin (siehe auch erklärung weiter oben). Wenn Du also so etwas:
{ "type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[102.0, 0.0], [103.0, 1.0], [104.0, 0.0], [105.0, 1.0]
]
},
"properties": {
"timestamp": "2018-04-16 13:50:30",
}
},
]
}
als Reading bauen könntest, dann wäre es für mich relativ einfach.
ZitatAm einfachsten wäre geojson
Oh geojson verarbeitet aber positionen auf einer x/y Achse. Ich habe ja nur Längen- und Breitengrad.
Dann müsste ich diese in Geokoordinaten anhand der Mapgröße umwandeln? Oder denke ich da gerade zu kompliziert?
Kannst du mir mal ein Beispiel-Datensatz geben anhand meinem Beispiel oben?
VG, Thomas
Zitat von: eki am 16 April 2018, 13:51:02
Hast Du ein Beispiel html, mit dem ich das nachvollziehen könnte.
klar:
<li class="halbTransparent" data-row="1" data-col="8" data-sizex="8" data-sizey="7">
<header class="headerTransparent centered">Draußen</header>
<div data-type="swiper"
data-device="anzeige" data-get="test"
data-states='["1","2","3"]'
class="nopagination">
<ul>
<li class="noswipe"><div class="center large"></div>
<div class="inline">
<div id="hier" data-type="label"
data-device="temp1.temp"
data-hide="reachable"
data-hide-on="0"
data-hide-off="!on"
data-fix="1"
data-get="temperature"
data-limits="[-20,18,25]"
data-colors='["#9999ff","#00ff00","#ff0000"]'
data-unit=" °C"
class="inline tall"></div>
</div>
</li>
<li class="noswipe">
<div id="myMap"
data-type="gmaps"
data-showdetails="true"
data-device="home"
data-height="300"
data-width="500"
data-traffic="true"
data-stroke="#000,0,50"></div>
</li>
<li class="noswipe">
<div data-type="iframe"
data-src="http://xxx:8083/fhem/TRAFFIC?name=home"
data-height="300"
data-width="500"
></div>
</li>
</ul>
</div>
</li>3 seiten für swiper, die ich per DOIF steuere. Iframe funktioniert, wenn man heigth und width angibt.
Edit: Fehlermeldungen beim Laden der Seite bekomme ich keine. :)
Zitat von: ToM_ToM am 16 April 2018, 15:14:30
Oh geojson verarbeitet aber positionen auf einer x/y Achse. Ich habe ja nur Längen- und Breitengrad.
Dann müsste ich diese in Geokoordinaten anhand der Mapgröße umwandeln? Oder denke ich da gerade zu kompliziert?
Kannst du mir mal ein Beispiel-Datensatz geben anhand meinem Beispiel oben?
VG, Thomas
Kein Problem, geojson kann mit geographischen Koordinaten umgehen. Beispiel ist angehängt.
Hi eki,
ich habe das jetzt mal anhand meiner Beispielkoordinaten oben nachgebaut.
Wäre das so korrekt?
{
"type": "FeatureCollection",
"timestamp": "2018-04-16T13:50:30Z",
"features": [
{
"type": "Feature",
"properties": {
"timestamp": "2018-04-16T13:50:30Z"
},
"geometry": {
"type": "LineString",
"coordinates": [
10.2488713,
49.773172
]
}
},
{
"type": "Feature",
"properties": {
"timestamp": "2018-04-16T13:51:35Z"
},
"geometry": {
"type": "LineString",
"coordinates": [
10.2626042,
49.7711765
]
}
},
{
"type": "Feature",
"properties": {
"timestamp": "2018-04-16T13:52:40Z"
},
"geometry": {
"type": "LineString",
"coordinates": [
10.278397,
49.7682939
]
}
},
{
"type": "Feature",
"properties": {
"timestamp": "2018-04-16T13:53:35Z"
},
"geometry": {
"type": "LineString",
"coordinates": [
10.2986531,
49.7671851
]
}
}
]
}
VG, Thomas
Linien müssen immer mindestens 2 Punkte haben. Wenn ich Dich richtig verstehe, dann willst Du darstellen, wo Du warst. Das macht aus meiner Sicht mehr Sinn mit Punkten (man kann dann auf der Karte z.B. ein Icon darstellen). Die Linien dazwischen sind ansonsten ja nur Verbindungen zwischen den einzelnen Positionen, die nicht auf Straßen gemappt werden).
Aber wie Du willst, es geht recht viel. Ich habe mal aus Deinen Daten 3 Beispiele gemacht, die alle dargestellt werden.
1. Beispiel: Eine Linie mit allen Koordinaten (hier kann man nur der ganzen Linie Properties mitgeben)
2. Beispiel: mehrere Liniensegmente, die dann die Gesamtlinie bilden (mach deshalb Sinn, weil man dann den Liniensegmenten einzelne Properties geben kann)
3. Beispiel: Einzelne Punkte. Bei den Punkten kannst Du festlegen, welches Logo dargestellt werden kann und das sogar unterschiedlich je nach Property. Dazu musst Du den Parameter data-feature_style festlegen (ist im Beispiel für eine von mir erfundene Property "home" mal gemacht.
Ausprobieren kannst Du das einfach in dem Du Deine Beispieldaten in ein File mit extension geojson packst, das auf Deinen Webserver legst (ich habe dazu unter dem Ordner tablet noch einen Ordner data angelegt.
Die Definition des Kartenwidgets für das 3. Beispiel könnte z.B. so aussehen:
Zitat
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="false"
data-traffic="true"
data-mapgroup="0"
data-geojson="data/test3.geojson"
data-label="fa-car"
data-stroke="#0000AA,20,70"
data-feature_style='{
"popup_properties_click":"timestamp",
"display_styles":{
"home.yes":{"label":"fa-home","opacity":"0.8","strokeColor":"red","zoom_min":"11","zoom_max":"100"}
}'
</div>
ZitatAusprobieren kannst Du das einfach in dem Du Deine Beispieldaten in ein File mit extension geojson packst, das auf Deinen Webserver legst (ich habe dazu unter dem Ordner tablet noch einen Ordner data angelegt.
Guten Morgen eki,
muss es immer eine Datei sein oder kann ich die Daten auch direkt aus einem Reading auslesen um hier Schreibzugriffe auf der SD-Karte oder SSD zu sparen?
VG, Thomas
Im Moment zum Testen muss es eine Datei auf dem Server sein. Ich werde aber mal schauen, ob ich das auch über ein Reading einbauen kann.
Hi eki,
irgendwie bekomme ich dein Beispiel nicht zum laufen.
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="false"
data-traffic="true"
data-mapgroup="0"
data-geojson="data/test3.geojson"
data-label="fa-car"
data-stroke="#0000AA,20,70"
data-feature_style='{
"popup_properties_click":"timestamp",
"display_styles":{
"home.yes":{
"label":"fa-home",
"opacity":"0.8",
"strokeColor":"red",
"zoom_min":"11",
"zoom_max":"100"
}
}
}'>
</div>
Hatte es noch angepasst da eine schließende Klammer und das > gefehlt hatte, aber es kommt beim Laden ein Fehler (siehe Anhang)
Datei liegt auch im Tablet-Unterordner "data".
VG, Thomas
Zitat von: basty2 am 16 April 2018, 23:37:56
3 seiten für swiper, die ich per DOIF steuere. Iframe funktioniert, wenn man heigth und width angibt.
Edit: Fehlermeldungen beim Laden der Seite bekomme ich keine. :)
Hi Eki,
konntest Du das schon nachstellen oder brauchst Du weitere Infos?
Grüße
Zitat von: ToM_ToM am 21 April 2018, 22:34:08
Hi eki,
irgendwie bekomme ich dein Beispiel nicht zum laufen.
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="false"
data-traffic="true"
data-mapgroup="0"
data-geojson="data/test3.geojson"
data-label="fa-car"
data-stroke="#0000AA,20,70"
data-feature_style='{
"popup_properties_click":"timestamp",
"display_styles":{
"home.yes":{
"label":"fa-home",
"opacity":"0.8",
"strokeColor":"red",
"zoom_min":"11",
"zoom_max":"100"
}
}
}'>
</div>
Hatte es noch angepasst da eine schließende Klammer und das > gefehlt hatte, aber es kommt beim Laden ein Fehler (siehe Anhang)
Datei liegt auch im Tablet-Unterordner "data".
VG, Thomas
Ich habe es mit genau Deiner Definition bei mir probiert und da sieht es gut aus (siehe anghängtes Bild).
Bitte versuche es mal mit der hier angehängten Version (Die Fehlermeldung deutet für mich darauf hin, dass Du nicht die neueste Version des scripts verwendest).
Zitat von: basty2 am 23 April 2018, 07:07:02
Hi Eki,
konntest Du das schon nachstellen oder brauchst Du weitere Infos?
Grüße
Nein, ich habe das leider noch nicht geschafft, sorry melde mich sobald ich etwas gefunden habe. Ich brauche nicht mehr Info sondern mehr Zeit :-[
ZitatBitte versuche es mal mit der hier angehängten Version (Die Fehlermeldung deutet für mich darauf hin, dass Du nicht die neueste Version des scripts verwendest).
Ah tatsächlich. Jetzt geht's :) Cool.
Kannst du das zu den Standardupdates hinzufügen (https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt) ?
Dann werde ich damit mal ein wenig rumspielen. :)
EDIT: Testdatei 1 und 2 zeigen bei mir keine Daten auf der map. Nur die 3 funktioniert.
VG, Thomas
Zitat von: basty2 am 14 April 2018, 21:26:51
Hi. Hat jemand die Karte im Swiper Widget hinbekommen? Ohne Swiper funktioniert es, mit Swiper wird die Karte nicht angezeigt und auch nicht abgerufen.
Ich habe es jetzt mal nachgestellt. Ich denke es liegt an der Höhe des Kartenfensters in den "swipes". Der Parameter data-height wird im gmaps Widget nicht berücksichtigt. Dadurch wird das Fenster 0 Pixel hoch und nichts ist zu sehen.
Was passiert denn, wenn Du statt data-height="500" style="height: 500px;" verwendest. Bei mir hat es damit funktioniert.
Zitat von: eki am 25 April 2018, 21:32:22
Ich habe es jetzt mal nachgestellt. Ich denke es liegt an der Höhe des Kartenfensters in den "swipes". Der Parameter data-height wird im gmaps Widget nicht berücksichtigt. Dadurch wird das Fenster 0 Pixel hoch und nichts ist zu sehen.
Was passiert denn, wenn Du statt data-height="500" style="height: 500px;" verwendest. Bei mir hat es damit funktioniert.
Danke, jetzt geht es. :)
ZitatIm Moment zum Testen muss es eine Datei auf dem Server sein. Ich werde aber mal schauen, ob ich das auch über ein Reading einbauen kann.
Hi eki, hast du hier schon eine Idee wie man das aus ein Reading lesen könnte?
Und gibt es eine Möglichkeit, eine Linie anzeigen zu lassen, aber den letzten Punkt eben als Punkt (Markierung) auf der Karte?
VG, Thomas
Leider habe ich da noch keine Lösung. Ist ein bisschen schwieriger als gedacht, aber ich bin dran.
Linie mit Endpunkt als Punkt müsste auf jeden Fall gehen (z. B. indem man die Line und zusätzlich den letzten Punkt noch als Punkt definiert).
ZitatLeider habe ich da noch keine Lösung. Ist ein bisschen schwieriger als gedacht, aber ich bin dran.
Okay cool. Wäre auf jeden Fall deutlich ressourcenschonender als permanent die Datei zu schreiben. :) Zumal es relativ viele Datenpunkte werden.
ZitatLinie mit Endpunkt als Punkt müsste auf jeden Fall gehen (z. B. indem man die Line und zusätzlich den letzten Punkt noch als Punkt definiert).
Das hatte ich probiert. Also dein Beispiel mit der Linie verwendet und anschließend noch zusätzlich den Eintrag mit dem Punkt gemacht. Aber dann wurde mir gar nichts angezeigt.
Was ich vor habe, ist eine Verlaufsline auf der Map anzuzeigen wo man sich die letzte Stunde aufgehalten hat, bzw. welchen Weg man verwendet hat.
VG, Thomas
Das mit den Readings verstehe ich noch nicht so ganz. Würdest Du dann ein Reading generieren, dessen Inhalt immer länger wird (Positionswerte werden immer angehängt)? Kannst Du mal ein Beispiel machen.
Ein Geojson file, welches eine Linie und ans Ende einen Punkt zeichnet, sollte so aussehen:
{ "type": "FeatureCollection",
"features": [
{ "type": "Feature",
"geometry": {
"type": "LineString",
"coordinates": [
[10.2488713, 49.773172],
[10.2626042, 49.7711765],
[10.278397, 49.7682939],
[10.2986531, 49.7671851]
]
},
"properties": {
"status":"My way to last position",
"description": "One Line with all positions (properties can only be given for the whole line)"
}
},
{ "type": "Feature",
"properties": {
"status": "My last position",
"description": "Point with last position)"
},
"geometry": {
"type": "Point",
"coordinates": [
10.2986531,
49.7671851
]
}
}
]
}
Hallo eki,
im Prinzip müsste das Reading den Inhalt der Datei haben. Für den Aufbau des Readings müsste ich mir dann etwas einfallen lassen damit es nicht zu viele Daten werden. Im Prinzip irgendetwas das nur den Verlauf der letzten Stunde darstellt. Die Positionsdaten dazu liegen in der Datenbank. Somit würde ich eine kleine Prozedur schreiben die dann regelmäßig per SELECT die Daten der letzten Stunde aus der DB zieht und diese dann als JSON-String ins Reading schreibt. Ist auch noch keine schöne Lösung und belastet natürlich die Kiste auf der das Ganze läuft, aber was besseres fällt mir aktuell nicht ein.
VG, Thomas
Ich habe das widget jetzt so ergänzt, dass ein Reading mit dem Namen "polygon" ausgewertet und daraus eine Linie auf die Karte gezeichnet wird. Das Reading muss lng/lat Wertepaare enthalten, die durch "," getrennt sind, die Wertepaare müssen durch Leerzeichen getrennt sein.
Wenn Du zusätzlich die lng/lat Werte des letzten Punktes in Readings mit Namen "longitude" und "latitude" schreibst, dann wird am Ende auch noch ein Symbol/Icon etc. gemalt (das gab es ja schon immer).
Beispiel:
setreading <device> polygon 10.2488713,49.773172 10.2626042,49.7711765 10.278397,49.7682939 10.2986531,49.7671851
setreading <device> longitude 10.2986531
setreading <device> latiitude 49.7671851
Falls Du unterschiedliche Größen/Farben für das Polygon und den Punkt willst, müsstest Du das in 2 Devices trennen und dann über data-mapgroup in der html Definition in die gleiche Karte zeichnen lassen.
Ah sehr cool eki. :)
Danke. Das werde ich die Tage gleich mal testen.
VG, Thomas
Hallöchen, ich bin sehr von dieser Kartendarstellung begeistert.
Ich habe nur ein Problem und ich bin nicht sicher ob es an meiner unwissenheit liegt oder an der Kartendarstellung.
Was ich erreichen möchte ist folgendes:
Zwei gmaps haben jeweils nur die Position eines Mitbewohners. Dies klappt auch sauber. Beide Stecknadeln werden auf einer Karte angzeigt. Genau so wie ich das möchte.
Nur der Zoomlevel passt nicht. Ich weiß, der kann fest eingestellt werden. Was ich aber lieber hätte ein automatischer Zoom, welcher so so einstellt, dass immer die beiden Stecknadeln auf der Karte zu sehend sind. Ist das möglich?
Hier mein code:
<!-- MAPS -->
<li data-row="1" data-col="8" data-sizey="1" data-sizex="2">
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-alias="Felix"
data-showdetails="false"
data-device="positionFelix"
data-longitude="lng"
data-label="Felix"
data-latitude="lat"
data-mapgroup="1"
data-stroke="#dd0033,7,70">
</div>
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-alias="Kelly"
data-showdetails="false"
data-device="positionKelly"
data-longitude="lng"
data-label="Kelly"
data-latitude="lat"
data-mapgroup="1"
data-stroke="#dd0033,7,70">
</div>
</li>
Liebe Grüße
Felix
Das geht bisher nur dann, wenn eine Route dargestellt wird (dann kann das GoogleMaps selbst machen). Um das auch für andere Fälle, wie den von Dir genannten, einzubauen, muss ich erst mal überlegen, wie das realisierbar ist.
Ich bin allerdings gerade an einer größeren Änderung des widgets dran (Einbau der Nutzung von OpenStreetMap als Alternative zu Google) und daher wird das möglicherweise ein bisschen dauern.
Kann denn OpenStreetMaps auch den aktuellen Verkehr so schön farbig darstellen?
Ich habe die Erweiterung eigentlich deshalb angefangen, weil mich die geänderten AGBs bei Google geärgert haben (man muss für einen API Key jetzt eine Kreditkarte hinterlegen).
OSM selbst ist erst mal nur eine Basis für die Karten selbst. Ich habe mich für Leaflet als js API entschieden und baue gerade einen Wrapper ein, der dann ein Umschalten zwischen Google und Leaflet (mit OSM) ermöglicht.
OSM selbst bietet keinen Layer mit Verkehrsdaten, allerdings gibt es verschiedene Möglichkeiten (z.B. OpenTransportMap) das zu realisieren, da bin ich aktuell noch dran die richtige Variante einzubauen. Gleiches gilt im Übrigen auch für das Thema Routenplanung und Info.
Zitat von: eki am 23 Oktober 2017, 17:10:33
Hallo zusammen,
ich wollte ursprünglich eine Darstellung meiner Wegezeiten auf eine Karte (ähnlich wie im FHEM Typ TRAFFIC) und habe nun ein Widget in einer ersten Version fertig, das eigentlich alles, was in FHEM eine geografische Koordinate als Reading Internal oder Attribut hat, auf einer Landkarte auf Basis Google Maps API darstellen kann.
Das Ganze ist noch eher Beta, ich zeige es aber hier schon mal, damit "early Adopters" es testen und mir Feedback geben können. Eventuell habt Ihr ja auch Ideen, was man noch so alles damit tun können sollte, dann wäre ich interessiert und bereit das auch noch zu erweitern.
Was kann das Widget:
Darstellung von FHEM Devices, welche eine Koordinate (longitude/latitude) als Reading/Attribut/Internal haben (z. B. Anwesenheiten auf Basis von ROOMMATE/RESIDENT/GUEST, oder das global Device als Standort von FHEM).
Darstellung von Fahrwegen mit Fahrzeiten auf Basis des FHEM TRAFFIC Moduls. Hierbei können die Routen eingefärbt als Linien dargestellt werden und entsprechend per InfoWindow dann Details (wie z.B. die normale Fahrzeit bzw. die Fahrzeit bei aktuellem Verkehr) dazu dargestellt werden.
Was braucht man zur Nutzung/Installation:
- einen Google Maps API Key. Wie man den bekommt, ist bei der Beschreibung des TRAFFIC Moduls unter https://wiki.fhem.de/wiki/TRAFFIC (https://wiki.fhem.de/wiki/TRAFFIC) zu sehen. Den so erhaltenen Code muss man in die html index Datei als meta Tag eintragen. Das sieht z.B. so aus (<Key> muss natürlich noch durch den API Key selbst ersetzt werden):
<meta name="GoogleMapsApiKey" content="<Key>">
- das angehängte widget_gmaps.js entsprechend im js Verzeichnis der Installation von FTUI
- den folgenden Zusatz in der fhem-tablet-ui-user.css Datei (zur Formattierung der InfoWindows).
.gm-style-iw-parent {
opacity: 0.85;
}
.map_infowindow {
color: #8C8C8C;
text-align: left;
}
.firstHeading {
margin-top: 2px;
margin-bottom: 2px;
}
.bodyContent > p {
margin-top: 2px;
margin-bottom: 2px;
}
Folgendes sind die Widget Parameter (Dinge wie data-get, die schon im FTUI standardmäßig bekannt sind, lasse ich weg):
- data-alias: Hiermit kann man festlegen aus welchem Reading der Name für die Anzeige genommen werden soll (default 'alias')
data-latitude: Hiermit kann man festlegen aus welchem Reading die geografische Breite genommen werden soll (default 'latitude')
data-longitude: Hiermit kann man festlegen aus welchem Reading die geografische Länge genommen werden soll (default 'longitude')
data-language: Kann 'de' oder 'en' sein und stellt die Sprache für die Ausgabe in den Info Windows ein
data-size: Gibt die Größe des Kartenausschnittes an (als String mit "<Breite>,<Höhe>"), kann auch weggelassen werden, wenn es sich um ein TRAFFIC Device handelt, dann wird der Wert aus dem GoogleMapsSize Reading genommen oder, falls das auch nicht vorhanden ist, wird die Größe aus der Ausdehnung der Route(n) ermittelt.
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.
data-zoom: Gibt den Zoomwert der Karte an (als integer Wert, siehe Google Maps API), kann auch weggelassen werden, wenn es sich um ein TRAFFIC Device handelt, dann wird der Wert aus dem GoogleMapsZoom Reading genommen oder, falls das auch nicht vorhanden ist, wird der Zoom Wert aus der Ausdehnung der Route(n) ermittelt.
data-travel_mode: Gibt an, wie die Route berechnet werden soll. Es gibt die Möglichkeiten 'DRIVING', 'WALKING', 'BICYCLING', 'TRANSIT' (Details siehe TRAFFIC Modul von FHEM oder Google Maps API für den 'Directions' Service), kann auch weggelassen werden, wenn es sich um ein TRAFFIC Device handelt, dann wird der Wert aus dem trafficMode Reading genommen.
data-traffic: Gibt an, ob die Verkehrslage auf der Karte dargestellt werden soll (true/false default false)
data-showdetails: Gibt an ob per Default die Info Windows eingeblendet werden sollen (true/false, default false)
data-stroke: Gibt an, wie die Fahrstrecken oder Symbole dargestellt werden sollen. Besteht aus maximal 6 Werten (Farbe Hinweg, Breite Hinweg, Durchsichtigkeit Hinweg, Farbe Rückweg, Breite Rückweg, Durchsichtigkeit Rückweg), die Farbe wird per #rrggbb angegeben, die Breite in Pixel und die Durchsichtigkeit als Prozentwert zwischen 0% und 100%, siehe auch Details zum Modul TRAFFIC. Die Symbole zur Route werden in der doppelten angegebenen Breite des Pfades dargestellt
data-icon: Hiermit kann ein Icon angegeben werden, welches statt des standardmäßigen Pfeils verwendet werden soll, um die Position zu markieren. Kann eine URL auf eine icon Datei, die relativ zum Verzeichnis www/images/ liegt sein
data-label: Will man statt eines Icons ein FontAwesome/Openautomation/fhemSVG Font-Icon (z.B. 'fa-home', 'oa-weather_winter', 'fs-usb_stick') verwenden, wird das hiermit angegeben (es kann auch icon und Font-Icon zusammen verwendet werden (z.B. ein Kreis als Icon und darin ein Font-Icon.
data-mapgroup: Legt fest, ob jedes Widget in eine eigene Karte gezeichnet werden soll oder ob mehrer Informationen in einer Karte landen sollen.
Im Folgenden ist ein Minimalbeispiel enhalten, das 3 Instanzen des Widgets enthält, die eine Fahrstrecke, eine ROOMMATE position und die Position des global Devices in eine Karte malen.
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="false"
data-device="testTrf"
data-traffic="true"
data-mapgroup="1"
data-stroke="#111111,7,60">
</div>
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="false"
data-device="global"
data-mapgroup="1"
data-icon="default/HOME_Status.1.png"
data-stroke="#33dd00,7,70">
</div>
<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="true"
data-device="myRoommate"
data-longitude="locationLong"
data-label="fa-home"
data-icon="no-icon"
data-latitude="locationLat"
data-mapgroup="1"
data-stroke="#dd0033,7,70">
</div>
Daraus ergibt sich dann beispielsweise folgendes Bild (nein, ich wohne nicht in Köln, das habe ich eher zufällig als Beispiel gewählt).
@Peer Plex: Warum hast du nur Post 1 kopiert? Oder sehe ich deinen Kommentar/Frage nur nicht?
Zitat von: eki am 16 August 2018, 10:20:35
OSM selbst bietet keinen Layer mit Verkehrsdaten, allerdings gibt es verschiedene Möglichkeiten (z.B. OpenTransportMap) das zu realisieren, da bin ich aktuell noch dran die richtige Variante einzubauen.
Hallo @eki
ich stolpere zufällig rein, ich machte gerade meine ersten Schritte mit FTUI und informiere mich nun, was noch so alles geht.
Ich würde gar keine Routenplanung benötigen. Meine Idee ist eine andere: Ich würde mir gern die aktuelle Verkehrlage in einem vorab definierten Kartenausschnitt ansehen.
Hat sich seit Deinem letzten Posting in Sachen OSM + Verkehrslage etwas getan?
Freundliche Grüße.
Ja, bin fast fertig und werde demnächst hier eine neue Version zum Testen posten. Darin geht nun alles (inklusive Routing und Verkehrslage) auf Basis von OSM Karten und TomTom für Verkehr und Routing. Für TomTom braucht man zwar auch eine Anmeldung um einen Key zu bekommen, aber die wollen zumindest keine Kreditkarte für den privaten Gebrauch.
@eki danke-schön.
Eine kleine Bitte dafür: Einen neuen Thread. Es ist ja was Neues. (Und Hinweisbeitrag in diesem Thread und Subject ändern auf: "[obsolent] Neues FTUI Widget Kartendarstellung mit Google Maps API" und zumachen).
Das wäre aus meiner kleinen Sicht sehr hilfreich für Leute, die Jahre später suchen ... binjaschonweg
OK, dann mache ich den Beitrag hier mal zu und starte mit einem Neuen.
https://forum.fhem.de/index.php/topic,91781.0.html (https://forum.fhem.de/index.php/topic,91781.0.html)