[Closed] Neues FTUI Widget Kartendarstellung mit Google Maps API

[eki]

Im Moment zum Testen muss es eine Datei auf dem Server sein. Ich werde aber mal schauen, ob ich das auch über ein Reading einbauen kann.

[ToM_ToM]

Hi eki,

irgendwie bekomme ich dein Beispiel nicht zum laufen.

Code Auswählen Erweitern


<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="false"
data-traffic="true"
data-mapgroup="0"
data-geojson="data/test3.geojson"
data-label="fa-car"
data-stroke="#0000AA,20,70"
data-feature_style='{
"popup_properties_click":"timestamp",
"display_styles":{
"home.yes":{
"label":"fa-home",
"opacity":"0.8",
"strokeColor":"red",
"zoom_min":"11",
"zoom_max":"100"
}
}
}'>
</div>


Hatte es noch angepasst da eine schließende Klammer und das > gefehlt hatte, aber es kommt beim Laden ein Fehler (siehe Anhang)
Datei liegt auch im Tablet-Unterordner "data".

VG, Thomas

[basty2]

3 seiten für swiper, die ich per DOIF steuere. Iframe funktioniert, wenn man heigth und width angibt.

Edit: Fehlermeldungen beim Laden der Seite bekomme ich keine.

Hi Eki,

konntest Du das schon nachstellen oder brauchst Du weitere Infos?

Grüße

[eki]

Hi eki,

irgendwie bekomme ich dein Beispiel nicht zum laufen.

Code Auswählen Erweitern


<div id="myMap"
style="height:100%; width:100%"
data-type="gmaps"
data-showdetails="false"
data-traffic="true"
data-mapgroup="0"
data-geojson="data/test3.geojson"
data-label="fa-car"
data-stroke="#0000AA,20,70"
data-feature_style='{
"popup_properties_click":"timestamp",
"display_styles":{
"home.yes":{
"label":"fa-home",
"opacity":"0.8",
"strokeColor":"red",
"zoom_min":"11",
"zoom_max":"100"
}
}
}'>
</div>


Hatte es noch angepasst da eine schließende Klammer und das > gefehlt hatte, aber es kommt beim Laden ein Fehler (siehe Anhang)
Datei liegt auch im Tablet-Unterordner "data".

VG, Thomas

Ich habe es mit genau Deiner Definition bei mir probiert und da sieht es gut aus (siehe anghängtes Bild).

Bitte versuche es mal mit der hier angehängten Version (Die Fehlermeldung deutet für mich darauf hin, dass Du nicht die neueste Version des scripts verwendest).

[eki]

Hi Eki,

konntest Du das schon nachstellen oder brauchst Du weitere Infos?

Grüße

Nein, ich habe das leider noch nicht geschafft, sorry melde mich sobald ich etwas gefunden habe. Ich brauche nicht mehr Info sondern mehr Zeit 

[ToM_ToM]

Bitte versuche es mal mit der hier angehängten Version (Die Fehlermeldung deutet für mich darauf hin, dass Du nicht die neueste Version des scripts verwendest).

