Beiträge von Sempervivum

Sempervivum · Vor 6 Stunden

Hallo Markus und willkommen im Forum!

Deine Vermutung trifft zu: Ein Button ist per Default ein Submitbutton, siehe z. B. hier:

https://wiki.selfhtml.org/wiki/HTML/Formulare/button

Einfachste Lösung: Das type-Attribut auf "button" setzen.

Alternative: Einen Link verwenden und diesen mit CSS wie einen Button gestalten.

Sempervivum · Montag, 15:58

Voll ein Syntaxfehler, schließendes Hochkomma fehlte, so ist es richtig:

Code

const ahref = document.querySelector('a[href^="mailto"]');
ahref.href = 'mailto:test@musteremail.de?subject=' + Name + ' &body=' + erg8;

Getestet hiermit:

Code

<a href="mailto:test@@musteremail.de">Mail senden</a>
<script>
// Variablen Name und erg8 muessen vorhanden sein
let Name = 'Betreff', erg8 = 'Der Inhalt';
const ahref = document.querySelector('a[href^="mailto"]');
ahref.href = 'mailto:test@musteremail.de?subject=' + Name + ' &body=' + erg8;
</script>

Sempervivum · Montag, 11:36

Versuche in deinem Javascript dieses:

Code

// Variablen Name und erg8 muessen vorhanden sein
const ahref = document.querySelector('a[href^="mailto"]);
ahref.href = 'mailto:test@musteremail.de?subject=' + Name + ' &body=' + erg8;

Sempervivum · 8. August 2020

OK, verstehe, dann hat mich dein früherer Thread in die Irre geführt.

Das Vorgehen ist jedoch das selbe: Schreibe das HTML, das die Variablen enthält, in eine eigene kleine Datei und aktualisiere diese durch fetch, wie früher beschrieben. Wenn es mehrere sind, dann u. U. das HTML der ganzen Tabelle.

Sempervivum · 8. August 2020

Aber irgend wo musst Du doch ein Bild haben, das durch eine PLC-Variable dynamisch gesteuert wird, sonst macht doch das ganze Nachladen keinen Sinn?

Sempervivum · 8. August 2020

In script-Tags setzen und am Ende des Body, vor dem schließenden </body>, einfügen:

Code

<script>
function getStatus() {
fetch('td-status.html')
.then(res => {
return res.text();
}).then(res => {
document.getElementById('td-status').innerHTML = res;
});
}
getStatus();
setInterval(getStatus, 1000);
</script>
</body>
</html>

Alles anzeigen

Und nicht vergessen, der Tabellenzelle die ID "td-status" zu geben.

Sempervivum · 8. August 2020

Das Flackern bekommst du weg, wenn Du das/die Statusbild(er) mit fetch aktualisierst, wie früher beschrieben.

Sempervivum · 8. August 2020

PS: Jedenfalls wenn Du mit Hintergrundbild das aus deinem Posting #3 meinst:

body {background-image: url("cloud7.jpg"); background-position: 0% 0%; background-repeat: no-repeat; background-size: cover; margin-top:1.0cm; margin-left:0.5cm;}

Sempervivum · 8. August 2020

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.

Sempervivum · 8. August 2020

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.

Sempervivum · 7. August 2020

PS: Ich habe ganz vergessen, dass Du das ja zyklisch aktualisieren musst:

Code

function getStatus() {
fetch('td-status.html')
.then(res => {
return res.text();
}).then(res => {
document.getElementById('td-status').innerHTML = res;
});
}
getStatus();
setInterval(getStatus, 1000);

Sempervivum · 7. August 2020

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

<img src="Farbe:="PLC-Variable":.JPG"
width="18px"
height="18px"
name="Farbe"
"StatusFarbeCPU = 0"
id="StatusFarbeCPU"
alt="Farbe" >

Alles anzeigen

(Weiß nicht genau, ob Du da noch irgend etwas einbinden musst, damit das mit der PLC-Variablen funktioniert.)

Dann die Tabellenzelle mit fetch einbinden:

Code

fetch('td-status.html')
.then(res => {
return res.text();
}).then(res => {
document.getElementById('td-status').innerHTML = res;
});

Sempervivum · 7. August 2020

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?

Sempervivum · 7. August 2020

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?

Sempervivum · 7. August 2020

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.

Sempervivum · 4. August 2020

Gern geschehen, ich bin kein Raspi-Spezialist, mit den Quellen wirst Du nach dem Urlaub sicher zum Ziel kommen.

Sempervivum · 4. August 2020

Nicht unbedingt, scheint keine unlösbare Aufgabe zu sein, auf dem Raspi ein Zertifikat zu installieren:

https://tutorials-raspberrypi.…t-lets-encrypt-erstellen/

Sempervivum · 4. August 2020

PS: Selfhtml sagt, dass localhost als sicherer Kontext gilt:

"Als sichere Kontexte zählen u. a. HTTPS, lokale Dateien (file:///) sowie der lokale Rechner http://localhost,"

Daher funktioniert es also bei mir lokal.

Dann haben wir u. U. schlechte Karten.

Sempervivum · 4. August 2020

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

<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>

Alles anzeigen

Sempervivum · 4. August 2020

Versuchen wir es mit einigen Logausgaben:

Code

<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>

Alles anzeigen

Dann siehst Du unterhalb der Tabelle was passiert.

Beiträge von Sempervivum

Button mit Link in einem Formular

Javascript Form Variable in einem Window.Open Request einbauen

Javascript Form Variable in einem Window.Open Request einbauen

Hintergrundbild lädt mit Seitenaktualisierung neu

Hintergrundbild lädt mit Seitenaktualisierung neu

Hintergrundbild lädt mit Seitenaktualisierung neu

Hintergrundbild lädt mit Seitenaktualisierung neu

Hintergrundbild lädt mit Seitenaktualisierung neu

Hintergrundbild lädt mit Seitenaktualisierung neu

Hintergrundbild lädt mit Seitenaktualisierung neu

Hintergrundbild lädt mit Seitenaktualisierung neu

Hintergrundbild lädt mit Seitenaktualisierung neu

Javascript Form Variable in einem Window.Open Request einbauen

Hintergrundbild lädt mit Seitenaktualisierung neu

Hintergrundbild lädt mit Seitenaktualisierung neu

HTML Code GeoLocating

HTML Code GeoLocating

HTML Code GeoLocating

HTML Code GeoLocating

HTML Code GeoLocating