New API. Refactor Canvas and RFB objects.
New API: To use the RFB object, you now must instantiate it (this allows more than one instance of it on the same page). rfb = new RFB(settings); The 'settings' variable is a namespace that contains initial default settings. These can also be set and read using 'rfb.set_FOO()' and 'rfb.get_FOO()' where FOO is the setting name. The current settings are (and defaults) are: - target: the DOM Canvas element to use ('VNC_canvas'). - encrypt: whether to encrypt the connection (false) - true_color: true_color or palette (true) - b64encode: base64 encode the WebSockets data (true) - local_cursor: use local cursor rendering (true if supported) - connectTimeout: milliseconds to wait for connect (2000) - updateState: callback when RFB state changes (none) - clipboardReceive: callback when clipboard data received (none) The parameters to the updateState callback have also changed. The function spec is now updateState(rfb, state, oldstate, msg): - rfb: the RFB object that this state change is for. - state: the new state - oldstate: the previous state - msg: a message associate with the state (not always set). The clipboardReceive spec is clipboardReceive(rfb, text): - rfb: the RFB object that this text is from. - text: the clipboard text received. Changes: - The RFB and Canvas namespaces are now more proper objects. Private implementation is no longer exposed and the public API has been made explicit. Also, instantiation allows more than one VNC connection on the same page (to complete this, DefaultControls will also need this same refactoring). - Added 'none' logging level. - Removed automatic stylesheet selection workaround in util.js and move it to defaultcontrols so that it doesn't interfere with intergration. - Also, some major JSLinting. - Fix input, canvas, and cursor tests to work with new model.
This commit is contained in:
parent
8171f4d818
commit
8db09746b7
13
README.md
13
README.md
|
@ -195,7 +195,7 @@ The client is designed to be easily integrated with existing web
|
||||||
structure and style.
|
structure and style.
|
||||||
|
|
||||||
At a minimum you must include the `vnc.js` and `default_controls.js`
|
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:
|
||||||
|
|
||||||
<head>
|
<head>
|
||||||
<script src='include/vnc.js'></script>
|
<script src='include/vnc.js'></script>
|
||||||
|
@ -203,12 +203,13 @@ scripts and call their load() functions. For example:
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id='vnc'>Loading</div>
|
<div id='vnc'>Loading</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
window.onload = function () {
|
||||||
|
DefaultControls.load('vnc');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
</body>
|
</body>
|
||||||
<script>
|
|
||||||
window.onload = function () {
|
|
||||||
DefaultControls.load('vnc');
|
|
||||||
RFB.load(); };
|
|
||||||
</script>
|
|
||||||
|
|
||||||
See `vnc.html` and `vnc_auto.html` for examples. The file
|
See `vnc.html` and `vnc_auto.html` for examples. The file
|
||||||
`include/plain.css` has a list of stylable elements.
|
`include/plain.css` has a list of stylable elements.
|
||||||
|
|
File diff suppressed because it is too large
Load Diff
|
@ -6,6 +6,7 @@
|
||||||
* See README.md for usage and integration instructions.
|
* See README.md for usage and integration instructions.
|
||||||
*/
|
*/
|
||||||
"use strict";
|
"use strict";
|
||||||
|
/*jslint white: false */
|
||||||
/*global $, Util, RFB, Canvas, VNC_uri_prefix, Element, Fx */
|
/*global $, Util, RFB, Canvas, VNC_uri_prefix, Element, Fx */
|
||||||
|
|
||||||
var DefaultControls = {
|
var DefaultControls = {
|
||||||
|
@ -16,10 +17,6 @@ settingsOpen : false,
|
||||||
load: function(target) {
|
load: function(target) {
|
||||||
var html, i, DC = DefaultControls, sheet, sheets, llevels;
|
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 */
|
/* Populate the 'target' DOM element with default controls */
|
||||||
if (!target) { target = 'vnc'; }
|
if (!target) { target = 'vnc'; }
|
||||||
|
|
||||||
|
@ -61,7 +58,7 @@ load: function(target) {
|
||||||
html += ' <option value="default">default</option>';
|
html += ' <option value="default">default</option>';
|
||||||
sheet = Util.selectStylesheet();
|
sheet = Util.selectStylesheet();
|
||||||
sheets = Util.getStylesheets();
|
sheets = Util.getStylesheets();
|
||||||
for (i = 0; i < sheets.length; i++) {
|
for (i = 0; i < sheets.length; i += 1) {
|
||||||
html += '<option value="' + sheets[i].title + '">' + sheets[i].title + '</option>';
|
html += '<option value="' + sheets[i].title + '">' + sheets[i].title + '</option>';
|
||||||
}
|
}
|
||||||
html += ' </select> Style</li>';
|
html += ' </select> Style</li>';
|
||||||
|
@ -69,7 +66,7 @@ load: function(target) {
|
||||||
// Logging selection dropdown
|
// Logging selection dropdown
|
||||||
html += ' <li><select id="VNC_logging" name="vncLogging">';
|
html += ' <li><select id="VNC_logging" name="vncLogging">';
|
||||||
llevels = ['error', 'warn', 'info', 'debug'];
|
llevels = ['error', 'warn', 'info', 'debug'];
|
||||||
for (i = 0; i < llevels.length; i++) {
|
for (i = 0; i < llevels.length; i += 1) {
|
||||||
html += '<option value="' + llevels[i] + '">' + llevels[i] + '</option>';
|
html += '<option value="' + llevels[i] + '">' + llevels[i] + '</option>';
|
||||||
}
|
}
|
||||||
html += ' </select> Logging</li>';
|
html += ' </select> Logging</li>';
|
||||||
|
@ -107,6 +104,8 @@ load: function(target) {
|
||||||
DC.initSetting('logging', 'warn');
|
DC.initSetting('logging', 'warn');
|
||||||
Util.init_logging(DC.getSetting('logging'));
|
Util.init_logging(DC.getSetting('logging'));
|
||||||
DC.initSetting('stylesheet', 'default');
|
DC.initSetting('stylesheet', 'default');
|
||||||
|
|
||||||
|
Util.selectStylesheet(null); // call twice to get around webkit bug
|
||||||
Util.selectStylesheet(DC.getSetting('stylesheet'));
|
Util.selectStylesheet(DC.getSetting('stylesheet'));
|
||||||
|
|
||||||
/* Populate the controls if defaults are provided in the URL */
|
/* Populate the controls if defaults are provided in the URL */
|
||||||
|
@ -118,12 +117,19 @@ load: function(target) {
|
||||||
DC.initSetting('true_color', true);
|
DC.initSetting('true_color', true);
|
||||||
DC.initSetting('cursor', 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 () {
|
$('VNC_screen').onmousemove = function () {
|
||||||
// Unfocus clipboard when over the VNC area
|
var canvas = DC.rfb.get_canvas();
|
||||||
if (! Canvas.focused) {
|
if ((! canvas) || (! canvas.get_focused())) {
|
||||||
$('VNC_clipboard_text').blur();
|
$('VNC_clipboard_text').blur();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// Read form control compatible setting from cookie
|
// Read form control compatible setting from cookie
|
||||||
|
@ -154,7 +160,7 @@ updateSetting: function(name, value) {
|
||||||
if (ctrl.type === 'checkbox') {
|
if (ctrl.type === 'checkbox') {
|
||||||
ctrl.checked = value;
|
ctrl.checked = value;
|
||||||
} else if (typeof ctrl.options !== 'undefined') {
|
} 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) {
|
if (ctrl.options[i].value === value) {
|
||||||
ctrl.selectedIndex = i;
|
ctrl.selectedIndex = i;
|
||||||
break;
|
break;
|
||||||
|
@ -176,7 +182,7 @@ saveSetting: function(name) {
|
||||||
val = ctrl.value;
|
val = ctrl.value;
|
||||||
}
|
}
|
||||||
Util.createCookie(name, val);
|
Util.createCookie(name, val);
|
||||||
Util.Debug("Setting saved '" + name + "=" + val + "'");
|
//Util.Debug("Setting saved '" + name + "=" + val + "'");
|
||||||
return val;
|
return val;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -190,7 +196,7 @@ initSetting: function(name, defVal) {
|
||||||
val = Util.readCookie(name, defVal);
|
val = Util.readCookie(name, defVal);
|
||||||
}
|
}
|
||||||
DefaultControls.updateSetting(name, val);
|
DefaultControls.updateSetting(name, val);
|
||||||
Util.Debug("Setting '" + name + "' initialized to '" + val + "'");
|
//Util.Debug("Setting '" + name + "' initialized to '" + val + "'");
|
||||||
return val;
|
return val;
|
||||||
},
|
},
|
||||||
|
|
||||||
|
@ -208,7 +214,7 @@ clickSettingsMenu: function() {
|
||||||
DC.updateSetting('encrypt');
|
DC.updateSetting('encrypt');
|
||||||
DC.updateSetting('base64');
|
DC.updateSetting('base64');
|
||||||
DC.updateSetting('true_color');
|
DC.updateSetting('true_color');
|
||||||
if (Canvas.isCursor()) {
|
if (DC.rfb.get_canvas().get_cursor_uri()) {
|
||||||
DC.updateSetting('cursor');
|
DC.updateSetting('cursor');
|
||||||
} else {
|
} else {
|
||||||
DC.updateSetting('cursor', false);
|
DC.updateSetting('cursor', false);
|
||||||
|
@ -235,10 +241,11 @@ closeSettingsMenu: function() {
|
||||||
|
|
||||||
// Disable/enable controls depending on connection state
|
// Disable/enable controls depending on connection state
|
||||||
settingsDisabled: function(disabled) {
|
settingsDisabled: function(disabled) {
|
||||||
|
var DC = DefaultControls;
|
||||||
$('VNC_encrypt').disabled = disabled;
|
$('VNC_encrypt').disabled = disabled;
|
||||||
$('VNC_base64').disabled = disabled;
|
$('VNC_base64').disabled = disabled;
|
||||||
$('VNC_true_color').disabled = disabled;
|
$('VNC_true_color').disabled = disabled;
|
||||||
if (Canvas.isCursor()) {
|
if (DC.rfb && DC.rfb.get_canvas().get_cursor_uri()) {
|
||||||
$('VNC_cursor').disabled = disabled;
|
$('VNC_cursor').disabled = disabled;
|
||||||
} else {
|
} else {
|
||||||
DefaultControls.updateSetting('cursor', false);
|
DefaultControls.updateSetting('cursor', false);
|
||||||
|
@ -248,12 +255,12 @@ settingsDisabled: function(disabled) {
|
||||||
|
|
||||||
// Save/apply settings when 'Apply' button is pressed
|
// Save/apply settings when 'Apply' button is pressed
|
||||||
settingsApply: function() {
|
settingsApply: function() {
|
||||||
Util.Debug(">> settingsApply");
|
//Util.Debug(">> settingsApply");
|
||||||
var DC = DefaultControls;
|
var DC = DefaultControls;
|
||||||
DC.saveSetting('encrypt');
|
DC.saveSetting('encrypt');
|
||||||
DC.saveSetting('base64');
|
DC.saveSetting('base64');
|
||||||
DC.saveSetting('true_color');
|
DC.saveSetting('true_color');
|
||||||
if (Canvas.isCursor()) {
|
if (DC.rfb.get_canvas().get_cursor_uri()) {
|
||||||
DC.saveSetting('cursor');
|
DC.saveSetting('cursor');
|
||||||
}
|
}
|
||||||
DC.saveSetting('stylesheet');
|
DC.saveSetting('stylesheet');
|
||||||
|
@ -263,21 +270,21 @@ settingsApply: function() {
|
||||||
Util.selectStylesheet(DC.getSetting('stylesheet'));
|
Util.selectStylesheet(DC.getSetting('stylesheet'));
|
||||||
Util.init_logging(DC.getSetting('logging'));
|
Util.init_logging(DC.getSetting('logging'));
|
||||||
|
|
||||||
Util.Debug("<< settingsApply");
|
//Util.Debug("<< settingsApply");
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
setPassword: function() {
|
setPassword: function() {
|
||||||
RFB.sendPassword($('VNC_password').value);
|
DefaultControls.rfb.sendPassword($('VNC_password').value);
|
||||||
return false;
|
return false;
|
||||||
},
|
},
|
||||||
|
|
||||||
sendCtrlAltDel: function() {
|
sendCtrlAltDel: function() {
|
||||||
RFB.sendCtrlAltDel();
|
DefaultControls.rfb.sendCtrlAltDel();
|
||||||
},
|
},
|
||||||
|
|
||||||
updateState: function(state, msg) {
|
updateState: function(rfb, state, oldstate, msg) {
|
||||||
var s, sb, c, cad, klass;
|
var s, sb, c, cad, klass;
|
||||||
s = $('VNC_status');
|
s = $('VNC_status');
|
||||||
sb = $('VNC_status_bar');
|
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() {
|
connect: function() {
|
||||||
var host, port, password, DC = DefaultControls;
|
var host, port, password, DC = DefaultControls;
|
||||||
|
|
||||||
|
@ -346,43 +360,37 @@ connect: function() {
|
||||||
throw("Must set host and port");
|
throw("Must set host and port");
|
||||||
}
|
}
|
||||||
|
|
||||||
RFB.setEncrypt(DC.getSetting('encrypt'));
|
DC.rfb.set_encrypt(DC.getSetting('encrypt'));
|
||||||
RFB.setBase64(DC.getSetting('base64'));
|
DC.rfb.set_b64encode(DC.getSetting('base64'));
|
||||||
RFB.setTrueColor(DC.getSetting('true_color'));
|
DC.rfb.set_true_color(DC.getSetting('true_color'));
|
||||||
RFB.setCursor(DC.getSetting('cursor'));
|
DC.rfb.set_local_cursor(DC.getSetting('cursor'));
|
||||||
|
|
||||||
RFB.connect(host, port, password);
|
DC.rfb.connect(host, port, password);
|
||||||
},
|
},
|
||||||
|
|
||||||
disconnect: function() {
|
disconnect: function() {
|
||||||
DefaultControls.closeSettingsMenu();
|
DefaultControls.closeSettingsMenu();
|
||||||
|
|
||||||
RFB.disconnect();
|
DefaultControls.rfb.disconnect();
|
||||||
},
|
},
|
||||||
|
|
||||||
canvasBlur: function() {
|
canvasBlur: function() {
|
||||||
Canvas.focused = false;
|
DefaultControls.rfb.get_canvas().set_focused(false);
|
||||||
},
|
},
|
||||||
|
|
||||||
canvasFocus: function() {
|
canvasFocus: function() {
|
||||||
Canvas.focused = true;
|
DefaultControls.rfb.get_canvas().set_focused(true);
|
||||||
},
|
},
|
||||||
|
|
||||||
clipClear: function() {
|
clipClear: function() {
|
||||||
$('VNC_clipboard_text').value = "";
|
$('VNC_clipboard_text').value = "";
|
||||||
RFB.clipboardPasteFrom("");
|
DefaultControls.rfb.clipboardPasteFrom("");
|
||||||
},
|
|
||||||
|
|
||||||
clipReceive: function(text) {
|
|
||||||
Util.Debug(">> DefaultControls.clipReceive: " + text.substr(0,40) + "...");
|
|
||||||
$('VNC_clipboard_text').value = text;
|
|
||||||
Util.Debug("<< DefaultControls.clipReceive");
|
|
||||||
},
|
},
|
||||||
|
|
||||||
clipSend: function() {
|
clipSend: function() {
|
||||||
var text = $('VNC_clipboard_text').value;
|
var text = $('VNC_clipboard_text').value;
|
||||||
Util.Debug(">> DefaultControls.clipSend: " + text.substr(0,40) + "...");
|
Util.Debug(">> DefaultControls.clipSend: " + text.substr(0,40) + "...");
|
||||||
RFB.clipboardPasteFrom(text);
|
DefaultControls.rfb.clipboardPasteFrom(text);
|
||||||
Util.Debug("<< DefaultControls.clipSend");
|
Util.Debug("<< DefaultControls.clipSend");
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
1774
include/rfb.js
1774
include/rfb.js
File diff suppressed because it is too large
Load Diff
|
@ -14,41 +14,6 @@
|
||||||
var Util = {}, $;
|
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
|
* 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) {
|
Util.dirObj = function (obj, depth, parent) {
|
||||||
var i, msg = "", val = "";
|
var i, msg = "", val = "";
|
||||||
if (! depth) { depth=2; }
|
if (! depth) { depth=2; }
|
||||||
|
@ -168,7 +169,7 @@ Util.getQueryVar = function(name, defVal) {
|
||||||
};
|
};
|
||||||
|
|
||||||
// Set defaults for Crockford style function namespaces
|
// 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') {
|
if (typeof cfg[v] === 'undefined') {
|
||||||
cfg[v] = val;
|
cfg[v] = val;
|
||||||
}
|
}
|
||||||
|
@ -181,6 +182,13 @@ Util.conf_default = function(cfg, api, v, val) {
|
||||||
// Default setter
|
// Default setter
|
||||||
if (typeof api['set_' + v] === 'undefined') {
|
if (typeof api['set_' + v] === 'undefined') {
|
||||||
api['set_' + v] = function (val) {
|
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;
|
cfg[v] = val;
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
@ -311,10 +319,9 @@ Util.createCookie = function(name,value,days) {
|
||||||
};
|
};
|
||||||
|
|
||||||
Util.readCookie = function(name, defaultValue) {
|
Util.readCookie = function(name, defaultValue) {
|
||||||
var nameEQ = name + "=";
|
var i, c, nameEQ = name + "=", ca = document.cookie.split(';');
|
||||||
var ca = document.cookie.split(';');
|
for(i=0; i < ca.length; i += 1) {
|
||||||
for(var i=0;i < ca.length;i++) {
|
c = ca[i];
|
||||||
var c = ca[i];
|
|
||||||
while (c.charAt(0) === ' ') { c = c.substring(1,c.length); }
|
while (c.charAt(0) === ' ') { c = c.substring(1,c.length); }
|
||||||
if (c.indexOf(nameEQ) === 0) { return c.substring(nameEQ.length,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 = [];
|
Util.getStylesheets = function() { var i, links, sheets = [];
|
||||||
links = document.getElementsByTagName("link");
|
links = document.getElementsByTagName("link");
|
||||||
for (i = 0; i < links.length; i++) {
|
for (i = 0; i < links.length; i += 1) {
|
||||||
if (links[i].title &&
|
if (links[i].title &&
|
||||||
links[i].rel.toUpperCase().indexOf("STYLESHEET") > -1) {
|
links[i].rel.toUpperCase().indexOf("STYLESHEET") > -1) {
|
||||||
sheets.push(links[i]);
|
sheets.push(links[i]);
|
||||||
|
@ -346,19 +353,15 @@ Util.selectStylesheet = function(sheet) {
|
||||||
if (typeof sheet === 'undefined') {
|
if (typeof sheet === 'undefined') {
|
||||||
sheet = 'default';
|
sheet = 'default';
|
||||||
}
|
}
|
||||||
for (i=0; i < sheets.length; i++) {
|
for (i=0; i < sheets.length; i += 1) {
|
||||||
link = sheets[i];
|
link = sheets[i];
|
||||||
if (link.title === sheet) {
|
if (link.title === sheet) {
|
||||||
Util.Debug("Using stylesheet " + sheet);
|
Util.Debug("Using stylesheet " + sheet);
|
||||||
link.disabled = false;
|
link.disabled = false;
|
||||||
} else {
|
} else {
|
||||||
Util.Debug("Skipping stylesheet " + link.title);
|
//Util.Debug("Skipping stylesheet " + link.title);
|
||||||
link.disabled = true;
|
link.disabled = true;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return sheet;
|
return sheet;
|
||||||
};
|
};
|
||||||
|
|
||||||
// call once to disable alternates and get around webkit bug
|
|
||||||
Util.selectStylesheet(null);
|
|
||||||
|
|
||||||
|
|
|
@ -46,14 +46,16 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function test_functions () {
|
function test_functions () {
|
||||||
var img, x, y;
|
var img, x, y, w, h, ctx = canvas.getContext();
|
||||||
Canvas.fillRect(0, 0, Canvas.c_wx, Canvas.c_wy, [240,240,240]);
|
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();
|
var himg = new Image();
|
||||||
himg.onload = function () {
|
himg.onload = function () {
|
||||||
Canvas.ctx.drawImage(himg, 200, 40); };
|
ctx.drawImage(himg, 200, 40); };
|
||||||
himg.src = "face.png";
|
himg.src = "face.png";
|
||||||
|
|
||||||
/* Test array image data */
|
/* Test array image data */
|
||||||
|
@ -66,15 +68,14 @@
|
||||||
data[(y*50 + x)*4 + 3] = 255;
|
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]);
|
||||||
img = Canvas.getTile(5,5,16,16,[0,128,128]);
|
canvas.putTile(img);
|
||||||
Canvas.putTile(img);
|
|
||||||
|
|
||||||
img = Canvas.getTile(90,15,16,16,[0,0,0]);
|
img = canvas.getTile(90,15,16,16,[0,0,0]);
|
||||||
Canvas.setSubTile(img, 0,0,16,16,[128,128,0]);
|
canvas.setSubTile(img, 0,0,16,16,[128,128,0]);
|
||||||
Canvas.putTile(img);
|
canvas.putTile(img);
|
||||||
}
|
}
|
||||||
|
|
||||||
function begin () {
|
function begin () {
|
||||||
|
@ -85,30 +86,35 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function start_delayed () {
|
function start_delayed () {
|
||||||
|
var ret;
|
||||||
|
|
||||||
message("Running test: prefer Javascript");
|
ret = canvas.set_prefer_js(true);
|
||||||
Canvas.prefer_js = true;
|
if (ret) {
|
||||||
var time1 = run_test();
|
message("Running test: prefer Javascript ops");
|
||||||
message("prefer Javascript: " + time1 + "ms total, " +
|
var time1 = run_test();
|
||||||
(time1 / iterations) + "ms per frame");
|
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");
|
message("Running test: prefer Canvas ops");
|
||||||
Canvas.prefer_js = false;
|
|
||||||
var time2 = run_test();
|
var time2 = run_test();
|
||||||
message("prefer Canvas ops: " + time2 + "ms total, " +
|
message("prefer Canvas ops: " + time2 + "ms total, " +
|
||||||
(time2 / iterations) + "ms per frame");
|
(time2 / iterations) + "ms per frame");
|
||||||
|
|
||||||
Canvas.resize(start_width, start_height, true);
|
canvas.resize(start_width, start_height, true);
|
||||||
test_functions();
|
test_functions();
|
||||||
$('startButton').disabled = false;
|
$('startButton').disabled = false;
|
||||||
$('startButton').value = "Start";
|
$('startButton').value = "Do Performance Test";
|
||||||
}
|
}
|
||||||
|
|
||||||
function run_test () {
|
function run_test () {
|
||||||
var width, height;
|
var width, height;
|
||||||
width = $('width').value;
|
width = $('width').value;
|
||||||
height = $('height').value;
|
height = $('height').value;
|
||||||
Canvas.resize(width, height);
|
canvas.resize(width, height);
|
||||||
var color, start_time = (new Date()).getTime(), w, h;
|
var color, start_time = (new Date()).getTime(), w, h;
|
||||||
for (var i=0; i < iterations; i++) {
|
for (var i=0; i < iterations; i++) {
|
||||||
color = [128, 128, (255 / iterations) * i, 0];
|
color = [128, 128, (255 / iterations) * i, 0];
|
||||||
|
@ -116,9 +122,9 @@
|
||||||
for (var y=0; y < height; y = y + 16) {
|
for (var y=0; y < height; y = y + 16) {
|
||||||
w = Math.min(16, width - x);
|
w = Math.min(16, width - x);
|
||||||
h = Math.min(16, height - y);
|
h = Math.min(16, height - y);
|
||||||
var tile = Canvas.getTile(x, y, w, h, color);
|
var tile = canvas.getTile(x, y, w, h, color);
|
||||||
Canvas.setSubTile(tile, 0, 0, w, h, color);
|
canvas.setSubTile(tile, 0, 0, w, h, color);
|
||||||
Canvas.putTile(tile);
|
canvas.putTile(tile);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -129,8 +135,8 @@
|
||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
message("in onload");
|
message("in onload");
|
||||||
$('iterations').value = 10;
|
$('iterations').value = 10;
|
||||||
Canvas.init('canvas');
|
canvas = Canvas({'target' : 'canvas'});
|
||||||
Canvas.resize(start_width, start_height, true);
|
canvas.resize(start_width, start_height, true);
|
||||||
message("Canvas initialized");
|
message("Canvas initialized");
|
||||||
test_functions();
|
test_functions();
|
||||||
}
|
}
|
||||||
|
|
|
@ -105,10 +105,10 @@
|
||||||
|
|
||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
debug("onload");
|
debug("onload");
|
||||||
var cross, cursor, cursor64;
|
var canvas, cross, cursor, cursor64;
|
||||||
|
|
||||||
Canvas.init("testcanvas");
|
canvas = new Canvas({'target' : "testcanvas"});
|
||||||
debug("Canvas.init() indicates Data URI cursor support is: " + Canvas.isCursor());
|
debug("canvas indicates Data URI cursor support is: " + canvas.get_cursor_uri());
|
||||||
|
|
||||||
$('button1').style.cursor="url(face.png), default";
|
$('button1').style.cursor="url(face.png), default";
|
||||||
|
|
||||||
|
|
|
@ -19,6 +19,7 @@
|
||||||
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
|
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
|
||||||
-->
|
-->
|
||||||
<script src="include/util.js"></script>
|
<script src="include/util.js"></script>
|
||||||
|
<script src="include/base64.js"></script>
|
||||||
<script src="include/canvas.js"></script>
|
<script src="include/canvas.js"></script>
|
||||||
<script>
|
<script>
|
||||||
var msg_cnt = 0;
|
var msg_cnt = 0;
|
||||||
|
@ -51,9 +52,9 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
window.onload = function() {
|
window.onload = function() {
|
||||||
Canvas.init('canvas');
|
var canvas = Canvas({'target' : 'canvas'});
|
||||||
Canvas.resize(width, height);
|
canvas.resize(width, height, true);
|
||||||
Canvas.start(keyPress, mouseButton, mouseMove);
|
canvas.start(keyPress, mouseButton, mouseMove);
|
||||||
message("Canvas initialized");
|
message("Canvas initialized");
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
10
vnc.html
10
vnc.html
|
@ -16,12 +16,12 @@ noVNC example: simple example using default controls
|
||||||
|
|
||||||
<body>
|
<body>
|
||||||
<div id='vnc'>Loading</div>
|
<div id='vnc'>Loading</div>
|
||||||
</body>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
window.onload = function () {
|
window.onload = function () {
|
||||||
DefaultControls.load('vnc');
|
DefaultControls.load('vnc');
|
||||||
RFB.load();
|
};
|
||||||
}
|
</script>
|
||||||
</script>
|
|
||||||
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -7,8 +7,7 @@ Connect parameters are provided in query string:
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>VNC Client</title>
|
<title>VNC Client</title>
|
||||||
<link rel="stylesheet" href="include/plain.css" TITLE="plain">
|
<link rel="stylesheet" href="include/plain.css" title="plain">
|
||||||
<link rel="Alternate StyleSheet" href="include/black.css" TITLE="Black">
|
|
||||||
<!--
|
<!--
|
||||||
<script type='text/javascript'
|
<script type='text/javascript'
|
||||||
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
|
src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
|
||||||
|
@ -19,31 +18,36 @@ Connect parameters are provided in query string:
|
||||||
<body style="margin: 0px;">
|
<body style="margin: 0px;">
|
||||||
<div id="VNC_screen">
|
<div id="VNC_screen">
|
||||||
<div id="VNC_status_bar" class="VNC_status_bar" style="margin-top: 0px;">
|
<div id="VNC_status_bar" class="VNC_status_bar" style="margin-top: 0px;">
|
||||||
<table border=0 width=100%><tr>
|
<table border=0 width="100%"><tr>
|
||||||
<td><div id="VNC_status">Loading</div></td>
|
<td><div id="VNC_status">Loading</div></td>
|
||||||
<td width=1%><div id="VNC_buttons">
|
<td width="1%"><div id="VNC_buttons">
|
||||||
<input type=button value="Send CtrlAltDel"
|
<input type=button value="Send CtrlAltDel"
|
||||||
id="sendCtrlAltDelButton"
|
id="sendCtrlAltDelButton">
|
||||||
onclick="sendCtrlAltDel();"></div></td>
|
</div></td>
|
||||||
</tr></table>
|
</tr></table>
|
||||||
</div>
|
</div>
|
||||||
<canvas id="VNC_canvas" width="640px" height="20px">
|
<canvas id="VNC_canvas" width="640px" height="20px">
|
||||||
Canvas not supported.
|
Canvas not supported.
|
||||||
</canvas>
|
</canvas>
|
||||||
</div>
|
</div>
|
||||||
</body>
|
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
/*jslint white: false */
|
||||||
|
/*global window, $, Util, RFB, */
|
||||||
|
"use strict";
|
||||||
|
|
||||||
|
var rfb;
|
||||||
|
|
||||||
function setPassword() {
|
function setPassword() {
|
||||||
RFB.sendPassword($('password_input').value);
|
rfb.sendPassword($('password_input').value);
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
function sendCtrlAltDel() {
|
function sendCtrlAltDel() {
|
||||||
RFB.sendCtrlAltDel();
|
rfb.sendCtrlAltDel();
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
function updateState(state, msg) {
|
function updateState(rfb, state, oldstate, msg) {
|
||||||
var s, sb, klass, html;
|
var s, sb, cad, klass;
|
||||||
s = $('VNC_status');
|
s = $('VNC_status');
|
||||||
sb = $('VNC_status_bar');
|
sb = $('VNC_status_bar');
|
||||||
cad = $('sendCtrlAltDelButton');
|
cad = $('sendCtrlAltDelButton');
|
||||||
|
@ -64,8 +68,9 @@ Connect parameters are provided in query string:
|
||||||
msg += ' style="margin-bottom: 0px">';
|
msg += ' style="margin-bottom: 0px">';
|
||||||
msg += 'Password Required: ';
|
msg += 'Password Required: ';
|
||||||
msg += '<input type=password size=10 id="password_input" class="VNC_status">';
|
msg += '<input type=password size=10 id="password_input" class="VNC_status">';
|
||||||
msg += '</form>';
|
msg += '<\/form>';
|
||||||
// Fall through
|
klass = "VNC_status_warn";
|
||||||
|
break;
|
||||||
default:
|
default:
|
||||||
klass = "VNC_status_warn";
|
klass = "VNC_status_warn";
|
||||||
}
|
}
|
||||||
|
@ -82,6 +87,8 @@ Connect parameters are provided in query string:
|
||||||
window.onload = function () {
|
window.onload = function () {
|
||||||
var host, port, password;
|
var host, port, password;
|
||||||
|
|
||||||
|
$('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
|
||||||
|
|
||||||
host = Util.getQueryVar('host', null);
|
host = Util.getQueryVar('host', null);
|
||||||
port = Util.getQueryVar('port', null);
|
port = Util.getQueryVar('port', null);
|
||||||
password = Util.getQueryVar('password', '');
|
password = Util.getQueryVar('password', '');
|
||||||
|
@ -91,15 +98,15 @@ Connect parameters are provided in query string:
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
|
|
||||||
RFB.setEncrypt(Util.getQueryVar('encrypt', true));
|
rfb = new RFB({'encrypt': Util.getQueryVar('encrypt', true),
|
||||||
RFB.setBase64(Util.getQueryVar('base64', true));
|
'b64encode': Util.getQueryVar('base64', true),
|
||||||
RFB.setTrueColor(Util.getQueryVar('true_color', true));
|
'true_color': Util.getQueryVar('true_color', true),
|
||||||
RFB.setCursor(Util.getQueryVar('cursor', true));
|
'local_cursor': Util.getQueryVar('cursor', true),
|
||||||
RFB.setUpdateState(updateState);
|
'updateState': updateState});
|
||||||
|
rfb.connect(host, port, password);
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
RFB.load();
|
</body>
|
||||||
RFB.connect(host, port, password);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
</html>
|
</html>
|
||||||
|
|
||||||
|
|
Loading…
Reference in New Issue