Skip to content

N
noVNC
Commit 53fc7392 authored by Chris Gordon's avatar Chris Gordon Committed by Joel Martin
Browse files
Options

Modifed UI. Move HTML from ui.js to vnc.html.

parent 1734b5e4
Hide whitespace changes
Inline Side-by-side
Showing with 298 additions and 320 deletions
include/black.css
View file @ 53fc7392
body { .noVNC-control-bar {
margin: 0px; background-position:50% 100%;
font-size: 13px;
color: #111;
font-family: "Helvetica";
} }
#VNC_controls { .triangle-right {
background: #111; border:2px solid #fff;
line-height: 1em; background:#000;
color: #FFF; color:#fff;
overflow: hidden; }
padding: 4px 24px; \ No newline at end of file
}
#VNC_controls ul {
list-style:none;
list-style-position: outside;
margin: 0px;
padding: 0px;
}
#VNC_controls li {
margin-right: 15px;
padding: 2px 0px;
float: left;
}
#VNC_controls li input[type=text],
#VNC_controls li input[type=password] {
border: 2px solid #333;
}
#VNC_host {
width: 100px;
}
#VNC_port {
width: 50px;
}
#VNC_password {
width: 80px;
}
#VNC_encrypt {
}
#VNC_connect_button {
width: 100px;
}
#VNC_status_bar td {
padding: 0px;
margin: 0px;
}
#VNC_status_bar div {
font-size: 12px;
font-weight: bold;
text-align: center;
margin: 0px;
padding: 1em;
}
.VNC_status_button {
font-size: 10px;
margin: 0px;
padding: 0px;
}
#VNC_status {
text-align: center;
}
#VNC_settings_menu {
display: none;
position: absolute;
width: 13em;
border: 1px solid #888;
color: #111;
font-weight: normal;
background-color: #f0f2f6;
padding: 5px; margin: 3px;
z-index: 100; opacity: 1;
text-align: left; white-space: normal;
}
#VNC_settings_menu ul {
list-style: none;
margin: 0px;
padding: 0px;
}
.VNC_buttons_right {
text-align: right;
}
.VNC_buttons_left {
text-align: left;
}
.VNC_status_normal {
background: #111;
color: #fff;
}
.VNC_status_error {
background: #111;
color: #f44;
}
.VNC_status_warn {
background: #111;
color: #ff4;
}
#VNC_screen {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #111;
padding: 20px;
margin: 0 auto;
color: #FFF;
margin-top: 20px;
text-align: center;
/* This causes the width of the outer div(#screen) honor the size of the inner (#vnc) div */
display: table;
table-layout: auto;
}
#VNC_canvas {
background: #111;
margin: 0 auto;
}
#VNC_clipboard {
display: none;
}
include/input.js
View file @ 53fc7392
...@@ -1852,7 +1852,7 @@ unicodeTable = { ...@@ -1852,7 +1852,7 @@ unicodeTable = {
0x28e0 : 0x10028e0, 0x28e0 : 0x10028e0,
0x28e1 : 0x10028e1, 0x28e1 : 0x10028e1,
0x28e2 : 0x10028e2, 0x28e2 : 0x10028e2,
0x28e3 : 0x10028e3, 0x28e3 : 0x10028e3,
0x28e4 : 0x10028e4, 0x28e4 : 0x10028e4,
0x28e5 : 0x10028e5, 0x28e5 : 0x10028e5,
0x28e6 : 0x10028e6, 0x28e6 : 0x10028e6,
...@@ -1881,4 +1881,4 @@ unicodeTable = { ...@@ -1881,4 +1881,4 @@ unicodeTable = {
0x28fd : 0x10028fd, 0x28fd : 0x10028fd,
0x28fe : 0x10028fe, 0x28fe : 0x10028fe,
0x28ff : 0x10028ff 0x28ff : 0x10028ff
}; };
\ No newline at end of file
include/rfb.js
View file @ 53fc7392
...@@ -842,9 +842,9 @@ normal_msg = function() { ...@@ -842,9 +842,9 @@ normal_msg = function() {
//Util.Debug("red after: " + red); //Util.Debug("red after: " + red);
green = parseInt(ws.rQshift16() / 256, 10); green = parseInt(ws.rQshift16() / 256, 10);
blue = parseInt(ws.rQshift16() / 256, 10); blue = parseInt(ws.rQshift16() / 256, 10);
Util.Debug("*** colourMap: " + display.get_colourMap());
display.set_colourMap([red, green, blue], first_colour + c); display.set_colourMap([red, green, blue], first_colour + c);
} }
Util.Debug("*** colourMap: " + display.get_colourMap());
Util.Info("Registered " + num_colours + " colourMap entries"); Util.Info("Registered " + num_colours + " colourMap entries");
//Util.Debug("colourMap: " + display.get_colourMap()); //Util.Debug("colourMap: " + display.get_colourMap());
break; break;
......
include/ui.js
View file @ 53fc7392
...@@ -13,132 +13,26 @@ ...@@ -13,132 +13,26 @@
var UI = { var UI = {
settingsOpen : false, settingsOpen : false,
ConnSettingsOpen : true,
clipboardOpen: false,
// Render default UI and initialize settings menu // Render default UI and initialize settings menu
load: function(target) { load: function() {
var html = '', i, sheet, sheets, llevels; var html = '', i, sheet, sheets, llevels;
/* Populate the 'target' DOM element with default UI */ // Stylesheet selection dropdown
if (!target) {
target = $D('vnc');
} else if (typeof target === 'string') {
target = $D(target);
}
if ((!document.createElement('canvas').getContext) &&
window.ActiveXObject) {
// Suggest Chrome frame for Internet Explorer users
html += '<center><div style="text-align: left; width: 400px">';
html += ' You are using a version of Internet Explorer ';
html += ' that does not have HTML5 Canvas support. ';
html += ' To use noVNC you must use a browser with HTML5 ';
html += ' Canvas support or install ';
html += ' <a href="http://google.com/chromeframe" target="cframe">';
html += ' Google Chrome Frame.</a>';
html += '</div></center>';
target.innerHTML = html;
return;
}
html += '<div id="VNC_controls">';
html += ' <ul>';
html += ' <li>Host: <input id="VNC_host"></li>';
html += ' <li>Port: <input id="VNC_port"></li>';
html += ' <li>Password: <input id="VNC_password"';
html += ' type="password"></li>';
html += ' <li><input id="VNC_connect_button" type="button"';
html += ' value="Loading" disabled></li>';
html += ' </ul>';
html += '</div>';
html += '<div id="VNC_screen">';
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>';
// Mouse button selectors for touch devices
html += ' <td width=1%><div class="VNC_buttons_right">';
html += ' <nobr><span id="VNC_mouse_buttons" style="display: none;">';
html += ' <input type="button" class="VNC_status_button"';
html += ' id="VNC_mouse_button1" value="L" onclick="UI.setMouseButton(1);"';
html += ' ><input type="button" class="VNC_status_button"';
html += ' id="VNC_mouse_button2" value="M" onclick="UI.setMouseButton(2);"';
html += ' ><input type="button" class="VNC_status_button"';
html += ' id="VNC_mouse_button4" value="R" onclick="UI.setMouseButton(4);">';
html += ' <input type="button" id="showKeyboard" onclick="showkeyboard()" value="Keyboard" />';
html += ' </span></nobr></div></td>';
// Settings drop-down menu
html += ' <td width=1%><div class="VNC_buttons_right">';
html += ' <input type=button class="VNC_status_button" value="Settings"';
html += ' id="menuButton"';
html += ' onclick="UI.clickSettingsMenu();">';
html += ' <span id="VNC_settings_menu"';
html += ' onmouseover="UI.displayBlur();"';
html += ' onmouseout="UI.displayFocus();">';
html += ' <ul>';
html += ' <li><input id="VNC_encrypt"';
html += ' type="checkbox"> Encrypt</li>';
html += ' <li><input id="VNC_true_color"';
html += ' type="checkbox" checked> True Color</li>';
html += ' <li><input id="VNC_cursor"';
html += ' type="checkbox"> Local Cursor</li>';
html += ' <li><input id="VNC_shared"';
html += ' type="checkbox"> Shared Mode</li>';
html += ' <li><input id="VNC_connectTimeout"';
html += ' type="input"> Connect Timeout (s)</li>';
html += ' <hr>';
// Stylesheet selection dropdown
html += ' <li><select id="VNC_stylesheet" name="vncStyle">';
html += ' <option value="default">default</option>';
sheet = WebUtil.selectStylesheet(); sheet = WebUtil.selectStylesheet();
sheets = WebUtil.getStylesheets(); sheets = WebUtil.getStylesheets();
for (i = 0; i < sheets.length; i += 1) { for (i = 0; i < sheets.length; i += 1) {
html += '<option value="' + sheets[i].title + '">' + sheets[i].title + '</option>'; addOption($D('noVNC_stylesheet'),sheets[i].title, sheets[i].title);
} }
html += ' </select> Style</li>';
// Logging selection dropdown // Logging selection dropdown
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 += 1) { for (i = 0; i < llevels.length; i += 1) {
html += '<option value="' + llevels[i] + '">' + llevels[i] + '</option>'; addOption($D('noVNC_logging'),llevels[i], llevels[i]);
} }
html += ' </select> Logging</li>';
html += ' <hr>';
html += ' <li><input type="button" id="VNC_apply" value="Apply"';
html += ' onclick="UI.settingsApply()"></li>';
html += ' </ul>';
html += ' </span></div></td>';
// CtrlAltDel Button
html += ' <td width=1%><div class="VNC_buttons_right">';
html += ' <input type=button class="VNC_status_button" value="CtrlAltDel"';
html += ' id="sendCtrlAltDelButton"';
html += ' onclick="UI.sendCtrlAltDel();"></div></td>';
html += ' </tr></table>';
html += ' </div>';
html += ' <canvas id="VNC_canvas" width="640px" height="20px">';
html += ' Canvas not supported.';
html += ' </canvas>';
html += '<input id="keyboardinput" style="border:none;" type="text" onKeyDown="onKeyDown(event);"/>';
html += '</div>';
html += '<br><br>';
html += '<div id="VNC_clipboard">';
html += ' VNC Clipboard:';
html += ' <input id="VNC_clipboard_clear_button"';
html += ' type="button" value="Clear"';
html += ' onclick="UI.clipClear();">';
html += ' <br>';
html += ' <textarea id="VNC_clipboard_text" cols=80 rows=5';
html += ' onfocus="UI.displayBlur();"';
html += ' onblur="UI.displayFocus();"';
html += ' onchange="UI.clipSend();"></textarea>';
html += '</div>';
target.innerHTML = html;
// Settings with immediate effects // Settings with immediate effects
UI.initSetting('logging', 'warn'); UI.initSetting('logging', 'warn');
WebUtil.init_logging(UI.getSetting('logging')); WebUtil.init_logging(UI.getSetting('logging'));
...@@ -148,38 +42,46 @@ load: function(target) { ...@@ -148,38 +42,46 @@ load: function(target) {
WebUtil.selectStylesheet(UI.getSetting('stylesheet')); WebUtil.selectStylesheet(UI.getSetting('stylesheet'));
/* Populate the controls if defaults are provided in the URL */ /* Populate the controls if defaults are provided in the URL */
UI.initSetting('host', ''); UI.initSetting('host', '');
UI.initSetting('port', ''); UI.initSetting('port', '');
UI.initSetting('password', ''); UI.initSetting('password', '');
UI.initSetting('encrypt', false); UI.initSetting('encrypt', false);
UI.initSetting('true_color', true); UI.initSetting('true_color', true);
UI.initSetting('cursor', false); UI.initSetting('cursor', false);
UI.initSetting('shared', true); UI.initSetting('shared', true);
UI.initSetting('connectTimeout', 2); UI.initSetting('connectTimeout', 2);
UI.rfb = RFB({'target': $D('VNC_canvas'), UI.rfb = RFB({'target': $D('noVNC_canvas'),
'onUpdateState': UI.updateState, 'onUpdateState': UI.updateState,
'onClipboard': UI.clipReceive}); 'onClipboard': UI.clipReceive});
// Unfocus clipboard when over the VNC area // Unfocus clipboard when over the VNC area
$D('VNC_screen').onmousemove = function () { //$D('VNC_screen').onmousemove = function () {
var keyboard = UI.rfb.get_keyboard(); // var keyboard = UI.rfb.get_keyboard();
if ((! keyboard) || (! keyboard.get_focused())) { // if ((! keyboard) || (! keyboard.get_focused())) {
$D('VNC_clipboard_text').blur(); // $D('VNC_clipboard_text').blur();
} // }
}; // };
// Show mouse selector buttons on touch screen devices // Show mouse selector buttons on touch screen devices
if ('ontouchstart' in document.documentElement) { if ('ontouchstart' in document.documentElement) {
$D('VNC_mouse_buttons').style.display = "inline"; $D('noVNC_mobile_buttons').style.display = "inline";
UI.setMouseButton(); UI.setMouseButton();
window.scrollTo(0, 1);
} }
//iOS Safari does not support CSS position:fixed. This detects iOS devices and enables javascript workaround.
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
alert("here");
setOnscroll();
setResize();
}
}, },
// Read form control compatible setting from cookie // Read form control compatible setting from cookie
getSetting: function(name) { getSetting: function(name) {
var val, ctrl = $D('VNC_' + name); var val, ctrl = $D('noVNC_' + name);
val = WebUtil.readCookie(name); val = WebUtil.readCookie(name);
if (ctrl.type === 'checkbox') { if (ctrl.type === 'checkbox') {
if (val.toLowerCase() in {'0':1, 'no':1, 'false':1}) { if (val.toLowerCase() in {'0':1, 'no':1, 'false':1}) {
...@@ -194,16 +96,23 @@ getSetting: function(name) { ...@@ -194,16 +96,23 @@ getSetting: function(name) {
// Update cookie and form control setting. If value is not set, then // Update cookie and form control setting. If value is not set, then
// updates from control to current cookie setting. // updates from control to current cookie setting.
updateSetting: function(name, value) { updateSetting: function(name, value) {
var i, ctrl = $D('VNC_' + name);
var i, ctrl = $D('noVNC_' + name);
// Save the cookie for this session // Save the cookie for this session
if (typeof value !== 'undefined') { if (typeof value !== 'undefined') {
WebUtil.createCookie(name, value); WebUtil.createCookie(name, value);
} }
if(name === 'host')
{
}
// Update the settings control // Update the settings control
value = UI.getSetting(name); value = UI.getSetting(name);
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 += 1) { for (i = 0; i < ctrl.options.length; i += 1) {
if (ctrl.options[i].value === value) { if (ctrl.options[i].value === value) {
...@@ -212,13 +121,18 @@ updateSetting: function(name, value) { ...@@ -212,13 +121,18 @@ updateSetting: function(name, value) {
} }
} }
} else { } else {
/*Weird IE9 error leads to 'null' appearring in textboxes instead of ''.*/
if(value === null)
{
value = "";
}
ctrl.value = value; ctrl.value = value;
} }
}, },
// Save control setting to cookie // Save control setting to cookie
saveSetting: function(name) { saveSetting: function(name) {
var val, ctrl = $D('VNC_' + name); var val, ctrl = $D('noVNC_' + name);
if (ctrl.type === 'checkbox') { if (ctrl.type === 'checkbox') {
val = ctrl.checked; val = ctrl.checked;
} else if (typeof ctrl.options !== 'undefined') { } else if (typeof ctrl.options !== 'undefined') {
...@@ -261,7 +175,7 @@ clickSettingsMenu: function() { ...@@ -261,7 +175,7 @@ clickSettingsMenu: function() {
UI.updateSetting('cursor'); UI.updateSetting('cursor');
} else { } else {
UI.updateSetting('cursor', false); UI.updateSetting('cursor', false);
$D('VNC_cursor').disabled = true; $D('noVNC_cursor').disabled = true;
} }
UI.updateSetting('shared'); UI.updateSetting('shared');
UI.updateSetting('connectTimeout'); UI.updateSetting('connectTimeout');
...@@ -274,29 +188,37 @@ clickSettingsMenu: function() { ...@@ -274,29 +188,37 @@ clickSettingsMenu: function() {
// Open menu // Open menu
openSettingsMenu: function() { openSettingsMenu: function() {
$D('VNC_settings_menu').style.display = "block"; if(UI.clipboardOpen == true)
{
UI.showClipboard();
}
//Close connection settings if open
if(UI.ConnSettingsOpen == true) {
connectPanelbutton();
}
$D('noVNC_Settings').style.display = "block";
UI.settingsOpen = true; UI.settingsOpen = true;
}, },
// Close menu (without applying settings) // Close menu (without applying settings)
closeSettingsMenu: function() { closeSettingsMenu: function() {
$D('VNC_settings_menu').style.display = "none"; $D('noVNC_Settings').style.display = "none";
UI.settingsOpen = false; UI.settingsOpen = false;
}, },
// Disable/enable controls depending on connection state // Disable/enable controls depending on connection state
settingsDisabled: function(disabled, rfb) { settingsDisabled: function(disabled, rfb) {
//Util.Debug(">> settingsDisabled"); //Util.Debug(">> settingsDisabled");
$D('VNC_encrypt').disabled = disabled; $D('noVNC_encrypt').disabled = disabled;
$D('VNC_true_color').disabled = disabled; $D('noVNC_true_color').disabled = disabled;
if (rfb && rfb.get_display() && rfb.get_display().get_cursor_uri()) { if (rfb && rfb.get_display() && rfb.get_display().get_cursor_uri()) {
$D('VNC_cursor').disabled = disabled; $D('noVNC_cursor').disabled = disabled;
} else { } else {
UI.updateSetting('cursor', false); UI.updateSetting('cursor', false);
$D('VNC_cursor').disabled = true; $D('noVNC_cursor').disabled = true;
} }
$D('VNC_shared').disabled = disabled; $D('noVNC_shared').disabled = disabled;
$D('VNC_connectTimeout').disabled = disabled; $D('noVNC_connectTimeout').disabled = disabled;
//Util.Debug("<< settingsDisabled"); //Util.Debug("<< settingsDisabled");
}, },
...@@ -316,14 +238,13 @@ settingsApply: function() { ...@@ -316,14 +238,13 @@ settingsApply: function() {
// Settings with immediate (non-connected related) effect // Settings with immediate (non-connected related) effect
WebUtil.selectStylesheet(UI.getSetting('stylesheet')); WebUtil.selectStylesheet(UI.getSetting('stylesheet'));
WebUtil.init_logging(UI.getSetting('logging')); WebUtil.init_logging(UI.getSetting('logging'));
//Util.Debug("<< settingsApply"); //Util.Debug("<< settingsApply");
}, },
setPassword: function() { setPassword: function() {
UI.rfb.sendPassword($D('VNC_password').value); UI.rfb.sendPassword($D('noVNC_password').value);
return false; return false;
}, },
...@@ -348,7 +269,7 @@ setMouseButton: function(num) { ...@@ -348,7 +269,7 @@ setMouseButton: function(num) {
} }
for (b = 0; b < blist.length; b++) { for (b = 0; b < blist.length; b++) {
button = $D('VNC_mouse_button' + blist[b]); button = $D('noVNC_mouse_button' + blist[b]);
if (blist[b] === num) { if (blist[b] === num) {
button.style.backgroundColor = "black"; button.style.backgroundColor = "black";
button.style.color = "lightgray"; button.style.color = "lightgray";
...@@ -357,14 +278,13 @@ setMouseButton: function(num) { ...@@ -357,14 +278,13 @@ setMouseButton: function(num) {
button.style.color = ""; button.style.color = "";
} }
} }
}, },
updateState: function(rfb, state, oldstate, msg) { updateState: function(rfb, state, oldstate, msg) {
var s, sb, c, cad, klass; var s, sb, c, cad, klass;
s = $D('VNC_status'); s = $D('noVNC_status');
sb = $D('VNC_status_bar'); sb = $D('noVNC_status_bar');
c = $D('VNC_connect_button'); c = $D('noVNC_connect_button');
cad = $D('sendCtrlAltDelButton'); cad = $D('sendCtrlAltDelButton');
switch (state) { switch (state) {
case 'failed': case 'failed':
...@@ -372,7 +292,7 @@ updateState: function(rfb, state, oldstate, msg) { ...@@ -372,7 +292,7 @@ updateState: function(rfb, state, oldstate, msg) {
c.disabled = true; c.disabled = true;
cad.disabled = true; cad.disabled = true;
UI.settingsDisabled(true, rfb); UI.settingsDisabled(true, rfb);
klass = "VNC_status_error"; klass = "noVNC_status_error";
break; break;
case 'normal': case 'normal':
c.value = "Disconnect"; c.value = "Disconnect";
...@@ -380,9 +300,10 @@ updateState: function(rfb, state, oldstate, msg) { ...@@ -380,9 +300,10 @@ updateState: function(rfb, state, oldstate, msg) {
c.disabled = false; c.disabled = false;
cad.disabled = false; cad.disabled = false;
UI.settingsDisabled(true, rfb); UI.settingsDisabled(true, rfb);
klass = "VNC_status_normal"; klass = "noVNC_status_normal";
break; break;
case 'disconnected': case 'disconnected':
$D('noVNC_defaultScreen').style.display = "block";
case 'loaded': case 'loaded':
c.value = "Connect"; c.value = "Connect";
c.onclick = UI.connect; c.onclick = UI.connect;
...@@ -390,7 +311,7 @@ updateState: function(rfb, state, oldstate, msg) { ...@@ -390,7 +311,7 @@ updateState: function(rfb, state, oldstate, msg) {
c.disabled = false; c.disabled = false;
cad.disabled = true; cad.disabled = true;
UI.settingsDisabled(false, rfb); UI.settingsDisabled(false, rfb);
klass = "VNC_status_normal"; klass = "noVNC_status_normal";
break; break;
case 'password': case 'password':
c.value = "Send Password"; c.value = "Send Password";
...@@ -399,13 +320,13 @@ updateState: function(rfb, state, oldstate, msg) { ...@@ -399,13 +320,13 @@ updateState: function(rfb, state, oldstate, msg) {
c.disabled = false; c.disabled = false;
cad.disabled = true; cad.disabled = true;
UI.settingsDisabled(true, rfb); UI.settingsDisabled(true, rfb);
klass = "VNC_status_warn"; klass = "noVNC_status_warn";
break; break;
default: default:
c.disabled = true; c.disabled = true;
cad.disabled = true; cad.disabled = true;
UI.settingsDisabled(true, rfb); UI.settingsDisabled(true, rfb);
klass = "VNC_status_warn"; klass = "noVNC_status_warn";
break; break;
} }
...@@ -419,7 +340,7 @@ updateState: function(rfb, state, oldstate, msg) { ...@@ -419,7 +340,7 @@ updateState: function(rfb, state, oldstate, msg) {
clipReceive: function(rfb, text) { clipReceive: function(rfb, text) {
Util.Debug(">> UI.clipReceive: " + text.substr(0,40) + "..."); Util.Debug(">> UI.clipReceive: " + text.substr(0,40) + "...");
$D('VNC_clipboard_text').value = text; $D('noVNC_clipboard_text').value = text;
Util.Debug("<< UI.clipReceive"); Util.Debug("<< UI.clipReceive");
}, },
...@@ -428,10 +349,10 @@ connect: function() { ...@@ -428,10 +349,10 @@ connect: function() {
var host, port, password; var host, port, password;
UI.closeSettingsMenu(); UI.closeSettingsMenu();
connectPanelbutton();
host = $D('VNC_host').value; host = $D('noVNC_host').value;
port = $D('VNC_port').value; port = $D('noVNC_port').value;
password = $D('VNC_password').value; password = $D('noVNC_password').value;
if ((!host) || (!port)) { if ((!host) || (!port)) {
throw("Must set host and port"); throw("Must set host and port");
} }
...@@ -443,12 +364,16 @@ connect: function() { ...@@ -443,12 +364,16 @@ connect: function() {
UI.rfb.set_connectTimeout(UI.getSetting('connectTimeout')); UI.rfb.set_connectTimeout(UI.getSetting('connectTimeout'));
UI.rfb.connect(host, port, password); UI.rfb.connect(host, port, password);
//Close dialog.
setTimeout("setBarPosition()",100);
$D('noVNC_defaultScreen').style.display = "none";
}, },
disconnect: function() { disconnect: function() {
UI.closeSettingsMenu(); UI.closeSettingsMenu();
UI.rfb.disconnect(); UI.rfb.disconnect();
$D('noVNC_defaultScreen').style.display = "block";
UI.openSettingsMenu();
}, },
displayBlur: function() { displayBlur: function() {
...@@ -462,41 +387,70 @@ displayFocus: function() { ...@@ -462,41 +387,70 @@ displayFocus: function() {
}, },
clipClear: function() { clipClear: function() {
$D('VNC_clipboard_text').value = ""; $D('noVNC_clipboard_text').value = "";
UI.rfb.clipboardPasteFrom(""); UI.rfb.clipboardPasteFrom("");
}, },
clipSend: function() { clipSend: function() {
var text = $D('VNC_clipboard_text').value; var text = $D('noVNC_clipboard_text').value;
Util.Debug(">> UI.clipSend: " + text.substr(0,40) + "..."); Util.Debug(">> UI.clipSend: " + text.substr(0,40) + "...");
UI.rfb.clipboardPasteFrom(text); UI.rfb.clipboardPasteFrom(text);
Util.Debug("<< UI.clipSend"); Util.Debug("<< UI.clipSend");
},
showClipboard: function() {
//Close settings if open
if(UI.settingsOpen == true) {
UI.closeSettingsMenu();
}
//Close connection settings if open
if(UI.ConnSettingsOpen == true) {
connectPanelbutton();
}
//Toggle Connection Panel
if(UI.clipboardOpen == true)
{ $D('noVNC_clipboard').style.display = "none";
UI.clipboardOpen = false;
} else {
$D('noVNC_clipboard').style.display = "block";
UI.clipboardOpen = true;
}
} }
}; };
/* function connectPanelbutton() {
Functions for use of mobile devices native keyboards //Close connection settings if open
Added by Chris Gordon if(UI.settingsOpen == true) {
http://www.chrisgordon.com.au UI.closeSettingsMenu();
Date: 23/08/2011 }
*/ if(UI.clipboardOpen == true)
{
UI.showClipboard();
}
//Toggle Connection Panel
if(UI.ConnSettingsOpen == true)
{
$D('noVNC_controls').style.display = "none";
UI.ConnSettingsOpen = false;
} else {
$D('noVNC_controls').style.display = "block";
UI.ConnSettingsOpen = true;
}
}
function showkeyboard(){ function showkeyboard(){
//Get Current Scroll Position of Browser //Get Current Scroll Position
var scrollx = (document.all)?document.body.scrollLeft:window.pageXOffset; var scrollx = (document.all)?document.body.scrollLeft:window.pageXOffset;
var scrolly = (document.all)?document.body.scrollTop:window.pageYOffset; var scrolly = (document.all)?document.body.scrollTop:window.pageYOffset;
//Stop browser zooming on textbox when focus is set.
zoomDisable();
//Focus on hidden textbox to bring up native keyboard.
document.getElementById('keyboardinput').focus();
//Set scroll position of browser to the same position it was prior to focus. //Stop browser zooming on textbox.
scroll(scrollx,scrolly); zoomDisable();
$D('keyboardinput').focus();
//Renable user zooming. scroll(scrollx,scrolly);
//Renable user zoom.
zoomEnable(); zoomEnable();
} }
...@@ -527,3 +481,35 @@ function changeViewportMeta(newattributes) { ...@@ -527,3 +481,35 @@ function changeViewportMeta(newattributes) {
metatags[cnt].setAttribute("content", newattributes); metatags[cnt].setAttribute("content", newattributes);
} }
} }
//iOS < Version 5 does not support position fixed. Javascript workaround:
function setOnscroll() {
window.onscroll = function() {
setBarPosition();
};
}
function setResize() {
window.onResize = function() {
setBarPosition();
};
}
function setBarPosition() {
$D('VNC_mobile_bar').style.top = (window.pageYOffset) + 'px';
$D('VNC_mobile_buttons').style.left = (window.pageXOffset) + 'px';
$D('VNC_mobile_buttons_right').style.right = 0 + 'px';
var vncwidth = $('#VNC_screen').width();
$D('VNC_mobile_bar').style.width = vncwidth + 'px';
}
//Helper to add options to dropdown.
function addOption(selectbox,text,value )
{
var optn = document.createElement("OPTION");
optn.text = text;
optn.value = value;
selectbox.options.add(optn);
}
vnc.html
View file @ 53fc7392
<!DOCTYPE html> <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
<html> <html>
<!-- <head>
<!--
noVNC example: simple example using default UI noVNC example: simple example using default UI
Copyright (C) 2011 Joel Martin Copyright (C) 2011 Joel Martin
Licensed under LGPL-3 (see LICENSE.txt) Licensed under LGPL-3 (see LICENSE.txt)
--> -->
<head>
<title>noVNC</title> <meta charset="utf-8">
<meta name="viewport" content="user-scalable=1" />
<meta http-equiv="X-UA-Compatible" content="chrome=1"> <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
<link rel="stylesheet" href="include/plain.css"> Remove this if you use the .htaccess -->
<link rel="alternate stylesheet" href="include/black.css" TITLE="Black">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>noVNC</title>
<meta name="viewport" content="user-scalable=1" />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<!-- Stylesheets -->
<link rel="stylesheet" href="include/base.css" />
<link rel="alternate stylesheet" href="include/black.css" TITLE="Black" />
<!-- <!-- Google web fonts -->
<link href='http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz|Nova+Square|Orbitron:400,500,700,900|Nova+Round|Nova+Mono|Nova+Slim|Nova+Oval|Nova+Flat|Nova+Cut' rel='stylesheet' type='text/css'>
<!--
<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>
--> -->
<script src="include/vnc.js"></script>
<script src="include/ui.js"></script> <script src="include/vnc.js"></script>
</head> <script src="include/ui.js"></script>
<meta name="apple-mobile-web-app-capable" content="yes" />
<!--
<meta name="viewport" content="width=device-width,height=device-height" />
-->
<!-- App Start Icon -->
<link rel="apple-touch-startup-image" href="images/screen_640x435.png" />
<body onKeyDown="onKeyDown(event);"> <!-- For iOS devices set the icon to use if user bookmarks app on their homescreen -->
<div id='vnc'>Loading</div> <link rel="apple-touch-icon" href="images/mobileicon.png">
<link rel="apple-touch-icon-precomposed" href="images/mobileicon.png" />
</head>
<script> <body>
window.onload = function () { <div class="noVNC-control-bar">
UI.load('vnc'); <!--noVNC Mobile Device only Buttons-->
}; <div id="noVNC_mobile_buttons">
</script> <nobr>
<span class="noVNC_mouse_buttons">
<input type="button" class="noVNC_status_button" id="noVNC_mouse_button1" value="L" onclick="UI.setMouseButton(1);">
<input type="button" class="noVNC_status_button" id="noVNC_mouse_button2" value="M" onclick="UI.setMouseButton(2);">
<input type="button" class="noVNC_status_button" id="noVNC_mouse_button4" value="R" onclick="UI.setMouseButton(4);">
<input type="button" class="noVNC_status_button" value="CtrlAltDel" id="sendCtrlAltDelButton" onclick="UI.sendCtrlAltDel();">
<input type="button" id="showKeyboard" onclick="showkeyboard()" value="Keyboard" class="noVNC_status_button"/>
</span>
</nobr>
</div>
<!--noVNC Buttons-->
<div class="noVNC_mobile_buttons_right">
<input type="button" id="clipboardbutton" onclick="UI.showClipboard();" value="Clipboard" />
<input type="button" class="VNC_status_button" value="Settings" id="menuButton" onclick="UI.clickSettingsMenu();">
<input type="button" id="connectPanelbutton" class="VNC_status_button" onclick="connectPanelbutton()" value="Connection" />
</div>
<!-- Clipboard Panel -->
<div id="noVNC_clipboard" class="triangle-right top">
<textarea id="noVNC_clipboard_text" cols=88 rows=5 onfocus="UI.displayBlur();" onblur="UI.displayFocus();" onchange="UI.clipSend();">
</textarea>
<br />
<input id="noVNC_clipboard_clear_button" type="button" value="Clear" onclick="UI.clipClear();">
</div>
<!-- Settings Panel -->
<div id="noVNC_Settings" class="triangle-right top">
<span id="noVNC_settings_menu" onmouseover="UI.displayBlur();" onmouseout="UI.displayFocus();">
<ul>
<li><input id="noVNC_encrypt" type="checkbox"> Encrypt</li>
<li><input id="noVNC_true_color" type="checkbox" checked> True Color</li>
<li><input id="noVNC_cursor" type="checkbox"> Local Cursor</li>
<li><input id="noVNC_shared" type="checkbox"> Shared Mode</li>
<li><input id="noVNC_connectTimeout" type="input"> Connect Timeout (s)</li>
<hr>
<!-- Stylesheet selection dropdown -->
<li><label><strong>Style: </strong>
<select id="noVNC_stylesheet" name="vncStyle">
<option value="default">default</option>
</select></label>
</li>
</body> <!-- Logging selection dropdown -->
<li><label><strong>Logging: </strong>
<select id="noVNC_logging" name="vncLogging">
</select></label>
</li>
<hr>
<li><input type="button" id="noVNC_apply" value="Apply" onclick="UI.settingsApply()"></li>
</ul>
</span>
</div>
<!-- Connection Panel -->
<div id="noVNC_controls" class="triangle-right top">
<ul>
<li><label><strong>Host: </strong><input id="noVNC_host" /></label></li>
<li><label><strong>Port: </strong><input id="noVNC_port" /></label></li>
<li><label><strong>Password: </strong><input id="noVNC_password" type="password" /></label></li>
<li><input id="noVNC_connect_button" type="button" value="Loading" disabled></li>
</ul>
</div>
</div>
<div id="noVNC_screen">
<div id="noVNC_status_bar" class="noVNC_status_bar" style="margin-top: 0px;">
<div id="noVNC_status">Loading</div>
</div>
<!-- HTML5 Canvas -->
<h1 id="noVNC_defaultScreen"><span>no</span><br />VNC</h1>
<canvas id="noVNC_canvas" width="640px" height="20px">
Canvas not supported.
</canvas>
<input id="keyboardinput" style="display:none;" type="text" onKeyDown="onKeyDown(event);"/>
</div>
<script>
window.onload = UI.load;
</script>
</body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment