863e7f0fa0
Instead of R,G,B (red-shift of 0, green-shift of 8, and blue-shift of 16), use the default ordering of B,G,R (red-shift of 16, green-shift of 8, and blue-shift of 0) that tightvncserver uses (and that VMWare's VNC server seems to require). Also, warn in the console if the server does not default to the new format. Fix the tests/canvas.html test. This is a general fix with regards to the rename/refactor of canvas.js into display.js and not specific to the color re-ordering.
149 lines
5.3 KiB
HTML
149 lines
5.3 KiB
HTML
<!DOCTYPE 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/display.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 display, 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 = display.get_context();
|
|
w = display.get_width();
|
|
h = display.get_height();
|
|
display.fillRect(0, 0, w, h, [240,240,240]);
|
|
|
|
display.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;
|
|
}
|
|
}
|
|
display.blitImage(30, 10, 50, 50, data, 0);
|
|
|
|
img = display.getTile(5,5,16,16,[0,128,128]);
|
|
display.putTile(img);
|
|
|
|
img = display.getTile(90,15,16,16,[0,0,0]);
|
|
display.setSubTile(img, 0,0,16,16,[128,128,0]);
|
|
display.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 = display.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");
|
|
}
|
|
|
|
display.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') {
|
|
display.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;
|
|
display.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 = display.getTile(x, y, w, h, color);
|
|
display.setSubTile(tile, 0, 0, w, h, color);
|
|
display.putTile(tile);
|
|
}
|
|
}
|
|
}
|
|
var end_time = (new Date()).getTime();
|
|
return (end_time - start_time);
|
|
}
|
|
|
|
window.onload = function() {
|
|
message("in onload");
|
|
$D('iterations').value = 10;
|
|
display = new Display({'target' : $D('canvas')});
|
|
display.resize(start_width, start_height, true);
|
|
message("Canvas initialized");
|
|
test_functions();
|
|
}
|
|
</script>
|
|
</html>
|