Map Widget reloaded - Neue Version des Map Widgets

Begonnen von eki, 05 Oktober 2018, 16:04:19

Vorheriges Thema - Nächstes Thema

eki

Es gibt nun ein neues Map Widget das das alte ersetzt. Der Name ist nicht mehr gmaps sondern nur maps, da das Ganze jetzt auch ohne Google funktioniert. Bestehende Installation sollten einfach statt data-type="gmaps" data-type="maps" setzen ansonsten ist das Ganez abwärts kompatibel. Die Datei dazu ist hier angehängt.

Alle anderern Infos sind im ebenfalls neuen Wiki (https://wiki.fhem.de/wiki/FTUI_Widget_Maps).

Das Ganze ist wegen der Erweiterung zur Nutzung auch von Open Street Map quasi komplett neu gemacht, und daher sicher nicht komplett fehlerfrei. Ich wäre also an Feedback interessiert und hoffe dass nicht zu viel schief gegangen ist.

[Edit: 10.10.2018] Neue Version mit IE Support

[Edit: 15.10.2018] Neue Version mit Fehlerbereinigung für Settings ohne data-label.

[Edit: 16.10.2018] Neue Version mit Anpassung für FontAwesome und FTUI Version >= 2.7.2

[Edit: 08.10.2020] Neue Version mit Möglichkeit zur Darstellung von Verkehrsüberwachungskameras siehe auch https://forum.fhem.de/index.php/topic,91781.msg1086859.html#msg1086859

[Edit: 14.10.2020] Neue Version mit der Möglichkeit Kartenfenster bezüglich zoom/scroll zu koppeln.

curt

#1
Ich bin erst nächste Woche wieder am Start, freue mich aber schon darauf.

Nachtrag:
Ich merke, dass ich das Vorgehen gedanklich nicht nachvollziehen kann. Die Annahme soll sein: OSM, bestimmter Kartenausschnitt, aktuelle Verkehrslage. Aber keine Routenberechnung oder Routendarstellung.

Bezug: Wiki-Artikel. Du hast mit diesem Wizard [5] eine Javascript-Datei [4] erstellt und lokal gespeichert - habe ich das richtig verstanden? Darf man erfahren, was genau Du dem Wizard "gesagt" hast? Ist bei dem Vorgehen gesichert, dass immer das aktuelle Kartenmaterial von OSM genutzt wird? Oder wird mit Deinem Verfahren der Kartenstand quasi eingefroren?

Einige Grundkenntnisse OSM habe ich. Aber mir ist momentan leider nicht möglich, Dein Vorgehen nachzuvollziehen.
RPI 4 - Jeelink HomeMatic Z-Wave

eki

Die Karte, die erzeugt wird, besteht aus unterschiedlichen Anteilen. Zunächst mal ist da der Kartenlayer selbst. Der kommt über einen bisher direkt im Code enthaltenen Link zu OSM und sollte immer die aktuellen Daten aus der OSM Datenbasis enthalten. Ich habe schon darüber nachgedacht das auch noch flexibler zu machen, es gibt ja jede Menge Themenmaps von OSM, die müsste man dann als optionale Layer auswählbar machen.
Zusätzlich lässt sich der Verkehrslagelayer darüber legen. Der wird standardmäßig nicht dargestellt, sondern nur wenn data-traffic in der HTML Definitionsdatei auf ,,true" gesetzt wird. Die Daten kommen im OSM Fall von TomTom und sonst von Google.
Das Layer mit den Routen und Fahrzeiten ist ebenfalls optional und typischerweise an ein TRAFFIC Device in FHEM gekoppelt (über data-device).
Dann kommen Layer mit Orten oder Linien, die normalerweise ebenfalls an FHEM Devices mit den Readings latitude, longitude, polygon gebunden sind.
Und schließlich gibt es noch die GEOJSON Dateien, mit denen man so ziemlich alles machen kann (Punkte, Linien, Flächen).
Diese Layer kann man über mehrere DIV Definitionen im HTML zusammen bauen, die alle den gleichen Wert in data-mapgroup haben müssen. Dann werden nämlich die Informationen alle in einem Kartenfenster zusammen dargestellt (das habe ich im Wiki noch vergessen zu beschreiben, was möglicherweise zu Deinem Unverständnis geführt hat).

klausw

Hi Eki,

super, auf OSM habe ich schon gewartet   8)

