7b6edcbe72
Rename the $() selector to $D() so that it doesn't collide with the jQuery name. The API change is that the 'target' option for Canvas and RFB objects must now be a DOM Canvas element. A string is no longer accepted because this requires that a DOM lookup is done and the Canvas and RFB should have no UI code in them. Modularity.
148 lines
5.2 KiB
HTML
148 lines
5.2 KiB
HTML
<html>
|
|
<head>
|
|
<title>Canvas Performance Test</title>
|
|
<!--
|
|
<script type='text/javascript'
|
|
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
|
|
-->
|
|
<script src="include/util.js"></script>
|
|
<script src="include/webutil.js"></script>
|
|
<script src="include/base64.js"></script>
|
|
<script src="include/canvas.js"></script>
|
|
<script src="face.png.js"></script>
|
|
</head>
|
|
<body>
|
|
Iterations: <input id='iterations' style='width:50' value="100">
|
|
|
|
Width: <input id='width' style='width:50' value="640">
|
|
Height: <input id='height' style='width:50' value="480">
|
|
|
|
<input id='startButton' type='button' value='Do Performance Test'
|
|
style='width:150px' onclick="begin();">
|
|
|
|
<br><br>
|
|
|
|
<b>Canvas</b> (should see three squares and two happy faces):<br>
|
|
<canvas id="canvas" width="200" height="100"
|
|
style="border-style: dotted; border-width: 1px;">
|
|
Canvas not supported.
|
|
</canvas>
|
|
|
|
<br>
|
|
Results:<br>
|
|
<textarea id="messages" style="font-size: 9;" cols=80 rows=25></textarea>
|
|
</body>
|
|
|
|
<script>
|
|
var msg_cnt = 0;
|
|
var start_width = 300, start_height = 100;
|
|
var iterations;
|
|
|
|
function message(str) {
|
|
console.log(str);
|
|
cell = $D('messages');
|
|
cell.innerHTML += msg_cnt + ": " + str + "\n";
|
|
cell.scrollTop = cell.scrollHeight;
|
|
msg_cnt += 1;
|
|
}
|
|
|
|
function test_functions () {
|
|
var img, x, y, w, h, ctx = canvas.getContext();
|
|
w = canvas.get_width();
|
|
h = canvas.get_height();
|
|
canvas.fillRect(0, 0, w, h, [240,240,240]);
|
|
|
|
canvas.blitStringImage("data:image/png;base64," + face64, 150, 10);
|
|
|
|
var himg = new Image();
|
|
himg.onload = function () {
|
|
ctx.drawImage(himg, 200, 40); };
|
|
himg.src = "face.png";
|
|
|
|
/* Test array image data */
|
|
data = [];
|
|
for (y=0; y< 50; y++) {
|
|
for (x=0; x< 50; x++) {
|
|
data[(y*50 + x)*4 + 0] = 255 - parseInt((255 / 50) * y, 10);
|
|
data[(y*50 + x)*4 + 1] = parseInt((255 / 50) * y, 10);
|
|
data[(y*50 + x)*4 + 2] = parseInt((255 / 50) * x, 10);
|
|
data[(y*50 + x)*4 + 3] = 255;
|
|
}
|
|
}
|
|
canvas.blitImage(30, 10, 50, 50, data, 0);
|
|
|
|
img = canvas.getTile(5,5,16,16,[0,128,128]);
|
|
canvas.putTile(img);
|
|
|
|
img = canvas.getTile(90,15,16,16,[0,0,0]);
|
|
canvas.setSubTile(img, 0,0,16,16,[128,128,0]);
|
|
canvas.putTile(img);
|
|
}
|
|
|
|
function begin () {
|
|
$D('startButton').value = "Running";
|
|
$D('startButton').disabled = true;
|
|
setTimeout(start_delayed, 250);
|
|
iterations = $D('iterations').value;
|
|
}
|
|
|
|
function start_delayed () {
|
|
var ret;
|
|
|
|
ret = canvas.set_prefer_js(true);
|
|
if (ret) {
|
|
message("Running test: prefer Javascript ops");
|
|
var time1 = run_test();
|
|
message("prefer Javascript ops: " + time1 + "ms total, " +
|
|
(time1 / iterations) + "ms per frame");
|
|
} else {
|
|
message("Could not run: prefer Javascript ops");
|
|
}
|
|
|
|
canvas.set_prefer_js(false);
|
|
message("Running test: prefer Canvas ops");
|
|
var time2 = run_test();
|
|
message("prefer Canvas ops: " + time2 + "ms total, " +
|
|
(time2 / iterations) + "ms per frame");
|
|
|
|
if (Util.get_logging() !== 'debug') {
|
|
canvas.resize(start_width, start_height, true);
|
|
test_functions();
|
|
}
|
|
$D('startButton').disabled = false;
|
|
$D('startButton').value = "Do Performance Test";
|
|
}
|
|
|
|
function run_test () {
|
|
var width, height;
|
|
width = $D('width').value;
|
|
height = $D('height').value;
|
|
canvas.resize(width, height);
|
|
var color, start_time = (new Date()).getTime(), w, h;
|
|
for (var i=0; i < iterations; i++) {
|
|
color = [128, 128, (255 / iterations) * i, 0];
|
|
for (var x=0; x < width; x = x + 16) {
|
|
for (var y=0; y < height; y = y + 16) {
|
|
w = Math.min(16, width - x);
|
|
h = Math.min(16, height - y);
|
|
var tile = canvas.getTile(x, y, w, h, color);
|
|
canvas.setSubTile(tile, 0, 0, w, h, color);
|
|
canvas.putTile(tile);
|
|
}
|
|
}
|
|
}
|
|
var end_time = (new Date()).getTime();
|
|
return (end_time - start_time);
|
|
}
|
|
|
|
window.onload = function() {
|
|
message("in onload");
|
|
$D('iterations').value = 10;
|
|
canvas = new Canvas({'target' : $D('canvas')});
|
|
canvas.resize(start_width, start_height, true);
|
|
message("Canvas initialized");
|
|
test_functions();
|
|
}
|
|
</script>
|
|
</html>
|