Fix ordering of tightPNG fills.

This addresses issue #65:
https://github.com/kanaka/noVNC/issues/65

When tightPNG encoded rects were received, any fill types were
immediately drawn to the canvas while images (PNG, JPEGs) were queued
for loading. This can cause screen corruption when things are changing
rapidly due to the misordering of fills vs images.

Also, remove the onload setting in each image on the queue and instead
decrease the tight image queue scanning interval (to 40ms or 25
scans per second).
This commit is contained in:
Joel Martin 2011-07-06 16:32:42 -05:00
parent c6fd71536f
commit a4ff1f573d
1 changed files with 23 additions and 8 deletions

View File

@ -96,7 +96,7 @@ var that = {}, // Public API methods
fb_height = 0,
fb_name = "",
scan_imgQ_rate = 100,
scan_imgQ_rate = 40, // 25 times per second or so
last_req_time = 0,
rre_chunk_sz = 100,
@ -1244,7 +1244,14 @@ encHandlers.TIGHT_PNG = function display_tight_png() {
case "fill":
ws.rQshift8(); // shift off ctl
color = ws.rQshiftBytes(fb_depth);
display.fillRect(FBU.x, FBU.y, FBU.width, FBU.height, color);
FBU.imgQ.push({
'type': 'fill',
'img': {'complete': true},
'x': FBU.x,
'y': FBU.y,
'width': FBU.width,
'height': FBU.height,
'color': color});
break;
case "jpeg":
case "png":
@ -1256,8 +1263,12 @@ encHandlers.TIGHT_PNG = function display_tight_png() {
//Util.Debug(" png, ws.rQlen(): " + ws.rQlen() + ", clength[0]: " + clength[0] + ", clength[1]: " + clength[1]);
ws.rQshiftBytes(1 + clength[0]); // shift off ctl + compact length
img = new Image();
img.onload = scan_tight_imgQ;
FBU.imgQ.push([img, FBU.x, FBU.y]);
//img.onload = scan_tight_imgQ;
FBU.imgQ.push({
'type': 'img',
'img': img,
'x': FBU.x,
'y': FBU.y});
img.src = "data:image/" + cmode +
extract_data_uri(ws.rQshiftBytes(clength[1]));
img = null;
@ -1280,13 +1291,17 @@ extract_data_uri = function(arr) {
};
scan_tight_imgQ = function() {
var img, imgQ, ctx;
var data, imgQ, ctx;
ctx = display.get_context();
if (rfb_state === 'normal') {
imgQ = FBU.imgQ;
while ((imgQ.length > 0) && (imgQ[0][0].complete)) {
img = imgQ.shift();
ctx.drawImage(img[0], img[1], img[2]);
while ((imgQ.length > 0) && (imgQ[0].img.complete)) {
data = imgQ.shift();
if (data['type'] === 'fill') {
display.fillRect(data.x, data.y, data.width, data.height, data.color);
} else {
ctx.drawImage(data.img, data.x, data.y);
}
}
setTimeout(scan_tight_imgQ, scan_imgQ_rate);
}