[Closed] Neues FTUI Widget Kartendarstellung mit Google Maps API

ulobo60 · 03 Dezember 2017, 00:54:44

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

Code Auswählen


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

Code Auswählen


<!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:

Code Auswählen


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

eki · 03 Dezember 2017, 15:33:24

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?

ulobo60 · 03 Dezember 2017, 17:38:43

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.

eki · 03 Dezember 2017, 22:05:56

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.

ulobo60 · 03 Dezember 2017, 22:51:32

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

eki · 04 Dezember 2017, 08:06:45

Hast Du, wenn Du die neue Version verwendest, den API Key in das meta Tag geschrieben?

Falls nicht, musst Du die Zeile

Code Auswählen

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

durch

Code Auswählen

<meta name="GoogleMapsApiKey" content="<key>">

ersetzen (<key> natürlich mit Deinem API key)

ulobo60 · 04 Dezember 2017, 12:35:11

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:

Code Auswählen


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:

Code Auswählen


...
...
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&timestamp=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.

eki · 04 Dezember 2017, 15:04:35

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.

ulobo60 · 04 Dezember 2017, 15:25:16

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!?

klausw · 14 Dezember 2017, 23:50:36

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.

Code Auswählen

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):

Code Auswählen

Name	global
Internals	{...}
STATE	no definition
Readings	{}
Attributes	{...}
language	DE
latitude	51.256132
longitude	11.175300

Minimalseite:

Code Auswählen

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

eki · 15 Dezember 2017, 08:23:56

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:

Code Auswählen

style="height:100vh; width:100vw"
dann füllt das Fenster den kompletten Viewport.

klausw · 15 Dezember 2017, 23:13:55

Zitat von: eki am 15 Dezember 2017, 08:23:56
Code Auswählen Erweitern
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?

eki · 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.

daelch · 19 Dezember 2017, 11:56:34

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

eki · 19 Dezember 2017, 12:29:56

Das müsste ich einbauen. Das API scheint es her zu geben. Ich teste mal.