added client side pixel format conversion support

README.md

@@ -128,6 +128,7 @@ use a WebSockets to TCP socket proxy. There is a python proxy included
     * UI and Icons : Chris Gordon
     * Original Logo : Michael Sersen
     * tight encoding : Michael Tinglof (Mercuri.ca)
+    * pixel format conversion : [Alexander Clouter](http://www.digriz.org.uk/)
 
 * Included libraries:
     * web-socket-js : Hiroshi Ichikawa (github.com/gimite/web-socket-js)

include/display.js

@@ -412,19 +412,14 @@ var Display;
             // else: No-op -- already done by setSubTile
         },
 
-        blitImage: function (x, y, width, height, arr, offset) {
+        blitImage: function (x, y, width, height, arr, offset, isRgb) {
             if (this._true_color) {
-                this._bgrxImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
-            } else {
-                this._cmapImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
-            }
-        },
-
-        blitRgbImage: function (x, y , width, height, arr, offset) {
-            if (this._true_color) {
-                this._rgbImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
+                if (isRgb) {
+                    this._rgbImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
+                } else {
+                    this._bgrxImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
+                }
             } else {
-                // probably wrong?
                 this._cmapImageData(x, y, this._viewportLoc.x, this._viewportLoc.y, width, height, arr, offset);
             }
         },
@@ -592,10 +587,7 @@ var Display;
                         this.fillRect(a.x, a.y, a.width, a.height, a.color);
                         break;
                     case 'blit':
-                        this.blitImage(a.x, a.y, a.width, a.height, a.data, 0);
-                        break;
-                    case 'blitRgb':
-                        this.blitRgbImage(a.x, a.y, a.width, a.height, a.data, 0);
+                        this.blitImage(a.x, a.y, a.width, a.height, a.data, 0, a.rgb);
                         break;
                     case 'img':
                         if (a.img.complete) {

include/ui.js

@@ -88,7 +88,7 @@ var UI;
             UI.initSetting('port', port);
             UI.initSetting('password', '');
             UI.initSetting('encrypt', (window.location.protocol === "https:"));
-            UI.initSetting('true_color', true);
+            UI.initSetting('convertColor', false);
             UI.initSetting('cursor', !UI.isTouchDevice);
             UI.initSetting('shared', true);
             UI.initSetting('view_only', false);
@@ -418,7 +418,7 @@ var UI;
                 UI.closeSettingsMenu();
             } else {
                 UI.updateSetting('encrypt');
-                UI.updateSetting('true_color');
+                UI.updateSetting('convertColor');
                 if (UI.rfb.get_display().get_cursor_uri()) {
                     UI.updateSetting('cursor');
                 } else {
@@ -473,7 +473,7 @@ var UI;
         settingsApply: function() {
             //Util.Debug(">> settingsApply");
             UI.saveSetting('encrypt');
-            UI.saveSetting('true_color');
+            UI.saveSetting('convertColor');
             if (UI.rfb.get_display().get_cursor_uri()) {
                 UI.saveSetting('cursor');
             }
@@ -586,7 +586,7 @@ var UI;
 
             //Util.Debug(">> updateVisualState");
             $D('noVNC_encrypt').disabled = connected;
-            $D('noVNC_true_color').disabled = connected;
+            $D('noVNC_convertColor').disabled = connected;
             if (UI.rfb && UI.rfb.get_display() &&
                 UI.rfb.get_display().get_cursor_uri()) {
                 $D('noVNC_cursor').disabled = connected;
@@ -673,7 +673,7 @@ var UI;
             }
 
             UI.rfb.set_encrypt(UI.getSetting('encrypt'));
-            UI.rfb.set_true_color(UI.getSetting('true_color'));
+            UI.rfb.set_convertColor(UI.getSetting('convertColor'));
             UI.rfb.set_local_cursor(UI.getSetting('cursor'));
             UI.rfb.set_shared(UI.getSetting('shared'));
             UI.rfb.set_view_only(UI.getSetting('view_only'));

tests/test.display.js

@@ -216,18 +216,18 @@ describe('Display/Canvas Helper', function () {
                     data[i * 4 + 2] = checked_data[i * 4];
                     data[i * 4 + 3] = checked_data[i * 4 + 3];
                 }
-                display.blitImage(0, 0, 4, 4, data, 0);
+                display.blitImage(0, 0, 4, 4, data, 0, false);
                 expect(display).to.have.displayed(checked_data);
             });
 
-            it('should support drawing RGB blit images with true color via #blitRgbImage', function () {
+            it('should support drawing RGB blit images with true color via #blitImage', function () {
                 var data = [];
                 for (var i = 0; i < 16; i++) {
                     data[i * 3] = checked_data[i * 4];
                     data[i * 3 + 1] = checked_data[i * 4 + 1];
                     data[i * 3 + 2] = checked_data[i * 4 + 2];
                 }
-                display.blitRgbImage(0, 0, 4, 4, data, 0);
+                display.blitImage(0, 0, 4, 4, data, 0, true);
                 expect(display).to.have.displayed(checked_data);
             });
 
@@ -315,18 +315,18 @@ describe('Display/Canvas Helper', function () {
             expect(display.fillRect).to.have.been.calledOnce;
         });
 
-        it('should draw a blit image on type "blit"', function () {
+        it('should draw a blit image on type "blit" with "rgb" set to false', function () {
             display.blitImage = sinon.spy();
-            display.renderQ_push({ type: 'blit', x: 3, y: 4, width: 5, height: 6, data: [7, 8, 9] });
+            display.renderQ_push({ type: 'blit', x: 3, y: 4, width: 5, height: 6, data: [7, 8, 9], rgb: false });
             expect(display.blitImage).to.have.been.calledOnce;
-            expect(display.blitImage).to.have.been.calledWith(3, 4, 5, 6, [7, 8, 9], 0);
+            expect(display.blitImage).to.have.been.calledWith(3, 4, 5, 6, [7, 8, 9], 0, false);
         });
 
-        it('should draw a blit RGB image on type "blitRgb"', function () {
-            display.blitRgbImage = sinon.spy();
-            display.renderQ_push({ type: 'blitRgb', x: 3, y: 4, width: 5, height: 6, data: [7, 8, 9] });
-            expect(display.blitRgbImage).to.have.been.calledOnce;
-            expect(display.blitRgbImage).to.have.been.calledWith(3, 4, 5, 6, [7, 8, 9], 0);
+        it('should draw a blit RGB image on type "blit" with "rgb" set to true', function () {
+            display.blitImage = sinon.spy();
+            display.renderQ_push({ type: 'blit', x: 3, y: 4, width: 5, height: 6, data: [7, 8, 9], rgb: true });
+            expect(display.blitImage).to.have.been.calledOnce;
+            expect(display.blitImage).to.have.been.calledWith(3, 4, 5, 6, [7, 8, 9], 0, true);
         });
 
         it('should copy a region on type "copy"', function () {

vnc.html

@@ -10,7 +10,7 @@
     This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
 
     Connect parameters are provided in query string:
-        http://example.com/?host=HOST&port=PORT&encrypt=1&true_color=1
+        http://example.com/?host=HOST&port=PORT&encrypt=1&convertColor=1
     -->
     <title>noVNC</title>
 
@@ -154,7 +154,7 @@
             <span id="noVNC_settings_menu">
                 <ul>
                     <li><input id="noVNC_encrypt" type="checkbox"> Encrypt</li>
-                    <li><input id="noVNC_true_color" type="checkbox" checked> True Color</li>
+                    <li><input id="noVNC_convertColor" type="checkbox" checked> Convert Color</li>
                     <li><input id="noVNC_cursor" type="checkbox"> Local Cursor</li>
                     <li><input id="noVNC_clip" type="checkbox"> Clip to Window</li>
                     <li><input id="noVNC_shared" type="checkbox"> Shared Mode</li>

vnc_auto.html

@@ -10,7 +10,7 @@
     This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
 
     Connect parameters are provided in query string:
-        http://example.com/?host=HOST&port=PORT&encrypt=1&true_color=1
+        http://example.com/?host=HOST&port=PORT&encrypt=1&convertColor=1
     -->
     <title>noVNC</title>
 
@@ -194,7 +194,7 @@
                            'encrypt':      WebUtil.getQueryVar('encrypt',
                                     (window.location.protocol === "https:")),
                            'repeaterID':   WebUtil.getQueryVar('repeaterID', ''),
-                           'true_color':   WebUtil.getQueryVar('true_color', true),
+                           'convertColor': WebUtil.getQueryVar('convertColor', true),
                            'local_cursor': WebUtil.getQueryVar('cursor', true),
                            'shared':       WebUtil.getQueryVar('shared', true),
                            'view_only':    WebUtil.getQueryVar('view_only', false),