]>
git.proxmox.com Git - mirror_novnc.git/blob - include/ui.js
2 * noVNC: HTML5 VNC client
3 * Copyright (C) 2012 Joel Martin
4 * Copyright (C) 2016 Samuel Mannehed for Cendio AB
5 * Licensed under MPL 2.0 (see LICENSE.txt)
7 * See README.md for usage and integration instructions.
10 /* jslint white: false, browser: true */
11 /* global window, $D, Util, WebUtil, RFB, Display */
18 // Load supporting scripts
19 window
.onscriptsload = function () { UI
.load(); };
20 Util
.load_scripts(["webutil.js", "base64.js", "websock.js", "des.js",
21 "keysymdef.js", "keyboard.js", "input.js", "display.js",
22 "rfb.js", "keysym.js", "inflator.js"]);
29 popupStatusTimeout
: null,
30 hideKeyboardTimeout
: null,
33 connSettingsOpen
: false,
35 keyboardVisible
: false,
39 rememberedClipSetting
: null,
40 lastKeyboardinput
: null,
41 defaultKeyboardinputLen
: 100,
48 // Setup rfb object, load settings from browser storage, then call
49 // UI.init to setup the UI/menus
50 load: function(callback
) {
51 WebUtil
.initSettings(UI
.start
, callback
);
54 // Render default UI and initialize settings menu
55 start: function(callback
) {
56 UI
.isTouchDevice
= 'ontouchstart' in document
.documentElement
;
58 // Stylesheet selection dropdown
59 var sheet
= WebUtil
.selectStylesheet();
60 var sheets
= WebUtil
.getStylesheets();
62 for (i
= 0; i
< sheets
.length
; i
+= 1) {
63 UI
.addOption($D('noVNC_stylesheet'),sheets
[i
].title
, sheets
[i
].title
);
66 // Logging selection dropdown
67 var llevels
= ['error', 'warn', 'info', 'debug'];
68 for (i
= 0; i
< llevels
.length
; i
+= 1) {
69 UI
.addOption($D('noVNC_logging'),llevels
[i
], llevels
[i
]);
72 // Settings with immediate effects
73 UI
.initSetting('logging', 'warn');
74 WebUtil
.init_logging(UI
.getSetting('logging'));
76 UI
.initSetting('stylesheet', 'default');
77 WebUtil
.selectStylesheet(null);
78 // call twice to get around webkit bug
79 WebUtil
.selectStylesheet(UI
.getSetting('stylesheet'));
81 // if port == 80 (or 443) then it won't be present and should be
83 var port
= window
.location
.port
;
85 if (window
.location
.protocol
.substring(0,5) == 'https') {
88 else if (window
.location
.protocol
.substring(0,4) == 'http') {
93 /* Populate the controls if defaults are provided in the URL */
94 UI
.initSetting('host', window
.location
.hostname
);
95 UI
.initSetting('port', port
);
96 UI
.initSetting('password', '');
97 UI
.initSetting('encrypt', (window
.location
.protocol
=== "https:"));
98 UI
.initSetting('true_color', true);
99 UI
.initSetting('cursor', !UI
.isTouchDevice
);
100 UI
.initSetting('resize', 'off');
101 UI
.initSetting('shared', true);
102 UI
.initSetting('view_only', false);
103 UI
.initSetting('path', 'websockify');
104 UI
.initSetting('repeaterID', '');
105 UI
.initSetting('token', '');
107 var autoconnect
= WebUtil
.getConfigVar('autoconnect', false);
108 if (autoconnect
=== 'true' || autoconnect
== '1') {
115 UI
.updateVisualState();
117 $D('noVNC_host').focus();
119 // Show mouse selector buttons on touch screen devices
120 if (UI
.isTouchDevice
) {
121 // Show mobile buttons
122 $D('noVNC_mobile_buttons').style
.display
= "inline";
124 // Remove the address bar
125 setTimeout(function() { window
.scrollTo(0, 1); }, 100);
126 UI
.forceSetting('clip', true);
128 UI
.initSetting('clip', false);
134 Util
.addEvent(window
, 'resize', function () {
135 UI
.applyResizeMode();
141 UI
.isSafari
= (navigator
.userAgent
.indexOf('Safari') != -1 &&
142 navigator
.userAgent
.indexOf('Chrome') == -1);
144 // Only show the button if fullscreen is properly supported
145 // * Safari doesn't support alphanumerical input while in fullscreen
147 (document
.documentElement
.requestFullscreen
||
148 document
.documentElement
.mozRequestFullScreen
||
149 document
.documentElement
.webkitRequestFullscreen
||
150 document
.body
.msRequestFullscreen
)) {
151 $D('fullscreenButton').style
.display
= "inline";
152 Util
.addEvent(window
, 'fullscreenchange', UI
.updateFullscreenButton
);
153 Util
.addEvent(window
, 'mozfullscreenchange', UI
.updateFullscreenButton
);
154 Util
.addEvent(window
, 'webkitfullscreenchange', UI
.updateFullscreenButton
);
155 Util
.addEvent(window
, 'msfullscreenchange', UI
.updateFullscreenButton
);
158 Util
.addEvent(window
, 'load', UI
.keyboardinputReset
);
160 Util
.addEvent(window
, 'beforeunload', function () {
161 if (UI
.rfb
&& UI
.rfb_state
=== 'normal') {
162 return "You are currently connected.";
166 // Show description by default when hosted at for kanaka.github.com
167 if (location
.host
=== "kanaka.github.io") {
168 // Open the description dialog
169 $D('noVNC_description').style
.display
= "block";
171 // Show the connect panel on first load unless autoconnecting
172 if (autoconnect
=== UI
.connSettingsOpen
) {
173 UI
.toggleConnectPanel();
177 // Add mouse event click/focus/blur event handlers to the UI
178 UI
.addMouseHandlers();
180 if (typeof callback
=== "function") {
185 initRFB: function() {
187 UI
.rfb
= new RFB({'target': $D('noVNC_canvas'),
188 'onUpdateState': UI
.updateState
,
189 'onXvpInit': UI
.updateXvpVisualState
,
190 'onClipboard': UI
.clipReceive
,
191 'onFBUComplete': UI
.initialResize
,
192 'onFBResize': UI
.updateViewDrag
,
193 'onDesktopName': UI
.updateDocumentTitle
});
196 UI
.updateState(null, 'fatal', null, 'Unable to create RFB client -- ' + exc
);
201 addMouseHandlers: function() {
202 // Setup interface handlers that can't be inline
203 $D("noVNC_view_drag_button").onclick
= UI
.toggleViewDrag
;
204 $D("noVNC_mouse_button0").onclick = function () { UI
.setMouseButton(1); };
205 $D("noVNC_mouse_button1").onclick = function () { UI
.setMouseButton(2); };
206 $D("noVNC_mouse_button2").onclick = function () { UI
.setMouseButton(4); };
207 $D("noVNC_mouse_button4").onclick = function () { UI
.setMouseButton(0); };
208 $D("showKeyboard").onclick
= UI
.showKeyboard
;
210 $D("keyboardinput").oninput
= UI
.keyInput
;
211 $D("keyboardinput").onblur
= UI
.keyInputBlur
;
212 $D("keyboardinput").onsubmit = function () { return false; };
214 $D("showExtraKeysButton").onclick
= UI
.showExtraKeys
;
215 $D("toggleCtrlButton").onclick
= UI
.toggleCtrl
;
216 $D("toggleAltButton").onclick
= UI
.toggleAlt
;
217 $D("sendTabButton").onclick
= UI
.sendTab
;
218 $D("sendEscButton").onclick
= UI
.sendEsc
;
220 $D("sendCtrlAltDelButton").onclick
= UI
.sendCtrlAltDel
;
221 $D("xvpShutdownButton").onclick
= UI
.xvpShutdown
;
222 $D("xvpRebootButton").onclick
= UI
.xvpReboot
;
223 $D("xvpResetButton").onclick
= UI
.xvpReset
;
224 $D("noVNC_status").onclick
= UI
.togglePopupStatus
;
225 $D("noVNC_popup_status").onclick
= UI
.togglePopupStatus
;
226 $D("xvpButton").onclick
= UI
.toggleXvpPanel
;
227 $D("clipboardButton").onclick
= UI
.toggleClipboardPanel
;
228 $D("fullscreenButton").onclick
= UI
.toggleFullscreen
;
229 $D("settingsButton").onclick
= UI
.toggleSettingsPanel
;
230 $D("connectButton").onclick
= UI
.toggleConnectPanel
;
231 $D("disconnectButton").onclick
= UI
.disconnect
;
232 $D("descriptionButton").onclick
= UI
.toggleConnectPanel
;
234 $D("noVNC_clipboard_text").onfocus
= UI
.displayBlur
;
235 $D("noVNC_clipboard_text").onblur
= UI
.displayFocus
;
236 $D("noVNC_clipboard_text").onchange
= UI
.clipSend
;
237 $D("noVNC_clipboard_clear_button").onclick
= UI
.clipClear
;
239 $D("noVNC_settings_menu").onmouseover
= UI
.displayBlur
;
240 $D("noVNC_settings_menu").onmouseover
= UI
.displayFocus
;
241 $D("noVNC_apply").onclick
= UI
.settingsApply
;
243 $D("noVNC_connect_button").onclick
= UI
.connect
;
245 $D("noVNC_resize").onchange
= UI
.enableDisableViewClip
;
248 updateState: function(rfb
, state
, oldstate
, msg
) {
249 UI
.rfb_state
= state
;
254 klass
= "noVNC_status_error";
257 klass
= "noVNC_status_normal";
260 $D('noVNC_logo').style
.display
= "block";
261 $D('noVNC_screen').style
.display
= "none";
264 klass
= "noVNC_status_normal";
267 UI
.toggleConnectPanel();
269 $D('noVNC_connect_button').value
= "Send Password";
270 $D('noVNC_connect_button').onclick
= UI
.setPassword
;
271 $D('noVNC_password').focus();
273 klass
= "noVNC_status_warn";
276 klass
= "noVNC_status_warn";
280 if (typeof(msg
) !== 'undefined') {
281 $D('noVNC-control-bar').setAttribute("class", klass
);
282 $D('noVNC_status').innerHTML
= msg
;
285 UI
.updateVisualState();
288 // Disable/enable controls depending on connection state
289 updateVisualState: function() {
290 var connected
= UI
.rfb
&& UI
.rfb_state
=== 'normal';
292 //Util.Debug(">> updateVisualState");
293 $D('noVNC_encrypt').disabled
= connected
;
294 $D('noVNC_true_color').disabled
= connected
;
295 if (Util
.browserSupportsCursorURIs()) {
296 $D('noVNC_cursor').disabled
= connected
;
298 UI
.updateSetting('cursor', !UI
.isTouchDevice
);
299 $D('noVNC_cursor').disabled
= true;
302 UI
.enableDisableViewClip();
303 $D('noVNC_resize').disabled
= connected
;
304 $D('noVNC_shared').disabled
= connected
;
305 $D('noVNC_view_only').disabled
= connected
;
306 $D('noVNC_path').disabled
= connected
;
307 $D('noVNC_repeaterID').disabled
= connected
;
311 UI
.setMouseButton(1);
312 $D('clipboardButton').style
.display
= "inline";
313 $D('showKeyboard').style
.display
= "inline";
314 $D('noVNC_extra_keys').style
.display
= "";
315 $D('sendCtrlAltDelButton').style
.display
= "inline";
318 $D('clipboardButton').style
.display
= "none";
319 $D('showKeyboard').style
.display
= "none";
320 $D('noVNC_extra_keys').style
.display
= "none";
321 $D('sendCtrlAltDelButton').style
.display
= "none";
322 UI
.updateXvpVisualState(0);
325 // State change disables viewport dragging.
326 // It is enabled (toggled) by direct click on the button
327 UI
.updateViewDrag(false);
329 switch (UI
.rfb_state
) {
333 $D('connectButton').style
.display
= "";
334 $D('disconnectButton').style
.display
= "none";
335 UI
.connSettingsOpen
= false;
336 UI
.toggleConnectPanel();
339 $D('connectButton').style
.display
= "";
340 $D('disconnectButton').style
.display
= "none";
343 $D('connectButton').style
.display
= "none";
344 $D('disconnectButton').style
.display
= "";
348 //Util.Debug("<< updateVisualState");
351 // Initial page load read/initialization of settings
352 initSetting: function(name
, defVal
) {
353 // Check Query string followed by cookie
354 var val
= WebUtil
.getConfigVar(name
);
356 val
= WebUtil
.readSetting(name
, defVal
);
358 UI
.updateSetting(name
, val
);
362 // Update cookie and form control setting. If value is not set, then
363 // updates from control to current cookie setting.
364 updateSetting: function(name
, value
) {
366 // Save the cookie for this session
367 if (typeof value
!== 'undefined') {
368 WebUtil
.writeSetting(name
, value
);
371 // Update the settings control
372 value
= UI
.getSetting(name
);
374 var ctrl
= $D('noVNC_' + name
);
375 if (ctrl
.type
=== 'checkbox') {
376 ctrl
.checked
= value
;
378 } else if (typeof ctrl
.options
!== 'undefined') {
379 for (var i
= 0; i
< ctrl
.options
.length
; i
+= 1) {
380 if (ctrl
.options
[i
].value
=== value
) {
381 ctrl
.selectedIndex
= i
;
386 /*Weird IE9 error leads to 'null' appearring
387 in textboxes instead of ''.*/
388 if (value
=== null) {
395 // Save control setting to cookie
396 saveSetting: function(name
) {
397 var val
, ctrl
= $D('noVNC_' + name
);
398 if (ctrl
.type
=== 'checkbox') {
400 } else if (typeof ctrl
.options
!== 'undefined') {
401 val
= ctrl
.options
[ctrl
.selectedIndex
].value
;
405 WebUtil
.writeSetting(name
, val
);
406 //Util.Debug("Setting saved '" + name + "=" + val + "'");
410 // Force a setting to be a certain value
411 forceSetting: function(name
, val
) {
412 UI
.updateSetting(name
, val
);
416 // Read form control compatible setting from cookie
417 getSetting: function(name
) {
418 var ctrl
= $D('noVNC_' + name
);
419 var val
= WebUtil
.readSetting(name
);
420 if (typeof val
!== 'undefined' && val
!== null && ctrl
.type
=== 'checkbox') {
421 if (val
.toString().toLowerCase() in {'0':1, 'no':1, 'false':1}) {
431 openSettingsMenu: function() {
432 // Close the description panel
433 $D('noVNC_description').style
.display
= "none";
434 // Close clipboard panel if open
435 if (UI
.clipboardOpen
=== true) {
436 UI
.toggleClipboardPanel();
438 // Close connection settings if open
439 if (UI
.connSettingsOpen
=== true) {
440 UI
.toggleConnectPanel();
442 // Close XVP panel if open
443 if (UI
.xvpOpen
=== true) {
446 $D('noVNC_settings').style
.display
= "block";
447 $D('settingsButton').className
= "noVNC_status_button_selected";
448 UI
.settingsOpen
= true;
451 // Close menu (without applying settings)
452 closeSettingsMenu: function() {
453 $D('noVNC_settings').style
.display
= "none";
454 $D('settingsButton').className
= "noVNC_status_button";
455 UI
.settingsOpen
= false;
458 // Toggle the settings menu:
459 // On open, settings are refreshed from saved cookies.
460 // On close, settings are applied
461 toggleSettingsPanel: function() {
462 // Close the description panel
463 $D('noVNC_description').style
.display
= "none";
464 if (UI
.settingsOpen
) {
466 UI
.closeSettingsMenu();
468 UI
.updateSetting('encrypt');
469 UI
.updateSetting('true_color');
470 if (Util
.browserSupportsCursorURIs()) {
471 UI
.updateSetting('cursor');
473 UI
.updateSetting('cursor', !UI
.isTouchDevice
);
474 $D('noVNC_cursor').disabled
= true;
476 UI
.updateSetting('clip');
477 UI
.updateSetting('resize');
478 UI
.updateSetting('shared');
479 UI
.updateSetting('view_only');
480 UI
.updateSetting('path');
481 UI
.updateSetting('repeaterID');
482 UI
.updateSetting('stylesheet');
483 UI
.updateSetting('logging');
485 UI
.openSettingsMenu();
490 // Show the popup status
491 togglePopupStatus: function(text
) {
492 var psp
= $D('noVNC_popup_status');
494 var closePopup = function() { psp
.style
.display
= "none"; };
496 if (window
.getComputedStyle(psp
).display
=== 'none') {
497 if (typeof text
=== 'string') {
498 psp
.innerHTML
= text
;
500 psp
.innerHTML
= $D('noVNC_status').innerHTML
;
502 psp
.style
.display
= "block";
503 psp
.style
.left
= window
.innerWidth
/2 -
504 parseInt(window
.getComputedStyle(psp
).width
)/2 -30 + "px";
506 // Show the popup for a maximum of 1.5 seconds
507 UI
.popupStatusTimeout
= setTimeout(function() { closePopup(); }, 1500);
509 clearTimeout(UI
.popupStatusTimeout
);
514 // Show the XVP panel
515 toggleXvpPanel: function() {
516 // Close the description panel
517 $D('noVNC_description').style
.display
= "none";
518 // Close settings if open
519 if (UI
.settingsOpen
=== true) {
521 UI
.closeSettingsMenu();
523 // Close connection settings if open
524 if (UI
.connSettingsOpen
=== true) {
525 UI
.toggleConnectPanel();
527 // Close clipboard panel if open
528 if (UI
.clipboardOpen
=== true) {
529 UI
.toggleClipboardPanel();
532 if (UI
.xvpOpen
=== true) {
533 $D('noVNC_xvp').style
.display
= "none";
534 $D('xvpButton').className
= "noVNC_status_button";
537 $D('noVNC_xvp').style
.display
= "block";
538 $D('xvpButton').className
= "noVNC_status_button_selected";
543 // Show the clipboard panel
544 toggleClipboardPanel: function() {
545 // Close the description panel
546 $D('noVNC_description').style
.display
= "none";
547 // Close settings if open
548 if (UI
.settingsOpen
=== true) {
550 UI
.closeSettingsMenu();
552 // Close connection settings if open
553 if (UI
.connSettingsOpen
=== true) {
554 UI
.toggleConnectPanel();
556 // Close XVP panel if open
557 if (UI
.xvpOpen
=== true) {
560 // Toggle Clipboard Panel
561 if (UI
.clipboardOpen
=== true) {
562 $D('noVNC_clipboard').style
.display
= "none";
563 $D('clipboardButton').className
= "noVNC_status_button";
564 UI
.clipboardOpen
= false;
566 $D('noVNC_clipboard').style
.display
= "block";
567 $D('clipboardButton').className
= "noVNC_status_button_selected";
568 UI
.clipboardOpen
= true;
572 // Toggle fullscreen mode
573 toggleFullscreen: function() {
574 if (document
.fullscreenElement
|| // alternative standard method
575 document
.mozFullScreenElement
|| // currently working methods
576 document
.webkitFullscreenElement
||
577 document
.msFullscreenElement
) {
578 if (document
.exitFullscreen
) {
579 document
.exitFullscreen();
580 } else if (document
.mozCancelFullScreen
) {
581 document
.mozCancelFullScreen();
582 } else if (document
.webkitExitFullscreen
) {
583 document
.webkitExitFullscreen();
584 } else if (document
.msExitFullscreen
) {
585 document
.msExitFullscreen();
588 if (document
.documentElement
.requestFullscreen
) {
589 document
.documentElement
.requestFullscreen();
590 } else if (document
.documentElement
.mozRequestFullScreen
) {
591 document
.documentElement
.mozRequestFullScreen();
592 } else if (document
.documentElement
.webkitRequestFullscreen
) {
593 document
.documentElement
.webkitRequestFullscreen(Element
.ALLOW_KEYBOARD_INPUT
);
594 } else if (document
.body
.msRequestFullscreen
) {
595 document
.body
.msRequestFullscreen();
598 UI
.enableDisableViewClip();
599 UI
.updateFullscreenButton();
602 updateFullscreenButton: function() {
603 if (document
.fullscreenElement
|| // alternative standard method
604 document
.mozFullScreenElement
|| // currently working methods
605 document
.webkitFullscreenElement
||
606 document
.msFullscreenElement
) {
607 $D('fullscreenButton').className
= "noVNC_status_button_selected";
609 $D('fullscreenButton').className
= "noVNC_status_button";
613 // Show the connection settings panel/menu
614 toggleConnectPanel: function() {
615 // Close the description panel
616 $D('noVNC_description').style
.display
= "none";
617 // Close connection settings if open
618 if (UI
.settingsOpen
=== true) {
620 UI
.closeSettingsMenu();
621 $D('connectButton').className
= "noVNC_status_button";
623 // Close clipboard panel if open
624 if (UI
.clipboardOpen
=== true) {
625 UI
.toggleClipboardPanel();
627 // Close XVP panel if open
628 if (UI
.xvpOpen
=== true) {
632 // Toggle Connection Panel
633 if (UI
.connSettingsOpen
=== true) {
634 $D('noVNC_controls').style
.display
= "none";
635 $D('connectButton').className
= "noVNC_status_button";
636 UI
.connSettingsOpen
= false;
637 UI
.saveSetting('host');
638 UI
.saveSetting('port');
639 UI
.saveSetting('token');
640 //UI.saveSetting('password');
642 $D('noVNC_controls').style
.display
= "block";
643 $D('connectButton').className
= "noVNC_status_button_selected";
644 UI
.connSettingsOpen
= true;
645 $D('noVNC_host').focus();
649 // Save/apply settings when 'Apply' button is pressed
650 settingsApply: function() {
651 //Util.Debug(">> settingsApply");
652 UI
.saveSetting('encrypt');
653 UI
.saveSetting('true_color');
654 if (Util
.browserSupportsCursorURIs()) {
655 UI
.saveSetting('cursor');
658 UI
.saveSetting('resize');
660 if (UI
.getSetting('resize') === 'downscale' || UI
.getSetting('resize') === 'scale') {
661 UI
.forceSetting('clip', false);
664 UI
.saveSetting('clip');
665 UI
.saveSetting('shared');
666 UI
.saveSetting('view_only');
667 UI
.saveSetting('path');
668 UI
.saveSetting('repeaterID');
669 UI
.saveSetting('stylesheet');
670 UI
.saveSetting('logging');
672 // Settings with immediate (non-connected related) effect
673 WebUtil
.selectStylesheet(UI
.getSetting('stylesheet'));
674 WebUtil
.init_logging(UI
.getSetting('logging'));
677 //Util.Debug("<< settingsApply");
681 setPassword: function() {
682 UI
.rfb
.sendPassword($D('noVNC_password').value
);
683 //Reset connect button.
684 $D('noVNC_connect_button').value
= "Connect";
685 $D('noVNC_connect_button').onclick
= UI
.connect
;
686 //Hide connection panel.
687 UI
.toggleConnectPanel();
691 sendCtrlAltDel: function() {
692 UI
.rfb
.sendCtrlAltDel();
695 xvpShutdown: function() {
696 UI
.rfb
.xvpShutdown();
699 xvpReboot: function() {
703 xvpReset: function() {
707 setMouseButton: function(num
) {
708 if (typeof num
=== 'undefined') {
709 // Disable mouse buttons
713 UI
.rfb
.get_mouse().set_touchButton(num
);
716 var blist
= [0, 1,2,4];
717 for (var b
= 0; b
< blist
.length
; b
++) {
718 var button
= $D('noVNC_mouse_button' + blist
[b
]);
719 if (blist
[b
] === num
) {
720 button
.style
.display
= "";
722 button
.style
.display
= "none";
727 // Disable/enable XVP button
728 updateXvpVisualState: function(ver
) {
730 $D('xvpButton').style
.display
= 'inline';
732 $D('xvpButton').style
.display
= 'none';
733 // Close XVP panel if open
734 if (UI
.xvpOpen
=== true) {
740 // Display the desktop name in the document title
741 updateDocumentTitle: function(rfb
, name
) {
742 document
.title
= name
+ " - noVNC";
745 clipReceive: function(rfb
, text
) {
746 Util
.Debug(">> UI.clipReceive: " + text
.substr(0,40) + "...");
747 $D('noVNC_clipboard_text').value
= text
;
748 Util
.Debug("<< UI.clipReceive");
751 connect: function() {
752 UI
.closeSettingsMenu();
753 UI
.toggleConnectPanel();
755 var host
= $D('noVNC_host').value
;
756 var port
= $D('noVNC_port').value
;
757 var password
= $D('noVNC_password').value
;
758 var token
= $D('noVNC_token').value
;
759 var path
= $D('noVNC_path').value
;
761 //if token is in path then ignore the new token variable
763 path
= WebUtil
.injectParamIfMissing(path
, "token", token
);
766 if ((!host
) || (!port
)) {
767 throw new Error("Must set host and port");
770 if (!UI
.initRFB()) return;
772 UI
.rfb
.set_encrypt(UI
.getSetting('encrypt'));
773 UI
.rfb
.set_true_color(UI
.getSetting('true_color'));
774 UI
.rfb
.set_local_cursor(UI
.getSetting('cursor'));
775 UI
.rfb
.set_shared(UI
.getSetting('shared'));
776 UI
.rfb
.set_view_only(UI
.getSetting('view_only'));
777 UI
.rfb
.set_repeaterID(UI
.getSetting('repeaterID'));
779 UI
.rfb
.connect(host
, port
, password
, path
);
782 setTimeout(UI
.setBarPosition
, 100);
783 $D('noVNC_logo').style
.display
= "none";
784 $D('noVNC_screen').style
.display
= "inline";
787 disconnect: function() {
788 UI
.closeSettingsMenu();
791 // Restore the callback used for initial resize
792 UI
.rfb
.set_onFBUComplete(UI
.initialResize
);
794 $D('noVNC_logo').style
.display
= "block";
795 $D('noVNC_screen').style
.display
= "none";
797 // Don't display the connection settings until we're actually disconnected
800 displayBlur: function() {
803 UI
.rfb
.get_keyboard().set_focused(false);
804 UI
.rfb
.get_mouse().set_focused(false);
807 displayFocus: function() {
810 UI
.rfb
.get_keyboard().set_focused(true);
811 UI
.rfb
.get_mouse().set_focused(true);
814 clipClear: function() {
815 $D('noVNC_clipboard_text').value
= "";
816 UI
.rfb
.clipboardPasteFrom("");
819 clipSend: function() {
820 var text
= $D('noVNC_clipboard_text').value
;
821 Util
.Debug(">> UI.clipSend: " + text
.substr(0,40) + "...");
822 UI
.rfb
.clipboardPasteFrom(text
);
823 Util
.Debug("<< UI.clipSend");
827 // Apply remote resizing or local scaling
828 applyResizeMode: function() {
831 var screen
= UI
.screenSize();
833 if (screen
&& UI
.rfb_state
=== 'normal' && UI
.rfb
.get_display()) {
835 var display
= UI
.rfb
.get_display();
836 var resizeMode
= UI
.getSetting('resize');
838 if (resizeMode
=== 'remote') {
840 // Request changing the resolution of the remote display to
841 // the size of the local browser viewport.
843 // In order to not send multiple requests before the browser-resize
844 // is finished we wait 0.5 seconds before sending the request.
845 clearTimeout(UI
.resizeTimeout
);
846 UI
.resizeTimeout
= setTimeout(function(){
848 // Limit the viewport to the size of the browser window
849 display
.set_maxWidth(screen
.w
);
850 display
.set_maxHeight(screen
.h
);
852 Util
.Debug('Attempting setDesktopSize(' +
853 screen
.w
+ ', ' + screen
.h
+ ')');
855 // Request a remote size covering the viewport
856 UI
.rfb
.setDesktopSize(screen
.w
, screen
.h
);
859 } else if (resizeMode
=== 'scale' || resizeMode
=== 'downscale') {
860 var downscaleOnly
= resizeMode
=== 'downscale';
861 var scaleRatio
= display
.autoscale(screen
.w
, screen
.h
, downscaleOnly
);
862 UI
.rfb
.get_mouse().set_scale(scaleRatio
);
863 Util
.Debug('Scaling by ' + UI
.rfb
.get_mouse().get_scale());
868 // The screen is always the same size as the available viewport
869 // in the browser window minus the height of the control bar
870 screenSize: function() {
871 var screen
= $D('noVNC_screen');
873 // Hide the scrollbars until the size is calculated
874 screen
.style
.overflow
= "hidden";
876 var pos
= Util
.getPosition(screen
);
880 screen
.style
.overflow
= "visible";
882 if (isNaN(w
) || isNaN(h
)) {
889 // Normally we only apply the current resize mode after a window resize
890 // event. This means that when a new connection is opened, there is no
891 // resize mode active.
892 // We have to wait until the first FBU because this is where the client
893 // will find the supported encodings of the server. Some calls later in
894 // the chain is dependant on knowing the server-capabilities.
895 initialResize: function(rfb
, fbu
) {
896 UI
.applyResizeMode();
897 // After doing this once, we remove the callback.
898 UI
.rfb
.set_onFBUComplete(function() { });
901 // Set and configure viewport clipping
902 setViewClip: function(clip
) {
905 display
= UI
.rfb
.get_display();
907 UI
.forceSetting('clip', clip
);
911 var cur_clip
= display
.get_viewport();
913 if (typeof(clip
) !== 'boolean') {
914 // Use current setting
915 clip
= UI
.getSetting('clip');
918 if (clip
&& !cur_clip
) {
920 UI
.updateSetting('clip', true);
921 } else if (!clip
&& cur_clip
) {
923 UI
.updateSetting('clip', false);
924 display
.set_viewport(false);
925 // Disable max dimensions
926 display
.set_maxWidth(0);
927 display
.set_maxHeight(0);
928 display
.viewportChangeSize();
930 if (UI
.getSetting('clip')) {
931 // If clipping, update clipping settings
932 display
.set_viewport(true);
934 var size
= UI
.screenSize();
936 display
.set_maxWidth(size
.w
);
937 display
.set_maxHeight(size
.h
);
939 // Hide potential scrollbars that can skew the position
940 $D('noVNC_screen').style
.overflow
= "hidden";
942 // The x position marks the left margin of the canvas,
943 // remove the margin from both sides to keep it centered
944 var new_w
= size
.w
- (2 * Util
.getPosition($D('noVNC_canvas')).x
);
946 $D('noVNC_screen').style
.overflow
= "visible";
948 display
.viewportChangeSize(new_w
, size
.h
);
953 // Handle special cases where clipping is forced on/off or locked
954 enableDisableViewClip: function() {
955 var resizeElem
= $D('noVNC_resize');
956 var connected
= UI
.rfb
&& UI
.rfb_state
=== 'normal';
959 // Safari auto-hides the scrollbars which makes them
960 // impossible to use in most cases
961 UI
.setViewClip(true);
962 $D('noVNC_clip').disabled
= true;
963 } else if (resizeElem
.value
=== 'downscale' || resizeElem
.value
=== 'scale') {
964 // Disable clipping if we are scaling
965 UI
.setViewClip(false);
966 $D('noVNC_clip').disabled
= true;
967 } else if (document
.msFullscreenElement
) {
968 // The browser is IE and we are in fullscreen mode.
969 // - We need to force clipping while in fullscreen since
970 // scrollbars doesn't work.
971 UI
.togglePopupStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen");
972 UI
.rememberedClipSetting
= UI
.getSetting('clip');
973 UI
.setViewClip(true);
974 $D('noVNC_clip').disabled
= true;
975 } else if (document
.body
.msRequestFullscreen
&& UI
.rememberedClip
!== null) {
976 // Restore view clip to what it was before fullscreen on IE
977 UI
.setViewClip(UI
.rememberedClipSetting
);
978 $D('noVNC_clip').disabled
= connected
|| UI
.isTouchDevice
;
980 $D('noVNC_clip').disabled
= connected
|| UI
.isTouchDevice
;
981 if (UI
.isTouchDevice
) {
982 UI
.setViewClip(true);
987 // Update the viewport drag/move button
988 updateViewDrag: function(drag
) {
991 var vmb
= $D('noVNC_view_drag_button');
993 // Check if viewport drag is possible
994 if (UI
.rfb_state
=== 'normal' &&
995 UI
.rfb
.get_display().get_viewport() &&
996 UI
.rfb
.get_display().clippingDisplay()) {
998 // Show and enable the drag button
999 vmb
.style
.display
= "inline";
1000 vmb
.disabled
= false;
1003 // The VNC content is the same size as
1004 // or smaller than the display
1006 if (UI
.rfb
.get_viewportDrag
) {
1007 // Turn off viewport drag when it's
1008 // active since it can't be used here
1009 vmb
.className
= "noVNC_status_button";
1010 UI
.rfb
.set_viewportDrag(false);
1013 // Disable or hide the drag button
1014 if (UI
.rfb_state
=== 'normal' && UI
.isTouchDevice
) {
1015 vmb
.style
.display
= "inline";
1016 vmb
.disabled
= true;
1018 vmb
.style
.display
= "none";
1023 if (typeof(drag
) !== "undefined" &&
1024 typeof(drag
) !== "object") {
1026 vmb
.className
= "noVNC_status_button_selected";
1027 UI
.rfb
.set_viewportDrag(true);
1029 vmb
.className
= "noVNC_status_button";
1030 UI
.rfb
.set_viewportDrag(false);
1035 toggleViewDrag: function() {
1036 if (!UI
.rfb
) return;
1038 var vmb
= $D('noVNC_view_drag_button');
1039 if (UI
.rfb
.get_viewportDrag()) {
1040 vmb
.className
= "noVNC_status_button";
1041 UI
.rfb
.set_viewportDrag(false);
1043 vmb
.className
= "noVNC_status_button_selected";
1044 UI
.rfb
.set_viewportDrag(true);
1048 // On touch devices, show the OS keyboard
1049 showKeyboard: function() {
1050 var kbi
= $D('keyboardinput');
1051 var skb
= $D('showKeyboard');
1052 var l
= kbi
.value
.length
;
1053 if(UI
.keyboardVisible
=== false) {
1055 try { kbi
.setSelectionRange(l
, l
); } // Move the caret to the end
1056 catch (err
) {} // setSelectionRange is undefined in Google Chrome
1057 UI
.keyboardVisible
= true;
1058 skb
.className
= "noVNC_status_button_selected";
1059 } else if(UI
.keyboardVisible
=== true) {
1061 skb
.className
= "noVNC_status_button";
1062 UI
.keyboardVisible
= false;
1066 keepKeyboard: function() {
1067 clearTimeout(UI
.hideKeyboardTimeout
);
1068 if(UI
.keyboardVisible
=== true) {
1069 $D('keyboardinput').focus();
1070 $D('showKeyboard').className
= "noVNC_status_button_selected";
1071 } else if(UI
.keyboardVisible
=== false) {
1072 $D('keyboardinput').blur();
1073 $D('showKeyboard').className
= "noVNC_status_button";
1077 keyboardinputReset: function() {
1078 var kbi
= $D('keyboardinput');
1079 kbi
.value
= new Array(UI
.defaultKeyboardinputLen
).join("_");
1080 UI
.lastKeyboardinput
= kbi
.value
;
1083 // When normal keyboard events are left uncought, use the input events from
1084 // the keyboardinput element instead and generate the corresponding key events.
1085 // This code is required since some browsers on Android are inconsistent in
1086 // sending keyCodes in the normal keyboard events when using on screen keyboards.
1087 keyInput: function(event
) {
1089 if (!UI
.rfb
) return;
1091 var newValue
= event
.target
.value
;
1093 if (!UI
.lastKeyboardinput
) {
1094 UI
.keyboardinputReset();
1096 var oldValue
= UI
.lastKeyboardinput
;
1100 // Try to check caret position since whitespace at the end
1101 // will not be considered by value.length in some browsers
1102 newLen
= Math
.max(event
.target
.selectionStart
, newValue
.length
);
1104 // selectionStart is undefined in Google Chrome
1105 newLen
= newValue
.length
;
1107 var oldLen
= oldValue
.length
;
1110 var inputs
= newLen
- oldLen
;
1112 backspaces
= -inputs
;
1117 // Compare the old string with the new to account for
1118 // text-corrections or other input that modify existing text
1120 for (i
= 0; i
< Math
.min(oldLen
, newLen
); i
++) {
1121 if (newValue
.charAt(i
) != oldValue
.charAt(i
)) {
1122 inputs
= newLen
- i
;
1123 backspaces
= oldLen
- i
;
1128 // Send the key events
1129 for (i
= 0; i
< backspaces
; i
++) {
1130 UI
.rfb
.sendKey(XK_BackSpace
);
1132 for (i
= newLen
- inputs
; i
< newLen
; i
++) {
1133 UI
.rfb
.sendKey(newValue
.charCodeAt(i
));
1136 // Control the text content length in the keyboardinput element
1137 if (newLen
> 2 * UI
.defaultKeyboardinputLen
) {
1138 UI
.keyboardinputReset();
1139 } else if (newLen
< 1) {
1140 // There always have to be some text in the keyboardinput
1141 // element with which backspace can interact.
1142 UI
.keyboardinputReset();
1143 // This sometimes causes the keyboard to disappear for a second
1144 // but it is required for the android keyboard to recognize that
1145 // text has been added to the field
1146 event
.target
.blur();
1147 // This has to be ran outside of the input handler in order to work
1148 setTimeout(function() { UI
.keepKeyboard(); }, 0);
1150 UI
.lastKeyboardinput
= newValue
;
1154 keyInputBlur: function() {
1155 $D('showKeyboard').className
= "noVNC_status_button";
1156 //Weird bug in iOS if you change keyboardVisible
1157 //here it does not actually occur so next time
1158 //you click keyboard icon it doesnt work.
1159 UI
.hideKeyboardTimeout
= setTimeout(function() { UI
.setKeyboard(); },100);
1162 showExtraKeys: function() {
1164 if(UI
.extraKeysVisible
=== false) {
1165 $D('toggleCtrlButton').style
.display
= "inline";
1166 $D('toggleAltButton').style
.display
= "inline";
1167 $D('sendTabButton').style
.display
= "inline";
1168 $D('sendEscButton').style
.display
= "inline";
1169 $D('showExtraKeysButton').className
= "noVNC_status_button_selected";
1170 UI
.extraKeysVisible
= true;
1171 } else if(UI
.extraKeysVisible
=== true) {
1172 $D('toggleCtrlButton').style
.display
= "";
1173 $D('toggleAltButton').style
.display
= "";
1174 $D('sendTabButton').style
.display
= "";
1175 $D('sendEscButton').style
.display
= "";
1176 $D('showExtraKeysButton').className
= "noVNC_status_button";
1177 UI
.extraKeysVisible
= false;
1181 toggleCtrl: function() {
1183 if(UI
.ctrlOn
=== false) {
1184 UI
.rfb
.sendKey(XK_Control_L
, true);
1185 $D('toggleCtrlButton').className
= "noVNC_status_button_selected";
1187 } else if(UI
.ctrlOn
=== true) {
1188 UI
.rfb
.sendKey(XK_Control_L
, false);
1189 $D('toggleCtrlButton').className
= "noVNC_status_button";
1194 toggleAlt: function() {
1196 if(UI
.altOn
=== false) {
1197 UI
.rfb
.sendKey(XK_Alt_L
, true);
1198 $D('toggleAltButton').className
= "noVNC_status_button_selected";
1200 } else if(UI
.altOn
=== true) {
1201 UI
.rfb
.sendKey(XK_Alt_L
, false);
1202 $D('toggleAltButton').className
= "noVNC_status_button";
1207 sendTab: function() {
1209 UI
.rfb
.sendKey(XK_Tab
);
1212 sendEsc: function() {
1214 UI
.rfb
.sendKey(XK_Escape
);
1217 setKeyboard: function() {
1218 UI
.keyboardVisible
= false;
1221 //Helper to add options to dropdown.
1222 addOption: function(selectbox
, text
, value
) {
1223 var optn
= document
.createElement("OPTION");
1226 selectbox
.options
.add(optn
);
1229 setBarPosition: function() {
1230 $D('noVNC-control-bar').style
.top
= (window
.pageYOffset
) + 'px';
1231 $D('noVNC_mobile_buttons').style
.left
= (window
.pageXOffset
) + 'px';
1233 var vncwidth
= $D('noVNC_container').style
.offsetWidth
;
1234 $D('noVNC-control-bar').style
.width
= vncwidth
+ 'px';