Umrechnung km/h <–> knoten

  • Hallo zusammen,


    Ein Raspi 3b stellt mir über Python / Flask eine Webseite zur Verfügung.

    Auf dieser Webseite werden z. B. Temperaturwerte, Spannungswerte aber auch km/h über eine GPS-Maus angezeigt.

    -> Funktioniert ganz gut


    Die einzelnen Werte werde in einer Tabelle dargestellt.

    Jetzt würde ich gerne bei Klick auf einen Button bzw. bei Klick in die Zelle der Geschwindigkeit „Umschalten“ auf knoten bzw. eine andere Einheit.

    Der eigentliche Wert wird mit JSON an die Seite übermittelt, aktuell rechne ich die GPS-Daten also in Python um und zeige diese lediglich an.

    Ich könnte mir vorstellen den Faktor nun in der HTML-Seite zu haben, aber keine Ahnung wie ...


    HTML kann ich nun leider nicht so tiefgreifend um genau diese Funktion zu integrieren.

    Aus diesem Grund erhoffe ich mir Hilfe in diesem Forum.


    Grüße

    Stefan

  • Bevor dann der Thread gesperrt wird, versuche dies:

    Wenn auch noch in andere Maßeinheiten umgerechnet werden soll, wird es ein klein wenig komplizierter:

  • Guten Morgen,

    vielen Dank für Deine Antwort - werde ich mir im Laufe des Tages anschauen.

    Das mit dem Doppelpost sollte so nicht sein, ich hatte lediglich das Gefühl, dass ich keine Antwort bekommen.
    Dieses Thema aber "schnell" abschließen muss.

    Grüße

    Stefan

  • Hallo Sempervivum,

    Danke nochmals für Deinen Code.


    Habe mich mit dem ersten beschäftigt.

    Das sieht schon mal gut aus.


    Eine Frage noch: Der Wert in der besagten Zelle wird alle 200 ms aktualisiert (GPS-Signal).

    Wie bekommt die Funktion diese Aktualisierung mit und ändert somit zeitlich den Wert für km/h oder kn?!


    Aktuell verstehe ich Deinen Code so, dass dies jeweils nur beim Click in die Zelle aufgerufen wird.


    Ich habe versucht einen Intervall zu setzen, aber in Bezug auf welche Zelle?!

    Code
    1. var interval = window.setInterval("convertSpeed(id=tempPos1)", 500);

    Meine Zelle bekommt den Wert von „id=tempPos1“

    => Aber das hat alles auch nicht wirklich funktioniert


    Dein Code (mit der Erweitung des Intervalls)

    Auch ändert sich mit dem Klick in die Zelle meine Formatierung.

    Aber das ist sicher ein anderes Thema ...


    Grüße

    Stefan

  • Zitat

    Der Wert in der besagten Zelle wird alle 200 ms aktualisiert (GPS-Signal).

    Wie geschieht denn das? Vermutlich indem die Daten mit Ajax geholt werden oder durch Neuladen der Seite. Wenn ersteres, dann brauchst Du gar kein zusätzliches setInterval sondern kannst den Wert im success- oder then-Callback aktualisieren.


    Wie soll es denn funktionieren?

    a) Soll der Wert auf km/h zurück gesetzt werden? Dann müssen wir die Klassen und data-Attribute einfach in Grundstellung bringen. Bzw. wenn die Seite neu geladen wird, brauchen wir gar nichts zu tun.

    oder

    b) Soll die letzte Einheit nach der Aktualisierung erhalten bleiben? Dann müssen wir die Klassen und data-Attribute ebenfalls entspr. setzen.


    BTW: Diese Code

    var interval = window.setInterval("convertSpeed(id=tempPos1)", 500);

    ist fehlerhaft:

    Als Parameter muss das Element selber übergeben werden, also so:

    convertSpeed(document.getElementById('tempPos1')

  • Hier ein Auszug aus dem body der HTML-Seite

    Code
    1. <body id="format_page">
    2. <table>
    3. <tr id=format_rows>
    4. <td id=format_cell1>&nbsp Battery 1</td>
    5. <td id=format_cellTemp><span style=font-size:40px id=tempVolt1></span>&nbsp;V</td>
    6. <td id=format_cellVelocity rowspan=2 onclick="convertSpeed(this);"><span style=font-size:100px id=tempPos1></span>&nbsp;km/h</td>
    7. <td id=format_cellTime rowspan=2><span id=time></span></br><span style=font-size:40px id=date></span></td>
    8. </tr>

    In grün die Zelle, die dynamisch befüllt sind über:

    Funktioniert "tadellos".


    Hintergrund: Die Anzeige wird auf einem Motorboot platziert. Beim Starten der Seite soll "km/h" als Grundsetting angezeigt werden.

    In gewissen Situationen ist es ggf. sinnvoll einfach Einheiten umstellen zu können. Also z. B. km/h in knoten.


    Zitat

    Wie soll es denn funktionieren?

    a) Soll der Wert auf km/h zurück gesetzt werden? Dann müssen wir die Klassen und data-Attribute einfach in Grundstellung bringen. Bzw. wenn die Seite neu geladen wird, brauchen wir gar nichts zu tun.

    oder

    b) Soll die letzte Einheit nach der Aktualisierung erhalten bleiben? Dann müssen wir die Klassen und data-Attribute ebenfalls entspr. setzen.

    a.) die Umstellung soll "manuell" zwischen den Einheiten gemacht werden

    b.) Die Einheit soll nach der Aktualisierung erhalten bleiben. Wähle ich selbstständig "knoten" aus, dann bleibt bei der Aktualisierung des Wertes auch knoten bestehen, bis ich eben wieder umschalten


    Die Werte kommen aus Python 3.


    Grüße
    Stefan

  • OK, wie ich vermutet hatte, da gibt es ein <span> in der Tabellenzelle für die Formatierung.

    Ich habe das mal so umgestellt:

    Soweit getestet und funktioniert.

    Beim Update musst Du dann nur das DOM-Element der Tabellenzelle und false übergeben:

    Dieses nicht getestet, wenn es nicht funktioniert, versuche den Fehler zu finden und melde dich, wenn es nicht gelingt.

  • Ich denke Du/wir sind auf einem sehr guten Weg.

    Vielen Dank für Deine Mühen ...


    1.) Beim Start der Homepage kommt der Geschwindigkeitswert vom GPS: z. B. 0.5 km/h (Wert mit Einheit km/h)

    2.) beim ersten Klicken in die Zelle wird minimal "kurz" umgerechnet, aber sofort erscheint wieder der km/h Wert von zuvor, jedoch mit dem Unterschied, dass dann hinter 0.5 km/h noch kn steht (kleiner geschrieben, also sicher vom body-part der HMTL-Seite).

    3.) Klicke ich wieder in die Zelle kommt wieder kurz die Umrechnung, jedoch wird der km/h Wert wieder angezeigt (0.5 km/h mit km/h (zweites km/h wieder kleiner geschrieben als der vorherige)

    Die Einheit (Einheit kleingeschrieben "hinten") wird richtig "umgeschaltet" - wenn auch diese doppelt irgendwie vorkommt (evtl. vom kompletten Übernehmen des Zellwertes ...)


    => Mein Wissen / Verständnis reicht leider aktuell nicht aus ...

  • Hätte es doch komplett testen sollen. Das Problem ist, dass ich die ID vom span-Element verwendet habe, die Funktion convertUnit braucht jedoch die Tabellenzelle. Wenn Du dies für den Update verwendest, sollte es besser funktionieren:

    Und in der Funktion convertSpeed musste ich auch noch eine Kleinigkeit ändern: Der km/h-Wert muss auch beim Update gespeichert werden.

  • Das sieht schon mal super aus :-) Wahnsinn, da steig ich wirklich aus ...

    Werde das Thema morgen in Bewegung testen, immer wieder habe ich kein GPS Signal und dann kommen keine "sinnvollen" Werte.


    Werde (so denke ich) das Thema runden noch angehen müssen.

    Code
    1. const html = `<span style=font-size:100px id="tempPos1">${value}</span>&nbsp;${unit}`;
    2. html = Math.round(html * 100) / 100;
    3. cell.innerHTML = html;
    4. console.log('ende');

    Der Wert soll max. zwei, eher eine Nachkommastelle haben.


    Vielen vielen Dank für heute, melde mich morgen sicher nochmals


    Grüße

    Stefan

  • Guten Morgen zusammen,


    Also das mit dem Runden des Wertes scheint nicht wirklich zu funktionieren.

    Siehe in rot im Code. Hier kommen keine Werte und ich kann auch nicht "umschalten.

    Mache ich das an einer falschen Stelle, muss etwas importiert werden?


    Grüße

    Stefan


    Nachtrag. Im Code kann die Schriftfarbe nicht geändert werden ...
    Hinzugefügt habe ich: "valueRounded = value.toFixed(1);"

  • Guten Morgen Stefan,

    das hatte ich schon vermutet, dass das ein Problem wird: toFixed erwartet einen numerischen Wert als Parameter, das data-Attribut enthält jedoch einen String. Das kann man sehr leicht beheben, indem man den String in einen integer umwandelt:

    parseInt(cell.dataset.kmph).toFixed(1)

    Zusätzlich kann man das toFixed sehr gut verketten, dann wird der Code etwas kompakter: