Umrechnung km/h <–> knoten

Diskutiere Umrechnung km/h <–> knoten im JavaScript Forum im Bereich Programmierung; Hallo zusammen, Ein Raspi 3b stellt mir über Python / Flask eine Webseite zur Verfügung. Auf dieser Webseite werden z. B. Temperaturwerte...
S

stefanbla

New member
Dabei seit
12.03.2021
Beiträge
4
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
 
basti1012

basti1012

Well-known member
Dabei seit
12.06.2018
Beiträge
106
Kannst du mal die HTML Ausgabe posten.
Das umrechnen sollte mit Javascript kein Problem sein.
Dafür müsste man dein HTML sehen was im Browser ankommt
 
S

stefanbla

New member
Dabei seit
12.03.2021
Beiträge
4
Hier meine aktuellstes HTML-File. Verbesserungen gerne melden :)
HTML:
<html lang="de">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>MerryFisher | BoatPanel</title>
        <link rel="shortcut icon" href="{{ url_for('static', filename='MF.png') }}">
        <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
        <style type="text/css">
            table {
                background-color:rgb(0,0,0);
                border-color:rgb(0,0,0);
                border-spacing: 3px;
                border-collapse: separate;
                width: 100%;
                height: 100%;
            }
            #format_page {
                background-color:rgb(0,0,0);
            }
            #format_rows {
                background-color:rgb(50,50,50);
                vertical-align: middle;
                text-align: center;
                font-family: Arial;
                font-weight: bold;
                font-size: 100px;
                color: white;
            }
            #format_cell1 {
                background-color:rgb(75,75,75);
                color: white;
                vertical-align: middle;
                text-align: left;
                font-family: Arial;
                font-weight: bold;
                font-size: 30px;
            }
            #format_cell2 {
                background-color:rgb(120,120,120);
                color: white;
                vertical-align: middle;
                text-align: left;
                font-family: Arial;
                font-weight: bold;
                font-size: 30px;
            }
            #format_cell3 {
                background-color:rgb(48,84,150);
                color: white;
                vertical-align: middle;
                text-align: left;
                font-family: Arial;
                font-weight: bold;
                font-size: 30px;
            }
            #format_cell4 {
                background-color:rgb(198,89,17);
                color: white;
                vertical-align: middle;
                text-align: left;
                font-family: Arial;
                font-weight: bold;
                font-size: 30px;
            }
            #format_cell5 {
                background-color:rgb(191,143,0);
                color: white;
                vertical-align: middle;
                text-align: left;
                font-family: Arial;
                font-weight: bold;
                font-size: 30px;
            }
            #format_cell6 {
                background-color:rgb(84,130,53);
                color: white;
                vertical-align: middle;
                text-align: left;
                font-family: Arial;
                font-weight: bold;
                font-size: 30px;
            }
            #format_cellVolt {
                color: white;
                vertical-align: middle;
                text-align: center;
                font-family: Arial;
                font-weight: bold;
                font-size: 30px;
            }
            #format_cellTemp {
                color: white;
                vertical-align: middle;
                text-align: center;
                font-family: Arial;
                font-weight: bold;
                font-size: 30px;
            }
            #format_cellVelocity {
                color: white;
                vertical-align: middle;
                text-align: center;
                font-family: Arial;
                font-weight: bold;
                font-size: 30px;
            }
            #format_cellTime {
                color: white;
                vertical-align: middle;
                text-align: center;
                font-family: Arial;
                font-weight: bold;
                font-size: 90px;
            }
            #column1 { width: 17%; }
            #column2 { width: 17%; }
            #column3 { width: 26%; }
            #column4 { width: 40%; }
        </style>
    </head>
    <body id="format_page">
        <table>
            <colgroup>
                <col id="column1">
                <col id="column2">
                <col id="column3">
                <col id="column4">
            </colgroup>
            <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><span style=font-size:65px id=tempPos1></span>&nbsp;km/h</td>
                <td id=format_cellTime rowspan=2><span id=uhr></span></td>
            </tr>
            <tr id=format_rows>
                <td id=format_cell2>&nbsp Battery 2</td>
                <td id=format_cellTemp><span style=font-size:40px id=tempVolt2></span>&nbsp;V</td>
            </tr>
            <tr id=format_rows>
                <td id=format_cell3>&nbsp Temp. 1</td>
                <td id=format_cellTemp><span style=font-size:40px id=tempState1></span>&nbsp;°C</td>
                <td id=format_cellTemp><span style=font-size:40px id=tempPos2></span>&nbsp;°</td>
                <td id=format_cellTemp>
                    <form action="/shutdown">
                        <input type=submit onclick="return shutdown_clicked()" name=edit value=shutdown style=background-color:rgb(193,0,0);border-color:rgb(193,0,0);height:50px;width:200px;color:rgb(255,255,255);font-size:20px;font-weight:bold;float:right>
                    </form>
                </td>
            </tr>
            <tr id=format_rows>
                <td id=format_cell4>&nbsp Temp. 2</td>
                <td id=format_cellTemp><span style=font-size:40px id=tempState2></span>&nbsp;°C</td>
                <td id=format_cellTemp><span style=font-size:40px id=tempPos3></span>&nbsp;°</td>
                <td id=format_cellTemp>
                    <form action="/reboot">
                        <input type=submit onclick="return reboot_clicked()" name=edit value=reboot style=background-color:rgb(193,90,7);border-color:rgb(193,90,7);height:50px;width:200px;color:rgb(255,255,255);font-size:20px;font-weight:bold;float:right>
                    </form>
                </td>
            </tr>
            <tr id=format_rows>
                <td id=format_cell5>&nbsp Temp. 3</td>
                <td id=format_cellTemp><span style=font-size:40px id=tempState3></span>&nbsp;°C</td>
        <td id=format_cellTemp></td>
                <td id=format_cellTemp>
            <form>
                        <input id=btnSendAUS1 type=button name=edit value=off style=background-color:rgb(0,45,85);border-color:rgb(0,45,85);height:50px;width:101px;color:rgb(255,255,255);font-size:20px;font-weight:bold;float:right> <input id=btnSendEIN1 type=button name=edit value=on style=background-color:rgb(0,45,85);border-color:rgb(0,45,85);height:50px;width:101px;color:rgb(255,255,255);font-size:20px;font-weight:bold;float:right>
            </form>
                </td>
            </tr>
            <tr id=format_rows>
                <td id=format_cell6>&nbsp Temp. 4</td>
                <td id=format_cellTemp><span style=font-size:40px id=tempState4></span>&nbsp;°C</td>
        <td id=format_cellTemp></td>
                <td id=format_cellTemp>
            <form>
                        <input id=btnSendAUS2 type=button name=edit value=off style=background-color:rgb(0,45,85);border-color:rgb(0,45,85);height:50px;width:101px;color:rgb(255,255,255);font-size:20px;font-weight:bold;float:right> <input id=btnSendEIN2 type=button name=edit value=on style=background-color:rgb(0,45,85);border-color:rgb(0,45,85);height:50px;width:101px;color:rgb(255,255,255);font-size:20px;font-weight:bold;float:right>
            </form>
                </td>
            </tr>
        </table>
    </body>
    <!--#############################################################################################-->
    <!--#############################################################################################-->
    <script type=text/javascript>
    <!--#############################################################################################-->
        $(
        function dynvolt()
        {
            var updated_data_voltage  = $.get('/update_voltage');

            updated_data_voltage.done(function(results){
                $("#tempVolt1").text(results.results[0]);
                $("#tempVolt2").text(results.results[1]);
                setTimeout(function(){dynvolt();},1000);
            });
        }
        );
    <!--####################################################-->
        $(
        function dyntemp()
        {
            var updated_data_temperature  = $.get('/update_temperature');

            updated_data_temperature.done(function(results){
                $("#tempState1").text(results.results[0]);           
                $("#tempState2").text(results.results[1]);
                $("#tempState3").text(results.results[2]);           
                $("#tempState4").text(results.results[3]);
                setTimeout(function(){dyntemp();},1000);
            });
        }
        );
    <!--####################################################-->
        $(
        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);
            });
        }
        );
    <!--####################################################-->
        $(document).ready(function(){
            $('#btnSendEIN1').click(function(){
                $.ajax({
                    type: 'POST',
                    url: '/relais1EIN',
                    success: function(data){
                        alert(data);
                        }
                    });
                });
            });
    <!--####################################################-->
        $(document).ready(function(){
            $('#btnSendAUS1').click(function(){
                $.ajax({
                    type: 'POST',
                    url: '/relais1AUS',
                    success: function(data){
                        alert(data);
                        }
                    });
                });
            });
    <!--####################################################-->
        $(document).ready(function(){
            $('#btnSendEIN2').click(function(){
                $.ajax({
                    type: 'POST',
                    url: '/relais2EIN',
                    success: function(data){
                        alert(data);
                        }
                    });
                });
            });
    <!--####################################################-->
        $(document).ready(function(){
            $('#btnSendAUS2').click(function(){
                $.ajax({
                    type: 'POST',
                    url: '/relais2AUS',
                    success: function(data){
                        alert(data);
                        }
                    });
                });
            });
    <!--####################################################-->
        function reboot_clicked() {
            return confirm('Would you like to reboot?');
            }
    <!--####################################################-->
        function shutdown_clicked() {
            return confirm('Would you like to shutdown?');
            }
    <!--####################################################-->
    </script>
    <!--#############################################################################################-->
    <!--#############################################################################################-->
    <script language="JavaScript">
        <!--
        var interval = window.setInterval("uhr_anzeigen()", 1000);
        function uhr_anzeigen() {
            var Datum = new Date();
            var stunde = Datum.getHours();
            var minute = Datum.getMinutes();
            var sekunde = Datum.getSeconds();
            Zeit = ((stunde < 10) ? " 0" : " ") + stunde;
            Zeit += ((minute < 10) ? ":0" : ":") + minute;
            Zeit += ((sekunde < 10) ? ":0" : ":") + sekunde;
            document.getElementById('uhr').innerHTML=Zeit;
            }
        // -->
    </script>
</html>

Die Werte für die Geschwindigkeit werden hier eingetragen/formatiert/...
HTML:
...
    <body id="format_page">
        <table>
            <colgroup>
                <col id="column1">
                <col id="column2">
                <col id="column3">
                <col id="column4">
            </colgroup>
            <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><span style=font-size:65px id=tempPos1></span>&nbsp;km/h</td>
                <td id=format_cellTime rowspan=2><span id=uhr></span></td>
            </tr>
...
 
S

stefanbla

New member
Dabei seit
12.03.2021
Beiträge
4
Guten Morgen zusammen,
das sollte so nicht sein und war wirklich keine "böse" Absicht.
Ich hatte nur das Gefühl, dass evtl. keine einzige Antwort bzw. Idee kommt, ich aber an dem Thema "schnell" weiter kommen muss.
=> Gelobe Besserung
Grüße
Stefan
 
Thema:

Umrechnung km/h <–> knoten

Oben