jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote branch 'origin/issue-70' 

Conflicts:
	include/display.js
	include/rfb.js

This merges in the fix for https://github.com/kanaka/noVNC/issues/70

This changes noVNC to use the preferred color ordering that most VNC
server prefer and that VMWare VNC requires. It's possible this may
break some VNC servers out there in which case we might have to do
something a bit more subtle such as having alternate render functions
for little and big endian color ordering.
This commit is contained in:
Joel Martin 2012-01-12 17:07:07 -06:00
parent a9a7f0e18c ac99a1f791
commit e79917c3db
3 changed files with 61 additions and 51 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

52
include/display.js
View File

@ -20,7 +20,7 @@ var that = {}, // Public API methods
c_forceCanvas = false, c_forceCanvas = false,
// Predefine function variables (jslint) // Predefine function variables (jslint)
imageDataGet, rgbxImageData, cmapImageData, imageDataGet, bgrxImageData, cmapImageData,
setFillColor, rescale, setFillColor, rescale,
// The full frame buffer (logical canvas) size // The full frame buffer (logical canvas) size
@ -183,13 +183,13 @@ rescale = function(factor) {
}; };
setFillColor = function(color) { setFillColor = function(color) {
var rgb, newStyle; var bgr, newStyle;
if (conf.true_color) { if (conf.true_color) {
rgb = color; bgr = color;
} else { } else {
rgb = conf.colourMap[color[0]]; bgr = conf.colourMap[color[0]];
} }
newStyle = "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")"; newStyle = "rgb(" + bgr[2] + "," + bgr[1] + "," + bgr[0] + ")";
if (newStyle !== c_prevStyle) { if (newStyle !== c_prevStyle) {
c_ctx.fillStyle = newStyle; c_ctx.fillStyle = newStyle;
c_prevStyle = newStyle; c_prevStyle = newStyle;
@ -430,7 +430,7 @@ that.copyImage = function(old_x, old_y, new_x, new_y, w, h) {
// Start updating a tile // Start updating a tile
that.startTile = function(x, y, width, height, color) { that.startTile = function(x, y, width, height, color) {
var data, rgb, red, green, blue, i; var data, bgr, red, green, blue, i;
tile_x = x; tile_x = x;
tile_y = y; tile_y = y;
if ((width === 16) && (height === 16)) { if ((width === 16) && (height === 16)) {
@ -441,13 +441,13 @@ that.startTile = function(x, y, width, height, color) {
data = tile.data; data = tile.data;
if (conf.prefer_js) { if (conf.prefer_js) {
if (conf.true_color) { if (conf.true_color) {
rgb = color; bgr = color;
} else { } else {
rgb = conf.colourMap[color[0]]; bgr = conf.colourMap[color[0]];
} }
red = rgb[0]; red = bgr[2];
green = rgb[1]; green = bgr[1];
blue = rgb[2]; blue = bgr[0];
for (i = 0; i < (width * height * 4); i+=4) { for (i = 0; i < (width * height * 4); i+=4) {
data[i ] = red; data[i ] = red;
data[i + 1] = green; data[i + 1] = green;
@ -461,18 +461,18 @@ that.startTile = function(x, y, width, height, color) {
// Update sub-rectangle of the current tile // Update sub-rectangle of the current tile
that.subTile = function(x, y, w, h, color) { that.subTile = function(x, y, w, h, color) {
var data, p, rgb, red, green, blue, width, j, i, xend, yend; var data, p, bgr, red, green, blue, width, j, i, xend, yend;
if (conf.prefer_js) { if (conf.prefer_js) {
data = tile.data; data = tile.data;
width = tile.width; width = tile.width;
if (conf.true_color) { if (conf.true_color) {
rgb = color; bgr = color;
} else { } else {
rgb = conf.colourMap[color[0]]; bgr = conf.colourMap[color[0]];
} }
red = rgb[0]; red = bgr[2];
green = rgb[1]; green = bgr[1];
blue = rgb[2]; blue = bgr[0];
xend = x + w; xend = x + w;
yend = y + h; yend = y + h;
for (j = y; j < yend; j += 1) { for (j = y; j < yend; j += 1) {
@ -497,7 +497,7 @@ that.finishTile = function() {
// else: No-op, if not prefer_js then already done by setSubTile // else: No-op, if not prefer_js then already done by setSubTile
}; };
rgbxImageData = function(x, y, width, height, arr, offset) { bgrxImageData = function(x, y, width, height, arr, offset) {
var img, i, j, data, v = viewport; var img, i, j, data, v = viewport;
/* /*
if ((x - v.x >= v.w) || (y - v.y >= v.h) || if ((x - v.x >= v.w) || (y - v.y >= v.h) ||
@ -509,24 +509,24 @@ rgbxImageData = function(x, y, width, height, arr, offset) {
img = c_ctx.createImageData(width, height); img = c_ctx.createImageData(width, height);
data = img.data; data = img.data;
for (i=0, j=offset; i < (width * height * 4); i=i+4, j=j+4) { for (i=0, j=offset; i < (width * height * 4); i=i+4, j=j+4) {
data[i ] = arr[j ]; data[i ] = arr[j + 2];
data[i + 1] = arr[j + 1]; data[i + 1] = arr[j + 1];
data[i + 2] = arr[j + 2]; data[i + 2] = arr[j ];
data[i + 3] = 255; // Set Alpha data[i + 3] = 255; // Set Alpha
} }
c_ctx.putImageData(img, x - v.x, y - v.y); c_ctx.putImageData(img, x - v.x, y - v.y);
}; };
cmapImageData = function(x, y, width, height, arr, offset) { cmapImageData = function(x, y, width, height, arr, offset) {
var img, i, j, data, rgb, cmap; var img, i, j, data, bgr, cmap;
img = c_ctx.createImageData(width, height); img = c_ctx.createImageData(width, height);
data = img.data; data = img.data;
cmap = conf.colourMap; cmap = conf.colourMap;
for (i=0, j=offset; i < (width * height * 4); i+=4, j+=1) { for (i=0, j=offset; i < (width * height * 4); i+=4, j+=1) {
rgb = cmap[arr[j]]; bgr = cmap[arr[j]];
data[i ] = rgb[0]; data[i ] = bgr[2];
data[i + 1] = rgb[1]; data[i + 1] = bgr[1];
data[i + 2] = rgb[2]; data[i + 2] = bgr[0];
data[i + 3] = 255; // Set Alpha data[i + 3] = 255; // Set Alpha
} }
c_ctx.putImageData(img, x - viewport.x, y - viewport.y); c_ctx.putImageData(img, x - viewport.x, y - viewport.y);
@ -534,7 +534,7 @@ cmapImageData = function(x, y, width, height, arr, offset) {
that.blitImage = function(x, y, width, height, arr, offset) { that.blitImage = function(x, y, width, height, arr, offset) {
if (conf.true_color) { if (conf.true_color) {
rgbxImageData(x, y, width, height, arr, offset); bgrxImageData(x, y, width, height, arr, offset);
} else { } else {
cmapImageData(x, y, width, height, arr, offset); cmapImageData(x, y, width, height, arr, offset);
} }

16
include/rfb.js
View File

@ -819,6 +819,16 @@ init_msg = function() {
", green_shift: " + green_shift + ", green_shift: " + green_shift +
", blue_shift: " + blue_shift); ", blue_shift: " + blue_shift);
if (big_endian !== 0) {
Util.Warn("Server native endian is not little endian");
}
if (red_shift !== 16) {
Util.Warn("Server native red-shift is not 16");
}
if (blue_shift !== 0) {
Util.Warn("Server native blue-shift is not 0");
}
/* Connection name/title */ /* Connection name/title */
name_length = ws.rQshift32(); name_length = ws.rQshift32();
fb_name = ws.rQshiftStr(name_length); fb_name = ws.rQshiftStr(name_length);
@ -893,7 +903,7 @@ normal_msg = function() {
//Util.Debug("red after: " + red); //Util.Debug("red after: " + red);
green = parseInt(ws.rQshift16() / 256, 10); green = parseInt(ws.rQshift16() / 256, 10);
blue = parseInt(ws.rQshift16() / 256, 10); blue = parseInt(ws.rQshift16() / 256, 10);
display.set_colourMap([red, green, blue], first_colour + c); display.set_colourMap([blue, green, red], first_colour + c);
} }
Util.Debug("colourMap: " + display.get_colourMap()); Util.Debug("colourMap: " + display.get_colourMap());
Util.Info("Registered " + num_colours + " colourMap entries"); Util.Info("Registered " + num_colours + " colourMap entries");
@ -1429,9 +1439,9 @@ pixelFormat = function() {
arr.push16(255); // red-max arr.push16(255); // red-max
arr.push16(255); // green-max arr.push16(255); // green-max
arr.push16(255); // blue-max arr.push16(255); // blue-max
arr.push8(0); // red-shift arr.push8(16); // red-shift
arr.push8(8); // green-shift arr.push8(8); // green-shift
arr.push8(16); // blue-shift arr.push8(0); // blue-shift
arr.push8(0); // padding arr.push8(0); // padding
arr.push8(0); // padding arr.push8(0); // padding

44
tests/canvas.html
View File

@ -9,7 +9,7 @@
<script src="../include/util.js"></script> <script src="../include/util.js"></script>
<script src="../include/webutil.js"></script> <script src="../include/webutil.js"></script>
<script src="../include/base64.js"></script> <script src="../include/base64.js"></script>
<script src="../include/canvas.js"></script> <script src="../include/display.js"></script>
<script src="face.png.js"></script> <script src="face.png.js"></script>
</head> </head>
<body> <body>
@ -36,7 +36,7 @@
<script> <script>
var msg_cnt = 0; var msg_cnt = 0;
var start_width = 300, start_height = 100; var display, start_width = 300, start_height = 100;
var iterations; var iterations;
function message(str) { function message(str) {
@ -48,12 +48,12 @@
} }
function test_functions () { function test_functions () {
var img, x, y, w, h, ctx = canvas.getContext(); var img, x, y, w, h, ctx = display.get_context();
w = canvas.get_width(); w = display.get_width();
h = canvas.get_height(); h = display.get_height();
canvas.fillRect(0, 0, w, h, [240,240,240]); display.fillRect(0, 0, w, h, [240,240,240]);
canvas.blitStringImage("data:image/png;base64," + face64, 150, 10); display.blitStringImage("data:image/png;base64," + face64, 150, 10);
var himg = new Image(); var himg = new Image();
himg.onload = function () { himg.onload = function () {
@ -70,14 +70,14 @@
data[(y*50 + x)*4 + 3] = 255; data[(y*50 + x)*4 + 3] = 255;
} }
} }
canvas.blitImage(30, 10, 50, 50, data, 0); display.blitImage(30, 10, 50, 50, data, 0);
img = canvas.getTile(5,5,16,16,[0,128,128]); img = display.getTile(5,5,16,16,[0,128,128]);
canvas.putTile(img); display.putTile(img);
img = canvas.getTile(90,15,16,16,[0,0,0]); img = display.getTile(90,15,16,16,[0,0,0]);
canvas.setSubTile(img, 0,0,16,16,[128,128,0]); display.setSubTile(img, 0,0,16,16,[128,128,0]);
canvas.putTile(img); display.putTile(img);
} }
function begin () { function begin () {
@ -90,7 +90,7 @@
function start_delayed () { function start_delayed () {
var ret; var ret;
ret = canvas.set_prefer_js(true); ret = display.set_prefer_js(true);
if (ret) { if (ret) {
message("Running test: prefer Javascript ops"); message("Running test: prefer Javascript ops");
var time1 = run_test(); var time1 = run_test();
@ -100,14 +100,14 @@
message("Could not run: prefer Javascript ops"); message("Could not run: prefer Javascript ops");
} }
canvas.set_prefer_js(false); display.set_prefer_js(false);
message("Running test: prefer Canvas ops"); message("Running test: prefer Canvas ops");
var time2 = run_test(); var time2 = run_test();
message("prefer Canvas ops: " + time2 + "ms total, " + message("prefer Canvas ops: " + time2 + "ms total, " +
(time2 / iterations) + "ms per frame"); (time2 / iterations) + "ms per frame");
if (Util.get_logging() !== 'debug') { if (Util.get_logging() !== 'debug') {
canvas.resize(start_width, start_height, true); display.resize(start_width, start_height, true);
test_functions(); test_functions();
} }
$D('startButton').disabled = false; $D('startButton').disabled = false;
@ -118,7 +118,7 @@
var width, height; var width, height;
width = $D('width').value; width = $D('width').value;
height = $D('height').value; height = $D('height').value;
canvas.resize(width, height); display.resize(width, height);
var color, start_time = (new Date()).getTime(), w, h; var color, start_time = (new Date()).getTime(), w, h;
for (var i=0; i < iterations; i++) { for (var i=0; i < iterations; i++) {
color = [128, 128, (255 / iterations) * i, 0]; color = [128, 128, (255 / iterations) * i, 0];
@ -126,9 +126,9 @@
for (var y=0; y < height; y = y + 16) { for (var y=0; y < height; y = y + 16) {
w = Math.min(16, width - x); w = Math.min(16, width - x);
h = Math.min(16, height - y); h = Math.min(16, height - y);
var tile = canvas.getTile(x, y, w, h, color); var tile = display.getTile(x, y, w, h, color);
canvas.setSubTile(tile, 0, 0, w, h, color); display.setSubTile(tile, 0, 0, w, h, color);
canvas.putTile(tile); display.putTile(tile);
} }
} }
} }
@ -139,8 +139,8 @@
window.onload = function() { window.onload = function() {
message("in onload"); message("in onload");
$D('iterations').value = 10; $D('iterations').value = 10;
canvas = new Canvas({'target' : $D('canvas')}); display = new Display({'target' : $D('canvas')});
canvas.resize(start_width, start_height, true); display.resize(start_width, start_height, true);
message("Canvas initialized"); message("Canvas initialized");
test_functions(); test_functions();
} }