Hallo zusammen,
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 einen "GeoLocation"-Code „integrieren“ – nur weiß ich leider nicht wie …
Auch hier sollte die Position/Geschwindigkeit/… jede Sekunde in der Tabelle aktualisiert werden.
Die Daten selbst sollten über das SmartPhone bereitgestellt werden können.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to get your coordinates.</p>
<button onclick="getLocation()">Try It</button>
<p id="demo"></p>
<script>
var x = document.getElementById("demo");
function getLocation() {
if (navigator.geolocation) {
navigator.geolocation.watchPosition(showPosition);
} else {
x.innerHTML = "Geolocation is not supported by this browser.";
}
}
function showPosition(position) {
x.innerHTML="Latitude: " + position.coords.latitude +
"<br>Longitude: " + position.coords.longitude;
}
</script>
</body>
</html>
Alles anzeigen
Quelle: https://www.w3schools.com/html/tryit.asp…n_watchposition
Grüße
Stefan