pic vom selbstgeschriebenen server holen und darstellen
1 
dedlfix
0 0 
JürgenB
0 
Rolf B
0 0 JürgenB
0 
Gunnar Bittersmann
0 Doppelposting
pic vom selbstgeschriebenen server holen und darstellen
Hallo, ich komme mit einer ansich simpel scheinenden Aufgabe nicht klar, mehrere Anläufe scheiterten. Einfach gesagt, möchte ich einen Film im Browser darstellen, der aus Einzelbildern zusammensetzt wird, den ich auf dem Server geliefert werden. Bin mit einigen Umwegen und Tips aus eurer Community nun auf folgenden einfachen Code gekommen, Idee ist, einfach das src- attribute im img zu ändern
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
table { border: 2px solid black; }
tr { border: 2px solid black; }
td {
border: 1px solid black;
vertical-align: top;
}
body { background-color: #d8d8a8; }
mytext {;}
</style>
<script type="text/javascript">
function getdata(idname){
document.getElementById(idname).src='bild1.bmp';
console.log("update "+idname);
}
setInterval(getdata, 1000, "test1");
</script>
</head>
<body>
<h1>Beispiel</h1>
<img id="test1" alt="Datei kann nicht geladen werden" />
<h1>Beispiel 2</h1>
<img id="test2" alt="Datei kann nicht geladen werden" />
</body>
</html>
Das funktioniert allerdings nur beim ersten Refresh, danach wird zwar noch der Log auf der Console ausgegeben, allerdings gehen keine neuen Anfragen an der Server. Liegt das am Caching? Ich versuche also, den HTTP- Header entsprechend zu schreiben. Also z.b.
HTTP/1.1 200 OK\r\nContent-Type: text/html; charset=utf-8\r\ncache-control:no-cache\r\n\r\n
Funktioniert allerdings immer noch nicht. Wie gehe ich vor?
-
Tach!
Bin mit einigen Umwegen und Tips aus eurer Community nun auf folgenden einfachen Code gekommen, Idee ist, einfach das src- attribute im img zu ändern
Du änderst es aber nicht, du weist immer wieder denselben Wert zu. Warum sollte das zu einem Reload führen?
Funktioniert allerdings immer noch nicht. Wie gehe ich vor?
Wenn der Name der serverseitigen Datei immer derselbe ist, dann hilft vermutlich der Trick mit dem sich ändernden Querystring. Zum Beispiel eine hochgezählte Zahl oder ein Timestamp der aktuellen Urzeit. Das Cachen zu verbieten ist trotzdem geboten, der muss ja nicht mit solchem volatilen Zeug zugemüllt werden.
dedlfix.
-
Mit diesem Script funktioniert es jetzt
<script type="text/javascript"> z=0; function getdata(idname){ z++; dateiname="bild"+z+".bmp" document.getElementById(idname).src=dateiname; console.log("update "+idname+" "+dateiname); } setInterval(getdata, 50, "test1"); </script>-
Hallo,
> z++; > dateiname="bild"+z+".bmp"dateiname="bild.bmp?" + z;sollte aber auch gehen. Wobei bei beiden Lösungen der Cache für diese Bilder abgeschaltet sein sollte, da sonst beim erneuten Aufruf ja wieder bei z=0 angefangen wird. Oder du nimmst als Startwert für z die Sekunden seit dem 1.1.1970.
Gruß
Jürgen -
Hallo xharx,
gut gemacht. Allerdings...
- hast Du mit setInterval nicht unbedingt das perfekte Timing. Das kann die Darstellung ruckeln lassen.
- sind BMP ein unkomprimiertes Format und kosten daher mehr Übertragungszeit als nötig (was bei 50ms Takt durchaus ein Problem sein kann). Das kann die Darstellung ruckeln lassen.
- musst Du noch den Fall behandeln, dass z die höchste Bildnummer übersteigt (aber das hattest Du sicher schon auf der Liste).
Alternativen:
- Die BMP in JPG konvertieren
- Vorab ein Videofile aus den Bildern machen und das HTML5 Video-Element verwenden.
- Die BMPs in ein animiertes GIF umwandeln
Alle 3 Alternativen senken die Ladezeit und das Datenvolumen. Mit einem Videofile oder einem animierten GIF brauchst Du auch kein clientseitiges Javascript mehr, um den Film zu zeigen. GIF hat allerdings nur 8-bit Farbpalette, und für <video> gibt's bis heute keinen browserübergreifenden Standard, du musst also mehrere Formate anbieten.
Rolf
-
Übertragungsraten sollten eigentlich kein Problem sein, weil ich ja über localhost angebunden bin. Am liebsten wäre mir, wenn ich nicht über setInterval() gehen müsste um abzudaten, sondern gleich mit dem Refreshsignal des Browsers oder des Betriebssystems. Weiß jemand, wo ich dieses Signal herkriege?
-
Hallo,
… Am liebsten wäre mir, wenn ich nicht über setInterval() gehen müsste um abzudaten, …
hast du schon mal requestAnimationFrame ausprobiert?
Gruß
Jürgen
-
-
@@Rolf B
gut gemacht.
Gut gemacht ginge anders, wie im anderen Thread schon besprochen. Ich hatte überlegt, diesen hier als Doppelposting zu sperren, hatte aber Gnade mit dedlfix’ schon gegebener Antwort.
- hast Du mit setInterval nicht unbedingt das perfekte Timing
Wann immer es um Bildschirmausgabe geht ist
setIntervalwohl falsch und stattdessenrequestAnimationFramezu verwenden.- Die BMP in JPG konvertieren
Nicht JPEG, sondern MPEG.
- Vorab ein Videofile aus den Bildern machen und das HTML5 Video-Element verwenden.
Ja.
- Die BMPs in ein animiertes GIF umwandeln
Nei-en! Wenn Video, dann ein ordentliches Video-Format.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory-
Hallo Gunnar,
wie im anderen Thread schon besprochen.
Ups, den hatte ich überhaupt nicht gesehen…
Rolf
-
@@Rolf B
wie im anderen Thread schon besprochen.
Ups, den hatte ich überhaupt nicht gesehen…
Das ist der Grund gegen Doppelpostings. Ich hätte diesen Thread schließen sollen, dedlfix’ Antwort hin oder her.
LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-
-
-
-
Doppelpost, wird hier weiter diskutiert: https://forum.selfhtml.org/self/2017/sep/10/pic-refreshen/1705320#m1705320