diff --git a/include/base.css b/include/base.css index 32c7d686..db5d4f48 100644 --- a/include/base.css +++ b/include/base.css @@ -1,62 +1,62 @@ body { - margin:0; - padding:0; - font-family: Helvetica; - /*Background image with light grey curve.*/ - background-color:#494949; - background-repeat:no-repeat; - background-position:right bottom; - height:100%; + margin:0; + padding:0; + font-family: Helvetica; + /*Background image with light grey curve.*/ + background-color:#494949; + background-repeat:no-repeat; + background-position:right bottom; + height:100%; } html { - height:100%; + height:100%; } #noVNC_controls ul { - list-style: none; - margin: 0px; - padding: 0px; + list-style: none; + margin: 0px; + padding: 0px; } #noVNC_controls li { - padding-bottom:8px; + padding-bottom:8px; } #noVNC_host { - width:150px; -} + width:150px; +} #noVNC_port { - width: 80px; + width: 80px; } #noVNC_password { - width: 150px; + width: 150px; } #noVNC_encrypt { } #noVNC_connectTimeout { - width: 30px; + width: 30px; } #noVNC_connect_button { - width: 110px; - float:right; + width: 110px; + float:right; } /*Mobile buttons bar.*/ #noVNC-control-bar { position:fixed; background-color:#6d84a2; - background-image: -webkit-gradient( - linear, - left bottom, - left top, - color-stop(0.5, rgb(109,132,162)), - color-stop(1, rgb(140,157,179)) - ); - background-image: -moz-linear-gradient( - center bottom, - rgb(109,132,162) 50%, - rgb(140,157,179) 100% - ); + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0.5, rgb(109,132,162)), + color-stop(1, rgb(140,157,179)) + ); + background-image: -moz-linear-gradient( + center bottom, + rgb(109,132,162) 50%, + rgb(140,157,179) 100% + ); display:block; height:44px; left:0; @@ -66,182 +66,182 @@ html { } #noVNC_mobile_buttons { - position:fixed; - padding-left:10px; - padding-top:9px; - display: none; + position:fixed; + padding-left:10px; + padding-top:9px; + display: none; } - + .noVNC_mobile_buttons_right { - position:fixed; - padding-right:10px; - padding-top:9px; - right:0; + position:fixed; + padding-right:10px; + padding-top:9px; + right:0; } #noVNC_status_bar { - margin-top: 15px; - padding: 0px; + margin-top: 15px; + padding: 0px; } #noVNC_status_bar div { - font-size: 12px; - padding-top: 4px; - width:100%; - margin-top: 2px; + font-size: 12px; + padding-top: 4px; + width:100%; + margin-top: 2px; } .VNC_status_button, #clipboardbutton, #connectbutton { - font-size: 14px; + font-size: 14px; } #noVNC_status { - height:20px; - text-align: center; + height:20px; + text-align: center; } #noVNC_settings_menu { - margin: 3px; - text-align: left; + margin: 3px; + text-align: left; } #noVNC_settings_menu ul { - list-style: none; - margin: 0px; - padding: 0px; + list-style: none; + margin: 0px; + padding: 0px; } #noVNC_apply { - float:right; + float:right; } .VNC_buttons_right { - text-align: right; + text-align: right; } .VNC_buttons_left { - text-align: left; + text-align: left; } .noVNC_status_normal { - background: #eee; + background: #eee; } .noVNC_status_error { - background: #f44; + background: #f44; } -.norVNC_status_warn { - background: #ff4; +.noVNC_status_warn { + background: #ff4; } /* Do not set width/height for VNC_screen or VNC_canvas or incorrect * scaling will occur. Canvas resizes to remote VNC settings */ #noVNC_screen { - padding-top:40px; - text-align: center; - display: table; - width:100%; - height:100%; - background-color:#313131; - border-bottom-right-radius: 800px 600px; - /*border-top-left-radius: 800px 600px;*/ + padding-top:40px; + text-align: center; + display: table; + width:100%; + height:100%; + background-color:#313131; + border-bottom-right-radius: 800px 600px; + /*border-top-left-radius: 800px 600px;*/ } #VNC_canvas { - background: #eee; + background: #eee; } #VNC_clipboard_clear_button { - float:right; + float:right; } #VNC_clipboard_text { - font-size: 11px; + font-size: 11px; } #noVNC_Settings { - width:200px; + width:200px; } #noVNC_clipboard_clear_button { - float:right; + float:right; } /*Settings Bubble*/ .triangle-right { - position:relative; - padding:15px; - margin:1em 0 3em; - color:#fff; - background:#fff; /* default background for browsers without gradient support */ - /* css3 */ - /*background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698)); - background:-moz-linear-gradient(#2e88c4, #075698); - background:-o-linear-gradient(#2e88c4, #075698); - background:linear-gradient(#2e88c4, #075698);*/ - -webkit-border-radius:10px; - -moz-border-radius:10px; - border-radius:10px; - color:#000; - border:2px solid #E0E0E0; + position:relative; + padding:15px; + margin:1em 0 3em; + color:#fff; + background:#fff; /* default background for browsers without gradient support */ + /* css3 */ + /*background:-webkit-gradient(linear, 0 0, 0 100%, from(#2e88c4), to(#075698)); + background:-moz-linear-gradient(#2e88c4, #075698); + background:-o-linear-gradient(#2e88c4, #075698); + background:linear-gradient(#2e88c4, #075698);*/ + -webkit-border-radius:10px; + -moz-border-radius:10px; + border-radius:10px; + color:#000; + border:2px solid #E0E0E0; } .triangle-right.top:after { - border-color: transparent #E0E0E0; - border-width: 20px 20px 0 0; - bottom: auto; - left: auto; - right: 50px; - top: -20px; + border-color: transparent #E0E0E0; + border-width: 20px 20px 0 0; + bottom: auto; + left: auto; + right: 50px; + top: -20px; } .triangle-right:after { - content:""; - position:absolute; - bottom:-20px; /* value = - border-top-width - border-bottom-width */ - left:50px; /* controls horizontal position */ - border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */ - border-style:solid; - border-color:#E0E0E0 transparent; - /* reduce the damage in FF3.0 */ - display:block; - width:0; + content:""; + position:absolute; + bottom:-20px; /* value = - border-top-width - border-bottom-width */ + left:50px; /* controls horizontal position */ + border-width:20px 0 0 20px; /* vary these values to change the angle of the vertex */ + border-style:solid; + border-color:#E0E0E0 transparent; + /* reduce the damage in FF3.0 */ + display:block; + width:0; } .triangle-right.top:after { - top:-40px; /* value = - border-top-width - border-bottom-width */ - right:50px; /* controls horizontal position */ - bottom:auto; - left:auto; - border-width:40px 40px 0 0; /* vary these values to change the angle of the vertex */ - border-color:transparent #E0E0E0; + top:-40px; /* value = - border-top-width - border-bottom-width */ + right:50px; /* controls horizontal position */ + bottom:auto; + left:auto; + border-width:40px 40px 0 0; /* vary these values to change the angle of the vertex */ + border-color:transparent #E0E0E0; } /*Bubble contents divs*/ #noVNC_Settings { - margin-top:72px; - position:fixed; - right:100px; - display:none; + margin-top:72px; + position:fixed; + right:100px; + display:none; } #noVNC_controls { - margin-top:72px; - position:fixed; - right:10px; + margin-top:72px; + position:fixed; + right:10px; } #noVNC_clipboard { - display:none; - margin-top:72px; - position:fixed; - right:180px; + display:none; + margin-top:72px; + position:fixed; + right:180px; } /*Default noVNC screen.*/ #noVNC_defaultScreen { - width:400px; - margin-left:auto; - margin-right:auto; - font-size:160px; - color:yellow; - text-align:left; - font-family: 'Orbitron', sans-serif; - line-height:90%; - text-shadow: + width:400px; + margin-left:auto; + margin-right:auto; + font-size:160px; + color:yellow; + text-align:left; + font-family: 'Orbitron', sans-serif; + line-height:90%; + text-shadow: 5px 5px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, @@ -250,16 +250,16 @@ html { } #noVNC_defaultScreen span{ - color:green; + color:green; } #keyboardinput { - width:0px; - height:0px; - background-color:#313131; - border:0; + width:0px; + height:0px; + background-color:#313131; + border:0; } .noVNC_status_warn { - background-color:yellow; -} \ No newline at end of file + background-color:yellow; +} diff --git a/include/black.css b/include/black.css index 297cfb06..a194dca2 100644 --- a/include/black.css +++ b/include/black.css @@ -1,21 +1,21 @@ #noVNC-control-bar { - background-color:#000; - background-image: -webkit-gradient( - linear, - left bottom, - left top, - color-stop(0.5, rgb(0,0,0)), - color-stop(0.5, rgb(20,20,20)) - ); - background-image: -moz-linear-gradient( - center bottom, - rgb(0,0,0) 50%, - rgb(20,20,20) 50% - ); + background-color:#000; + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0.5, rgb(0,0,0)), + color-stop(0.5, rgb(20,20,20)) + ); + background-image: -moz-linear-gradient( + center bottom, + rgb(0,0,0) 50%, + rgb(20,20,20) 50% + ); } .triangle-right { - border:2px solid #fff; - background:#000; - color:#fff; -} \ No newline at end of file + border:2px solid #fff; + background:#000; + color:#fff; +} diff --git a/include/blue.css b/include/blue.css index 01c06506..f3de920c 100644 --- a/include/blue.css +++ b/include/blue.css @@ -1,22 +1,22 @@ #noVNC-control-bar { - background-color:#04073d; - background-image: -webkit-gradient( - linear, - left bottom, - left top, - color-stop(0.54, rgb(10,15,79)), - color-stop(0.5, rgb(4,7,61)) - ); - background-image: -moz-linear-gradient( - center bottom, - rgb(10,15,79) 54%, - rgb(4,7,61) 50% - ); + background-color:#04073d; + background-image: -webkit-gradient( + linear, + left bottom, + left top, + color-stop(0.54, rgb(10,15,79)), + color-stop(0.5, rgb(4,7,61)) + ); + background-image: -moz-linear-gradient( + center bottom, + rgb(10,15,79) 54%, + rgb(4,7,61) 50% + ); } .triangle-right { - border:2px solid #fff; - background:#04073d; - color:#fff; -} \ No newline at end of file + border:2px solid #fff; + background:#04073d; + color:#fff; +} diff --git a/include/ui.js b/include/ui.js index eda0e361..37ca533c 100644 --- a/include/ui.js +++ b/include/ui.js @@ -20,26 +20,26 @@ clipboardOpen: false, load: function() { var html = '', i, sheet, sheets, llevels; - // Stylesheet selection dropdown + // Stylesheet selection dropdown sheet = WebUtil.selectStylesheet(); sheets = WebUtil.getStylesheets(); for (i = 0; i < sheets.length; i += 1) { - UI.addOption($D('noVNC_stylesheet'),sheets[i].title, sheets[i].title); + UI.addOption($D('noVNC_stylesheet'),sheets[i].title, sheets[i].title); } // Logging selection dropdown llevels = ['error', 'warn', 'info', 'debug']; for (i = 0; i < llevels.length; i += 1) { - UI.addOption($D('noVNC_logging'),llevels[i], llevels[i]); + UI.addOption($D('noVNC_logging'),llevels[i], llevels[i]); } - + // Settings with immediate effects UI.initSetting('logging', 'warn'); WebUtil.init_logging(UI.getSetting('logging')); UI.initSetting('stylesheet', 'default'); WebUtil.selectStylesheet(null); - // call twice to get around webkit bug + // call twice to get around webkit bug WebUtil.selectStylesheet(UI.getSetting('stylesheet')); /* Populate the controls if defaults are provided in the URL */ @@ -63,24 +63,24 @@ load: function() { // $D('VNC_clipboard_text').blur(); // } // }; - + // Show mouse selector buttons on touch screen devices if ('ontouchstart' in document.documentElement) { $D('noVNC_mobile_buttons').style.display = "inline"; UI.setMouseButton(); - window.scrollTo(0, 1); + 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))) { - UI.setOnscroll(); - UI.setResize(); - } - - $D('noVNC_host').focus(); + //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))) { + UI.setOnscroll(); + UI.setResize(); + } + + $D('noVNC_host').focus(); }, // Read form control compatible setting from cookie @@ -106,17 +106,13 @@ updateSetting: function(name, value) { 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) { @@ -125,12 +121,11 @@ updateSetting: function(name, value) { } } } else { - /*Weird IE9 error leads to 'null' appearring - in textboxes instead of ''.*/ - if(value === null) - { - value = ""; - } + /*Weird IE9 error leads to 'null' appearring + in textboxes instead of ''.*/ + if (value === null) { + value = ""; + } ctrl.value = value; } }, @@ -193,15 +188,14 @@ clickSettingsMenu: function() { // Open menu openSettingsMenu: function() { - if(UI.clipboardOpen == true) - { - UI.showClipboard(); - } - //Close connection settings if open - if(UI.connSettingsOpen == true) { - UI.connectPanelbutton(); - } - $D('noVNC_Settings').style.display = "block"; + if (UI.clipboardOpen == true) { + UI.showClipboard(); + } + //Close connection settings if open + if (UI.connSettingsOpen == true) { + UI.connectPanelbutton(); + } + $D('noVNC_Settings').style.display = "block"; UI.settingsOpen = true; }, @@ -250,11 +244,11 @@ settingsApply: function() { setPassword: function() { UI.rfb.sendPassword($D('noVNC_password').value); - //Reset connect button. - $D('noVNC_connect_button').value = "Connect"; + //Reset connect button. + $D('noVNC_connect_button').value = "Connect"; $D('noVNC_connect_button').onclick = UI.Connect; - //Hide connection panel. - UI.connectPanelbutton(); + //Hide connection panel. + UI.connectPanelbutton(); return false; }, @@ -304,7 +298,7 @@ updateState: function(rfb, state, oldstate, msg) { UI.settingsDisabled(true, rfb); klass = "noVNC_status_error"; break; - case 'normal': + case 'normal': c.value = "Disconnect"; c.onclick = UI.disconnect; c.disabled = false; @@ -313,8 +307,8 @@ updateState: function(rfb, state, oldstate, msg) { klass = "noVNC_status_normal"; break; case 'disconnected': - $D('noVNC_defaultScreen').style.display = "block"; - c.value = "Connection"; + $D('noVNC_defaultScreen').style.display = "block"; + c.value = "Connection"; c.onclick = UI.connectPanelbutton; case 'loaded': c.value = "Connection"; @@ -325,12 +319,12 @@ updateState: function(rfb, state, oldstate, msg) { klass = "noVNC_status_normal"; break; case 'password': - UI.connectPanelbutton(); + UI.connectPanelbutton(); $D('noVNC_connect_button').value = "Send Password"; $D('noVNC_connect_button').onclick = UI.setPassword; - $D('noVNC_password').focus(); - + $D('noVNC_password').focus(); + c.disabled = false; cad.style.display = "none"; UI.settingsDisabled(true, rfb); @@ -363,7 +357,7 @@ connect: function() { var host, port, password; UI.closeSettingsMenu(); - UI.connectPanelbutton(); + UI.connectPanelbutton(); host = $D('noVNC_host').value; port = $D('noVNC_port').value; @@ -379,18 +373,18 @@ 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"; + //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.connSettingsOpen = false; - UI.connectPanelbutton(); + + $D('noVNC_defaultScreen').style.display = "block"; + UI.connSettingsOpen = false; + UI.connectPanelbutton(); }, displayBlur: function() { @@ -416,38 +410,38 @@ clipSend: function() { }, showClipboard: function() { - //Close settings if open - if(UI.settingsOpen == true) { - UI.closeSettingsMenu(); - } - //Close connection settings if open - if(UI.connSettingsOpen == true) { - UI.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; - } + //Close settings if open + if (UI.settingsOpen == true) { + UI.closeSettingsMenu(); + } + //Close connection settings if open + if (UI.connSettingsOpen == true) { + UI.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; + } }, showKeyboard: function() { - //Get Current Scroll Position - var scrollx = - (document.all)?document.body.scrollLeft:window.pageXOffset; - var scrolly = - (document.all)?document.body.scrollTop:window.pageYOffset; + //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. - UI.zoomDisable(); - $D('keyboardinput').focus(); - scroll(scrollx,scrolly); - //Renable user zoom. - UI.zoomEnable(); + //Stop browser zooming on textbox. + UI.zoomDisable(); + $D('keyboardinput').focus(); + scroll(scrollx,scrolly); + //Renable user zoom. + UI.zoomEnable(); }, zoomDisable: function() { @@ -462,73 +456,71 @@ zoomEnable: function(){ changeViewportMeta: function (newattributes) { - // First, get the array of meta-tag elements + // First, get the array of meta-tag elements var metatags = document.getElementsByTagName("meta"); // Update only the Viewport meta tag for (var cnt = 0; cnt < metatags.length; cnt++) { - var name = metatags[cnt].getAttribute("name"); var content = metatags[cnt].getAttribute("content"); // Update the Viewport meta tag - if (metatags[cnt].getAttribute("name") == "viewport") - metatags[cnt].setAttribute("content", newattributes); + if (metatags[cnt].getAttribute("name") == "viewport") { + metatags[cnt].setAttribute("content", newattributes); + } } }, //iOS < Version 5 does not support position fixed. Javascript workaround: setOnscroll: function() { - window.onscroll = function() { - UI.setBarPosition(); - }; + window.onscroll = function() { + UI.setBarPosition(); + }; }, setResize: function () { - window.onResize = function() { - UI.setBarPosition(); - }; + window.onResize = function() { + UI.setBarPosition(); + }; }, //Helper to add options to dropdown. addOption: function(selectbox,text,value ) { - var optn = document.createElement("OPTION"); - optn.text = text; - optn.value = value; - selectbox.options.add(optn); + var optn = document.createElement("OPTION"); + optn.text = text; + optn.value = value; + selectbox.options.add(optn); }, setBarPosition: function() { - $D('noVNC-control-bar').style.top = (window.pageYOffset) + 'px'; - $D('noVNC_mobile_buttons').style.left = (window.pageXOffset) + 'px'; - $D('noVNC_mobile_buttons_right').style.right = 0 + 'px'; - - var vncwidth = $('#noVNC_screen').width(); - $D('noVNC-control-bar').style.width = vncwidth + 'px'; + $D('noVNC-control-bar').style.top = (window.pageYOffset) + 'px'; + $D('noVNC_mobile_buttons').style.left = (window.pageXOffset) + 'px'; + $D('noVNC_mobile_buttons_right').style.right = 0 + 'px'; + + var vncwidth = $('#noVNC_screen').width(); + $D('noVNC-control-bar').style.width = vncwidth + 'px'; }, connectPanelbutton: function() { - //Close connection settings if open - if(UI.settingsOpen == true) { - UI.closeSettingsMenu(); - } - if(UI.clipboardOpen == true) - { - UI.showClipboard(); - } + //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; - $D('noVNC_host').focus(); - } + //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; + $D('noVNC_host').focus(); + } } }; diff --git a/vnc.html b/vnc.html index c909fbd8..d5702b56 100644 --- a/vnc.html +++ b/vnc.html @@ -7,135 +7,150 @@ Copyright (C) 2011 Joel Martin Licensed under LGPL-3 (see LICENSE.txt) --> - - + noVNC - - - + + + + + + + + - noVNC - - - - - - + + - - - - - - - - - - - - - - - + + + + + + + + + + + + + + + - - - - -
- -
- - - - - - - - -
- - -
- - - - -
- - -
- -
- -
- - -
- -
    -
  • Encrypt
  • -
  • True Color
  • -
  • Local Cursor
  • -
  • Shared Mode
  • -
  • Connect Timeout (s)
  • -
    - -
  • -
  • +
    + +
    + + + + + + + + +
    - -
  • -
  • -
    -
  • -
-
-
- - -
- -
- -
- -
-
-
Loading
-
- - -

no
VNC

- - Canvas not supported. - - - -
+ +
+ + + + +
+ + +
+ +
+ +
+ + +
+ + + +
+ + +
+ +
+ + + +
+
+
Loading
+
+ + +

no
VNC

+ + Canvas not supported. + + + +
- +