Ah tatsächlich. Jetzt geht's Cool.
Kannst du das zu den Standardupdates hinzufügen (https://raw.githubusercontent.com/knowthelist/fhem-tablet-ui/master/controls_fhemtabletui.txt) ?

Dann werde ich damit mal ein wenig rumspielen.

EDIT: Testdatei 1 und 2 zeigen bei mir keine Daten auf der map. Nur die 3 funktioniert.

VG, Thomas

[eki]

Hi. Hat jemand die Karte im Swiper Widget hinbekommen? Ohne Swiper funktioniert es, mit Swiper wird die Karte nicht angezeigt und auch nicht abgerufen.

Ich habe es jetzt mal nachgestellt. Ich denke es liegt an der Höhe des Kartenfensters in den "swipes". Der Parameter data-height wird im gmaps Widget nicht berücksichtigt. Dadurch wird das Fenster 0 Pixel hoch und nichts ist zu sehen.
Was passiert denn, wenn Du statt data-height="500" style="height: 500px;" verwendest. Bei mir hat es damit funktioniert.

[basty2]

Ich habe es jetzt mal nachgestellt. Ich denke es liegt an der Höhe des Kartenfensters in den "swipes". Der Parameter data-height wird im gmaps Widget nicht berücksichtigt. Dadurch wird das Fenster 0 Pixel hoch und nichts ist zu sehen.
Was passiert denn, wenn Du statt data-height="500" style="height: 500px;" verwendest. Bei mir hat es damit funktioniert.

Danke, jetzt geht es.

[ToM_ToM]

Im Moment zum Testen muss es eine Datei auf dem Server sein. Ich werde aber mal schauen, ob ich das auch über ein Reading einbauen kann.

Hi eki, hast du hier schon eine Idee wie man das aus ein Reading lesen könnte?

Und gibt es eine Möglichkeit, eine Linie anzeigen zu lassen, aber den letzten Punkt eben als Punkt (Markierung) auf der Karte?

VG, Thomas

[eki]

Leider habe ich da noch keine Lösung. Ist ein bisschen schwieriger als gedacht, aber ich bin dran.

Linie mit Endpunkt als Punkt müsste auf jeden Fall gehen (z. B. indem man die Line und zusätzlich den letzten Punkt noch als Punkt definiert).

[ToM_ToM]

Leider habe ich da noch keine Lösung. Ist ein bisschen schwieriger als gedacht, aber ich bin dran.

Okay cool. Wäre auf jeden Fall deutlich ressourcenschonender als permanent die Datei zu schreiben. Zumal es relativ viele Datenpunkte werden.

Linie mit Endpunkt als Punkt müsste auf jeden Fall gehen (z. B. indem man die Line und zusätzlich den letzten Punkt noch als Punkt definiert).

Das hatte ich probiert. Also dein Beispiel mit der Linie verwendet und anschließend noch zusätzlich den Eintrag mit dem Punkt gemacht. Aber dann wurde mir gar nichts angezeigt.

Was ich vor habe, ist eine Verlaufsline auf der Map anzuzeigen wo man sich die letzte Stunde aufgehalten hat, bzw. welchen Weg man verwendet hat.

VG, Thomas

[eki]

Das mit den Readings verstehe ich noch nicht so ganz. Würdest Du dann ein Reading generieren, dessen Inhalt immer länger wird (Positionswerte werden immer angehängt)? Kannst Du mal ein Beispiel machen.

Ein Geojson file, welches eine Linie und ans Ende einen Punkt zeichnet, sollte so aussehen:

Code Auswählen Erweitern


{ "type": "FeatureCollection",
    "features": [
      { "type": "Feature",
        "geometry": {
            "type": "LineString",
            "coordinates": [
                [10.2488713, 49.773172],
[10.2626042, 49.7711765],
[10.278397, 49.7682939],
[10.2986531, 49.7671851]
            ]
        },
        "properties": {
            "status":"My way to last position",
"description": "One Line with all positions (properties can only be given for the whole line)"
         }
      },
      { "type": "Feature",
        "properties": {
          "status": "My last position",
          "description": "Point with last position)"
        },
        "geometry": {
          "type": "Point",
          "coordinates": [
            10.2986531,
            49.7671851
          ]
        }
      }
   ]
}


[ToM_ToM]

Hallo eki,

im Prinzip müsste das Reading den Inhalt der Datei haben. Für den Aufbau des Readings müsste ich mir dann etwas einfallen lassen damit es nicht zu viele Daten werden. Im Prinzip irgendetwas das nur den Verlauf der letzten Stunde darstellt. Die Positionsdaten dazu liegen in der Datenbank. Somit würde ich eine kleine Prozedur schreiben die dann regelmäßig per SELECT die Daten der letzten Stunde aus der DB zieht und diese dann als JSON-String ins Reading schreibt. Ist auch noch keine schöne Lösung und belastet natürlich die Kiste auf der das Ganze läuft, aber was besseres fällt mir aktuell nicht ein.

VG, Thomas

[eki]

Ich habe das widget jetzt so ergänzt, dass ein Reading mit dem Namen "polygon" ausgewertet und daraus eine Linie auf die Karte gezeichnet wird. Das Reading muss lng/lat Wertepaare enthalten, die durch "," getrennt sind, die Wertepaare müssen durch Leerzeichen getrennt sein.
Wenn Du zusätzlich die lng/lat Werte des letzten Punktes in Readings mit Namen "longitude" und "latitude" schreibst, dann wird am Ende auch noch ein Symbol/Icon etc. gemalt (das gab es ja schon immer).

Beispiel:

Code Auswählen Erweitern


setreading <device> polygon 10.2488713,49.773172 10.2626042,49.7711765 10.278397,49.7682939 10.2986531,49.7671851
setreading <device> longitude 10.2986531
setreading <device> latiitude 49.7671851


Falls Du unterschiedliche Größen/Farben für das Polygon und den Punkt willst, müsstest Du das in 2 Devices trennen und dann über data-mapgroup in der html Definition in die gleiche Karte zeichnen lassen.

[ToM_ToM]

Ah sehr cool eki.

Danke. Das werde ich die Tage gleich mal testen.

VG, Thomas