Javascript - Bottle - JSON Daten aktuallisieren

  • Hallo,

    ich bastel an einem Modellauto das ich via Raspi über Web steuern kann.

    Mein Problem ist die Datenübertragung Python <--> HTML.

    Konkret möchte ich ein Kommando geben, z.B. losfahren, dann möchte ich über eine Schieberegler die Geschwindigkeit übertragen.

    Meigrafd hatte in einem Beitrag schon einmal eine Lösung dafür: Beitrag

    Ich finde die Lösung optimal für meine Bedürfnisse. Ich nutze die 3. Variante in der die Daten in JSON gespeichert und via Bottle übergeben werden.

    Das Beispiel von ihm funktioniert super, jedoch sieht es leider nur vor, die Daten auf der Webseite anzuzeigen, jedoch nicht dort auch Daten zu laden.

    Ich könnte natürlich hinter das Kommando den Wert schreiben und diesen dann in Python abschneiden, aber diese Krücke will ich nicht gehen.


    Hier der Python Code:




    Ich kann den eingestellten Wert am Slider auslesen (servo_untenlinks).

    Diesen möchte ich jetzt zurück ins Json schreiben:

    data["servo_untenlinks"] = ("servo_untenlinks", document.getElementById("servo_untenlinks").value);

    Das funktioniert nur so halb..

    Über http://IP_adresse:8080/data/ kann ich mir den Inhalt des JSONs anzeigen lassen, der Wert von servo_untenlinks wird nicht aktuallisiert!

    Ich lasse mir den Wert von servo_untenlinks jedoch in der Konsole ausgeben (die Konsole im Browser).

    Dort kann ich sehen das der Wert sehr wohl als servo_untenlinks gespeichert wird! Nur wird der Wert scheinbar nicht richtig aktuallisiert.


    Was mache ich falsch?


    Wäre super wenn jemand einen Tipp hätte!

    Besten Dank schon mal!

    Images

    • 2018-06-08 17_05_38-Mozilla Firefox.png
    • 2018-06-08 17_09_50-Mozilla Firefox.png
  • Ok, ich versuche es besser ;)

    ich möchte die JSON Daten inder Bottle (wie im ersten Bild zu sehen) aktualisieren.

    Wenn ich den Knopf empfangen drücke, soll der Wert des Sliders ins JSON objekt übergeben werden damit ich es dort mit Python abholen kann.


    Das Javascript Objekt server_untenlinks soll jetzt den JSON Wert servo_untenlinks ersetzen.


    Andersherum funktioniert es ja auch, wenn ich die Senden Funktion benutze, wird korrekt der Wert im Browser angezeigt.

    Ich möchte jetzt nur einen Wert vom Browser im Python Script verarbeiten.

  • damit ich es dort mit Python abholen kann.

    Das geht nicht, jedenfalls nicht mit AJAX (dort müssen die Request vom Client kommen, der Server antwortet nur – mit Websockets wäre da möglich). Du musst vom Client aus einen Request an den Server schicken, mit dem neuen Wert als Payload. Der Server kann dann dein internes Dict (data) updaten, womit bei der nächsten anfrage an /data der neue Wert im zurückgegebenen JSON enthalten ist.

  • Du musst vom Client aus einen Request an den Server schicken, mit dem neuen Wert als Payload. Der Server kann dann dein internes Dict (data) updaten, womit bei der nächsten anfrage an /data der neue Wert im zurückgegebenen JSON enthalten ist.

    Diesen request könnte ich ja in der receive funktion aufnehmen, nur wie sieht der aus?

    Ich tue mich in der Tat recht schwer damit, alles nur mittel zum Zweck damit ich mit Python wieder weiter machen kann..

  • Du kannst jQuerys $.ajax nehmen und einen entsprechenden GET oder besser noch POST Request absenden. Der Server braucht halt eine passende Route (z.B. /update_servo), die du definierst, den Wert entnimmst und dein Dict aktualisierst.


    Mit jQuery will ich aber schon lange nichts mehr zu tun haben, ich bevorzuge reines JS (fetch-API in diesem Fall). Also musst du, da du offenbar im Jahr 2018 immer noch jQuery verwenden magst, selbst ein Beispiel im Internet oder in der Doku suchen.


    Sorry not Sorry! ;)

  • Hi,

    ich habe es jetzt mal mit fetch api probiert, Daten auslesen ging auf anhieb, scheint mir auch einfacher zu sein, aber mit dem senden der Daten habe ich auch hier Probleme:


    Beim ausführen der Funktion bekomme ich folgende Meldung im Browser:


    SyntaxError: JSON.parse: unexpected character at line 2 column 5 of the JSON data


    Ich denke ich auch hier klappt es nicht die JS Daten mit den JSON Daten in der Bottle zu vereinen.


    Hast du eine Idee dazu?

  • Code
    @bottle.route('/data/')
    def TelemetryHandler():
        printD("Telemetry Request.")
        bottle.response.content_type = 'application/json'
        data["PiTEMP"] = getPiTemperature()
        rangepwm = data["servo_untenlinks"]
        print (data)
        return json.dumps(data)

    Eigentlich auch JSON

  • Guter Tip! Hat geholfen ;)

    Kannst du mir helfen diese Zeile richtig zu stellen?

    Code
    data["servo_untenlinks"] = (document.getElementById("servo_untenlinks").value);


    ich habe nicht nur die JSON tabelle, sonder auch noch header url etc.

    Weißt du wie ich das am einfachsten hin bekomme?


    Die Variable wird in python abgefragt, da kommt sie aber nicht an:

    rangepwm = data["servo_untenlinks"]

  • Kannst du mir helfen diese Zeile richtig zu stellen?

    Gerne, wenn du mir sagst, was du da haben willst... :conf:

    ich habe nicht nur die JSON tabelle, sonder auch noch header url etc.

    Weißt du wie ich das am einfachsten hin bekomme?

    Was ist eine JSON Tabelle?

    Du gibst ja auch das Response Objekt aus, vorher hattest du noch das JSON "extrahiert", hier wiederum nicht mehr: .then(res => res.json())

  • Ich möchte eigentlich nur von der HTML Seite den Wert servo_untenlinks auslesen und python via bottle übergeben.

    (document.getElementById("servo_untenlinks").value);


    Der Wert ist im oberen Screenshot 1077, das passt alles.

    data["servo_untenlinks"] wird im python weiter verarbeitet.

    Ich muss jetzt "nur" JS dazu bringen den Wert auszulesen und im JSON den vorherigen Wert überschreiben.