HTML & GeoLocating

  • Hallo zusammen,


    Zum Hintergrund: Auf meinem RasperryPi läuft ein Flask Server, der wiederum eine HTML-Seite aufruft und aktualisiert - funktioniert soweit.

    Ich kann damit meine Temperatursensoren auslesen, Spannung anzeigen usw.


    Nun würde ich gerne auf die GPS Daten meines SmartPhone zurückgreifen, um mir z. B. die aktuelle Geschwindigkeit anzeigen zu lassen.

    Von HTML habe ich leider wenig Erfahrung …


    Mein bisheriger Code in HTML

    Ich erstelle eine Tabelle und lasse mir die Werte jede Sekunde aktualisiert anzeigen.


    Nun würde ich gerne einen "GeoLocation"-Code „integrieren“ – nur weiß ich leider nicht wie …

    Auch hier sollte die Position/Geschwindigkeit/… jede Sekunde in der Tabelle aktualisiert werden.

    Die Daten selbst sollten über das SmartPhone bereitgestellt werden können.


    Quelle: https://www.w3schools.com/html…geolocation_watchposition


    Grüße

    Stefan

  • Richtig, zum kompletten Verständnis:
    Der Raspi wird auf einem Boot betrieben, das SmartPhone dient als Anzeige.
    Um nicht zwischen Apps (es gibt ja etliche, die die Geschwindigkeit anzeigen) hin- und herschalten zu müssen würde ich gerne auf der HTML-Seite des Raspberry die GeoDaten von meinem SmartPhone anzeigen lassen.

  • JavaScript
    navigator.geolocation.watchPosition(console.log);

    Dann fragt der Browser nach dem Standortzugriff und dann wird sekündlich geloggt.

    Anstatt console.log wirst du eine Funktion verwenden, die ein get- oder post-request an den Server sendet.

    Code
    navigator.geolocation.watchPosition(function (position) {
        fetch("http://localhost/", {method: "POST", body: JSON.stringify(position)});
    });


    Diesen musst du dann bei der entsprechenden Route einfach auswerten.

    Ich habs jetzt noch nicht komplett testen können, aber die Post-Requests gehen auf jeden Fall raus.

  • Danke DeaD_EyE,

    Danke Tell,


    Was ich aktuell habe ist lediglich ein Python Skript und eine HTML-Seite - mehr nicht.

    Geht das nur mit dem Java-Skript oder reicht es aus, dass den Code in meine HTML einfüge?


    Auszug


    Und wie bekomme ich dann diesen sekündlichen aktualisierten Wert (wo ist das iegentlich definiert) in meine Tabelle?

    Ich stehe da echt auf dem Schlauch ...


    Grüße

    Stefan

  • Ich habe was von Flask-Server gelesen und erwartet, dass dieser die Standorte zwischenspeichert, um dann zwischen zwei Punkten die Geschwindigkeit zu berechnen oder bekommt man die Geschwindigkeit schon als Antwort? Hab nur Longitude und Latitude gesehen.

  • Danke noisefloor,

    aber welche Funktion meint Tell denn?
    Die was ich als Beispiel drinnen habe, die von DeaD_EyE?


    Grüße

    Stefan

  • Hallo,


    der 2. Code aus deinem Eingangspost sollte doch funktionieren? Da machst du a) den Button weg, und b) rufst du Funktion dann periodisch auf:


    Der Timestamp ist nur dafür da, um zu sehen, ob / das was passiert. Wenn man das auf dem Rechner testet, ändern sich die Koordinaten ja nicht...


    Problemchen: der Firefox fragt bei jeder Aktualisierung, ob auf die Coords zugegriffen werden darf (andere Browser wahrscheinlich auch). D.h. du müsstest mal schauen, wo man das im Browser deiner Wahl permanent erlauben kann.


    Gruß, noisefloor

  • Hi noisefloor,


    super erklärt - kann ich leider erst heute Abend testen, Hardware grad nicht zur Hand.

    Somit hätte ich die "sekündlichen" Werte die ich dann in meine Tabelle bekomme.


    Das "json-Zeug" ermöglicht mir die Aktualisierung der Daten ohne jedes Mal die HTML neu laden zu müssen.

    Aber sollte ja ohne dem gehen ...


    Grüße

    Stefan

  • Hallo,


    der obigen Code lädt die Seite ja auch nicht neu, weil das komplett im Browser läuft. Da auch die Geolocation vom Gerät kommt, auf dem der Browser läuft, wird die HTML-Seite nur 1x geladen und der Rest wird vom JavaScript clientseitig erledigt.


    Gruß, noisefloor

  • ja, ok - stimmt.


    und dann erstelle ich in der HTML eine neue Zeile und "schiebe" in die "id" die Positionsdaten?

    Code
          <tr>
            <td style="background-color:rgb(178,161,199);color:white;font-size:25px";align="left"><b>Position</b></td>
            <td style="color:white;font-size:25px";align="left"><b><span style="font-size:70px" id="getdyncputemp"></span> °C<b></td>
          </tr>
  • Hallo,


    nee, du musst schon komplette Zeilen in der Tabelle hinzufügen:


    Kann sein, dass das Code-technisch besser geht, JavaScript ist jetzt nicht so meine Domäne.


    Fraglich ist grundsätzlich, ob du wirklich jede Sekunden eine Zeile mit den Coords hinzufügen willst. Wenn du "nur" 30min fährst, ist deine Tabelle 1800 Zeilen lang. Das ist selbst auf dem größten Bildschirm nicht mehr sinnvoll darstellbar. Und auf dem Smartphone sowie so nicht.


    Gruß, noisefloor

  • Ich will nicht immer neue Zeilen hinzufügen.
    In der genannten Tabelle sollen die Daten lediglich aktualisiert angezeigt werden - auch der Positionswert und die Geschwindigkeit

  • RaspberryPi 4 @ 4GB

  • Da gibt es offensichtlich noch Klaerungsbedarf:


    * die Geolocation laeuft im Browser

    * watchPosition entscheidet selbst wann ein Update noetig ist

    * die Geschwindigkeit kann im Browser oder auf dem Server durch Python berechnet werden


    *-> wenn Python die Geschwindigkeit berechnet, muss die Position zurueck zum Server (wie es DeaD_EyE angedeutet hat)

    *-> und wieder zurueck zur HTML-Seite


    Was noch wichtig ist: viele (alle?) Browser geben Geolocation nur frei wenn die Seite per https ausgeliefert wird!


    Das Beispielscript im ersten Post wird durch einen Button aktiviert. Wenn es gleich nach dem Laden laufen soll, muss es wie folgt geaendert werden:

  • Ich habe auf dem Boot einen mobilen Router.

    Der Raspi connected sich mit dem Router, das SmartPhone auch.


    Ich gebe dann lediglich die IP-Adresse des Router an (192.168.178.XX) und kann dann die HMTL-Seite sehen.
    Ob das mit HTTPS ist oder nicht weiß ich nicht.


    Nachtrag: Ist auf jeden Fall ne http ...

    Ich bekomme aber auch keine "Meldung" mit "not supported ..."

  • Ich hab die Seite so auf die Schnelle mal angepasst:


    So laeuft es auf einem Server mit https und Mozilla als Browser.