Also da kommt jede Sekunde ein Eintrag dazu
Beiträge von stefanbla80
-
-
Nein, keine Abfrage
-
Also das ist der bisherige Code
HTML
Alles anzeigen<!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> <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> <tr> <td style="background-color:rgb(178,161,199);color:white;font-size:25px";align="left"><b>Speed</b></td> <td style="color:white;font-size:25px";align="left"><b><span style="font-size:70px" id="getspeed"></span> km/h<b></td> </tr> </tbody> </table> <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 ) ; function updateSpeed() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position) => { // console.log(position, position.coords.latitude, position.coords.longitude, position.coords.speed); console.log(position.coords.latitude, position.coords.longitude); // document.querySelector("#getlat").textContent = position.coords.latitude; // document.querySelector("#getlng").textContent = position.coords.longitude; document.querySelector("#getspeed").textContent = position.coords.speed * 3.6 }); } } updateSpeed(); setInterval(updateSpeed, 1000); </script> </body> </html>
Meine Anzeige sieht wie folgt aus
html-seminar.de/woltlab/attachment/2580/
Einen Geschwindigkeitswert bekomme ich nicht, auch keinen Fehler
Aufruf der HTML-Seite: http://192.168.178.32:5000
-
Oh man,
Ich habe den Raspi an einem mobilen Router , das SmartPhone auch.
Die HTML-Seite wird mit http aufgerufen.
Kann es sein, dass das dann grundsätzlich nicht geht?
-
also sollte am besten alles nach "unten".
Werde es nachher versuchen ...HTML
Alles anzeigen<!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> <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> <tr> <td style="background-color:rgb(178,161,199);color:white;font-size:25px";align="left"><b>Speed</b></td> <td style="color:white;font-size:25px";align="left"><b><span style="font-size:70px" id="getspeed"></span> km/h/td> </tr> </tbody> </table> <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 ) ; function updateSpeed() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position) => { // console.log(position, position.coords.latitude, position.coords.longitude, position.coords.speed); console.log(position.coords.latitude, position.coords.longitude); // document.querySelector("#getlat").textContent = position.coords.latitude; // document.querySelector("#getlng").textContent = position.coords.longitude; document.querySelector("#getspeed").textContent = position.coords.speed * 3.6 }); } } </script> </body> </html>
-
Vielen vielen Dank für Deine Mühe
HTML
Alles anzeigen<!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> <tr> <td style="background-color:rgb(178,161,199);color:white;font-size:25px";align="left"><b>Speed</b></td> <td style="color:white;font-size:25px";align="left"><b><span style="font-size:70px" id="getspeed"></span> km/h/td> </tr> </tbody> </table> <script> function updateSpeed() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position) => { // console.log(position, position.coords.latitude, position.coords.longitude, position.coords.speed); console.log(position.coords.latitude, position.coords.longitude); // document.querySelector("#getlat").textContent = position.coords.latitude; // document.querySelector("#getlng").textContent = position.coords.longitude; document.querySelector("#getspeed").textContent = position.coords.speed * 3.6 }); } } </script> </body> </html>
Meinst Du so?
-
Nachtrag
HTML
Alles anzeigen<!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 ) ; function updateSpeed() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition((position) => { // console.log(position, position.coords.latitude, position.coords.longitude, position.coords.speed); console.log(position.coords.latitude, position.coords.longitude); document.querySelector("#getlat").textContent = position.coords.latitude; document.querySelector("#getlng").textContent = position.coords.longitude; document.querySelector("#getspeed").textContent = position.coords.speed * 3.6 }); } } updateSpeed() ; setInterval(updateSpeed, 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> <tr> <td style="background-color:rgb(178,161,199);color:white;font-size:25px";align="left"><b>Speed</b></td> <td style="color:white;font-size:25px";align="left"><b><span style="font-size:70px" id="getspeed"></span> km/h/td> </tr> </tbody> </table> </body> </html>
-
Ich kann mir es erst heute abend anschauen/testen.
So sollte es machbar sein ...
=> Melde mich
Vorab schon mal vielen Dank -
es scheitert an der kontinuierlichen Abfrage und an der bereitstellung/Anzeige der Daten in der Tabelle
-
genau, ich will die Daten des SmartPhones nutzen um mir die eigene Geschwidigkeit auf meiner HMTL-Seite darzustellen.
-
naja, nicht wirklich gleich ...
Der Raspi wird auf einem Boot betrieben, das SmartPhone dient als Anzeige.
Um nicht zwischen Apps (es gibt ja etliche, die die Geschwindigkeit anzeigen) hin- und herschalten zu müssen würde ich gerne auf der HTML-Seite des Raspberry die GeoDaten von meinem SmartPhone anzeigen lassen. -
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
HTML
Alles anzeigen<!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>
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