Map Widget reloaded - Neue Version des Map Widgets

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

Vorheriges Thema - Nächstes Thema
Drucken
Nach unten Seiten 1 ... 5 6 7 8 9 ... 13
Benutzer-Aktionen

eki

#90
13 Oktober 2020, 12:44:16
trf...Arbeitsweg sind jeweils FHEM devices vom Typ "TRAFFIC" mit entsprechenden start_address und end_address Attributen.
Beispiel (braucht einen Google API Key):
Code Auswählen

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:
Code Auswählen

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

somansch

#91
14 Oktober 2020, 21:47:28
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.

Code Auswählen
<!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"  :)

Ulm32b

#92
24 Oktober 2020, 17:06:36
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:
Code Auswählen
"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?

Sailor

#93
25 Oktober 2020, 14:20:01
Hallo eki,

dank deiner Definition konnte ich die Blitzer auf der Map abbilden.
Leider ohne das Bild Blitzer2.png

Code Auswählen

<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

Code Auswählen

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
******************************
Man wird immer besser...

Ulm32b

#94
25 Oktober 2020, 19:00:17
Versuche es mal eine Ebene höher:
.../www/images/...

Habe ich auch erst falsch gemacht. ;)

Sailor

#95
07 November 2020, 20:31:23 Letzte Bearbeitung: 07 November 2020, 21:00:49 von Sailor
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
******************************
Man wird immer besser...

Darkrabbit

#96
11 November 2020, 12:26:41
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?  ???

eki

#97
13 November 2020, 17:09:52
Poste mal Deine Definition (HTML Code)

Darkrabbit

#98
14 November 2020, 08:17:07
Hier das HTML-Coding:

Code Auswählen
            <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  :(


eki

#99
19 November 2020, 09:37:20
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)

Code Auswählen

<meta name="OSMMapsApiKey" content="xxx">
<meta name="TomTomApiKey" content="xxx">

Darkrabbit

#100
19 November 2020, 13:25:37
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!   :)

Sailor

#101
29 Dezember 2020, 21:00:36 Letzte Bearbeitung: 30 Dezember 2020, 00:16:18 von Sailor
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:

Code Auswählen

{
"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
Code Auswählen
"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?
Code Auswählen

"display_styles":{
"emergency.pharmacy":{"label":"mi-local_pharmacy","strokeColor":"green"},
"traffic.speedcam":{"label":"speedcam","strokeColor":"red"}
}


Danke für Eure Stupser

Umsetzung:

Widget:

Code Auswählen

<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
******************************
Man wird immer besser...

eki

#102
29 Dezember 2020, 21:40:05
Zu 1): 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.

Sailor

#103
29 Dezember 2020, 21:51:16
Hallo eki

Zitat von: eki am 29 Dezember 2020, 21:40:05
Zu 1): 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
******************************
Man wird immer besser...

Sailor

#104
30 Dezember 2020, 13:40:35
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
******************************
Man wird immer besser...
Drucken
Nach oben Seiten 1 ... 5 6 7 8 9 ... 13
Benutzer-Aktionen