mirror of
https://github.com/novnc/noVNC.git
synced 2026-06-06 20:39:39 +00:00
API changes. Client cursor and settings menu.
The following API changes may affect integrators:
- Settings have been moved out of the RFB.connect() call. Each
setting now has it's own setter function: setEncrypt, setBase64,
setTrueColor, setCursor.
- Encrypt and cursor settings now default to on.
- CSS changes:
- VNC_status_bar for input buttons switched to a element class.
- VNC_buttons split into VNC_buttons_right and
VNC_buttons_left
- New id styles for VNC_settings_menu and VNC_setting
Note: the encrypt, true_color and cursor, logging setting can all be
set on load using query string variables (in addition to host, port
and password).
Client cursor (cursor pseudo-encoding) support has been polished and
activated.
The RFB settings are now presented as radio button list items in
a drop-down "Settings" menu when using the default controls.
Also, in the settings menu is the ability to select between alternate
style-sheets.
Cookie and stylesheet selection support added to util.js.
This commit is contained in:
Joel Martin
@@ -10,12 +10,16 @@
|
||||
|
||||
var DefaultControls = {
|
||||
|
||||
settingsOpen : false,
|
||||
|
||||
// Render default controls and initialize settings menu
|
||||
load: function(target) {
|
||||
var url, html;
|
||||
var url, html, encrypt, cursor, base64, i, sheet, sheets,
|
||||
DC = DefaultControls;
|
||||
|
||||
/* Handle state updates */
|
||||
RFB.setUpdateState(DefaultControls.updateState);
|
||||
RFB.setClipboardReceive(DefaultControls.clipReceive);
|
||||
RFB.setUpdateState(DC.updateState);
|
||||
RFB.setClipboardReceive(DC.clipReceive);
|
||||
|
||||
/* Populate the 'target' DOM element with default controls */
|
||||
if (!target) { target = 'vnc'; }
|
||||
@@ -27,10 +31,6 @@ load: function(target) {
|
||||
html += ' <li>Port: <input id="VNC_port"></li>';
|
||||
html += ' <li>Password: <input id="VNC_password"';
|
||||
html += ' type="password"></li>';
|
||||
html += ' <li>Encrypt: <input id="VNC_encrypt"';
|
||||
html += ' type="checkbox"></li>';
|
||||
html += ' <li>True Color: <input id="VNC_true_color"';
|
||||
html += ' type="checkbox" checked></li>';
|
||||
html += ' <li><input id="VNC_connect_button" type="button"';
|
||||
html += ' value="Loading" disabled></li>';
|
||||
html += ' </ul>';
|
||||
@@ -39,8 +39,49 @@ load: function(target) {
|
||||
html += ' <div id="VNC_status_bar" class="VNC_status_bar" style="margin-top: 0px;">';
|
||||
html += ' <table border=0 width=100%><tr>';
|
||||
html += ' <td><div id="VNC_status">Loading</div></td>';
|
||||
html += ' <td width=10%><div id="VNC_buttons">';
|
||||
html += ' <input type=button value="Send CtrlAltDel"';
|
||||
html += ' <td width=1%><div class="VNC_buttons_right">';
|
||||
html += ' <input type=button class="VNC_status_button" value="Settings"';
|
||||
html += ' id="menuButton"';
|
||||
html += ' onclick="DefaultControls.clickSettingsMenu();">';
|
||||
html += ' <span id="VNC_settings_menu"';
|
||||
html += ' onmouseover="DefaultControls.canvasBlur();"';
|
||||
html += ' onmouseout="DefaultControls.canvasFocus();">';
|
||||
html += ' <ul>';
|
||||
html += ' <li><input id="VNC_encrypt"';
|
||||
html += ' type="checkbox" checked> Encrypt</li>';
|
||||
html += ' <li><input id="VNC_base64"';
|
||||
html += ' type="checkbox" checked> Base64 Encode</li>';
|
||||
html += ' <li><input id="VNC_true_color"';
|
||||
html += ' type="checkbox" checked> True Color</li>';
|
||||
html += ' <li><input id="VNC_cursor"';
|
||||
html += ' type="checkbox" checked> Local Cursor</li>';
|
||||
html += ' <hr>';
|
||||
|
||||
// Stylesheet selection dropdown
|
||||
html += ' <li><select id="VNC_stylesheet" name="vncStyle">';
|
||||
html += ' <option value="default">default</option>';
|
||||
sheet = Util.selectStylesheet();
|
||||
sheets = Util.getStylesheets();
|
||||
for (i = 0; i < sheets.length; i++) {
|
||||
html += '<option value="' + sheets[i].title + '">' + sheets[i].title + '</option>';
|
||||
}
|
||||
html += ' </select> Style</li>';
|
||||
|
||||
// Logging selection dropdown
|
||||
html += ' <li><select id="VNC_logging" name="vncLogging">';
|
||||
llevels = ['error', 'warn', 'info', 'debug'];
|
||||
for (i = 0; i < llevels.length; i++) {
|
||||
html += '<option value="' + llevels[i] + '">' + llevels[i] + '</option>';
|
||||
}
|
||||
html += ' </select> Logging</li>';
|
||||
|
||||
html += ' <hr>';
|
||||
html += ' <li><input type="button" id="VNC_apply" value="Apply"';
|
||||
html += ' onclick="DefaultControls.settingsApply()"></li>';
|
||||
html += ' </ul>';
|
||||
html += ' </span></div></td>';
|
||||
html += ' <td width=1%><div class="VNC_buttons_right">';
|
||||
html += ' <input type=button class="VNC_status_button" value="Send CtrlAltDel"';
|
||||
html += ' id="sendCtrlAltDelButton"';
|
||||
html += ' onclick="DefaultControls.sendCtrlAltDel();"></div></td>';
|
||||
html += ' </tr></table>';
|
||||
@@ -57,22 +98,26 @@ load: function(target) {
|
||||
html += ' onclick="DefaultControls.clipClear();">';
|
||||
html += ' <br>';
|
||||
html += ' <textarea id="VNC_clipboard_text" cols=80 rows=5';
|
||||
html += ' onfocus="DefaultControls.clipFocus();"';
|
||||
html += ' onblur="DefaultControls.clipBlur();"';
|
||||
html += ' onfocus="DefaultControls.canvasBlur();"';
|
||||
html += ' onblur="DefaultControls.canvasFocus();"';
|
||||
html += ' onchange="DefaultControls.clipSend();"></textarea>';
|
||||
html += '</div>';
|
||||
$(target).innerHTML = html;
|
||||
|
||||
// Settings with immediate effects
|
||||
DC.initSetting('logging', 'default');
|
||||
Util.init_logging(DC.getSetting('logging'));
|
||||
DC.initSetting('stylesheet', 'default');
|
||||
Util.selectStylesheet(DC.getSetting('stylesheet'));
|
||||
|
||||
/* Populate the controls if defaults are provided in the URL */
|
||||
url = document.location.href;
|
||||
$('VNC_host').value = (url.match(/host=([A-Za-z0-9.\-]*)/) ||
|
||||
['',''])[1];
|
||||
$('VNC_port').value = (url.match(/port=([0-9]*)/) ||
|
||||
['',''])[1];
|
||||
$('VNC_password').value = (url.match(/password=([^&#]*)/) ||
|
||||
['',''])[1];
|
||||
$('VNC_encrypt').checked = (url.match(/encrypt=([A-Za-z0-9]*)/) ||
|
||||
['',''])[1];
|
||||
DC.initSetting('host', '');
|
||||
DC.initSetting('port', '');
|
||||
DC.initSetting('password', '');
|
||||
DC.initSetting('encrypt', true);
|
||||
DC.initSetting('base64', true);
|
||||
DC.initSetting('true_color', true);
|
||||
DC.initSetting('cursor', true);
|
||||
|
||||
$('VNC_screen').onmousemove = function () {
|
||||
// Unfocus clipboard when over the VNC area
|
||||
@@ -82,6 +127,154 @@ load: function(target) {
|
||||
};
|
||||
},
|
||||
|
||||
// Read a query string variable
|
||||
getQueryVar: function(name) {
|
||||
var re = new RegExp('[\?].*' + name + '=([^\&\#]*)');
|
||||
return (document.location.href.match(re) || ['',null])[1];
|
||||
},
|
||||
|
||||
// Read form control compatible setting from cookie
|
||||
getSetting: function(name) {
|
||||
var val, ctrl = $('VNC_' + name);
|
||||
val = Util.readCookie(name);
|
||||
if (ctrl.type === 'checkbox') {
|
||||
if (val.toLowerCase() in {'0':1, 'no':1, 'false':1}) {
|
||||
val = false;
|
||||
} else {
|
||||
val = true;
|
||||
}
|
||||
}
|
||||
return val;
|
||||
},
|
||||
|
||||
// Update cookie and form control setting. If value is not set, then
|
||||
// updates from control to current cookie setting.
|
||||
updateSetting: function(name, value) {
|
||||
var i, ctrl = $('VNC_' + name);
|
||||
// Save the cookie for this session
|
||||
if (typeof value !== 'undefined') {
|
||||
Util.createCookie(name, value);
|
||||
}
|
||||
|
||||
// Update the settings control
|
||||
value = DefaultControls.getSetting(name);
|
||||
if (ctrl.type === 'checkbox') {
|
||||
ctrl.checked = value;
|
||||
} else if (typeof ctrl.options !== 'undefined') {
|
||||
for (i = 0; i < ctrl.options.length; i++) {
|
||||
if (ctrl.options[i].value === value) {
|
||||
ctrl.selectedIndex = i;
|
||||
break;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
ctrl.value = value;
|
||||
}
|
||||
},
|
||||
|
||||
// Save control setting to cookie
|
||||
saveSetting: function(name) {
|
||||
var val, ctrl = $('VNC_' + name);
|
||||
if (ctrl.type === 'checkbox') {
|
||||
val = ctrl.checked;
|
||||
} else if (typeof ctrl.options !== 'undefined') {
|
||||
val = ctrl.options[ctrl.selectedIndex].value;
|
||||
} else {
|
||||
val = ctrl.value;
|
||||
}
|
||||
Util.createCookie(name, val);
|
||||
Util.Debug("Setting saved '" + name + "=" + val + "'");
|
||||
return val;
|
||||
},
|
||||
|
||||
// Initial page load read/initialization of settings
|
||||
initSetting: function(name, defVal) {
|
||||
var val, ctrl = $('VNC_' + name), DC = DefaultControls;
|
||||
|
||||
// Check Query string followed by cookie
|
||||
val = DC.getQueryVar(name);
|
||||
if (val === null) {
|
||||
val = Util.readCookie(name, defVal);
|
||||
}
|
||||
DC.updateSetting(name, val);
|
||||
Util.Debug("Setting '" + name + "' initialized to '" + val + "'");
|
||||
return val;
|
||||
},
|
||||
|
||||
|
||||
// Toggle the settings menu:
|
||||
// On open, settings are refreshed from saved cookies.
|
||||
// On close, settings are applied
|
||||
clickSettingsMenu: function() {
|
||||
var DC = DefaultControls;
|
||||
if (DefaultControls.settingsOpen) {
|
||||
DC.settingsApply();
|
||||
|
||||
DC.closeSettingsMenu();
|
||||
} else {
|
||||
DC.updateSetting('encrypt');
|
||||
DC.updateSetting('base64');
|
||||
DC.updateSetting('true_color');
|
||||
if (Canvas.isCursor()) {
|
||||
DC.updateSetting('cursor');
|
||||
} else {
|
||||
DC.updateSettings('cursor', false);
|
||||
$('VNC_cursor').disabled = true;
|
||||
}
|
||||
DC.updateSetting('stylesheet');
|
||||
DC.updateSetting('logging');
|
||||
|
||||
DC.openSettingsMenu();
|
||||
}
|
||||
},
|
||||
|
||||
// Open menu
|
||||
openSettingsMenu: function() {
|
||||
$('VNC_settings_menu').style.display = "block";
|
||||
DefaultControls.settingsOpen = true;
|
||||
},
|
||||
|
||||
// Close menu (without applying settings)
|
||||
closeSettingsMenu: function() {
|
||||
$('VNC_settings_menu').style.display = "none";
|
||||
DefaultControls.settingsOpen = false;
|
||||
},
|
||||
|
||||
// Disable/enable controls depending on connection state
|
||||
settingsDisabled: function(disabled) {
|
||||
$('VNC_encrypt').disabled = disabled;
|
||||
$('VNC_base64').disabled = disabled;
|
||||
$('VNC_true_color').disabled = disabled;
|
||||
if (Canvas.isCursor()) {
|
||||
$('VNC_cursor').disabled = disabled;
|
||||
} else {
|
||||
DefaultControls.updateSettings('cursor', false);
|
||||
$('VNC_cursor').disabled = true;
|
||||
}
|
||||
},
|
||||
|
||||
// Save/apply settings when 'Apply' button is pressed
|
||||
settingsApply: function() {
|
||||
Util.Debug(">> settingsApply");
|
||||
var curSS, newSS, DC = DefaultControls;
|
||||
DC.saveSetting('encrypt');
|
||||
DC.saveSetting('base64');
|
||||
DC.saveSetting('true_color');
|
||||
if (Canvas.isCursor()) {
|
||||
DC.saveSetting('cursor');
|
||||
}
|
||||
DC.saveSetting('stylesheet');
|
||||
DC.saveSetting('logging');
|
||||
|
||||
// Settings with immediate (non-connected related) effect
|
||||
Util.selectStylesheet(DC.getSetting('stylesheet'));
|
||||
Util.init_logging(DC.getSetting('logging'));
|
||||
|
||||
Util.Debug("<< settingsApply");
|
||||
},
|
||||
|
||||
|
||||
|
||||
setPassword: function() {
|
||||
console.log("setPassword");
|
||||
RFB.sendPassword($('VNC_password').value);
|
||||
@@ -103,6 +296,7 @@ updateState: function(state, msg) {
|
||||
case 'fatal':
|
||||
c.disabled = true;
|
||||
cad.disabled = true;
|
||||
DefaultControls.settingsDisabled(true);
|
||||
klass = "VNC_status_error";
|
||||
break;
|
||||
case 'normal':
|
||||
@@ -110,6 +304,7 @@ updateState: function(state, msg) {
|
||||
c.onclick = DefaultControls.disconnect;
|
||||
c.disabled = false;
|
||||
cad.disabled = false;
|
||||
DefaultControls.settingsDisabled(true);
|
||||
klass = "VNC_status_normal";
|
||||
break;
|
||||
case 'disconnected':
|
||||
@@ -119,6 +314,7 @@ updateState: function(state, msg) {
|
||||
|
||||
c.disabled = false;
|
||||
cad.disabled = true;
|
||||
DefaultControls.settingsDisabled(false);
|
||||
klass = "VNC_status_normal";
|
||||
break;
|
||||
case 'password':
|
||||
@@ -127,11 +323,13 @@ updateState: function(state, msg) {
|
||||
|
||||
c.disabled = false;
|
||||
cad.disabled = true;
|
||||
DefaultControls.settingsDisabled(true);
|
||||
klass = "VNC_status_warn";
|
||||
break;
|
||||
default:
|
||||
c.disabled = true;
|
||||
cad.disabled = true;
|
||||
DefaultControls.settingsDisabled(true);
|
||||
klass = "VNC_status_warn";
|
||||
break;
|
||||
}
|
||||
@@ -145,28 +343,36 @@ updateState: function(state, msg) {
|
||||
},
|
||||
|
||||
connect: function() {
|
||||
var host, port, password, encrypt, true_color;
|
||||
var host, port, password, DC = DefaultControls;
|
||||
|
||||
DC.closeSettingsMenu();
|
||||
|
||||
host = $('VNC_host').value;
|
||||
port = $('VNC_port').value;
|
||||
password = $('VNC_password').value;
|
||||
encrypt = $('VNC_encrypt').checked;
|
||||
true_color = $('VNC_true_color').checked;
|
||||
if ((!host) || (!port)) {
|
||||
throw("Must set host and port");
|
||||
}
|
||||
|
||||
RFB.connect(host, port, password, encrypt, true_color);
|
||||
RFB.setEncrypt(DC.getSetting('encrypt'));
|
||||
RFB.setBase64(DC.getSetting('base64'));
|
||||
RFB.setTrueColor(DC.getSetting('true_color'));
|
||||
RFB.setCursor(DC.getSetting('cursor'));
|
||||
|
||||
RFB.connect(host, port, password);
|
||||
},
|
||||
|
||||
disconnect: function() {
|
||||
DefaultControls.closeSettingsMenu();
|
||||
|
||||
RFB.disconnect();
|
||||
},
|
||||
|
||||
clipFocus: function() {
|
||||
canvasBlur: function() {
|
||||
Canvas.focused = false;
|
||||
},
|
||||
|
||||
clipBlur: function() {
|
||||
canvasFocus: function() {
|
||||
Canvas.focused = true;
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user