bekomme leider folgenden Fehler:
SyntaxError: unexpected token: identifier[Weitere Informationen] tomtom.min.js:1:5

obwohl ich meiner Meinung nach weder Routing noch Verkehrsdaten nutze.

meine Konfig:
<div id="myMap"
style="height:200px; width:100%"
data-type="maps"
data-map_type="OSM"
data-showdetails="true"
data-device="rr_Klaus"
data-longitude="locationLong"
data-label="fa-home"
data-icon="no-icon"
data-latitude="locationLat"
data-mapgroup="1"
data-zoom="15"
data-stroke="#dd0033,7,70">
</div>


Klaus
RasPi B v2 mit FHEM 18B20 über 1Wire, LED PWM Treiber über I2C, Luchtdruck-, Feuchtesensor und ein paar Schalter/LED\'s zum testen
Module: RPI_GPIO, RPII2C, I2C_EEPROM, I2C_MCP23008, I2C_MCP23017, I2C_MCP342x, I2C_PCA9532, I2C_PCF8574, I2C_SHT21, I2C_BME280

curt

#4
Zitat von: klausw am 11 Oktober 2018, 00:05:21
bekomme leider folgenden Fehler:
SyntaxError: unexpected token: identifier[Weitere Informationen] tomtom.min.js:1:5

Du bekommst wenigstens mehr oder weniger sinnvolle Fehlermeldungen. Bei mir wirft er unter verschiedenen Browsern ganz schnöde

tomtom.min.js:1
Syntax error: missing ; before statement


@Eki hat da irgendwas, was wir beide nicht haben.

Ich habe da höchstens den Ansatz, im ersten Schritt mal diese tomtom-zip-Datei zu vergleichen: Wir schicken alle mal md5sum drüber, teilen das Ergebnis öffentlich - mal schauen, ob wir alle die gleiche Version haben.

Mehr fällt mir im Moment leider nicht ein.

P.S: Jaaaaa - der Ansatz mit OSM ist sehr gut, den muss man befördern.
(Die Jungfrau spricht zum Kinde: Geht die primäre Funktion [eine definierte OSM-Karte zeigen] wirklich nicht ohne diesen TomTom-Zauber?)

PP.S:

# md5sum jssdk-4.36.2-distribution.zip
7ee47f5bd36d1d4c368420836b47b65c  jssdk-4.36.2-distribution.zip


RPI 4 - Jeelink HomeMatic Z-Wave

eki

