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
commit
e79917c3db
|
|
@ -20,7 +20,7 @@ var that = {}, // Public API methods
|
|||
c_forceCanvas = false,
|
||||
|
||||
// Predefine function variables (jslint)
|
||||
imageDataGet, rgbxImageData, cmapImageData,
|
||||
imageDataGet, bgrxImageData, cmapImageData,
|
||||
setFillColor, rescale,
|
||||
|
||||
// The full frame buffer (logical canvas) size
|
||||
|
|
@ -183,13 +183,13 @@ rescale = function(factor) {
|
|||
};
|
||||
|
||||
setFillColor = function(color) {
|
||||
var rgb, newStyle;
|
||||
var bgr, newStyle;
|
||||
if (conf.true_color) {
|
||||
rgb = color;
|
||||
bgr = color;
|
||||
} 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) {
|
||||
c_ctx.fillStyle = 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
|
||||
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_y = y;
|
||||
if ((width === 16) && (height === 16)) {
|
||||
|
|
@ -441,13 +441,13 @@ that.startTile = function(x, y, width, height, color) {
|
|||
data = tile.data;
|
||||
if (conf.prefer_js) {
|
||||
if (conf.true_color) {
|
||||
rgb = color;
|
||||
bgr = color;
|
||||
} else {
|
||||
rgb = conf.colourMap[color[0]];
|
||||
bgr = conf.colourMap[color[0]];
|
||||
}
|
||||
red = rgb[0];
|
||||
green = rgb[1];
|
||||
blue = rgb[2];
|
||||
red = bgr[2];
|
||||
green = bgr[1];
|
||||
blue = bgr[0];
|
||||
for (i = 0; i < (width * height * 4); i+=4) {
|
||||
data[i ] = red;
|
||||
data[i + 1] = green;
|
||||
|
|
@ -461,18 +461,18 @@ that.startTile = function(x, y, width, height, color) {
|
|||
|
||||
// Update sub-rectangle of the current tile
|
||||
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) {
|
||||
data = tile.data;
|
||||
width = tile.width;
|
||||
if (conf.true_color) {
|
||||
rgb = color;
|
||||
bgr = color;
|
||||
} else {
|
||||
rgb = conf.colourMap[color[0]];
|
||||
bgr = conf.colourMap[color[0]];
|
||||
}
|
||||
red = rgb[0];
|
||||
green = rgb[1];
|
||||
blue = rgb[2];
|
||||
red = bgr[2];
|
||||
green = bgr[1];
|
||||
blue = bgr[0];
|
||||
xend = x + w;
|
||||
yend = y + h;
|
||||
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
|
||||
};
|
||||
|
||||
rgbxImageData = function(x, y, width, height, arr, offset) {
|
||||
bgrxImageData = function(x, y, width, height, arr, offset) {
|
||||
var img, i, j, data, v = viewport;
|
||||
/*
|
||||
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);
|
||||
data = img.data;
|
||||
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 + 2] = arr[j + 2];
|
||||
data[i + 2] = arr[j ];
|
||||
data[i + 3] = 255; // Set Alpha
|
||||
}
|
||||
c_ctx.putImageData(img, x - v.x, y - v.y);
|
||||
};
|
||||
|
||||
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);
|
||||
data = img.data;
|
||||
cmap = conf.colourMap;
|
||||
for (i=0, j=offset; i < (width * height * 4); i+=4, j+=1) {
|
||||
rgb = cmap[arr[j]];
|
||||
data[i ] = rgb[0];
|
||||
data[i + 1] = rgb[1];
|
||||
data[i + 2] = rgb[2];
|
||||
bgr = cmap[arr[j]];
|
||||
data[i ] = bgr[2];
|
||||
data[i + 1] = bgr[1];
|
||||
data[i + 2] = bgr[0];
|
||||
data[i + 3] = 255; // Set Alpha
|
||||
}
|
||||
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) {
|
||||
if (conf.true_color) {
|
||||
rgbxImageData(x, y, width, height, arr, offset);
|
||||
bgrxImageData(x, y, width, height, arr, offset);
|
||||
} else {
|
||||
cmapImageData(x, y, width, height, arr, offset);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -819,6 +819,16 @@ init_msg = function() {
|
|||
", green_shift: " + green_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 */
|
||||
name_length = ws.rQshift32();
|
||||
fb_name = ws.rQshiftStr(name_length);
|
||||
|
|
@ -893,7 +903,7 @@ normal_msg = function() {
|
|||
//Util.Debug("red after: " + red);
|
||||
green = 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.Info("Registered " + num_colours + " colourMap entries");
|
||||
|
|
@ -1429,9 +1439,9 @@ pixelFormat = function() {
|
|||
arr.push16(255); // red-max
|
||||
arr.push16(255); // green-max
|
||||
arr.push16(255); // blue-max
|
||||
arr.push8(0); // red-shift
|
||||
arr.push8(16); // red-shift
|
||||
arr.push8(8); // green-shift
|
||||
arr.push8(16); // blue-shift
|
||||
arr.push8(0); // blue-shift
|
||||
|
||||
arr.push8(0); // padding
|
||||
arr.push8(0); // padding
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
<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="../include/display.js"></script>
|
||||
<script src="face.png.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -36,7 +36,7 @@
|
|||
|
||||
<script>
|
||||
var msg_cnt = 0;
|
||||
var start_width = 300, start_height = 100;
|
||||
var display, start_width = 300, start_height = 100;
|
||||
var iterations;
|
||||
|
||||
function message(str) {
|
||||
|
|
@ -48,12 +48,12 @@
|
|||
}
|
||||
|
||||
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]);
|
||||
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]);
|
||||
|
||||
canvas.blitStringImage("data:image/png;base64," + face64, 150, 10);
|
||||
display.blitStringImage("data:image/png;base64," + face64, 150, 10);
|
||||
|
||||
var himg = new Image();
|
||||
himg.onload = function () {
|
||||
|
|
@ -70,14 +70,14 @@
|
|||
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]);
|
||||
canvas.putTile(img);
|
||||
img = display.getTile(5,5,16,16,[0,128,128]);
|
||||
display.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);
|
||||
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 () {
|
||||
|
|
@ -90,7 +90,7 @@
|
|||
function start_delayed () {
|
||||
var ret;
|
||||
|
||||
ret = canvas.set_prefer_js(true);
|
||||
ret = display.set_prefer_js(true);
|
||||
if (ret) {
|
||||
message("Running test: prefer Javascript ops");
|
||||
var time1 = run_test();
|
||||
|
|
@ -100,14 +100,14 @@
|
|||
message("Could not run: prefer Javascript ops");
|
||||
}
|
||||
|
||||
canvas.set_prefer_js(false);
|
||||
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') {
|
||||
canvas.resize(start_width, start_height, true);
|
||||
display.resize(start_width, start_height, true);
|
||||
test_functions();
|
||||
}
|
||||
$D('startButton').disabled = false;
|
||||
|
|
@ -118,7 +118,7 @@
|
|||
var width, height;
|
||||
width = $D('width').value;
|
||||
height = $D('height').value;
|
||||
canvas.resize(width, height);
|
||||
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];
|
||||
|
|
@ -126,9 +126,9 @@
|
|||
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 tile = display.getTile(x, y, w, h, color);
|
||||
display.setSubTile(tile, 0, 0, w, h, color);
|
||||
display.putTile(tile);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -139,8 +139,8 @@
|
|||
window.onload = function() {
|
||||
message("in onload");
|
||||
$D('iterations').value = 10;
|
||||
canvas = new Canvas({'target' : $D('canvas')});
|
||||
canvas.resize(start_width, start_height, true);
|
||||
display = new Display({'target' : $D('canvas')});
|
||||
display.resize(start_width, start_height, true);
|
||||
message("Canvas initialized");
|
||||
test_functions();
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue