jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Chris Gordon 2011-09-05 09:46:13 +10:00 committed by Joel Martin
parent 1734b5e465
commit 53fc7392bb
5 changed files with 298 additions and 320 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

127
include/black.css
View File

@ -1,124 +1,9 @@
body {
margin: 0px;
font-size: 13px;
color: #111;
font-family: "Helvetica";
.noVNC-control-bar {
background-position:50% 100%;
}
#VNC_controls {
background: #111;
line-height: 1em;
color: #FFF;
overflow: hidden;
padding: 4px 24px;
}
#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;
.triangle-right {
border:2px solid #fff;
background:#000;
color:#fff;
}

2
include/rfb.js
View File

@ -842,9 +842,9 @@ normal_msg = function() {
//Util.Debug("red after: " + red);
green = 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);
}
Util.Debug("*** colourMap: " + display.get_colourMap());
Util.Info("Registered " + num_colours + " colourMap entries");
//Util.Debug("colourMap: " + display.get_colourMap());
break;

320
include/ui.js
View File

@ -13,131 +13,25 @@
var UI = {
settingsOpen : false,
ConnSettingsOpen : true,
clipboardOpen: false,
// Render default UI and initialize settings menu
load: function(target) {
load: function() {
var html = '', i, sheet, sheets, llevels;
/* Populate the 'target' DOM element with default UI */
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();
sheets = WebUtil.getStylesheets();
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
html += ' <li><select id="VNC_logging" name="vncLogging">';
llevels = ['error', 'warn', 'info', 'debug'];
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
UI.initSetting('logging', 'warn');
@ -157,29 +51,37 @@ load: function(target) {
UI.initSetting('shared', true);
UI.initSetting('connectTimeout', 2);
UI.rfb = RFB({'target': $D('VNC_canvas'),
UI.rfb = RFB({'target': $D('noVNC_canvas'),
'onUpdateState': UI.updateState,
'onClipboard': UI.clipReceive});
// Unfocus clipboard when over the VNC area
$D('VNC_screen').onmousemove = function () {
var keyboard = UI.rfb.get_keyboard();
if ((! keyboard) || (! keyboard.get_focused())) {
$D('VNC_clipboard_text').blur();
}
};
//$D('VNC_screen').onmousemove = function () {
// var keyboard = UI.rfb.get_keyboard();
// if ((! keyboard) || (! keyboard.get_focused())) {
// $D('VNC_clipboard_text').blur();
// }
// };
// Show mouse selector buttons on touch screen devices
if ('ontouchstart' in document.documentElement) {
$D('VNC_mouse_buttons').style.display = "inline";
$D('noVNC_mobile_buttons').style.display = "inline";
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
getSetting: function(name) {
var val, ctrl = $D('VNC_' + name);
var val, ctrl = $D('noVNC_' + name);
val = WebUtil.readCookie(name);
if (ctrl.type === 'checkbox') {
if (val.toLowerCase() in {'0':1, 'no':1, 'false':1}) {
@ -194,16 +96,23 @@ getSetting: function(name) {
// 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 = $D('VNC_' + name);
var i, ctrl = $D('noVNC_' + name);
// Save the cookie for this session
if (typeof value !== 'undefined') {
WebUtil.createCookie(name, value);
}
if(name === 'host')
{
}
// Update the settings control
value = UI.getSetting(name);
if (ctrl.type === 'checkbox') {
ctrl.checked = value;
} else if (typeof ctrl.options !== 'undefined') {
for (i = 0; i < ctrl.options.length; i += 1) {
if (ctrl.options[i].value === value) {
@ -212,13 +121,18 @@ updateSetting: function(name, value) {
}
}
} else {
/*Weird IE9 error leads to 'null' appearring in textboxes instead of ''.*/
if(value === null)
{
value = "";
}
ctrl.value = value;
}
},
// Save control setting to cookie
saveSetting: function(name) {
var val, ctrl = $D('VNC_' + name);
var val, ctrl = $D('noVNC_' + name);
if (ctrl.type === 'checkbox') {
val = ctrl.checked;
} else if (typeof ctrl.options !== 'undefined') {
@ -261,7 +175,7 @@ clickSettingsMenu: function() {
UI.updateSetting('cursor');
} else {
UI.updateSetting('cursor', false);
$D('VNC_cursor').disabled = true;
$D('noVNC_cursor').disabled = true;
}
UI.updateSetting('shared');
UI.updateSetting('connectTimeout');
@ -274,29 +188,37 @@ clickSettingsMenu: function() {
// Open menu
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;
},
// Close menu (without applying settings)
closeSettingsMenu: function() {
$D('VNC_settings_menu').style.display = "none";
$D('noVNC_Settings').style.display = "none";
UI.settingsOpen = false;
},
// Disable/enable controls depending on connection state
settingsDisabled: function(disabled, rfb) {
//Util.Debug(">> settingsDisabled");
$D('VNC_encrypt').disabled = disabled;
$D('VNC_true_color').disabled = disabled;
$D('noVNC_encrypt').disabled = disabled;
$D('noVNC_true_color').disabled = disabled;
if (rfb && rfb.get_display() && rfb.get_display().get_cursor_uri()) {
$D('VNC_cursor').disabled = disabled;
$D('noVNC_cursor').disabled = disabled;
} else {
UI.updateSetting('cursor', false);
$D('VNC_cursor').disabled = true;
$D('noVNC_cursor').disabled = true;
}
$D('VNC_shared').disabled = disabled;
$D('VNC_connectTimeout').disabled = disabled;
$D('noVNC_shared').disabled = disabled;
$D('noVNC_connectTimeout').disabled = disabled;
//Util.Debug("<< settingsDisabled");
},
@ -316,14 +238,13 @@ settingsApply: function() {
// Settings with immediate (non-connected related) effect
WebUtil.selectStylesheet(UI.getSetting('stylesheet'));
WebUtil.init_logging(UI.getSetting('logging'));
//Util.Debug("<< settingsApply");
},
setPassword: function() {
UI.rfb.sendPassword($D('VNC_password').value);
UI.rfb.sendPassword($D('noVNC_password').value);
return false;
},
@ -348,7 +269,7 @@ setMouseButton: function(num) {
}
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) {
button.style.backgroundColor = "black";
button.style.color = "lightgray";
@ -357,14 +278,13 @@ setMouseButton: function(num) {
button.style.color = "";
}
}
},
updateState: function(rfb, state, oldstate, msg) {
var s, sb, c, cad, klass;
s = $D('VNC_status');
sb = $D('VNC_status_bar');
c = $D('VNC_connect_button');
s = $D('noVNC_status');
sb = $D('noVNC_status_bar');
c = $D('noVNC_connect_button');
cad = $D('sendCtrlAltDelButton');
switch (state) {
case 'failed':
@ -372,7 +292,7 @@ updateState: function(rfb, state, oldstate, msg) {
c.disabled = true;
cad.disabled = true;
UI.settingsDisabled(true, rfb);
klass = "VNC_status_error";
klass = "noVNC_status_error";
break;
case 'normal':
c.value = "Disconnect";
@ -380,9 +300,10 @@ updateState: function(rfb, state, oldstate, msg) {
c.disabled = false;
cad.disabled = false;
UI.settingsDisabled(true, rfb);
klass = "VNC_status_normal";
klass = "noVNC_status_normal";
break;
case 'disconnected':
$D('noVNC_defaultScreen').style.display = "block";
case 'loaded':
c.value = "Connect";
c.onclick = UI.connect;
@ -390,7 +311,7 @@ updateState: function(rfb, state, oldstate, msg) {
c.disabled = false;
cad.disabled = true;
UI.settingsDisabled(false, rfb);
klass = "VNC_status_normal";
klass = "noVNC_status_normal";
break;
case 'password':
c.value = "Send Password";
@ -399,13 +320,13 @@ updateState: function(rfb, state, oldstate, msg) {
c.disabled = false;
cad.disabled = true;
UI.settingsDisabled(true, rfb);
klass = "VNC_status_warn";
klass = "noVNC_status_warn";
break;
default:
c.disabled = true;
cad.disabled = true;
UI.settingsDisabled(true, rfb);
klass = "VNC_status_warn";
klass = "noVNC_status_warn";
break;
}
@ -419,7 +340,7 @@ updateState: function(rfb, state, oldstate, msg) {
clipReceive: function(rfb, text) {
Util.Debug(">> UI.clipReceive: " + text.substr(0,40) + "...");
$D('VNC_clipboard_text').value = text;
$D('noVNC_clipboard_text').value = text;
Util.Debug("<< UI.clipReceive");
},
@ -428,10 +349,10 @@ connect: function() {
var host, port, password;
UI.closeSettingsMenu();
host = $D('VNC_host').value;
port = $D('VNC_port').value;
password = $D('VNC_password').value;
connectPanelbutton();
host = $D('noVNC_host').value;
port = $D('noVNC_port').value;
password = $D('noVNC_password').value;
if ((!host) || (!port)) {
throw("Must set host and port");
}
@ -443,12 +364,16 @@ connect: function() {
UI.rfb.set_connectTimeout(UI.getSetting('connectTimeout'));
UI.rfb.connect(host, port, password);
//Close dialog.
setTimeout("setBarPosition()",100);
$D('noVNC_defaultScreen').style.display = "none";
},
disconnect: function() {
UI.closeSettingsMenu();
UI.rfb.disconnect();
$D('noVNC_defaultScreen').style.display = "block";
UI.openSettingsMenu();
},
displayBlur: function() {
@ -462,41 +387,70 @@ displayFocus: function() {
},
clipClear: function() {
$D('VNC_clipboard_text').value = "";
$D('noVNC_clipboard_text').value = "";
UI.rfb.clipboardPasteFrom("");
},
clipSend: function() {
var text = $D('VNC_clipboard_text').value;
var text = $D('noVNC_clipboard_text').value;
Util.Debug(">> UI.clipSend: " + text.substr(0,40) + "...");
UI.rfb.clipboardPasteFrom(text);
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;
}
}
};
/*
Functions for use of mobile devices native keyboards
Added by Chris Gordon
http://www.chrisgordon.com.au
Date: 23/08/2011
*/
function connectPanelbutton() {
//Close connection settings if open
if(UI.settingsOpen == true) {
UI.closeSettingsMenu();
}
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(){
//Get Current Scroll Position of Browser
//Get Current Scroll Position
var scrollx = (document.all)?document.body.scrollLeft:window.pageXOffset;
var scrolly = (document.all)?document.body.scrollTop:window.pageYOffset;
//Stop browser zooming on textbox when focus is set.
//Stop browser zooming on textbox.
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.
scroll(scrollx,scrolly);
//Renable user zooming.
$D('keyboardinput').focus();
scroll(scrollx,scrolly);
//Renable user zoom.
zoomEnable();
}
@ -527,3 +481,35 @@ function changeViewportMeta(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);
}

131
vnc.html
View File

@ -1,33 +1,140 @@
<!DOCTYPE html>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.1//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile11.dtd">
<html>
<head>
<!--
noVNC example: simple example using default UI
Copyright (C) 2011 Joel Martin
Licensed under LGPL-3 (see LICENSE.txt)
-->
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<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">
<link rel="stylesheet" href="include/plain.css">
<link rel="alternate stylesheet" href="include/black.css" TITLE="Black">
<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'
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>
</head>
<body onKeyDown="onKeyDown(event);">
<div id='vnc'>Loading</div>
<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" />
<!-- For iOS devices set the icon to use if user bookmarks app on their homescreen -->
<link rel="apple-touch-icon" href="images/mobileicon.png">
<link rel="apple-touch-icon-precomposed" href="images/mobileicon.png" />
</head>
<body>
<div class="noVNC-control-bar">
<!--noVNC Mobile Device only Buttons-->
<div id="noVNC_mobile_buttons">
<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>
<!-- 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 = function () {
UI.load('vnc');
};
window.onload = UI.load;
</script>
</body>
</html>