]>
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) 2015 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 */
20 // Load supporting scripts
21 window
.onscriptsload = function () { UI
.load(); };
22 Util
.load_scripts(["webutil.js", "base64.js", "websock.js", "des.js",
23 "keysymdef.js", "keyboard.js", "input.js", "display.js",
24 "jsunzip.js", "rfb.js", "keysym.js"]);
30 connSettingsOpen
: false,
31 popupStatusTimeout
: null,
33 keyboardVisible
: false,
34 hideKeyboardTimeout
: null,
35 lastKeyboardinput
: null,
36 defaultKeyboardinputLen
: 100,
37 extraKeysVisible
: false,
42 // Setup rfb object, load settings from browser storage, then call
43 // UI.init to setup the UI/menus
44 load: function (callback
) {
45 WebUtil
.initSettings(UI
.start
, callback
);
48 // Render default UI and initialize settings menu
49 start: function(callback
) {
50 UI
.isTouchDevice
= 'ontouchstart' in document
.documentElement
;
52 // Stylesheet selection dropdown
53 var sheet
= WebUtil
.selectStylesheet();
54 var sheets
= WebUtil
.getStylesheets();
56 for (i
= 0; i
< sheets
.length
; i
+= 1) {
57 UI
.addOption($D('noVNC_stylesheet'),sheets
[i
].title
, sheets
[i
].title
);
60 // Logging selection dropdown
61 var llevels
= ['error', 'warn', 'info', 'debug'];
62 for (i
= 0; i
< llevels
.length
; i
+= 1) {
63 UI
.addOption($D('noVNC_logging'),llevels
[i
], llevels
[i
]);
66 // Settings with immediate effects
67 UI
.initSetting('logging', 'warn');
68 WebUtil
.init_logging(UI
.getSetting('logging'));
70 UI
.initSetting('stylesheet', 'default');
71 WebUtil
.selectStylesheet(null);
72 // call twice to get around webkit bug
73 WebUtil
.selectStylesheet(UI
.getSetting('stylesheet'));
75 // if port == 80 (or 443) then it won't be present and should be
77 var port
= window
.location
.port
;
79 if (window
.location
.protocol
.substring(0,5) == 'https') {
82 else if (window
.location
.protocol
.substring(0,4) == 'http') {
87 /* Populate the controls if defaults are provided in the URL */
88 UI
.initSetting('host', window
.location
.hostname
);
89 UI
.initSetting('port', port
);
90 UI
.initSetting('password', '');
91 UI
.initSetting('encrypt', (window
.location
.protocol
=== "https:"));
92 UI
.initSetting('true_color', true);
93 UI
.initSetting('cursor', !UI
.isTouchDevice
);
94 UI
.initSetting('resize', 'off');
95 UI
.initSetting('shared', true);
96 UI
.initSetting('view_only', false);
97 UI
.initSetting('path', 'websockify');
98 UI
.initSetting('repeaterID', '');
100 var autoconnect
= WebUtil
.getQueryVar('autoconnect', false);
101 if (autoconnect
=== 'true' || autoconnect
== '1') {
108 UI
.updateVisualState();
110 $D('noVNC_host').focus();
112 // Show mouse selector buttons on touch screen devices
113 if (UI
.isTouchDevice
) {
114 // Show mobile buttons
115 $D('noVNC_mobile_buttons').style
.display
= "inline";
117 // Remove the address bar
118 setTimeout(function() { window
.scrollTo(0, 1); }, 100);
119 UI
.forceSetting('clip', true);
121 UI
.initSetting('clip', false);
127 Util
.addEvent(window
, 'resize', function () {
134 // Hide the button if fullscreen isn't supported
135 if (!document
.documentElement
.requestFullscreen
&&
136 !document
.documentElement
.mozRequestFullScreen
&&
137 !document
.documentElement
.webkitRequestFullscreen
&&
138 !document
.body
.msRequestFullscreen
) {
139 $D('fullscreenButton').style
.display
= "none";
141 Util
.addEvent(window
, 'fullscreenchange', UI
.updateFullscreenButton
);
142 Util
.addEvent(window
, 'mozfullscreenchange', UI
.updateFullscreenButton
);
143 Util
.addEvent(window
, 'webkitfullscreenchange', UI
.updateFullscreenButton
);
144 Util
.addEvent(window
, 'msfullscreenchange', UI
.updateFullscreenButton
);
147 Util
.addEvent(window
, 'load', UI
.keyboardinputReset
);
149 Util
.addEvent(window
, 'beforeunload', function () {
150 if (UI
.rfb
&& UI
.rfb_state
=== 'normal') {
151 return "You are currently connected.";
155 // Show description by default when hosted at for kanaka.github.com
156 if (location
.host
=== "kanaka.github.io") {
157 // Open the description dialog
158 $D('noVNC_description').style
.display
= "block";
160 // Show the connect panel on first load unless autoconnecting
161 if (autoconnect
=== UI
.connSettingsOpen
) {
162 UI
.toggleConnectPanel();
166 // Add mouse event click/focus/blur event handlers to the UI
167 UI
.addMouseHandlers();
169 if (typeof callback
=== "function") {
174 initRFB: function () {
176 UI
.rfb
= new RFB({'target': $D('noVNC_canvas'),
177 'onUpdateState': UI
.updateState
,
178 'onXvpInit': UI
.updateXvpVisualState
,
179 'onClipboard': UI
.clipReceive
,
180 'onFBUComplete': UI
.FBUComplete
,
181 'onFBResize': UI
.updateViewDrag
,
182 'onDesktopName': UI
.updateDocumentTitle
});
185 UI
.updateState(null, 'fatal', null, 'Unable to create RFB client -- ' + exc
);
190 addMouseHandlers: function() {
191 // Setup interface handlers that can't be inline
192 $D("noVNC_view_drag_button").onclick
= UI
.toggleViewDrag
;
193 $D("noVNC_mouse_button0").onclick = function () { UI
.setMouseButton(1); };
194 $D("noVNC_mouse_button1").onclick = function () { UI
.setMouseButton(2); };
195 $D("noVNC_mouse_button2").onclick = function () { UI
.setMouseButton(4); };
196 $D("noVNC_mouse_button4").onclick = function () { UI
.setMouseButton(0); };
197 $D("showKeyboard").onclick
= UI
.showKeyboard
;
199 $D("keyboardinput").oninput
= UI
.keyInput
;
200 $D("keyboardinput").onblur
= UI
.keyInputBlur
;
201 $D("keyboardinput").onsubmit = function () { return false; };
203 $D("showExtraKeysButton").onclick
= UI
.showExtraKeys
;
204 $D("toggleCtrlButton").onclick
= UI
.toggleCtrl
;
205 $D("toggleAltButton").onclick
= UI
.toggleAlt
;
206 $D("sendTabButton").onclick
= UI
.sendTab
;
207 $D("sendEscButton").onclick
= UI
.sendEsc
;
209 $D("sendCtrlAltDelButton").onclick
= UI
.sendCtrlAltDel
;
210 $D("xvpShutdownButton").onclick
= UI
.xvpShutdown
;
211 $D("xvpRebootButton").onclick
= UI
.xvpReboot
;
212 $D("xvpResetButton").onclick
= UI
.xvpReset
;
213 $D("noVNC_status").onclick
= UI
.togglePopupStatus
;
214 $D("noVNC_popup_status").onclick
= UI
.togglePopupStatus
;
215 $D("xvpButton").onclick
= UI
.toggleXvpPanel
;
216 $D("clipboardButton").onclick
= UI
.toggleClipboardPanel
;
217 $D("fullscreenButton").onclick
= UI
.toggleFullscreen
;
218 $D("settingsButton").onclick
= UI
.toggleSettingsPanel
;
219 $D("connectButton").onclick
= UI
.toggleConnectPanel
;
220 $D("disconnectButton").onclick
= UI
.disconnect
;
221 $D("descriptionButton").onclick
= UI
.toggleConnectPanel
;
223 $D("noVNC_clipboard_text").onfocus
= UI
.displayBlur
;
224 $D("noVNC_clipboard_text").onblur
= UI
.displayFocus
;
225 $D("noVNC_clipboard_text").onchange
= UI
.clipSend
;
226 $D("noVNC_clipboard_clear_button").onclick
= UI
.clipClear
;
228 $D("noVNC_settings_menu").onmouseover
= UI
.displayBlur
;
229 $D("noVNC_settings_menu").onmouseover
= UI
.displayFocus
;
230 $D("noVNC_apply").onclick
= UI
.settingsApply
;
232 $D("noVNC_connect_button").onclick
= UI
.connect
;
234 $D("noVNC_resize").onchange = function () {
235 var connected
= UI
.rfb
&& UI
.rfb_state
=== 'normal';
236 UI
.enableDisableViewClip(connected
);
240 onresize: function (callback
) {
243 var size
= UI
.getCanvasLimit();
245 if (size
&& UI
.rfb_state
=== 'normal' && UI
.rfb
.get_display()) {
246 var display
= UI
.rfb
.get_display();
247 var scaleType
= UI
.getSetting('resize');
248 if (scaleType
=== 'remote') {
249 // use remote resizing
251 // When the local window has been resized, wait until the size remains
252 // the same for 0.5 seconds before sending the request for changing
253 // the resolution of the session
254 clearTimeout(resizeTimeout
);
255 resizeTimeout
= setTimeout(function(){
256 display
.set_maxWidth(size
.w
);
257 display
.set_maxHeight(size
.h
);
258 Util
.Debug('Attempting setDesktopSize(' +
259 size
.w
+ ', ' + size
.h
+ ')');
260 UI
.rfb
.setDesktopSize(size
.w
, size
.h
);
262 } else if (scaleType
=== 'scale' || scaleType
=== 'downscale') {
265 var downscaleOnly
= scaleType
=== 'downscale';
266 var scaleRatio
= display
.autoscale(size
.w
, size
.h
, downscaleOnly
);
267 UI
.rfb
.get_mouse().set_scale(scaleRatio
);
268 Util
.Debug('Scaling by ' + UI
.rfb
.get_mouse().get_scale());
273 getCanvasLimit: function () {
274 var container
= $D('noVNC_container');
276 // Hide the scrollbars until the size is calculated
277 container
.style
.overflow
= "hidden";
279 var pos
= Util
.getPosition(container
);
283 container
.style
.overflow
= "visible";
285 if (isNaN(w
) || isNaN(h
)) {
292 // Read form control compatible setting from cookie
293 getSetting: function(name
) {
294 var ctrl
= $D('noVNC_' + name
);
295 var val
= WebUtil
.readSetting(name
);
296 if (typeof val
!== 'undefined' && val
!== null && ctrl
.type
=== 'checkbox') {
297 if (val
.toString().toLowerCase() in {'0':1, 'no':1, 'false':1}) {
306 // Update cookie and form control setting. If value is not set, then
307 // updates from control to current cookie setting.
308 updateSetting: function(name
, value
) {
310 // Save the cookie for this session
311 if (typeof value
!== 'undefined') {
312 WebUtil
.writeSetting(name
, value
);
315 // Update the settings control
316 value
= UI
.getSetting(name
);
318 var ctrl
= $D('noVNC_' + name
);
319 if (ctrl
.type
=== 'checkbox') {
320 ctrl
.checked
= value
;
322 } else if (typeof ctrl
.options
!== 'undefined') {
323 for (var i
= 0; i
< ctrl
.options
.length
; i
+= 1) {
324 if (ctrl
.options
[i
].value
=== value
) {
325 ctrl
.selectedIndex
= i
;
330 /*Weird IE9 error leads to 'null' appearring
331 in textboxes instead of ''.*/
332 if (value
=== null) {
339 // Save control setting to cookie
340 saveSetting: function(name
) {
341 var val
, ctrl
= $D('noVNC_' + name
);
342 if (ctrl
.type
=== 'checkbox') {
344 } else if (typeof ctrl
.options
!== 'undefined') {
345 val
= ctrl
.options
[ctrl
.selectedIndex
].value
;
349 WebUtil
.writeSetting(name
, val
);
350 //Util.Debug("Setting saved '" + name + "=" + val + "'");
354 // Initial page load read/initialization of settings
355 initSetting: function(name
, defVal
) {
356 // Check Query string followed by cookie
357 var val
= WebUtil
.getQueryVar(name
);
359 val
= WebUtil
.readSetting(name
, defVal
);
361 UI
.updateSetting(name
, val
);
365 // Force a setting to be a certain value
366 forceSetting: function(name
, val
) {
367 UI
.updateSetting(name
, val
);
372 // Show the popup status
373 togglePopupStatus: function(text
) {
374 var psp
= $D('noVNC_popup_status');
376 var closePopup = function() { psp
.style
.display
= "none"; };
378 if (window
.getComputedStyle(psp
).display
=== 'none') {
379 if (typeof text
=== 'string') {
380 psp
.innerHTML
= text
;
382 psp
.innerHTML
= $D('noVNC_status').innerHTML
;
384 psp
.style
.display
= "block";
385 psp
.style
.left
= window
.innerWidth
/2 -
386 parseInt(window
.getComputedStyle(psp
).width
)/2 -30 + "px";
388 // Show the popup for a maximum of 1.5 seconds
389 UI
.popupStatusTimeout
= setTimeout(function() { closePopup(); }, 1500);
391 clearTimeout(UI
.popupStatusTimeout
);
396 // Show the XVP panel
397 toggleXvpPanel: function() {
398 // Close the description panel
399 $D('noVNC_description').style
.display
= "none";
400 // Close settings if open
401 if (UI
.settingsOpen
=== true) {
403 UI
.closeSettingsMenu();
405 // Close connection settings if open
406 if (UI
.connSettingsOpen
=== true) {
407 UI
.toggleConnectPanel();
409 // Close clipboard panel if open
410 if (UI
.clipboardOpen
=== true) {
411 UI
.toggleClipboardPanel();
414 if (UI
.xvpOpen
=== true) {
415 $D('noVNC_xvp').style
.display
= "none";
416 $D('xvpButton').className
= "noVNC_status_button";
419 $D('noVNC_xvp').style
.display
= "block";
420 $D('xvpButton').className
= "noVNC_status_button_selected";
425 // Show the clipboard panel
426 toggleClipboardPanel: function() {
427 // Close the description panel
428 $D('noVNC_description').style
.display
= "none";
429 // Close settings if open
430 if (UI
.settingsOpen
=== true) {
432 UI
.closeSettingsMenu();
434 // Close connection settings if open
435 if (UI
.connSettingsOpen
=== true) {
436 UI
.toggleConnectPanel();
438 // Close XVP panel if open
439 if (UI
.xvpOpen
=== true) {
442 // Toggle Clipboard Panel
443 if (UI
.clipboardOpen
=== true) {
444 $D('noVNC_clipboard').style
.display
= "none";
445 $D('clipboardButton').className
= "noVNC_status_button";
446 UI
.clipboardOpen
= false;
448 $D('noVNC_clipboard').style
.display
= "block";
449 $D('clipboardButton').className
= "noVNC_status_button_selected";
450 UI
.clipboardOpen
= true;
454 // Toggle fullscreen mode
455 toggleFullscreen: function() {
456 if (document
.fullscreenElement
|| // alternative standard method
457 document
.mozFullScreenElement
|| // currently working methods
458 document
.webkitFullscreenElement
||
459 document
.msFullscreenElement
) {
460 if (document
.exitFullscreen
) {
461 document
.exitFullscreen();
462 } else if (document
.mozCancelFullScreen
) {
463 document
.mozCancelFullScreen();
464 } else if (document
.webkitExitFullscreen
) {
465 document
.webkitExitFullscreen();
466 } else if (document
.msExitFullscreen
) {
467 document
.msExitFullscreen();
470 if (document
.documentElement
.requestFullscreen
) {
471 document
.documentElement
.requestFullscreen();
472 } else if (document
.documentElement
.mozRequestFullScreen
) {
473 document
.documentElement
.mozRequestFullScreen();
474 } else if (document
.documentElement
.webkitRequestFullscreen
) {
475 document
.documentElement
.webkitRequestFullscreen(Element
.ALLOW_KEYBOARD_INPUT
);
476 } else if (document
.body
.msRequestFullscreen
) {
477 document
.body
.msRequestFullscreen();
480 UI
.updateFullscreenButton();
483 updateFullscreenButton: function() {
484 if (document
.fullscreenElement
|| // alternative standard method
485 document
.mozFullScreenElement
|| // currently working methods
486 document
.webkitFullscreenElement
||
487 document
.msFullscreenElement
) {
488 $D('fullscreenButton').className
= "noVNC_status_button_selected";
490 $D('fullscreenButton').className
= "noVNC_status_button";
494 // Show the connection settings panel/menu
495 toggleConnectPanel: function() {
496 // Close the description panel
497 $D('noVNC_description').style
.display
= "none";
498 // Close connection settings if open
499 if (UI
.settingsOpen
=== true) {
501 UI
.closeSettingsMenu();
502 $D('connectButton').className
= "noVNC_status_button";
504 // Close clipboard panel if open
505 if (UI
.clipboardOpen
=== true) {
506 UI
.toggleClipboardPanel();
508 // Close XVP panel if open
509 if (UI
.xvpOpen
=== true) {
513 // Toggle Connection Panel
514 if (UI
.connSettingsOpen
=== true) {
515 $D('noVNC_controls').style
.display
= "none";
516 $D('connectButton').className
= "noVNC_status_button";
517 UI
.connSettingsOpen
= false;
518 UI
.saveSetting('host');
519 UI
.saveSetting('port');
520 //UI.saveSetting('password');
522 $D('noVNC_controls').style
.display
= "block";
523 $D('connectButton').className
= "noVNC_status_button_selected";
524 UI
.connSettingsOpen
= true;
525 $D('noVNC_host').focus();
529 // Toggle the settings menu:
530 // On open, settings are refreshed from saved cookies.
531 // On close, settings are applied
532 toggleSettingsPanel: function() {
533 // Close the description panel
534 $D('noVNC_description').style
.display
= "none";
535 if (UI
.settingsOpen
) {
537 UI
.closeSettingsMenu();
539 UI
.updateSetting('encrypt');
540 UI
.updateSetting('true_color');
541 if (Util
.browserSupportsCursorURIs()) {
542 UI
.updateSetting('cursor');
544 UI
.updateSetting('cursor', !UI
.isTouchDevice
);
545 $D('noVNC_cursor').disabled
= true;
547 UI
.updateSetting('clip');
548 UI
.updateSetting('resize');
549 UI
.updateSetting('shared');
550 UI
.updateSetting('view_only');
551 UI
.updateSetting('path');
552 UI
.updateSetting('repeaterID');
553 UI
.updateSetting('stylesheet');
554 UI
.updateSetting('logging');
556 UI
.openSettingsMenu();
561 openSettingsMenu: function() {
562 // Close the description panel
563 $D('noVNC_description').style
.display
= "none";
564 // Close clipboard panel if open
565 if (UI
.clipboardOpen
=== true) {
566 UI
.toggleClipboardPanel();
568 // Close connection settings if open
569 if (UI
.connSettingsOpen
=== true) {
570 UI
.toggleConnectPanel();
572 // Close XVP panel if open
573 if (UI
.xvpOpen
=== true) {
576 $D('noVNC_settings').style
.display
= "block";
577 $D('settingsButton').className
= "noVNC_status_button_selected";
578 UI
.settingsOpen
= true;
581 // Close menu (without applying settings)
582 closeSettingsMenu: function() {
583 $D('noVNC_settings').style
.display
= "none";
584 $D('settingsButton').className
= "noVNC_status_button";
585 UI
.settingsOpen
= false;
588 // Save/apply settings when 'Apply' button is pressed
589 settingsApply: function() {
590 //Util.Debug(">> settingsApply");
591 UI
.saveSetting('encrypt');
592 UI
.saveSetting('true_color');
593 if (Util
.browserSupportsCursorURIs()) {
594 UI
.saveSetting('cursor');
597 UI
.saveSetting('resize');
599 if (UI
.getSetting('resize') === 'downscale' || UI
.getSetting('resize') === 'scale') {
600 UI
.forceSetting('clip', false);
603 UI
.saveSetting('clip');
604 UI
.saveSetting('shared');
605 UI
.saveSetting('view_only');
606 UI
.saveSetting('path');
607 UI
.saveSetting('repeaterID');
608 UI
.saveSetting('stylesheet');
609 UI
.saveSetting('logging');
611 // Settings with immediate (non-connected related) effect
612 WebUtil
.selectStylesheet(UI
.getSetting('stylesheet'));
613 WebUtil
.init_logging(UI
.getSetting('logging'));
616 //Util.Debug("<< settingsApply");
621 setPassword: function() {
622 UI
.rfb
.sendPassword($D('noVNC_password').value
);
623 //Reset connect button.
624 $D('noVNC_connect_button').value
= "Connect";
625 $D('noVNC_connect_button').onclick
= UI
.Connect
;
626 //Hide connection panel.
627 UI
.toggleConnectPanel();
631 sendCtrlAltDel: function() {
632 UI
.rfb
.sendCtrlAltDel();
635 xvpShutdown: function() {
636 UI
.rfb
.xvpShutdown();
639 xvpReboot: function() {
643 xvpReset: function() {
647 setMouseButton: function(num
) {
648 if (typeof num
=== 'undefined') {
649 // Disable mouse buttons
653 UI
.rfb
.get_mouse().set_touchButton(num
);
656 var blist
= [0, 1,2,4];
657 for (var b
= 0; b
< blist
.length
; b
++) {
658 var button
= $D('noVNC_mouse_button' + blist
[b
]);
659 if (blist
[b
] === num
) {
660 button
.style
.display
= "";
662 button
.style
.display
= "none";
667 updateState: function(rfb
, state
, oldstate
, msg
) {
668 UI
.rfb_state
= state
;
673 klass
= "noVNC_status_error";
676 klass
= "noVNC_status_normal";
679 $D('noVNC_logo').style
.display
= "block";
680 $D('noVNC_container').style
.display
= "none";
683 klass
= "noVNC_status_normal";
686 UI
.toggleConnectPanel();
688 $D('noVNC_connect_button').value
= "Send Password";
689 $D('noVNC_connect_button').onclick
= UI
.setPassword
;
690 $D('noVNC_password').focus();
692 klass
= "noVNC_status_warn";
695 klass
= "noVNC_status_warn";
699 if (typeof(msg
) !== 'undefined') {
700 $D('noVNC-control-bar').setAttribute("class", klass
);
701 $D('noVNC_status').innerHTML
= msg
;
704 UI
.updateVisualState();
707 // Disable/enable controls depending on connection state
708 updateVisualState: function() {
709 var connected
= UI
.rfb
&& UI
.rfb_state
=== 'normal';
711 //Util.Debug(">> updateVisualState");
712 $D('noVNC_encrypt').disabled
= connected
;
713 $D('noVNC_true_color').disabled
= connected
;
714 if (Util
.browserSupportsCursorURIs()) {
715 $D('noVNC_cursor').disabled
= connected
;
717 UI
.updateSetting('cursor', !UI
.isTouchDevice
);
718 $D('noVNC_cursor').disabled
= true;
721 UI
.enableDisableViewClip(connected
);
722 $D('noVNC_resize').disabled
= connected
;
723 $D('noVNC_shared').disabled
= connected
;
724 $D('noVNC_view_only').disabled
= connected
;
725 $D('noVNC_path').disabled
= connected
;
726 $D('noVNC_repeaterID').disabled
= connected
;
730 UI
.setMouseButton(1);
731 $D('clipboardButton').style
.display
= "inline";
732 $D('showKeyboard').style
.display
= "inline";
733 $D('noVNC_extra_keys').style
.display
= "";
734 $D('sendCtrlAltDelButton').style
.display
= "inline";
737 $D('clipboardButton').style
.display
= "none";
738 $D('showKeyboard').style
.display
= "none";
739 $D('noVNC_extra_keys').style
.display
= "none";
740 $D('sendCtrlAltDelButton').style
.display
= "none";
741 UI
.updateXvpVisualState(0);
744 // State change disables viewport dragging.
745 // It is enabled (toggled) by direct click on the button
746 UI
.updateViewDrag(false);
748 switch (UI
.rfb_state
) {
752 $D('connectButton').style
.display
= "";
753 $D('disconnectButton').style
.display
= "none";
754 UI
.connSettingsOpen
= false;
755 UI
.toggleConnectPanel();
758 $D('connectButton').style
.display
= "";
759 $D('disconnectButton').style
.display
= "none";
762 $D('connectButton').style
.display
= "none";
763 $D('disconnectButton').style
.display
= "";
767 //Util.Debug("<< updateVisualState");
770 // Disable/enable XVP button
771 updateXvpVisualState: function(ver
) {
773 $D('xvpButton').style
.display
= 'inline';
775 $D('xvpButton').style
.display
= 'none';
776 // Close XVP panel if open
777 if (UI
.xvpOpen
=== true) {
783 // This resize can not be done until we know from the first Frame Buffer Update
784 // if it is supported or not.
785 // The resize is needed to make sure the server desktop size is updated to the
786 // corresponding size of the current local window when reconnecting to an
788 FBUComplete: function(rfb
, fbu
) {
790 UI
.rfb
.set_onFBUComplete(function() { });
793 // Display the desktop name in the document title
794 updateDocumentTitle: function(rfb
, name
) {
795 document
.title
= name
+ " - noVNC";
798 clipReceive: function(rfb
, text
) {
799 Util
.Debug(">> UI.clipReceive: " + text
.substr(0,40) + "...");
800 $D('noVNC_clipboard_text').value
= text
;
801 Util
.Debug("<< UI.clipReceive");
804 connect: function() {
805 UI
.closeSettingsMenu();
806 UI
.toggleConnectPanel();
808 var host
= $D('noVNC_host').value
;
809 var port
= $D('noVNC_port').value
;
810 var password
= $D('noVNC_password').value
;
811 var path
= $D('noVNC_path').value
;
812 if ((!host
) || (!port
)) {
813 throw new Error("Must set host and port");
816 if (!UI
.initRFB()) return;
818 UI
.rfb
.set_encrypt(UI
.getSetting('encrypt'));
819 UI
.rfb
.set_true_color(UI
.getSetting('true_color'));
820 UI
.rfb
.set_local_cursor(UI
.getSetting('cursor'));
821 UI
.rfb
.set_shared(UI
.getSetting('shared'));
822 UI
.rfb
.set_view_only(UI
.getSetting('view_only'));
823 UI
.rfb
.set_repeaterID(UI
.getSetting('repeaterID'));
825 UI
.rfb
.connect(host
, port
, password
, path
);
828 setTimeout(UI
.setBarPosition
, 100);
829 $D('noVNC_logo').style
.display
= "none";
830 $D('noVNC_container').style
.display
= "inline";
833 disconnect: function() {
834 UI
.closeSettingsMenu();
837 // Restore the callback used for initial resize
838 UI
.rfb
.set_onFBUComplete(UI
.FBUComplete
);
840 $D('noVNC_logo').style
.display
= "block";
841 $D('noVNC_container').style
.display
= "none";
843 // Don't display the connection settings until we're actually disconnected
846 displayBlur: function() {
849 UI
.rfb
.get_keyboard().set_focused(false);
850 UI
.rfb
.get_mouse().set_focused(false);
853 displayFocus: function() {
856 UI
.rfb
.get_keyboard().set_focused(true);
857 UI
.rfb
.get_mouse().set_focused(true);
860 clipClear: function() {
861 $D('noVNC_clipboard_text').value
= "";
862 UI
.rfb
.clipboardPasteFrom("");
865 clipSend: function() {
866 var text
= $D('noVNC_clipboard_text').value
;
867 Util
.Debug(">> UI.clipSend: " + text
.substr(0,40) + "...");
868 UI
.rfb
.clipboardPasteFrom(text
);
869 Util
.Debug("<< UI.clipSend");
872 // Set and configure viewport clipping
873 setViewClip: function(clip
) {
876 display
= UI
.rfb
.get_display();
881 var cur_clip
= display
.get_viewport();
883 if (typeof(clip
) !== 'boolean') {
884 // Use current setting
885 clip
= UI
.getSetting('clip');
888 if (clip
&& !cur_clip
) {
890 UI
.updateSetting('clip', true);
891 } else if (!clip
&& cur_clip
) {
893 UI
.updateSetting('clip', false);
894 display
.set_viewport(false);
895 // Disable max dimensions
896 display
.set_maxWidth(0);
897 display
.set_maxHeight(0);
898 display
.viewportChangeSize();
900 if (UI
.getSetting('clip')) {
901 // If clipping, update clipping settings
902 display
.set_viewport(true);
904 var size
= UI
.getCanvasLimit();
906 display
.set_maxWidth(size
.w
);
907 display
.set_maxHeight(size
.h
);
909 // Hide potential scrollbars that can skew the position
910 $D('noVNC_container').style
.overflow
= "hidden";
912 // The x position marks the left margin of the canvas,
913 // remove the margin from both sides to keep it centered
914 var new_w
= size
.w
- (2 * Util
.getPosition($D('noVNC_canvas')).x
);
916 $D('noVNC_container').style
.overflow
= "visible";
918 display
.viewportChangeSize(new_w
, size
.h
);
923 // Handle special cases where clipping is forced on/off or locked
924 enableDisableViewClip: function (connected
) {
925 var resizeElem
= $D('noVNC_resize');
926 if (resizeElem
.value
=== 'downscale' || resizeElem
.value
=== 'scale') {
927 UI
.forceSetting('clip', false);
928 $D('noVNC_clip').disabled
= true;
930 $D('noVNC_clip').disabled
= connected
|| UI
.isTouchDevice
;
931 if (UI
.isTouchDevice
) {
932 UI
.forceSetting('clip', true);
937 // Update the viewport drag/move button
938 updateViewDrag: function(drag
) {
941 var vmb
= $D('noVNC_view_drag_button');
943 // Check if viewport drag is possible
944 if (UI
.rfb_state
=== 'normal' &&
945 UI
.rfb
.get_display().get_viewport() &&
946 UI
.rfb
.get_display().clippingDisplay()) {
948 // Show and enable the drag button
949 vmb
.style
.display
= "inline";
950 vmb
.disabled
= false;
953 // The VNC content is the same size as
954 // or smaller than the display
956 if (UI
.rfb
.get_viewportDrag
) {
957 // Turn off viewport drag when it's
958 // active since it can't be used here
959 vmb
.className
= "noVNC_status_button";
960 UI
.rfb
.set_viewportDrag(false);
963 // Disable or hide the drag button
964 if (UI
.rfb_state
=== 'normal' && UI
.isTouchDevice
) {
965 vmb
.style
.display
= "inline";
968 vmb
.style
.display
= "none";
973 if (typeof(drag
) !== "undefined" &&
974 typeof(drag
) !== "object") {
976 vmb
.className
= "noVNC_status_button_selected";
977 UI
.rfb
.set_viewportDrag(true);
979 vmb
.className
= "noVNC_status_button";
980 UI
.rfb
.set_viewportDrag(false);
985 toggleViewDrag: function() {
988 var vmb
= $D('noVNC_view_drag_button');
989 if (UI
.rfb
.get_viewportDrag()) {
990 vmb
.className
= "noVNC_status_button";
991 UI
.rfb
.set_viewportDrag(false);
993 vmb
.className
= "noVNC_status_button_selected";
994 UI
.rfb
.set_viewportDrag(true);
998 // On touch devices, show the OS keyboard
999 showKeyboard: function() {
1000 var kbi
= $D('keyboardinput');
1001 var skb
= $D('showKeyboard');
1002 var l
= kbi
.value
.length
;
1003 if(UI
.keyboardVisible
=== false) {
1005 try { kbi
.setSelectionRange(l
, l
); } // Move the caret to the end
1006 catch (err
) {} // setSelectionRange is undefined in Google Chrome
1007 UI
.keyboardVisible
= true;
1008 skb
.className
= "noVNC_status_button_selected";
1009 } else if(UI
.keyboardVisible
=== true) {
1011 skb
.className
= "noVNC_status_button";
1012 UI
.keyboardVisible
= false;
1016 keepKeyboard: function() {
1017 clearTimeout(UI
.hideKeyboardTimeout
);
1018 if(UI
.keyboardVisible
=== true) {
1019 $D('keyboardinput').focus();
1020 $D('showKeyboard').className
= "noVNC_status_button_selected";
1021 } else if(UI
.keyboardVisible
=== false) {
1022 $D('keyboardinput').blur();
1023 $D('showKeyboard').className
= "noVNC_status_button";
1027 keyboardinputReset: function() {
1028 var kbi
= $D('keyboardinput');
1029 kbi
.value
= new Array(UI
.defaultKeyboardinputLen
).join("_");
1030 UI
.lastKeyboardinput
= kbi
.value
;
1033 // When normal keyboard events are left uncought, use the input events from
1034 // the keyboardinput element instead and generate the corresponding key events.
1035 // This code is required since some browsers on Android are inconsistent in
1036 // sending keyCodes in the normal keyboard events when using on screen keyboards.
1037 keyInput: function(event
) {
1039 if (!UI
.rfb
) return;
1041 var newValue
= event
.target
.value
;
1043 if (!UI
.lastKeyboardinput
) {
1044 UI
.keyboardinputReset();
1046 var oldValue
= UI
.lastKeyboardinput
;
1050 // Try to check caret position since whitespace at the end
1051 // will not be considered by value.length in some browsers
1052 newLen
= Math
.max(event
.target
.selectionStart
, newValue
.length
);
1054 // selectionStart is undefined in Google Chrome
1055 newLen
= newValue
.length
;
1057 var oldLen
= oldValue
.length
;
1060 var inputs
= newLen
- oldLen
;
1062 backspaces
= -inputs
;
1067 // Compare the old string with the new to account for
1068 // text-corrections or other input that modify existing text
1070 for (i
= 0; i
< Math
.min(oldLen
, newLen
); i
++) {
1071 if (newValue
.charAt(i
) != oldValue
.charAt(i
)) {
1072 inputs
= newLen
- i
;
1073 backspaces
= oldLen
- i
;
1078 // Send the key events
1079 for (i
= 0; i
< backspaces
; i
++) {
1080 UI
.rfb
.sendKey(XK_BackSpace
);
1082 for (i
= newLen
- inputs
; i
< newLen
; i
++) {
1083 UI
.rfb
.sendKey(newValue
.charCodeAt(i
));
1086 // Control the text content length in the keyboardinput element
1087 if (newLen
> 2 * UI
.defaultKeyboardinputLen
) {
1088 UI
.keyboardinputReset();
1089 } else if (newLen
< 1) {
1090 // There always have to be some text in the keyboardinput
1091 // element with which backspace can interact.
1092 UI
.keyboardinputReset();
1093 // This sometimes causes the keyboard to disappear for a second
1094 // but it is required for the android keyboard to recognize that
1095 // text has been added to the field
1096 event
.target
.blur();
1097 // This has to be ran outside of the input handler in order to work
1098 setTimeout(function() { UI
.keepKeyboard(); }, 0);
1100 UI
.lastKeyboardinput
= newValue
;
1104 keyInputBlur: function() {
1105 $D('showKeyboard').className
= "noVNC_status_button";
1106 //Weird bug in iOS if you change keyboardVisible
1107 //here it does not actually occur so next time
1108 //you click keyboard icon it doesnt work.
1109 UI
.hideKeyboardTimeout
= setTimeout(function() { UI
.setKeyboard(); },100);
1112 showExtraKeys: function() {
1114 if(UI
.extraKeysVisible
=== false) {
1115 $D('toggleCtrlButton').style
.display
= "inline";
1116 $D('toggleAltButton').style
.display
= "inline";
1117 $D('sendTabButton').style
.display
= "inline";
1118 $D('sendEscButton').style
.display
= "inline";
1119 $D('showExtraKeysButton').className
= "noVNC_status_button_selected";
1120 UI
.extraKeysVisible
= true;
1121 } else if(UI
.extraKeysVisible
=== true) {
1122 $D('toggleCtrlButton').style
.display
= "";
1123 $D('toggleAltButton').style
.display
= "";
1124 $D('sendTabButton').style
.display
= "";
1125 $D('sendEscButton').style
.display
= "";
1126 $D('showExtraKeysButton').className
= "noVNC_status_button";
1127 UI
.extraKeysVisible
= false;
1131 toggleCtrl: function() {
1133 if(UI
.ctrlOn
=== false) {
1134 UI
.rfb
.sendKey(XK_Control_L
, true);
1135 $D('toggleCtrlButton').className
= "noVNC_status_button_selected";
1137 } else if(UI
.ctrlOn
=== true) {
1138 UI
.rfb
.sendKey(XK_Control_L
, false);
1139 $D('toggleCtrlButton').className
= "noVNC_status_button";
1144 toggleAlt: function() {
1146 if(UI
.altOn
=== false) {
1147 UI
.rfb
.sendKey(XK_Alt_L
, true);
1148 $D('toggleAltButton').className
= "noVNC_status_button_selected";
1150 } else if(UI
.altOn
=== true) {
1151 UI
.rfb
.sendKey(XK_Alt_L
, false);
1152 $D('toggleAltButton').className
= "noVNC_status_button";
1157 sendTab: function() {
1159 UI
.rfb
.sendKey(XK_Tab
);
1162 sendEsc: function() {
1164 UI
.rfb
.sendKey(XK_Escape
);
1167 setKeyboard: function() {
1168 UI
.keyboardVisible
= false;
1171 //Helper to add options to dropdown.
1172 addOption: function(selectbox
, text
, value
) {
1173 var optn
= document
.createElement("OPTION");
1176 selectbox
.options
.add(optn
);
1179 setBarPosition: function() {
1180 $D('noVNC-control-bar').style
.top
= (window
.pageYOffset
) + 'px';
1181 $D('noVNC_mobile_buttons').style
.left
= (window
.pageXOffset
) + 'px';
1183 var vncwidth
= $D('noVNC_screen').style
.offsetWidth
;
1184 $D('noVNC-control-bar').style
.width
= vncwidth
+ 'px';