Umrechnung km/h <–> knoten

stefanbla80 · 30. März 2021

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

jonas3344 · 30. März 2021

https://www.html-forum.de/threads/10217/#post-11463

Sempervivum · 30. März 2021

Bevor dann der Thread gesperrt wird, versuche dies:

Code

    <table>
        <tr>
            <!-- Eventhandler fuer Klick der Tabellenzelle hinzu fuegen: -->
            <td onclick="convertSpeed(this);">30 km/h</td>
        </tr>
    </table>
    <script>
        function convertSpeed(cell) {
            // Der Faktor fuer die Umrechnung nach Knoten:
            const factorToKn = 0.539957;
            // Aktuellen Inhalt der Zelle auslesen:
            const val = parseInt(cell.textContent);
            // Wenn noch nicht geschehen: Den Wert fuer km/h
            // speichern:
            if (!cell.dataset.kmh) {
                cell.dataset.kmh = val;
            }
            // Die Klasse "knoten" gibt an, ob der Inhalt
            // in Knoten ist (wenn Klasse gesetzt)
            // oder km/h (wenn Klasse nicht gesetzt.
            // Entsprechend die Umrechnung durchfuehren:
            if (cell.classList.contains('knoten')) {
                cell.textContent = cell.dataset.kmh + ' km/h';
            } else {
                cell.textContent = val * factorToKn + ' kn';
            }
            // Klasse umschalten:
            cell.classList.toggle('knoten');
        }
    </script>

Alles anzeigen

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

Code

    <table>
        </tr>
            <!-- Eventhandler fuer Klick der Tabellenzelle hinzu fuegen: -->
            <td onclick="convertSpeed3(this);">50 km/h</td>
        </tr>
    </table>
    <script>

        function convertSpeed3(cell) {
            // Der Faktor fuer die Umrechnung nach Knoten:
            const factorToKn = 0.539957;
            // Der Faktor fuer die Umrechnung nach m/s:
            const factorToMps = 0.277778;
            // Aktuellen Inhalt der Zelle auslesen:
            const val = parseInt(cell.textContent);
            // Wenn noch nicht geschehen: Den Wert fuer km/h
            // und die Masseinheit speichern:
            if (!cell.dataset.kmph) {
                cell.dataset.kmph = val;
                cell.dataset.unit = 'kmph';
            }
            // Das Data-Attribut "unit" gibt an, welche Masseinheit
            // gerade in der Zelle steht.
            // Entsprechend die Umrechnung durchfuehren:
            switch (cell.dataset.unit) {
                case 'kmph':
                    // Nach m/s umrechnen:
                    cell.textContent = cell.dataset.kmph * factorToMps + 'm/s';
                    cell.dataset.unit = 'mps';
                    break;
                case 'mps':
                    // Nach Knoten umrechnen:
                    cell.textContent = cell.dataset.kmph * factorToKn + 'kn';
                    cell.dataset.unit = 'kn';
                    break;
                case 'kn':
                    // Wert fuer km/s eintragen:
                    cell.textContent = cell.dataset.kmph + 'km/h';
                    cell.dataset.unit = 'kmph';
                    break;
            }
        }
    </script>

Alles anzeigen

stefanbla80 · 31. März 2021

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

stefanbla80 · 31. März 2021

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

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)

Code

<script>
        var interval = window.setInterval("convertSpeed(id=tempPos1)", 500);
        function convertSpeed(cell) {
            // Der Faktor fuer die Umrechnung nach Knoten:
            const factorToKn = 0.539957;
            // Aktuellen Inhalt der Zelle auslesen:
            const val = parseInt(id=tempPos1);
            // Wenn noch nicht geschehen: Den Wert fuer km/h
            // speichern:
            if (!cell.dataset.kmh) {
                cell.dataset.kmh = val;
            }
            // Die Klasse "knoten" gibt an, ob der Inhalt
            // in Knoten ist (wenn Klasse gesetzt)
            // oder km/h (wenn Klasse nicht gesetzt.
            // Entsprechend die Umrechnung durchfuehren:
            if (cell.classList.contains('knoten')) {
                cell.textContent = cell.dataset.kmh + ' km/h';
            } else {
                cell.textContent = val * factorToKn + ' kn';
            }
            // Klasse umschalten:
            cell.classList.toggle('knoten');
        }
    </script>

