websockify/tests/canvas.html

148 lines
5.2 KiB
HTML
Raw Normal View History

<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">&nbsp;
Width: <input id='width' style='width:50' value="640">&nbsp;
Height: <input id='height' style='width:50' value="480">&nbsp;
<input id='startButton' type='button' value='Do Performance Test'
style='width:150px' onclick="begin();">&nbsp;
<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 () {
New API. Refactor Canvas and RFB objects. New API: To use the RFB object, you now must instantiate it (this allows more than one instance of it on the same page). rfb = new RFB(settings); The 'settings' variable is a namespace that contains initial default settings. These can also be set and read using 'rfb.set_FOO()' and 'rfb.get_FOO()' where FOO is the setting name. The current settings are (and defaults) are: - target: the DOM Canvas element to use ('VNC_canvas'). - encrypt: whether to encrypt the connection (false) - true_color: true_color or palette (true) - b64encode: base64 encode the WebSockets data (true) - local_cursor: use local cursor rendering (true if supported) - connectTimeout: milliseconds to wait for connect (2000) - updateState: callback when RFB state changes (none) - clipboardReceive: callback when clipboard data received (none) The parameters to the updateState callback have also changed. The function spec is now updateState(rfb, state, oldstate, msg): - rfb: the RFB object that this state change is for. - state: the new state - oldstate: the previous state - msg: a message associate with the state (not always set). The clipboardReceive spec is clipboardReceive(rfb, text): - rfb: the RFB object that this text is from. - text: the clipboard text received. Changes: - The RFB and Canvas namespaces are now more proper objects. Private implementation is no longer exposed and the public API has been made explicit. Also, instantiation allows more than one VNC connection on the same page (to complete this, DefaultControls will also need this same refactoring). - Added 'none' logging level. - Removed automatic stylesheet selection workaround in util.js and move it to defaultcontrols so that it doesn't interfere with intergration. - Also, some major JSLinting. - Fix input, canvas, and cursor tests to work with new model.
2010-08-02 23:07:27 +01:00
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]);
New API. Refactor Canvas and RFB objects. New API: To use the RFB object, you now must instantiate it (this allows more than one instance of it on the same page). rfb = new RFB(settings); The 'settings' variable is a namespace that contains initial default settings. These can also be set and read using 'rfb.set_FOO()' and 'rfb.get_FOO()' where FOO is the setting name. The current settings are (and defaults) are: - target: the DOM Canvas element to use ('VNC_canvas'). - encrypt: whether to encrypt the connection (false) - true_color: true_color or palette (true) - b64encode: base64 encode the WebSockets data (true) - local_cursor: use local cursor rendering (true if supported) - connectTimeout: milliseconds to wait for connect (2000) - updateState: callback when RFB state changes (none) - clipboardReceive: callback when clipboard data received (none) The parameters to the updateState callback have also changed. The function spec is now updateState(rfb, state, oldstate, msg): - rfb: the RFB object that this state change is for. - state: the new state - oldstate: the previous state - msg: a message associate with the state (not always set). The clipboardReceive spec is clipboardReceive(rfb, text): - rfb: the RFB object that this text is from. - text: the clipboard text received. Changes: - The RFB and Canvas namespaces are now more proper objects. Private implementation is no longer exposed and the public API has been made explicit. Also, instantiation allows more than one VNC connection on the same page (to complete this, DefaultControls will also need this same refactoring). - Added 'none' logging level. - Removed automatic stylesheet selection workaround in util.js and move it to defaultcontrols so that it doesn't interfere with intergration. - Also, some major JSLinting. - Fix input, canvas, and cursor tests to work with new model.
2010-08-02 23:07:27 +01:00
canvas.blitStringImage("data:image/png;base64," + face64, 150, 10);
var himg = new Image();
himg.onload = function () {
New API. Refactor Canvas and RFB objects. New API: To use the RFB object, you now must instantiate it (this allows more than one instance of it on the same page). rfb = new RFB(settings); The 'settings' variable is a namespace that contains initial default settings. These can also be set and read using 'rfb.set_FOO()' and 'rfb.get_FOO()' where FOO is the setting name. The current settings are (and defaults) are: - target: the DOM Canvas element to use ('VNC_canvas'). - encrypt: whether to encrypt the connection (false) - true_color: true_color or palette (true) - b64encode: base64 encode the WebSockets data (true) - local_cursor: use local cursor rendering (true if supported) - connectTimeout: milliseconds to wait for connect (2000) - updateState: callback when RFB state changes (none) - clipboardReceive: callback when clipboard data received (none) The parameters to the updateState callback have also changed. The function spec is now updateState(rfb, state, oldstate, msg): - rfb: the RFB object that this state change is for. - state: the new state - oldstate: the previous state - msg: a message associate with the state (not always set). The clipboardReceive spec is clipboardReceive(rfb, text): - rfb: the RFB object that this text is from. - text: the clipboard text received. Changes: - The RFB and Canvas namespaces are now more proper objects. Private implementation is no longer exposed and the public API has been made explicit. Also, instantiation allows more than one VNC connection on the same page (to complete this, DefaultControls will also need this same refactoring). - Added 'none' logging level. - Removed automatic stylesheet selection workaround in util.js and move it to defaultcontrols so that it doesn't interfere with intergration. - Also, some major JSLinting. - Fix input, canvas, and cursor tests to work with new model.
2010-08-02 23:07:27 +01:00
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;
}
}
New API. Refactor Canvas and RFB objects. New API: To use the RFB object, you now must instantiate it (this allows more than one instance of it on the same page). rfb = new RFB(settings); The 'settings' variable is a namespace that contains initial default settings. These can also be set and read using 'rfb.set_FOO()' and 'rfb.get_FOO()' where FOO is the setting name. The current settings are (and defaults) are: - target: the DOM Canvas element to use ('VNC_canvas'). - encrypt: whether to encrypt the connection (false) - true_color: true_color or palette (true) - b64encode: base64 encode the WebSockets data (true) - local_cursor: use local cursor rendering (true if supported) - connectTimeout: milliseconds to wait for connect (2000) - updateState: callback when RFB state changes (none) - clipboardReceive: callback when clipboard data received (none) The parameters to the updateState callback have also changed. The function spec is now updateState(rfb, state, oldstate, msg): - rfb: the RFB object that this state change is for. - state: the new state - oldstate: the previous state - msg: a message associate with the state (not always set). The clipboardReceive spec is clipboardReceive(rfb, text): - rfb: the RFB object that this text is from. - text: the clipboard text received. Changes: - The RFB and Canvas namespaces are now more proper objects. Private implementation is no longer exposed and the public API has been made explicit. Also, instantiation allows more than one VNC connection on the same page (to complete this, DefaultControls will also need this same refactoring). - Added 'none' logging level. - Removed automatic stylesheet selection workaround in util.js and move it to defaultcontrols so that it doesn't interfere with intergration. - Also, some major JSLinting. - Fix input, canvas, and cursor tests to work with new model.
2010-08-02 23:07:27 +01:00
canvas.blitImage(30, 10, 50, 50, data, 0);
New API. Refactor Canvas and RFB objects. New API: To use the RFB object, you now must instantiate it (this allows more than one instance of it on the same page). rfb = new RFB(settings); The 'settings' variable is a namespace that contains initial default settings. These can also be set and read using 'rfb.set_FOO()' and 'rfb.get_FOO()' where FOO is the setting name. The current settings are (and defaults) are: - target: the DOM Canvas element to use ('VNC_canvas'). - encrypt: whether to encrypt the connection (false) - true_color: true_color or palette (true) - b64encode: base64 encode the WebSockets data (true) - local_cursor: use local cursor rendering (true if supported) - connectTimeout: milliseconds to wait for connect (2000) - updateState: callback when RFB state changes (none) - clipboardReceive: callback when clipboard data received (none) The parameters to the updateState callback have also changed. The function spec is now updateState(rfb, state, oldstate, msg): - rfb: the RFB object that this state change is for. - state: the new state - oldstate: the previous state - msg: a message associate with the state (not always set). The clipboardReceive spec is clipboardReceive(rfb, text): - rfb: the RFB object that this text is from. - text: the clipboard text received. Changes: - The RFB and Canvas namespaces are now more proper objects. Private implementation is no longer exposed and the public API has been made explicit. Also, instantiation allows more than one VNC connection on the same page (to complete this, DefaultControls will also need this same refactoring). - Added 'none' logging level. - Removed automatic stylesheet selection workaround in util.js and move it to defaultcontrols so that it doesn't interfere with intergration. - Also, some major JSLinting. - Fix input, canvas, and cursor tests to work with new model.
2010-08-02 23:07:27 +01:00
img = canvas.getTile(5,5,16,16,[0,128,128]);
canvas.putTile(img);
New API. Refactor Canvas and RFB objects. New API: To use the RFB object, you now must instantiate it (this allows more than one instance of it on the same page). rfb = new RFB(settings); The 'settings' variable is a namespace that contains initial default settings. These can also be set and read using 'rfb.set_FOO()' and 'rfb.get_FOO()' where FOO is the setting name. The current settings are (and defaults) are: - target: the DOM Canvas element to use ('VNC_canvas'). - encrypt: whether to encrypt the connection (false) - true_color: true_color or palette (true) - b64encode: base64 encode the WebSockets data (true) - local_cursor: use local cursor rendering (true if supported) - connectTimeout: milliseconds to wait for connect (2000) - updateState: callback when RFB state changes (none) - clipboardReceive: callback when clipboard data received (none) The parameters to the updateState callback have also changed. The function spec is now updateState(rfb, state, oldstate, msg): - rfb: the RFB object that this state change is for. - state: the new state - oldstate: the previous state - msg: a message associate with the state (not always set). The clipboardReceive spec is clipboardReceive(rfb, text): - rfb: the RFB object that this text is from. - text: the clipboard text received. Changes: - The RFB and Canvas namespaces are now more proper objects. Private implementation is no longer exposed and the public API has been made explicit. Also, instantiation allows more than one VNC connection on the same page (to complete this, DefaultControls will also need this same refactoring). - Added 'none' logging level. - Removed automatic stylesheet selection workaround in util.js and move it to defaultcontrols so that it doesn't interfere with intergration. - Also, some major JSLinting. - Fix input, canvas, and cursor tests to work with new model.
2010-08-02 23:07:27 +01:00
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 () {
New API. Refactor Canvas and RFB objects. New API: To use the RFB object, you now must instantiate it (this allows more than one instance of it on the same page). rfb = new RFB(settings); The 'settings' variable is a namespace that contains initial default settings. These can also be set and read using 'rfb.set_FOO()' and 'rfb.get_FOO()' where FOO is the setting name. The current settings are (and defaults) are: - target: the DOM Canvas element to use ('VNC_canvas'). - encrypt: whether to encrypt the connection (false) - true_color: true_color or palette (true) - b64encode: base64 encode the WebSockets data (true) - local_cursor: use local cursor rendering (true if supported) - connectTimeout: milliseconds to wait for connect (2000) - updateState: callback when RFB state changes (none) - clipboardReceive: callback when clipboard data received (none) The parameters to the updateState callback have also changed. The function spec is now updateState(rfb, state, oldstate, msg): - rfb: the RFB object that this state change is for. - state: the new state - oldstate: the previous state - msg: a message associate with the state (not always set). The clipboardReceive spec is clipboardReceive(rfb, text): - rfb: the RFB object that this text is from. - text: the clipboard text received. Changes: - The RFB and Canvas namespaces are now more proper objects. Private implementation is no longer exposed and the public API has been made explicit. Also, instantiation allows more than one VNC connection on the same page (to complete this, DefaultControls will also need this same refactoring). - Added 'none' logging level. - Removed automatic stylesheet selection workaround in util.js and move it to defaultcontrols so that it doesn't interfere with intergration. - Also, some major JSLinting. - Fix input, canvas, and cursor tests to work with new model.
2010-08-02 23:07:27 +01:00
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");
}
New API. Refactor Canvas and RFB objects. New API: To use the RFB object, you now must instantiate it (this allows more than one instance of it on the same page). rfb = new RFB(settings); The 'settings' variable is a namespace that contains initial default settings. These can also be set and read using 'rfb.set_FOO()' and 'rfb.get_FOO()' where FOO is the setting name. The current settings are (and defaults) are: - target: the DOM Canvas element to use ('VNC_canvas'). - encrypt: whether to encrypt the connection (false) - true_color: true_color or palette (true) - b64encode: base64 encode the WebSockets data (true) - local_cursor: use local cursor rendering (true if supported) - connectTimeout: milliseconds to wait for connect (2000) - updateState: callback when RFB state changes (none) - clipboardReceive: callback when clipboard data received (none) The parameters to the updateState callback have also changed. The function spec is now updateState(rfb, state, oldstate, msg): - rfb: the RFB object that this state change is for. - state: the new state - oldstate: the previous state - msg: a message associate with the state (not always set). The clipboardReceive spec is clipboardReceive(rfb, text): - rfb: the RFB object that this text is from. - text: the clipboard text received. Changes: - The RFB and Canvas namespaces are now more proper objects. Private implementation is no longer exposed and the public API has been made explicit. Also, instantiation allows more than one VNC connection on the same page (to complete this, DefaultControls will also need this same refactoring). - Added 'none' logging level. - Removed automatic stylesheet selection workaround in util.js and move it to defaultcontrols so that it doesn't interfere with intergration. - Also, some major JSLinting. - Fix input, canvas, and cursor tests to work with new model.
2010-08-02 23:07:27 +01:00
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;
New API. Refactor Canvas and RFB objects. New API: To use the RFB object, you now must instantiate it (this allows more than one instance of it on the same page). rfb = new RFB(settings); The 'settings' variable is a namespace that contains initial default settings. These can also be set and read using 'rfb.set_FOO()' and 'rfb.get_FOO()' where FOO is the setting name. The current settings are (and defaults) are: - target: the DOM Canvas element to use ('VNC_canvas'). - encrypt: whether to encrypt the connection (false) - true_color: true_color or palette (true) - b64encode: base64 encode the WebSockets data (true) - local_cursor: use local cursor rendering (true if supported) - connectTimeout: milliseconds to wait for connect (2000) - updateState: callback when RFB state changes (none) - clipboardReceive: callback when clipboard data received (none) The parameters to the updateState callback have also changed. The function spec is now updateState(rfb, state, oldstate, msg): - rfb: the RFB object that this state change is for. - state: the new state - oldstate: the previous state - msg: a message associate with the state (not always set). The clipboardReceive spec is clipboardReceive(rfb, text): - rfb: the RFB object that this text is from. - text: the clipboard text received. Changes: - The RFB and Canvas namespaces are now more proper objects. Private implementation is no longer exposed and the public API has been made explicit. Also, instantiation allows more than one VNC connection on the same page (to complete this, DefaultControls will also need this same refactoring). - Added 'none' logging level. - Removed automatic stylesheet selection workaround in util.js and move it to defaultcontrols so that it doesn't interfere with intergration. - Also, some major JSLinting. - Fix input, canvas, and cursor tests to work with new model.
2010-08-02 23:07:27 +01:00
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);
New API. Refactor Canvas and RFB objects. New API: To use the RFB object, you now must instantiate it (this allows more than one instance of it on the same page). rfb = new RFB(settings); The 'settings' variable is a namespace that contains initial default settings. These can also be set and read using 'rfb.set_FOO()' and 'rfb.get_FOO()' where FOO is the setting name. The current settings are (and defaults) are: - target: the DOM Canvas element to use ('VNC_canvas'). - encrypt: whether to encrypt the connection (false) - true_color: true_color or palette (true) - b64encode: base64 encode the WebSockets data (true) - local_cursor: use local cursor rendering (true if supported) - connectTimeout: milliseconds to wait for connect (2000) - updateState: callback when RFB state changes (none) - clipboardReceive: callback when clipboard data received (none) The parameters to the updateState callback have also changed. The function spec is now updateState(rfb, state, oldstate, msg): - rfb: the RFB object that this state change is for. - state: the new state - oldstate: the previous state - msg: a message associate with the state (not always set). The clipboardReceive spec is clipboardReceive(rfb, text): - rfb: the RFB object that this text is from. - text: the clipboard text received. Changes: - The RFB and Canvas namespaces are now more proper objects. Private implementation is no longer exposed and the public API has been made explicit. Also, instantiation allows more than one VNC connection on the same page (to complete this, DefaultControls will also need this same refactoring). - Added 'none' logging level. - Removed automatic stylesheet selection workaround in util.js and move it to defaultcontrols so that it doesn't interfere with intergration. - Also, some major JSLinting. - Fix input, canvas, and cursor tests to work with new model.
2010-08-02 23:07:27 +01:00
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')});
New API. Refactor Canvas and RFB objects. New API: To use the RFB object, you now must instantiate it (this allows more than one instance of it on the same page). rfb = new RFB(settings); The 'settings' variable is a namespace that contains initial default settings. These can also be set and read using 'rfb.set_FOO()' and 'rfb.get_FOO()' where FOO is the setting name. The current settings are (and defaults) are: - target: the DOM Canvas element to use ('VNC_canvas'). - encrypt: whether to encrypt the connection (false) - true_color: true_color or palette (true) - b64encode: base64 encode the WebSockets data (true) - local_cursor: use local cursor rendering (true if supported) - connectTimeout: milliseconds to wait for connect (2000) - updateState: callback when RFB state changes (none) - clipboardReceive: callback when clipboard data received (none) The parameters to the updateState callback have also changed. The function spec is now updateState(rfb, state, oldstate, msg): - rfb: the RFB object that this state change is for. - state: the new state - oldstate: the previous state - msg: a message associate with the state (not always set). The clipboardReceive spec is clipboardReceive(rfb, text): - rfb: the RFB object that this text is from. - text: the clipboard text received. Changes: - The RFB and Canvas namespaces are now more proper objects. Private implementation is no longer exposed and the public API has been made explicit. Also, instantiation allows more than one VNC connection on the same page (to complete this, DefaultControls will also need this same refactoring). - Added 'none' logging level. - Removed automatic stylesheet selection workaround in util.js and move it to defaultcontrols so that it doesn't interfere with intergration. - Also, some major JSLinting. - Fix input, canvas, and cursor tests to work with new model.
2010-08-02 23:07:27 +01:00
canvas.resize(start_width, start_height, true);
message("Canvas initialized");
test_functions();
}
</script>
</html>