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 (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 (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.
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.
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).
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
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
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.
@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.
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!
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.
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.)
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.
@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?
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 (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).
@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?
Verstehe nicht ganz, kommt der Fehler oder kommt er nicht?
Bei display-styles fehlt vor dem { ein ' .
Ich korrigiere:
DIESER Fehler ist ein Zeichen, dass die data-geojson-Angabe falsch gesetzt ist. Das schrieb ich für spätere Leser, die über exakt diesen Fehler stolpern.
Nein, der Fehler kommt nicht mehr, ich habe data-geojson nun korrekt gesetzt.
Aber Hydranten gibt es trotzdem in Weilimdorf leider nicht.
Bei display-styles fehlt vor dem { ein ' .
Wie auch immer dieses abhanden kam - neuer Auszug:
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"}}
}'
Beeindruckt ihn aber nicht - keine Hydranten in den Kaff zu sehen.
War auch Quatsch von mir, sorry, war vorher schon richtig ohne '
Ich werd es mal bei mir mit Deiner Config ausprobieren, bin aber jetzt erst mal anderweitig beschäftigt. Rückmeldung dann wahrscheinlich am Montag.
@eki
Meine aktuelle Unterseite (mit dem Häkchen) - falls Du gelegentlich testen magst:
<!-- 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>
Das die Hydranten nicht angezeigt werden, kann zig andere Gründe haben. Beispielsweise nutzte ich bislang den JSON-Dingens in FHEM nicht, allenfalls unbewusst. Daher kann es sein, dass meiner Installation noch irgend eine Voraussetzung fehlt. Oder Du setzt irgend ein Paket als selbstverständlich voraus - was mir aber fehlt.
Es hat wirklich keine Eile, mach bitte langsam: Wir sind doch nicht auf der Flucht. - Ich möchte das gelegentlich schrittweise zum Laufen bekommen, daher sollten gelegentlich die Hydranten zu sehen sein. Aber das hat wirklich Zeit.
Die Ideen (für die nächsten Schritte) waren: Einbindung "Sehenswürdigkeiten". Schon das ist heikel, da es dafür bei OSM ganz unterschiedliche Tags gibt. Und die Verknüpfung auf Wikipedia-Artikeln (die eine Koordinate haben) wäre durchaus interessant. (Die Android-App "Mobile Gesichte" basiert darauf.)
Spricht etwas dagegen, dass ich einen völlig neuen Entwurf für den Wiki-Artikel "Map Widget" schreibe? Ich würde den bisherigen Artikel nicht anfassen, den neuen Entwurf unter /Diskussion beginnen. Also falls mein Elan dann noch reicht.
ZitatSpricht etwas dagegen, dass ich einen völlig neuen Entwurf für den Wiki-Artikel "Map Widget" schreibe? Ich würde den bisherigen Artikel nicht anfassen, den neuen Entwurf unter /Diskussion beginnen. Also falls mein Elan dann noch reicht.
Natürlich nicht, hau rein.
Ich habe mir jetzt mal die Definition mit dem GEOJSON angeschaut. Es gibt verschiedene Gründe, warum das nicht klappt.
zum Einen war noch ein ' falsch. Solche Sachen sieht man immer ganz gut, wenn man einen Editor verwendet, der Syntax Highlighting kann (z.B. Notepad++). Hier die Korrigierte Version. Dort habe ich auch noch die Fontgröße für die Hydranten erhöht, sonst sind sie kaum zu sehen.
<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":{"fontSize":"20px","label":"fa-fire-extinguisher","strokeColor":"red"},
"public_transport.station":{"label":"fa-train","strokeColor":"black"}}
}'
data-showdetails="true">
</div>
Andererseits gab es im widget noch einen Fehler, der zuschlägt, wenn kein data-label definiert ist. Ich habe eine neue Version mit entsprechenden Anpassungen am Anfang des Threads angehängt (mit "Edit:" im Text um die Leute darauf hinzuweisen).
Mit diesen beiden Korrekturen sollte es klappen.
@eki
Danke, nun funktioniert es ein wenig mehr: Mir werden rote leere Vierecke angezeigt.
Das Symbol fa-fire-extinguisher existiert bei mir. Wenn ich https://mein-fhem-server:8083/fhem/ftui/icons_table.html aufrufe, wird es nebst vielen anderen Symbolen angezeigt.
Leider aber nicht auf der Karte, da sind nur rote Kästchen.
Benutzt Du FTUI Version 2.7.2? Falls ja, habe ich einen Verdacht.
--> Version 2.7.4
Im ersten Beitrag oben ist jetzt noch mal eine Korrektur um auch mit FTUI Versionen >= 2.7.2 zurecht zu kommen.
Danke @eki
Mit Version 2.7.4 sehe ich nun wunderschöne feuerrote Feuerlöscher. -
Kann es übrigens sein, dass Deine Umstellungen weitere ggf. gar nicht geplante positive Seiteneffekte hat? Mir fällt auf, dass bei dem Verkehrsoverlay die Generalisierung (also wie viele Straßen in Abhängigkeit des handischen Zooms dargestellt werden) wohltuend besser ist.
Die Breite der Straßentypen sowie die Wahl der Farben für den Verkehrsfluss scheint noch nicht optimal - aber lassen wir mal die Kirche im Dorf: Wie das jetzt ist, ist es schon sehr schön.
Ich mache jetzt erstmal eine Pause.
Danach nehme ich mir den Schritt mit der Erstellung der eigenen Layouts vor (falls ich Hilfe brauche, melde ich mich), wenn die Kraft dann noch reicht, mache ich einen *Entwurf* die eine neue/anders aufgebaute Wiki-Seite für das Modul.
Schrittchen für Schrittchen - ich erzähle vor mich hin (vielleicht interessiert es auch andere):
Vermittels http://overpass-turbo.eu kann ich nun eigene geojson-Overlays bauen sowie einbinden. Ich lernte, dass
* Das Overlay ist eine statische Momentaufnahme - das ist NICHT dynamisch, keine dynamische Fortführung. Also es gibt später keine neu gebauten Hydranten!
* Das Vorgehen ist hakelig bis kritisch - die OSM-Kategorien sind nicht zwingend stringent. Darüber hinaus wird es schnell komplex.
* Man kann/muss das Zielgebiet definieren. Zum Beispiel "Berlin". Vermutlich kann man auch Rechtecke definieren - nicht getestet.
Real habe ich testweise zwei alternative Ebenen erzeugt: history (geschichtlich bedeutende Orte) sowie "wikipedia" (Orte, für die es einen Wikipedia-Artikel gibt.
Meine Übung (Schrittchen für Schrittchen) ist für sich genommen sinnfrei. Das Ganze bekommt erst Sinn, wenn man so einen Punkt anklicken kann und es poppt ein popup mit Inhalt auf. Das kann ich derzeit natürlich nicht.
Alle (ja, alle Sprachen! Ich kann die Sprachselektion noch nicht) Wikipedia-Artikel mit Ortsbezug Berlin auf OSM-Karte anzeigen geht so (der Codeschnipsel muss in das linke Fenster von http://overpass-turbo.eu - dann "Run" drücken / lokal abspeichern / in das MAP-Widget wie oben erklärt einbinden):
[out:json][timeout:900];
// fetch area "London" to search in
{{geocodeArea:Berlin}}->.searchArea;
// gather results
(
// query part for: "wikipedia=*"
node["wikipedia"](area.searchArea);
);
// print results
out body;
>;
out skel qt;
@eki
Ich habe noch nicht vergessen, dass ich einen Neuentwurf des Wiki-Artikels schreiben will.
ZitatMeine Übung (Schrittchen für Schrittchen) ist für sich genommen sinnfrei. Das Ganze bekommt erst Sinn, wenn man so einen Punkt anklicken kann und es poppt ein popup mit Inhalt auf. Das kann ich derzeit natürlich nicht.
Du kannst für jedes features (also für jedes Objekt im GEOJSON) definieren, ob und was per Popup dargestellt werden soll. Was fehlt Dir da noch?
Vielleicht noch mal zum eigentlichen Grund aus meiner Sicht zur Erstellung des Widgets: Ich wollte hauptsächlich FHEM Daten auf der Karte darstellen. Die sind natürlich hoch dynamisch (z.B. Anwesenheitsstatus der Mitbewohner, Verkerhssituation auf dem Arbeitsweg, ...). Das mit dem GEOJSON war nur ein Zusatz, aber auch da könnte man natürlich dynamisch Files aus FHEM generieren und dann anzeigen.
Zitat von: eki am 19 Oktober 2018, 08:01:19
Du kannst für jedes features (also für jedes Objekt im GEOJSON) definieren, ob und was per Popup dargestellt werden soll. Was fehlt Dir da noch?
Die Stelle, an der ich das nachlesen kann. "das" = das Vorgehen, die Definitionen dafür. (Die habe alle ihre Dokus gut versteckt.)
Zitat von: eki am 19 Oktober 2018, 08:01:19
Vielleicht noch mal zum eigentlichen Grund aus meiner Sicht zur Erstellung des Widgets: Ich wollte hauptsächlich FHEM Daten auf der Karte darstellen. Die sind natürlich hoch dynamisch (z.B. Anwesenheitsstatus der Mitbewohner, Verkerhssituation auf dem Arbeitsweg, ...). Das mit dem GEOJSON war nur ein Zusatz, aber auch da könnte man natürlich dynamisch Files aus FHEM generieren und dann anzeigen.
Verstehe.
Ich dachte eher an einen weiteren taktischen Bildschirm: Wie ist die Verkehrslage im Umkreis von 50km? Was sind da so für Sehenswürdigkeiten? Was weiß Wikipedia zu ... und so weiter. Ganz grundsätzlich gibt Dein Widget das ja (auch) her.
ZitatDie Stelle, an der ich das nachlesen kann. "das" = das Vorgehen, die Definitionen dafür. (Die habe alle ihre Dokus gut versteckt.)
Siehe Wiki zum Map Widget:
Zitat
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.
Hallo zusammen! Ich wollte den Maps Sidget in meiner neuen FTUI einsetzen. Ist der Code z.Z. nur in diesem Thread zum Runterladen vorhanden, oder gibt es eine neuere Version anderswo? Auf https://wiki.fhem.de/wiki/FTUI_Widget_Maps habe ich keinen passenden Link gefunden.
Danke!
Bitte setze erst mal den Code von hier weiter oben ein.
Zitat von: eki am 12 Oktober 2018, 08:35:01
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.
@eki
Kannst Du mal bitte -rein testweise-
thickness in Dein widget_maps.js einbauen? Vielleicht als data-thickness? Default ist 10, es geht von 1 bis 20. Ich würde mir gern ansehen, was dieser Parameter real bewirkt. (Die Doku-Beschreibung deutet an, ist aber leider nicht wirklich aussagekräftig.)
Siehe: https://developer.tomtom.com/traffic-api/traffic-api-documentation-traffic-flow/raster-flow-tiles
Zitat von: eki am 12 Oktober 2018, 08:35:01
Da bin ich noch dran, bitte etwas Gedult.
<stupst vorsichtig>
Ich möchte die Standortfreigaben der Kontakte eingeblendet haben. Dieses ist eigentlich immer dann möglich, wenn man GoogleMaps aufruft und im Browser im jeweiligen Google Account eingeloggt ist. Dann werden die Bildchen der Kontakte eingeblendet die ihren Standort teilen.
Dies bekomme ich weder mit dem Widget als auch nicht mit einer eingebetteten Map hin. Gibt es dazu eine andere Lösung?
So, mit reverse engineering und einem Trick habe ich es nun geschafft, die Dicke der Traffic Linien anzupassen. Bitte mal in der angehängten Version testen (der Default ist jetzt auf 5 gesetzt (ist halb so dick wie vorher) man kann über data-traffic_thickness auch einen Wert zwischen 1 und 20 setzen).
Kann es sein, dass Du die falsche Version verlinkt hast? Einziger Unterschied zur Vorgängerversion ist
> elem.initData('thickness', '20');
Also nichts mit default->5. Und es ändert sich bei mir auch nichts.
Ich habe gerade noch mal geschaut, die Version müsste richtig sein, das ist auch mehr Unterschied und die von Dir kommentierte Zeile ist gar nicht drin (komisch). Der Teil, der sich geändert hat ist zwischen den Zeilen 336 und 355 sowie 888.
Bitte versuche es noch mal.
Mein Fehler - falsche Version eingespielt. Ache auf mein Haupt.
Es funktioniert alles hervorragend, danke!
Moin!
Danke erstmal für das Widget. Habe es gerade getestet und es funktioniert soweit ganz gut.
Ich möchte es benutzen, um einen Einsatzort schnell auf der (OSM-)Karte anzuzeigen. Erstmal kein Traffic und keine Route.
Leider ist das angezeigte Icon auf der Karte irgendwie sehr klein. Kann man die Größe anpassen?
Gibt es außerdem eine Möglichkeit, Mapcenter und Zoom auch aus einem Reading zu entnehmen? Wenn ich das statisch einstelle ist der eigentliche Marker je nach Entfernung bei größerer Entfernung außerhalb der aktuell sichtbaren Karte oder man muss die Map statisch so weit rauszoomen, dass man auf der Karte keine Straßen mehr erkennt.
Gruß
Carsten
Die größe der lässt sich natürlich anpassen global gibt es dafür den Parameter data-stroke, dort kann man Farbe, Größe und Durchsichtigkeit setzen (siehe Wiki https://wiki.fhem.de/wiki/FTUI_Widget_Maps (https://wiki.fhem.de/wiki/FTUI_Widget_Maps)).
Alternativ kann man ein Reading GoogleMapsStroke im referenzierten Device von FHEM anlegen, und data-stroke weglassen, dann wird der Parameter aus diesem Reading geholt.
Falls Du geojson verwendest, kannst Du über den Parameter data-feature_style relativ flexibel bestimmen, welche "Features" also im geojson enthaltene Kartenobjekte wie dargestellt werden sollen.
Zum Setzen von Mapcenter und Zoom aus Readings geht das ähnlich wie für Stroke. Wird data-center bzw. data-zoom nicht gesetzt, und das Device, das im Widget mit data-device referenziert wird enthält einen Parameter GoogleMapsCenter bzw. GoogleMapsZoom, dann werden diese Werte entsprechend aus den Readings des Devices geholt.
Für Zoom und Center gibt es auch noch die Möglichkeit 'auto' zu setzen, dann passt das Widget alles so an, dass alle Objekte im Ausschnitt zu sehen sind.
Steht übrigens alles auch unter https://wiki.fhem.de/wiki/FTUI_Widget_Maps (https://wiki.fhem.de/wiki/FTUI_Widget_Maps) im Wiki zu dem Widget ;).
Zitat von: eki am 07 Februar 2019, 09:27:02
Die größe der lässt sich natürlich anpassen global gibt es dafür den Parameter data-stroke, dort kann man Farbe, Größe und Durchsichtigkeit setzen (siehe Wiki https://wiki.fhem.de/wiki/FTUI_Widget_Maps (https://wiki.fhem.de/wiki/FTUI_Widget_Maps)).
Hi, das klingt super. Werde ich mir dann heute Abend noch mal anschauen.
Ich hatte es so verstanden, dass data-stroke für Routen gedacht ist. Ich sehe da Parameter für Hinweg und für Rückweg. Ich hab aber ja nur ein Icon.
Zitat von: eki am 07 Februar 2019, 09:27:02
Zum Setzen von Mapcenter und Zoom aus Readings geht das ähnlich wie für Stroke. Wird data-center bzw. data-zoom nicht gesetzt, und das Device, das im Widget mit data-device referenziert wird enthält einen Parameter GoogleMapsCenter bzw. GoogleMapsZoom, dann werden diese Werte entsprechend aus den Readings des Devices geholt.
Für Zoom und Center gibt es auch noch die Möglichkeit 'auto' zu setzen, dann passt das Widget alles so an, dass alle Objekte im Ausschnitt zu sehen sind.
Steht übrigens alles auch unter https://wiki.fhem.de/wiki/FTUI_Widget_Maps (https://wiki.fhem.de/wiki/FTUI_Widget_Maps) im Wiki zu dem Widget ;).
Sorry, das hab ich irgendwie ausgefiltert, weil das dort nur im Bezug auf ein Traffic-Device, das ich nicht habe, die Rede ist. Auf die Idee, dass die Readings auch aus Nicht-Traffic-Devices funktionieren könnten, bin ich gar nicht gekommen.
Zitat von: eki am 07 Februar 2019, 09:27:02
Falls Du geojson verwendest, kannst Du über den Parameter data-feature_style relativ flexibel bestimmen, welche "Features" also im geojson enthaltene Kartenobjekte wie dargestellt werden sollen.
Über geojson habe ich nachgedacht, bin aber nicht sicher, ob ich das richtig verstanden habe. Geojson ist für ne Art POI-Liste(n), oder? Da ich ( Stand jetzt ) nur jeweils einen einzigen Punkt auf der Karte anzeigen will, gibt es mit geojson keinen Vorteil, oder übersehe ich was?
data-stroke ist flexibel, alles was drin ist, wird genommen (auch für Icons), was weg ist, wird auf Default gesetzt.
Es werden letztendlich nur die Readings geprüft, und falls vorhanden, verwendet. Ob das ein TRAFFIC device ist, ist nich relevant.
Falls Du nur einen einzelnen Punkt hast, macht geojson tatsächlich wenig Sinn, habe ich nur der Vollständigkeit halber angemerkt.
Ich habe das Wiki angepasst, damit wird hoffentlich klarer dass es nicht unbedingt ein TRAFFIC Device sein muss um die GoogleMaps.. readings zu berücksichtigen.
Vielen Dank!
Ich werde es hoffentlich heute Abend ausprobieren.
Icon größer machen mit stroke funktioniert einwandfrei.
MapCenter aus Reading funktioniert auch, allerdings nur einmalig nach Refresh. Eine Änderung richtet nicht die Karte neu aus.
Übrigens hast du bei der Anpassung des Wikis überall "GoogleMapsSize" mitkopiert. Auch bei GoogleMapsCenter und GoogleMapsZoom
Zitat von: Carsten am 06 Februar 2019, 23:56:07
Ich möchte es benutzen, um einen Einsatzort schnell auf der (OSM-)Karte anzuzeigen.
Zeige bitte den Code, wenn Du das hinbekommen hast. (Gehört als Beispiel ins Wiki.)
Zitat von: curt am 07 Februar 2019, 23:11:39
Zeige bitte den Code, wenn Du das hinbekommen hast. (Gehört als Beispiel ins Wiki.)
Der Code im Bezug zum Map-Widget ist ja ziemlich unspektakulär. Ich nutze doch nur die absoluten Basisfunktionen ( Punkt anzeigen ).
Gibt es die Möglichkeit, aus FHEM ein Refresh des Map-Widgets zu erzwingen?
Zum Wiki: Habe ich korrigiert
Zum Thema Update und Anpassung an Readings für Center: Da ist tatsächlich noch ein Fehler, muss ich nachforschen, irgendwie wird beim OSM Modus gerundet und dadurch erscheint es so, dass eine Änderung keinen Einfluss hat.
Jede Änderung eines Readings, das relevant für die Karte ist (Center, Zoom, Start-Adresse (bei TRAFFIC), Ziel-Adresse (bei TRAFFIC), ...) triggert ein Neuzeichnen der Karte. Ein spezielles Reading, das nur für das neu Zeichnen da ist, gibt es bisher nicht, wäre aber leicht machbar.
Ich weiß nicht, ob ich dich jetzt falsch verstanden habe, aber wenn ich mich richtig erinnere hat auch die Reihenfolge:
1. Änderung MapCenter
2. Änderung Lat
3. Änderung Lon
zwar den Punkt auf der Karte verschoben, aber nicht das Mapcenter geändert.
Es sah zwar manchmal danach aus, als würde neu gezeichnet ( kurzes "Flackern" der Karte ), aber geändert hat sich an der Kartenzentrierung nichts.
Zitat von: Carsten am 08 Februar 2019, 11:04:19
ZitatZeige bitte den Code, wenn Du das hinbekommen hast. (Gehört als Beispiel ins Wiki.)
Der Code im Bezug zum Map-Widget ist ja ziemlich unspektakulär. Ich nutze doch nur die absoluten Basisfunktionen ( Punkt anzeigen ).
Die Betonung lag ja auch auf "wenn Du das hinbekommen hast". Also wenn das automatisch zentriert.
Ich finde Deinen Ansatz sehr spannend, ich erweitere ihn gedanklich: Von irgendwo her fliegt eine Koordinate in FHEM rein, da könnte man sich zig Gründe für ausdenken: Automatisiert aus einem Nachrichtenstream oder aus einem Forum. Oder das Handy der Gattin <lach>. Oder selbst von Hand eingetragene Koordinate für den nächsten Kurzurlaub.
Leider ist es wohl so, dass wir eher allein sind - ich habe nicht den Eindruck, dass sehr viele ekis geniales Widget nutzen.
Zitat von: Carsten am 08 Februar 2019, 14:43:45
Ich weiß nicht, ob ich dich jetzt falsch verstanden habe, aber wenn ich mich richtig erinnere hat auch die Reihenfolge:
1. Änderung MapCenter
2. Änderung Lat
3. Änderung Lon
zwar den Punkt auf der Karte verschoben, aber nicht das Mapcenter geändert.
Es sah zwar manchmal danach aus, als würde neu gezeichnet ( kurzes "Flackern" der Karte ), aber geändert hat sich an der Kartenzentrierung nichts.
Wie gesagt, das Setzen des Mittelpunktes geht mit OSM noch nicht richtig, sondern nur, wenn die Änderung so groß ist, dass sich der aktuelle Ausschnitt so stark ändert, dass sich der komplette Ausschnitt um eine ganze Fensterbreite (oder Höhe) verschiebt. Ansonsten verschiebt es sich kurz (wie vom Widget angefordert), und schnappt dann wieder zurück, das ist das beschriebene Flackern. Das Problem scheint irgendwo in der von mir genutzten Leaflet Kartenbibliothek zu stecken, und da ist eben Nachforschen auf meiner und Geduld auf Eurer Seite angesagt.
Ich habe jetzt mal eine Version, die das Setzen des Mittelpunkts (hoffentlich) in beliebiger Weise erlaubt. Bitte mal testen.
Zitat von: curt am 08 Februar 2019, 22:32:32
Leider ist es wohl so, dass wir eher allein sind - ich habe nicht den Eindruck, dass sehr viele ekis geniales Widget nutzen.
Also ich nutze es und bin sehr zufrieden.
Im Forum ist man halt eher unterwegs wenn etwas nicht läuft ;)
Zitat von: eki am 13 Februar 2019, 13:41:57
Ich habe jetzt mal eine Version, die das Setzen des Mittelpunkts (hoffentlich) in beliebiger Weise erlaubt. Bitte mal testen.
Habs jetzt ausprobiert. Prinzipiell funktioniert es.
Zwischendurch beim Testen hat es aber auch zweimal einfach aufgehört, auf Änderungen zu reagieren. Danach hat sich die Kartenzentrierung erst nach Refresh wieder ändern lassen. Der Zielpunkt ließ sich aber weiter ändern.
Ich kann das allerdings jetzt nicht mehr reproduzieren. Daher weiß ich nicht, ob es Bug, Bedienfehler, Cacheproblem oder sontwas war.
Im Moment würde ich sagen, es funktioniert. Vielen Dank!
Tolle Arbeit. Das Widget hilft mir sehr bei einer Fahrrad Challenge die Teilnehmer am Tagesende in eine Karte zu bringen.
Ist es möglich die Karte als Bild mit den dargestellten Punkten abzuspeichern? Ich würde die gern per Mail versenden.
Ein herzerfrischendes "Moin" vom achtern Diek vorweg!
Hat es Jemand mal geschafft ein Popup mit einer kleinen Karte und einem Popup-Dialog zu einer großen Karte dargestellt zu bekommen?
Mein Code unten stellt mir die kleine Karte wunderbar dar und oeffnet auch beim draufklicken ein Popup.
Das Fenster ist aber leider ohne Karte.
<li data-row="4" data-col="7" data-sizex="2" data-sizey="2" class="semitransparent">
<header><div data-type="label" class="large">Traffic Situation</div></header>
<div data-type="popup"
data-height="900px" data-width="1000px">
<div id = "TraffictMapSmall"
style = "height:100%; width:100%"
data-type = "maps"
data-showdetails = "true"
data-center = "53.569531,9.619997"
data-zoom = "10"
data-map_type = "OSM"
data-language = "en"
data-mapgroup = "1"
data-stroke = "#FF1111,7,60"
data-showdetails = "true"
data-traffic = "true">
</div>
<div class="dialog">
<header>Traffic Situation</header>
<div id = "TrafficMapBig"
style = "height:100%; width:100%"
data-type = "maps"
data-showdetails = "true"
data-center = "53.569531,9.619997"
data-zoom = "10"
data-map_type = "OSM"
data-language = "en"
data-mapgroup = "1"
data-stroke = "#FF1111,7,60"
data-showdetails = "true"
data-traffic = "true">
</div>
</div>
</div>
</li>
Irgendjemand eine Idee, was ich falsch mache?
Danke und Gruß
Sailor
Hallo zusammen,
kurze Frage, habe dazu leider nirgends etwas gefunden:
Ich will die aktuelle Position meines Autos darstellen. Die Position wird auch schon korrekt dargestellt. Jedoch muss ich immer das data-center angeben, da er sonst irgendwo auf der Karte das Zentrum wählt (zumeist im Atlantik).
Kann man es irgendwie einstellen, dass einfach immer auf die angegeben Koordinaten zentriert wird?
Oder gibt es alternativ einen Trick wie ich direkt den String für das data-center ('<Latitude>,<Longitude>') aus einem Device in dieser gewünschten Form auslesen kann?
Sonst müsste ich es irgendwie ziemlich umständlich in ein Dummy-Reading schreiben. Aber das müsste doch einfacher gehen?
Der Hochploppen dieses Threads erinnert mich daran, dass ich @eki fragen muss, wie wir die "Blitzer" in die Karte bekommen: Eigentlich sind das rein technisch ja auch nur Löschhydranten ...
Kann man eigentlich die Karte standardmäßig auf Satellit umschalten? ???
Zitat von: Darkrabbit am 16 September 2020, 13:02:08
Hallo zusammen,
kurze Frage, habe dazu leider nirgends etwas gefunden:
Ich will die aktuelle Position meines Autos darstellen. Die Position wird auch schon korrekt dargestellt. Jedoch muss ich immer das data-center angeben, da er sonst irgendwo auf der Karte das Zentrum wählt (zumeist im Atlantik).
Kann man es irgendwie einstellen, dass einfach immer auf die angegeben Koordinaten zentriert wird?
Oder gibt es alternativ einen Trick wie ich direkt den String für das data-center ('<Latitude>,<Longitude>') aus einem Device in dieser gewünschten Form auslesen kann?
Sonst müsste ich es irgendwie ziemlich umständlich in ein Dummy-Reading schreiben. Aber das müsste doch einfacher gehen?
Eigentlich sollte mit data-center = 'auto' der Ausschnitt so gewählt werden, dass alle angegebenen Objekte enthalten sind. Falls das bei Dir nicht klappt, bitte mal Deine FTUI Widget Definition und das zugehörige FHEM Listing posten.
Ah, ok... man muss auch nur richtig lesen. :-[
Steht ja auch so in der Beschreibung.
Ich dachte wenn man nichts angibt, nimmt er den Standardwert "auto". Aber wenn man nichts angibt, nimmt er aus dem Device das Reading GoogleMapsCenter.
Ok, funktioniert nun, danke! :)
Zitat von: Darkrabbit am 17 September 2020, 09:45:43
Kann man eigentlich die Karte standardmäßig auf Satellit umschalten? ???
Zumindest bei Google Maps sollte es mit folgender Einstellung gehen:
data-map_options='{"mapTypeId":"roadmap"}'
Edit:
Natürlich muss es "satellite" heißen. Die dritte Variante wäre "hybrid"
data-map_options='{"mapTypeId":"satellite"}'
Perfekt... funktioniert (mit "satellite").
Danke! :)
Zitat von: curt am 17 September 2020, 05:58:10
Der Hochploppen dieses Threads erinnert mich daran, dass ich @eki fragen muss, wie wir die "Blitzer" in die Karte bekommen: Eigentlich sind das rein technisch ja auch nur Löschhydranten ...
Ich sehe zwei Möglichkeiten:
1. Der Autor des FHEM Blitzermoduls sieht eine Möglichkeit vor, die Blitzerobjekte als geojson in ein File zu schreiben. Dann müsste man nur den Filenamen als data-geojson im Mapwidget angeben und fertig.
2. Ich baue den direkten Suppport des Blitzermoduls in das Mapwidget ein, das ist dann aber ein gewisser Aufwand auf meiner Seite, ich kenne das Blitzermodul bisher nur vom Namen her.
Hallo @eki
Nach längerem Nachdenken: beide Versionen haben Vor- und Nachteile.
V.1) Da sparst Du Dir Supportanfragen: Der nach extern gehende Abruf blockiert offenbar, wenn im Radius mehr als 10 Blitzer sind. Blockiert oder liefert nicht. (vgl. Diskussion dazu) - Und das Rad wird nicht neu erfunden.
V.2) Damit würde das Widget unabhängig vom Blitzer-Modul. Spart Neunutzern kaum erklärlichen Aufwand.
Hier mal eine widget_map Version, die die Variante "direkte Implementierung im Widget" realisiert hat. Was auf der Blitzer Modul Seite Voraussetzung ist, ist das Attribut createAllReadings auf 1 zu setzen, damit die Detailreadings erzeugt werden.
Um das zu aktivieren, muss bei der Definition auf FTUI Seite data-blitzer="<device>" definiert werden. <device> muss dabei der Name des Blitzer Devices sein. Wenn kein Attribut data-feature_style gesetzt ist, dann werden "Warndreiecke" angezeigt, bei mouseover poppt ein Fenster mit der Maximalgeschwindigkeit hoch, bei Klick der Name (00display_name). Falls Ihr eine andere Darstellung wollt, muss das über data-feature_style gesetzt werden, dort kann dann alles konfiguriert werden.
Beispiel (Kreis als Darstellung, zusätzlich date und street parameter bei den Popups bzw. Klickinfos):
data-feature_style='{
"popup_properties_click":"display_name create_date",
"popup_properties_move":"vmax street",
"display_styles":{
"display_name":{
"label":"fa-exclamation-circle",
"opacity":"0.8",
"strokeColor":"#FF0000",
"strokeWeight":"2"
}
}
}'
Hmmm - Maschin kaputt.
Ich habe das geänderte Widget an die richtige Stelle getan, in der Blitzerdevice createAllReadings auf 1. (Übrigens in der FHEM-Standard-Darstellung via Webbrowser weitere Kartendarstellung - falls das wegen Attributen von Belang sein sollte.)
Es tut nicht. Ich bekomme weiterhin die OSM-Kartendarstellung mit der Verkehrslagedarstellung. Blitzer (vorhanden, ja) wird nicht auf Deiner Karte angezeigt.
BTW: Rudimente Deines Hydrantenbeispiels/Berlin sind möglicherweise noch als Optionen im Widget-Aufruf ...
Falls Du Dir das mal anschauen möchtest: Anlage.
Kannst Du mal mit der Google Variante testen? Mit OSM habe ich das bisher nicht testen können, weil bei mir da was gerade verstrubbelt ist.
Zitat von: eki am 23 September 2020, 08:01:31
Kannst Du mal mit der Google Variante testen?
Das widerstrebt mir sehr, das möchte ich nicht.
Aber ok: Wenn es dem Weltfrieden dient. Ich bin dabei.
Du müsstest mir aber sehr präzise ein Kochrezept an die Hand geben: Also was ich in welchen Schritten tun muss, um *zusätzlich* noch eine Google-Karte in FTUI zu bekommen.
Idealerweise nutze ich dann cut+paste ...
Du bräuchtest auf jeden fall einen Google API Key und dazu musst Du Dich bei Google registrieren. Dazu möchte ich Dich nicht zwingen und meinen Key möchte ich auch nicht so einfach rausgeben.
Ich schau dann erst mal, ob ich das mit meiner OSM Umgebung hinbekomme. Kann aber dauern, habe gerade anderweitig viel zu tun.
Zitat von: eki am 23 September 2020, 08:59:52
Ich schau dann erst mal, ob ich das mit meiner OSM Umgebung hinbekomme.
Ok, also umgekehrt - kann ich Dir dabei irgendwie helfen?
Neuer Versuch.
Edit: Ups, habe das attachment vergessen. Jetzt mit angehängter neuer Version, die dann hoffentlich auch mit OSM geht. :-[
P.S.: das:
Zitat von: curt am 23 September 2020, 01:47:41
BTW: Rudimente Deines Hydrantenbeispiels/Berlin sind möglicherweise noch als Optionen im Widget-Aufruf ...
Falls Du Dir das mal anschauen möchtest: Anlage.
habe ich nicht so recht kapiert.
Zitat von: eki am 23 September 2020, 12:55:27
Edit: Ups, habe das attachment vergessen. Jetzt mit angehängter neuer Version, die dann hoffentlich auch mit OSM geht. :-[
Tut (in meiner Konstellation) auch nicht.
Was habe ich eigentlich für eigene Testmöglichkeiten - also um Dir zuzuliefern?
Na dann schick mir erst mal Deine Konfiguration (html der Widget Definition, list des Blitzer Devices, Installierte Versionen von FTUI und FHEM, ...)
Zitat von: eki am 22 September 2020, 12:51:50
Hier mal eine widget_map Version, die die Variante "direkte Implementierung im Widget" realisiert hat. Was auf der Blitzer Modul Seite Voraussetzung ist, ist das Attribut createAllReadings auf 1 zu setzen, damit die Detailreadings erzeugt werden.
Um das zu aktivieren, muss bei der Definition auf FTUI Seite data-blitzer="<device>" definiert werden. <device> muss dabei der Name des Blitzer Devices sein. Wenn kein Attribut data-feature_style gesetzt ist, dann werden "Warndreiecke" angezeigt, bei mouseover poppt ein Fenster mit der Maximalgeschwindigkeit hoch, bei Klick der Name (00display_name). Falls Ihr eine andere Darstellung wollt, muss das über data-feature_style gesetzt werden, dort kann dann alles konfiguriert werden.
Beispiel (Kreis als Darstellung, zusätzlich date und street parameter bei den Popups bzw. Klickinfos):
data-feature_style='{
"popup_properties_click":"display_name create_date",
"popup_properties_move":"vmax street",
"display_styles":{
"display_name":{
"label":"fa-exclamation-circle",
"opacity":"0.8",
"strokeColor":"#FF0000",
"strokeWeight":"2"
}
}
}'
Hallo @eki,
habe gerade mal das angepasste Widget mit Google-Maps getestet. Leider kommt weder ein PoP-Up noch eine Beschreibung auf den Blitzern?! Habe ich was falsch gemacht? Hier die FTUI Def:
<div
style="height:100%; width:100%"
data-type="maps"
data-map_type="Google"
data-mapgroup="1"
data-center="xx.xxxxxx,xx.xxxxxx"
data-zoom="10"
data-blitzer="myBlitzer"
data-feature_style='{
"popup_properties_click":"display_name create_date",
"popup_properties_move":"vmax street",
"display_styles":{
"display_name":{
"label":"fa-exclamation-circle",
"opacity":"0.8",
"strokeColor":"#FF0000",
"strokeWeight":"2"
}
}
}'
></div> Wenn ich data-feature_style weglasse, komme ich auf dieselbe Darstellung (ohne PopUps).
Viele Grüße
Andreas
Zitat von: somansch am 24 September 2020, 14:28:08
habe gerade mal das angepasste Widget mit Google-Maps getestet. Leider kommt weder ein PoP-Up noch eine Beschreibung auf den Blitzern?! Habe ich was falsch gemacht? Hier die FTUI Def:
Nein, bei mir entsteht mit der gleichen Definition (nur anderes Zentrum) die angehängte Karte. Hast Du irgendwelche Fehler auf der Browserkonsole?
Jetzt kommt leider gar kein Symbol mehr ???
In FHEM werden zur Zeit 7 Blitzer angezeigt, in FTUI "Error:0"
Anbei das Konsolen-Log und die einfache HTML zum Testen.
PS: Ich nutze Google Chrome ohne nenneswerte Add-Ins.
Zitat von: somansch am 24 September 2020, 16:49:21
Jetzt kommt leider gar kein Symbol mehr ???
In FHEM werden zur Zeit 7 Blitzer angezeigt, in FTUI "Error:0"
Anbei das Konsolen-Log und die einfache HTML zum Testen.
PS: Ich nutze Google Chrome ohne nenneswerte Add-Ins.
Eine Stunde später gibt es 8 Blitzer (eventuell geänderte Positionsdaten?!) und nun wird die Seite ohne Fehler geladen. Die Konfig ist 100% identisch. Leider aber immer noch ohne PopUps...
@eki,
seit zwei Tagen läuft jetzt das Laden der Map sauber durch, jedoch werden nach wie vor keine Infos als Popup angezeigt :-[. Was kann ich noch Testen?
PS: Mir ist noch ein weiteres Problem aufgefallen. Wenn nachts keine Blitzer mehr aktiv sind, also das Reading "count=0", wird trotzdem der letzte Blitzer noch angezeigt, da die Readings "00..." noch existieren.
Du brauchst nichts mehr zu machen, ich kann das Problem mit Deinem Minimalbeispiel nachstellen und bin an der Lösung dran. Hab nur gerade ein paar andere Dinge zu tun, deshalb etwas Geduld.
Hier jetzt mal eine neue Version, die hoffentlich die Probleme beseitigt. Um die Größe der Symbole detailliert festzulegen, muss noch fontSize verwendet werden. Es ist jetzt aber auch hoffentlich alles schon per Default so, dass es ganz OK aussehen sollte.
data-feature_style='{
"popup_properties_click":"display_name create_date",
"popup_properties_move":"vmax street",
"display_styles":{
"display_name":{
"label":"fa-exclamation-circle",
"opacity":"0.8",
"strokeColor":"#FF0000",
"fontSize":"20px",
"strokeWeight":"20"
}
}
}'
Edit: noch mal eine leicht korrigierte Version.
Hi eki
Zitat von: eki am 29 September 2020, 13:35:42
Hier jetzt mal eine neue Version, die hoffentlich die Probleme beseitigt.
Stellst du das noch ins Repository für Update bereit?
Gruß
Sailor
Wenn ich Feedback bekomme dass es soweit funktioniert, auf jeden Fall.
Hier noch mal ein Beispiel, wie die Blitzerdarstellung auch aussehen kann (direkte Darstellung der Maximalgeschwindigkeit als Label auf der Karte). Das Ganze ist mit folgender Definition gemacht und braucht noch das angehängte png file im entsprechenden Directory (normalerweise www/images).
<div
style="height:100%; width:100%"
data-type="maps"
data-map_type="OSMs"
data-mapgroup="1"
data-center="49,9"
data-zoom="10"
data-stroke="#FF0000,30,80"
data-icon="../images/blitzer2.png"
data-blitzer="blitztest"
data-feature_style='{
"popup_properties_click":"display_name create_date",
"popup_properties_move":"vmax street",
"display_styles":{
"vmax.10":{"label":"10","fontSize":"15px"},
"vmax.20":{"label":"20","fontSize":"15px"},
"vmax.30":{"label":"30","fontSize":"15px"},
"vmax.40":{"label":"40","fontSize":"15px"},
"vmax.50":{"label":"50","fontSize":"15px"},
"vmax.60":{"label":"60","fontSize":"15px"},
"vmax.70":{"label":"70","fontSize":"15px"},
"vmax.80":{"label":"80","fontSize":"15px"},
"vmax.90":{"label":"90","fontSize":"15px"},
"vmax.100":{"label":"100","fontSize":"15px"},
"vmax.110":{"label":"110","fontSize":"15px"},
"vmax.120":{"label":"120","fontSize":"15px"},
"vmax.130":{"label":"130","fontSize":"15px"}
}
}'
></div>
Die neue Version mit Blitzerdarstellung ist jetzt auch im ersten Beitrag dieses Threads als neue Version eingefügt. Wiki ist auch entsprechend angepasst.
@eki,
ich war leider zwei Wochen außer Gefecht, habe mir aber jetzt am Wochenende die neue Version geladen und getestet. Es funktioniert bestens mit Google-Maps. Perfekte Arbeit - vielen Dank!
Kannst du dir noch das Problem mit der Anzeige von historischen Blitzern anschauen, wenn das Reading "count=0"? Eventuell eine Abfrage einbauen, dass dann nichts angezeigt wird.
Zitat von: somansch am 26 September 2020, 14:59:30
PS: Mir ist noch ein weiteres Problem aufgefallen. Wenn nachts keine Blitzer mehr aktiv sind, also das Reading "count=0", wird trotzdem der letzte Blitzer noch angezeigt, da die Readings "00..." noch existieren.
In der angehängten Version prüft das Widget neben den Readings auch, falls vorhanden (ist nämlich nur dann wenn man createCountReading auf 1 setzt), auf das "count" reading und lässt nicht mehr Readings als dort angegeben zu (anfangend bei 00...). Wenn also count auf 0 steht, sollte auch nichts mehr angezeigt werden.
In der Version is auch ein neues Feature enthalten. Damit kann man, falls man mehrere Chart Widgets mit unterschiedlichen Mapgroups (data-mapgroup) definiert, diese koppeln. Das bedeutet, dass die Karten beim Ausschnitt und beim Zoom immer synchron laufen, wenn man also in einer Karte zoomt, zoomt die andere auch mit und das Gleiche gilt für das Verschieben. Um dieses Verhalten zu bekommen, muss man den Parameter data-srcollgroup für alle zu koppelnden Karten auf den gleichen Wer setzen. Hier mal eine Beispieldefinition.
<!DOCTYPE html>
<html>
<head>
<title>FHEM-Tablet-UI</title>
<script src="js/fhem-tablet-ui.js" defer></script>
<meta name="gridster_cols" content="20"/>
<meta name="gridster_rows" content="20"/>
<link rel="stylesheet" href="./lib/font-awesome.min.css" />
<link rel="stylesheet" href="./css/fhem-tablet-ui-user.css" />
<meta name="GoogleMapsApiKey" content="xxx">
<meta name="TomTomApiKey" content="xxx">
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="10" data-sizey="20">
<header>Test Map</header>
<div class ="sheet">
<div class="row">
<div class="cell">
<div id="TravelTimesMap"
style="height: calc(100% - 1.6em); width:100%"
data-type="maps"
data-map_type="Google"
data-cfg-other="0"
data-showdetails="false"
data-device="trfAngelaArbeitsweg"
data-traffic="true"
data-mapgroup="1"
data-scrollgroup="1"
data-zoom="10"
data-icon="no-icon"
data-label="fa-car"
data-stroke="#33dd00,20,60">
</div>
<div id="TravelTimesMapHidden"
style="height:100%; width:100%; position: absolute"
data-type="maps"
data-map_type="Google"
data-cfg-other="1"
data-language="en"
data-showdetails="false"
data-device="trfKurtArbeitsweg"
data-traffic="true"
data-mapgroup="1"
data-scrollgroup="1"
data-zoom="10"
data-icon="no-icon"
data-label="fa-car"
data-stroke="#dd3300,20,60">
</div>
<div
style="height:100%; width:100%; position: absolute"
data-type="maps"
data-map_type="Google"
data-mapgroup="1"
data-scrollgroup="1"
data-center="49,9"
data-zoom="10"
data-stroke="#FF0000,30,80"
data-icon="../images/blitzer2.png"
data-blitzer="blitztest:state"
data-feature_style='{
"popup_properties_click":"display_name create_date",
"popup_properties_move":"vmax street",
"display_styles":{
"vmax":{"icon":"no-icon","label":"fa-home","fontSize":"20px"},
"vmax.10":{"label":"10","fontSize":"15px"},
"vmax.20":{"label":"20","fontSize":"15px"},
"vmax.30":{"label":"30","fontSize":"15px"},
"vmax.40":{"label":"40","fontSize":"15px"},
"vmax.50":{"label":"50","fontSize":"15px"},
"vmax.60":{"label":"60","fontSize":"15px"},
"vmax.70":{"label":"70","fontSize":"15px"},
"vmax.80":{"label":"80","fontSize":"15px"},
"vmax.90":{"label":"90","fontSize":"15px"},
"vmax.100":{"label":"100","fontSize":"15px"},
"vmax.110":{"label":"110","fontSize":"15px"},
"vmax.120":{"label":"120","fontSize":"15px"},
"vmax.130":{"label":"130","fontSize":"15px"}
}
}'
></div>
</div>
</div>
</div>
</li>
<li data-row="1" data-col="11" data-sizex="10" data-sizey="20">
<header>Test Map</header>
<div class ="sheet">
<div class="row">
<div class="cell">
<div id="TravelTimesMap"
style="height: calc(100% - 1.6em); width:100%"
data-type="maps"
data-map_type="Google"
data-cfg-other="0"
data-showdetails="false"
data-device="global"
data-traffic="true"
data-mapgroup="2"
data-scrollgroup="1"
data-zoom="10"
data-icon="no-icon"
data-label="fa-car"
data-stroke="#33dd00,20,60">
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
Hallo eki
Zitat von: eki am 13 Oktober 2020, 09:11:50
Hier mal eine Beispieldefinition.
Magst du mir die Definition von
trfAngelaArbeitsweg
trfKurtArbeitsweg
und
blitztest
dazustellen?
Danke!
Gruß
Sailor
trf...Arbeitsweg sind jeweils FHEM devices vom Typ "TRAFFIC" mit entsprechenden start_address und end_address Attributen.
Beispiel (braucht einen Google API Key):
defmod trfTest TRAFFIC <GoogleAPIKEY>
attr trfTest start_address Domplatte Köln
attr trfTest end_address Schokoladenmuseum Köln
blitztest is ein FHEM device vom Typ "Blitzer"
Beispiel:
defmod blitztest Blitzer 3600
attr blitztest home_latitude 50.941278
attr blitztest home_longitude 6.958281
attr blitztest radius 20
attr blitztest createAllReadings 1
attr blitztest createUpdateReading 1
Zitat von: eki am 13 Oktober 2020, 09:11:50
In der angehängten Version prüft das Widget neben den Readings auch, falls vorhanden (ist nämlich nur dann wenn man createCountReading auf 1 setzt), auf das "count" reading und lässt nicht mehr Readings als dort angegeben zu (anfangend bei 00...). Wenn also count auf 0 steht, sollte auch nichts mehr angezeigt werden.
In der Version is auch ein neues Feature enthalten. Damit kann man, falls man mehrere Chart Widgets mit unterschiedlichen Mapgroups (data-mapgroup) definiert, diese koppeln. Das bedeutet, dass die Karten beim Ausschnitt und beim Zoom immer synchron laufen, wenn man also in einer Karte zoomt, zoomt die andere auch mit und das Gleiche gilt für das Verschieben. Um dieses Verhalten zu bekommen, muss man den Parameter data-srcollgroup für alle zu koppelnden Karten auf den gleichen Wer setzen. Hier mal eine Beispieldefinition.
<!DOCTYPE html>
<html>
<head>
<title>FHEM-Tablet-UI</title>
<script src="js/fhem-tablet-ui.js" defer></script>
<meta name="gridster_cols" content="20"/>
<meta name="gridster_rows" content="20"/>
<link rel="stylesheet" href="./lib/font-awesome.min.css" />
<link rel="stylesheet" href="./css/fhem-tablet-ui-user.css" />
<meta name="GoogleMapsApiKey" content="xxx">
<meta name="TomTomApiKey" content="xxx">
</head>
<body>
<div class="gridster">
<ul>
<li data-row="1" data-col="1" data-sizex="10" data-sizey="20">
<header>Test Map</header>
<div class ="sheet">
<div class="row">
<div class="cell">
<div id="TravelTimesMap"
style="height: calc(100% - 1.6em); width:100%"
data-type="maps"
data-map_type="Google"
data-cfg-other="0"
data-showdetails="false"
data-device="trfAngelaArbeitsweg"
data-traffic="true"
data-mapgroup="1"
data-scrollgroup="1"
data-zoom="10"
data-icon="no-icon"
data-label="fa-car"
data-stroke="#33dd00,20,60">
</div>
<div id="TravelTimesMapHidden"
style="height:100%; width:100%; position: absolute"
data-type="maps"
data-map_type="Google"
data-cfg-other="1"
data-language="en"
data-showdetails="false"
data-device="trfKurtArbeitsweg"
data-traffic="true"
data-mapgroup="1"
data-scrollgroup="1"
data-zoom="10"
data-icon="no-icon"
data-label="fa-car"
data-stroke="#dd3300,20,60">
</div>
<div
style="height:100%; width:100%; position: absolute"
data-type="maps"
data-map_type="Google"
data-mapgroup="1"
data-scrollgroup="1"
data-center="49,9"
data-zoom="10"
data-stroke="#FF0000,30,80"
data-icon="../images/blitzer2.png"
data-blitzer="blitztest:state"
data-feature_style='{
"popup_properties_click":"display_name create_date",
"popup_properties_move":"vmax street",
"display_styles":{
"vmax":{"icon":"no-icon","label":"fa-home","fontSize":"20px"},
"vmax.10":{"label":"10","fontSize":"15px"},
"vmax.20":{"label":"20","fontSize":"15px"},
"vmax.30":{"label":"30","fontSize":"15px"},
"vmax.40":{"label":"40","fontSize":"15px"},
"vmax.50":{"label":"50","fontSize":"15px"},
"vmax.60":{"label":"60","fontSize":"15px"},
"vmax.70":{"label":"70","fontSize":"15px"},
"vmax.80":{"label":"80","fontSize":"15px"},
"vmax.90":{"label":"90","fontSize":"15px"},
"vmax.100":{"label":"100","fontSize":"15px"},
"vmax.110":{"label":"110","fontSize":"15px"},
"vmax.120":{"label":"120","fontSize":"15px"},
"vmax.130":{"label":"130","fontSize":"15px"}
}
}'
></div>
</div>
</div>
</div>
</li>
<li data-row="1" data-col="11" data-sizex="10" data-sizey="20">
<header>Test Map</header>
<div class ="sheet">
<div class="row">
<div class="cell">
<div id="TravelTimesMap"
style="height: calc(100% - 1.6em); width:100%"
data-type="maps"
data-map_type="Google"
data-cfg-other="0"
data-showdetails="false"
data-device="global"
data-traffic="true"
data-mapgroup="2"
data-scrollgroup="1"
data-zoom="10"
data-icon="no-icon"
data-label="fa-car"
data-stroke="#33dd00,20,60">
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
</body>
</html>
@eki,
vielen Dank für die neue Version. Es werden jetzt ausschliesslich Blitzer angezeigt, wenn das Reading count ungleich "0" :)
Hallo Eki,
die Blitzer-Anzeige funktioniert einwandfrei :). Große Klasse.
Zusätzlich habe ich noch die Heimatadresse über ein geojson-file definiert und via "data-feature_style" ein Symbol zugeordnet:
"name.Home_Point":{"label":"fa-home","strokeColor":"black"}
Als Ergebnis wird dann in der Karte an der richtigen Stelle das fa-home eingezeichnet, dahinter aber auch das über data-icon definierte Blitzer-Symbol mit dem roten Kreis. Letzteres gehört hier von der Sache her nicht hin.
Mache ich etwas falsch?
Hallo eki,
dank deiner Definition konnte ich die Blitzer auf der Map abbilden.
Leider ohne das Bild Blitzer2.png
<li data-row="1" data-col="1" data-sizex="3" data-sizey="3" class="semitransparent">
<header class = "semitransparentheader">Traffic Situation</header>
<div class ="sheet">
<div class="row">
<div class="cell">
<div
style="height:100%; width:100%;"
data-type="maps"
data-map_type="OSM"
data-mapgroup="1"
data-scrollgroup="1"
data-center="53.569531,9.619997"
data-zoom="10"
data-stroke="#FF0000,30,80"
data-icon="../images/Blitzer2.png"
data-blitzer="OS_SpeedCam:state"
data-feature_style='{
"popup_properties_click":"display_name create_date",
"popup_properties_move":"vmax street",
"display_styles":{
"vmax":{"icon":"no-icon","label":"fa-home","fontSize":"20px"},
"vmax.10":{"label":"10","fontSize":"15px"},
"vmax.20":{"label":"20","fontSize":"15px"},
"vmax.30":{"label":"30","fontSize":"15px"},
"vmax.40":{"label":"40","fontSize":"15px"},
"vmax.50":{"label":"50","fontSize":"15px"},
"vmax.60":{"label":"60","fontSize":"15px"},
"vmax.70":{"label":"70","fontSize":"15px"},
"vmax.80":{"label":"80","fontSize":"15px"},
"vmax.90":{"label":"90","fontSize":"15px"},
"vmax.100":{"label":"100","fontSize":"15px"},
"vmax.110":{"label":"110","fontSize":"15px"},
"vmax.120":{"label":"120","fontSize":"15px"},
"vmax.130":{"label":"130","fontSize":"15px"}
}
}'
></div>
</div>
</div>
</div>
</li>
Das Bild befindet sich in
pi@HomeServer:/opt/fhem/www/tablet/images $ ls -l
total 12576
-rwxrwxrwx 1 fhem dialout 2478881 Sep 21 2018 Background-0.png
-rwxrwxrwx 1 fhem dialout 1998613 Sep 21 2018 Background-1.png
-rwxrwxrwx 1 fhem dialout 1505728 Sep 21 2018 Background-2.png
-rwxrwxrwx 1 fhem dialout 1797516 Sep 21 2018 Background-3.png
-rwxrwxrwx 1 fhem dialout 1673802 Sep 21 2018 Background-4.png
-rwxrwxrwx 1 fhem dialout 644889 Sep 21 2018 Background-5.png
-rwxrwxrwx 1 fhem dialout 2541812 Sep 21 2018 Background-6.png
-rwxrwxrwx 1 fhem dialout 64483 Oct 25 13:45 Blitzer2.png
-rwxrwxrwx 1 fhem dialout 206 Sep 4 2018 empty.svg
-rwxrwxrwx 1 fhem dialout 69505 Nov 2 2018 icoSmokeDetectorResetArmed.gif
-rwxrwxrwx 1 fhem dialout 72129 Nov 2 2018 icoSmokeDetectorResetStdby.gif
-rwxrwxrwx 1 fhem dialout 2517 Sep 4 2018 loading.svg
-rwxrwxrwx 1 fhem dialout 256 Sep 4 2018 stop.svg
-rwxrwxrwx 1 fhem dialout 1016 Sep 4 2018 unknown.svg
Das ist bestimmt ganz simpel zu fixen aber ich sehe den Wald garantiert mal wieder vor lauter Bäumen nicht...
Gruß
Sailor
Versuche es mal eine Ebene höher:
.../www/images/...
Habe ich auch erst falsch gemacht. ;)
Zitat von: Ulm32b am 25 Oktober 2020, 19:00:17
Versuche es mal eine Ebene höher:
.../www/images/...
Datei eine Ebene hoeher kopiert und
../www/images/Blitzer2.png
verwendet und es funzt!
Danke!
Gruß
Sailor
Hallo zusammen,
ich habe meine Karten von GoogleMaps auf OpenStreetMap gewechselt.
Funktioniert auch soweit...
...nur nicht mit data-traffic="true" :(
Habe mir einen API-Key besorgt und im HTML eingefügt. Außerdem noch das Plugin in das /lib Verzeichnis kopiert.
Erhalte aber sobald ich data-traffic="true" setze den Fehler:
widget_maps.js:338
RangeError: Maximum call stack size exceeded
Hat da jemand eine Idee? ???
Poste mal Deine Definition (HTML Code)
Hier das HTML-Coding:
<li data-row="3" data-col="1" data-sizey="2" data-sizex="2">
<header>VERKEHRSLAGE</header>
<div class="sheet">
<div class="row">
<div class="cell"
data-device="BMW_Aktuelle_Position_Dummy"
data-type="maps"
data-longitude="longitude"
data-latitude="latitude"
data-map_type="OSM"
data-traffic="true"
data-zoom="8"
data-showdetails="false"
data-icon="dummy.png"
data-label="fa-car">
</div>
</div>
</div>
</li>
Sobald ich data-traffic einfüge kommt der Fehler. Ohne data-traffic funktioniert es :(
Ich habe jetzt noch mal ein bisschen geforscht. Der Fehler deutet darauf hin, dass irgendetwas mit der Verbindung zu TomTom nicht klappt. Der Fehler sollte mit der neuesten Version (siehe ersten Beitrag hier im Thread) eigentlich nicht mehr auftreten. Allerdings wirst Du wahrscheinlich immer noch keine Traffic Informationen sehen, fürchte ich.
Um TomTom und OSM zu verwenden brauchst Du 2 API Keys 1. OSMMapsApiKey, 2. TomTomApiKey (siehe Beispiel unten)
<meta name="OSMMapsApiKey" content="xxx">
<meta name="TomTomApiKey" content="xxx">
Hallo eki,
funktioniert jetzt!
Hab die aktuelle Version runtergeladen und dann läuft es auch mit traffic (und ohne zweiten API-Key von OSM).
Danke! :)
Ein herzerfrischendes "Moin" vom achtern Diek vorweg
Ich hätte Euch gerne mal bei meiner Machbarkeitsstudie mit einbezogen und nach Eurer Meinung gefragt:
Kurzbeschreibung der Anforderung:
Ich möchte auf einer Karte mehrere sich täglich verändernde Symbole auf Basis von Readings diverser Devices anzeigen.
Detailierte Beschreibung der Ausgangssituation:
Ich habe 2 Devices
a) "OS_PharmacyEmergency" (TYPE: HTTPMOD) welche mir die gegenwaertige Notfallapotheke in meinem Umfeld anzeigt.
b) "OS_OS_SpeedCam" (TYPE: Blitzer) welcher mir die augenblicklichen Blitzer anzeigt.
c) "Bewohner1" (Type: ROOMMATE) welcher mir die Position von Bewohner1 anzeigt.
d) "Bewohner2" (Type: ROOMMATE) welcher mir die Position von Bewohner2 anzeigt.
...
Jedes dieser Devices hat eine Latitude und Longitude und Name, (ggf. Adresse, Telefonnummer, Öffnungszeiten) der jeweiligen anzuzeigenden Punkt auf der Karte in unterschiedlichen Reading - Namen.
Jedes der Punkte soll
Idee:
Ein "at" generieren, welches eine Subfunktion in der 99_myUtils alle x - Minuten aufruft.
Die Subfunktion in der 99_myUtils liest sich die jeweiligen Readings der Devices aus und wandelt sie in ein x.geojson - Format um:
{
"type": "FeatureCollection",
"timestamp": "2020-12-29T20:00:00Z",
"features": [
{
"type": "Feature",
"properties": {
"addr:city": "Stade",
"addr:country": "DE",
"addr:housenumber": "297",
"addr:postcode": "21683",
"addr:street": "Obstmarschenweg",
"building": "yes",
"name": "Fasan Apotheke",
"type": "point",
"website": "http://www.apothekebuetzfleth.de/",
"phone": "+49 4146 5551",
"emergency": "pharmacy"
},
"geometry": {
"type": "Point",
"coordinates": [
9.4790613,
53.65013
]
}
},
{
"type": "Feature",
"properties": {
"addr:city": "Stade",
"addr:country": "DE",
"addr:housenumber": "23",
"addr:postcode": "21683",
"addr:street": "Obstmarschenweg",
"building": "no",
"type": "point",
"traffic": "speedcam",
"speedcam:vmax" : "30",
"speedcam:type" : "mobile",
"speedcam:direction" : "Goetzdorf"
},
"geometry": {
"type": "Point",
"coordinates": [
9.4861252,
53.6240689
]
}
}
]
}
Fragen die sich mir bisher aufwerfen:
1) Wo bekomme ich eine ausführliche Beschreibung der einzelnen geojson Parameter her?
2) Was bedeutet "id": "relation/938988" und wo bekommt man die Nummer her bzw. braucht man die überhaupt?
3) Muss man das geojson - Format zwingend als Datei hinterlegen, oder kann ich das auch als Verweis auf ein Reading ins widget_maps einbeziehen?
4) Wie bekomme ich für die Speedcams die Zahl in den Blitzer2.png und fuer die Bewohner und die Apotheke wird das ignoriert wobei für alle nach wie vor die PopUps und Flyover erscheinen sollen.
Nachtrag 29.12.2020 22:55
5) Wie schaffe ich es die "popup_properties_click":"name addr.street addr.housenumber addr.postcode addr.city speedcam.vmax speedcam.direction", nicht alphabetisch sortiert anzeigen zu lassen sondern in der Reihenfolge wie sie hier angegeben sind?
6) Wie kann ich "addr.street" durch "Strasse" ersetzen?
7) Wie kann ich innerhalb ein individuelles icon (speedcam) verwenden, welches ich bereits erfolgreich eingebunden habe und in den anderen widgets als data-icon verwende?
"display_styles":{
"emergency.pharmacy":{"label":"mi-local_pharmacy","strokeColor":"green"},
"traffic.speedcam":{"label":"speedcam","strokeColor":"red"}
}
Danke für Eure Stupser
Umsetzung:
Widget:
<div id = "TraffictMapBig"
style = "height:100%; width:100%;"
data-type = "maps"
data-map_type = "OSM"
data-showdetails = "true"
data-mapgroup = "1"
data-language = "en"
data-scrollgroup = "1"
data-traffic = "true"
data-center = "53.569531,9.619997"
data-zoom = "10"
data-stroke = "#FF0000,30,80"
data-geojson = "geojson/features.geojson"
data-feature_style = '{ "popup_properties_click":"name",
"popup_properties_move":"name",
"display_styles":{
"emergency.pharmacy":{"label":"mi-local_pharmacy","strokeColor":"green"},
"traffic.speedcam":{"label":"fa-camera","strokeColor":"red"}
}
}'>
</div>
Ausgabe ist zur Zeit leider nur ein Symbol auf der Karte - aber immerhin schon mal was...
Der Fehler liegt somit wohl im fehlenden wi-Symbol.
Gruß
Sailor
Zu 1): https://tools.ietf.org/html/rfc7946 (https://tools.ietf.org/html/rfc7946)
Zu 2): id ist meines Erachtens nicht notwendig
Zu 3): ist bisher nicht möglich, lies sich aber einbauen, tue ich mal auf die todo Liste
Zu 4): Das geht über die display-styles (siehe Wiki), eventuell habe ich aber auch die Frage nicht verstanden.
Hallo eki
Zitat von: eki am 29 Dezember 2020, 21:40:05
Zu 1): https://tools.ietf.org/html/rfc7946 (https://tools.ietf.org/html/rfc7946)
Zu 2): id ist meines Erachtens nicht notwendig
Zu 3): ist bisher nicht möglich, lies sich aber einbauen, tue ich mal auf die todo Liste
Zu 4): Das geht über die display-styles (siehe Wiki), eventuell habe ich aber auch die Frage nicht verstanden.
Danke für die Starthilfe!
Ich habe schon mal ein bisschen herumexperimentiert. Siehe meine Aenderung oben
Gruß
Sailor
Ein herzerfrischendes Moin vom achtern Diek
So weit bin ich schon mal gekommen, dass ich die Symbole alle anzeigen kann.
Ich musste aber feststellen, dass die Symbole, welche in der Map angezeigt werden können limitiert sind auf die in der Datei widget_maps.js in den Zeilen 263 bis 267 aufgeführten.
Wenn ich in der Lage wäre an dieser Stelle eigene Symbole wie speedcam010.png bis speedcam130.png aufzuführen, könnte ich die Blitzer mittels "display_styles":{ richtig darstellen.
Hat Jemand eine Idee?
Gruß
Sailor
Was passiert, wenn Du statt "label" "icon":"<icon-path>" verwendest (<icon-path> natürlich entsprechend Deinem Setup gesetzt)?
Hallo eki
Zitat von: eki am 30 Dezember 2020, 16:43:44
Was passiert, wenn Du statt "label" "icon":"<icon-path>" verwendest (<icon-path> natürlich entsprechend Deinem Setup gesetzt)?
Dieser Code:
data-feature_style = '{ "popup_properties_click":"name addr.street addr.housenumber addr.postcode addr.city speedcam.vmax speedcam.direction",
"popup_properties_move":"name",
"display_styles":{
"emergency.pharmacy":{"label":"fa-cube","strokeColor":"green"},
"vmax.30" :{"label":"fa-camera"}
}
}'
ergibt Picture1.png
Dieser Code:
data-feature_style = '{ "popup_properties_click":"name addr.street addr.housenumber addr.postcode addr.city speedcam.vmax speedcam.direction",
"popup_properties_move":"name",
"display_styles":{
"emergency.pharmacy":{"label":"fa-cube","strokeColor":"green"},
"vmax.30" :{"icon":"images/Blitzer2.png"}
}
}'
führt zu Fehlermeldung in Picture2.png
Dieser Code:
data-feature_style = '{ "popup_properties_click":"name addr.street addr.housenumber addr.postcode addr.city speedcam.vmax speedcam.direction",
"popup_properties_move":"name",
"display_styles":{
"emergency.pharmacy":{"label":"fa-cube","strokeColor":"green"},
"vmax.30" :{"icon":"images/Blitzer2.png", "width":"50, "height":"50"}
}
}'
fuehrt zu Picture3.png
Scheinbar ist "icon" noch nicht richtig in der Widget_maps.js Zeile 1555 umgesetzt. ???
Gruß
Sailor
Das werde ich mir die Tage noch mal in Ruhe anschauen lässt sich aber sicher hinkriegen. Jetzt ist erst mal Silvester, Guten Rutsch!
Hallo eki
Zitat von: eki am 31 Dezember 2020, 15:27:12
Das werde ich mir die Tage noch mal in Ruhe anschauen lässt sich aber sicher hinkriegen. Jetzt ist erst mal Silvester, Guten Rutsch!
Dir auch einen guten Rutsch!
Und Danke!
Gruß
Sailor
Ein herzerfrischendes Moin vom achtern Diek
So, ich habe meine "99_myUtils.pm" schon mal so weit, das es mit eine GEOJSON - Datei generiert auf Basis von Readings der einzelnen Module:
global: Gobale latitude, logitude fuer die Home-Location: https://wiki.fhem.de/wiki/Global
Blitzer - Die berühmten Blitzer: https://wiki.fhem.de/wiki/Stra%C3%9Fenverkehr_Blitzer
HTTPMOD - Die naechste Notfallapotheke, welche gerade Dienst hat: https://forum.fhem.de/index.php?topic=87234.0
geofancy - Die Position der Hausbewohner: https://wiki.fhem.de/wiki/GEOFANCY
Am Anfang der Sub muss man den Ort der GEOJSON - Datei angeben und in den $Activate... die entsprechenden Bloecke aktivieren.
###START########## GEO-JSON - Generator #########################################################################START###
sub GeoJsonGenerator() {
### Define filepath for GEOJSON file
my $GeojsonFilePath = "/opt/fhem/www/tablet/geojson/features.geojson";
Log 2, "GeoJsonGenerator : GEO JSON Generator initiated";
### Define which GEOJSON features shall be activated
my $ActivateHome = 1;
my $ActivateGeoFancy = 1;
my $ActivatePharmacy = 1;
my $ActivateSpeedcam = 1;
### Generate Timestamp
my ($sec,$min,$hour,$mday,$mon,$year,$wday,$yday,$isdst) = localtime(time);
my $TimeStamp = $year+1900 . "-" . $mon . "-" . $yday . "T" . $hour . ":" . $min . ":" . $sec;
Log 2, "GeoJsonGenerator : TimeStamp : " . $TimeStamp;
### GEOJSON string header
my $GeoJsonString = "
{
\"type\": \"FeatureCollection\",
\"generator\": \"fhem\",
\"copyright\": \"The data included in this document is generated by www.fhem.de. The data is made available under GPL.\",
\"timestamp\": \"" . $TimeStamp . "Z\",
\"features\": [
";
### START Generate GEOJSON entry for own position based on global attribute ######
### Global Attribute "longitude" and "latitude" must be set
if ($ActivateHome == 1) {
my $HomeLocationName = "Home";
my $Longitude = AttrVal("global", "longitude", 0);
my $Latitude = AttrVal("global", "latitude", 0);
if ($Longitude != 0) {
$GeoJsonString .= "
{
\"type\": \"Feature\",
\"properties\": {
\"name\": \"" . $HomeLocationName . "\",
\"type\": \"point\",
\"personal\": \"home\"
},
\"geometry\": {
\"type\": \"Point\",
\"coordinates\": [
" . $Longitude . ",
" . $Latitude . "
]
}
},";
Log 2, "GeoJsonGenerator : Home Location added : " . $HomeLocationName;
}
}
### END Generate GEOJSON entry for own position based on global attribute ######
### START Generate GEOJSON entry for emergency pharmacy ##########################
### https://forum.fhem.de/index.php?topic=87234.0
if ($ActivatePharmacy == 1) {
### Define fhem Device Name which includes the Readings and the Readings below ###
my $DeviceName = "OS_PharmacyEmergency";
my $ReadingNameLongitude = "Längengrad";
my $ReadingNameLatitude = "Breitengrad";
my $ReadingNamePostcode = "Plz";
my $ReadingNameAponame = "Name";
my $ReadingNameStreet = "Strasse";
my $ReadingNamePhone = "Telefon";
my $ReadingNameStart = "Beginn";
my $ReadingNameCity = "Ort";
my $ReadingNameEnd = "Ende";
my $Longitude = ReadingsVal($DeviceName, $ReadingNameLongitude, 0);
my $Latitude = ReadingsVal($DeviceName, $ReadingNameLatitude, 0);
my $Postcode = ReadingsVal($DeviceName, $ReadingNamePostcode, 0);
my $Aponame = ReadingsVal($DeviceName, $ReadingNameAponame, 0);
my $Street = ReadingsVal($DeviceName, $ReadingNameStreet, 0);
my $Phone = ReadingsVal($DeviceName, $ReadingNamePhone, 0);
my $Start = ReadingsVal($DeviceName, $ReadingNameStart, 0);
my $City = ReadingsVal($DeviceName, $ReadingNameCity, 0);
my $End = ReadingsVal($DeviceName, $ReadingNameEnd, 0);
my $Dauer = $Start . "-" . $End;
if ($Longitude != 0) {
$GeoJsonString .= "
{
\"type\": \"Feature\",
\"properties\": {
\"name\": \"" . $Aponame . "\",
\"addr:city\": \"". $City . "\",
\"addr:street\": \"" . $Street . "\",
\"addr:postcode\": \"" . $Postcode . "\",
\"addr:phone\": \"" . $Phone . "\",
\"timeframe\": \"" . $Dauer . "\",
\"type\": \"point\",
\"emergency\": \"pharmacy\"
},
\"geometry\": {
\"type\": \"Point\",
\"coordinates\": [
" . $Longitude . ",
" . $Latitude . "
]
}
},";
Log 2, "GeoJsonGenerator : Pharmacy added : " . $Aponame;
}
}
### END Generate GEOJSON entry for emergency pharmacy ##########################
### START Generate GEOJSON entry for speedcams #################################
### Based on https://wiki.fhem.de/wiki/Stra%C3%9Fenverkehr_Blitzer
if ($ActivateSpeedcam == 1) {
### Define fhem Device Name and maximum number of indicated speedcams ###
my $DeviceName = "OS_SpeedCam";
my $MaxNumberSpeedcams = AttrVal($DeviceName, "MaxSpeedCameras", 0);
### Define the postfix of Readingnames (without the leading 2 numbers ###
my $ReadingNameLongitude = "lng";
my $ReadingNameLatitude = "lat";
my $ReadingNameVmax = "vmax";
my $ReadingNameAddress = "display_name";
### Read all SpeedCam Readings
for(my $i = 0; $i <= $MaxNumberSpeedcams; $i++) {
my $ReadingNamePrefix = sprintf("%02d", $i);
my $ReadingNameLongitudeComplete = $ReadingNamePrefix . $ReadingNameLongitude;
my $ReadingNameLatitudeComplete = $ReadingNamePrefix . $ReadingNameLatitude;
my $ReadingNameVmaxComplete = $ReadingNamePrefix . $ReadingNameVmax;
my $ReadingNameAddressComplete = $ReadingNamePrefix . $ReadingNameAddress;
my $Longitude = ReadingsVal($DeviceName, $ReadingNameLongitudeComplete, 0);
my $Latitude = ReadingsVal($DeviceName, $ReadingNameLatitudeComplete, 0);
my $Vmax = ReadingsVal($DeviceName, $ReadingNameVmaxComplete, 0);
my $AddressComplete = ReadingsVal($DeviceName, $ReadingNameAddressComplete, 0);
if ($Longitude != 0) {
$GeoJsonString .= "
{
\"type\": \"Feature\",
\"properties\": {
\"name\": \"" . $AddressComplete . "\",
\"vmax\": \"" . $Vmax . "\",
\"type\": \"point\",
\"traffic\": \"speedcam\"
},
\"geometry\": {
\"type\": \"Point\",
\"coordinates\": [
" . $Longitude . ",
" . $Latitude . "
]
}
},";
Log 2, "GeoJsonGenerator : Speedcam added : " . $Vmax . "-" . $AddressComplete;
}
}
}
### END Generate GEOJSON entry for speedcams #################################
### START Generate GEOJSON entry for Geofancy ################################
### Based on https://wiki.fhem.de/wiki/GEOFANCY
if ($ActivateGeoFancy == 1) {
### Define fhem Device Name and maximum number of indicated speedcams ###
my $DeviceName = "geofancy";
my @RoommateNameList = ("Papa", "Mama", "Tochter", "Sohn");
### Define the prefix of Readingnames
my $ReadingNameLongitude = "currLocLong_";
my $ReadingNameLatitude = "currLocLat_";
my $ReadingNameLocation = "currLoc_";
my $ReadingNameLastupd = "currPosTime_";
my $ReadingNameMotion = "currPosMotion_";
my $ReadingNameTarrival = "lastPosArr_";
foreach my $RommmateName (@RoommateNameList) {
### Obtain geofency values from dedicated user readings
my $Longitude = ReadingsVal($DeviceName, $ReadingNameLongitude . $RommmateName, 0);
my $Latitude = ReadingsVal($DeviceName, $ReadingNameLatitude . $RommmateName, 0);
my $Location = ReadingsVal($DeviceName, $ReadingNameLocation . $RommmateName, 0);
my $Lastupd = ReadingsVal($DeviceName, $ReadingNameLastupd . $RommmateName, 0);
my $Motion = ReadingsVal($DeviceName, $ReadingNameMotion . $RommmateName, 0);
my $Tarrival = ReadingsVal($DeviceName, $ReadingNameTarrival . $RommmateName, 0);
### If the coordinates (longitude) exist
if ($Longitude != 0) {
$GeoJsonString .= "
{
\"type\": \"Feature\",
\"properties\": {
\"name\": \"" . $RommmateName . "\",
\"location\": \"" . $Location . "\",
\"lastupdate\": \"" . $Lastupd . "\",
\"motion\": \"" . $Motion . "\",
\"arrival\": \"" . $Tarrival . "\",
\"type\": \"point\",
\"personal\": \"" . $RommmateName . "\"
},
\"geometry\": {
\"type\": \"Point\",
\"coordinates\": [
" . $Longitude . ",
" . $Latitude . "
]
}
},";
Log 2, "GeoJsonGenerator : Personal location added : " . $RommmateName;
}
}
}
### END Generate GEOJSON entry for Geofancy #################################
### Delete last "," seperator
$GeoJsonString =~ s/,+$//;
### Close up GEOJSON String
$GeoJsonString .= "
]
}";
Log 2, "GeoJsonGenerator : GeoJsonString : " . $GeoJsonString;
### Write GeoJson String into file
open(my $FH, ">" . $GeojsonFilePath) or die $!;
print $FH $GeoJsonString;
close($FH);
}
Die entsprechende Widget_Maps - Aufruf sieht dann so aus:
<div id = "TraffictMapBig"
style = "height:100%; width:100%;"
class = "fullsize"
data-type = "maps"
data-map_type = "OSM"
data-showdetails = "true"
data-mapgroup = "1"
data-language = "en"
data-scrollgroup = "1"
data-traffic = "true"
data-zoom = "10"
data-stroke = "#FF0000,30,80"
data-geojson = "geojson/features.geojson"
data-feature_style = '{ "popup_properties_click":"name street city vmax",
"popup_properties_move":"name",
"display_styles":{
"personal.home":{"label":"fa-home","strokeColor":"black"},
"personal.Papa":{"label":"fa-user","strokeColor":"yellow"},
"personal.Mama":{"label":"fa-user","strokeColor":"red"},
"personal.Tochter":{"label":"fa-user","strokeColor":"green"},
"personal.Sohn":{"label":"fa-user","strokeColor":"blue"},
"emergency.pharmacy":{"label":"fa-cube","strokeColor":"green"},
"vmax.":{"label":"fa-camera","strokeColor":"red"},
"vmax.10":{"label":"fa-camera","strokeColor":"red"},
"vmax.20":{"label":"fa-camera","strokeColor":"red"},
"vmax.30":{"label":"fa-camera","strokeColor":"red"},
"vmax.30":{"label":"fa-camera","strokeColor":"red"},
"vmax.40":{"label":"fa-camera","strokeColor":"red"},
"vmax.50":{"label":"fa-camera","strokeColor":"red"},
"vmax.60":{"label":"fa-camera","strokeColor":"red"},
"vmax.70":{"label":"fa-camera","strokeColor":"red"},
"vmax.80":{"label":"fa-camera","strokeColor":"red"},
"vmax.90":{"label":"fa-camera","strokeColor":"red"},
"vmax.100":{"label":"fa-camera","strokeColor":"red"},
"vmax.110":{"label":"fa-camera","strokeColor":"red"},
"vmax.120":{"label":"fa-camera","strokeColor":"red"}
}
}'>
</div>
Offene Probleme:
a) Es lassen sich keine png-Bilder als icon im Widget definieren - eki ist aber dran
b) Es laesst sich noch kein Zeitrahmen definieren, nach wieviel Sekunden das Maps_Widget seine GEOJSON Datei automatisch neu einliest - eki ist hoffentlich auch dran.
Viel Spass damit!
Gruss
Sailor
ZitatOffene Probleme:
a) Es lassen sich keine png-Bilder als icon im Widget definieren - eki ist aber dran
b) Es laesst sich noch kein Zeitrahmen definieren, nach wieviel Sekunden das Maps_Widget seine GEOJSON Datei automatisch neu einliest - eki ist hoffentlich auch dran.
Zu a): Ich habe eine neue Version gemacht und angehängt. Bitte mal testen.
Zu b): Bisher wurde die Karte neu gezeichnet, wenn beim in der Karte angegebenen Device (data-device setzen), ein Reading triggerRedraw einen event bekommt. Ich habe das jetzt mal in der neuen Version so gemacht, das das Neumalen stattfindet, wenn das INTERNAL "STATE" (oder das mit data-get gesetzte Reading) einen Event bekommt. Ein Zeitgesteuertes Neuladen passiert bisher nicht, weil ich der Meinung bin, dass das immer aus FHEM heraus passieren sollte (z.B. mit Notify). Falls es unbedingt sein muss, könnte ich das aber auch noch einbauen.
Hallo eki
Zitat von: eki am 07 Januar 2021, 14:19:32
Zu a): Ich habe eine neue Version gemacht und angehängt. Bitte mal testen.
Zu b): Bisher wurde die Karte neu gezeichnet, wenn beim in der Karte angegebenen Device (data-device setzen), ein Reading triggerRedraw einen event bekommt. Ich habe das jetzt mal in der neuen Version so gemacht, das das Neumalen stattfindet, wenn das INTERNAL "STATE" (oder das mit data-get gesetzte Reading) einen Event bekommt. Ein Zeitgesteuertes Neuladen passiert bisher nicht, weil ich der Meinung bin, dass das immer aus FHEM heraus passieren sollte (z.B. mit Notify). Falls es unbedingt sein muss, könnte ich das aber auch noch einbauen.
b) Ich gebe dir Recht, das kann ich besser lösen.
a) Habe folgendes versucht
Die Bilddatei liegt in /opt/fhem/www/tablet/images/Blitzer2.png
Rechte: -rwxrwxrwx
Die
"display_styles":{ sahen wie folgt aus:
1.
"vmax.": {"icon":"images/Blitzer2.png"},
"vmax.10": {"icon":"images/Blitzer2.png"},
"vmax.20": {"icon":"images/Blitzer2.png"},
"vmax.30": {"icon":"images/Blitzer2.png"},
"vmax.30": {"icon":"images/Blitzer2.png"},
"vmax.40": {"icon":"images/Blitzer2.png"},
"vmax.50": {"icon":"images/Blitzer2.png"},
"vmax.60": {"icon":"images/Blitzer2.png"},
"vmax.70": {"icon":"images/Blitzer2.png"},
"vmax.80": {"icon":"images/Blitzer2.png"},
"vmax.90": {"icon":"images/Blitzer2.png"},
"vmax.100":{"icon":"images/Blitzer2.png"},
"vmax.110":{"icon":"images/Blitzer2.png"},
"vmax.120":{"icon":"images/Blitzer2.png"}
2.
"vmax.": {"icon":"./images/Blitzer2.png"},
"vmax.10": {"icon":"./images/Blitzer2.png"},
"vmax.20": {"icon":"./images/Blitzer2.png"},
"vmax.30": {"icon":"./images/Blitzer2.png"},
"vmax.30": {"icon":"./images/Blitzer2.png"},
"vmax.40": {"icon":"./images/Blitzer2.png"},
"vmax.50": {"icon":"./images/Blitzer2.png"},
"vmax.60": {"icon":"./images/Blitzer2.png"},
"vmax.70": {"icon":"./images/Blitzer2.png"},
"vmax.80": {"icon":"./images/Blitzer2.png"},
"vmax.90": {"icon":"./images/Blitzer2.png"},
"vmax.100":{"icon":"./images/Blitzer2.png"},
"vmax.110":{"icon":"./images/Blitzer2.png"},
"vmax.120":{"icon":"./images/Blitzer2.png"}
"vmax.": {"icon":"../images/Blitzer2.png"},
"vmax.10": {"icon":"../images/Blitzer2.png"},
"vmax.20": {"icon":"../images/Blitzer2.png"},
"vmax.30": {"icon":"../images/Blitzer2.png"},
"vmax.30": {"icon":"../images/Blitzer2.png"},
"vmax.40": {"icon":"../images/Blitzer2.png"},
"vmax.50": {"icon":"../images/Blitzer2.png"},
"vmax.60": {"icon":"../images/Blitzer2.png"},
"vmax.70": {"icon":"../images/Blitzer2.png"},
"vmax.80": {"icon":"../images/Blitzer2.png"},
"vmax.90": {"icon":"../images/Blitzer2.png"},
"vmax.100":{"icon":"../images/Blitzer2.png"},
"vmax.110":{"icon":"../images/Blitzer2.png"},
"vmax.120":{"icon":"../images/Blitzer2.png"}
Ergebnis: Bei allen drei keine Anzeige der Blitzer2 - Kamera. :'(
Gruss
Sailor
In Deinem Fall müssten eigentlich Die Varianten 1 und 2 passen. Kannst Du mal die gesamte Definition des Map Widgets schicken und am besten auch noch die GEOJSON Datei oder ein Listing des Blitzer Devices und das Bild.
Zitat von: eki am 07 Januar 2021, 21:42:31
In Deinem Fall müssten eigentlich Die Varianten 1 und 2 passen. Kannst Du mal die gesamte Definition des Map Widgets schicken und am besten auch noch die GEOJSON Datei oder ein Listing des Blitzer Devices und das Bild.
Die Definition:
<div id = "TraffictMapBig"
style = "height:100%; width:100%;"
class = "fullsize"
data-type = "maps"
data-map_type = "OSM"
data-showdetails = "true"
data-mapgroup = "1"
data-language = "en"
data-scrollgroup = "1"
data-traffic = "true"
data-center = "53.569531,9.619997"
data-zoom = "10"
data-stroke = "#FF0000,30,80"
data-geojson = "geojson/features.geojson"
data-feature_style = '{ "popup_properties_click":"name street city vmax",
"popup_properties_move":"name",
"display_styles":{
"personal.home":{"label":"fa-home","strokeColor":"black"},
"personal.Papa":{"label":"fa-user","strokeColor":"yellow"},
"personal.Mama":{"label":"fa-user","strokeColor":"red"},
"personal.Tochter":{"label":"fa-user","strokeColor":"green"},
"personal.Sohn":{"label":"fa-user","strokeColor":"blue"},
"emergency.pharmacy":{"label":"fa-cube","strokeColor":"green"},
"vmax.":{"icon":"./images/Blitzer2.png"},
"vmax.10":{"icon":"./images/Blitzer2.png"},
"vmax.20":{"icon":"./images/Blitzer2.png"},
"vmax.30":{"icon":"./images/Blitzer2.png"},
"vmax.30":{"icon":"./images/Blitzer2.png"},
"vmax.40":{"icon":"./images/Blitzer2.png"},
"vmax.50":{"icon":"./images/Blitzer2.png"},
"vmax.60":{"icon":"./images/Blitzer2.png"},
"vmax.70":{"icon":"./images/Blitzer2.png"},
"vmax.80":{"icon":"./images/Blitzer2.png"},
"vmax.90":{"icon":"./images/Blitzer2.png"},
"vmax.100":{"icon":"./images/Blitzer2.png"},
"vmax.110":{"icon":"./images/Blitzer2.png"},
"vmax.120":{"icon":"./images/Blitzer2.png"}
}
}'>
</div>
GEOJSON und Datei im Anhang
Gruss
Sailor
Hallo eki
Zitat von: eki am 07 Januar 2021, 14:19:32
Zu b): Bisher wurde die Karte neu gezeichnet, wenn beim in der Karte angegebenen Device (data-device setzen), ein Reading triggerRedraw einen event bekommt. Ich habe das jetzt mal in der neuen Version so gemacht, das das Neumalen stattfindet, wenn das INTERNAL "STATE" (oder das mit data-get gesetzte Reading) einen Event bekommt.
Ich habe mir ein dummy gebaut und das map widget (data-device) macht scheinbar auch ein Reload sobald der dummy geändert wird.
Allerdings wird die neue GEOJSON - Datei dabei nicht neu eingeladen. Dies geschieht erst nach einem F5 im Browser...
Gruß
Sailor
Zu den fehlenden Bildern: Ich habe gerade keinen Zugriff auf meinen Rechner, daher erst mal eine Vermutung. Die Größe der Symbole leitet das Widget aus der FontSize ab. Die ist bei Dir nirgends angegeben, daher kann es sein, dass die Bildchen mit Größe 0 gezeichnet werden. Versuche mal so etwas:
"vmax.":{"icon":"./images/Blitzer2.png","fontSize":"25px"},
Das mit dem Reload des Json Files muss ich mir noch mal anschauen.
Hallo eki
Zitat von: eki am 08 Januar 2021, 18:45:18
Zu den fehlenden Bildern: Ich habe gerade keinen Zugriff auf meinen Rechner, daher erst mal eine Vermutung. Die Größe der Symbole leitet das Widget aus der FontSize ab. Die ist bei Dir nirgends angegeben, daher kann es sein, dass die Bildchen mit Größe 0 gezeichnet werden. Versuche mal so etwas:
"vmax.":{"icon":"./images/Blitzer2.png","fontSize":"25px"},
Nope, leider nicht!
Gruß
Sailor
Lass mal den Punkt bei ,,vmax." weg. Ansonsten musst Du warten, ich probierst mal mit Deinen Daten wenn ich wieder am Rechner bin.
Zitat von: eki am 08 Januar 2021, 19:21:21
Lass mal den Punkt bei ,,vmax." weg. Ansonsten musst Du warten, ich probierst mal mit Deinen Daten wenn ich wieder am Rechner bin.
Auch nix, haette mich auch gewundert, das es ja mit "vmax." und einem "label" funktioniert.
Aber Danke das du dran bleibst... Kein Stress
Gruß
Sailor
So, ich habe jetzt mal mit Deinen Daten ein bisschen herumgespielt, einige Anpassungen machen müssen und eine neue Version des Widgets hier angehängt (bitte mal damit testen). Damit werden zumindest bei mir die Bilder dargestellt. Allerdings gibt es auch noch was bei Dir anzupassen.
Das Widget nimmt als Basis für die Icons den Ordner images im fhem Basisverzeichnis (per Default wäre das "www/images"). Daher müssten Deine Einträge unter der Annahme dass Deine Bilder im Verzeichnis "www/tablet/images" stehen im HTML folgendermaßen aussehen (das erste Beispiel würde nur das Icon malen, das zweite Beispiel schreibt dann auch noch die Zahl in das Bild mit rein):
"vmax.70":{"icon":"../tablet_272/images/Blitzer2.png"},
"vmax.80":{"label":"80","icon":"../tablet/images/Blitzer2.png","fontSize":"15px","strokeColor":"black"},
Das Reload Thema fehlt hier noch.
Zitat von: eki am 12 Januar 2021, 10:35:34
So, ich habe jetzt mal mit Deinen Daten ein bisschen herumgespielt, einige Anpassungen machen müssen und eine neue Version des Widgets hier angehängt (bitte mal damit testen).
Gaaaanz Geile Nummer!
DANKE! ;D
Zitat von: eki am 12 Januar 2021, 10:35:34
Das Reload Thema fehlt hier noch.
Pas à pas!
Gruß
Sailor
So, hier wäre jetzt mal eine Version, bei der das Reload auch funktionieren müsste. Wäre für test und Feedback dankbar. Ich habe bei der Gelegenheit auch noch einen Refresh Button auf die Karte gelegt, mit dem man das Neuladen auch manuell triggern kann.
Hallo eki
Zitat von: eki am 15 Januar 2021, 17:05:32
So, hier wäre jetzt mal eine Version, bei der das Reload auch funktionieren müsste. Wäre für test und Feedback dankbar. Ich habe bei der Gelegenheit auch noch einen Refresh Button auf die Karte gelegt, mit dem man das Neuladen auch manuell triggern kann.
Die gute Nachricht ist, dass der Reload und das Einlesen des GeoJson - Files funktioniert! ;D
Die schlechte Nachricht ist, er löscht beim Reload nicht die alte Position, und somit habe ich bei laufender Änderung immer mehr des gleichen Symbols entlang der Bewegungsstrecke.
Diese lassen sich auch nicht mit dem Reload - Button auf der Map löschen. :o
Erst beim harten Reload (F5-Taste) verschwinden die überflüssigen Symbole.
Ist da ein vergessener Cache? im im Script?
Gruß
Sailor
Komisch, bei meinen Tests hat er astrein die Symbole gelöscht und hinzugefügt. Cache kann eigentlich nicht sein, weil ich das Laden per POST mache und da sollte eigentlich nichts gecached werden (ist das bei allen Browsern so?).
Hallo eki
Zitat von: eki am 18 Januar 2021, 14:33:41
Komisch, bei meinen Tests hat er astrein die Symbole gelöscht und hinzugefügt. Cache kann eigentlich nicht sein, weil ich das Laden per POST mache und da sollte eigentlich nichts gecached werden (ist das bei allen Browsern so?).
Ich habe hier nur Ubuntu mit Firefox am laufen...
Ich werde das mal mit Anderen probieren und berichten...
Gruß
Sailor
OT
@eki
Hier in der Anlage.
Zitat von: curt am 21 Januar 2021, 11:21:46
OT
@eki
Hier in der Anlage.
Ist das dein Staubsauger oder dein Mähroboter? ;D
Aber so sieht es im Endeffekt bei mir auch aus. Statt die letzte Position anzuzeigen werden die Positionen aufaddiert.
Gruß
Sailor
Zitat von: Sailor am 21 Januar 2021, 16:58:12
Ist das dein Staubsauger oder dein Mähroboter? ;D
Staubsauger.
Bei PN kann man keine Dateien versenden, daher auf diesem Weg. Ja, es geht um Live-Visualisierung.
@eki
Ein List des Roboters ist in der Anlage.
Es gibt (derzeit, das ist ein aktueller Roboter, die Modulerweiterung ist beta) zwei für die Sache relevante Logfiles, die wie folgt definiert sind:
define FileLog_Putzi_Koo_2 FileLog ./log/Putzi_Koo_2-%Y.log Putzi_2:(pos_x_y).*
...
define SVG_FileLog_Putzi_Koo_2_1 SVG LOG_PROXY:SVG_FileLog_Putzi_Koo_2_1:CURRENT
attr SVG_FileLog_Putzi_Koo_2_1 plotsize 800,700
attr SVG_FileLog_Putzi_Koo_2_1 room 16 Putzi
Das zweite Log (nur eine Zeile lang, aktualisierend) namens position.log wird über userreadings definiert, siehe list.
Das von mir verwendete gplot-File (wird nicht aktualisiert, händisch reload):
# cat SVG_FileLog_Putzi_Koo_2_1.gplot
set terminal png transparent size <SIZE> crop
set output '<OUT>.png'
set xdata time
set timefmt "%Y-%m-%d_%H:%M:%S"
set xlabel " "
set title ''
set ytics
set y2tics
set grid
set ylabel ""
set y2label ""
set xrange [-10:10]
set yrange [-10:10]
#LOG_PROXY Func:logProxy_xyFile2Plot("/opt/fhem/log/position.log",2,"position")
#LOG_PROXY Func:logProxy_xyFile2Plot("/opt/fhem/log/Putzi_Koo_2-2021.log",4,"pos_x_y:")
#LOG_PROXY Func:logProxy_xy2Plot([[10,9],[-10,9],[-10,-9],[8,-9],[8,9]])
plot "<IN>" using 1:2 axes x1y2 title 'Putzi' ls l0fill lw 2 with points,\
"<IN>" using 1:2 axes x1y2 title 'Map' ls l2 lw 1 with lines,\
"<IN>" using 1:2 axes x1y2 title 'Rahmen' ls l1fill lw 1 with lines
Wie gewünscht der Thread, in dem die Entwicklung zum bisherigen grafischen Stand diskutiert wurde, ab Beitrag #2308 in https://forum.fhem.de/index.php/topic,73052.2295.html .
Die Idee ist wie gesagt, das Ganze (die aktuelle Position des Roboters und auch den zurückgelegten den Weg des Roboters) in einem FHEM-Modul sichtbar machen.
Hallo Curt
Zitat von: curt am 24 Januar 2021, 04:09:54
Ein List des Roboters ist in der Anlage.
Die Idee ist wie gesagt, das Ganze (die aktuelle Position des Roboters und auch den zurückgelegten den Weg des Roboters) in einem FHEM-Modul sichtbar machen.
Wenn du aus deinem
2021-01-22 18:26:40 pos_x 0.78076
2021-01-22 18:26:40 pos_x_y 0.78076,-1.237947
2021-01-22 18:26:40 pos_y -1.237947
Eine Latitude und Longitude errechnen kannst, hätte ich eine Idee der Realisierung:
Ein etwas abgeändertes Programm wie von mir oben gepostet, allerdings mit aufsummierten Positionsangaben plus aktueller Position welche dies als GEOJSON-Datei abspeichert.
Wobei dies aufgrund des Browser-Bugs? (Root cause noch nicht ermittelt - Problem besteht noch) die Positionsdaten ohnehin aufsummiert werden.
Gruß
Sailor
Ich bin an dem Thema auf Anfrage von curt schon dran, ein bisschen Geduld.
Ich habe jetzt mal einen Zwischenstand, den ich her mal vorstellen wollte (war doch einiges und ich habe auch noch ein paar Fehler gefunden :-\). Ist wie gesagt, noch nicht ganz fertig (z.B. geht die Heatmap noch nicht für Google sondern nur für OSM), wollte es aber mal zur Diskussion stellen
Mit der angehängten Version gibt es einige Änderungen:
1. Man kann jetzt die maximalen und minialen zoom levels vorgeben (habe ich gebraucht, um für die kleinen Gebiete, die so ein Staubsauger abfährt, sehr tief hinein zoomen zu können). Beispiele wären data-minzoom="1", data-maxzoom="25" (die Defaults gehen bisher von 0 bis 18)
2. Das Thema der Darstellung von Polygonen aus einem Reading wurde korrigiert (dort war es bisher tatsächlich so, dass das nicht aktualisiert wurde (nur mit F5). Jetzt wird das bei jedem Event, der das Polygon verändert in der Karte aktualisiert.
3. Es gibt die Möglichkeit ein Bild auf die Karte zu legen (damit kann man z.B. einen Grundriss in das Kartenfenster bekommen). Dazu muss das Bild von der Drehung her in die Karte passen und es müssen zusätzlich noch die Ecken des Bildes in Geokoordinaten angegeben werden). Das kann z.B. so aussehen:
data-overlay="../images/fp_Dachgeschoss_turned.png,48.831014929044535, 9.075971602274373,48.83088043906973, 9.076093642600654"
Die 5 Parameter sind zum einen die URL des Bildes und darüber hinaus die Geokoordinaten der oberen linken und der unteren rechten Ecke auf der Karte (jeweils zuerst Latitude und dann Longitude). Es sind noch weitere Parameter wie Opacity und zoomMin und zoomMax vorgesehen, die sind aber bisher noch nicht eingebaut.
4. Es gibt die Möglichkeit eine "Heatmap" auf die Karte zu legen, die sich aus einem Reading speist. Dieses Reading muss aus Punkten bestehen, die jeweils durch Leerzeichen getrennt sind. Jeder Punkt besteht aus 3 Werten, welche durch Komma getrennt sind. Die 3 Werte sind: Position Longitude, Position Latitude, Gewicht. Ein Beispiel von 3 Punkten wäre: 9.07602996790166,48.8309896464092,1 9.07602253461123,48.8309971928888,4 9.0760255807376,48.831005959051,3. Die Definition des Features muss zumindest den Namen eines Readings enthalten, indem die oben erwähnten Punkte stehen. Ein Beispiel würde folgendermaßen aussehen (auch hier sind noch die Parameter für Opacity und zoomMin/zoomMax vorgesehen aber noch nicht eingebaut):
data-heatmap="heatmap".
Damit das mit der Heatmap mit OSM funktioniert (bei Google braucht man das nicht), muss man folgendes Pluginscript ins lib Verzeichnis des TabletsUI legen: https://github.com/Leaflet/Leaflet.heat/blob/gh-pages/dist/leaflet-heat.js (https://github.com/Leaflet/Leaflet.heat/blob/gh-pages/dist/leaflet-heat.js)
Für die Staubsaugerfraktion wäre also folgendes zu tun (ich habe auch mal eine Dummydefinition, die ich zur Simulation benutzt habe mit entsprechenden User Readings unten angehängt):
1. Aus den lokalen Punkten ein Reading mit einem Polygon machen. In dem Dummy ist auch eine einfache Umrechnungsformel enthalten, die halbwegs funktioniert (das Thema Geotransformation ist eine Wissenschaft für sich, mit der Formel geht es aber so einigermaßen). In meinem Beispiel wird das Polygon nicht belibig lang. Man kann die Länge mit dem Attribut max-polylength setzen.
2. Aus den lokalen Punkten eine Reading mit einer sich immer weiter aktualisierenden Heatmap machen. Auch dazu ein Userreading im Beispieldummy. Man kann hier noch eine Gitterweite für die Heatmap angeben, irgendwie muss man ja festlegen wann ein beliebiger neuer Punkt einem gegebenen Heatmap Punkt zugeschlagen wird und damit dessen Gewicht (der 3. Parameter) erhöht.
3. Ein Bild als overlay besorgen, das z.B. den Grundriss des Gebäudes auf die Karte legt (in meine Fall ist der Name ../images/fp_Dachgeschoss_turned.png).
3. Eine widget Map definieren. Auch dazu habe ich ein Beispiel gemacht und unten angehängt.
Die Raw Definition des Dummy mit den Userreadings für das Polygon und die Heatmap (der lokale Punkt des Saugers als Input muss im Reading point stehen und x und y Werte durch Komma getrennt enthalten):
defmod testVCRobot dummy
attr testVCRobot userattr max-polylength referencepoint gridsize
attr testVCRobot gridsize 1.5
attr testVCRobot max-polylength 10
attr testVCRobot readingList point
attr testVCRobot referencepoint 9.076057,48.830989
attr testVCRobot setList point
attr testVCRobot userReadings polygon:point.* {\
my @points = split(" ",ReadingsVal($NAME,"polygon",""));;\
my ($x,$y) = split(",",ReadingsVal($NAME,"point","0,0"));;\
my ($rlong,$rlat) = split(",",AttrVal($NAME,"referencepoint","0,0"));;\
my $deg2rad = 3.14159265359/180;;\
my $maxlength = AttrVal($NAME,"max-polylength","0");;\
\
my $lat = $rlat + $y/(111132.954 - 559.822 * cos( 2.0 * $rlat * $deg2rad) + 1.175 * cos( 4.0 * $rlat * $deg2rad));;\
my $lng = $rlong + $x/($deg2rad * 6367449 * cos ( $rlat * $deg2rad));;\
splice(@points,0,@points-$maxlength+1) if (@points+1 > $maxlength);;\
push(@points,$lng.",".$lat);;\
\
return join(" ",@points);;\
},\
heatmap:point.* {\
my @hmpoints = split(" ",ReadingsVal($NAME,"heatmap",""));;\
my ($x,$y) = split(",",ReadingsVal($NAME,"point","0,0"));;\
my ($rlong,$rlat) = split(",",AttrVal($NAME,"referencepoint","0,0"));;\
my $gridsize = AttrVal($NAME,"gridsize","0.5");;\
my $deg2rad = 3.14159265359/180;;\
\
my $gsx = $gridsize/($deg2rad * 6367449 * cos ( $rlat * $deg2rad));;\
my $gsy = $gridsize/(111132.954 - 559.822 * cos( 2.0 * $rlat * $deg2rad) + 1.175 * cos( 4.0 * $rlat * $deg2rad));;\
\
my $lat = $rlat + $y/(111132.954 - 559.822 * cos( 2.0 * $rlat * $deg2rad) + 1.175 * cos( 4.0 * $rlat * $deg2rad));;\
my $lng = $rlong + $x/($deg2rad * 6367449 * cos ( $rlat * $deg2rad));;\
\
my $found = 0;;\
my @newpoints;;\
\
foreach (@hmpoints) {\
my ($gpx,$gpy,$weight) = split(",",$_);;\
if ($lat>$gpy-$gsy/2 && $lat<$gpy+$gsy/2 && $lng>$gpx-$gsx/2 && $lng<$gpx+$gsx/2){\
$weight++;;\
$found = 1;;\
}\
push(@newpoints,"$gpx,$gpy,$weight");;\
}\
\
if (!$found) {\
push(@newpoints,"$lng,$lat,1");;\
}\
\
return join(" ",@newpoints);;\
},\
longitude:point.* {\
my ($x,$y) = split(",",ReadingsVal($NAME,"point","0,0"));;\
my ($rlong,$rlat) = split(",",AttrVal($NAME,"referencepoint","0,0"));;\
my $deg2rad = 3.14159265359/180;;\
$rlong + $x/($deg2rad * 6367449 * cos ( $rlat * $deg2rad));;\
},\
latitude:point.* {\
my ($x,$y) = split(",",ReadingsVal($NAME,"point","0,0"));;\
my ($rlong,$rlat) = split(",",AttrVal($NAME,"referencepoint","0,0"));;\
my $deg2rad = 3.14159265359/180;;\
$rlat + $y/(111132.954 - 559.822 * cos( 2.0 * $rlat * $deg2rad) + 1.175 * cos( 4.0 * $rlat * $deg2rad));;\
}
setstate testVCRobot 0,0
setstate testVCRobot 2021-01-29 16:33:04 heatmap 9.07602996790166,48.8309896464092,1 9.07602253461123,48.8309971928888,2 9.0760255807376,48.831005959051,3 9.07602840093143,48.8310154224601,1 9.07604048958478,48.8310196199713,2 9.07605076248894,48.8310255521352,4 9.07605084985054,48.8310345442348,2 9.07605341985163,48.8310433761542,1 9.07605078155696,48.8310120231081,2 9.07606375421187,48.8310274787877,2 9.07607582403415,48.8310232578901,5 9.07608860078535,48.8310264539185,2 9.07608179114462,48.8310379542776,2 9.07609539607405,48.8310370829146,1 9.07606942096281,48.8310153344552,2 9.07607640332257,48.8310076038334,8 9.07606855327439,48.8310002422513,12 9.07605611520421,48.8309967413622,8 9.07607453828661,48.8309919335792,9 9.07606812625243,48.8309839920138,6 9.07609756203781,48.831001897342,1 9.07609194314684,48.8310100947802,3 9.07609296850183,48.830995051708,1 9.07608067909368,48.8309989888582,1 9.07610576039538,48.8310164930254,1 9.07611826551113,48.831020124358,1 9.07612574643612,48.8310125982764,1 9.0761378019375,48.8310083597041,1 9.07615011211047,48.8310122686802,1 9.07614979359703,48.8310032788385,2 9.07614557701812,48.8309946275672,3 9.07613682709852,48.8309877189966,10 9.07615045964701,48.8309870604243,9 9.07614481636039,48.8309788702416,7 9.07612297400939,48.8309727667389,3 9.07613198705599,48.8309796533374,3 9.07610773605686,48.8309687095462,1 9.07609880967322,48.830961899373,1 9.07609162786933,48.830969550515,1 9.07609635649852,48.830977987612,1 9.07608316525678,48.8309803448473,4 9.07607204041929,48.8309725604963,3 9.07605886077678,48.830970175348,1
setstate testVCRobot 2021-01-29 16:33:04 latitude 48.8309865856738
setstate testVCRobot 2021-01-29 16:33:04 longitude 9.07608678417558
setstate testVCRobot 2021-01-29 16:33:04 point 2.17891695503789, -0.26848867022813
setstate testVCRobot 2021-01-29 16:33:04 polygon 9.07609635649852,48.830977987612 9.07608316525678,48.8309803448473 9.07606973033641,48.8309786869288 9.07608330857479,48.8309776509444 9.07607204041929,48.8309725604963 9.07605886077678,48.830970175348 9.07607252654647,48.8309703784538 9.07607571486407,48.8309791227069 9.07607327809235,48.8309879709539 9.07608678417558,48.8309865856738
setstate testVCRobot 2021-01-29 07:28:28 state 0,0
Die Map Definition (besteht aus 2 Teilen, der erste malt das Polygon und die Heatmap, der zweite ein Auto das am Beginn des Polygons durch die Gegend fährt):
<div class="cell">
<div id="Test1"
style="height: calc(100% - 1.6em); width:100%"
data-type="maps"
data-map_type="OSM"
data-showdetails="false"
data-device="testVCRobot"
data-traffic="true"
data-mapgroup="2"
data-overlay="../images/fp_Dachgeschoss_turned.png,48.831014929044535, 9.075971602274373,48.83088043906973, 9.076093642600654"
data-heatmap="heatmap,0.5"
data-center="48.830989, 9.076057"
data-scrollgroup="2"
data-maxzoom="25"
data-zoom="20"
data-icon="no-icon"
data-label=" "
data-stroke="#33ddff,5,60">
</div>
<div id="Test2"
style="height: calc(100% - 1.6em); width:100%"
data-type="maps"
data-map_type="OSM"
data-polygon="none"
data-showdetails="false"
data-get="longitude"
data-device="testVCRobot"
data-mapgroup="2"
data-center="48.830989, 9.076057"
data-scrollgroup="2"
data-maxzoom="25"
data-zoom="20"
data-icon="no-icon"
data-label="fa-car"
data-stroke="#3300ff,20,60">
</div>
</div>
Zu guter Letzt habe ich noch ein Bild anghängt, wie das mit meinem simulierten Device auf der Karte aussieht.
Hallo eki
Vielen dank für Deine Arbeit. Ich gehöre ja mit zu der Staubsauger fraktion und habe mich gestern gleich dran gemacht um es bei mir zu testen. Leider ohne Erfolg.
Als erstes habe ich mir Deine neue Version ins Verzeichnis
/opt/fhem/www/tablet/jskopiert.
Danach habe ich mir einen API key bei tomtom besorgt und diesen in Deinem Beispiel quelltext mit eingtragen.
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.2.*
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* !!!! Evaluation version - run only in a staging enviroment !!!!
*
* - create a new folder named 'tablet_eval' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
* - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
*
* Create a Demo Device in FHEM
* define ftuitest dummy
*/
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="TomTomApiKey" content="< mein key >">
<meta name="widget_base_width" content="74">
<meta name="widget_base_height" content="71">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="gridster_disable" content="1">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta http-equiv="Cache-Control" content="no-store" />
<script src="js/fhem-tablet-ui.js" defer></script>
<title>Martha´s Karte</title>
</head>
<body>
<div class="gridster">
<ul>
<div class="cell">
<div id="Test1"
style="height: calc(100% - 1.6em); width:100%"
data-type="maps"
data-map_type="OSM"
data-showdetails="false"
data-device="testVCRobot"
data-traffic="true"
data-mapgroup="2"
data-overlay="../images/fp_Grundriss.png,48.831014929044535, 9.075971602274373,48.83088043906973, 9.076093642600654"
data-heatmap="heatmap,0.5"
data-center="48.830989, 9.076057"
data-scrollgroup="2"
data-maxzoom="25"
data-zoom="20"
data-icon="no-icon"
data-label=" "
data-stroke="#33ddff,5,60">
</div>
<div id="Test2"
style="height: calc(100% - 1.6em); width:100%"
data-type="maps"
data-map_type="OSM"
data-polygon="none"
data-showdetails="false"
data-get="longitude"
data-device="testVCRobot"
data-mapgroup="2"
data-center="48.830989, 9.076057"
data-scrollgroup="2"
data-maxzoom="25"
data-zoom="20"
data-icon="no-icon"
data-label="fa-car"
data-stroke="#3300ff,20,60">
</div>
</div>
</ul>
</div>
</body>
</html>
jetzt noch das plug in in das neu erstellte Verzeichnis kopiert
/opt/fhem/www/tablet/lib/tomtom
das list sieht dann so in der terminla AUsgabe aus
Stephan@Labor:/opt/fhem/www/tablet/lib/tomtom $ ls -al
insgesamt 4872
drwxr-xr-x 7 Stephan Stephan 4096 Jan 30 11:01 .
drwxr-xr-x 4 Stephan dialout 4096 Jan 30 10:56 ..
drwxr-xr-x 6 Stephan Stephan 4096 Jan 30 09:49 glyphs
drwxr-xr-x 2 Stephan Stephan 20480 Jan 30 09:49 images
-rw-r--r-- 1 Stephan Stephan 31894 Jan 30 09:49 LICENSE.txt
drwxr-xr-x 2 Stephan Stephan 4096 Jan 30 09:49 mapbox-gl-js
-rw-r--r-- 1 Stephan Stephan 362038 Jan 30 09:49 map.css
-rw-r--r-- 1 Stephan Stephan 2193 Jan 30 09:49 README.md
drwxr-xr-x 2 Stephan Stephan 4096 Jan 30 09:49 sprites
drwxr-xr-x 2 Stephan Stephan 4096 Jan 30 09:49 styles
-rw-r--r-- 1 Stephan Stephan 733912 Jan 30 09:49 tomtom.min.js
-rw-r--r-- 1 Stephan Stephan 3804414 Jan 30 09:49 tomtom.min.js.map
und zu guter letzt
ZitatDamit das mit der Heatmap mit OSM funktioniert (bei Google braucht man das nicht), muss man folgendes Pluginscript ins lib Verzeichnis des TabletsUI legen: https://github.com/Leaflet/Leaflet.heat/blob/gh-pages/dist/leaflet-heat.js
die datei habe ich mit wget in das lib Verzeichnis kopiert
Stephan@Labor:/opt/fhem/www/tablet/lib $ wget https://github.com/Leaflet/Leaflet.heat/blob/gh-pages/dist/leaflet-heat.js
--2021-01-30 11:17:15-- https://github.com/Leaflet/Leaflet.heat/blob/gh-pages/dist/leaflet-heat.js
Auflösen des Hostnamens github.com (github.com)... 140.82.121.4
Verbindungsaufbau zu github.com (github.com)|140.82.121.4|:443 ... verbunden.
HTTP-Anforderung gesendet, auf Antwort wird gewartet ... 200 OK
Länge: nicht spezifiziert [text/html]
Wird in »leaflet-heat.js« gespeichert.
leaflet-heat.js [ <=> ] 182,33K --.-KB/s in 0,06s
2021-01-30 11:17:16 (2,83 MB/s) - »leaflet-heat.js« gespeichert [186704]
Deinen Dummy habe kpl. so wie er ist in meinem fhem mit übernommen.
Nur leider bekomme ich beim Aufruf der Seite eine Fehlermeldung und sie bleibt dunkel.
Fehlermeldung siehe Anhang.
leider hat es auch nicht funktioniert wenn ich mit wget https://raw.githubusercontent.com/Leaflet/Leaflet.heat/gh-pages/dist/leaflet-heat.js mir die Datei ins Verzeichnis kopiere
Auch ein stumpfes reinkopieren über copy paste der raw mit Atom und filezilla war erfolglos.
Ich mache bestimmt was falsch beim import der leaflet-heat.js... .
Ich würde mich sehr freuen wenn Du mir sagen könntest was ich falsch mache.
Vielen dank.
Gruß
Stephan
Das Script muss doch noch in den Header der Index eingebunden werden, oder?
Das Script muss nicht in den Header, das macht das Widget selbst. Er hat ja irgendwie auch das heatmap Script geladen, sonst wäre die Meldung ja anders. Ich schau es mir mal an.
Noch ne Frage, hast Du denn bei dem Dummy das Reading heatmap schon mit Werten besetzt (passiert, wenn Du z. B. mit set point x, y entsprechend etwas setzt.
Hallo eki
Jup hab mit den dummy schon herumgespielt und etliche male set point mit x y werten gefüttert ein riesen langes Reading für heatmap habe ich auch bekommen. Was sich auch jedesmal etwas ändert wenn ich set point mache.
Gruß
Stephan
EDIT: Ich habe gestern und heute herumgespielt und die Datei leaflet-heat.js auf verschiedenen Wegen in das lib Verzeichnis kopiert mit dem Ergebnis das die Fehlermedlung sich etwas verändert hat.
Ich habe mal einen sreenshot angehängt was beim öffnen der Seite alles für Meldungen nacheinander angezeigt werden.
Das Problem liegt in Deiner HTML Definition. Du gibst für die äußeren divs keine Höhe und Breite an, die inneren rechnen daraus eine Höhe und Breite aus, die dann auch wieder null wird und das führt dann zu dem Fehler (wahrscheinlich, weil das heatmap script versucht, daraus irgendein Array zu bauen).
Wenn Du folgendes änderst, dann sollte es klappen:
<body>
<div class="gridster" style="height: 100%">
<ul style="height: 100%">
<div class="cell" style="height: 100%">
<div id="Test1"
Ach ja, damit das Auto zu sehen ist, muss Du noch folgende Zeile in den Header packen:
<link rel="stylesheet" href="./lib/font-awesome.min.css" />
Hallo eki
Vielen dank für Deine Hilfe. Jetz bekomme ich was angezeigt.
Dann kann ich mich daran machen zu verstehen wie ich meinen Grundriss auch auf die Richtige Position bekommen.
Im Moment saugt Martha laut Anzeige bei unserem Bahnhof :D. Hoffentlich kommt sie nicht unter die Räder ;D.
Viele Grüsse
Stephan
Da Ihr ja schon mit Grundrissen auf Basis von Polygonen gearbeitet habt, könntet Ihr auch ein geojson file mit den Grundrisspolygonen als Darstellung verwenden. Dazu gibt es einige Beispiele weiter oben.
Angehängt, hier noch mal ein Update. Folgende Dinge sind geändert:
- Heatmaps gehen jetzt auch mit Google Maps
- Die Overlays und die Heatmaps können mit einer Opacity versehen werden und sind dann entsprechend teilweise durchsichtig.
- Die Farben für die Heatmap können angepasst werden. Dazu kann ein Array von Farbwerten (mit Opacity) angegeben werden das dann auf die verschiedenen Gewichteten Punkte angewendet wird.
- Die größe der Punkte (radius) kann für die Heatmap eingestellt werden
- Für Heatmap und Overlay können min und max Zoom Level angegeben werden um diese Layer nur bei bestimmten Zoom Leveln zu sehen.
Format für Overlay:
data-overlay="<url>,<lat-nw>,<lng-nw>,<lat-se>,<lng-se>,<opacity>,<zoom-min>,<zoom-max>"
Format für Heatmap:
data-heatmap="<reading>,<opacity>,<zoom-min>,<zoom-max>,<radius>"
Format für Heatmap Farbgradient:
data-heatmap_gradient='[<color-1>,<color-2>,...,<color-n>]'
Farben können als "rgba(red,green,blue,opacity)" (wobei red,green,blue Werte zwischen 0 and 255 sind und opacity zwischen 0 und 1 liegen kann) oder als #rrggbb (rr,gg,bb als zweistellige hex Werte) angegeben werden (Länge des Arrays und damit Anzahl der Farben ist beliebig).
Beispiel:
<div id="Test1"
style="height: calc(100% - 1.6em); width:100%"
data-type="maps"
data-map_type="OSM"
data-showdetails="false"
data-device="testVCRobot"
data-traffic="true"
data-mapgroup="2"
data-overlay="../images/fp_Dachgeschoss_turned.png,48.831014929044535, 9.075971602274373,48.83088043906973, 9.076093642600654,0.5,19,25"
data-heatmap="heatmap,0.5,19,25,25"
data-heatmap_gradient='["rgba(255,255,255,0)","rgba(128,128,128,0.5)","rgba(0,0,0,1)"]'
data-center="48.830989, 9.076057"
data-scrollgroup="2"
data-maxzoom="25"
data-zoom="20"
data-icon="no-icon"
data-label=" "
data-stroke="#33ddff,5,60">
</div>
Hallo eki
Hab jetzt auch mal mit Deiner neuen Version herumgetestet. Mit den Punkten habe ich noch nicht ganz verstanden wozu die gut sein sollen.
Eine ununterbrochene Linie auf der zu sehen ist wo der Sauger war finde ich vollkommen ausreichend. Hab mal den Parameter
data-heatmap="heatmap,0.5,20,25,25
auf
data-heatmap="heatmap,0.5,20,25,1
gestellt
damit sind die Punkte nicht mehr zu sehen sind,
und das Limit für die Anzahl der Polygone im dummy auf 10000000 gestellt.
Jetzt wird eine Linie hinter den Auto Symbol hergezogen.
So richtig mit den zoom Einstellungen komme ich nicht klar.
Rufe ich die Map mit den im Beispiel eingestellten Werten auf wird mir die Karte noch sehr klein angezeigt.
Klicke ich jetzt zweimal auf das plus Symbol passt es.
Einstellungen für id="Test1"
data-overlay="../images/fp_Grundriss-1.png,54.47915, 9.321220,54.47904, 9.321605,1,20,25"
data-heatmap="heatmap,0.5,20,25,1"
data-zoom="20"
Einstellungen für id=Test2
data-zoom="20"
Nun hab ich mir gedacht stelle ich doch einfach alle Werte für min zoom auf 22.
Klappt leider nicht dann bekomme ich eine Fehlermeldung siehe Bild zoom22test.jpg.
Danach habe ich noch wild alle möglichen kombinationen ausprobiert aber keine hat so richtig geklappt.
Ist es eigentlich auch noch möglich die polygon linie schmaler zu bekommen ?
Viele Grüsse
Stephan
Zitat
Hab jetzt auch mal mit Deiner neuen Version herumgetestet. Mit den Punkten habe ich noch nicht ganz verstanden wozu die gut sein sollen.
Eine ununterbrochene Linie auf der zu sehen ist wo der Sauger war finde ich vollkommen ausreichend. Hab mal den Parameter
Die Punkte zeigen Dir, wie häufig der Staubsauger an welcher Stelle war. Je dichter und roter, desto häufiger wurde diese Position angefahren. Wenn Du die Heatmap nicht willst, dann lass die data-heatmap Zeile weg, anstatt die Punktgröße auf 1 zu setzen (lustige Idee ???).
Zum Zoom: Die Karte zoomt in Stufen. 0 zeigt die ganze Welt 20 einzelne Häuser, je höher die Zahl, desto kleiner wird das dargestellt Gebiet und desto größer und mehr werden die Einzelheiten. Mit data-zoom stellst Du ein, mit welcher initialen Zoomstufe das Widget startet. Mit minzoom und maxzoom stellst Du für jeden Layer (Heatmap, Overlay) den Zoombereichein, bei dem der Layer zu sehen ist (wenn also data-zoom=,,20" ist und minzoom für den Overlay Layer auf 22, dann wird das Overlay Bild am Anfang nicht angezeigt, wenn du dann 2 mal plus drückst wird der Zoom auf 22 gesetzt und das Bild erscheint). Das Gleiche gilt unabhängig für den Heatmap Layer.
Die Dicke der Linie kannst Du über den Parameter data-stroke einstellen (der 2. Wert gibt die Dicke in Pixeln an). Wenn Du das Auto größer als die Linie haben willst, musst Du, wie in meinem Beispiel weiter oben 2 Map Divs definieren und unterschiedliche Stroke Werte verwenden.
Hallo eki
Vielen dank für Deine Erklärung. Für mich als kompletter FTUI Neuling ist das Gold wert. Ich habe das dann auch gleich erfolgreich ausprobiert.
Zitatdann lass die data-heatmap Zeile weg, anstatt die Punktgröße auf 1 zu setzen (lustige Idee ???).
Als unwissender kommt man auf die verücktesten Idee ein Problem zu umgehen :) . Hab die beiden Zeilen jetzt ohne Probleme gelöscht.
data-heatmap="heatmap,0.5,19,25,25"
data-heatmap_gradient='["rgba(255,255,255,0)","rgba(128,128,128,0.5)","rgba(0,0,0,1)"]'
Auch die data strocke hab ich jetzt dank Deiner Erklärung besser verstanden und gleich mit umgesetzt.
Das zoom Problem ist jetzt auch keins mehr. Bin immer wieder darüber gestolpert weil ich beide definitionen für data-zoom="20" geändert habe.
Es funktioniert aber nur wenn die letzte z.b 23 hat und die erste muss dann einen kleineren oder grösseren Wert haben als 23. Sonst zoom das widgert immer nur auf 20.
Nach mehrfachen ausprobieren funktioniert es jetzt wie ich es haben möchte.
Morgen lasse ich Martha wieder auf das ganze Haus los und wenn Sie die Karte schön bemahlt hat werde ich das hier mal posten.
Viele Grüsse
Stephan
Hallo @eki und @Stelaku und allerseits,
aus irgend einem Grund bekomme ich keine Benachrichtigungen für diesen Thread, obwohl das eingeschaltet ist. Danke @eki für die Benachrichtigung und Deine PN.
Ich habe das gerade eben durchgelesen - und sehe nicht durch. :(
Stephan, wärst Du bitte so freundlich, eine Anleitung mit Deinem Installationsstand zu geben (wie Du es schon mal gemacht hast)? Das wäre toll - ich muss ja nicht unbedingt alle Deine Fehler nachmachen ... und eki könnte das gleich in die Wiki-Doku übernehmen. Also falls er mag.
eki, was vielleicht schon geht, ich frage einfach mal:
Es gibt ein Reading run_state. Da sehe ich textlich ob er geladen wird, saugt, der Akku runter ist und vor allem ob er sich unter dem Sofa festgefahren hat. Da wäre doch eine sehr schöne Idee, dass ich in meinem Palast gleich sehe, wo ich Putzi eigentlich suchen muss, wenn der kleine Gnubbel rot dargestellt wird.
Ginge sowas denn ohne großen Aufwand?
Es ist eingentlich nicht so schwer. Grundsätzlich gibt es 2 Möglichkeiten der Darstellung:
1. Linie, die den Weg auf der Karte anzeigt
Dazu muss ein Reading "polygon" erzeugt werden, das die letzten Aufenthaltspunkte in Geokoordinaten enthält (kann man, wie in meinem Beipiel gezeigt, als userReading aus den aktuellen Punkten und einem als userAttribut gesetzten Referenzpunkt generieren).
2. Heatmap (farbliche Kodierung der geographischen Aufenthaltshäufigkeit, also je häufiger der Staubsauger an einer Stelle war desto farbiger)
Dazu muss ein Reading "heatmap" erzeugt werden, das Punkte und die zughörige Häufigkeit enthält. Geht genauso wie das Polygon über ein userReading, wie in meinem Beispiel oben.
Zusätzlich kann man noch ein Bild z.B. des Grundrisses auf die Karte legen (data-overlay) oder den Grundriss als geojson File mit einem Polygon hinterlegen, und den letzten Punkt z.B. als icon darstellen (dazu braucht es die readings "longitude" und "latitude", die ich ebenfalls als userReadings in meinem Beispiel habe).
Das Einfärben oder Ändern des Icons auf Grundlage von Reading Inhalten geht bisher noch nicht, ist aber grundsätzlich einbaubar. Ich mache mich da bei Gelegenheit mal dran.
Hallo alle zusammen
Ich versuche mal eine kleine Anleitung zu schreiben wie ich bis zu den heutigen stand gekommen bin.
1. aktuelles Widget_maps.js ins Verzeichnis /opt/fhem/www/tablet/js kopieren derzeit aus post #157 (https://forum.fhem.de/index.php/topic,91781.msg1130530.html#msg1130530)
2. Eine neue html datei im Verzeichnis /opt/fhem/www/tablet erstellt. Bei mir habe ich Sie map.html genannt. Der Aufruf geht dann über http://<serverIp>:8083/fhem/ftui/map.html
3. dann den Quelltext in die neue Datei map.html einfügen.
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.2.*
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2016 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* !!!! Evaluation version - run only in a staging enviroment !!!!
*
* - create a new folder named 'tablet_eval' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet_eval
* - add 'define TABLETUIEVAL HTTPSRV ftui_eval ./www/tablet_eval Tablet-EVAL' in fhem.cfg
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet_eval/
*
* Create a Demo Device in FHEM
* define ftuitest dummy
*/
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="74">
<meta name="widget_base_height" content="71">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="gridster_disable" content="1">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="2"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta http-equiv="Cache-Control" content="no-store" />
<script src="js/fhem-tablet-ui.js" defer></script>
<link rel="stylesheet" href="./lib/font-awesome.min.css" />
<title>Martha Karte</title>
</head>
<body>
<div class="gridster" style="height: 100%">
<ul style="height: 100%">
<div class="cell" style="height: 100%">
<div id="Test1"
style="height: calc(100% - 1.6em); width:100%"
data-type="maps"
data-map_type="OSM"
data-showdetails="false"
data-device="testVCRobot"
data-traffic="false"
data-mapgroup="2"
data-overlay="../images/default/fp_Grundriss.png,54.6351533, 8.358227,54.6350360, 8.358580,1,0,25"
data-center="54.6351000, 8.35836945128062"
data-scrollgroup="2"
data-maxzoom="25"
data-zoom="20"
data-icon="no-icon"
data-label=" "
data-stroke="#FF0000,3,60">
</div>
<div id="Test2"
style="height: calc(100% - 1.6em); width:100%"
data-type="maps"
data-map_type="OSM"
data-polygon="none"
data-showdetails="false"
data-get="longitude"
data-device="testVCRobot"
data-mapgroup="2"
data-center="54.6351000, 8.35836945128062"
data-scrollgroup="2"
data-maxzoom="25"
data-zoom="22"
data-icon="no-icon"
data-readingstyles='[
"voll:fa-home,,#000000,25,60",
"clean:fa-circle,,#0c00a4,25,60",
"zwischenl:fa-circle,,#ff0000,25,60",
"laden:fa-home,,#ff0000,25,60"
]'
data-stylereading="state">
</div>
</div>
</ul>
</div>
</body>
</html>
data-readingstyles=
je nach reading vom dummy testVCRobot state wird das Icon bestimmt
data-stylereading="state"
gibt an welches reading von dummy testVCRobot für data-readingstyles ausgewertet wird hier im Beispiel ist es state
4. Das dummy Device aus eki seinem Beispiel in Deinem Fhem importieren. Anbei mein Dummy mit den heutigen polygonen dann solltest Du auch schon ein paar linien sehen.
hänge ich mal als .txt mit an. Die vielen polygone sprengen sonnst die 100 Zeilen :-).
5. Eine Verpnüpfung zwischen XiaomiDevices zum Dummy herstellen. Bei mir habe ich ein DOIF welches auf das reading pos_x_y regiert und dieses dann in point vom testVCRobot dummy schreibt.
und ein zweites DOIF welches auf state vom XiaomiDevices horcht und dann dementsprechend den state vom testVCRobot dummy setzt.
defmod Martha_position DOIF ([Martha_1:pos_x_y])\
(setreading testVCRobot point [Martha_1:pos_x_y])
attr Martha_position do always
defmod run_state DOIF ([Martha_1] eq "Fully charged")\
(set testVCRobot voll)\
\
DOELSEIF\
([Martha_1] eq "Charging")\
(\
set testVCRobot laden\
)\
(\
{fhem("setreading testVCRobot point -1.4,1.5")}\
)\
\
DOELSEIF\
([Martha_1] =~ "recharge")\
(\
set testVCRobot zwischenl\
)\
\
DOELSEIF\
([Martha_1] =~ "cleaning")\
(set testVCRobot clean)\
\
\
attr run_state room KARTE
6. Ich lasse über ein at jeden tag die reading für heatmap und polygon löschen. Damit jeden Tag ein neuer Verlauf zu sehen ist.
defmod Karte_loeschen at *23:00 \
deletereading testVCRobot polygon;;\
deletereading testVCRobot heatmap
attr Karte_loeschen room KARTE
Was ich beobachtet habe ist das nach dem löschen der beiden readings der Reinigungsverlauf beim Aufruf von der map.html Seite immer noch zu sehen ist.
erst wenn das Dummy testVCRobot einen neuen point Wert bekommt wird der letzte Verlauf nicht mehr angezeigt. Dieses Verhalten finde ich sehr gut.
Eine möglichkeit die ich aber noch nicht ausgetestet habe wäre das man das reading polygon nicht löscht, sonder einfach mit den letzten Positionstdaten vom Sauger setzt.
7. Jetzt wird es frickelig. die Längen und Breitengrade passen ja noch nicht zu Deinen Heimatkoordinaten. Unter Googelmaps habe ich mir meine Längen und Breitengrade herausgesucht.
8. Ermittelte Längen und Breitengrad im dummy testVCRobot mit dem attr referencepoint eingeben ACHTUNG das attr will erst den Längengrad und dann den Breitengrad. Das ist dann im
Quelltext der map.html immer andersherum.
9. Im Quelltext der map.html data-center="Breitengrad, Längengrad" mit Deinen ermittelten Werten füttern.
10. Über data-overlay="../images/default/fp_Grundriss.png,BreitengradLinkeEcke, LängengradLinkeEcke,BreitengradRechteEcke, LängengradRechteEcke,1,20,25" legst Du, wenn vorhanden den Pfad fest,
wo sich Dein Eigener Grundriss befindet. Die beiden Breiten und Längengrad angaben bilden die Eckpunkte für Deinen Grundriss.
Mit diesen Werten habe ich dann so lange herumgespielt bis der Reinigungs Verlauf von Martha genau auf der Karte war.
11. Sich freuen das der Sauger auf der Karte seine Bahnen zieht :-) .
Ich hoffe ich habe nichts vergessen.
Doch noch was vergessen. Ein ganz großes Dankeschön an eki, ohne Deine arbeit hätte ich das nie hinbekommen.
Gruß
Stephan
So, jetzt gibt es nochmal ein Update mit dem man nun auch die Darstellung von Icons auf Basis von Reading Inhalten anpassen kann. Dazu gibe es 2 neue Parameter:
1. data-readingstyles: Hier kann ein Array angegeben werden. Die einzelnen Werte des Arrays enthalten <Wert>:<Label>,<Icon>,<Farbe>,<Größe>,<Transparenz>. Für Wert kann auch eine regular Expression angegeben werden.
2. data-stylereading: Hier kann der Name des Readings angegeben werden, das für die Einfärbung verwendet werden soll. Wird nichts angegeben, ist der Default "STATE" (also das Internal)
Ein Beispiel (ist state 'on' oder 'On' so wird ein Autosymbol in blau halb transparent gemalt, ist state 'off' oder 'Off' wird ein Icon mit Haus auf einem runden Verkehrsschild in rot gemalt):
data-readingstyles='["on|On:fa-car,,rgba(0,0,255,0.5),20,60","off|Off:fa-home,../images/blitzer2.png,#ff0000,30,60"]'
data-stylereading="state"
@Stelaku
Ich habe Deine Anleitung 1:1 nachvollzogen, nichts geändert (ok, tomtom auch nicht angepasst). Das geht nicht - kann vermutlich nicht gehen.
Ich vermute, dass da irgend ein Schritt fehlt: Das Dummy Device weiß doch gar nicht, dass bei mir Putzi wienert ... irgendwie muss ja diese Datenverknüpfung gemacht werden?
Hallo curt
Du hast recht. Ich habe die Verknüpfung von Marha zu testVCRobot vergessen. Ich habe da ein DOIF welches bei Änderung des reading pos_x_y bei Martha reagiert und pos_x_y ins
dummy testVCRobot schreibt.
Anbei eine raw Definition.
defmod Martha_position DOIF ([Martha_1:pos_x_y])\
(setreading testVCRobot point [Martha_1:pos_x_y])
attr Martha_position do always
Nur noch auf putzi umschreiben und es sollte funktionieren. ich werde das dann später noch in den weiter oben stehen post mit einfügen.
Gruß
Stephan
Zitat von: curt am 05 Februar 2021, 01:07:28
@Stelaku
Ich habe Deine Anleitung 1:1 nachvollzogen, nichts geändert (ok, tomtom auch nicht angepasst). Das geht nicht - kann vermutlich nicht gehen.
Wenn Du data-traffic="false" setzt, sollte es auch ohne tomtom Key gehen (der wird nur für die Darstellung der Verkehrssituation gebraucht).
Hallo eki
Ich hab das bei mir mal ausprobiert. data-traffic="false" . Da bekomme ich beim Aufruf der Seite eine Fehlermeldung.
Der TomTomKey ist dann immer noch im header. Fehlermeldung siehe Bild ohne TomTomKey.JPG.
Es wäre schon klasse wenn wir auf das ganze TomTom lib Verzeichnis verzichten könnten. Das hat mein fhem gleich mal um 55MB größer werden lassen.
Wenn das überhaupt geht ?
Ich habe das TomTom Verzeichnis jetzt mal aus meiner Test Instanz gelöscht. Die Seite wird aufgerufen mit den besagten Fehler und es fehlt nur der Strich der den Verlauf anzeigt.
Und es wird nicht automatisch ohne manuelles F5 drücken der Punkt für den Sauger bewegt.
Mit tomtom sieht es dann wieder aus wie im Bild (mit tomtom).
Ist es eigenlich möglich den Punkt
data-label="fa-circle"
auf den Koordinaten zu zentrieren.
Auf den Bild mit tomtom kann man schön sehen das das Icon Vertical zentriert ist. Horizontal leider nicht.
Ich habe im Netz schon gesucht. Auch einiges gefunden aber leider bis heute noch nicht umsetzten können. Es fehlt halt noch einiges an Verständnis.
Ich schätze mal, so was in der Art muss es wohl werden. Aber wie bekomme ich das in den Quelltext mit rein.
.fa-circle {
display: inline-flex !important;
align-items: center;
justify-content: center;
}
Mit den SVG Icon vacuum_top.svg habe ich es hinbekommen. Nur kann ich das SVG Icon nicht so schön vergrössern oder farblich gestalten. Und es ist auch noch durchsichtig.
data-stroke greift glaube ich ja nicht bei svg Icons ?
siehe Bild vacuum_top.svg.
so hab ich das SVG Icon eingebunden
data-icon="fhemSVG/vacuum_top.svg"
Gruß
Stephan
Müsste hoffentlich mit der angehängten Version beides jetzt OK sein.
Hallo eki
Gleich mal getestet. Funktioniert. Die Icon´s werden jetzt zentriert und es läuft auch kpl. ohne tomtom.
Verzeichnis tomtom gelöscht. Header Eintrag für tomtomKey ist gelöscht und data-traffic="false" . Echt klasse.
Die beiden neuen Parameter für die Icon Darstellung funktionieren auch super. Jetzt kann Martha je nach status anders aussehen.
Vielen dank für die Umsetztung.
Gruß
Stephan
Hallo eki
Ich habe mir jetzt einen abgebrochen und auch die neue Funktion in meine live Instanz gebracht.
Das folgende funktioniert auch auf meinen Firefox Browser am PC
data-icon="no-icon"
data-readingstyles='[
"voll:fa-home,,#000000,25,60",
"clean:fa-circle,,#0c00a4,25,60",
"laden:fa-home,,#ff0000,25,60"
]'
data-stylereading="state">
Komischerweise bekomme ich auf meinem Handy eine Fehlermeldung wenn ich die data-readingstyles mit einbinde.
Zitat
Error
widgest.maps.js 2388
TypeError:Cannot read property
'serch' of undefined
Auf meinem Handy habe ich Chrome
Viele Güße
Stephan
Zitat von: eki am 05 Februar 2021, 07:48:47
Wenn Du data-traffic="false" setzt, sollte es auch ohne tomtom Key gehen
Danke, sofort umgesetzt!
(Ich habe zwar einen TomTom-Key, aber bei einem Saugroboter scheint mir das eher zweckfrei zu sein.)
Zitat von: Stelaku am 05 Februar 2021, 06:19:05
Du hast recht. Ich habe die Verknüpfung von Marha zu testVCRobot vergessen.
Danke!
Leider kann ich das im Moment nicht testen: Der Besuch hat kein gesteigertes Interesse an meinem schönen Roboter. Und bei diesem Wetter möchte ich nicht von der Gattin in den Schuppen ausquartiert werden ...
Der erste Versuch scheiterte übrigens, schon mit dem von Dir genannten DOIF. Es wird nichts angezeigt, absolut nichts. Vielleicht liegt das schon daran, dass bei mir der Griff auf "data-overlay="../images/default/fp_Grundriss.png,5..." derzeit ins Leere geht. Oder ich machte einen anderen Fehler, keine Ahnung.
P.S: Ich sehe gerade, dass eine weitere Widget-Version im Test ist: Ich nutzte die vorletzte Version.
Hallo curt
Ich versuche die Anleitung aus post #145 (https://forum.fhem.de/index.php/topic,91781.msg1128665.html#msg1128665)
immer aktuell zu halten. Habe gerade mal ein kpl. altes backup eingespielt und alle schritte aus post #145 nacheinander durchgeführt.
Nach schritt drei solltest Du eigentlich schon so etwas sehen wie in Bild. Wichtig dafür ist es den dummytestVCRobot.txt aus post #145, eins zu eins über die raw zu importieren.
Ab jetzt sollte sich das schwarze Haus bewegen wenn Du im testVCRobot dummy einfach einen wert für point x,y manuell eingibst.
Genauso sollte sich das Icon verändern wenn Du z.B. ein
set testVCRobot clean
in der fhem Komandozeile eingibst
Das schwarze Haus sollte dann durch einen blauen Punkt ersetzt werden.
Die Übermittlung der x,y Koordinaten sollte dann das DOIF automatisch übernehmen.
Genauso wie ein weiters DOIF welches auf bei mir state von Martha schaut und dementsprechend ein set testVCRobot z.b clean laden voll absetzt
Aber erstmal eins nach den anderen.
Gruß
Stephan
Hallo eki
Ich habe ja das Problem das auf allen Mobilen Endgeräten das map Widgets nicht angezeigt wird. Die Karte vom Sauger funktioniert derzeit nur auf meinen Window10 PC.
Auf den Mobilen endgeräten ist es auch egal welchen Browser ich nehme. Es kommt immer die Fehlermeldung aus Post #153
Zitat
Error
widgest.maps.js 2388
TypeError:Cannot read property
'serch' of undefined
Lasse ich die neuen Parameter für die individuelle Icon Darstellung weg und arbeite nur mit data-label funktioniert es auf allen Geräten.
So funktioniert es
nicht auf Mobil Geräten
data-icon="no-icon"
data-readingstyles='[
"0,0|test:fa-home,,#000000,25,60",
"clean:fa-circle,,#0c00a4,25,60",
"off|Off:fa-home,,#ff0000,25,60"
]'
data-stylereading="state">
So funktioniert es auf den Mobilen Endgeräten.
data-icon="no-icon"
data-label="fa-circle"
data-stroke="#000000,20,100">
Der gesamte Quelltext ist immer noch der aus Post #145 (https://forum.fhem.de/index.php/topic,91781.msg1128665.html#msg1128665)
Muss ich da noch was im Quelltext ändern oder ist da noch was anderes nicht richtig.
Viele Grüsse
Stephan
Probier mal, ob der Fehler mit der angehängten Version weg ist.
Hallo eki
Vielen dank der Fehler ist weg.
Viele Grüsse
Stephan
Zitat von: eki am 09 Februar 2021, 07:26:09
Probier mal, ob der Fehler mit der angehängten Version weg ist.
Hallo eki
Ich habe einen Wunsch: Kannst Du bitte oben im Kommentarfeld eine Versionierung einfügen?
Beispiel:
/* Last Change 2021-02-09 07:15Danke
Gruß
Sailor
Da sprichst Du einen wunden Punkt an. Ich werde, nachdem ja jetzt offensichtlich wieder ein halbwegs stabiler Stand erreicht ist, mal eine Historie in den Header einführen, und das dann auch mal wieder auf git aktualisieren.
So, nach Tagen anderer Beschäftigung - mal wieder um Putzi kümmern. Leider funktioniert es nicht, wie es soll.
@Stelaku
Also bei testVCRobot kommen Koordinaten an. Leider fährt Putzi in PLZ 71254 herum, warum auch immer. Und angezeigt wird auch nichts. kein Haus, kein blauer Punkt. Nichts.
Kannst Dir mir mal bitte Deine aktuelle map.html zeigen?
Und kannst Du mir die Auflösung Deiner PNG-Datei sagen, also x mal y?
Du musst zumindest den Referenzpunkt im Dummy an Deine Heimatadresse anpassen (attr testVCRobot referencepoint x,y) ;). Wurde weiter oben aber auch schon erwähnt, Die richtigen Koordinaten kannst Du Dir über Google Maps holen. Die Karte braucht Geo Koordinaten, Dein Staubsauger hat erst mal ja nur lokale Koordinaten im Dummy wird das dann über den Referenzpunkt entsprechend umgerechnet.
Ahhh, ok. Wackelt sehr, aber ich sehe ein Auto ...
1) In einer anderen Kartendarstellung habe ich OSM, das merkt sich FHEM(FTUI offensichtlich, selbst wenn ich in map.html das von Dir vorgeschlagene Attribut nutze - wenn ich auszoome, kommt die OSM-Karte.
2) Wenn ich dann auf Haus navigiere, sehe ich das Auto - ok, Koordinate auch noch in map.html anpassen.
3) Echtes Problem: Hinter dem Auto ist ein zwar roter Strich - der wird aber (wie erkläre ich das) nicht fortgeführt, der wird immer wieder gelöscht, nur die letzten zwei oder drei jeweils aktuellen Vektoren bleiben sichtbar.
Ich habe bei dem Dummy ein Attribut max-polylength vorgesehen, dort kann man einstellen, wie lang das Polygon maximal werden soll. Keine Ahnung wie der bei Dir steht. Wenn Du den auf einen hohen Wert setzt, werden keine Punkte am Ende des Polygons mehr (oder halt erst nach vielen Punkten) gelöscht (das hatte Stephan auch schon beschrieben).
Der Dummy war übrigens nur als Anregung für Euch gedacht, damit mal ein Start zum Ausprobieren da ist. Dass Ihr den direkt mit allen Parametern (inklusive Referenzpunkt etc.) unreflektiert übernehmt, hatte ich nicht gedacht ;)
Warum denn nicht. Der Dummy ist echt klasse.
Ich habe das attr. für die Polygone im Dummy einfach mal auf 1000000 gestellt.
Viele Grüsse
Stephan
Bin mal gespannt, wann Dein FHEM Server dann in die Knie geht ;). Spätestens dann solltest Du Dich noch mal mit dem Thema Heatmap anfreunden. Für so einen Staubsauger fände ich in erster Linie interessant, ob er schön überall war und keine Ecken ausgelassen hat, wo sich dann doch die Wollmäuse tummeln. Ob er rechtsrum oder linksrum fährt wäre für mich eher nebensächlich. Und dafür ist eine Heatmap meines Erachtens sehr gut geeignet.
Da gebe ich Dir recht. Der Wert ist bei zweiter Betrachtung wirklich sehr hoch. Mit 4000 sollte ich auch schon hinkommen. Aber ich lösche ja jeden Tag das Polygon und Headmap reading.
Zitat von: curt am 11 Februar 2021, 10:17:01
Kannst Dir mir mal bitte Deine aktuelle map.html zeigen?
Und kannst Du mir die Auflösung Deiner PNG-Datei sagen, also x mal y?
Mein Grundriss hat eine Pixelgrösse von 1920x1080 X Y habe ich da leider nicht.
Der Grundriss wird auch nicht über x y auf der Karte positioniert. Sondern über zwei durch jeweils Längen und Breitgraden festgelegte Punkte.
Wenn Du keine png Datei in dem ausgewählten Verzeichnis hast wird ein leeres Rechteck gezeichnet so wie in post #155 (https://forum.fhem.de/index.php/topic,91781.msg1129586.html#msg1129586) zu sehen. Die Grösse des Rechtecks wird Durch diese Zeile im .html Code bestimmt.
data-overlay="../images/default/fp_Grundriss.png,54.6351533, 8.358227,54.6350360, 8.358580,1,0,25"54.6351533, 8.358227 ist da oben links
54.6350360, 8.358580 ist unten rechts.
Wenn Du eine .png im o.g. Pfad hast wird diese nach diesen Koordinaten auseinandergezogen oder zusammengeschrumpft.
Das ist das Frickelige hier die richtigen Koordinaten herauszufinden. Habe mich da auch sehr langsam durch ändern der 5 Stelle hinterm Punkt der längen und Breitengrade herangetastet bis
Der Reinigungsverlauf in meinen Grundriss abgebildet wurde.
Viele Grüsse
Stephan
Zitat von: eki am 11 Februar 2021, 12:51:55
Der Dummy war übrigens nur als Anregung für Euch gedacht, damit mal ein Start zum Ausprobieren da ist. Dass Ihr den direkt mit allen Parametern (inklusive Referenzpunkt etc.) unreflektiert übernehmt, hatte ich nicht gedacht ;)
Irgendwie muss man ja anfangen. Kaputtmachen kann man es später ja immer noch ...
So, zu meinem aktuellen Stand:
Iss-ja-mal-schee ... ein kleines schwarzes Auto fährt auf einer weißen png-Karte rum (siehe Anhang).
Ich habe Fragen:
@Stelaku Du hast da in #145 jetzt ein DOIF "run_state", das setzt offenbar state(?) des Dummy testVCRobot. Welchem Zweck dient das?
@eki Du hast in #131 eine völlig andere Grafik, was hat es damit auf sich?
Doofe Frage: Es wäre ja schön, wenn das kleine Auto seine Farbe ändert: Wenn er putzt grün, wenn er lädt Orange, wenn er Störung hat rot ... ist das implementiert? Dient Stephans DOIF etwa dazu?
Ach, das wichtigste:
Danke!
Hallo curt
das sieht ja schon gut aus.
Das DOIF aus #145 run_state ist wie Du schon vermutet hast genau dafür da um das Icon und die Farbe im map_widget zu bestimmen.
aktuell habe ich mein DOIF so stehen.
defmod run_state DOIF ([Martha_1] eq "Fully charged")\
(set testVCRobot voll)\
\
DOELSEIF\
([Martha_1] eq "Charging")\
(\
set testVCRobot laden\
)\
(\
{fhem("setreading testVCRobot point -1.4,1.5")}\
)\
\
DOELSEIF\
([Martha_1] =~ "recharge")\
(\
set testVCRobot zwischenl\
)\
\
DOELSEIF\
([Martha_1] =~ "cleaning")\
(set testVCRobot clean)\
\
\
attr run_state room KARTE
Je nach dem welches state das dummy testVCRobot dadurch bekommt ändert sich das icon und die Farbe.
Das sieht dann in meiner aktuellen map.html so aus
data-readingstyles='[
"voll:fa-home,,#000000,25,60",
"clean:fa-circle,,#0c00a4,25,60",
"zwischenl:fa-circle,,#ff0000,25,60",
"laden:fa-home,,#ff0000,25,60"
]'
data-stylereading="state">
data-readingstyles bewirkt je nach state des dummy testVCRobot bei mir
state dummy testVCRobot voll => es wird ein schwarzes Haus auf der Karte gezeigt.
state dummy testVCRobot clean => es wird ein blauer Punkt auf der Karte gezeigt.
state dummy testVCRobot zwischenl => es wird ein roter Punkt auf der Karte gezeigt.
state dummy testVCRobot laden => es wird ein rotes Haus auf der Karte gezeigt.
die Farben werden bei mir durch die erste 6 Stellige zahl hinter dem # definiert. Das ist der hex code für die jeweilige Farbe. den code dafür kannst Du z.B.
hier finden https://html-color-codes.info/webfarben_hexcodes/ (https://html-color-codes.info/webfarben_hexcodes/)
die zweite Zahl bei mir 25 gibt die grösse des Icon wieder.
Die dritte zahl bei mir die 60 sagt etwas über die Transparenz des Icons aus.
viele Grüsse
Stephan
Bzgl. des Findens von Koordinaten vergaß ich einen Hinweis:
https://www.wikimapia.org hat ein Fadenkreuz. Luftbild als Overlay an und so weit wie möglich reinzoomen, Fadenkreuz durch Verschieben der Karte positionieren, Koordinate aus der URL kopieren. Fertig.
(das attr. für die Polygone im Dummy)
Zitat von: Stelaku am 12 Februar 2021, 18:59:23
Mit 4000 sollte ich auch schon hinkommen.
Spätestens beim Rubbel-Wischen reicht das nicht.
Zitat von: Stelaku am 12 Februar 2021, 18:59:23
das sieht ja schon gut aus.
Dank Deiner Vorarbeit und Hilfe wird das schrittweise immer besser!
Schrittweise ... es hakt hoch, vermutlich bei meinem Verständnis der Sache.
Zitat von: Stelaku am 12 Februar 2021, 18:59:23
Das DOIF aus #145 run_state ist wie Du schon vermutet hast genau dafür da um das Icon und die Farbe im map_widget zu bestimmen.
aktuell habe ich mein DOIF so stehen.
Das sieht dann in meiner aktuellen map.html so aus
Alles übernommen.
"
{fhem("setreading testVCRobot point 1.2,1.2")}" dient der regelmäßigen Kalibrierung? Da müsste ich vermutlich noch den Winkel setzen; ich habe aktuell das Problem, dass er gern mal einen weiteren Durchlauf mit anderem Winkel macht.
Zitat von: Stelaku am 12 Februar 2021, 18:59:23
data-readingstyles bewirkt je nach state des dummy testVCRobot bei mir
state dummy testVCRobot voll => es wird ein schwarzes Haus auf der Karte gezeigt.
Aber nur sehr theoretisch:
Zitat von: Stelaku am 12 Februar 2021, 18:59:23
die Farben werden bei mir durch die erste 6 Stellige zahl hinter dem # definiert. Das ist der hex code für die jeweilige Farbe. den code dafür kannst Du z.B.
hier finden https://html-color-codes.info/webfarben_hexcodes/ (https://html-color-codes.info/webfarben_hexcodes/)
die zweite Zahl bei mir 25 gibt die grösse des Icon wieder.
Die dritte zahl bei mir die 60 sagt etwas über die Transparenz des Icons aus.
Webcolors ist bekannt. Der Rest wackelt, jedenfalls bei mir. Oder muss derzeit so, keine Ahnung:
Also erstens ändert der aufgezeichnete Fahrweg (real: das Polygon) je nach aktuellem state komplett die Farbe. Also wenn er fährt, ist der komplette aufgezeichnete Weg grün, wenn er lädt, färbt sich der komplette aufgezeichnete Fahrweg in blau - muss das so?
Weiterhin hätte ich angenommen, dass der zweite Wert von data-stroke die Dicke des Strichs des Fahrwegs beeinflusst - dem ist aber nicht so. Sondern der Fahrweg ist irre dick. Wenn ich nun jeweils den zweiten Parameter von data-readingstyles von 25 auf 5 setze, macht das den Fahrweg "dünner".
Leider mit dem Seiteneffekt, dass ich das aktuelle Icon nie sehe - das hat damit ja auch nur 5px. Also da mache ich noch irgendwas falsch. Oder habe ich die falsche Version von widget_maps (146745 Byte)? Oder das muss derzeit so?
Abschließend, nur als Info:
Für state (und run_state) von Putzi sind mir bislang folgende (weiteren) Werte untergekommen:
* cleaning vacuum
* cleaning vacuum and mop
* cleaning mop
* paused (hängt fest oder wenn der Akku runter ist)
* ilde (fertig, findet Ladestation nicht) [Could not navigate to location]
* Low battery
* dock
* standby (keine Ladestation da, war Startpunkt, Putzi wieder dort)
* error (unsicher, meine ich gesehen zu haben)
Vielleicht postest Du hier mal Deine Definition (html) und ein List Deines Dummies, dann ist die Hilfe einfacher.
Wenn Du wirklich 2 Map divs mit dem gleichen Wert bei data-mapgroup so wie in meinem Beispiel verwendest, dann sollte die Darstellung des Pfades und des Icons komplett unabhängig voneinander steuerbar sein (aber so, wie Du das schilderst, hast Du alles in ein Map Div gepackt, dann geht das nicht).
Die Darstellung in #131 ist durch die Nutzung einer Heatmap erzeugt, das habe ich weiter oben auch erklärt. Dabei werden in den Dummy Einträge mit Position und Häufigkeit des Erreichens dieser Position im Reading heatmap eingetragen (wie fein das aufgelöst wird, hängt vom Attribut gridsize ab). Auf der Karte erfolgt dann eine Einfärbung der angefahrenen Punkte entsprechend der Häufigkeit. Damit könnte man sehen, wo der Staubsauger häufiger war und wo er eventuell Lücken lässt.
Hallo curt
Zitat{fhem("setreading testVCRobot point 1.2,1.2")}
habe ich dafür das das Icon beim Laden von Martha auch auf der Position von der Ladestation ist. Wenn Martha zu Laden fährt passt das nicht immer. Dann war das rote Haus immer irgendwo auf der Karte und nicht in der Ladestation.
ZitatAlso erstens ändert der aufgezeichnete Fahrweg (real: das Polygon) je nach aktuellem state komplett die Farbe. Also wenn er fährt, ist der komplette aufgezeichnete Weg grün, wenn er lädt, färbt sich der komplette aufgezeichnete Fahrweg in blau - muss das so?
Ich glaube Du hast das attr. data-readingstyles in beiden definitionen ( id=Test1 und id=Test2 ) eingetragen. Das brauchst Du aber nur in der zweiten Definition. Vergleich das mal mit meinem html aus #145 (https://forum.fhem.de/index.php/topic,91781.msg1128665.html#msg1128665). Der ist immer noch aktuell.
ZitatWeiterhin hätte ich angenommen, dass der zweite Wert von data-stroke die Dicke des Strichs des Fahrwegs beeinflusst - dem ist aber nicht so. Sondern der Fahrweg ist irre dick. Wenn ich nun jeweils den zweiten Parameter von data-readingstyles von 25 auf 5 setze, macht das den Fahrweg "dünner".
Leider mit dem Seiteneffekt, dass ich das aktuelle Icon nie sehe - das hat damit ja auch nur 5px. Also da mache ich noch irgendwas falsch. Oder habe ich die falsche Version von widget_maps (146745 Byte)? Oder das muss derzeit so?
Die Farbe und dicke des Striches wird durch data_stroke der ersten definition bestimmt id="Test1". Das Icon wird in der zweiten definition bestimmt.
Der Strich wird bei mir zur Zeit so bestimmt
data-stroke="#0c00a4,2,60">Verdammt jetzt war ich zu langsam eki hat auch schon was geschrieben. :)
Viele Grüsse
Stephan
Ganz herzlichen Dank Euch beiden - das hatte ich nicht verstanden. Jetzt habe ich es verstanden.
Bei dem setreading-Vorschlag muss ich noch üben, das läuft bei mir noch nicht richtig. Auch der Winkel stimmt noch nicht.
Hallo zusammen,
gibt es eine Möglichkeit dem Attribut data-center die Werte von data-latitude und data-longitude zu geben?
Die Werte von data-latitude und data-longitude ändern sich bei mir häufig. Und ich würde gerne immer den aktuellen Kartenausschnitt sehen.
VG
OK, hab es jetzt.
Da ich nicht das TRAFFIC Modul nutze und somit nicht automatisch das Reading GoogleMapsCenter habe, habe ich einfach ein userRading "GoogleMapsCenter" erstellt und da die Koordinaten reingeschrieben.
Dann einfach data-center weggelassen und es funktioniert.
Hier mein userReading:
GoogleMapsCenter {my $lat = ReadingsVal('carnet','position_lat',0);my $lng=ReadingsVal('carnet','position_lng',0); return $lat.','.$lng;}
Hallo Eki,
im grundsätzlich genialen MAP-Widget bin ich auf ein kleines Problemchen gestoßen:
Einwandfrei funktioniert die Einbindung einer Karte in eine Pagebutton-Umgebung:
<!DOCTYPE html>
<html>
<title>FHEM</title>
<body>
<div class="page" id="content6_5">
<div class="gridster">
<ul>
<li data-row="2" data-col="1" data-sizex="9" data-sizey="5" style="background: rgba(25,25,25,.9);">
<div id="Karte_Umgebung"
style="height:100%; width:100%;"
data-type="maps"
data-map_type="Google"
data-mapgroup="1"
data-stroke="#0000FF,20,80"
data-center="51.xxx,7.yyy"
data-zoom="14"
data-showdetails="false"
data-style="Dark"
data-device="global"
></div>
</li>
</ul>
</div>
</div>
</body>
</html>
Siehe hierzu das erste Bild.
Um auch die Radarkontrollen in der Karte anzuzeigen, wird der Code erweitert:
<!DOCTYPE html>
<html>
<title>FHEM</title>
<body>
<div class="page" id="content6_5">
<div class="gridster">
<ul>
<li data-row="2" data-col="1" data-sizex="9" data-sizey="5" style="background: rgba(25,25,25,.9);">
<div id="Karte_Umgebung"
style="height:100%; width:100%;"
data-type="maps"
data-map_type="Google"
data-mapgroup="1"
data-stroke="#0000FF,20,80"
data-center="51.xxx,7.yyy"
data-zoom="14"
data-showdetails="false"
data-style="Dark"
data-device="global"
></div>
<div id="Radar_Umgebung"
style="height:100%; width:100%;"
data-type="maps"
data-map_type="Google"
data-mapgroup="1"
data-stroke="#0000FF,20,80"
data-center="51.xxx,7.yyy"
data-zoom="14"
data-showdetails="false"
data-traffic="true"
data-blitzer="Radarkontrolle"
data-style="Dark"
data-icon="../images/Blitzer3.png"
data-feature_style='{
"popup_properties_click":"create_date",
"popup_properties_move":"vmax street",
"display_styles":{
"vmax.10":{"label":"10","fontSize":"10px"},
"vmax.20":{"label":"20","fontSize":"10px"},
"vmax.30":{"label":"30","fontSize":"10px"},
"vmax.40":{"label":"40","fontSize":"10px"},
"vmax.50":{"label":"50","fontSize":"10px"},
"vmax.60":{"label":"60","fontSize":"10px"},
"vmax.70":{"label":"70","fontSize":"10px"},
"vmax.80":{"label":"80","fontSize":"10px"},
"vmax.90":{"label":"90","fontSize":"10px"},
"vmax.100":{"label":"100","fontSize":"10px"},
"vmax.110":{"label":"110","fontSize":"10px"},
"vmax.120":{"label":"120","fontSize":"10px"},
"vmax.130":{"label":"130","fontSize":"10px"}
}
}'>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
Auch das funktioniert weitgehend. Aber:
Die Karte wird außerhalb der vorgesehenen Kachel angezeigt. Mit dem Finger kann man die gesamte (!) Oberfläche vertikal verschieben. Mit zwei Fingern kann man innerhalb der Kachel die Position und den Zoom verstellen. Vgl. Screenshot 2.
Gewünscht ist, dass die Kachel festgenagelt ist, so wie bei der Darstellung ohne Blitzersymbole. Das unerwünschte Verhalten scheint mit der Darstellung der überlagerten Symbole zusammenzuhängen. Ich hoffe, dass mit diesen Angaben eine Eingrenzung der Ursache möglich ist.
Herzliche Grüße
Ich bin mir nicht sicher ob ich Dein Problem richtig verstanden habe. Für mich sieht es nach Deinen Beispielbildern so aus, als ob mit der zweiten Kartendefinition (da gleiche Mapgroup wird das ja alles in ein Kartenfenster gezeichnet), die Positionierung der Karte an eine andere Stelle wandert (nicht mehr in der Kachel). Das liegt wahrscheinlich aber nicht am Widget sondern an Deinem HTML, da muss irgenwo etwas anders sein. Versuch mal beim zweiten DIV den style wegzulassen oder setzte das auf 0% für width und height.
Zitat von: eki am 20 August 2021, 12:14:05
Ich bin mir nicht sicher ob ich Dein Problem richtig verstanden habe. Für mich sieht es nach Deinen Beispielbildern so aus, als ob mit der zweiten Kartendefinition (da gleiche Mapgroup wird das ja alles in ein Kartenfenster gezeichnet), die Positionierung der Karte an eine andere Stelle wandert (nicht mehr in der Kachel). Das liegt wahrscheinlich aber nicht am Widget sondern an Deinem HTML, da muss irgenwo etwas anders sein. Versuch mal beim zweiten DIV den style wegzulassen oder setzte das auf 0% für width und height.
In der Tat. Das war es. Vielen, vielen Dank. :D Man kann im zweiten
div sogar noch mehr weglassen:
Neben der Problemursache
style auch
data-map_type
data-center
data-zoom
data-showdetails
data-style
Ja, alles was die Karte grundsätzlich betrifft, wird beim ersten gefundenen DIV mit data-type="maps" gesetzt. Kommt ein zweites DIV mit dem gleichen data-mapgroup Wert, dann werden Objekte, die dort definiert werden, in die gleiche Karte und damit in das erste DIV eingezeichnet. Das zweite DIV ist damit eigentlich unwichtig und dient nur zum Übergeben der Definition.
Hallo,
ich habe in meinem FTUI meinen Google API Key angegeben
<html>
<meta name="GoogleMapsApiKey" content="xxxxxxx">
<title>ReisHome</title>
und versucht über
<div data-type="gmaps" data-device="xxxx" data-latitude="48" data-map_type="Google" data-mapgroup="1" data-zoom="15" data-stroke="#dd0033,7,70" data-longitude="11" style="height:100%; width:100%;"></div></div>
Eine Position in einer Google-Map darzustellen. Leider bekomme ich nur die Fehlermeldung: widget_gmaps.js:1 SyntaxError: unexpected token: identifier
Woran kann dies liegen? (habe es auch mit maps anstelle von gmaps versucht)
Also gmaps solltest Du auf keinen Fall mehr verwenden, das ist uralt und wurde durch maps ersetzt. Bitte ausschließlich maps verwenden.
Welche Version verwendest Du (die letzte aus dem Thread hier)?
Kommt bei Verwendung von maps auch die gleiche Fehlermeldung?
Poste mal dein gesamtes HTML file (wenn Du willst auch per PM und natürlich die Keys durch xxx ersetzt) dann kann ich versuchen das nachzuvollziehen.
Hallo Eki,
seit unserer Korrespondenz vom August funktioniert die Kartendarstellung mit den Blitzern einwandfrei (und liefert mir den Hinweis, dass die Stadt heute, am 31.12., an einer umsatzträchtigen Stelle noch einmal ihr Kassenhäuschen aufgestellt hat).
Der Code lautet:
<div id="Home_XXX"
style="height:100%; width:100%;"
data-type="maps"
data-map_type="Google"
data-mapgroup="1"
data-stroke="#0000FF,20,80"
data-traffic="true"
data-center="xxx,yyy"
data-zoom="14"
data-showdetails="false"
data-style="Dark"
data-device="global"
data-latitude="latitude"
data-longitude="longitude"
data-icon="../images/Home2.png"
></div>
<div id="Radar_XXX"
data-type="maps"
data-mapgroup="1"
data-stroke="#0000FF,20,80"
data-blitzer="Radarkontrolle"
data-icon="../images/Blitzer3.png"
data-feature_style='{
"popup_properties_click":"create_date",
"popup_properties_move":"vmax street",
"display_styles":{
"vmax.10":{"label":"10","fontSize":"10px"},
"vmax.20":{"label":"20","fontSize":"10px"},
"vmax.30":{"label":"30","fontSize":"10px"},
"vmax.40":{"label":"40","fontSize":"10px"},
"vmax.50":{"label":"50","fontSize":"10px"},
"vmax.60":{"label":"60","fontSize":"10px"},
"vmax.70":{"label":"70","fontSize":"10px"},
"vmax.80":{"label":"80","fontSize":"10px"},
"vmax.90":{"label":"90","fontSize":"10px"},
"vmax.100":{"label":"100","fontSize":"10px"},
"vmax.110":{"label":"110","fontSize":"10px"},
"vmax.120":{"label":"120","fontSize":"10px"},
"vmax.130":{"label":"130","fontSize":"10px"}
}
}'>
</div>
<div data-type="label" class="bigger bold" data-device="Verkehrslage" data-get="duration_in_traffic" data-pre-text="Fahrzeit nach ZZZ: " data-substitution='["mins","Min."]' style="color: #788A88; position: absolute; top: 10px; right: 100px;"></div>
Nun habe ich das Ganze auch mit OSM ausprobiert (vorher API-Key geholt, hat funktioniert). Im obigen Code wurde nur eine einzige Sache geändert:
data-map_type="OSM" statt data-map_type="Google"
Danach werden die Blitzer nicht mehr in der Karte angezeigt.
Testweise habe ich den Blitzer-Code in das erste <div> eingefügt, also auf data-mapgroup verzichtet. Danach wurden die Blitzer angezeigt, allerdings mit dem falschen data-icon, welches ich im ersten Teil für die Darstellung der Heimatadresse definiert habe. Diese Problematik hatte mich seinerzeit bewogen, mapgroup zu nutzen.
Meine Schlussfolgerung lautet, dass data-mapgroup mit OSM nicht einwandfrei arbeitet.
Das verwendete Widget hat 146.731 Byte und ist m.E. die aktuelle Version.
Eine zweite, hiervon unabhängige Beobachtung: Am Ende des Codes wird ein label erzeugt, welche eine bestimmte Fahrzeit ausgibt. Dies wird mittels "position: absolute ... " über die Karte gelegt. Das funktioniert mit Google einwandfrei. Bei OSM wird dieser Text in den Hintergrund gesetzt und damit verdeckt, unabhängig von der Reihenfolge der divs im Code. Bisher habe ich es nicht geschafft, den Text in den Vordergrund zu bringen.
Alles in allem sind das Luxusprobleme. Vielleicht ist die Lösung aber nicht weit. In diesem Fall würde ich mich hierüber freuen.
Mit den besten Wünschen für das neue Jahr
Ulm32b
Und noch 'ne Frage zu Blitzer:
Man kann mittels
"display_styles":{
"vmax.10":{"label":"10","fontSize":"10px"},
...}
die Schriftgröße der angezeigten Geschwindigkeitsbegrenzung einstellen. Wenn ich die ändere, muss auch die Größe des Icons (blitzer2.png) geändert werden. Aber wie? Nach erfolglosen Selbstversuchen frage ich hier bei Kundigen nach.
Viele Grüße
Ulm32b
Erstmal viel lob !! Tolles Widget.
Hat sich mal jemand damit beschäftigt die Google Maps Control buttons +/- Karte/Sattelit/Verkehr auszublenden ?
ich bekomm es nicht hin, finde auch auf der Google cloud control seite nichts dergleichen.
Müsste per data-hide-ui="true" gehen.
Hallo zusammen,
das Widget läuft prima.
Ich nutze derzeit "noch" FTUI Version 2.6.*...
In der mobilen Variante bekomme ich es allerdings nicht zum laufen.
https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/mobil/index_nav_mobil.html (https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/mobil/index_nav_mobil.html)
Der Google API Key wurde eingefügt.
Hier einmal der code. Bissher habe ich es nicht geschafft die Karte darzustellen. Es wird nichts angezeigt.
In der "normalen" index.html sieht es bis auf die Section Tags genau gleich aus und da klappt es.
<section>
<div class="big col-1-2 left-align left-space">Karte</div>
<div
style="height:100%; width:100%"
data-type="maps"
data-device="MQTT_Touran"
data-zoom="15"
data-label="fa-car"
data-icon="no-icon"
data-map_type="Google"
class="row right-align right-space">
</div>
</section>
Was heißt denn nichts (siehst Du den grauen Hintergrund ohne Inhalt oder wirklich gar nichts).
Tatsächlich garnichts. Auch keinen Hintergrund. Kann es sein, dass das ganze nur beim Grid Layout funktioniert. Wenn ich das richtig verstanden habe, nutzt die mobile Version kein Grid..
Eigentlich kann das mit Grid nichts zu tun haben, ich habe das zum Testen auch schon ohne Grid ausprobiert. Kannst Du mal Dein komplettes HTML File der mobilen Version hier posten (oder per PM schicken, wenn Du es hier nicht einstellen willst). Den Google API Key kannst Du ja rauslöschen.
Hallo eki,
index_nav_mobil.html
<!DOCTYPE html>
<html>
<head>
<!--
/* FHEM tablet ui */
/*
* UI builder framework for FHEM
*
* Version: 2.6.*
* URL: https://github.com/knowthelist/fhem-tablet-ui
*
* Copyright (c) 2015-2018 Mario Stephan <mstephan@shared-files.de>
* Under MIT License (http://www.opensource.org/licenses/mit-license.php)
*
* - create a new folder named 'tablet' in /<fhem-path>/www
* - copy all files incl. sub folders into /<fhem-path>/www/tablet
* - Tadaaa! A new fhem ui in http://<fhem-url>:8083/fhem/tablet/index_nav_mobil.html
*/
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="widget_base_width" content="74">
<meta name="widget_base_height" content="71">
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="gridster_disable" content="1">
<meta name="longpoll" content="1"> <!-- 1=longpoll;0=shortpoll every 30sec -->
<meta name="debug" content="0"> <!-- verbose level 1-6 = output to console;0 = not output -->
<meta name="GoogleMapsApiKey" content="xxxx">
<link rel="stylesheet" href="css/fhem-darkblue-ui.css" />
<script src="js/fhem-tablet-ui.js" defer></script>
<script src="js/widget_maps.js" defer></script>
<title>FHEM-Tablet-UI-mobil</title>
</head>
<body>
<!-- Demo FTUI 2.6 mobil page with slideout navigation -->
<nav id="menu">
<div data-type="link" class="default large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-home"
data-color="white"
data-text-align="right"
data-load="#content1"
data-url="#content_home.html"
data-active-color="green"
data-active-pattern="(.*index_nav_mobil.html|.*#content_home.html)">Home</div>
<div data-type="link" class="prefetch large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-lightbulb-o"
data-color="white"
data-text-align="right"
data-load="#content2"
data-url="#content_lights.html"
data-active-color="green"
data-active-pattern=".*#content_lights.html">Licht</div>
<div data-type="link" class="prefetch large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa fa-video-camera"
data-color="white"
data-text-align="right"
data-load="#content3"
data-url="#content_kamera.html"
data-active-color="green"
data-active-pattern=".*#content_kamera.html">Kamera</div>
<div data-type="link" class="nocache large top-space-2x left-space-3x"
data-width="150"
data-icon-left="oa-it_camera"
data-color="white"
data-text-align="right"
data-load="#content4"
data-url="#content_ueberwachung.html"
data-active-color="green"
data-active-pattern=".*#content_ueberwachung.html">Überwach.</div>
<div data-type="link" class="prefetch large top-space-2x left-space-3x"
data-width="150"
data-icon-left="oa-temp_temperature"
data-color="white"
data-text-align="right"
data-load="#content5"
data-url="#content_heizung.html"
data-active-color="green"
data-active-pattern=".*#content_heizung.html">Heizung</div>
<div data-type="link" class="prefetch large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-oil-can"
data-color="white"
data-text-align="right"
data-load="#content6"
data-url="#content_oel.html"
data-active-color="green"
data-active-pattern=".*#content_oel.html">Öl</div>
<div data-type="link" class="prefetch large top-space-2x left-space-3x"
data-width="150"
data-icon-left="fa-car-side"
data-color="white"
data-text-align="right"
data-load="#content7"
data-url="#content_auto.html"
data-active-color="green"
data-active-pattern=".*#content_auto.html">Auto</div>
<div data-type="link" class="prefetch large top-space-2x left-space-3x"
data-width="150"
data-icon-left="mi-local_pharmacy"
data-color="white"
data-text-align="right"
data-load="#content8"
data-url="#content_health.html"
data-active-color="green"
data-active-pattern=".*#content_health.html">Health</div>
</nav>
<main id="panel" class="">
<header id="header-nav" class="bg-lightgray row">
<div data-type="slideout" class="col-1-8 bigger center-align notouch"></div>
<div id="linkname" class="col-3-6 large bold center middle"></div>
<div data-type="symbol" data-icon="fa-bell" data-device="dummy2" data-get-on="on.*" data-get-off="off" class="col-1-6 right-align large black"></div>
<div data-type="symbol" data-device="AlleFenster" data-icon="ftui-window" class="col-1-6 large"></div>
</header>
<div class="page" id="content1"></div>
<div class="page" id="content2"></div>
<div class="page" id="content3"></div>
<div class="page" id="content4"></div>
<div class="page" id="content5"></div>
<div class="page" id="content5"></div>
<div class="page" id="content6"></div>
<div class="page" id="content7"></div>
<div class="page" id="content8"></div>
</main>
</body>
</html>
content_auto.html
<!DOCTYPE html>
<html>
<head></head>
<body>
<div class="page" id="content7">
<section>
<div class="large col-1-1 bold">e-UP</div>
</section>
<section>
<div class="large col-1-2 left-align left-space bold">Aktualisiert</div>
<div data-type="label" class="large"
data-device="MQTT_Touran"
data-get='letzteAktualisierung'
data-pre-text="am "
class="col-1-2 right-align right-space">
</div>
</section>
<section>
<div class="large col-1-2 left-align left-space">Status</div>
<div data-type="label"
data-device="MQTT_Touran"
data-get='currentSOC_pct'
data-post-text=" %"
class="col-1-2 right-align right-space">
</div>
</section>
<section>
<div class="large col-1-2 left-align left-space">Ladezeit</div>
<div class="col-2-2 right-align">
<div data-type="symbol"
data-device="MQTT_Touran"
data-get='remainingChargingTimeToComplete_min'
data-icons='["fa-clock-o"]'
class="inline">
</div>
<div data-type="label"
data-device="MQTT_Touran"
data-get='remainingChargingTimeToComplete_min'
data-post-text=" Minuten"
class="inline">
</div>
</div>
</section>
<section>
<div class="large col-1-2 left-align left-space">Reichweite</div>
<div class="col-2-2 right-align">
<div data-type="symbol"
data-device="MQTT_Touran"
data-get='cruisingRangeElectric_km'
data-icons='["fa-road"]'
class="inline">
</div>
<div data-type="label"
data-device="MQTT_Touran"
data-get='cruisingRangeElectric_km'
data-post-text=" KM"
class="inline">
</div>
</div>
</section>
<section>
<div class="large col-1-2 left-align left-space">Klima Status</div>
<div data-type="label"
data-device="MQTT_Touran"
data-get='climatisationState'
data-pre-text="Klima Status "
class="col-1-2 right-align right-space">
</div>
</section>
<section>
<div class="large col-1-2 left-align left-space">Klima</div>
<div data-type="select"
data-device="MQTT_Touran"
data-set="climatisation"
data-items='["start","stop"]'
data-alias='["Klima an","Klima aus"]'
data-get='climatisationState'
class="col-1-2 right-align right-space">
</div>
</section>
<section>
<div class="big col-1-2 left-align left-space">Karte</div>
<div
style="height:100%; width:100%"
data-type="maps"
data-device="MQTT_Touran"
data-zoom="15"
data-label="fa-car"
data-icon="no-icon"
data-map_type="Google"
class="row right-align right-space">
</div>
</section>
<section>
<div class="large col-1-1 bold">Wallbox</div>
</section>
<section>
<div class="large col-1-2 left-align left-space bold">Aktualisiert</div>
<div data-type="label" class="large"
data-device="httpmod_ecb1"
data-get='letzteAktualisierung'
data-pre-text="am "
class="col-1-2 right-align right-space">
</div>
</section>
<section>
<div class="large col-1-2 left-align left-space">Ampere</div>
<div class="col-2-2 right-align">
<div data-type="symbol"
data-device="httpmod_ecb1"
data-get='chargecontrols_01_currentpwmamp'
data-icons='["oa-measure_power_meter"]'
data-limits='[0,6]'
data-colors='["#FF0000","green"]'
class="inline">
</div>
<div data-type="label"
data-device="httpmod_ecb1"
data-get='chargecontrols_01_currentpwmamp'
data-post-text=" A"
class="inline">
</div>
</div>
</section>
<section>
<div class="large col-1-2 left-align left-space">Ladung</div>
<div class="col-2-2 right-align">
<div data-type="symbol"
data-device="httpmod_ecb1"
data-get='LadungAnAus'
data-icons='["mi-power"]'
data-states='["Wird nicht geladen","Wird geladen"]'
data-colors='["#FF0000","green"]'
class="inline">
</div>
<div data-type="label"
data-device="httpmod_ecb1"
data-get='LadungAnAus'
class="inline">
</div>
</div>
</section>
<section>
<div class="large col-1-2 left-align left-space">Gesamtverbr</div>
<div class="col-2-2 right-align">
<div data-type="symbol"
data-device="Demo_at_j2r_nonjsnmap_sum"
data-get='Summe'
data-icons='["mi-show_chart"]'
class="inline">
</div>
<div data-type="label"
data-device="Demo_at_j2r_nonjsnmap_sum"
data-get='Summe'
data-post-text=" KWh"
data-fix="1"
class="inline">
</div>
</div>
</section>
</body>
</html>
In der content_auto.html ist das Maps Widget mit drin.
Gruß
Ich habe das jetzt mal bei mir ausprobiert. Das Problem ist dass die Höhe des Kartenfensters mit 100% angegeben ist (woher soll der Browser wissen, worauf sich die 100% beziehen. Wenn Du hier einen absoluten Wert angibst (300px oder so) dann wird die Karte sichtbar.
Das war es!
Vielen Dank!
hi Leute,
ich bekomme es einfach nicht zum laufen, habe alle API-KEYS (Google & Tomtom) hinterlegt, trotzdem immer die Meldung.
Wo kann das Problem liegen?
<div data-type="maps"
data-map_type="OSM"
data-device="my_skoda"
data-latitude="position_latitude"
data-longitude"position_longitude"
data-language="de"
class="">
</div>
Poste mal bitte die komplette HTML Datei mit dem Header (die API Keys natürlich vorher löschen).