Alles anzeigen

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

Aber das ist sicher ein anderes Thema ...

Grüße

Stefan

Sempervivum · 31. März 2021

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')

Sempervivum · 31. März 2021

PS: Wenn der Wert alle 200 ms aktualisiert wird, scheidet wohl ein Neuladen aus.

Sempervivum · 31. März 2021

PPS:

Zitat

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

Dann vermute ich, dass in der Zelle nicht nur einfach der Text mit dem Wert und der Einheit steht, sondern noch mehr für die Formatierung z. B. ein <span>?

stefanbla80 · 31. März 2021

Hier ein Auszug aus dem body der HTML-Seite

Code

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

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

Code

$(
        function dyngps()
        {
            var updated_data_gps  = $.get('/update_gps');

            updated_data_gps.done(function(results){
                $("#tempPos1").text(results.results[0]);            
                $("#tempPos2").text(results.results[1]);
                $("#tempPos3").text(results.results[2]);            
                setTimeout(function(){dyngps();},200);
            });
        }
        );

Alles anzeigen

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

Sempervivum · 31. März 2021

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

Ich habe das mal so umgestellt:

Code

    <table>
        <tr>
            <!-- Eventhandler fuer Klick der Tabellenzelle hinzu fuegen: -->
            <td onclick="convertSpeed(this, true);">
                <span style="font-size:100px" id="tempPos1"></span>&nbsp;km/h
            </td>
        </tr>
    </table>
    <script>
        function convertSpeed(
            cell, // Die Tabellenzelle (DOM-Element)
            switchIt // Gibt an, ob umgeschaltet werden soll
        ) {
            // Der Faktor fuer die Umrechnung nach Knoten:
            const factorToKn = 0.539957;
            // Aktuellen Inhalt der Zelle auslesen:
            const val = parseInt(cell.textContent);
            // Wenn noch nicht geschehen: Den Wert fuer km/h
            // speichern:
            if (!cell.dataset.kmph) {
                cell.dataset.kmph = val;
            }
            if (switchIt) {
                // Klasse umschalten:
                cell.classList.toggle('knoten');
            }
            // Die Klasse "knoten" gibt an, ob der Inhalt
            // in Knoten ist (wenn Klasse gesetzt)
            // oder km/h (wenn Klasse nicht gesetzt.
            // Entsprechend die Umrechnung durchfuehren:
            let value, unit;
            if (cell.classList.contains('knoten')) {
                value = cell.dataset.kmph * factorToKn;
                unit = 'kn';
            } else {
                value = cell.dataset.kmph;
                unit = 'km/h';
            }
            const html = `<span style=font-size:100px id="tempPos1">${value}</span>&nbsp;${unit}`;
            cell.innerHTML = html;
        }
    </script>

Alles anzeigen

Soweit getestet und funktioniert.

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

Code

    $(
        function dyngps()
        {
            var updated_data_gps  = $.get('/update_gps');
            updated_data_gps.done(function(results){
                $("#tempPos1").text(results.results[0]);            
                $("#tempPos2").text(results.results[1]);
                $("#tempPos3").text(results.results[2]);
                convertSpeed($("#tempPos1")[0], false);            
                setTimeout(function(){dyngps();},200);
            });
        }
    );

Alles anzeigen

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

stefanbla80 · 31. März 2021

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 ...

Sempervivum · 31. März 2021

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:

Code

    $(
        function dyngps()
        {
            var updated_data_gps  = $.get('/update_gps');
            updated_data_gps.done(function(results){
                $("#tempPos1").text(results.results[0]);            
                $("#tempPos2").text(results.results[1]);
                $("#tempPos3").text(results.results[2]);
                convertSpeed(
                    $("#tempPos1").closest('td')[0], // Die Tabellenzelle (DOM-Element)
                    false // Einheit nicht umschalten
                );
                setTimeout(function(){dyngps();},200);
            });
        }
    );

Alles anzeigen

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

