Hallo zusammen,
ich bin neu hier im Forum – herzlichen Dank für die Aufnahme.
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
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>homie</title>
</head>
<body style="background-color:#000000"; width: 100%; max.width: 200px; margin: auto>
<script>
function updateVoltage1()
{
fetch( "/getdynvolt1" )
.then( response => {
if( !response.ok )
throw new Error( "fetch failed" ) ;
return response.json() ;
} )
.then( json => document.querySelector("#getdynvolt1").textContent = json.getdynvolt1 )
}
updateVoltage1() ;
setInterval( updateVoltage1, 1000 ) ;
function updateTemperature1()
{
fetch( "/getdyntemp1" )
.then( response => {
if( !response.ok )
throw new Error( "fetch failed" ) ;
return response.json() ;
} )
.then( json => document.querySelector("#getdyntemp1").textContent = json.getdyntemp1 )
}
updateTemperature1() ;
setInterval( updateTemperature1, 1000 ) ;
function updateTemperature2()
{
fetch( "/getdyntemp2" )
.then( response => {
if( !response.ok )
throw new Error( "fetch failed" ) ;
return response.json() ;
} )
.then( json => document.querySelector("#getdyntemp2").textContent = json.getdyntemp2 )
}
updateTemperature2() ;
setInterval( updateTemperature2, 1000 ) ;
function updateCPUTemperature()
{
fetch( "/getdyncputemp" )
.then( response => {
if( !response.ok )
throw new Error( "fetch failed" ) ;
return response.json() ;
} )
.then( json => document.querySelector("#getdyncputemp").textContent = json.getdyncputemp )
}
updateCPUTemperature() ;
setInterval( updateCPUTemperature, 1000 ) ;
function updateRPM()
{
fetch( "/getdynrpm" )
.then( response => {
if( !response.ok )
throw new Error( "fetch failed" ) ;
return response.json() ;
} )
.then( json => document.querySelector("#getdynrpm").textContent = json.getdynrpm )
}
updateRPM() ;
setInterval( updateRPM, 1000 ) ;
</script>
<table border="1" width="100%" height="40%" style="background-color:rgb(0,0,0)" margin=auto>
<tbody>
<tr>
<td style="background-color:rgb(149,179,215);color:white;font-size:25px";align="left"><b>Voltage</b></td>
<td style="color:white;font-size:25px";align="left"><b><span style="font-size:70px" id="getdynvolt1"></span> V<b></td>
</tr>
<tr>
<td style="background-color:rgb(250,192,144);color:white;font-size:25px";align="left"><b>RPM</b></td>
<td style="color:white;font-size:25px";align="left"><b><span style="font-size:70px" id="getdynrpm"></span> 1/m<b></td>
</tr>
<tr>
<td style="background-color:rgb(217,151,149);color:white;font-size:25px";align="left"><b>Temp1</b></td>
<td style="color:white;font-size:25px";align="left"><b><span style="font-size:70px" id= "getdyntemp1"></span> °C<b></td>
</tr>
<tr>
<td style="background-color:rgb(194,214,154);color:white;font-size:25px";align="left"><b>Temp2</b></td>
<td style="color:white;font-size:25px";align="left"><b><span style="font-size:70px" id= "getdyntemp2"></span> °C<b></td>
</tr>
<tr>
<td style="background-color:rgb(178,161,199);color:white;font-size:25px";align="left"><b>CPU</b></td>
<td style="color:white;font-size:25px";align="left"><b><span style="font-size:70px" id="getdyncputemp"></span> °C<b></td>
</tr>
</tbody>
</table>
</body>
</html>
Alles anzeigen
Ich erstelle eine Tabelle und lasse mir die Werte jede Sekunde aktualisiert anzeigen.
Nun würde ich gerne diesen Code „integrieren“ – nur weiß ich leider nicht wie …
Auch hier sollte die Position/Geschwindigkeit/… jede Sekunde in der Tabelle aktualisiert werden.
Könnt Ihr mir hier weiterhelfen?
Grüße
Stefan