nicht angemeldet
Canvas als Daten vom selbstgeschriebenen Server importieren
Matthias Apsel
Tabellenkalk
Gunnar BittersmannHallo. Ich möchte für eine Simulation laufend Daten auf einem Canvas abspielen, also eine Art Film abspielen. Folgendes script schafft das irgendwie, aber noch nicht gut genug:
<!DOCTYPE html>
<html>
<head>
<style>
table { border: 2px solid black; }
tr { border: 2px solid black; }
td {
border: 1px solid black;
vertical-align: top;
}
</style>
<style type="text/css">
body { background-color: #d8d8a8; }
mytext {;}
</style>
<script type="text/javascript">
function getnews(idname){
var myAjax = new XMLHttpRequest();
myAjax.responseType="text"
myAjax.onreadystatechange=function(){
if (myAjax.readyState==4 && myAjax.status==200){
document.getElementById(idname).innerHTML=myAjax.responseText;
}
};
myAjax.open("GET", idname, true);
myAjax.send();
}
imgData=0;
canvas=0;
canvasheight=480;
canvaswidth=640;
function render() {
var myAjax = new XMLHttpRequest();
myAjax.responseType="arraybuffer";
if (myAjax.response==0) console.log("network error");
myAjax.onreadystatechange=function(){
if (myAjax.readyState==4 && myAjax.status==200){
if (!canvas) {
canvas=document.getElementById("canvasid");
console.log("canvasneu");
context=canvas.getContext('2d');
if (context) {
if (!imgData) {
imgData=context.getImageData(0,0,canvaswidth,canvasheight);
}
}
}
else {
responsearray=new Uint8Array(myAjax.response);
i=responsearray.length;
while (i--) imgData.data[i]=responsearray[i];
responsearray=null;
context.putImageData(imgData, 0, 0);
}
}
};
myAjax.open("GET", "canvasdata", true);
myAjax.send();
}
function animate() {
render();
requestAnimationFrame(animate);
}
animate();
//Benutzung: setInterval(getnews, interval, name des id- Feldes im body) benutzen, um regelmäßig im Interval abzudaten
//im server GET- Nachricht abfangen und Inhalt mittels send zurücksenden
setInterval(getnews, 1000, "refreshdata");
getnews("prefs");
getnews("kosten");
getnews("mutabor");
</script>
</head>
<body>
<h1>Welcome to EvoProgs 12!</h1>
<p>Bad times for organisms on this planet. The age of programisms is about to come.<p/>
<table>
<tr>
<td>
<a href="ende">Progsramm beenden</a><br>
<a href="arenazeigen">Arena zeigen</a><br>
<a href="#">max</a><br>
<a href="langsam">langsam</a><br>
</td>
<td id="prefs">prefs</td>
<td id="kosten">kosten</td>
<td id="mutabor">mutabor</td>
<td rowspan="2" id="refreshdata">Daten werden vorbereitet...</>
</td>
</tr>
<tr>
<!-- td id="getarenapic" colspan =4></td -->
<td colspan = 4> <canvas id="canvasid" width=640 height=480 alt="neu canvas">
<!--td id="getarenapic" colspan =4>
<img src="bild1.bmp" alt="Grafik kann nicht angezeigt werden" / -->
<!--td colspan =4>
<img src="bild1.bmp" alt="Grafik kann nicht angezeigt werden" / -->
</td>
</tr>
<tr>
<td>
<td colspan="3" id="signaturen">signaturen</td>
</td>
<td>
bl6
</td>
</tr>
</table>
<!-- img src="/home/xharx/Dropbox/Programmieren/evsim/evoprogs1/PNG_transparency_demonstration_1.png" alt="bla" /-->
</body>
</html>
Ich übernehme die Daten also als XMLHttpRequest.response, wobei ich den .responseType auf "arraybuffer" setze. Daraus ergibt sich das Problem, dass ein erhebliches Memoryleak entsteht, um die hundert Megabyte pro Sekunde. (es werden ja ca 60 Frames/sec übermittelt). Außerdem finde ich unschön, dass ich die Daten noch in ein Uint8Array convertieren muss (Dieses Array ist aber nicht Ursache des Memoryleaks). Das Problem mit dem Memoryleak tritt nur mit dem .responseType="arraybuffer" auf. Wie kann ich dieses Leak loswerden?
Außerdem braucht firefox ca 50% der Prozessorleistung. Wie kann ich das beschleunigen?
Und dann habe ich noch ein ganz dumme andere Frage: Wie kann ich im Forum die abonnierten threads auflisten? Ich finde nirgends einen switch dafür.
-
Hallo xharx,
Und dann habe ich noch ein ganz dumme andere Frage:
Warum soll die Frage dumm sein?
Wie kann ich im Forum die abonnierten threads auflisten? Ich finde nirgends einen switch dafür.
Den gibt es nicht, weil noch keiner den Wunsch hatte, einen solchen zu brauchen. Für die abonnierten Threads bekommst du Benachrichtigungen. Keine Benachrichtigung − keine Aktivität im Thread.
Für dich besonders wichtige Threads kannst du für dich als interessant markieren, einfach indem du irgendeinen Beitrag aus dem entsprechenden Thread als interessant markierst. Die kannst du dir dann auch auflisten lassen.
Bis demnächst
Matthias--
Rosen sind rot. -
Hey,
Also kurz damit ich das richtig verstehe. Du baust also auf dem Server ein Bild mit Daten zusammen um es dann direkt ins Canvas zu zeichnen?
Wäre es nicht besser, nur die Daten vom Server zu holen und beim Client das Canvas aus den Daten zu zeichnen. Und die Daten per
setIntervalzu überschreiben und somit bei jedem Aufruf vonrender()das Bild aus den gerade zur Verfügung stehenden Daten zu zeichnen?Gruß
Jo-
@@j4nk3y
Und die Daten per
setIntervalzu überschreibenNein,
requestAnimationFrame. Das hatten wir schon in xharx’ Thread. Nervige Doppelpostings nerven.LLAP 🖖
--
“When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
-
Hallo xharx,
es wäre besser, du würdest mit diesem Beitrag auf deine ursprüngliche Frage antworten. Auf diese Weise bleibt zusammen, was zusammen gehört.
Bis demnächst
Matthias--
Rosen sind rot.