nicht angemeldet
Hallo. 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.
Matthias Apsel
Tabellenkalk
Gunnar Bittersmann