das mit dem MD5 Hash bringt glaube ich nicht viel, ist im Übrigen bei mir identisch, ich habe auch zur Sicherheit bei mir noch mal alles herunter geladen, funktioniert bei mir immer noch  >:(.

Natürlich braucht man das tomtom Gedöns nicht, wenn man keine Routen und keine Verkehrsdaten anzeigen will. Ich habe das jetzt mal in der hier angehängten js Datei so eingebaut, dass das nur dann geladen und benutzt wird, wenn es auch gebraucht wird. Damit kann man erst mal weiter machen, allerdings müssen wir schon heraus finden, was der Grund für das Problem mit tomtom ist, sonst tickt traffic und routing ja nicht.

curt

@eki
Fehler gefunden. Es funktioniert sowohl mit der vorletzten wie mit der letzten Version bei mir. Problem war: Ich hatte Dich so verstanden, dass das ganze TomTom-Gerödel in /opt/fhem/www/tablet/lib gehöre. Im Wiki sehe ich, dass man dort ein Unterverzeichnis tomtom anlegen müsse. Also muss alles in /opt/fhem/www/tablet/lib/tomtom.

Die Darstellung der blanken OSM-Karte funktioniert dann (bei mir) problemlos.
RPI 4 - Jeelink HomeMatic Z-Wave

curt

Ich habe noch etwas weitergemacht und möchte andere daran teilhaben lassen: Das war erfolgreich. Gleichwohl entstanden Fragen, es gibt auch Unklarheiten zu Optionen.

Ausgangslage ist mein Beitrag #6: OSM wird für eine bestimmte Region angezeigt. (Koordinate bei Bitterfeld, Zoomstufe 10, damit hat man die A10 vom Berliner Ring bis Kreuz Halle, die A10 hat wegen Betonkrebs riesige Baustellen.)

Derzeitiges Ziel: Verkehrslage anzeigen. (Ziel ist NICHT Routenberechnung!)

Man muss sich nun bei TomTom registieren: https://developer.tomtom.com/user/register - Name, Mailadresse. Dann spielt man das Spiel "Ich bin kein Bot und kenne Autos", danach spielt man das Spiel "ich suche Bestätigungsmail aus dem SPAM-Ordner". Dann noch das Spiel "ich baue ein neues Password".

Wenn das alles überstanden ist, wird es etwas hakelig: Um den API-Key zu bekommen, muss man ein Projekt definieren: Namen vergeben, dann aus einer Liste ankreuzen, was man so alles will, Traffic und dies und das - hier ist das: https://developer.tomtom.com/online-traffic --> https://developer.tomtom.com/apps/myapps

Jetzt hat man alles, um ordentlich im HTML-Pseudocode rumzumanschen - ich habe dieses:


<!-- page4.html -->
<div class="page" id="page4">

        <div class="gridster">

                <ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">1 | 1 x|y</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">1 | 2 x|y</li>

<li data-row="1" data-col="3" data-sizex="3" data-sizey="1" style="color:#999999;font-size:32px">
                <div data-type="clock" data-format="l"></div>
                <div data-type="clock" data-format="j. F"></div>
            </li>

<li data-row="1" data-col="6" data-sizex="2" data-sizey="1" data-type="clock" data-format="H:i" style="color:#999999;font-size:64px"></li>

<!-- <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">2 | 1 x|y</li> -->
<li data-row="2" data-col="1" data-sizex="6" data-sizey="4">
  <div  style="height: 100%"
        data-type="maps"
        data-map_type="OSM"
        data-language="de"
        data-center="51.642737,12.347260"
        data-zoom="10"
        data-traffic="true"
        data-stroke="#ffffff,7,50,#ffffff,7,50"
        data-showdetails="true">
  </div>
</li>
                </ul>
</div>
</div>


Damit hat man nun die konkrete Karte, mit der Verkehrslage (aber unglücklich dargestellt, dazu später).

Auffällig ist als erstes, dass OHNE Verkehrslage die OSM-Karte zügig aufbaut - MIT Verkehrslage kommt die Verkehrslage sofort, die OSM-Kacheln dauern aber, teilweise dauern einige Kacheln sehr lange. @eki Hast Du eine Idee, woran das liegen kann?

Interessant ist die Option data-showdetails, die ist in https://wiki.fhem.de/wiki/FTUI_Widget_Maps noch falsch beschrieben: Sie bewirkt etwas ganz anderes, sehr sinnvolles: Wenn man die true setzt, bekommt man in der Karte rechts oben eine Schaltfläche. Ohne Verkehrslage kann man zwischen Karte und (erstaunlich bei OSM) Luftbild umschalten - das ist schon mal schön. Mit Verkehrslage kommt eine dritte Option hinzu: Man kann die Verkehrslage aus- und wieder einschalten. Sehr sinnvoll.

Die Option data-stroke - da ist unklar, ob sie eine Wirkung bei Verkehrslage hat - vermutlich nicht. Das Wiki schweigt sich auch darüber aus, ob da Anführungsstriche notwendig sind.

Nicht verstanden habe ich, ob ich Einfluss auf die Darstellung der Verkehrslage habe: Mir scheinen die Breiten der verschiedenen Kategorien Autobahn/gelbe Autobahn/Bundesstraße/Landesstraße/Kreisstraße/Gemeindestraße unglücklich gewählt, unergonomisch: Das ist ein einziger Farbenbrei. - weitere Frage: Habe ich Einfluss auf die Farben für Verkehrsgeschwindigkeit? (Die scheinen mir auch nicht sehr glücklich gewählt.)

Damit das nicht jeder installieren muss, hänge ich mal einen aktuellen Screenshot des o.g. Beispiels an.

@eki Sehr herzlichen Dank - super Sache!
RPI 4 - Jeelink HomeMatic Z-Wave

eki

Zitat
Auffällig ist als erstes, dass OHNE Verkehrslage die OSM-Karte zügig aufbaut - MIT Verkehrslage kommt die Verkehrslage sofort, die OSM-Kacheln dauern aber, teilweise dauern einige Kacheln sehr lange. @eki Hast Du eine Idee, woran das liegen kann?

Dazu habe ich leider bisher auch keine Idee. Manchmal werden einzelne Kacheln recht spät geladen. Das ist eben Internetzugriff auf einen Server, der mehr oder weniger schnell ist. Hatte bisher noch keine Zeit mir das noch mal genauer anzuschauen. Im API habe ich keine Einstellungen gefunden, die da auf irgendwelche Optimierungsmöglichkeiten hindeuten.

Zitat
Interessant ist die Option data-showdetails, die ist in https://wiki.fhem.de/wiki/FTUI_Widget_Maps noch falsch beschrieben: Sie bewirkt etwas ganz anderes, sehr sinnvolles: Wenn man die true setzt, bekommt man in der Karte rechts oben eine Schaltfläche. Ohne Verkehrslage kann man zwischen Karte und (erstaunlich bei OSM) Luftbild umschalten - das ist schon mal schön. Mit Verkehrslage kommt eine dritte Option hinzu: Man kann die Verkehrslage aus- und wieder einschalten. Sehr sinnvoll.

Die Schaltfläche für die verschiedenen Kartenlayer sollte immer da sein und nicht nur bei data-showdetails (das verhält sich bei mir auch so). Data-showdetails ist genau für das da, was im Wiki beschrieben ist. Es gibt einen anderen Parameter data-hide-ui, der standardmäßig auf false steht, und mit dem sich (allerdings aktuell nur im Google Fall) das UI ausschalten lässt.

Zitat
Die Option data-stroke - da ist unklar, ob sie eine Wirkung bei Verkehrslage hat - vermutlich nicht. Das Wiki schweigt sich auch darüber aus, ob da Anführungsstriche notwendig sind.

Nicht verstanden habe ich, ob ich Einfluss auf die Darstellung der Verkehrslage habe: Mir scheinen die Breiten der verschiedenen Kategorien Autobahn/gelbe Autobahn/Bundesstraße/Landesstraße/Kreisstraße/Gemeindestraße unglücklich gewählt, unergonomisch: Das ist ein einziger Farbenbrei. - weitere Frage: Habe ich Einfluss auf die Farben für Verkehrsgeschwindigkeit? (Die scheinen mir auch nicht sehr glücklich gewählt.)

Die Darstellung der Verkehrslage gefällt mir aktuell auch nicht so besonders. Ich habe schon mal ein bisschen gesucht, aber bisher keine Möglichkeit gefunden, die Darstellung der Verkehrslage zu beeinflussen. Da bin ich noch dran, bitte etwas Gedult. data-stroke ist daher aktuell nur für die FHEM und GEJSON features relevant.

curt

Alles verstanden, danke.

Also fast alles - folgende Nachfragen:
* data-stroke - mit oder ohne Anführungszeichen?

* data-style - Du schreibst im Wiki allgemein "Möglichkeit zum Setzen eines Styles entsprechend der Map API Options (siehe Dokumentation zu den Map APIs von Google und Leaflet)". Wenn ich recht verstehe, hängt sie Leaflet-API zwischen FTUI und der TomTom-API. Ist das richtig?

Kannst Du bitte die URL der Leaflet-Map-API-Options mitteilen? (Habe ich nicht gefunden.)
RPI 4 - Jeelink HomeMatic Z-Wave

eki

data-stroke mit Anführungszeichen.

Richtig. FTUI ist Javascrip, nutzt Leaflet als Javascript Plugin und das wiederum nutzt das TomTom Plugin. Nach dem Link muss ich noch mal suchen, mache ich dann ins Wiki. Das ist aber schon die hohe Kunst. Ich würde mich erst mal an das Thema über die Einbindung von Fhem Readings und dann GEOJSON machen. Das geht erst mal auch ohne data-style.

curt

@eki
Zitat von: eki am 12 Oktober 2018, 20:28:34
Ich würde mich erst mal an das Thema über die Einbindung von Fhem Readings und dann GEOJSON machen.

Ist das eher eine Aufforderung an mich oder Dein eigener Plan? Egal - ich wollte schrittweise weitergehen und stolpere über zwei Dinge. Ich will in diesem Schritt einfach Dein Feuer-Wasser-Hydrantenbeispiel mit OSM nachvollziehen.

1) Die Beispieldatei [5] im Wiki-Artikel linkt auf ein "widget_gmaps.js". Ist das jetzt diese Geojson-Feuerwehr-Datei? Oder ist das ein schnöder Link-Fehler im Artikel?

