[Closed] Neues FTUI Widget Kartendarstellung mit Google Maps API

Begonnen von eki, 23 Oktober 2017, 17:10:33

Vorheriges Thema - Nächstes Thema

eki

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

TWART016

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

eki

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



TWART016

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?

eki

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

TWART016

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.

eki

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.

TWART016

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?

eki

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?

ulobo60

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.
3x raspi + cam-Modul mit mmal-motion - 2x raspi mit KODI - 1x raspi mit FHEM + FTUI

eki

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.

ulobo60

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
3x raspi + cam-Modul mit mmal-motion - 2x raspi mit KODI - 1x raspi mit FHEM + FTUI

masterpete23

#12
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

eki

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

masterpete23

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?