diff --git a/README.md b/README.md index 1ffbd12d..4426c893 100644 --- a/README.md +++ b/README.md @@ -195,7 +195,7 @@ The client is designed to be easily integrated with existing web structure and style. At a minimum you must include the `vnc.js` and `default_controls.js` -scripts and call their load() functions. For example: +scripts and call DefaultControls.load(). For example: @@ -203,12 +203,13 @@ scripts and call their load() functions. For example:
Loading
+ + - See `vnc.html` and `vnc_auto.html` for examples. The file `include/plain.css` has a list of stylable elements. diff --git a/include/canvas.js b/include/canvas.js index b0f7b644..7b02b3e9 100644 --- a/include/canvas.js +++ b/include/canvas.js @@ -7,183 +7,142 @@ */ "use strict"; -/*jslint white: false, bitwise: false */ -/*global window, $, Util, Base64 */ +/*jslint browser: true, white: false, bitwise: false */ +/*global window, Util, Base64 */ -// Globals defined here -var Canvas; +function Canvas(conf) { -// Everything namespaced inside Canvas -Canvas = { +conf = conf || {}; // Configuration +var that = {}, // Public API interface -prefer_js : false, // make private -force_canvas : false, // make private -cursor_uri : true, // make private + // Pre-declare functions used before definitions (jslint)jslint + setFillColor, fillRect, -true_color : true, -colourMap : [], + // Private Canvas namespace variables + c_forceCanvas = false, -scale : 1, -c_wx : 0, -c_wy : 0, -ctx : null, + c_width = 0, + c_height = 0, -prevStyle : "", + c_prevStyle = "", -focused : true, -keyPress : null, -mouseButton : null, -mouseMove : null, - -onMouseButton: function(e, down) { - var evt, pos, bmask; - if (! Canvas.focused) { - return true; - } - evt = (e ? e : window.event); - pos = Util.getEventPosition(e, $(Canvas.id), Canvas.scale); - bmask = 1 << evt.button; - //Util.Debug('mouse ' + pos.x + "," + pos.y + " down: " + down + " bmask: " + bmask); - if (Canvas.mouseButton) { - Canvas.mouseButton(pos.x, pos.y, down, bmask); - } - Util.stopEvent(e); - return false; -}, - -onMouseDown: function (e) { - Canvas.onMouseButton(e, 1); -}, - -onMouseUp: function (e) { - Canvas.onMouseButton(e, 0); -}, - -onMouseWheel: function (e) { - var evt, pos, bmask, wheelData; - evt = (e ? e : window.event); - pos = Util.getEventPosition(e, $(Canvas.id), Canvas.scale); - wheelData = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40; - if (wheelData > 0) { - bmask = 1 << 3; - } else { - bmask = 1 << 4; - } - //Util.Debug('mouse scroll by ' + wheelData + ':' + pos.x + "," + pos.y); - if (Canvas.mouseButton) { - Canvas.mouseButton(pos.x, pos.y, 1, bmask); - Canvas.mouseButton(pos.x, pos.y, 0, bmask); - } - Util.stopEvent(e); - return false; -}, + c_keyPress = null, + c_mouseButton = null, + c_mouseMove = null; -onMouseMove: function (e) { - var evt, pos; - evt = (e ? e : window.event); - pos = Util.getEventPosition(e, $(Canvas.id), Canvas.scale); - //Util.Debug('mouse ' + evt.which + '/' + evt.button + ' up:' + pos.x + "," + pos.y); - if (Canvas.mouseMove) { - Canvas.mouseMove(pos.x, pos.y); - } -}, +// Capability settings, default can be overridden +Util.conf_default(conf, that, 'prefer_js', null); +Util.conf_default(conf, that, 'cursor_uri', null); -onKeyDown: function (e) { - //Util.Debug("keydown: " + Canvas.getKeysym(e)); - if (! Canvas.focused) { - return true; - } - if (Canvas.keyPress) { - Canvas.keyPress(Canvas.getKeysym(e), 1); - } - Util.stopEvent(e); - return false; -}, +// Configuration settings +Util.conf_default(conf, that, 'target', null); +Util.conf_default(conf, that, 'true_color', true); +Util.conf_default(conf, that, 'focused', true); +Util.conf_default(conf, that, 'colourMap', []); +Util.conf_default(conf, that, 'scale', 1); -onKeyUp : function (e) { - //Util.Debug("keyup: " + Canvas.getKeysym(e)); - if (! Canvas.focused) { - return true; - } - if (Canvas.keyPress) { - Canvas.keyPress(Canvas.getKeysym(e), 0); - } - Util.stopEvent(e); - return false; -}, - -onMouseDisable: function (e) { - var evt, pos; - if (! Canvas.focused) { - return true; - } - evt = (e ? e : window.event); - pos = Util.getPosition($(Canvas.id)); - /* Stop propagation if inside canvas area */ - if ((evt.clientX >= pos.x) && - (evt.clientY >= pos.y) && - (evt.clientX < (pos.x + Canvas.c_wx)) && - (evt.clientY < (pos.y + Canvas.c_wy))) { - //Util.Debug("mouse event disabled"); - Util.stopEvent(e); +// Override some specific getters/setters +that.set_prefer_js = function(val) { + if (val && c_forceCanvas) { + Util.Warn("Preferring Javascript to Canvas ops is not supported"); return false; } - //Util.Debug("mouse event not disabled"); + conf.prefer_js = val; return true; -}, +}; + +that.get_colourMap = function(idx) { + if (typeof idx === 'undefined') { + return conf.colourMap; + } else { + return conf.colourMap[idx]; + } +}; + +that.set_colourMap = function(val, idx) { + if (typeof idx === 'undefined') { + conf.colourMap = val; + } else { + conf.colourMap[idx] = val; + } +}; + +// Add some other getters/setters +that.get_width = function() { + return c_width; +}; +that.get_height = function() { + return c_height; +}; -init: function (id) { - var c, imgTest, tval, i, curDat, curSave; + +// +// Private functions +// + +// Create the public API interface +function constructor() { Util.Debug(">> Canvas.init"); - Canvas.id = id; - c = $(Canvas.id); + var c, ctx, imgTest, tval, i, curDat, curSave, + has_imageData = false; - if (! c.getContext) { throw("No getContext method"); } - Canvas.ctx = c.getContext('2d'); + if (! conf.target) { throw("target must be set"); } - Canvas.clear(); + if (typeof conf.target === 'string') { + conf.target = window.$(conf.target); + } + + c = conf.target; + + if (! c.getContext) { throw("no getContext method"); } + + if (! conf.ctx) { conf.ctx = c.getContext('2d'); } + ctx = conf.ctx; + + that.clear(); /* * Determine browser Canvas feature support * and select fastest rendering methods */ tval = 0; - Canvas.has_imageData = false; try { - imgTest = Canvas.ctx.getImageData(0, 0, 1,1); + imgTest = ctx.getImageData(0, 0, 1,1); imgTest.data[0] = 123; imgTest.data[3] = 255; - Canvas.ctx.putImageData(imgTest, 0, 0); - tval = Canvas.ctx.getImageData(0, 0, 1, 1).data[0]; + ctx.putImageData(imgTest, 0, 0); + tval = ctx.getImageData(0, 0, 1, 1).data[0]; if (tval === 123) { - Canvas.has_imageData = true; + has_imageData = true; } - } catch (exc) {} + } catch (exc1) {} - if (Canvas.has_imageData) { + if (has_imageData) { Util.Info("Canvas supports imageData"); - Canvas.force_canvas = false; - if (Canvas.ctx.createImageData) { + c_forceCanvas = false; + if (ctx.createImageData) { // If it's there, it's faster Util.Info("Using Canvas createImageData"); - Canvas._imageData = Canvas._imageDataCreate; - } else if (Canvas.ctx.getImageData) { + that.imageData = that.imageDataCreate; + } else if (ctx.getImageData) { Util.Info("Using Canvas getImageData"); - Canvas._imageData = Canvas._imageDataGet; + that.imageData = that.imageDataGet; } Util.Info("Prefering javascript operations"); - Canvas.prefer_js = true; - Canvas._rgbxImage = Canvas._rgbxImageData; - Canvas._cmapImage = Canvas._cmapImageData; + if (conf.prefer_js === null) { + conf.prefer_js = true; + } + that.rgbxImage = that.rgbxImageData; + that.cmapImage = that.cmapImageData; } else { Util.Warn("Canvas lacks imageData, using fillRect (slow)"); - Canvas.force_canvas = true; - Canvas.prefer_js = false; - Canvas._rgbxImage = Canvas._rgbxImageFill; - Canvas._cmapImage = Canvas._cmapImageFill; + c_forceCanvas = true; + conf.prefer_js = false; + that.rgbxImage = that.rgbxImageFill; + that.cmapImage = that.cmapImageFill; } /* @@ -191,300 +150,37 @@ init: function (id) { * scheme */ curDat = []; - for (i=0; i < 8 * 8 * 4; i++) { + for (i=0; i < 8 * 8 * 4; i += 1) { curDat.push(255); } try { curSave = c.style.cursor; - Canvas.changeCursor(curDat, curDat, 2, 2, 8, 8); + that.changeCursor(curDat, curDat, 2, 2, 8, 8); if (c.style.cursor) { + if (conf.cursor_uri === null) { + conf.cursor_uri = true; + } Util.Info("Data URI scheme cursor supported"); } else { - Canvas.cursor_uri = false; + if (conf.cursor_uri === null) { + conf.cursor_uri = false; + } Util.Warn("Data URI scheme cursor not supported"); } c.style.cursor = curSave; - } catch (exc2) { + } catch (exc2) { Util.Error("Data URI scheme cursor test exception: " + exc2); conf.cursor_uri = false; } - Canvas.colourMap = []; - Canvas.prevStyle = ""; - Canvas.focused = true; + conf.focused = true; Util.Debug("<< Canvas.init"); - return true; -}, - - -start: function (keyPress, mouseButton, mouseMove) { - var c; - Util.Debug(">> Canvas.start"); - - c = $(Canvas.id); - Canvas.keyPress = keyPress || null; - Canvas.mouseButton = mouseButton || null; - Canvas.mouseMove = mouseMove || null; - - Util.addEvent(document, 'keydown', Canvas.onKeyDown); - Util.addEvent(document, 'keyup', Canvas.onKeyUp); - Util.addEvent(c, 'mousedown', Canvas.onMouseDown); - Util.addEvent(c, 'mouseup', Canvas.onMouseUp); - Util.addEvent(c, 'mousemove', Canvas.onMouseMove); - Util.addEvent(c, (Util.Engine.gecko) ? 'DOMMouseScroll' : 'mousewheel', - Canvas.onMouseWheel); - - /* Work around right and middle click browser behaviors */ - Util.addEvent(document, 'click', Canvas.onMouseDisable); - Util.addEvent(document.body, 'contextmenu', Canvas.onMouseDisable); - - Util.Debug("<< Canvas.start"); -}, - -clear: function () { - Canvas.resize(640, 20); - Canvas.ctx.clearRect(0, 0, Canvas.c_wx, Canvas.c_wy); -}, - -resize: function (width, height, true_color) { - var c = $(Canvas.id); - - if (typeof true_color !== "undefined") { - Canvas.true_color = true_color; - } - - c.width = width; - c.height = height; - - Canvas.c_wx = c.offsetWidth; - Canvas.c_wy = c.offsetHeight; - - //Canvas.rescale(Canvas.scale); -}, - -rescale: function (factor) { - var c, tp, x, y, - properties = ['transform', 'WebkitTransform', 'MozTransform', null]; - c = $(Canvas.id); - while (tp = properties.shift()) { - if (typeof c.style[tp] != 'undefined') { - break; - } - } - - if (tp === null) { - Util.Debug("No scaling support"); - return; - } - - if (Canvas.scale === factor) { - //Util.Debug("Canvas already scaled to '" + factor + "'"); - return; - } - - Canvas.scale = factor; - x = c.width - c.width * factor; - y = c.height - c.height * factor; - c.style[tp] = "scale(" + Canvas.scale + ") translate(-" + x + "px, -" + y + "px)"; -}, - -stop: function () { - var c = $(Canvas.id); - Util.removeEvent(document, 'keydown', Canvas.onKeyDown); - Util.removeEvent(document, 'keyup', Canvas.onKeyUp); - Util.removeEvent(c, 'mousedown', Canvas.onMouseDown); - Util.removeEvent(c, 'mouseup', Canvas.onMouseUp); - Util.removeEvent(c, 'mousemove', Canvas.onMouseMove); - Util.removeEvent(c, (Util.Engine.gecko) ? 'DOMMouseScroll' : 'mousewheel', - Canvas.onMouseWheel); - - /* Work around right and middle click browser behaviors */ - Util.removeEvent(document, 'click', Canvas.onMouseDisable); - Util.removeEvent(document.body, 'contextmenu', Canvas.onMouseDisable); - - // Turn off cursor rendering - if (Canvas.cursor_uri) { - c.style.cursor = "default"; - } -}, - -/* - * Tile rendering functions optimized for rendering engines. - * - * - In Chrome/webkit, Javascript image data array manipulations are - * faster than direct Canvas fillStyle, fillRect rendering. In - * gecko, Javascript array handling is much slower. - */ -getTile: function(x, y, width, height, color) { - var img, data, p, rgb, red, green, blue, j, i; - img = {'x': x, 'y': y, 'width': width, 'height': height, - 'data': []}; - if (Canvas.prefer_js) { - data = img.data; - if (Canvas.true_color) { - rgb = color; - } else { - rgb = Canvas.colourMap[color[0]]; - } - red = rgb[0]; - green = rgb[1]; - blue = rgb[2]; - for (j = 0; j < height; j += 1) { - for (i = 0; i < width; i += 1) { - p = (i + (j * width) ) * 4; - data[p + 0] = red; - data[p + 1] = green; - data[p + 2] = blue; - //data[p + 3] = 255; // Set Alpha - } - } - } else { - Canvas.fillRect(x, y, width, height, color); - } - return img; -}, - -setSubTile: function(img, x, y, w, h, color) { - var data, p, rgb, red, green, blue, width, j, i; - if (Canvas.prefer_js) { - data = img.data; - width = img.width; - if (Canvas.true_color) { - rgb = color; - } else { - rgb = Canvas.colourMap[color[0]]; - } - red = rgb[0]; - green = rgb[1]; - blue = rgb[2]; - for (j = 0; j < h; j += 1) { - for (i = 0; i < w; i += 1) { - p = (x + i + ((y + j) * width) ) * 4; - data[p + 0] = red; - data[p + 1] = green; - data[p + 2] = blue; - //img.data[p + 3] = 255; // Set Alpha - } - } - } else { - Canvas.fillRect(img.x + x, img.y + y, w, h, color); - } -}, - -putTile: function(img) { - if (Canvas.prefer_js) { - Canvas._rgbxImage(img.x, img.y, img.width, img.height, img.data, 0); - } else { - // No-op, under gecko already done by setSubTile - } -}, - -_imageDataGet: function(width, height) { - return Canvas.ctx.getImageData(0, 0, width, height); -}, -_imageDataCreate: function(width, height) { - return Canvas.ctx.createImageData(width, height); -}, -_imageDataRaw: function(width, height) { - return {'data': [], 'width': width, 'height': height}; -}, - -_rgbxImageData: function(x, y, width, height, arr, offset) { - var img, i, j, data; - img = Canvas._imageData(width, height); - data = img.data; - for (i=0, j=offset; i < (width * height * 4); i=i+4, j=j+4) { - data[i + 0] = arr[j + 0]; - data[i + 1] = arr[j + 1]; - data[i + 2] = arr[j + 2]; - data[i + 3] = 255; // Set Alpha - } - Canvas.ctx.putImageData(img, x, y); -}, - -// really slow fallback if we don't have imageData -_rgbxImageFill: function(x, y, width, height, arr, offset) { - var i, j, sx = 0, sy = 0; - for (i=0, j=offset; i < (width * height); i+=1, j+=4) { - Canvas.fillRect(x+sx, y+sy, 1, 1, [arr[j+0], arr[j+1], arr[j+2]]); - sx += 1; - if ((sx % width) === 0) { - sx = 0; - sy += 1; - } - } -}, - -_cmapImageData: function(x, y, width, height, arr, offset) { - var img, i, j, data, rgb, cmap; - img = Canvas._imageData(width, height); - data = img.data; - cmap = Canvas.colourMap; - for (i=0, j=offset; i < (width * height * 4); i+=4, j+=1) { - rgb = cmap[arr[j]]; - data[i + 0] = rgb[0]; - data[i + 1] = rgb[1]; - data[i + 2] = rgb[2]; - data[i + 3] = 255; // Set Alpha - } - Canvas.ctx.putImageData(img, x, y); -}, - -_cmapImageFill: function(x, y, width, height, arr, offset) { - var i, j, sx = 0, sy = 0, cmap; - cmap = Canvas.colourMap; - for (i=0, j=offset; i < (width * height); i+=1, j+=1) { - Canvas.fillRect(x+sx, y+sy, 1, 1, [arr[j]]); - sx += 1; - if ((sx % width) === 0) { - sx = 0; - sy += 1; - } - } -}, - - -blitImage: function(x, y, width, height, arr, offset) { - if (Canvas.true_color) { - Canvas._rgbxImage(x, y, width, height, arr, offset); - } else { - Canvas._cmapImage(x, y, width, height, arr, offset); - } -}, - -blitStringImage: function(str, x, y) { - var img = new Image(); - img.onload = function () { Canvas.ctx.drawImage(img, x, y); }; - img.src = str; -}, - -setFillColor: function(color) { - var rgb, newStyle; - if (Canvas.true_color) { - rgb = color; - } else { - rgb = Canvas.colourMap[color[0]]; - } - if (newStyle !== Canvas.prevStyle) { - newStyle = "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")"; - Canvas.ctx.fillStyle = newStyle; - Canvas.prevStyle = newStyle; - } -}, - -fillRect: function(x, y, width, height, color) { - Canvas.setFillColor(color); - Canvas.ctx.fillRect(x, y, width, height); -}, - -copyImage: function(old_x, old_y, new_x, new_y, width, height) { - Canvas.ctx.drawImage($(Canvas.id), old_x, old_y, width, height, - new_x, new_y, width, height); -}, + return that ; +} /* Translate DOM key event to keysym value */ -getKeysym: function(e) { +function getKeysym(e) { var evt, keysym; evt = (e ? e : window.event); @@ -574,22 +270,389 @@ getKeysym: function(e) { } return keysym; -}, +} + +function onMouseButton(e, down) { + var evt, pos, bmask; + if (! conf.focused) { + return true; + } + evt = (e ? e : window.event); + pos = Util.getEventPosition(e, conf.target, conf.scale); + bmask = 1 << evt.button; + //Util.Debug('mouse ' + pos.x + "," + pos.y + " down: " + down + " bmask: " + bmask); + if (c_mouseButton) { + c_mouseButton(pos.x, pos.y, down, bmask); + } + Util.stopEvent(e); + return false; +} + +function onMouseDown(e) { + onMouseButton(e, 1); +} + +function onMouseUp(e) { + onMouseButton(e, 0); +} + +function onMouseWheel(e) { + var evt, pos, bmask, wheelData; + evt = (e ? e : window.event); + pos = Util.getEventPosition(e, conf.target, conf.scale); + wheelData = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40; + if (wheelData > 0) { + bmask = 1 << 3; + } else { + bmask = 1 << 4; + } + //Util.Debug('mouse scroll by ' + wheelData + ':' + pos.x + "," + pos.y); + if (c_mouseButton) { + c_mouseButton(pos.x, pos.y, 1, bmask); + c_mouseButton(pos.x, pos.y, 0, bmask); + } + Util.stopEvent(e); + return false; +} + +function onMouseMove(e) { + var evt, pos; + evt = (e ? e : window.event); + pos = Util.getEventPosition(e, conf.target, conf.scale); + //Util.Debug('mouse ' + evt.which + '/' + evt.button + ' up:' + pos.x + "," + pos.y); + if (c_mouseMove) { + c_mouseMove(pos.x, pos.y); + } +} + +function onKeyDown(e) { + //Util.Debug("keydown: " + getKeysym(e)); + if (! conf.focused) { + return true; + } + if (c_keyPress) { + c_keyPress(getKeysym(e), 1); + } + Util.stopEvent(e); + return false; +} + +function onKeyUp(e) { + //Util.Debug("keyup: " + getKeysym(e)); + if (! conf.focused) { + return true; + } + if (c_keyPress) { + c_keyPress(getKeysym(e), 0); + } + Util.stopEvent(e); + return false; +} + +function onMouseDisable(e) { + var evt, pos; + if (! conf.focused) { + return true; + } + evt = (e ? e : window.event); + pos = Util.getPosition(conf.target); + /* Stop propagation if inside canvas area */ + if ((evt.clientX >= pos.x) && + (evt.clientY >= pos.y) && + (evt.clientX < (pos.x + c_width)) && + (evt.clientY < (pos.y + c_height))) { + //Util.Debug("mouse event disabled"); + Util.stopEvent(e); + return false; + } + //Util.Debug("mouse event not disabled"); + return true; +} + +// +// Public API interface functions +// + +that.getContext = function () { + return conf.ctx; +}; + +that.start = function(keyPressFunc, mouseButtonFunc, mouseMoveFunc) { + var c; + Util.Debug(">> Canvas.start"); + + c = conf.target; + c_keyPress = keyPressFunc || null; + c_mouseButton = mouseButtonFunc || null; + c_mouseMove = mouseMoveFunc || null; + + Util.addEvent(document, 'keydown', onKeyDown); + Util.addEvent(document, 'keyup', onKeyUp); + Util.addEvent(c, 'mousedown', onMouseDown); + Util.addEvent(c, 'mouseup', onMouseUp); + Util.addEvent(c, 'mousemove', onMouseMove); + Util.addEvent(c, (Util.Engine.gecko) ? 'DOMMouseScroll' : 'mousewheel', + onMouseWheel); + + /* Work around right and middle click browser behaviors */ + Util.addEvent(document, 'click', onMouseDisable); + Util.addEvent(document.body, 'contextmenu', onMouseDisable); + + Util.Debug("<< Canvas.start"); +}; + +that.rescale = function(factor) { + var c, tp, x, y, + properties = ['transform', 'WebkitTransform', 'MozTransform', null]; + c = conf.target; + tp = properties.shift(); + while (tp) { + if (typeof c.style[tp] !== 'undefined') { + break; + } + tp = properties.shift(); + } + + if (tp === null) { + Util.Debug("No scaling support"); + return; + } + + if (conf.scale === factor) { + //Util.Debug("Canvas already scaled to '" + factor + "'"); + return; + } + + conf.scale = factor; + x = c.width - c.width * factor; + y = c.height - c.height * factor; + c.style[tp] = "scale(" + conf.scale + ") translate(-" + x + "px, -" + y + "px)"; +}; + +that.resize = function(width, height, true_color) { + var c = conf.target; + + if (typeof true_color !== "undefined") { + conf.true_color = true_color; + } + + c.width = width; + c.height = height; + + c_width = c.offsetWidth; + c_height = c.offsetHeight; + + that.rescale(conf.scale); +}; + +that.clear = function() { + that.resize(640, 20); + conf.ctx.clearRect(0, 0, c_width, c_height); +}; + +that.stop = function() { + var c = conf.target; + Util.removeEvent(document, 'keydown', onKeyDown); + Util.removeEvent(document, 'keyup', onKeyUp); + Util.removeEvent(c, 'mousedown', onMouseDown); + Util.removeEvent(c, 'mouseup', onMouseUp); + Util.removeEvent(c, 'mousemove', onMouseMove); + Util.removeEvent(c, (Util.Engine.gecko) ? 'DOMMouseScroll' : 'mousewheel', + onMouseWheel); + + /* Work around right and middle click browser behaviors */ + Util.removeEvent(document, 'click', onMouseDisable); + Util.removeEvent(document.body, 'contextmenu', onMouseDisable); + + // Turn off cursor rendering + if (conf.cursor_uri) { + c.style.cursor = "default"; + } +}; + +setFillColor = function(color) { + var rgb, newStyle; + if (conf.true_color) { + rgb = color; + } else { + rgb = conf.colourMap[color[0]]; + } + if (newStyle !== c_prevStyle) { + newStyle = "rgb(" + rgb[0] + "," + rgb[1] + "," + rgb[2] + ")"; + conf.ctx.fillStyle = newStyle; + c_prevStyle = newStyle; + } +}; +that.setFillColor = setFillColor; + +fillRect = function(x, y, width, height, color) { + setFillColor(color); + conf.ctx.fillRect(x, y, width, height); +}; +that.fillRect = fillRect; + +that.copyImage = function(old_x, old_y, new_x, new_y, width, height) { + conf.ctx.drawImage(conf.target, old_x, old_y, width, height, + new_x, new_y, width, height); +}; + +/* + * Tile rendering functions optimized for rendering engines. + * + * - In Chrome/webkit, Javascript image data array manipulations are + * faster than direct Canvas fillStyle, fillRect rendering. In + * gecko, Javascript array handling is much slower. + */ +that.getTile = function(x, y, width, height, color) { + var img, data, p, rgb, red, green, blue, j, i; + img = {'x': x, 'y': y, 'width': width, 'height': height, + 'data': []}; + if (conf.prefer_js) { + data = img.data; + if (conf.true_color) { + rgb = color; + } else { + rgb = conf.colourMap[color[0]]; + } + red = rgb[0]; + green = rgb[1]; + blue = rgb[2]; + for (j = 0; j < height; j += 1) { + for (i = 0; i < width; i += 1) { + p = (i + (j * width) ) * 4; + data[p + 0] = red; + data[p + 1] = green; + data[p + 2] = blue; + //data[p + 3] = 255; // Set Alpha + } + } + } else { + fillRect(x, y, width, height, color); + } + return img; +}; + +that.setSubTile = function(img, x, y, w, h, color) { + var data, p, rgb, red, green, blue, width, j, i; + if (conf.prefer_js) { + data = img.data; + width = img.width; + if (conf.true_color) { + rgb = color; + } else { + rgb = conf.colourMap[color[0]]; + } + red = rgb[0]; + green = rgb[1]; + blue = rgb[2]; + for (j = 0; j < h; j += 1) { + for (i = 0; i < w; i += 1) { + p = (x + i + ((y + j) * width) ) * 4; + data[p + 0] = red; + data[p + 1] = green; + data[p + 2] = blue; + //img.data[p + 3] = 255; // Set Alpha + } + } + } else { + fillRect(img.x + x, img.y + y, w, h, color); + } +}; + +that.putTile = function(img) { + if (conf.prefer_js) { + that.rgbxImage(img.x, img.y, img.width, img.height, img.data, 0); + } else { + // No-op, under gecko already done by setSubTile + } +}; + +that.imageDataGet = function(width, height) { + return conf.ctx.getImageData(0, 0, width, height); +}; +that.imageDataCreate = function(width, height) { + return conf.ctx.createImageData(width, height); +}; + +that.rgbxImageData = function(x, y, width, height, arr, offset) { + var img, i, j, data; + img = that.imageData(width, height); + data = img.data; + for (i=0, j=offset; i < (width * height * 4); i=i+4, j=j+4) { + data[i + 0] = arr[j + 0]; + data[i + 1] = arr[j + 1]; + data[i + 2] = arr[j + 2]; + data[i + 3] = 255; // Set Alpha + } + conf.ctx.putImageData(img, x, y); +}; + +// really slow fallback if we don't have imageData +that.rgbxImageFill = function(x, y, width, height, arr, offset) { + var i, j, sx = 0, sy = 0; + for (i=0, j=offset; i < (width * height); i+=1, j+=4) { + fillRect(x+sx, y+sy, 1, 1, [arr[j+0], arr[j+1], arr[j+2]]); + sx += 1; + if ((sx % width) === 0) { + sx = 0; + sy += 1; + } + } +}; + +that.cmapImageData = function(x, y, width, height, arr, offset) { + var img, i, j, data, rgb, cmap; + img = that.imageData(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 + 0] = rgb[0]; + data[i + 1] = rgb[1]; + data[i + 2] = rgb[2]; + data[i + 3] = 255; // Set Alpha + } + conf.ctx.putImageData(img, x, y); +}; + +that.cmapImageFill = function(x, y, width, height, arr, offset) { + var i, j, sx = 0, sy = 0, cmap; + cmap = conf.colourMap; + for (i=0, j=offset; i < (width * height); i+=1, j+=1) { + fillRect(x+sx, y+sy, 1, 1, [arr[j]]); + sx += 1; + if ((sx % width) === 0) { + sx = 0; + sy += 1; + } + } +}; -isCursor: function() { - return Canvas.cursor_uri; -}, -changeCursor: function(pixels, mask, hotx, hoty, w, h) { +that.blitImage = function(x, y, width, height, arr, offset) { + if (conf.true_color) { + that.rgbxImage(x, y, width, height, arr, offset); + } else { + that.cmapImage(x, y, width, height, arr, offset); + } +}; + +that.blitStringImage = function(str, x, y) { + var img = new Image(); + img.onload = function () { conf.ctx.drawImage(img, x, y); }; + img.src = str; +}; + +that.changeCursor = function(pixels, mask, hotx, hoty, w, h) { var cur = [], cmap, rgb, IHDRsz, ANDsz, XORsz, url, idx, alpha, x, y; //Util.Debug(">> changeCursor, x: " + hotx + ", y: " + hoty + ", w: " + w + ", h: " + h); - if (!Canvas.cursor_uri) { + if (conf.cursor_uri === false) { Util.Warn("changeCursor called but no cursor data URI support"); return; } - cmap = Canvas.colourMap; + cmap = conf.colourMap; IHDRsz = 40; ANDsz = w * h * 4; XORsz = Math.ceil( (w * h) / 8.0 ); @@ -623,12 +686,12 @@ changeCursor: function(pixels, mask, hotx, hoty, w, h) { cur.push32le(0); // XOR/color data - for (y = h-1; y >= 0; y--) { - for (x = 0; x < w; x++) { + for (y = h-1; y >= 0; y -= 1) { + for (x = 0; x < w; x += 1) { idx = y * Math.ceil(w / 8) + Math.floor(x/8); alpha = (mask[idx] << (x % 8)) & 0x80 ? 255 : 0; - if (Canvas.true_color) { + if (conf.true_color) { idx = ((w * y) + x) * 4; cur.push(pixels[idx + 2]); // blue cur.push(pixels[idx + 1]); // green @@ -646,16 +709,20 @@ changeCursor: function(pixels, mask, hotx, hoty, w, h) { } // AND/bitmask data (ignored, just needs to be right size) - for (y = 0; y < h; y++) { - for (x = 0; x < Math.ceil(w / 8); x++) { + for (y = 0; y < h; y += 1) { + for (x = 0; x < Math.ceil(w / 8); x += 1) { cur.push(0x00); } } url = "data:image/x-icon;base64," + Base64.encode(cur); - $(Canvas.id).style.cursor = "url(" + url + ") " + hotx + " " + hoty + ", default"; + conf.target.style.cursor = "url(" + url + ") " + hotx + " " + hoty + ", default"; //Util.Debug("<< changeCursor, cur.length: " + cur.length); -} - }; + + +return constructor(); // Return the public API interface + +} // End of Canvas() + diff --git a/include/default_controls.js b/include/default_controls.js index dd2e97d9..3be50ed4 100644 --- a/include/default_controls.js +++ b/include/default_controls.js @@ -6,6 +6,7 @@ * See README.md for usage and integration instructions. */ "use strict"; +/*jslint white: false */ /*global $, Util, RFB, Canvas, VNC_uri_prefix, Element, Fx */ var DefaultControls = { @@ -16,10 +17,6 @@ settingsOpen : false, load: function(target) { var html, i, DC = DefaultControls, sheet, sheets, llevels; - /* Handle state updates */ - RFB.setUpdateState(DC.updateState); - RFB.setClipboardReceive(DC.clipReceive); - /* Populate the 'target' DOM element with default controls */ if (!target) { target = 'vnc'; } @@ -61,7 +58,7 @@ load: function(target) { html += ' '; sheet = Util.selectStylesheet(); sheets = Util.getStylesheets(); - for (i = 0; i < sheets.length; i++) { + for (i = 0; i < sheets.length; i += 1) { html += ''; } html += ' Style'; @@ -69,7 +66,7 @@ load: function(target) { // Logging selection dropdown html += '
  • Logging
    • '; @@ -107,6 +104,8 @@ load: function(target) { DC.initSetting('logging', 'warn'); Util.init_logging(DC.getSetting('logging')); DC.initSetting('stylesheet', 'default'); + + Util.selectStylesheet(null); // call twice to get around webkit bug Util.selectStylesheet(DC.getSetting('stylesheet')); /* Populate the controls if defaults are provided in the URL */ @@ -118,12 +117,19 @@ load: function(target) { DC.initSetting('true_color', true); DC.initSetting('cursor', true); + DC.rfb = RFB({'target': 'VNC_canvas', + 'updateState': DC.updateState, + 'clipboardReceive': DC.clipReceive}); + DC.rfb.init(); + + // Unfocus clipboard when over the VNC area $('VNC_screen').onmousemove = function () { - // Unfocus clipboard when over the VNC area - if (! Canvas.focused) { + var canvas = DC.rfb.get_canvas(); + if ((! canvas) || (! canvas.get_focused())) { $('VNC_clipboard_text').blur(); } }; + }, // Read form control compatible setting from cookie @@ -154,7 +160,7 @@ updateSetting: function(name, value) { if (ctrl.type === 'checkbox') { ctrl.checked = value; } else if (typeof ctrl.options !== 'undefined') { - for (i = 0; i < ctrl.options.length; i++) { + for (i = 0; i < ctrl.options.length; i += 1) { if (ctrl.options[i].value === value) { ctrl.selectedIndex = i; break; @@ -176,7 +182,7 @@ saveSetting: function(name) { val = ctrl.value; } Util.createCookie(name, val); - Util.Debug("Setting saved '" + name + "=" + val + "'"); + //Util.Debug("Setting saved '" + name + "=" + val + "'"); return val; }, @@ -190,7 +196,7 @@ initSetting: function(name, defVal) { val = Util.readCookie(name, defVal); } DefaultControls.updateSetting(name, val); - Util.Debug("Setting '" + name + "' initialized to '" + val + "'"); + //Util.Debug("Setting '" + name + "' initialized to '" + val + "'"); return val; }, @@ -208,7 +214,7 @@ clickSettingsMenu: function() { DC.updateSetting('encrypt'); DC.updateSetting('base64'); DC.updateSetting('true_color'); - if (Canvas.isCursor()) { + if (DC.rfb.get_canvas().get_cursor_uri()) { DC.updateSetting('cursor'); } else { DC.updateSetting('cursor', false); @@ -235,10 +241,11 @@ closeSettingsMenu: function() { // Disable/enable controls depending on connection state settingsDisabled: function(disabled) { + var DC = DefaultControls; $('VNC_encrypt').disabled = disabled; $('VNC_base64').disabled = disabled; $('VNC_true_color').disabled = disabled; - if (Canvas.isCursor()) { + if (DC.rfb && DC.rfb.get_canvas().get_cursor_uri()) { $('VNC_cursor').disabled = disabled; } else { DefaultControls.updateSetting('cursor', false); @@ -248,12 +255,12 @@ settingsDisabled: function(disabled) { // Save/apply settings when 'Apply' button is pressed settingsApply: function() { - Util.Debug(">> settingsApply"); + //Util.Debug(">> settingsApply"); var DC = DefaultControls; DC.saveSetting('encrypt'); DC.saveSetting('base64'); DC.saveSetting('true_color'); - if (Canvas.isCursor()) { + if (DC.rfb.get_canvas().get_cursor_uri()) { DC.saveSetting('cursor'); } DC.saveSetting('stylesheet'); @@ -263,21 +270,21 @@ settingsApply: function() { Util.selectStylesheet(DC.getSetting('stylesheet')); Util.init_logging(DC.getSetting('logging')); - Util.Debug("<< settingsApply"); + //Util.Debug("<< settingsApply"); }, setPassword: function() { - RFB.sendPassword($('VNC_password').value); + DefaultControls.rfb.sendPassword($('VNC_password').value); return false; }, sendCtrlAltDel: function() { - RFB.sendCtrlAltDel(); + DefaultControls.rfb.sendCtrlAltDel(); }, -updateState: function(state, msg) { +updateState: function(rfb, state, oldstate, msg) { var s, sb, c, cad, klass; s = $('VNC_status'); sb = $('VNC_status_bar'); @@ -334,6 +341,13 @@ updateState: function(state, msg) { }, +clipReceive: function(rfb, text) { + Util.Debug(">> DefaultControls.clipReceive: " + text.substr(0,40) + "..."); + $('VNC_clipboard_text').value = text; + Util.Debug("<< DefaultControls.clipReceive"); +}, + + connect: function() { var host, port, password, DC = DefaultControls; @@ -346,43 +360,37 @@ connect: function() { throw("Must set host and port"); } - RFB.setEncrypt(DC.getSetting('encrypt')); - RFB.setBase64(DC.getSetting('base64')); - RFB.setTrueColor(DC.getSetting('true_color')); - RFB.setCursor(DC.getSetting('cursor')); + DC.rfb.set_encrypt(DC.getSetting('encrypt')); + DC.rfb.set_b64encode(DC.getSetting('base64')); + DC.rfb.set_true_color(DC.getSetting('true_color')); + DC.rfb.set_local_cursor(DC.getSetting('cursor')); - RFB.connect(host, port, password); + DC.rfb.connect(host, port, password); }, disconnect: function() { DefaultControls.closeSettingsMenu(); - RFB.disconnect(); + DefaultControls.rfb.disconnect(); }, canvasBlur: function() { - Canvas.focused = false; + DefaultControls.rfb.get_canvas().set_focused(false); }, canvasFocus: function() { - Canvas.focused = true; + DefaultControls.rfb.get_canvas().set_focused(true); }, clipClear: function() { $('VNC_clipboard_text').value = ""; - RFB.clipboardPasteFrom(""); -}, - -clipReceive: function(text) { - Util.Debug(">> DefaultControls.clipReceive: " + text.substr(0,40) + "..."); - $('VNC_clipboard_text').value = text; - Util.Debug("<< DefaultControls.clipReceive"); + DefaultControls.rfb.clipboardPasteFrom(""); }, clipSend: function() { var text = $('VNC_clipboard_text').value; Util.Debug(">> DefaultControls.clipSend: " + text.substr(0,40) + "..."); - RFB.clipboardPasteFrom(text); + DefaultControls.rfb.clipboardPasteFrom(text); Util.Debug("<< DefaultControls.clipSend"); } diff --git a/include/rfb.js b/include/rfb.js index fee6f271..766f6eb9 100644 --- a/include/rfb.js +++ b/include/rfb.js @@ -7,361 +7,743 @@ */ "use strict"; -/*jslint white: false, nomen: false, browser: true, bitwise: false */ +/*jslint white: false, browser: true, bitwise: false */ /*global window, WebSocket, Util, Canvas, VNC_native_ws, Base64, DES */ -// Globals defined here -var RFB; -/* - * RFB namespace - */ +function RFB(conf) { -RFB = { +conf = conf || {}; // Configuration +var that = {}, // Public API interface -/* - * External interface variables and methods - */ -host : '', -port : 5900, -password : '', + // Pre-declare private functions used before definitions (jslint) + init_vars, updateState, init_msg, normal_msg, recv_message, + framebufferUpdate, show_timings, -encrypt : true, -true_color : false, -b64encode : true, // false means UTF-8 on the wire -local_cursor : true, -connectTimeout : 2000, // time to wait for connection + pixelFormat, clientEncodings, fbUpdateRequest, + keyEvent, pointerEvent, clientCutText, + + extract_data_uri, scan_tight_imgs, + + send_array, checkEvents, // Overridable for testing -// In preference order -encodings : [ - ['COPYRECT', 0x01, 'display_copy_rect'], - ['TIGHT_PNG', -260, 'display_tight_png'], - ['HEXTILE', 0x05, 'display_hextile'], - ['RRE', 0x02, 'display_rre'], - ['RAW', 0x00, 'display_raw'], - ['DesktopSize', -223, 'set_desktopsize'], - ['Cursor', -239, 'set_cursor'], + // + // Private RFB namespace variables + // + rfb_host = '', + rfb_port = 5900, + rfb_password = '', - // Psuedo-encoding settings - ['JPEG_quality_lo', -32, 'set_jpeg_quality'], -// ['JPEG_quality_hi', -23, 'set_jpeg_quality'], - ['compress_lo', -255, 'set_compress_level'] -// ['compress_hi', -247, 'set_compress_level'] - ], + rfb_state = 'disconnected', + rfb_version = 0, + rfb_max_version= 3.8, + rfb_auth_scheme= '', + rfb_shared = 1, -setUpdateState: function(externalUpdateState) { - RFB.externalUpdateState = externalUpdateState; -}, + // In preference order + encodings = [ + ['COPYRECT', 0x01 ], + ['TIGHT_PNG', -260 ], + ['HEXTILE', 0x05 ], + ['RRE', 0x02 ], + ['RAW', 0x00 ], + ['DesktopSize', -223 ], + ['Cursor', -239 ], -setClipboardReceive: function(clipReceive) { - RFB.clipboardCopyTo = clipReceive; -}, + // Psuedo-encoding settings + ['JPEG_quality_lo', -32 ], + //['JPEG_quality_hi', -23 ], + ['compress_lo', -255 ] + //['compress_hi', -247 ] + ], -setCanvasID: function(canvasID) { - RFB.canvasID = canvasID; -}, + encHandlers = {}, + encNames = {}, -setEncrypt: function(encrypt) { - if ((!encrypt) || (encrypt in {'0':1, 'no':1, 'false':1})) { - RFB.encrypt = false; - } else { - RFB.encrypt = true; - } -}, + ws = null, // Web Socket object + canvas = null, // Canvas object + sendID = null, // Send Queue check timer -setBase64: function(b64) { - if ((!b64) || (b64 in {'0':1, 'no':1, 'false':1})) { - RFB.b64encode = false; - } else { - RFB.b64encode = true; - } - Util.Debug("Set b64encode to: " + RFB.b64encode); -}, + // Receive and send queues + RQ = [], // Receive Queue + SQ = "", // Send Queue -setTrueColor: function(trueColor) { - if ((!trueColor) || (trueColor in {'0':1, 'no':1, 'false':1})) { - RFB.true_color = false; - } else { - RFB.true_color = true; - } -}, + // Frame buffer update state + FBU = { + rects : 0, + subrects : 0, // RRE and HEXTILE + lines : 0, // RAW + tiles : 0, // HEXTILE + bytes : 0, + x : 0, + y : 0, + width : 0, + height : 0, + encoding : 0, + subencoding : -1, + background : null, + imgs : [] // TIGHT_PNG image queue + }, -setCursor: function(cursor) { + fb_Bpp = 4, + fb_depth = 3, + fb_width = 0, + fb_height = 0, + fb_name = "", + + cuttext = 'none', // ServerCutText wait state + cuttext_length = 0, + + scan_imgs_rate = 100, + last_req_time = 0, + rre_chunk_sz = 100, + + timing = { + last_fbu : 0, + fbu_total : 0, + fbu_total_cnt : 0, + full_fbu_total : 0, + full_fbu_cnt : 0, + + fbu_rt_start : 0, + fbu_rt_total : 0, + fbu_rt_cnt : 0, + + history : [], + history_start : 0, + h_time : 0, + h_rects : 0, + h_fbus : 0, + h_bytes : 0, + h_pixels : 0 + }, + + test_mode = false, + + /* Mouse state */ + mouse_buttonMask = 0, + mouse_arr = []; + + +// +// Configuration settings +// + +// VNC viewport rendering Canvas +Util.conf_default(conf, that, 'target', 'VNC_canvas'); + +Util.conf_default(conf, that, 'encrypt', false, true); +Util.conf_default(conf, that, 'true_color', true, true); +// false means UTF-8 on the wire +Util.conf_default(conf, that, 'b64encode', true, true); +Util.conf_default(conf, that, 'local_cursor', true, true); + +// time to wait for connection +Util.conf_default(conf, that, 'connectTimeout', 2000); +// frequency to check for send/receive +Util.conf_default(conf, that, 'check_rate', 217); +// frequency to send frameBufferUpdate requests +Util.conf_default(conf, that, 'fbu_req_rate', 1413); + +// state update callback +Util.conf_default(conf, that, 'updateState', function () { + Util.Debug(">> externalUpdateState stub"); }); +// clipboard contents received callback +Util.conf_default(conf, that, 'clipboardReceive', function () { + Util.Debug(">> clipboardReceive stub"); }); + + +// Override/add some specific getters/setters +that.set_local_cursor = function(cursor) { if ((!cursor) || (cursor in {'0':1, 'no':1, 'false':1})) { - RFB.local_cursor = false; + conf.local_cursor = false; } else { - if (Canvas.isCursor()) { - RFB.local_cursor = true; + if (canvas.get_cursor_uri()) { + conf.local_cursor = true; } else { Util.Warn("Browser does not support local cursor"); } } -}, +}; -sendPassword: function(passwd) { - RFB.password = passwd; - RFB.state = "Authentication"; - setTimeout(RFB.init_msg, 1); -}, +that.get_canvas = function() { + return canvas; +}; -sendCtrlAltDel: function() { - if (RFB.state !== "normal") { return false; } - Util.Info("Sending Ctrl-Alt-Del"); - var arr = []; - arr = arr.concat(RFB.keyEvent(0xFFE3, 1)); // Control - arr = arr.concat(RFB.keyEvent(0xFFE9, 1)); // Alt - arr = arr.concat(RFB.keyEvent(0xFFFF, 1)); // Delete - arr = arr.concat(RFB.keyEvent(0xFFFF, 0)); // Delete - arr = arr.concat(RFB.keyEvent(0xFFE9, 0)); // Alt - arr = arr.concat(RFB.keyEvent(0xFFE3, 0)); // Control - arr = arr.concat(RFB.fbUpdateRequest(1)); - RFB.send_array(arr); -}, -load: function () { + + +// +// Private functions +// + +// +// Setup routines +// + +// Create the public API interface +function constructor() { var i; - //Util.Debug(">> load"); + //Util.Debug(">> init"); - /* Load web-socket-js if no builtin WebSocket support */ - if (VNC_native_ws) { - Util.Info("Using native WebSockets"); - RFB.updateState('loaded', 'noVNC ready (using native WebSockets)'); - } else { - Util.Warn("Using web-socket-js flash bridge"); - if ((! Util.Flash) || - (Util.Flash.version < 9)) { - RFB.updateState('fatal', "WebSockets or Adobe Flash is required"); - } else if (document.location.href.substr(0, 7) === "file://") { - RFB.updateState('fatal', - "'file://' URL is incompatible with Adobe Flash"); - } else { - RFB.updateState('loaded', 'noVNC ready (using Flash WebSockets emulation)'); - } + // Create lookup tables based encoding number + for (i=0; i < encodings.length; i+=1) { + encHandlers[encodings[i][1]] = encHandlers[encodings[i][0]]; + encNames[encodings[i][1]] = encodings[i][0]; } - - // Initialize canvas/fxcanvas + // Initialize canvas try { - Canvas.init(RFB.canvasID); + canvas = new Canvas({'target': conf.target}); } catch (exc) { - RFB.updateState('fatal', "No working Canvas"); + Util.Error("Canvas exception: " + exc); + updateState('fatal', "No working Canvas"); } - // Populate encoding lookup tables - RFB.encHandlers = {}; - RFB.encNames = {}; - for (i=0; i < RFB.encodings.length; i+=1) { - RFB.encHandlers[RFB.encodings[i][1]] = RFB[RFB.encodings[i][2]]; - RFB.encNames[RFB.encodings[i][1]] = RFB.encodings[i][0]; + //Util.Debug("<< init"); + return that; // Return the public API interface +} + +function init_ws() { + //Util.Debug(">> init_ws"); + + var uri = "", vars = []; + if (conf.encrypt) { + uri = "wss://"; + } else { + uri = "ws://"; } - //Util.Debug("<< load"); -}, + uri += rfb_host + ":" + rfb_port + "/"; + if (conf.b64encode) { + vars.push("b64encode"); + } + if (vars.length > 0) { + uri += "?" + vars.join("&"); + } + Util.Info("connecting to " + uri); + ws = new WebSocket(uri); -connect: function (host, port, password) { - //Util.Debug(">> connect"); + ws.onmessage = recv_message; + ws.onopen = function(e) { + Util.Debug(">> WebSocket.onopen"); + if (rfb_state === "connect") { + updateState('ProtocolVersion', "Starting VNC handshake"); + } else { + updateState('failed', "Got unexpected WebSockets connection"); + } + Util.Debug("<< WebSocket.onopen"); + }; + ws.onclose = function(e) { + Util.Debug(">> WebSocket.onclose"); + if (rfb_state === 'normal') { + updateState('failed', 'Server disconnected'); + } else if (rfb_state === 'ProtocolVersion') { + updateState('failed', 'Failed to connect to server'); + } else { + updateState('disconnected', 'VNC disconnected'); + } + Util.Debug("<< WebSocket.onclose"); + }; + ws.onerror = function(e) { + Util.Debug(">> WebSocket.onerror"); + updateState('failed', "WebSocket error"); + Util.Debug("<< WebSocket.onerror"); + }; - RFB.host = host; - RFB.port = port; - RFB.password = (password !== undefined) ? password : ""; + setTimeout(function () { + if (ws.readyState === WebSocket.CONNECTING) { + updateState('failed', "Connect timeout"); + } + }, conf.connectTimeout); - if ((!RFB.host) || (!RFB.port)) { - RFB.updateState('failed', "Must set host and port"); + //Util.Debug("<< init_ws"); +} + +init_vars = function() { + /* Reset state */ + cuttext = 'none'; + cuttext_length = 0; + RQ = []; + SQ = ""; + FBU.rects = 0; + FBU.subrects = 0; // RRE and HEXTILE + FBU.lines = 0; // RAW + FBU.tiles = 0; // HEXTILE + FBU.imgs = []; // TIGHT_PNG image queue + mouse_buttonMask = 0; + mouse_arr = []; + + timing.history_start = 0; + timing.history = []; + timing.h_fbus = 0; + timing.h_rects = 0; + timing.h_bytes = 0; + timing.h_pixels = 0; +}; + +// +// Utility routines +// + + +/* + * Running states: + * disconnected - idle state + * normal - connected + * + * Page states: + * loaded - page load, equivalent to disconnected + * connect - starting initialization + * password - waiting for password + * failed - abnormal transition to disconnected + * fatal - failed to load page, or fatal error + * + * VNC initialization states: + * ProtocolVersion + * Security + * Authentication + * SecurityResult + * ServerInitialization + */ +updateState = function(state, statusMsg) { + var func, cmsg, oldstate = rfb_state; + if (state === oldstate) { + /* Already here, ignore */ + Util.Debug("Already in state '" + state + "', ignoring."); return; } - RFB.updateState('connect'); - //Util.Debug("<< connect"); + if (oldstate === 'fatal') { + Util.Error("Fatal error, cannot continue"); + } -}, + if ((state === 'failed') || (state === 'fatal')) { + func = Util.Error; + } else { + func = Util.Warn; + } -disconnect: function () { - //Util.Debug(">> disconnect"); - RFB.updateState('disconnected', 'Disconnected'); - //Util.Debug("<< disconnect"); -}, + cmsg = typeof(statusMsg) !== 'undefined' ? (" Msg: " + statusMsg) : ""; + func("New state '" + state + "', was '" + oldstate + "'." + cmsg); -clipboardPasteFrom: function (text) { - if (RFB.state !== "normal") { return; } - //Util.Debug(">> clipboardPasteFrom: " + text.substr(0,40) + "..."); - RFB.send_array(RFB.clientCutText(text)); - //Util.Debug("<< clipboardPasteFrom"); -}, + if ((oldstate === 'failed') && (state === 'disconnected')) { + // Do disconnect action, but stay in failed state. + rfb_state = 'failed'; + } else { + rfb_state = state; + } + + switch (state) { + case 'loaded': + case 'disconnected': + + if (sendID) { + clearInterval(sendID); + sendID = null; + } + + if (ws) { + if (ws.readyState === WebSocket.OPEN) { + ws.close(); + } + ws.onmessage = function (e) { return; }; + } + + if (canvas && canvas.getContext()) { + canvas.stop(); + if (! /__debug__$/i.test(document.location.href)) { + canvas.clear(); + } + } + + show_timings(); + + break; -/* - * Private variables and methods - */ + case 'connect': + init_vars(); -ws : null, // Web Socket object -sendID : null, -scanID : null, // TIGHT_PNG render image scanner + if ((ws) && (ws.readyState === WebSocket.OPEN)) { + ws.close(); + } + init_ws(); // onopen transitions to 'ProtocolVersion' -// Receive and send queues -RQ : [], // Receive Queue -SQ : "", // Send Queue + break; -encHandlers : {}, -encNames : {}, -// Frame buffer update state -FBU : { - rects : 0, - subrects : 0, // RRE and HEXTILE - lines : 0, // RAW - tiles : 0, // HEXTILE - bytes : 0, - x : 0, - y : 0, - width : 0, - height : 0, - encoding : 0, - subencoding : -1, - background : null, - imgs : [] // TIGHT_PNG image queue -}, + case 'password': + // Ignore password state by default + break; -fb_Bpp : 4, -fb_depth : 3, -max_version : 3.8, -version : 0, -auth_scheme : '', -state : 'disconnected', -cuttext : 'none', // ServerCutText wait state -ct_length : 0, + case 'normal': + if ((oldstate === 'disconnected') || (oldstate === 'failed')) { + Util.Error("Invalid transition from 'disconnected' or 'failed' to 'normal'"); + } -shared : 1, -check_rate : 217, -scan_imgs_rate : 100, -req_rate : 1413, -last_req : 0, + break; -canvasID : 'VNC_canvas', -fb_width : 0, -fb_height : 0, -fb_name : "", -rre_chunk : 100, -timing : { - last_fbu : 0, - fbu_total : 0, - fbu_total_cnt : 0, - full_fbu_total : 0, - full_fbu_cnt : 0, + case 'failed': + if (oldstate === 'disconnected') { + Util.Error("Invalid transition from 'disconnected' to 'failed'"); + } + if (oldstate === 'normal') { + Util.Error("Error while connected."); + } + if (oldstate === 'init') { + Util.Error("Error while initializing."); + } - fbu_rt_start : 0, - fbu_rt_total : 0, - fbu_rt_cnt : 0, + if ((ws) && (ws.readyState === WebSocket.OPEN)) { + ws.close(); + } + // Make sure we transition to disconnected + setTimeout(function() { updateState('disconnected'); }, 50); - history : [], - history_start : 0, - h_time : 0, - h_rects : 0, - h_fbus : 0, - h_bytes : 0, - h_pixels : 0 -}, + break; -/* Mouse state */ -mouse_buttonmask : 0, -mouse_arr : [], -/* - * Server message handlers - */ + default: + // Invalid state transition -/* RFB/VNC initialisation */ -init_msg: function () { - //Util.Debug(">> init_msg [RFB.state '" + RFB.state + "']"); + } - var RQ = RFB.RQ, strlen, reason, reason_len, sversion, cversion, + if ((oldstate === 'failed') && (state === 'disconnected')) { + // Leave the failed message + conf.updateState(that, state, oldstate); + } else { + conf.updateState(that, state, oldstate, statusMsg); + } +}; + +function encode_message(arr) { + if (conf.b64encode) { + /* base64 encode */ + SQ = SQ + Base64.encode(arr); + } else { + /* UTF-8 encode. 0 -> 256 to avoid WebSockets framing */ + SQ = SQ + arr.map(function (num) { + if (num === 0) { + return String.fromCharCode(256); + } else { + return String.fromCharCode(num); + } + } ).join(''); + } +} + +function decode_message(data) { + var i, length; + //Util.Debug(">> decode_message: " + data); + if (conf.b64encode) { + /* base64 decode */ + RQ = RQ.concat(Base64.decode(data, 0)); + } else { + /* UTF-8 decode. 256 -> 0 to WebSockets framing */ + length = data.length; + for (i=0; i < length; i += 1) { + RQ.push(data.charCodeAt(i) % 256); + } + } + //Util.Debug(">> decode_message, RQ: " + RQ); +} + +function handle_message() { + //Util.Debug("RQ.slice(0,20): " + RQ.slice(0,20) + " (" + RQ.length + ")"); + if (RQ.length == 0) { + Util.Warn("handle_message called on empty receive queue"); + return; + } + switch (rfb_state) { + case 'disconnected': + Util.Error("Got data while disconnected"); + break; + case 'failed': + Util.Warn("Giving up!"); + that.disconnect(); + break; + case 'normal': + if (normal_msg() && RQ.length > 0) { + // true means we can continue processing + Util.Debug("More data to process"); + // Give other events a chance to run + setTimeout(handle_message, 10); + } + break; + default: + init_msg(); + break; + } +} + +recv_message = function(e) { + //Util.Debug(">> recv_message"); + + try { + decode_message(e.data); + if (RQ.length > 0) { + handle_message(); + } else { + Util.Debug("Ignoring empty message"); + } + } catch (exc) { + if (typeof exc.stack !== 'undefined') { + Util.Warn("recv_message, caught exception: " + exc.stack); + } else if (typeof exc.description !== 'undefined') { + Util.Warn("recv_message, caught exception: " + exc.description); + } else { + Util.Warn("recv_message, caught exception:" + exc); + } + if (typeof exc.name !== 'undefined') { + updateState('failed', exc.name + ": " + exc.message); + } else { + updateState('failed', exc); + } + } + //Util.Debug("<< recv_message"); +}; + +// overridable for testing +send_array = function(arr) { + //Util.Debug(">> send_array: " + arr); + encode_message(arr); + if (ws.bufferedAmount === 0) { + //Util.Debug("arr: " + arr); + //Util.Debug("SQ: " + SQ); + ws.send(SQ); + SQ = ""; + } else { + Util.Debug("Delaying send"); + } +}; + +function send_string(str) { + //Util.Debug(">> send_string: " + str); + send_array(str.split('').map( + function (chr) { return chr.charCodeAt(0); } ) ); +} + +function genDES(password, challenge) { + var i, passwd, response; + passwd = []; + response = challenge.slice(); + for (i=0; i < password.length; i += 1) { + passwd.push(password.charCodeAt(i)); + } + + DES.setKeys(passwd); + DES.encrypt(response, 0, response, 0); + DES.encrypt(response, 8, response, 8); + return response; +} + +function flushClient() { + if (mouse_arr.length > 0) { + //send_array(mouse_arr.concat(fbUpdateRequest(1))); + send_array(mouse_arr); + setTimeout(function() { + send_array(fbUpdateRequest(1)); + }, 50); + + mouse_arr = []; + return true; + } else { + return false; + } +} + +// overridable for testing +checkEvents = function() { + var now; + if (rfb_state === 'normal') { + if (! flushClient()) { + now = new Date().getTime(); + if (now > last_req_time + conf.fbu_req_rate) { + last_req_time = now; + send_array(fbUpdateRequest(1)); + } + } + } + setTimeout(checkEvents, conf.check_rate); +}; + +function keyPress(keysym, down) { + var arr; + arr = keyEvent(keysym, down); + arr = arr.concat(fbUpdateRequest(1)); + send_array(arr); +} + +function mouseButton(x, y, down, bmask) { + if (down) { + mouse_buttonMask |= bmask; + } else { + mouse_buttonMask ^= bmask; + } + mouse_arr = mouse_arr.concat( pointerEvent(x, y) ); + flushClient(); +} + +function mouseMove(x, y) { + //Util.Debug('>> mouseMove ' + x + "," + y); + mouse_arr = mouse_arr.concat( pointerEvent(x, y) ); +} + + +function update_timings() { + var now, offset; + now = (new Date()).getTime(); + timing.history.push([now, + timing.h_fbus, + timing.h_rects, + timing.h_bytes, + timing.h_pixels]); + timing.h_fbus = 0; + timing.h_rects = 0; + timing.h_bytes = 0; + timing.h_pixels = 0; + if ((rfb_state !== 'disconnected') && (rfb_state !== 'failed')) { + // Try for every second + offset = (now - timing.history_start) % 1000; + if (offset < 500) { + setTimeout(update_timings, 1000 - offset); + } else { + setTimeout(update_timings, 2000 - offset); + } + } +} + +show_timings = function() { + var i, history, msg, + delta, tot_time = 0, tot_fbus = 0, tot_rects = 0, + tot_bytes = 0, tot_pixels = 0; + if (timing.history_start === 0) { return; } + //Util.Debug(">> show_timings"); + update_timings(); // Final accumulate + msg = "\nTimings\n"; + msg += " time: fbus,rects,bytes,pixels\n"; + for (i=0; i < timing.history.length; i += 1) { + history = timing.history[i]; + delta = ((history[0]-timing.history_start)/1000); + tot_time = delta; + tot_fbus += history[1]; + tot_rects += history[2]; + tot_bytes += history[3]; + tot_pixels += history[4]; + + msg += " " + delta.toFixed(3); + msg += ": " + history.slice(1) + "\n"; + } + msg += "\nTotals:\n"; + msg += " time: fbus,rects,bytes,pixels\n"; + msg += " " + tot_time.toFixed(3); + msg += ": " + tot_fbus + "," + tot_rects; + msg += "," + tot_bytes + "," + tot_pixels; + Util.Info(msg); + //Util.Debug("<< show_timings"); +}; + +// +// Server message handlers +// + +// RFB/VNC initialisation message handler +init_msg = function() { + //Util.Debug(">> init_msg [rfb_state '" + rfb_state + "']"); + + var strlen, reason, reason_len, sversion, cversion, i, types, num_types, challenge, response, bpp, depth, big_endian, true_color, name_length; //Util.Debug("RQ (" + RQ.length + ") " + RQ); - switch (RFB.state) { + switch (rfb_state) { case 'ProtocolVersion' : if (RQ.length < 12) { - RFB.updateState('failed', + updateState('failed', "Disconnected: incomplete protocol version"); return; } sversion = RQ.shiftStr(12).substr(4,7); Util.Info("Server ProtocolVersion: " + sversion); switch (sversion) { - case "003.003": RFB.version = 3.3; break; - case "003.007": RFB.version = 3.7; break; - case "003.008": RFB.version = 3.8; break; + case "003.003": rfb_version = 3.3; break; + case "003.007": rfb_version = 3.7; break; + case "003.008": rfb_version = 3.8; break; default: - RFB.updateState('failed', + updateState('failed', "Invalid server version " + sversion); return; } - if (RFB.version > RFB.max_version) { - RFB.version = RFB.max_version; + if (rfb_version > rfb_max_version) { + rfb_version = rfb_max_version; } - RFB.sendID = setInterval(function() { - /* - * Send updates either at a rate of one update every 50ms, - * or whatever slower rate the network can handle - */ - if (RFB.ws.bufferedAmount === 0) { - if (RFB.SQ) { - RFB.ws.send(RFB.SQ); - RFB.SQ = ""; + if (! test_mode) { + sendID = setInterval(function() { + // Send updates either at a rate of one update + // every 50ms, or whatever slower rate the network + // can handle. + if (ws.bufferedAmount === 0) { + if (SQ) { + ws.send(SQ); + SQ = ""; + } + } else { + Util.Debug("Delaying send"); } - } else { - Util.Debug("Delaying send"); - } - }, 50); + }, 50); + } - cversion = "00" + parseInt(RFB.version,10) + - ".00" + ((RFB.version * 10) % 10); - RFB.send_string("RFB " + cversion + "\n"); - RFB.updateState('Security', "Sent ProtocolVersion: " + sversion); + cversion = "00" + parseInt(rfb_version,10) + + ".00" + ((rfb_version * 10) % 10); + send_string("RFB " + cversion + "\n"); + updateState('Security', "Sent ProtocolVersion: " + sversion); break; case 'Security' : - if (RFB.version >= 3.7) { + if (rfb_version >= 3.7) { num_types = RQ.shift8(); if (num_types === 0) { strlen = RQ.shift32(); reason = RQ.shiftStr(strlen); - RFB.updateState('failed', + updateState('failed', "Disconnected: security failure: " + reason); return; } - RFB.auth_scheme = 0; + rfb_auth_scheme = 0; types = RQ.shiftBytes(num_types); + Util.Debug("Server security types: " + types); for (i=0; i < types.length; i+=1) { - if ((types[i] > RFB.auth_scheme) && (types[i] < 3)) { - RFB.auth_scheme = types[i]; + if ((types[i] > rfb_auth_scheme) && (types[i] < 3)) { + rfb_auth_scheme = types[i]; } } - if (RFB.auth_scheme === 0) { - RFB.updateState('failed', + if (rfb_auth_scheme === 0) { + updateState('failed', "Disconnected: unsupported security types: " + types); return; } - RFB.send_array([RFB.auth_scheme]); + send_array([rfb_auth_scheme]); } else { if (RQ.length < 4) { - RFB.updateState('failed', "Invalid security frame"); + updateState('failed', "Invalid security frame"); return; } - RFB.auth_scheme = RQ.shift32(); + rfb_auth_scheme = RQ.shift32(); } - RFB.updateState('Authentication', - "Authenticating using scheme: " + RFB.auth_scheme); - // Fall through + updateState('Authentication', + "Authenticating using scheme: " + rfb_auth_scheme); + init_msg(); // Recursive fallthrough (workaround JSLint complaint) + break; case 'Authentication' : - //Util.Debug("Security auth scheme: " + RFB.auth_scheme); - switch (RFB.auth_scheme) { + //Util.Debug("Security auth scheme: " + rfb_auth_scheme); + switch (rfb_auth_scheme) { case 0: // connection failed if (RQ.length < 4) { //Util.Debug(" waiting for auth reason bytes"); @@ -369,16 +751,15 @@ init_msg: function () { } strlen = RQ.shift32(); reason = RQ.shiftStr(strlen); - RFB.updateState('failed', + updateState('failed', "Disconnected: auth failure: " + reason); return; case 1: // no authentication - // RFB.send_array([RFB.shared]); // ClientInitialisation - RFB.updateState('SecurityResult'); + updateState('SecurityResult'); break; case 2: // VNC authentication - if (RFB.password.length === 0) { - RFB.updateState('password', "Password Required"); + if (rfb_password.length === 0) { + updateState('password', "Password Required"); return; } if (RQ.length < 16) { @@ -386,60 +767,60 @@ init_msg: function () { return; } challenge = RQ.shiftBytes(16); - //Util.Debug("Password: " + RFB.password); + //Util.Debug("Password: " + rfb_password); //Util.Debug("Challenge: " + challenge + // " (" + challenge.length + ")"); - response = RFB.DES(RFB.password, challenge); + response = genDES(rfb_password, challenge); //Util.Debug("Response: " + response + // " (" + response.length + ")"); //Util.Debug("Sending DES encrypted auth response"); - RFB.send_array(response); - RFB.updateState('SecurityResult'); + send_array(response); + updateState('SecurityResult'); break; default: - RFB.updateState('failed', + updateState('failed', "Disconnected: unsupported auth scheme: " + - RFB.auth_scheme); + rfb_auth_scheme); return; } break; case 'SecurityResult' : if (RQ.length < 4) { - RFB.updateState('failed', "Invalid VNC auth response"); + updateState('failed', "Invalid VNC auth response"); return; } switch (RQ.shift32()) { case 0: // OK - RFB.updateState('ServerInitialisation', "Authentication OK"); + updateState('ServerInitialisation', "Authentication OK"); break; case 1: // failed - if (RFB.version >= 3.8) { + if (rfb_version >= 3.8) { reason_len = RQ.shift32(); reason = RQ.shiftStr(reason_len); - RFB.updateState('failed', reason); + updateState('failed', reason); } else { - RFB.updateState('failed', "Authentication failed"); + updateState('failed', "Authentication failed"); } return; case 2: // too-many - RFB.updateState('failed', + updateState('failed', "Disconnected: too many auth attempts"); return; } - RFB.send_array([RFB.shared]); // ClientInitialisation + send_array([rfb_shared]); // ClientInitialisation break; case 'ServerInitialisation' : if (RQ.length < 24) { - RFB.updateState('failed', "Invalid server initialisation"); + updateState('failed', "Invalid server initialisation"); return; } /* Screen size */ - RFB.fb_width = RQ.shift16(); - RFB.fb_height = RQ.shift16(); + fb_width = RQ.shift16(); + fb_height = RQ.shift16(); /* PIXEL_FORMAT */ bpp = RQ.shift8(); @@ -447,7 +828,7 @@ init_msg: function () { big_endian = RQ.shift8(); true_color = RQ.shift8(); - Util.Info("Screen: " + RFB.fb_width + "x" + RFB.fb_height + + Util.Info("Screen: " + fb_width + "x" + fb_height + ", bpp: " + bpp + ", depth: " + depth + ", big_endian: " + big_endian + ", true_color: " + true_color); @@ -455,61 +836,61 @@ init_msg: function () { /* Connection name/title */ RQ.shiftStr(12); name_length = RQ.shift32(); - RFB.fb_name = RQ.shiftStr(name_length); + fb_name = RQ.shiftStr(name_length); - Canvas.resize(RFB.fb_width, RFB.fb_height, RFB.true_color); - Canvas.start(RFB.keyPress, RFB.mouseButton, RFB.mouseMove); + canvas.resize(fb_width, fb_height, conf.true_color); + canvas.start(keyPress, mouseButton, mouseMove); - if (RFB.true_color) { - RFB.fb_Bpp = 4; - RFB.fb_depth = 3; + if (conf.true_color) { + fb_Bpp = 4; + fb_depth = 3; } else { - RFB.fb_Bpp = 1; - RFB.fb_depth = 1; + fb_Bpp = 1; + fb_depth = 1; } - response = RFB.pixelFormat(); - response = response.concat(RFB.clientEncodings()); - response = response.concat(RFB.fbUpdateRequest(0)); - RFB.timing.fbu_rt_start = (new Date()).getTime(); - RFB.send_array(response); + response = pixelFormat(); + response = response.concat(clientEncodings()); + response = response.concat(fbUpdateRequest(0)); + timing.fbu_rt_start = (new Date()).getTime(); + send_array(response); /* Start pushing/polling */ - setTimeout(RFB.checkEvents, RFB.check_rate); - setTimeout(RFB.scan_tight_imgs, RFB.scan_imgs_rate); - RFB.timing.history_start = (new Date()).getTime(); - setTimeout(RFB.update_timings, 1000); + setTimeout(checkEvents, conf.check_rate); + setTimeout(scan_tight_imgs, scan_imgs_rate); + timing.history_start = (new Date()).getTime(); + setTimeout(update_timings, 1000); - if (RFB.encrypt) { - RFB.updateState('normal', "Connected (encrypted) to: " + RFB.fb_name); + if (conf.encrypt) { + updateState('normal', "Connected (encrypted) to: " + fb_name); } else { - RFB.updateState('normal', "Connected (unencrypted) to: " + RFB.fb_name); + updateState('normal', "Connected (unencrypted) to: " + fb_name); } break; } //Util.Debug("<< init_msg"); -}, +}; -/* Normal RFB/VNC server messages */ -normal_msg: function () { +/* Normal RFB/VNC server message handler */ +normal_msg = function() { //Util.Debug(">> normal_msg"); - var RQ = RFB.RQ, ret = true, msg_type, + var ret = true, msg_type, c, first_colour, num_colours, red, green, blue; //Util.Debug(">> msg RQ.slice(0,10): " + RQ.slice(0,20)); //Util.Debug(">> msg RQ.slice(-10,-1): " + RQ.slice(RQ.length-10,RQ.length)); - if (RFB.FBU.rects > 0) { + if (FBU.rects > 0) { msg_type = 0; - } else if (RFB.cuttext !== 'none') { + } else if (cuttext !== 'none') { msg_type = 3; } else { msg_type = RQ.shift8(); } switch (msg_type) { case 0: // FramebufferUpdate - ret = RFB.framebufferUpdate(); // false means need more data + ret = framebufferUpdate(); // false means need more data break; case 1: // SetColourMapEntries Util.Debug("SetColourMapEntries"); @@ -523,10 +904,10 @@ normal_msg: function () { //Util.Debug("red after: " + red); green = parseInt(RQ.shift16() / 256, 10); blue = parseInt(RQ.shift16() / 256, 10); - Canvas.colourMap[first_colour + c] = [red, green, blue]; + canvas.set_colourMap([red, green, blue], first_colour + c); } Util.Info("Registered " + num_colours + " colourMap entries"); - //Util.Debug("colourMap: " + Canvas.colourMap); + //Util.Debug("colourMap: " + canvas.get_colourMap()); break; case 2: // Bell Util.Warn("Bell (unsupported)"); @@ -534,39 +915,37 @@ normal_msg: function () { case 3: // ServerCutText Util.Debug("ServerCutText"); Util.Debug("RQ:" + RQ.slice(0,20)); - if (RFB.cuttext === 'none') { - RFB.cuttext = 'header'; + if (cuttext === 'none') { + cuttext = 'header'; } - if (RFB.cuttext === 'header') { + if (cuttext === 'header') { if (RQ.length < 7) { //Util.Debug("waiting for ServerCutText header"); return false; } RQ.shiftBytes(3); // Padding - RFB.ct_length = RQ.shift32(); + cuttext_length = RQ.shift32(); } - RFB.cuttext = 'bytes'; - if (RQ.length < RFB.ct_length) { + cuttext = 'bytes'; + if (RQ.length < cuttext_length) { //Util.Debug("waiting for ServerCutText bytes"); return false; } - RFB.clipboardCopyTo(RQ.shiftStr(RFB.ct_length)); - RFB.cuttext = 'none'; + conf.clipboardReceive(that, RQ.shiftStr(cuttext_length)); + cuttext = 'none'; break; default: - RFB.updateState('failed', + updateState('failed', "Disconnected: illegal server message type " + msg_type); Util.Debug("RQ.slice(0,30):" + RQ.slice(0,30)); break; } //Util.Debug("<< normal_msg"); return ret; -}, +}; -framebufferUpdate: function() { - var RQ = RFB.RQ, FBU = RFB.FBU, timing = RFB.timing, - now, fbu_rt_diff, last_bytes, last_rects, - ret = true; +framebufferUpdate = function() { + var now, fbu_rt_diff, last_bytes, last_rects, ret = true; if (FBU.rects === 0) { //Util.Debug("New FBU: RQ.slice(0,20): " + RQ.slice(0,20)); @@ -588,7 +967,7 @@ framebufferUpdate: function() { } while (FBU.rects > 0) { - if (RFB.state !== "normal") { + if (rfb_state !== "normal") { return false; } if (RQ.length < FBU.bytes) { @@ -607,19 +986,19 @@ framebufferUpdate: function() { FBU.encoding = parseInt(RQ.shift32(), 10); timing.h_bytes += 12; - if (RFB.encNames[FBU.encoding]) { + if (encNames[FBU.encoding]) { // Debug: /* var msg = "FramebufferUpdate rects:" + FBU.rects; msg += " x: " + FBU.x + " y: " + FBU.y msg += " width: " + FBU.width + " height: " + FBU.height; msg += " encoding:" + FBU.encoding; - msg += "(" + RFB.encNames[FBU.encoding] + ")"; + msg += "(" + encNames[FBU.encoding] + ")"; msg += ", RQ.length: " + RQ.length; Util.Debug(msg); */ } else { - RFB.updateState('failed', + updateState('failed', "Disconnected: unsupported encoding " + FBU.encoding); return false; @@ -631,7 +1010,7 @@ framebufferUpdate: function() { last_rects = FBU.rects; // false ret means need more data - ret = RFB.encHandlers[FBU.encoding](); + ret = encHandlers[FBU.encoding](); now = (new Date()).getTime(); timing.cur_fbu += (now - timing.last_fbu); @@ -644,8 +1023,8 @@ framebufferUpdate: function() { } if (FBU.rects === 0) { - if (((FBU.width === RFB.fb_width) && - (FBU.height === RFB.fb_height)) || + if (((FBU.width === fb_width) && + (FBU.height === fb_height)) || (timing.fbu_rt_start > 0)) { timing.full_fbu_total += timing.cur_fbu; timing.full_fbu_cnt += 1; @@ -671,21 +1050,21 @@ framebufferUpdate: function() { } } return ret; -}, +}; -/* - * FramebufferUpdate encodings - */ +// +// FramebufferUpdate encodings +// -display_raw: function () { +encHandlers.RAW = function display_raw() { //Util.Debug(">> display_raw"); - var RQ = RFB.RQ, FBU = RFB.FBU, cur_y, cur_height; + var cur_y, cur_height; if (FBU.lines === 0) { FBU.lines = FBU.height; } - FBU.bytes = FBU.width * RFB.fb_Bpp; // At least a line + FBU.bytes = FBU.width * fb_Bpp; // At least a line if (RQ.length < FBU.bytes) { //Util.Debug(" waiting for " + // (FBU.bytes - RQ.length) + " RAW bytes"); @@ -693,24 +1072,24 @@ display_raw: function () { } cur_y = FBU.y + (FBU.height - FBU.lines); cur_height = Math.min(FBU.lines, - Math.floor(RQ.length/(FBU.width * RFB.fb_Bpp))); - Canvas.blitImage(FBU.x, cur_y, FBU.width, cur_height, RQ, 0); - RQ.shiftBytes(FBU.width * cur_height * RFB.fb_Bpp); + Math.floor(RQ.length/(FBU.width * fb_Bpp))); + canvas.blitImage(FBU.x, cur_y, FBU.width, cur_height, RQ, 0); + RQ.shiftBytes(FBU.width * cur_height * fb_Bpp); FBU.lines -= cur_height; if (FBU.lines > 0) { - FBU.bytes = FBU.width * RFB.fb_Bpp; // At least another line + FBU.bytes = FBU.width * fb_Bpp; // At least another line } else { FBU.rects -= 1; FBU.bytes = 0; } return true; -}, +}; -display_copy_rect: function () { +encHandlers.COPYRECT = function display_copy_rect() { //Util.Debug(">> display_copy_rect"); - var RQ = RFB.RQ, FBU = RFB.FBU, old_x, old_y; + var old_x, old_y; if (RQ.length < 4) { //Util.Debug(" waiting for " + @@ -719,52 +1098,52 @@ display_copy_rect: function () { } old_x = RQ.shift16(); old_y = RQ.shift16(); - Canvas.copyImage(old_x, old_y, FBU.x, FBU.y, FBU.width, FBU.height); + canvas.copyImage(old_x, old_y, FBU.x, FBU.y, FBU.width, FBU.height); FBU.rects -= 1; FBU.bytes = 0; return true; -}, +}; + +encHandlers.RRE = function display_rre() { + //Util.Debug(">> display_rre (" + RQ.length + " bytes)"); + var color, x, y, width, height, chunk; -display_rre: function () { - //Util.Debug(">> display_rre (" + RFB.RQ.length + " bytes)"); - var RQ = RFB.RQ, FBU = RFB.FBU, color, x, y, width, height, chunk; if (FBU.subrects === 0) { - if (RQ.length < 4 + RFB.fb_Bpp) { + if (RQ.length < 4 + fb_Bpp) { //Util.Debug(" waiting for " + - // (4 + RFB.fb_Bpp - RQ.length) + " RRE bytes"); + // (4 + fb_Bpp - RQ.length) + " RRE bytes"); return false; } FBU.subrects = RQ.shift32(); - color = RQ.shiftBytes(RFB.fb_Bpp); // Background - Canvas.fillRect(FBU.x, FBU.y, FBU.width, FBU.height, color); + color = RQ.shiftBytes(fb_Bpp); // Background + canvas.fillRect(FBU.x, FBU.y, FBU.width, FBU.height, color); } - while ((FBU.subrects > 0) && (RQ.length >= (RFB.fb_Bpp + 8))) { - color = RQ.shiftBytes(RFB.fb_Bpp); + while ((FBU.subrects > 0) && (RQ.length >= (fb_Bpp + 8))) { + color = RQ.shiftBytes(fb_Bpp); x = RQ.shift16(); y = RQ.shift16(); width = RQ.shift16(); height = RQ.shift16(); - Canvas.fillRect(FBU.x + x, FBU.y + y, width, height, color); + canvas.fillRect(FBU.x + x, FBU.y + y, width, height, color); FBU.subrects -= 1; } //Util.Debug(" display_rre: rects: " + FBU.rects + // ", FBU.subrects: " + FBU.subrects); if (FBU.subrects > 0) { - chunk = Math.min(RFB.rre_chunk, FBU.subrects); - FBU.bytes = (RFB.fb_Bpp + 8) * chunk; + chunk = Math.min(rre_chunk_sz, FBU.subrects); + FBU.bytes = (fb_Bpp + 8) * chunk; } else { FBU.rects -= 1; FBU.bytes = 0; } //Util.Debug("<< display_rre, FBU.bytes: " + FBU.bytes); return true; -}, +}; -display_hextile: function() { +encHandlers.HEXTILE = function display_hextile() { //Util.Debug(">> display_hextile"); - var RQ = RFB.RQ, FBU = RFB.FBU, - subencoding, subrects, idx, tile, color, cur_tile, + var subencoding, subrects, idx, tile, color, cur_tile, tile_x, x, w, tile_y, y, h, xy, s, sx, sy, wh, sw, sh; if (FBU.tiles === 0) { @@ -783,7 +1162,7 @@ display_hextile: function() { } subencoding = RQ[0]; // Peek if (subencoding > 30) { // Raw - RFB.updateState('failed', + updateState('failed', "Disconnected: illegal hextile subencoding " + subencoding); //Util.Debug("RQ.slice(0,30):" + RQ.slice(0,30)); return false; @@ -800,13 +1179,13 @@ display_hextile: function() { /* Figure out how much we are expecting */ if (subencoding & 0x01) { // Raw //Util.Debug(" Raw subencoding"); - FBU.bytes += w * h * RFB.fb_Bpp; + FBU.bytes += w * h * fb_Bpp; } else { if (subencoding & 0x02) { // Background - FBU.bytes += RFB.fb_Bpp; + FBU.bytes += fb_Bpp; } if (subencoding & 0x04) { // Foreground - FBU.bytes += RFB.fb_Bpp; + FBU.bytes += fb_Bpp; } if (subencoding & 0x08) { // AnySubrects FBU.bytes += 1; // Since we aren't shifting it off @@ -817,7 +1196,7 @@ display_hextile: function() { } subrects = RQ[FBU.bytes-1]; // Peek if (subencoding & 0x10) { // SubrectsColoured - FBU.bytes += subrects * (RFB.fb_Bpp + 2); + FBU.bytes += subrects * (fb_Bpp + 2); } else { FBU.bytes += subrects * 2; } @@ -846,28 +1225,28 @@ display_hextile: function() { /* Weird: ignore blanks after RAW */ Util.Debug(" Ignoring blank after RAW"); } else { - Canvas.fillRect(x, y, w, h, FBU.background); + canvas.fillRect(x, y, w, h, FBU.background); } } else if (FBU.subencoding & 0x01) { // Raw - Canvas.blitImage(x, y, w, h, RQ, idx); + canvas.blitImage(x, y, w, h, RQ, idx); } else { if (FBU.subencoding & 0x02) { // Background - FBU.background = RQ.slice(idx, idx + RFB.fb_Bpp); - idx += RFB.fb_Bpp; + FBU.background = RQ.slice(idx, idx + fb_Bpp); + idx += fb_Bpp; } if (FBU.subencoding & 0x04) { // Foreground - FBU.foreground = RQ.slice(idx, idx + RFB.fb_Bpp); - idx += RFB.fb_Bpp; + FBU.foreground = RQ.slice(idx, idx + fb_Bpp); + idx += fb_Bpp; } - tile = Canvas.getTile(x, y, w, h, FBU.background); + tile = canvas.getTile(x, y, w, h, FBU.background); if (FBU.subencoding & 0x08) { // AnySubrects subrects = RQ[idx]; idx += 1; for (s = 0; s < subrects; s += 1) { if (FBU.subencoding & 0x10) { // SubrectsColoured - color = RQ.slice(idx, idx + RFB.fb_Bpp); - idx += RFB.fb_Bpp; + color = RQ.slice(idx, idx + fb_Bpp); + idx += fb_Bpp; } else { color = FBU.foreground; } @@ -881,10 +1260,10 @@ display_hextile: function() { sw = (wh >> 4) + 1; sh = (wh & 0x0f) + 1; - Canvas.setSubTile(tile, sx, sy, sw, sh, color); + canvas.setSubTile(tile, sx, sy, sw, sh, color); } } - Canvas.putTile(tile); + canvas.putTile(tile); } RQ.shiftBytes(FBU.bytes); FBU.lastsubencoding = FBU.subencoding; @@ -898,13 +1277,12 @@ display_hextile: function() { //Util.Debug("<< display_hextile"); return true; -}, +}; -display_tight_png: function() { +encHandlers.TIGHT_PNG = function display_tight_png() { //Util.Debug(">> display_tight_png"); - var RQ = RFB.RQ, FBU = RFB.FBU, - ctl, cmode, clength, getCLength, color, img; + var ctl, cmode, clength, getCLength, color, img; //Util.Debug(" FBU.rects: " + FBU.rects); //Util.Debug(" RQ.length: " + RQ.length); //Util.Debug(" RQ.slice(0,20): " + RQ.slice(0,20)); @@ -940,7 +1318,7 @@ display_tight_png: function() { } switch (cmode) { // fill uses fb_depth because TPIXELs drop the padding byte - case "fill": FBU.bytes += RFB.fb_depth; break; // TPIXEL + case "fill": FBU.bytes += fb_depth; break; // TPIXEL case "jpeg": FBU.bytes += 3; break; // max clength case "png": FBU.bytes += 3; break; // max clength } @@ -950,15 +1328,15 @@ display_tight_png: function() { return false; } - //Util.Debug(" RQ.slice(0,20): " + RFB.RQ.slice(0,20) + " (" + RFB.RQ.length + ")"); + //Util.Debug(" RQ.slice(0,20): " + RQ.slice(0,20) + " (" + RQ.length + ")"); //Util.Debug(" cmode: " + cmode); // Determine FBU.bytes switch (cmode) { case "fill": RQ.shift8(); // shift off ctl - color = RQ.shiftBytes(RFB.fb_depth); - Canvas.fillRect(FBU.x, FBU.y, FBU.width, FBU.height, color); + color = RQ.shiftBytes(fb_depth); + canvas.fillRect(FBU.x, FBU.y, FBU.width, FBU.height, color); break; case "jpeg": case "png": @@ -973,10 +1351,10 @@ display_tight_png: function() { //Util.Debug(" png, RQ.length: " + RQ.length + ", clength[0]: " + clength[0] + ", clength[1]: " + clength[1]); RQ.shiftBytes(1 + clength[0]); // shift off ctl + compact length img = new Image(); - img.onload = RFB.scan_tight_imgs; + img.onload = scan_tight_imgs; FBU.imgs.push([img, FBU.x, FBU.y]); img.src = "data:image/" + cmode + - RFB.extract_data_uri(RQ.shiftBytes(clength[1])); + extract_data_uri(RQ.shiftBytes(clength[1])); img = null; break; } @@ -986,88 +1364,90 @@ display_tight_png: function() { //Util.Debug(" ending RQ.slice(0,20): " + RQ.slice(0,20)); //Util.Debug("<< display_tight_png"); return true; -}, +}; -extract_data_uri : function (arr) { +extract_data_uri = function(arr) { //var i, stra = []; //for (i=0; i< arr.length; i += 1) { // stra.push(String.fromCharCode(arr[i])); //} //return "," + escape(stra.join('')); return ";base64," + Base64.encode(arr); -}, +}; -scan_tight_imgs : function () { - var img, imgs; - if (RFB.state === 'normal') { - imgs = RFB.FBU.imgs; +scan_tight_imgs = function() { + var img, imgs, ctx; + ctx = canvas.getContext(); + if (rfb_state === 'normal') { + imgs = FBU.imgs; while ((imgs.length > 0) && (imgs[0][0].complete)) { img = imgs.shift(); - Canvas.ctx.drawImage(img[0], img[1], img[2]); + ctx.drawImage(img[0], img[1], img[2]); } - setTimeout(RFB.scan_tight_imgs, RFB.scan_imgs_rate); + setTimeout(scan_tight_imgs, scan_imgs_rate); } -}, +}; -set_desktopsize : function () { +encHandlers.DesktopSize = function set_desktopsize() { Util.Debug(">> set_desktopsize"); - RFB.fb_width = RFB.FBU.width; - RFB.fb_height = RFB.FBU.height; - Canvas.clear(); - Canvas.resize(RFB.fb_width, RFB.fb_height); - RFB.timing.fbu_rt_start = (new Date()).getTime(); + fb_width = FBU.width; + fb_height = FBU.height; + canvas.clear(); + canvas.resize(fb_width, fb_height); + timing.fbu_rt_start = (new Date()).getTime(); // Send a new non-incremental request - RFB.send_array(RFB.fbUpdateRequest(0)); + send_array(fbUpdateRequest(0)); - RFB.FBU.bytes = 0; - RFB.FBU.rects -= 1; + FBU.bytes = 0; + FBU.rects -= 1; Util.Debug("<< set_desktopsize"); return true; -}, +}; -set_cursor: function () { +encHandlers.Cursor = function set_cursor() { var x, y, w, h, pixelslength, masklength; //Util.Debug(">> set_cursor"); - x = RFB.FBU.x; // hotspot-x - y = RFB.FBU.y; // hotspot-y - w = RFB.FBU.width; - h = RFB.FBU.height; + x = FBU.x; // hotspot-x + y = FBU.y; // hotspot-y + w = FBU.width; + h = FBU.height; - pixelslength = w * h * RFB.fb_Bpp; + pixelslength = w * h * fb_Bpp; masklength = Math.floor((w + 7) / 8) * h; - if (RFB.RQ.length < (pixelslength + masklength)) { + if (RQ.length < (pixelslength + masklength)) { //Util.Debug("waiting for cursor encoding bytes"); - RFB.FBU.bytes = pixelslength + masklength; + FBU.bytes = pixelslength + masklength; return false; } //Util.Debug(" set_cursor, x: " + x + ", y: " + y + ", w: " + w + ", h: " + h); - Canvas.changeCursor(RFB.RQ.shiftBytes(pixelslength), - RFB.RQ.shiftBytes(masklength), - x, y, w, h); + canvas.changeCursor(RQ.shiftBytes(pixelslength), + RQ.shiftBytes(masklength), + x, y, w, h); - RFB.FBU.bytes = 0; - RFB.FBU.rects -= 1; + FBU.bytes = 0; + FBU.rects -= 1; //Util.Debug("<< set_cursor"); return true; -}, +}; -set_jpeg_quality : function () { - Util.Debug(">> set_jpeg_quality"); -}, -set_compress_level: function () { - Util.Debug(">> set_compress_level"); -}, +encHandlers.JPEG_quality_lo = function set_jpeg_quality() { + Util.Error("Server sent jpeg_quality pseudo-encoding"); +}; + +encHandlers.compress_lo = function set_compress_level() { + Util.Error("Server sent compress level pseudo-encoding"); +}; /* * Client message routines */ -pixelFormat: function () { +pixelFormat = function() { //Util.Debug(">> pixelFormat"); var arr; arr = [0]; // msg-type @@ -1075,10 +1455,10 @@ pixelFormat: function () { arr.push8(0); // padding arr.push8(0); // padding - arr.push8(RFB.fb_Bpp * 8); // bits-per-pixel - arr.push8(RFB.fb_depth * 8); // depth + arr.push8(fb_Bpp * 8); // bits-per-pixel + arr.push8(fb_depth * 8); // depth arr.push8(0); // little-endian - arr.push8(RFB.true_color); // true-color + arr.push8(conf.true_color ? 1 : 0); // true-color arr.push16(255); // red-max arr.push16(255); // green-max @@ -1092,22 +1472,19 @@ pixelFormat: function () { arr.push8(0); // padding //Util.Debug("<< pixelFormat"); return arr; -}, +}; -fixColourMapEntries: function () { -}, - -clientEncodings: function () { +clientEncodings = function() { //Util.Debug(">> clientEncodings"); var arr, i, encList = []; - for (i=0; i> fbUpdateRequest"); if (!x) { x = 0; } if (!y) { y = 0; } - if (!xw) { xw = RFB.fb_width; } - if (!yw) { yw = RFB.fb_height; } + if (!xw) { xw = fb_width; } + if (!yw) { yw = fb_height; } var arr; arr = [3]; // msg-type arr.push8(incremental); @@ -1137,9 +1514,9 @@ fbUpdateRequest: function (incremental, x, y, xw, yw) { arr.push16(yw); //Util.Debug("<< fbUpdateRequest"); return arr; -}, +}; -keyEvent: function (keysym, down) { +keyEvent = function(keysym, down) { //Util.Debug(">> keyEvent, keysym: " + keysym + ", down: " + down); var arr; arr = [4]; // msg-type @@ -1148,21 +1525,21 @@ keyEvent: function (keysym, down) { arr.push32(keysym); //Util.Debug("<< keyEvent"); return arr; -}, +}; -pointerEvent: function (x, y) { +pointerEvent = function(x, y) { //Util.Debug(">> pointerEvent, x,y: " + x + "," + y + - // " , mask: " + RFB.mouse_buttonMask); + // " , mask: " + mouse_buttonMask); var arr; arr = [5]; // msg-type - arr.push8(RFB.mouse_buttonMask); + arr.push8(mouse_buttonMask); arr.push16(x); arr.push16(y); //Util.Debug("<< pointerEvent"); return arr; -}, +}; -clientCutText: function (text) { +clientCutText = function(text) { //Util.Debug(">> clientCutText"); var arr; arr = [6]; // msg-type @@ -1173,456 +1550,107 @@ clientCutText: function (text) { arr.pushStr(text); //Util.Debug("<< clientCutText:" + arr); return arr; -}, +}; -/* - * Utility routines - */ -encode_message: function(arr) { - if (RFB.b64encode) { - /* base64 encode */ - RFB.SQ = RFB.SQ + Base64.encode(arr); +// +// Public API interface functions +// + +that.init = function () { + + init_vars(); + + /* Check web-socket-js if no builtin WebSocket support */ + if (VNC_native_ws) { + Util.Info("Using native WebSockets"); + updateState('loaded', 'noVNC ready (using native WebSockets)'); } else { - /* UTF-8 encode. 0 -> 256 to avoid WebSockets framing */ - RFB.SQ = RFB.SQ + arr.map(function (num) { - if (num === 0) { - return String.fromCharCode(256); - } else { - return String.fromCharCode(num); - } - } ).join(''); - } -}, - -decode_message: function(data) { - var i, length, RQ = RFB.RQ; - //Util.Debug(">> decode_message: " + data); - if (RFB.b64encode) { - /* base64 decode */ - RFB.RQ = RFB.RQ.concat(Base64.decode(data, 0)); - } else { - /* UTF-8 decode. 256 -> 0 to WebSockets framing */ - length = data.length; - for (i=0; i < length; i += 1) { - RQ.push(data.charCodeAt(i) % 256); - } - } - //Util.Debug(">> decode_message, RQ: " + RFB.RQ); -}, - -recv_message: function(e) { - //Util.Debug(">> recv_message"); - - try { - RFB.decode_message(e.data); - if (RFB.RQ.length > 0) { - RFB.handle_message(); + Util.Warn("Using web-socket-js flash bridge"); + if ((! Util.Flash) || + (Util.Flash.version < 9)) { + updateState('fatal', "WebSockets or Adobe Flash is required"); + } else if (document.location.href.substr(0, 7) === "file://") { + updateState('fatal', + "'file://' URL is incompatible with Adobe Flash"); } else { - Util.Debug("Ignoring empty message"); - } - } catch (exc) { - if (typeof exc.stack !== 'undefined') { - Util.Warn("recv_message, caught exception: " + exc.stack); - } else if (typeof exc.description !== 'undefined') { - Util.Warn("recv_message, caught exception: " + exc.description); - } else { - Util.Warn("recv_message, caught exception:" + exc); - } - if (typeof exc.name !== 'undefined') { - RFB.updateState('failed', exc.name + ": " + exc.message); - } else { - RFB.updateState('failed', exc); + updateState('loaded', 'noVNC ready (using Flash WebSockets emulation)'); } } - //Util.Debug("<< recv_message"); -}, +}; -handle_message: function () { - //Util.Debug("RQ.slice(0,20): " + RFB.RQ.slice(0,20) + " (" + RFB.RQ.length + ")"); - switch (RFB.state) { - case 'disconnected': - Util.Error("Got data while disconnected"); - break; - case 'failed': - Util.Warn("Giving up!"); - RFB.disconnect(); - break; - case 'normal': - if ((RFB.state === 'normal') && (RFB.RQ.length > 0)) { - if (RFB.normal_msg()) { - // true means we can continue processing - Util.Debug("More data to process"); - // Give other events a chance to run - setTimeout(RFB.handle_message, 10); - } - } - break; - default: - RFB.init_msg(); - break; - } -}, +that.connect = function(host, port, password) { + //Util.Debug(">> connect"); -send_string: function (str) { - //Util.Debug(">> send_string: " + str); - RFB.send_array(str.split('').map( - function (chr) { return chr.charCodeAt(0); } ) ); -}, - -send_array: function (arr) { - //Util.Debug(">> send_array: " + arr); - RFB.encode_message(arr); - if (RFB.ws.bufferedAmount === 0) { - //Util.Debug("arr: " + arr); - //Util.Debug("RFB.SQ: " + RFB.SQ); - RFB.ws.send(RFB.SQ); - RFB.SQ = ""; - } else { - Util.Debug("Delaying send"); - } -}, - -DES: function (password, challenge) { - var i, passwd, response; - passwd = []; - response = challenge.slice(); - for (i=0; i < password.length; i += 1) { - passwd.push(password.charCodeAt(i)); + // Make sure we have done init checks + if ((rfb_state !== 'loaded') && (rfb_state !== 'fatal')) { + that.init(); } - DES.setKeys(passwd); - DES.encrypt(response, 0, response, 0); - DES.encrypt(response, 8, response, 8); - return response; -}, + rfb_host = host; + rfb_port = port; + rfb_password = (password !== undefined) ? password : ""; -flushClient: function () { - if (RFB.mouse_arr.length > 0) { - //RFB.send_array(RFB.mouse_arr.concat(RFB.fbUpdateRequest(1))); - RFB.send_array(RFB.mouse_arr); - setTimeout(function() { - RFB.send_array(RFB.fbUpdateRequest(1)); - }, 50); - - RFB.mouse_arr = []; - return true; - } else { - return false; - } -}, - -checkEvents: function () { - var now; - if (RFB.state === 'normal') { - if (! RFB.flushClient()) { - now = new Date().getTime(); - if (now > RFB.last_req + RFB.req_rate) { - RFB.last_req = now; - RFB.send_array(RFB.fbUpdateRequest(1)); - } - } - } - setTimeout(RFB.checkEvents, RFB.check_rate); -}, - -keyPress: function (keysym, down) { - var arr; - arr = RFB.keyEvent(keysym, down); - arr = arr.concat(RFB.fbUpdateRequest(1)); - RFB.send_array(arr); -}, - -mouseButton: function(x, y, down, bmask) { - if (down) { - RFB.mouse_buttonMask |= bmask; - } else { - RFB.mouse_buttonMask ^= bmask; - } - RFB.mouse_arr = RFB.mouse_arr.concat( RFB.pointerEvent(x, y) ); - RFB.flushClient(); -}, - -mouseMove: function(x, y) { - //Util.Debug('>> mouseMove ' + x + "," + y); - RFB.mouse_arr = RFB.mouse_arr.concat( RFB.pointerEvent(x, y) ); -}, - -clipboardCopyTo: function (text) { - Util.Debug(">> clipboardCopyTo stub"); - // Stub -}, - -externalUpdateState: function(state, msg) { - Util.Debug(">> externalUpdateState stub"); - // Stub -}, - -/* - * Running states: - * disconnected - idle state - * normal - connected - * - * Page states: - * loaded - page load, equivalent to disconnected - * connect - starting initialization - * password - waiting for password - * failed - abnormal transition to disconnected - * fatal - failed to load page, or fatal error - * - * VNC initialization states: - * ProtocolVersion - * Security - * Authentication - * SecurityResult - * ServerInitialization - */ -updateState: function(state, statusMsg) { - var func, cmsg, oldstate = RFB.state; - if (state === oldstate) { - /* Already here, ignore */ - Util.Debug("Already in state '" + state + "', ignoring."); + if ((!rfb_host) || (!rfb_port)) { + updateState('failed', "Must set host and port"); return; } - if (oldstate === 'fatal') { - Util.Error("Fatal error, cannot continue"); - } + updateState('connect'); + //Util.Debug("<< connect"); - if ((state === 'failed') || (state === 'fatal')) { - func = Util.Error; - } else { - func = Util.Warn; - } +}; - cmsg = typeof(statusMsg) !== 'undefined' ? (" Msg: " + statusMsg) : ""; - func("New state '" + state + "', was '" + oldstate + "'." + cmsg); +that.disconnect = function() { + //Util.Debug(">> disconnect"); + updateState('disconnected', 'Disconnected'); + //Util.Debug("<< disconnect"); +}; - if ((oldstate === 'failed') && (state === 'disconnected')) { - // Do disconnect action, but stay in failed state. - RFB.state = 'failed'; - } else { - RFB.state = state; - } +that.sendPassword = function(passwd) { + rfb_password = passwd; + rfb_state = "Authentication"; + setTimeout(init_msg, 1); +}; - switch (state) { - case 'loaded': - case 'disconnected': +that.sendCtrlAltDel = function() { + if (rfb_state !== "normal") { return false; } + Util.Info("Sending Ctrl-Alt-Del"); + var arr = []; + arr = arr.concat(keyEvent(0xFFE3, 1)); // Control + arr = arr.concat(keyEvent(0xFFE9, 1)); // Alt + arr = arr.concat(keyEvent(0xFFFF, 1)); // Delete + arr = arr.concat(keyEvent(0xFFFF, 0)); // Delete + arr = arr.concat(keyEvent(0xFFE9, 0)); // Alt + arr = arr.concat(keyEvent(0xFFE3, 0)); // Control + arr = arr.concat(fbUpdateRequest(1)); + send_array(arr); +}; - if (RFB.sendID) { - clearInterval(RFB.sendID); - RFB.sendID = null; - } +that.clipboardPasteFrom = function(text) { + if (rfb_state !== "normal") { return; } + //Util.Debug(">> clipboardPasteFrom: " + text.substr(0,40) + "..."); + send_array(clientCutText(text)); + //Util.Debug("<< clipboardPasteFrom"); +}; - if (RFB.ws) { - if (RFB.ws.readyState === WebSocket.OPEN) { - RFB.ws.close(); - } - RFB.ws.onmessage = function (e) { return; }; - } +that.testMode = function(override_send_array) { + // Overridable internal functions for testing + test_mode = true; + send_array = override_send_array; + that.recv_message = recv_message; // Expose it - if (Canvas.ctx) { - Canvas.stop(); - if (! /__debug__$/i.test(document.location.href)) { - Canvas.clear(); - } - } - - RFB.show_timings(); - - break; + checkEvents = function () { /* Stub Out */ }; + that.connect = function(host, port, password) { + rfb_host = host; + rfb_port = port; + rfb_password = password; + updateState('ProtocolVersion', "Starting VNC handshake"); + }; +}; - case 'connect': - RFB.init_vars(); +return constructor(); // Return the public API interface - if ((RFB.ws) && (RFB.ws.readyState === WebSocket.OPEN)) { - RFB.ws.close(); - } - RFB.init_ws(); // onopen transitions to 'ProtocolVersion' - - break; - - - case 'password': - // Ignore password state by default - break; - - - case 'normal': - if ((oldstate === 'disconnected') || (oldstate === 'failed')) { - Util.Error("Invalid transition from 'disconnected' or 'failed' to 'normal'"); - } - - break; - - - case 'failed': - if (oldstate === 'disconnected') { - Util.Error("Invalid transition from 'disconnected' to 'failed'"); - } - if (oldstate === 'normal') { - Util.Error("Error while connected."); - } - if (oldstate === 'init') { - Util.Error("Error while initializing."); - } - - if ((RFB.ws) && (RFB.ws.readyState === WebSocket.OPEN)) { - RFB.ws.close(); - } - // Make sure we transition to disconnected - setTimeout(function() { RFB.updateState('disconnected'); }, 50); - - break; - - - default: - // Invalid state transition - - } - - if ((oldstate === 'failed') && (state === 'disconnected')) { - // Leave the failed message - RFB.externalUpdateState(state); - } else { - RFB.externalUpdateState(state, statusMsg); - } -}, - -update_timings: function() { - var now, timing = RFB.timing, offset; - now = (new Date()).getTime(); - timing.history.push([now, - timing.h_fbus, - timing.h_rects, - timing.h_bytes, - timing.h_pixels]); - timing.h_fbus = 0; - timing.h_rects = 0; - timing.h_bytes = 0; - timing.h_pixels = 0; - if ((RFB.state !== 'disconnected') && (RFB.state !== 'failed')) { - // Try for every second - offset = (now - timing.history_start) % 1000; - if (offset < 500) { - setTimeout(RFB.update_timings, 1000 - offset); - } else { - setTimeout(RFB.update_timings, 2000 - offset); - } - } -}, - -show_timings: function() { - var i, timing = RFB.timing, history, msg, - delta, tot_time = 0, tot_fbus = 0, tot_rects = 0, - tot_bytes = 0, tot_pixels = 0; - if (timing.history_start === 0) { return; } - //Util.Debug(">> show_timings"); - RFB.update_timings(); // Final accumulate - msg = "\nTimings\n"; - msg += " time: fbus,rects,bytes,pixels\n"; - for (i=0; i < timing.history.length; i += 1) { - history = timing.history[i]; - delta = ((history[0]-timing.history_start)/1000); - tot_time = delta; - tot_fbus += history[1]; - tot_rects += history[2]; - tot_bytes += history[3]; - tot_pixels += history[4]; - - msg += " " + delta.toFixed(3); - msg += ": " + history.slice(1) + "\n"; - } - msg += "\nTotals:\n"; - msg += " time: fbus,rects,bytes,pixels\n"; - msg += " " + tot_time.toFixed(3); - msg += ": " + tot_fbus + "," + tot_rects; - msg += "," + tot_bytes + "," + tot_pixels; - Util.Info(msg); - //Util.Debug("<< show_timings"); -}, - -/* - * Setup routines - */ - -init_ws: function () { - //Util.Debug(">> init_ws"); - - var uri = "", vars = []; - if (RFB.encrypt) { - uri = "wss://"; - } else { - uri = "ws://"; - } - uri += RFB.host + ":" + RFB.port + "/"; - if (RFB.b64encode) { - vars.push("b64encode"); - } - if (vars.length > 0) { - uri += "?" + vars.join("&"); - } - Util.Info("connecting to " + uri); - RFB.ws = new WebSocket(uri); - - RFB.ws.onmessage = RFB.recv_message; - RFB.ws.onopen = function(e) { - Util.Debug(">> WebSocket.onopen"); - if (RFB.state === "connect") { - RFB.updateState('ProtocolVersion', "Starting VNC handshake"); - } else { - RFB.updateState('failed', "Got unexpected WebSockets connection"); - } - Util.Debug("<< WebSocket.onopen"); - }; - RFB.ws.onclose = function(e) { - Util.Debug(">> WebSocket.onclose"); - if (RFB.state === 'normal') { - RFB.updateState('failed', 'Server disconnected'); - } else if (RFB.state === 'ProtocolVersion') { - RFB.updateState('failed', 'Failed to connect to server'); - } else { - RFB.updateState('disconnected', 'VNC disconnected'); - } - Util.Debug("<< WebSocket.onclose"); - }; - RFB.ws.onerror = function(e) { - Util.Debug(">> WebSocket.onerror"); - RFB.updateState('failed', "WebSocket error"); - Util.Debug("<< WebSocket.onerror"); - }; - - setTimeout(function () { - if (RFB.ws.readyState === WebSocket.CONNECTING) { - RFB.updateState('failed', "Connect timeout"); - } - }, RFB.connectTimeout); - - //Util.Debug("<< init_ws"); -}, - -init_vars: function () { - /* Reset state */ - RFB.cuttext = 'none'; - RFB.ct_length = 0; - RFB.RQ = []; - RFB.SQ = ""; - RFB.FBU.rects = 0; - RFB.FBU.subrects = 0; // RRE and HEXTILE - RFB.FBU.lines = 0; // RAW - RFB.FBU.tiles = 0; // HEXTILE - RFB.FBU.imgs = []; // TIGHT_PNG image queue - RFB.mouse_buttonmask = 0; - RFB.mouse_arr = []; - - RFB.timing.history_start = 0; - RFB.timing.history = []; - RFB.timing.h_fbus = 0; - RFB.timing.h_rects = 0; - RFB.timing.h_bytes = 0; - RFB.timing.h_pixels = 0; -} - -}; /* End of RFB */ +} // End of RFB() diff --git a/include/util.js b/include/util.js index 938506ab..a355f7bd 100644 --- a/include/util.js +++ b/include/util.js @@ -14,41 +14,6 @@ var Util = {}, $; -/* - * Logging/debug routines - */ - -Util.init_logging = function (level) { - if (typeof window.console === "undefined") { - if (typeof window.opera !== "undefined") { - window.console = { - 'log' : window.opera.postError, - 'warn' : window.opera.postError, - 'error': window.opera.postError }; - } else { - window.console = { - 'log' : function(m) {}, - 'warn' : function(m) {}, - 'error': function(m) {}}; - } - } - - Util.Debug = Util.Info = Util.Warn = Util.Error = function (msg) {}; - switch (level) { - case 'debug': Util.Debug = function (msg) { console.log(msg); }; - case 'info': Util.Info = function (msg) { console.log(msg); }; - case 'warn': Util.Warn = function (msg) { console.warn(msg); }; - case 'error': Util.Error = function (msg) { console.error(msg); }; - break; - default: - throw("invalid logging type '" + level + "'"); - } -}; -// Initialize logging level -Util.init_logging( (document.location.href.match( - /logging=([A-Za-z0-9\._\-]*)/) || - ['', 'warn'])[1] ); - /* * Simple DOM selector by ID */ @@ -138,6 +103,42 @@ Array.prototype.shiftBytes = function (len) { * ------------------------------------------------------ */ +/* + * Logging/debug routines + */ + +Util.init_logging = function (level) { + if (typeof window.console === "undefined") { + if (typeof window.opera !== "undefined") { + window.console = { + 'log' : window.opera.postError, + 'warn' : window.opera.postError, + 'error': window.opera.postError }; + } else { + window.console = { + 'log' : function(m) {}, + 'warn' : function(m) {}, + 'error': function(m) {}}; + } + } + + Util.Debug = Util.Info = Util.Warn = Util.Error = function (msg) {}; + switch (level) { + case 'debug': Util.Debug = function (msg) { console.log(msg); }; + case 'info': Util.Info = function (msg) { console.log(msg); }; + case 'warn': Util.Warn = function (msg) { console.warn(msg); }; + case 'error': Util.Error = function (msg) { console.error(msg); }; + case 'none': + break; + default: + throw("invalid logging type '" + level + "'"); + } +}; +// Initialize logging level +Util.init_logging( (document.location.href.match( + /logging=([A-Za-z0-9\._\-]*)/) || + ['', 'warn'])[1] ); + Util.dirObj = function (obj, depth, parent) { var i, msg = "", val = ""; if (! depth) { depth=2; } @@ -168,7 +169,7 @@ Util.getQueryVar = function(name, defVal) { }; // Set defaults for Crockford style function namespaces -Util.conf_default = function(cfg, api, v, val) { +Util.conf_default = function(cfg, api, v, val, force_bool) { if (typeof cfg[v] === 'undefined') { cfg[v] = val; } @@ -181,6 +182,13 @@ Util.conf_default = function(cfg, api, v, val) { // Default setter if (typeof api['set_' + v] === 'undefined') { api['set_' + v] = function (val) { + if (force_bool) { + if ((!val) || (val in {'0':1, 'no':1, 'false':1})) { + val = false; + } else { + val = true; + } + } cfg[v] = val; }; } @@ -311,10 +319,9 @@ Util.createCookie = function(name,value,days) { }; Util.readCookie = function(name, defaultValue) { - var nameEQ = name + "="; - var ca = document.cookie.split(';'); - for(var i=0;i < ca.length;i++) { - var c = ca[i]; + var i, c, nameEQ = name + "=", ca = document.cookie.split(';'); + for(i=0; i < ca.length; i += 1) { + c = ca[i]; while (c.charAt(0) === ' ') { c = c.substring(1,c.length); } if (c.indexOf(nameEQ) === 0) { return c.substring(nameEQ.length,c.length); } } @@ -330,7 +337,7 @@ Util.eraseCookie = function(name) { */ Util.getStylesheets = function() { var i, links, sheets = []; links = document.getElementsByTagName("link"); - for (i = 0; i < links.length; i++) { + for (i = 0; i < links.length; i += 1) { if (links[i].title && links[i].rel.toUpperCase().indexOf("STYLESHEET") > -1) { sheets.push(links[i]); @@ -346,19 +353,15 @@ Util.selectStylesheet = function(sheet) { if (typeof sheet === 'undefined') { sheet = 'default'; } - for (i=0; i < sheets.length; i++) { + for (i=0; i < sheets.length; i += 1) { link = sheets[i]; if (link.title === sheet) { Util.Debug("Using stylesheet " + sheet); link.disabled = false; } else { - Util.Debug("Skipping stylesheet " + link.title); + //Util.Debug("Skipping stylesheet " + link.title); link.disabled = true; } } return sheet; }; - -// call once to disable alternates and get around webkit bug -Util.selectStylesheet(null); - diff --git a/tests/canvas.html b/tests/canvas.html index e762acdd..87e77817 100644 --- a/tests/canvas.html +++ b/tests/canvas.html @@ -46,14 +46,16 @@ } function test_functions () { - var img, x, y; - Canvas.fillRect(0, 0, Canvas.c_wx, Canvas.c_wy, [240,240,240]); + 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]); - Canvas.blitStringImage("data:image/png;base64," + face64, 150, 10); + canvas.blitStringImage("data:image/png;base64," + face64, 150, 10); var himg = new Image(); himg.onload = function () { - Canvas.ctx.drawImage(himg, 200, 40); }; + ctx.drawImage(himg, 200, 40); }; himg.src = "face.png"; /* Test array image data */ @@ -66,15 +68,14 @@ data[(y*50 + x)*4 + 3] = 255; } } - Canvas.blitImage(30, 10, 50, 50, data, 0); + canvas.blitImage(30, 10, 50, 50, data, 0); - //Canvas.prefer_js = false; - img = Canvas.getTile(5,5,16,16,[0,128,128]); - Canvas.putTile(img); + img = canvas.getTile(5,5,16,16,[0,128,128]); + canvas.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 = canvas.getTile(90,15,16,16,[0,0,0]); + canvas.setSubTile(img, 0,0,16,16,[128,128,0]); + canvas.putTile(img); } function begin () { @@ -85,30 +86,35 @@ } function start_delayed () { + var ret; - message("Running test: prefer Javascript"); - Canvas.prefer_js = true; - var time1 = run_test(); - message("prefer Javascript: " + time1 + "ms total, " + - (time1 / iterations) + "ms per frame"); + ret = canvas.set_prefer_js(true); + if (ret) { + message("Running test: prefer Javascript ops"); + var time1 = run_test(); + message("prefer Javascript ops: " + time1 + "ms total, " + + (time1 / iterations) + "ms per frame"); + } else { + message("Could not run: prefer Javascript ops"); + } + canvas.set_prefer_js(false); message("Running test: prefer Canvas ops"); - Canvas.prefer_js = false; var time2 = run_test(); message("prefer Canvas ops: " + time2 + "ms total, " + (time2 / iterations) + "ms per frame"); - Canvas.resize(start_width, start_height, true); + canvas.resize(start_width, start_height, true); test_functions(); $('startButton').disabled = false; - $('startButton').value = "Start"; + $('startButton').value = "Do Performance Test"; } function run_test () { var width, height; width = $('width').value; height = $('height').value; - Canvas.resize(width, height); + canvas.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]; @@ -116,9 +122,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 = canvas.getTile(x, y, w, h, color); + canvas.setSubTile(tile, 0, 0, w, h, color); + canvas.putTile(tile); } } } @@ -129,8 +135,8 @@ window.onload = function() { message("in onload"); $('iterations').value = 10; - Canvas.init('canvas'); - Canvas.resize(start_width, start_height, true); + canvas = Canvas({'target' : 'canvas'}); + canvas.resize(start_width, start_height, true); message("Canvas initialized"); test_functions(); } diff --git a/tests/cursor.html b/tests/cursor.html index d244db10..81fba82e 100644 --- a/tests/cursor.html +++ b/tests/cursor.html @@ -105,10 +105,10 @@ window.onload = function() { debug("onload"); - var cross, cursor, cursor64; + var canvas, cross, cursor, cursor64; - Canvas.init("testcanvas"); - debug("Canvas.init() indicates Data URI cursor support is: " + Canvas.isCursor()); + canvas = new Canvas({'target' : "testcanvas"}); + debug("canvas indicates Data URI cursor support is: " + canvas.get_cursor_uri()); $('button1').style.cursor="url(face.png), default"; diff --git a/tests/input.html b/tests/input.html index f89768ed..43791ed7 100644 --- a/tests/input.html +++ b/tests/input.html @@ -19,6 +19,7 @@ src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'> --> + diff --git a/vnc.html b/vnc.html index 9a4596a5..91559649 100644 --- a/vnc.html +++ b/vnc.html @@ -16,12 +16,12 @@ noVNC example: simple example using default controls
    Loading
    - - + }; + + + diff --git a/vnc_auto.html b/vnc_auto.html index 1d371729..600b09f7 100644 --- a/vnc_auto.html +++ b/vnc_auto.html @@ -7,8 +7,7 @@ Connect parameters are provided in query string: VNC Client - - +