2) data-geojson: Pfadangabe bezogen auf was? "ftui/tablet/data/widget_maps_hydranten.js" oder "/opt/fhem/ftui/tablet/data/widget_maps_hydranten.js" oder noch ganz anders?
RPI 4 - Jeelink HomeMatic Z-Wave

eki

#12
Der Hinweis erst mal mit den einfacheren Dingen zu starten ging an Dich, ich hab das Ding ja gebaut und auch wenn es manchmal nicht den Eindruck macht ;), alles schon mal getestet und ausprobiert.

Der GEOJSON Link im Wiki ist leider falsch, muss ich, oder gern auch Du, korrigieren. Unter https://forum.fhem.de/index.php?action=dlattach;topic=78379.0;attach=97648 im alten Thread ist die Datei auch.

Die Pfade beziehen sich immer auf die Webseite, also auf das, was der Webbrowser vom Webserver sieht. Das ist nicht das Gleiche wie die Pfade im Dateisystem. Ich nehme mal an, "tablet" ist Das Verzeichnis, in dem Dein html File liegt. Wenn Du darunter ein Verzeichnis "data" angelegt hast und dort die GEOJSON Datei liegt, dann kannst Du als Pfad "data/firedata.geojson" angeben (also ohne / am Anfang und damit relativ zur Basis des Webservers).

