8db09746b7
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.
145 lines
5.1 KiB
HTML
145 lines
5.1 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/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 = $('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 () {
|
|
$('startButton').value = "Running";
|
|
$('startButton').disabled = true;
|
|
setTimeout(start_delayed, 250);
|
|
iterations = $('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");
|
|
|
|
canvas.resize(start_width, start_height, true);
|
|
test_functions();
|
|
$('startButton').disabled = false;
|
|
$('startButton').value = "Do Performance Test";
|
|
}
|
|
|
|
function run_test () {
|
|
var width, height;
|
|
width = $('width').value;
|
|
height = $('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");
|
|
$('iterations').value = 10;
|
|
canvas = Canvas({'target' : 'canvas'});
|
|
canvas.resize(start_width, start_height, true);
|
|
message("Canvas initialized");
|
|
test_functions();
|
|
}
|
|
</script>
|
|
</html>
|