Change default PixelFormat. Fix canvas test.
Instead of R,G,B (red-shift of 0, green-shift of 8, and blue-shift of 16), use the default ordering of B,G,R (red-shift of 16, green-shift of 8, and blue-shift of 0) that tightvncserver uses (and that VMWare's VNC server seems to require). Also, warn in the console if the server does not default to the new format. Fix the tests/canvas.html test. This is a general fix with regards to the rename/refactor of canvas.js into display.js and not specific to the color re-ordering.
This commit is contained in:
parent
3122b5d70a
commit
863e7f0fa0
@ -19,11 +19,11 @@ var that = {}, // Public API methods
|
|||||||
c_ctx = null,
|
c_ctx = null,
|
||||||
c_forceCanvas = false,
|
c_forceCanvas = false,
|
||||||
|
|
||||||
c_imageData, c_rgbxImage, c_cmapImage,
|
c_imageData, c_bgrxImage, c_cmapImage,
|
||||||
|
|
||||||
// Predefine function variables (jslint)
|
// Predefine function variables (jslint)
|
||||||
imageDataCreate, imageDataGet, rgbxImageData, cmapImageData,
|
imageDataCreate, imageDataGet, bgrxImageData, cmapImageData,
|
||||||
rgbxImageFill, cmapImageFill, setFillColor, rescale, flush,
|
bgrxImageFill, cmapImageFill, setFillColor, rescale, flush,
|
||||||
|
|
||||||
c_width = 0,
|
c_width = 0,
|
||||||
c_height = 0,
|
c_height = 0,
|
||||||
@ -137,14 +137,14 @@ function constructor() {
|
|||||||
if (conf.prefer_js === null) {
|
if (conf.prefer_js === null) {
|
||||||
conf.prefer_js = true;
|
conf.prefer_js = true;
|
||||||
}
|
}
|
||||||
c_rgbxImage = rgbxImageData;
|
c_bgrxImage = bgrxImageData;
|
||||||
c_cmapImage = cmapImageData;
|
c_cmapImage = cmapImageData;
|
||||||
} else {
|
} else {
|
||||||
Util.Warn("Canvas lacks imageData, using fillRect (slow)");
|
Util.Warn("Canvas lacks imageData, using fillRect (slow)");
|
||||||
conf.render_mode = "fillRect rendering (slow)";
|
conf.render_mode = "fillRect rendering (slow)";
|
||||||
c_forceCanvas = true;
|
c_forceCanvas = true;
|
||||||
conf.prefer_js = false;
|
conf.prefer_js = false;
|
||||||
c_rgbxImage = rgbxImageFill;
|
c_bgrxImage = bgrxImageFill;
|
||||||
c_cmapImage = cmapImageFill;
|
c_cmapImage = cmapImageFill;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -153,7 +153,7 @@ function constructor() {
|
|||||||
conf.render_mode += ", webkit bug workaround";
|
conf.render_mode += ", webkit bug workaround";
|
||||||
Util.Debug("Working around WebKit bug #46319");
|
Util.Debug("Working around WebKit bug #46319");
|
||||||
c_webkit_bug = true;
|
c_webkit_bug = true;
|
||||||
for (func in {"fillRect":1, "copyImage":1, "rgbxImage":1,
|
for (func in {"fillRect":1, "copyImage":1, "bgrxImage":1,
|
||||||
"cmapImage":1, "blitStringImage":1}) {
|
"cmapImage":1, "blitStringImage":1}) {
|
||||||
that[func] = (function() {
|
that[func] = (function() {
|
||||||
var myfunc = that[func]; // Save original function
|
var myfunc = that[func]; // Save original function
|
||||||
@ -247,13 +247,13 @@ flush = function() {
|
|||||||
};
|
};
|
||||||
|
|
||||||
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;
|
||||||
@ -311,22 +311,23 @@ that.copyImage = function(old_x, old_y, new_x, new_y, width, height) {
|
|||||||
* gecko, Javascript array handling is much slower.
|
* gecko, Javascript array handling is much slower.
|
||||||
*/
|
*/
|
||||||
that.getTile = function(x, y, width, height, color) {
|
that.getTile = function(x, y, width, height, color) {
|
||||||
var img, data = [], rgb, red, green, blue, i;
|
var img, data = [], bgr, red, green, blue, i;
|
||||||
img = {'x': x, 'y': y, 'width': width, 'height': height,
|
img = {'x': x, 'y': y, 'width': width, 'height': height,
|
||||||
'data': data};
|
'data': 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];
|
// Keep in BGR order because bgrxImage will flip it
|
||||||
green = rgb[1];
|
red = bgr[2];
|
||||||
blue = rgb[2];
|
green = bgr[1];
|
||||||
|
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 ] = blue;
|
||||||
data[i + 1] = green;
|
data[i + 1] = green;
|
||||||
data[i + 2] = blue;
|
data[i + 2] = red;
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
that.fillRect(x, y, width, height, color);
|
that.fillRect(x, y, width, height, color);
|
||||||
@ -335,26 +336,27 @@ that.getTile = function(x, y, width, height, color) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
that.setSubTile = function(img, x, y, w, h, color) {
|
that.setSubTile = function(img, 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 = img.data;
|
data = img.data;
|
||||||
width = img.width;
|
width = img.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];
|
// Keep in BGR order because bgrxImage will flip it
|
||||||
green = rgb[1];
|
red = bgr[2];
|
||||||
blue = rgb[2];
|
green = bgr[1];
|
||||||
|
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) {
|
||||||
for (i = x; i < xend; i += 1) {
|
for (i = x; i < xend; i += 1) {
|
||||||
p = (i + (j * width) ) * 4;
|
p = (i + (j * width) ) * 4;
|
||||||
data[p ] = red;
|
data[p ] = blue;
|
||||||
data[p + 1] = green;
|
data[p + 1] = green;
|
||||||
data[p + 2] = blue;
|
data[p + 2] = red;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
@ -364,7 +366,7 @@ that.setSubTile = function(img, x, y, w, h, color) {
|
|||||||
|
|
||||||
that.putTile = function(img) {
|
that.putTile = function(img) {
|
||||||
if (conf.prefer_js) {
|
if (conf.prefer_js) {
|
||||||
c_rgbxImage(img.x, img.y, img.width, img.height, img.data, 0);
|
c_bgrxImage(img.x, img.y, img.width, img.height, img.data, 0);
|
||||||
}
|
}
|
||||||
// else: No-op, under gecko already done by setSubTile
|
// else: No-op, under gecko already done by setSubTile
|
||||||
};
|
};
|
||||||
@ -376,21 +378,21 @@ imageDataCreate = function(width, height) {
|
|||||||
return c_ctx.createImageData(width, height);
|
return c_ctx.createImageData(width, height);
|
||||||
};
|
};
|
||||||
|
|
||||||
rgbxImageData = function(x, y, width, height, arr, offset) {
|
bgrxImageData = function(x, y, width, height, arr, offset) {
|
||||||
var img, i, j, data;
|
var img, i, j, data;
|
||||||
img = c_imageData(width, height);
|
img = c_imageData(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, y);
|
c_ctx.putImageData(img, x, y);
|
||||||
};
|
};
|
||||||
|
|
||||||
// really slow fallback if we don't have imageData
|
// really slow fallback if we don't have imageData
|
||||||
rgbxImageFill = function(x, y, width, height, arr, offset) {
|
bgrxImageFill = function(x, y, width, height, arr, offset) {
|
||||||
var i, j, sx = 0, sy = 0;
|
var i, j, sx = 0, sy = 0;
|
||||||
for (i=0, j=offset; i < (width * height); i+=1, j+=4) {
|
for (i=0, j=offset; i < (width * height); i+=1, j+=4) {
|
||||||
that.fillRect(x+sx, y+sy, 1, 1, [arr[j], arr[j+1], arr[j+2]]);
|
that.fillRect(x+sx, y+sy, 1, 1, [arr[j], arr[j+1], arr[j+2]]);
|
||||||
@ -403,15 +405,15 @@ rgbxImageFill = function(x, y, width, height, arr, offset) {
|
|||||||
};
|
};
|
||||||
|
|
||||||
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_imageData(width, height);
|
img = c_imageData(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, y);
|
c_ctx.putImageData(img, x, y);
|
||||||
@ -433,7 +435,7 @@ cmapImageFill = 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) {
|
||||||
c_rgbxImage(x, y, width, height, arr, offset);
|
c_bgrxImage(x, y, width, height, arr, offset);
|
||||||
} else {
|
} else {
|
||||||
c_cmapImage(x, y, width, height, arr, offset);
|
c_cmapImage(x, y, width, height, arr, offset);
|
||||||
}
|
}
|
||||||
|
@ -776,6 +776,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);
|
||||||
@ -842,9 +852,9 @@ 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);
|
||||||
Util.Debug("*** colourMap: " + display.get_colourMap());
|
display.set_colourMap([blue, green, red], first_colour + c);
|
||||||
display.set_colourMap([red, green, blue], first_colour + c);
|
|
||||||
}
|
}
|
||||||
|
Util.Debug("*** colourMap: " + display.get_colourMap());
|
||||||
Util.Info("Registered " + num_colours + " colourMap entries");
|
Util.Info("Registered " + num_colours + " colourMap entries");
|
||||||
//Util.Debug("colourMap: " + display.get_colourMap());
|
//Util.Debug("colourMap: " + display.get_colourMap());
|
||||||
break;
|
break;
|
||||||
@ -1378,9 +1388,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
|
||||||
|
@ -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();
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user