curt

@eki
* Link im Wiki korrigiert
* data-geojson in Tabelle ergängt; Beispiel zugefügt

Übrigens:

Error:
widget_map.js: 178
SyntaxError: JSON.parse:
unexpected character at line 1
column 1 of the JSON data


Dann findet er dieses firedata.geojson nicht.

Ok, also das funktioniert bei mir ohne Fehler - allerdings auch ohne Hydranten. Ich wanderte und zoomte auf Weilimdorf - leider keine Hydranten zu sehen.

Mein aktueller Code:

<!-- page4.html -->
<div class="page" id="page4">

        <div class="gridster">

                <ul>
<li data-row="1" data-col="1" data-sizex="1" data-sizey="1">1 | 1 x|y</li>
<li data-row="1" data-col="2" data-sizex="1" data-sizey="1">1 | 2 x|y</li>

<li data-row="1" data-col="3" data-sizex="3" data-sizey="1" style="color:#999999;font-size:32px">
                <div data-type="clock" data-format="l"></div>
                <div data-type="clock" data-format="j. F"></div>
            </li>

<li data-row="1" data-col="6" data-sizex="2" data-sizey="1" data-type="clock" data-format="H:i" style="color:#999999;font-size:64px"></li>

<!-- <li data-row="2" data-col="1" data-sizex="1" data-sizey="1">2 | 1 x|y</li> -->
<li data-row="2" data-col="1" data-sizex="6" data-sizey="4">
  <div  style="height: 100%"
                data-type="maps"
        data-map_type="OSM"
        data-language="de"
        data-center="51.642737,12.347260"
        data-zoom="10"
        data-traffic="true"
        data-stroke="#ffffff,7,50,#ffffff,7,50"
        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"}}
        }'
        data-showdetails="true">
  </div>
</li>
                </ul>
</div>
</div>


Woran liegt das nun wieder?
RPI 4 - Jeelink HomeMatic Z-Wave

eki

#14
Verstehe nicht ganz, kommt der Fehler oder kommt er nicht?

Bei display-styles fehlt vor dem { ein ' .