Nein, Du verstehst da etwas falsch: Das Nachladen mit fetch macht nur sinn, wenn sich das Bild ändert. Dein Hintergrundbild ist jedoch immer das selbe, daher würde ein Nachladen keinen Sinn machen.
Beiträge von Sempervivum
-
-
Schon, aber wenn Du die Bilder auf diese Weise lädst und aktualisierst, wird nicht die ganze Seite neu geladen und dann wird auch das Hintergrundbild nicht mehr flackern.
-
PS: Ich habe ganz vergessen, dass Du das ja zyklisch aktualisieren musst:
Codefunction getStatus() { fetch('td-status.html') .then(res => { return res.text(); }).then(res => { document.getElementById('td-status').innerHTML = res; }); } getStatus(); setInterval(getStatus, 1000); -
Ich fürchte, in dem Fall kannst Du den Pelz des Bären nicht waschen, ohne ihn nass zu machen
Gib der Tabellenzelle eine ID:
<td id="td-status"><img id="statusanzeige"></td>
Und erzeuge eine kleine HTML-Datei mit dem img-Tag:
Code
Alles anzeigen<img src="Farbe:="PLC-Variable":.JPG" width="18px" height="18px" name="Farbe" "StatusFarbeCPU = 0" id="StatusFarbeCPU" alt="Farbe" >(Weiß nicht genau, ob Du da noch irgend etwas einbinden musst, damit das mit der PLC-Variablen funktioniert.)
Dann die Tabellenzelle mit fetch einbinden:
Codefetch('td-status.html') .then(res => { return res.text(); }).then(res => { document.getElementById('td-status').innerHTML = res; }); -
In welchem Zusammenhang spielt sich das Ganze denn ab? Ist es so, dass es das a-href-Tag schon gibt und nur durch Javascript das richtige Ziel bzw. Attribut eingetragen werden soll?
-
Ich erinnere mich, das war diese Sache wo Variablen von einer SPS eingefügt wurden. Worauf ich hinaus wollte ist, die betr. Abschnitte mit Ajax zu aktualisieren, dann würde der Rest der Seite nicht neu geladen und das Flackern/Blitzen unterbleibt. Ich nehme an, die Seite wird mit einem normalen Browser angeschaut, so dass Javascript und Ajax zur Verfügung stehen?
-
Warum musst Du denn die Seite jede Sekunde aktualisieren? Da gibt es u. U. eine bessere Lösung etwa in der Richtung, dass nur bestimmte Inhalte aktualisiert werden.
-
Gern geschehen, ich bin kein Raspi-Spezialist, mit den Quellen wirst Du nach dem Urlaub sicher zum Ziel kommen.
-
Nicht unbedingt, scheint keine unlösbare Aufgabe zu sein, auf dem Raspi ein Zertifikat zu installieren:
https://tutorials-raspberrypi.de/raspberry-pi-s…rypt-erstellen/
-
PS: Selfhtml sagt, dass localhost als sicherer Kontext gilt:
"Als sichere Kontexte zählen u. a.
HTTPS, lokale Dateien (file:///) sowie der lokale Rechnerhttp://localhost,"Daher funktioniert es also bei mir lokal.
Dann haben wir u. U. schlechte Karten.
-
Das sieht ja schon mal ganz gut aus. Fragt sich, warum keine Geschwindigkeit erkannt wird.
Ich sehe da bei caniuse, dass das nur auf sicheren Servern funktioniert:
https://caniuse.com/#feat=geolocation
Allerdings auf meinem localhost, nicht sicher, funktioniert es mit Opera. Und die Logausgabe sagt, dass Geolocation verfügbar ist.
Ich halte es zwar für unwahrscheinlich, dass dein Handy keine Pfeilfunktionen unterstützt aber sicherheitshalber sollten wir auf die althergebrachte Methode umstellen:
Code
Alles anzeigen<script> // hier die Sensoren wie bisher const thelog = document.getElementById('log'); function updateSpeed() { thelog.innerHTML += 'start geoloc<br>'; if (navigator.geolocation) { thelog.innerHTML += 'geoloc avail<br>'; navigator.geolocation.getCurrentPosition(function (position) { // <-- hier thelog.innerHTML += 'speed=' + position.coords.speed + '<br>'; // 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 }); } else { thelog.innerHTML += 'geoloc not avail<br>'; } } updateSpeed(); setInterval(updateSpeed, 1000); </script> -
Versuchen wir es mit einigen Logausgaben:
Code
Alles anzeigen<div id="log" style="color: white;"></div> <script> // hier die Sensoren wie bisher const thelog = document.getElementById('log'); function updateSpeed() { thelog.innerHTML += 'start geoloc<br>'; if (navigator.geolocation) { thelog.innerHTML += 'geoloc avail<br>'; navigator.geolocation.getCurrentPosition((position) => { thelog.innerHTML += 'speed=' + position.coords.speed + '<br>'; // 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 }); } else { thelog.innerHTML += 'geoloc not avail<br>'; } } updateSpeed(); setInterval(updateSpeed, 1000); </script>Dann siehst Du unterhalb der Tabelle was passiert.
-
Normaler Weise muss man immer zustimmen, wenn das Handy auf die Position zugreifen will. Kommt diese Abfrage?
-
Ich sehe keinen Grund, warum das nicht gehen sollte. Die Position etc. wird ja clientseitig im Smartphone ermittelt. Du bekommst dann natürlich die Position des Smartphones. Wenn es nicht funktioniert, sollten wir untersuchen, woran es liegt.
-
Was noch fehlt, ist der Aufruf der neuen Funktion, das müsste dann so aussehen:
Code
Alles anzeigen// darüber alles wie bisher 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>Denke, so dürfte es funktionieren. Wenn nicht, dann sieh dir die Console an.
-
Ja, was das Neue betrifft schon. Was ich da unter 1. geschrieben habe, gilt aber auch für das bisherige Javascript. Versuche es so, wie Du es jetzt hast, den Stand in deinem letzten Posting und wirf einen Blick in die Console. Dort wirst Du sicher Fehlermeldungen finden.
-
Zwei Anmerkungen dazu:
- So wird der erste Direktaufruf der Funktionen nicht funktionieren, da Du das Javascript vor dem HTML notiert hast. Verschiebe es an das Ende des Body, vor das schließende </body>.
- Da Du nur für die Geschwindigkeit ein HTML-Element hast, musst Du für die anderen das Javascript deaktivieren:
Code
Alles anzeigenfunction 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 }); } } -
Eigentlich kannst Du das alles aus deinem vorhandenen Code ablesen. Müsste dann so aussehen:
Code
Alles anzeigen<tr> <td>Latitude:</td> <td id="getlat"></td> </tr> <tr> <td>Longitude:</td> <td id="getlng"></td> </tr> <tr> <td>Speed:</td> <td id="getspeed"></td> </tr> </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; }); } } updateSpeed(); setInterval(updateSpeed, 1000); </script> -
Das macht die Sache natürlich viel einfacher. Woran scheitert es denn, die Anleitung bei Selfhtml ist doch ganz gut?
-
Also weniger für die Öffentlichkeit sondern mehr für deine eigene Verwendung?