Code

        function convertSpeed(
            cell, // Die Tabellenzelle (DOM-Element)
            switchIt // Gibt an, ob umgeschaltet werden soll
        ) {
            // Der Faktor fuer die Umrechnung nach Knoten:
            const factorToKn = 0.539957;
            // Aktuellen Inhalt der Zelle auslesen:
            const val = parseInt(cell.textContent);
            // Wenn noch nicht geschehen
            // oder
            // wenn es sich um ein Update handelt:
            // Den Wert fuer km/h speichern:
            if (!cell.dataset.kmph || !switchIt) {
                cell.dataset.kmph = val;
            }
            if (switchIt) {
                // Klasse umschalten:
                cell.classList.toggle('knoten');
            }
            // Die Klasse "knoten" gibt an, ob der Inhalt
            // in Knoten ist (wenn Klasse gesetzt)
            // oder km/h (wenn Klasse nicht gesetzt.
            // Entsprechend die Umrechnung durchfuehren:
            let value, unit, cls;
            if (cell.classList.contains('knoten')) {
                value = cell.dataset.kmph * factorToKn;
                unit = 'kn';
            } else {
                value = cell.dataset.kmph;
                unit = 'km/h';
            }
            const html = `<span style=font-size:100px id="tempPos1">${value}</span>&nbsp;${unit}`;
            cell.innerHTML = html;
        }

Alles anzeigen

stefanbla80 · 31. März 2021

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

const html = `<span style=font-size:100px id="tempPos1">${value}</span>&nbsp;${unit}`;
html = Math.round(html * 100) / 100;
cell.innerHTML = html;
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

Sempervivum · 31. März 2021

Etwas direkter geht das mit den Nachkommastellen, wenn Du die Funktion toFixed verwendest.

stefanbla80 · 1. April 2021

Guten Morgen zusammen,

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

Code

<script>
        function convertSpeed(
            cell, // Die Tabellenzelle (DOM-Element)
            switchIt // Gibt an, ob umgeschaltet werden soll
        ) {
            // Der Faktor fuer die Umrechnung nach Knoten:
            const factorToKn = 0.54;
            // Aktuellen Inhalt der Zelle auslesen:
            const val = parseInt(cell.textContent);
            // Wenn noch nicht geschehen
            // oder
            // wenn es sich um ein Update handelt:
            // Den Wert fuer km/h speichern:
            if (!cell.dataset.kmph || !switchIt) {
                cell.dataset.kmph = val;
            }
            if (switchIt) {
                // Klasse umschalten:
                cell.classList.toggle('knoten');
            }
            // Die Klasse "knoten" gibt an, ob der Inhalt
            // in Knoten ist (wenn Klasse gesetzt)
            // oder km/h (wenn Klasse nicht gesetzt.
            // Entsprechend die Umrechnung durchfuehren:
            let value, unit, cls;
            if (cell.classList.contains('knoten')) {
                value = cell.dataset.kmph * factorToKn;
                valueRounded = value.toFixed(1);
                unit = 'kn';
            } else {
                value = cell.dataset.kmph;
                valueRounded = value.toFixed(1);
                unit = 'km/h';
            }
            const html = `<span style=font-size:100px id="tempPos1">${valueRounded}</span>&nbsp;${unit}`;
            cell.innerHTML = html;
            console.log('ende');
        }
    </script>

Alles anzeigen

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);"

Sempervivum · 1. April 2021

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:

Code

            // Die Klasse "knoten" gibt an, ob der Inhalt
            // in Knoten ist (wenn Klasse gesetzt)
            // oder km/h (wenn Klasse nicht gesetzt.
            // Entsprechend die Umrechnung durchfuehren:
            let value, unit, cls;
            if (cell.classList.contains('knoten')) {
                value = (parseInt(cell.dataset.kmph) * factorToKn).toFixed(1);
                unit = 'kn';
            } else {
                value = parseInt(cell.dataset.kmph).toFixed(1);
                unit = 'km/h';
            }
            const html = `<span style=font-size:100px id="tempPos1">${value}</span>&nbsp;${unit}`;
            cell.innerHTML = html;

Alles anzeigen

Stef · 1. April 2021

Crosspoting nicht erlaubt. Thema geschlossen!

Umrechnung km/h <–> knoten

Jetzt mitmachen!

Teilen