2 * noVNC: HTML5 VNC client
3 * Copyright (C) 2012 Joel Martin
4 * Copyright (C) 2016 Samuel Mannehed for Cendio AB
5 * Copyright (C) 2016 Pierre Ossman for Cendio AB
6 * Licensed under MPL 2.0 (see LICENSE.txt)
8 * See README.md for usage and integration instructions.
11 /* jslint white: false, browser: true */
12 /* global window, document.getElementById, Util, WebUtil, RFB, Display */
15 * import Util from "../core/util";
16 * import KeyTable from "../core/input/keysym";
17 * import RFB from "../core/rfb";
18 * import Display from "../core/display";
19 * import WebUtil from "./webutil";
27 /* [begin skip-as-module] */
28 // Load supporting scripts
30 {'core': ["base64.js", "websock.js", "des.js", "input/keysymdef.js",
31 "input/xtscancodes.js", "input/util.js", "input/devices.js",
32 "display.js", "inflator.js", "rfb.js", "input/keysym.js"]});
34 window
.onscriptsload = function () { UI
.load(); };
35 /* [end skip-as-module] */
44 hideKeyboardTimeout
: null,
45 idleControlbarTimeout
: null,
46 closeControlbarTimeout
: null,
48 controlbarGrabbed
: false,
49 controlbarDrag
: false,
50 controlbarMouseDownClientY
: 0,
51 controlbarMouseDownOffsetY
: 0,
52 keyboardVisible
: false,
55 rememberedClipSetting
: null,
56 lastKeyboardinput
: null,
57 defaultKeyboardinputLen
: 100,
59 // Setup rfb object, load settings from browser storage, then call
60 // UI.init to setup the UI/menus
61 load: function(callback
) {
62 WebUtil
.initSettings(UI
.start
, callback
);
65 // Render default UI and initialize settings menu
66 start: function(callback
) {
68 // Setup global variables first
69 UI
.isSafari
= (navigator
.userAgent
.indexOf('Safari') !== -1 &&
70 navigator
.userAgent
.indexOf('Chrome') === -1);
74 // Adapt the interface for touch screen devices
75 if (Util
.isTouchDevice
) {
76 document
.documentElement
.classList
.add("noVNC_touch");
77 // Remove the address bar
78 setTimeout(function() { window
.scrollTo(0, 1); }, 100);
79 UI
.forceSetting('clip', true);
81 UI
.initSetting('clip', false);
84 // Setup and initialize event handlers
85 UI
.setupWindowEvents();
87 UI
.addControlbarHandlers();
88 UI
.addTouchSpecificHandlers();
89 UI
.addExtraKeysHandlers();
91 UI
.addConnectionControlHandlers();
92 UI
.addClipboardHandlers();
93 UI
.addSettingsHandlers();
95 // Show the connect panel on first load unless autoconnecting
97 UI
.openConnectPanel();
102 UI
.updateVisualState();
104 document
.getElementById('noVNC_setting_host').focus();
106 var autoconnect
= WebUtil
.getConfigVar('autoconnect', false);
107 if (autoconnect
=== 'true' || autoconnect
== '1') {
114 if (typeof callback
=== "function") {
119 initSettings: function() {
120 // Stylesheet selection dropdown
121 var sheet
= WebUtil
.selectStylesheet();
122 var sheets
= WebUtil
.getStylesheets();
124 for (i
= 0; i
< sheets
.length
; i
+= 1) {
125 UI
.addOption(document
.getElementById('noVNC_setting_stylesheet'),sheets
[i
].title
, sheets
[i
].title
);
128 // Logging selection dropdown
129 var llevels
= ['error', 'warn', 'info', 'debug'];
130 for (i
= 0; i
< llevels
.length
; i
+= 1) {
131 UI
.addOption(document
.getElementById('noVNC_setting_logging'),llevels
[i
], llevels
[i
]);
134 // Settings with immediate effects
135 UI
.initSetting('logging', 'warn');
136 WebUtil
.init_logging(UI
.getSetting('logging'));
138 UI
.initSetting('stylesheet', 'default');
139 WebUtil
.selectStylesheet(null);
140 // call twice to get around webkit bug
141 WebUtil
.selectStylesheet(UI
.getSetting('stylesheet'));
143 // if port == 80 (or 443) then it won't be present and should be
145 var port
= window
.location
.port
;
147 if (window
.location
.protocol
.substring(0,5) == 'https') {
150 else if (window
.location
.protocol
.substring(0,4) == 'http') {
155 /* Populate the controls if defaults are provided in the URL */
156 UI
.initSetting('host', window
.location
.hostname
);
157 UI
.initSetting('port', port
);
158 UI
.initSetting('password', '');
159 UI
.initSetting('encrypt', (window
.location
.protocol
=== "https:"));
160 UI
.initSetting('true_color', true);
161 UI
.initSetting('cursor', !Util
.isTouchDevice
);
162 UI
.initSetting('resize', 'off');
163 UI
.initSetting('shared', true);
164 UI
.initSetting('view_only', false);
165 UI
.initSetting('path', 'websockify');
166 UI
.initSetting('repeaterID', '');
167 UI
.initSetting('token', '');
170 setupWindowEvents: function() {
171 window
.addEventListener( 'resize', function () {
172 UI
.applyResizeMode();
177 document
.getElementById("noVNC_status")
178 .addEventListener('click', UI
.hideStatus
);
181 setupFullscreen: function() {
182 // Only show the button if fullscreen is properly supported
183 // * Safari doesn't support alphanumerical input while in fullscreen
185 (document
.documentElement
.requestFullscreen
||
186 document
.documentElement
.mozRequestFullScreen
||
187 document
.documentElement
.webkitRequestFullscreen
||
188 document
.body
.msRequestFullscreen
)) {
189 document
.getElementById('noVNC_fullscreen_button')
190 .classList
.remove("noVNC_hidden");
191 UI
.addFullscreenHandlers();
195 addControlbarHandlers: function() {
196 document
.getElementById("noVNC_control_bar")
197 .addEventListener('mousemove', UI
.activateControlbar
);
198 document
.getElementById("noVNC_control_bar")
199 .addEventListener('mouseup', UI
.activateControlbar
);
200 document
.getElementById("noVNC_control_bar")
201 .addEventListener('mousedown', UI
.activateControlbar
);
202 document
.getElementById("noVNC_control_bar")
203 .addEventListener('keypress', UI
.activateControlbar
);
205 document
.getElementById("noVNC_control_bar")
206 .addEventListener('mousedown', UI
.keepControlbar
);
207 document
.getElementById("noVNC_control_bar")
208 .addEventListener('keypress', UI
.keepControlbar
);
210 document
.getElementById("noVNC_view_drag_button")
211 .addEventListener('click', UI
.toggleViewDrag
);
213 document
.getElementById("noVNC_control_bar_handle")
214 .addEventListener('mousedown', UI
.controlbarHandleMouseDown
);
215 document
.getElementById("noVNC_control_bar_handle")
216 .addEventListener('mouseup', UI
.controlbarHandleMouseUp
);
217 document
.getElementById("noVNC_control_bar_handle")
218 .addEventListener('mousemove', UI
.dragControlbarHandle
);
219 // resize events aren't available for elements
220 window
.addEventListener('resize', UI
.updateControlbarHandle
);
223 addTouchSpecificHandlers: function() {
224 document
.getElementById("noVNC_mouse_button0")
225 .addEventListener('click', function () { UI
.setMouseButton(1); });
226 document
.getElementById("noVNC_mouse_button1")
227 .addEventListener('click', function () { UI
.setMouseButton(2); });
228 document
.getElementById("noVNC_mouse_button2")
229 .addEventListener('click', function () { UI
.setMouseButton(4); });
230 document
.getElementById("noVNC_mouse_button4")
231 .addEventListener('click', function () { UI
.setMouseButton(0); });
232 document
.getElementById("noVNC_keyboard_button")
233 .addEventListener('click', UI
.toggleVirtualKeyboard
);
235 document
.getElementById("noVNC_keyboardinput")
236 .addEventListener('input', UI
.keyInput
);
237 document
.getElementById("noVNC_keyboardinput")
238 .addEventListener('blur', UI
.onblurVirtualKeyboard
);
239 document
.getElementById("noVNC_keyboardinput")
240 .addEventListener('submit', function () { return false; });
242 document
.getElementById("noVNC_control_bar")
243 .addEventListener('touchstart', UI
.activateControlbar
);
244 document
.getElementById("noVNC_control_bar")
245 .addEventListener('touchmove', UI
.activateControlbar
);
246 document
.getElementById("noVNC_control_bar")
247 .addEventListener('touchend', UI
.activateControlbar
);
248 document
.getElementById("noVNC_control_bar")
249 .addEventListener('input', UI
.activateControlbar
);
251 document
.getElementById("noVNC_control_bar")
252 .addEventListener('touchstart', UI
.keepControlbar
);
253 document
.getElementById("noVNC_control_bar")
254 .addEventListener('input', UI
.keepControlbar
);
256 document
.getElementById("noVNC_control_bar_handle")
257 .addEventListener('touchstart', UI
.controlbarHandleMouseDown
);
258 document
.getElementById("noVNC_control_bar_handle")
259 .addEventListener('touchend', UI
.controlbarHandleMouseUp
);
260 document
.getElementById("noVNC_control_bar_handle")
261 .addEventListener('touchmove', UI
.dragControlbarHandle
);
263 window
.addEventListener('load', UI
.keyboardinputReset
);
266 addExtraKeysHandlers: function() {
267 document
.getElementById("noVNC_toggle_extra_keys_button")
268 .addEventListener('click', UI
.toggleExtraKeys
);
269 document
.getElementById("noVNC_toggle_ctrl_button")
270 .addEventListener('click', UI
.toggleCtrl
);
271 document
.getElementById("noVNC_toggle_alt_button")
272 .addEventListener('click', UI
.toggleAlt
);
273 document
.getElementById("noVNC_send_tab_button")
274 .addEventListener('click', UI
.sendTab
);
275 document
.getElementById("noVNC_send_esc_button")
276 .addEventListener('click', UI
.sendEsc
);
277 document
.getElementById("noVNC_send_ctrl_alt_del_button")
278 .addEventListener('click', UI
.sendCtrlAltDel
);
281 addXvpHandlers: function() {
282 document
.getElementById("noVNC_xvp_shutdown_button")
283 .addEventListener('click', function() { UI
.rfb
.xvpShutdown(); });
284 document
.getElementById("noVNC_xvp_reboot_button")
285 .addEventListener('click', function() { UI
.rfb
.xvpReboot(); });
286 document
.getElementById("noVNC_xvp_reset_button")
287 .addEventListener('click', function() { UI
.rfb
.xvpReset(); });
288 document
.getElementById("noVNC_xvp_button")
289 .addEventListener('click', UI
.toggleXvpPanel
);
292 addConnectionControlHandlers: function() {
293 document
.getElementById("noVNC_connect_controls_button")
294 .addEventListener('click', UI
.toggleConnectPanel
);
295 document
.getElementById("noVNC_disconnect_button")
296 .addEventListener('click', UI
.disconnect
);
297 document
.getElementById("noVNC_connect_button")
298 .addEventListener('click', UI
.connect
);
300 document
.getElementById("noVNC_password_button")
301 .addEventListener('click', UI
.setPassword
);
304 addClipboardHandlers: function() {
305 document
.getElementById("noVNC_clipboard_button")
306 .addEventListener('click', UI
.toggleClipboardPanel
);
307 document
.getElementById("noVNC_clipboard_text")
308 .addEventListener('focus', UI
.displayBlur
);
309 document
.getElementById("noVNC_clipboard_text")
310 .addEventListener('blur', UI
.displayFocus
);
311 document
.getElementById("noVNC_clipboard_text")
312 .addEventListener('change', UI
.clipboardSend
);
313 document
.getElementById("noVNC_clipboard_clear_button")
314 .addEventListener('click', UI
.clipboardClear
);
317 addSettingsHandlers: function() {
318 document
.getElementById("noVNC_settings_button")
319 .addEventListener('click', UI
.toggleSettingsPanel
);
320 document
.getElementById("noVNC_settings_apply")
321 .addEventListener('click', UI
.settingsApply
);
323 document
.getElementById("noVNC_setting_resize")
324 .addEventListener('change', UI
.enableDisableViewClip
);
327 addFullscreenHandlers: function() {
328 document
.getElementById("noVNC_fullscreen_button")
329 .addEventListener('click', UI
.toggleFullscreen
);
331 window
.addEventListener('fullscreenchange', UI
.updateFullscreenButton
);
332 window
.addEventListener('mozfullscreenchange', UI
.updateFullscreenButton
);
333 window
.addEventListener('webkitfullscreenchange', UI
.updateFullscreenButton
);
334 window
.addEventListener('msfullscreenchange', UI
.updateFullscreenButton
);
337 initRFB: function() {
339 UI
.rfb
= new RFB({'target': document
.getElementById('noVNC_canvas'),
340 'onNotification': UI
.notification
,
341 'onUpdateState': UI
.updateState
,
342 'onDisconnected': UI
.disconnectFinished
,
343 'onPasswordRequired': UI
.passwordRequired
,
344 'onXvpInit': UI
.updateXvpButton
,
345 'onClipboard': UI
.clipboardReceive
,
347 'onFBUComplete': UI
.initialResize
,
348 'onFBResize': UI
.updateViewDrag
,
349 'onDesktopName': UI
.updateDesktopName
});
352 var msg
= 'Unable to create RFB client -- ' + exc
;
354 UI
.showStatus(msg
, 'error');
365 updateState: function(rfb
, state
, oldstate
) {
368 UI
.showStatus("Connecting");
372 if (rfb
&& rfb
.get_encrypt()) {
373 UI
.showStatus("Connected (encrypted) to " +
376 UI
.showStatus("Connected (unencrypted) to " +
380 case 'disconnecting':
381 UI
.showStatus("Disconnecting");
384 UI
.connected
= false;
385 UI
.showStatus("Disconnected");
388 UI
.showStatus("Invalid state", 'error');
392 UI
.updateVisualState();
395 // Disable/enable controls depending on connection state
396 updateVisualState: function() {
397 //Util.Debug(">> updateVisualState");
398 document
.getElementById('noVNC_setting_encrypt').disabled
= UI
.connected
;
399 document
.getElementById('noVNC_setting_true_color').disabled
= UI
.connected
;
400 if (Util
.browserSupportsCursorURIs()) {
401 document
.getElementById('noVNC_setting_cursor').disabled
= UI
.connected
;
403 UI
.updateSetting('cursor', !Util
.isTouchDevice
);
404 document
.getElementById('noVNC_setting_cursor').disabled
= true;
407 UI
.enableDisableViewClip();
408 document
.getElementById('noVNC_setting_resize').disabled
= UI
.connected
;
409 document
.getElementById('noVNC_setting_shared').disabled
= UI
.connected
;
410 document
.getElementById('noVNC_setting_view_only').disabled
= UI
.connected
;
411 document
.getElementById('noVNC_setting_path').disabled
= UI
.connected
;
412 document
.getElementById('noVNC_setting_repeaterID').disabled
= UI
.connected
;
415 document
.documentElement
.classList
.add("noVNC_connected");
417 UI
.setMouseButton(1);
419 // Hide the controlbar after 2 seconds
420 UI
.closeControlbarTimeout
= setTimeout(UI
.closeControlbar
, 2000);
422 document
.documentElement
.classList
.remove("noVNC_connected");
423 UI
.updateXvpButton(0);
427 // Hide input related buttons in view only mode
428 if (UI
.rfb
&& UI
.rfb
.get_view_only()) {
429 document
.getElementById('noVNC_keyboard_button')
430 .classList
.add('noVNC_hidden');
431 document
.getElementById('noVNC_toggle_extra_keys_button')
432 .classList
.add('noVNC_hidden');
434 document
.getElementById('noVNC_keyboard_button')
435 .classList
.remove('noVNC_hidden');
436 document
.getElementById('noVNC_toggle_extra_keys_button')
437 .classList
.remove('noVNC_hidden');
440 // State change disables viewport dragging.
441 // It is enabled (toggled) by direct click on the button
442 UI
.setViewDrag(false);
444 // State change also closes the password dialog
445 document
.getElementById('noVNC_password_dlg')
446 .classList
.remove('noVNC_open');
448 //Util.Debug("<< updateVisualState");
451 showStatus: function(text
, status_type
, time
) {
452 var statusElem
= document
.getElementById('noVNC_status');
454 clearTimeout(UI
.statusTimeout
);
456 if (typeof status_type
=== 'undefined') {
457 status_type
= 'normal';
460 statusElem
.classList
.remove("noVNC_status_normal",
462 "noVNC_status_error");
464 switch (status_type
) {
467 statusElem
.classList
.add("noVNC_status_warn");
470 statusElem
.classList
.add("noVNC_status_error");
475 statusElem
.classList
.add("noVNC_status_normal");
479 statusElem
.innerHTML
= text
;
480 statusElem
.classList
.add("noVNC_open");
482 // If no time was specified, show the status for 1.5 seconds
483 if (typeof time
=== 'undefined') {
487 // Error messages do not timeout
488 if (status_type
!== 'error') {
489 UI
.statusTimeout
= window
.setTimeout(UI
.hideStatus
, time
);
493 hideStatus: function() {
494 clearTimeout(UI
.statusTimeout
);
495 document
.getElementById('noVNC_status').classList
.remove("noVNC_open");
498 notification: function (rfb
, msg
, level
, options
) {
499 UI
.showStatus(msg
, level
);
502 activateControlbar: function(event
) {
503 clearTimeout(UI
.idleControlbarTimeout
);
504 // We manipulate the anchor instead of the actual control
505 // bar in order to avoid creating new a stacking group
506 document
.getElementById('noVNC_control_bar_anchor')
507 .classList
.remove("noVNC_idle");
508 UI
.idleControlbarTimeout
= window
.setTimeout(UI
.idleControlbar
, 2000);
511 idleControlbar: function() {
512 document
.getElementById('noVNC_control_bar_anchor')
513 .classList
.add("noVNC_idle");
516 keepControlbar: function() {
517 clearTimeout(UI
.closeControlbarTimeout
);
520 openControlbar: function() {
521 document
.getElementById('noVNC_control_bar')
522 .classList
.add("noVNC_open");
525 closeControlbar: function() {
527 document
.getElementById('noVNC_control_bar')
528 .classList
.remove("noVNC_open");
531 toggleControlbar: function() {
532 if (document
.getElementById('noVNC_control_bar')
533 .classList
.contains("noVNC_open")) {
534 UI
.closeControlbar();
540 dragControlbarHandle: function (e
) {
541 if (!UI
.controlbarGrabbed
) return;
543 var ptr
= Util
.getPointerEvent(e
);
545 if (!UI
.controlbarDrag
) {
546 // The goal is to trigger on a certain physical width, the
547 // devicePixelRatio brings us a bit closer but is not optimal.
548 var dragThreshold
= 10 * (window
.devicePixelRatio
|| 1);
549 var dragDistance
= Math
.abs(ptr
.clientY
- UI
.controlbarMouseDownClientY
);
551 if (dragDistance
< dragThreshold
) return;
553 UI
.controlbarDrag
= true;
556 var eventY
= ptr
.clientY
- UI
.controlbarMouseDownOffsetY
;
558 UI
.moveControlbarHandle(eventY
);
564 // Move the handle but don't allow any position outside the bounds
565 moveControlbarHandle: function (viewportRelativeY
) {
566 var handle
= document
.getElementById("noVNC_control_bar_handle");
567 var handleHeight
= handle
.getBoundingClientRect().height
;
568 var controlbarBounds
= document
.getElementById("noVNC_control_bar")
569 .getBoundingClientRect();
572 // These heights need to be non-zero for the below logic to work
573 if (handleHeight
=== 0 || controlbarBounds
.height
=== 0) {
577 var newY
= viewportRelativeY
;
579 // Check if the coordinates are outside the control bar
580 if (newY
< controlbarBounds
.top
+ margin
) {
581 // Force coordinates to be below the top of the control bar
582 newY
= controlbarBounds
.top
+ margin
;
584 } else if (newY
> controlbarBounds
.top
+
585 controlbarBounds
.height
- handleHeight
- margin
) {
586 // Force coordinates to be above the bottom of the control bar
587 newY
= controlbarBounds
.top
+
588 controlbarBounds
.height
- handleHeight
- margin
;
591 // Corner case: control bar too small for stable position
592 if (controlbarBounds
.height
< (handleHeight
+ margin
* 2)) {
593 newY
= controlbarBounds
.top
+
594 (controlbarBounds
.height
- handleHeight
) / 2;
597 // The transform needs coordinates that are relative to the parent
598 var parentRelativeY
= newY
- controlbarBounds
.top
;
599 handle
.style
.transform
= "translateY(" + parentRelativeY
+ "px)";
602 updateControlbarHandle: function () {
603 // Since the control bar is fixed on the viewport and not the page,
604 // the move function expects coordinates relative the the viewport.
605 var handle
= document
.getElementById("noVNC_control_bar_handle");
606 var handleBounds
= handle
.getBoundingClientRect();
607 UI
.moveControlbarHandle(handleBounds
.top
);
610 controlbarHandleMouseUp: function(e
) {
611 if ((e
.type
== "mouseup") && (e
.button
!= 0)) return;
613 // mouseup and mousedown on the same place toggles the controlbar
614 if (UI
.controlbarGrabbed
&& !UI
.controlbarDrag
) {
615 UI
.toggleControlbar();
619 UI
.controlbarGrabbed
= false;
622 controlbarHandleMouseDown: function(e
) {
623 if ((e
.type
== "mousedown") && (e
.button
!= 0)) return;
625 var ptr
= Util
.getPointerEvent(e
);
627 var handle
= document
.getElementById("noVNC_control_bar_handle");
628 var bounds
= handle
.getBoundingClientRect();
630 WebUtil
.setCapture(handle
);
631 UI
.controlbarGrabbed
= true;
632 UI
.controlbarDrag
= false;
634 UI
.controlbarMouseDownClientY
= ptr
.clientY
;
635 UI
.controlbarMouseDownOffsetY
= ptr
.clientY
- bounds
.top
;
646 // Initial page load read/initialization of settings
647 initSetting: function(name
, defVal
) {
648 // Check Query string followed by cookie
649 var val
= WebUtil
.getConfigVar(name
);
651 val
= WebUtil
.readSetting(name
, defVal
);
653 UI
.updateSetting(name
, val
);
657 // Update cookie and form control setting. If value is not set, then
658 // updates from control to current cookie setting.
659 updateSetting: function(name
, value
) {
661 // Save the cookie for this session
662 if (typeof value
!== 'undefined') {
663 WebUtil
.writeSetting(name
, value
);
666 // Update the settings control
667 value
= UI
.getSetting(name
);
669 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
670 if (ctrl
.type
=== 'checkbox') {
671 ctrl
.checked
= value
;
673 } else if (typeof ctrl
.options
!== 'undefined') {
674 for (var i
= 0; i
< ctrl
.options
.length
; i
+= 1) {
675 if (ctrl
.options
[i
].value
=== value
) {
676 ctrl
.selectedIndex
= i
;
681 /*Weird IE9 error leads to 'null' appearring
682 in textboxes instead of ''.*/
683 if (value
=== null) {
690 // Save control setting to cookie
691 saveSetting: function(name
) {
692 var val
, ctrl
= document
.getElementById('noVNC_setting_' + name
);
693 if (ctrl
.type
=== 'checkbox') {
695 } else if (typeof ctrl
.options
!== 'undefined') {
696 val
= ctrl
.options
[ctrl
.selectedIndex
].value
;
700 WebUtil
.writeSetting(name
, val
);
701 //Util.Debug("Setting saved '" + name + "=" + val + "'");
705 // Force a setting to be a certain value
706 forceSetting: function(name
, val
) {
707 UI
.updateSetting(name
, val
);
711 // Read form control compatible setting from cookie
712 getSetting: function(name
) {
713 var ctrl
= document
.getElementById('noVNC_setting_' + name
);
714 var val
= WebUtil
.readSetting(name
);
715 if (typeof val
!== 'undefined' && val
!== null && ctrl
.type
=== 'checkbox') {
716 if (val
.toString().toLowerCase() in {'0':1, 'no':1, 'false':1}) {
725 // Save/apply settings when 'Apply' button is pressed
726 settingsApply: function() {
727 //Util.Debug(">> settingsApply");
728 UI
.saveSetting('encrypt');
729 UI
.saveSetting('true_color');
730 if (Util
.browserSupportsCursorURIs()) {
731 UI
.saveSetting('cursor');
734 UI
.saveSetting('resize');
736 if (UI
.getSetting('resize') === 'downscale' || UI
.getSetting('resize') === 'scale') {
737 UI
.forceSetting('clip', false);
740 UI
.saveSetting('clip');
741 UI
.saveSetting('shared');
742 UI
.saveSetting('view_only');
743 UI
.saveSetting('path');
744 UI
.saveSetting('repeaterID');
745 UI
.saveSetting('stylesheet');
746 UI
.saveSetting('logging');
748 // Settings with immediate (non-connected related) effect
749 WebUtil
.selectStylesheet(UI
.getSetting('stylesheet'));
750 WebUtil
.init_logging(UI
.getSetting('logging'));
753 //Util.Debug("<< settingsApply");
762 closeAllPanels: function() {
763 UI
.closeSettingsPanel();
765 UI
.closeClipboardPanel();
766 UI
.closeConnectPanel();
776 openSettingsPanel: function() {
780 UI
.updateSetting('encrypt');
781 UI
.updateSetting('true_color');
782 if (Util
.browserSupportsCursorURIs()) {
783 UI
.updateSetting('cursor');
785 UI
.updateSetting('cursor', !Util
.isTouchDevice
);
786 document
.getElementById('noVNC_setting_cursor').disabled
= true;
788 UI
.updateSetting('clip');
789 UI
.updateSetting('resize');
790 UI
.updateSetting('shared');
791 UI
.updateSetting('view_only');
792 UI
.updateSetting('path');
793 UI
.updateSetting('repeaterID');
794 UI
.updateSetting('stylesheet');
795 UI
.updateSetting('logging');
797 document
.getElementById('noVNC_settings')
798 .classList
.add("noVNC_open");
799 document
.getElementById('noVNC_settings_button')
800 .classList
.add("noVNC_selected");
803 closeSettingsPanel: function() {
804 document
.getElementById('noVNC_settings')
805 .classList
.remove("noVNC_open");
806 document
.getElementById('noVNC_settings_button')
807 .classList
.remove("noVNC_selected");
810 // Toggle the settings menu:
811 // On open, settings are refreshed from saved cookies.
812 // On close, settings are applied
813 toggleSettingsPanel: function() {
814 if (document
.getElementById('noVNC_settings')
815 .classList
.contains("noVNC_open")) {
817 UI
.closeSettingsPanel();
819 UI
.openSettingsPanel();
829 openXvpPanel: function() {
833 document
.getElementById('noVNC_xvp')
834 .classList
.add("noVNC_open");
835 document
.getElementById('noVNC_xvp_button')
836 .classList
.add("noVNC_selected");
839 closeXvpPanel: function() {
840 document
.getElementById('noVNC_xvp')
841 .classList
.remove("noVNC_open");
842 document
.getElementById('noVNC_xvp_button')
843 .classList
.remove("noVNC_selected");
846 toggleXvpPanel: function() {
847 if (document
.getElementById('noVNC_xvp')
848 .classList
.contains("noVNC_open")) {
855 // Disable/enable XVP button
856 updateXvpButton: function(ver
) {
857 if (ver
>= 1 && !UI
.rfb
.get_view_only()) {
858 document
.getElementById('noVNC_xvp_button')
859 .classList
.remove("noVNC_hidden");
861 document
.getElementById('noVNC_xvp_button')
862 .classList
.add("noVNC_hidden");
863 // Close XVP panel if open
874 openClipboardPanel: function() {
878 document
.getElementById('noVNC_clipboard')
879 .classList
.add("noVNC_open");
880 document
.getElementById('noVNC_clipboard_button')
881 .classList
.add("noVNC_selected");
884 closeClipboardPanel: function() {
885 document
.getElementById('noVNC_clipboard')
886 .classList
.remove("noVNC_open");
887 document
.getElementById('noVNC_clipboard_button')
888 .classList
.remove("noVNC_selected");
891 toggleClipboardPanel: function() {
892 if (document
.getElementById('noVNC_clipboard')
893 .classList
.contains("noVNC_open")) {
894 UI
.closeClipboardPanel();
896 UI
.openClipboardPanel();
900 clipboardReceive: function(rfb
, text
) {
901 Util
.Debug(">> UI.clipboardReceive: " + text
.substr(0,40) + "...");
902 document
.getElementById('noVNC_clipboard_text').value
= text
;
903 Util
.Debug("<< UI.clipboardReceive");
906 clipboardClear: function() {
907 document
.getElementById('noVNC_clipboard_text').value
= "";
908 UI
.rfb
.clipboardPasteFrom("");
911 clipboardSend: function() {
912 var text
= document
.getElementById('noVNC_clipboard_text').value
;
913 Util
.Debug(">> UI.clipboardSend: " + text
.substr(0,40) + "...");
914 UI
.rfb
.clipboardPasteFrom(text
);
915 Util
.Debug("<< UI.clipboardSend");
924 openConnectPanel: function() {
928 document
.getElementById('noVNC_connect_controls')
929 .classList
.add("noVNC_open");
930 document
.getElementById('noVNC_connect_controls_button')
931 .classList
.add("noVNC_selected");
933 document
.getElementById('noVNC_setting_host').focus();
936 closeConnectPanel: function() {
937 document
.getElementById('noVNC_connect_controls')
938 .classList
.remove("noVNC_open");
939 document
.getElementById('noVNC_connect_controls_button')
940 .classList
.remove("noVNC_selected");
942 UI
.saveSetting('host');
943 UI
.saveSetting('port');
944 UI
.saveSetting('token');
945 //UI.saveSetting('password');
948 toggleConnectPanel: function() {
949 if (document
.getElementById('noVNC_connect_controls')
950 .classList
.contains("noVNC_open")) {
951 UI
.closeConnectPanel();
953 UI
.openConnectPanel();
957 connect: function() {
958 var host
= document
.getElementById('noVNC_setting_host').value
;
959 var port
= document
.getElementById('noVNC_setting_port').value
;
960 var password
= document
.getElementById('noVNC_setting_password').value
;
961 var token
= document
.getElementById('noVNC_setting_token').value
;
962 var path
= document
.getElementById('noVNC_setting_path').value
;
964 //if token is in path then ignore the new token variable
966 path
= WebUtil
.injectParamIfMissing(path
, "token", token
);
969 if ((!host
) || (!port
)) {
970 UI
.showStatus("Must set host and port", 'error');
974 if (!UI
.initRFB()) return;
978 UI
.rfb
.set_encrypt(UI
.getSetting('encrypt'));
979 UI
.rfb
.set_true_color(UI
.getSetting('true_color'));
980 UI
.rfb
.set_local_cursor(UI
.getSetting('cursor'));
981 UI
.rfb
.set_shared(UI
.getSetting('shared'));
982 UI
.rfb
.set_view_only(UI
.getSetting('view_only'));
983 UI
.rfb
.set_repeaterID(UI
.getSetting('repeaterID'));
985 UI
.rfb
.connect(host
, port
, password
, path
);
988 disconnect: function() {
992 // Restore the callback used for initial resize
993 UI
.rfb
.set_onFBUComplete(UI
.initialResize
);
995 // Don't display the connection settings until we're actually disconnected
998 disconnectFinished: function (rfb
, reason
) {
999 if (typeof reason
!== 'undefined') {
1000 UI
.showStatus(reason
, 'error');
1002 UI
.openConnectPanel();
1011 passwordRequired: function(rfb
, msg
) {
1013 document
.getElementById('noVNC_password_dlg')
1014 .classList
.add('noVNC_open');
1016 setTimeout(function () {
1017 document
.getElementById('noVNC_password_input').focus();
1020 if (typeof msg
=== 'undefined') {
1021 msg
= "Password is required";
1023 UI
.showStatus(msg
, "warning");
1026 setPassword: function() {
1027 UI
.rfb
.sendPassword(document
.getElementById('noVNC_password_input').value
);
1028 document
.getElementById('noVNC_password_dlg')
1029 .classList
.remove('noVNC_open');
1039 toggleFullscreen: function() {
1040 if (document
.fullscreenElement
|| // alternative standard method
1041 document
.mozFullScreenElement
|| // currently working methods
1042 document
.webkitFullscreenElement
||
1043 document
.msFullscreenElement
) {
1044 if (document
.exitFullscreen
) {
1045 document
.exitFullscreen();
1046 } else if (document
.mozCancelFullScreen
) {
1047 document
.mozCancelFullScreen();
1048 } else if (document
.webkitExitFullscreen
) {
1049 document
.webkitExitFullscreen();
1050 } else if (document
.msExitFullscreen
) {
1051 document
.msExitFullscreen();
1054 if (document
.documentElement
.requestFullscreen
) {
1055 document
.documentElement
.requestFullscreen();
1056 } else if (document
.documentElement
.mozRequestFullScreen
) {
1057 document
.documentElement
.mozRequestFullScreen();
1058 } else if (document
.documentElement
.webkitRequestFullscreen
) {
1059 document
.documentElement
.webkitRequestFullscreen(Element
.ALLOW_KEYBOARD_INPUT
);
1060 } else if (document
.body
.msRequestFullscreen
) {
1061 document
.body
.msRequestFullscreen();
1064 UI
.enableDisableViewClip();
1065 UI
.updateFullscreenButton();
1068 updateFullscreenButton: function() {
1069 if (document
.fullscreenElement
|| // alternative standard method
1070 document
.mozFullScreenElement
|| // currently working methods
1071 document
.webkitFullscreenElement
||
1072 document
.msFullscreenElement
) {
1073 document
.getElementById('noVNC_fullscreen_button')
1074 .classList
.add("noVNC_selected");
1076 document
.getElementById('noVNC_fullscreen_button')
1077 .classList
.remove("noVNC_selected");
1087 // Apply remote resizing or local scaling
1088 applyResizeMode: function() {
1089 if (!UI
.rfb
) return;
1091 var screen
= UI
.screenSize();
1093 if (screen
&& UI
.connected
&& UI
.rfb
.get_display()) {
1095 var display
= UI
.rfb
.get_display();
1096 var resizeMode
= UI
.getSetting('resize');
1098 if (resizeMode
=== 'remote') {
1100 // Request changing the resolution of the remote display to
1101 // the size of the local browser viewport.
1103 // In order to not send multiple requests before the browser-resize
1104 // is finished we wait 0.5 seconds before sending the request.
1105 clearTimeout(UI
.resizeTimeout
);
1106 UI
.resizeTimeout
= setTimeout(function(){
1108 // Limit the viewport to the size of the browser window
1109 display
.set_maxWidth(screen
.w
);
1110 display
.set_maxHeight(screen
.h
);
1112 // Request a remote size covering the viewport
1113 if (UI
.rfb
.requestDesktopSize(screen
.w
, screen
.h
)) {
1114 Util
.Debug('Requested new desktop size: ' +
1115 screen
.w
+ 'x' + screen
.h
);
1119 } else if (resizeMode
=== 'scale' || resizeMode
=== 'downscale') {
1120 var downscaleOnly
= resizeMode
=== 'downscale';
1121 var scaleRatio
= display
.autoscale(screen
.w
, screen
.h
, downscaleOnly
);
1123 if (!UI
.rfb
.get_view_only()) {
1124 UI
.rfb
.get_mouse().set_scale(scaleRatio
);
1125 Util
.Debug('Scaling by ' + UI
.rfb
.get_mouse().get_scale());
1131 // The screen is always the same size as the available viewport
1132 // in the browser window minus the height of the control bar
1133 screenSize: function() {
1134 var screen
= document
.getElementById('noVNC_screen');
1136 // Hide the scrollbars until the size is calculated
1137 screen
.style
.overflow
= "hidden";
1139 var pos
= Util
.getPosition(screen
);
1143 screen
.style
.overflow
= "visible";
1145 if (isNaN(w
) || isNaN(h
)) {
1148 return {w
: w
, h
: h
};
1152 // Normally we only apply the current resize mode after a window resize
1153 // event. This means that when a new connection is opened, there is no
1154 // resize mode active.
1155 // We have to wait until the first FBU because this is where the client
1156 // will find the supported encodings of the server. Some calls later in
1157 // the chain is dependant on knowing the server-capabilities.
1158 initialResize: function(rfb
, fbu
) {
1159 UI
.applyResizeMode();
1160 // After doing this once, we remove the callback.
1161 UI
.rfb
.set_onFBUComplete(function() { });
1170 // Set and configure viewport clipping
1171 setViewClip: function(clip
) {
1172 UI
.updateSetting('clip', clip
);
1173 UI
.updateViewClip();
1176 // Update parameters that depend on the clip setting
1177 updateViewClip: function() {
1178 if (!UI
.rfb
) return;
1180 var display
= UI
.rfb
.get_display();
1181 var cur_clip
= display
.get_viewport();
1182 var new_clip
= UI
.getSetting('clip');
1184 if (cur_clip
!== new_clip
) {
1185 display
.set_viewport(new_clip
);
1188 var size
= UI
.screenSize();
1190 if (new_clip
&& size
) {
1191 // When clipping is enabled, the screen is limited to
1192 // the size of the browser window.
1193 display
.set_maxWidth(size
.w
);
1194 display
.set_maxHeight(size
.h
);
1196 var screen
= document
.getElementById('noVNC_screen');
1197 var canvas
= document
.getElementById('noVNC_canvas');
1199 // Hide potential scrollbars that can skew the position
1200 screen
.style
.overflow
= "hidden";
1202 // The x position marks the left margin of the canvas,
1203 // remove the margin from both sides to keep it centered.
1204 var new_w
= size
.w
- (2 * Util
.getPosition(canvas
).x
);
1206 screen
.style
.overflow
= "visible";
1208 display
.viewportChangeSize(new_w
, size
.h
);
1210 // Disable max dimensions
1211 display
.set_maxWidth(0);
1212 display
.set_maxHeight(0);
1213 display
.viewportChangeSize();
1217 // Handle special cases where clipping is forced on/off or locked
1218 enableDisableViewClip: function() {
1219 var resizeSetting
= document
.getElementById('noVNC_setting_resize');
1222 // Safari auto-hides the scrollbars which makes them
1223 // impossible to use in most cases
1224 UI
.setViewClip(true);
1225 document
.getElementById('noVNC_setting_clip').disabled
= true;
1226 } else if (resizeSetting
.value
=== 'downscale' || resizeSetting
.value
=== 'scale') {
1227 // Disable clipping if we are scaling
1228 UI
.setViewClip(false);
1229 document
.getElementById('noVNC_setting_clip').disabled
= true;
1230 } else if (document
.msFullscreenElement
) {
1231 // The browser is IE and we are in fullscreen mode.
1232 // - We need to force clipping while in fullscreen since
1233 // scrollbars doesn't work.
1234 UI
.showStatus("Forcing clipping mode since scrollbars aren't supported by IE in fullscreen");
1235 UI
.rememberedClipSetting
= UI
.getSetting('clip');
1236 UI
.setViewClip(true);
1237 document
.getElementById('noVNC_setting_clip').disabled
= true;
1238 } else if (document
.body
.msRequestFullscreen
&&
1239 UI
.rememberedClipSetting
!== null) {
1240 // Restore view clip to what it was before fullscreen on IE
1241 UI
.setViewClip(UI
.rememberedClipSetting
);
1242 document
.getElementById('noVNC_setting_clip').disabled
=
1243 UI
.connected
|| Util
.isTouchDevice
;
1245 document
.getElementById('noVNC_setting_clip').disabled
=
1246 UI
.connected
|| Util
.isTouchDevice
;
1247 if (Util
.isTouchDevice
) {
1248 UI
.setViewClip(true);
1259 toggleViewDrag: function() {
1260 if (!UI
.rfb
) return;
1262 var drag
= UI
.rfb
.get_viewportDrag();
1263 UI
.setViewDrag(!drag
);
1266 // Set the view drag mode which moves the viewport on mouse drags
1267 setViewDrag: function(drag
) {
1268 if (!UI
.rfb
) return;
1270 UI
.rfb
.set_viewportDrag(drag
);
1272 UI
.updateViewDrag();
1275 updateViewDrag: function() {
1276 var clipping
= false;
1278 if (!UI
.connected
) return;
1280 // Check if viewport drag is possible. It is only possible
1281 // if the remote display is clipping the client display.
1282 if (UI
.rfb
.get_display().get_viewport() &&
1283 UI
.rfb
.get_display().clippingDisplay()) {
1287 var viewDragButton
= document
.getElementById('noVNC_view_drag_button');
1290 UI
.rfb
.get_viewportDrag()) {
1291 // The size of the remote display is the same or smaller
1292 // than the client display. Make sure viewport drag isn't
1293 // active when it can't be used.
1294 UI
.rfb
.set_viewportDrag(false);
1297 if (UI
.rfb
.get_viewportDrag()) {
1298 viewDragButton
.classList
.add("noVNC_selected");
1300 viewDragButton
.classList
.remove("noVNC_selected");
1303 // Different behaviour for touch vs non-touch
1304 // The button is disabled instead of hidden on touch devices
1305 if (Util
.isTouchDevice
) {
1306 viewDragButton
.classList
.remove("noVNC_hidden");
1309 viewDragButton
.disabled
= false;
1311 viewDragButton
.disabled
= true;
1314 viewDragButton
.disabled
= false;
1317 viewDragButton
.classList
.remove("noVNC_hidden");
1319 viewDragButton
.classList
.add("noVNC_hidden");
1330 showVirtualKeyboard: function() {
1331 if (!Util
.isTouchDevice
) return;
1333 var input
= document
.getElementById('noVNC_keyboardinput');
1335 if (document
.activeElement
== input
) return;
1337 UI
.keyboardVisible
= true;
1338 document
.getElementById('noVNC_keyboard_button')
1339 .classList
.add("noVNC_selected");
1343 var l
= input
.value
.length
;
1344 // Move the caret to the end
1345 input
.setSelectionRange(l
, l
);
1346 } catch (err
) {} // setSelectionRange is undefined in Google Chrome
1349 hideVirtualKeyboard: function() {
1350 if (!Util
.isTouchDevice
) return;
1352 var input
= document
.getElementById('noVNC_keyboardinput');
1354 if (document
.activeElement
!= input
) return;
1359 toggleVirtualKeyboard: function () {
1360 if (UI
.keyboardVisible
) {
1361 UI
.hideVirtualKeyboard();
1363 UI
.showVirtualKeyboard();
1367 onblurVirtualKeyboard: function() {
1368 //Weird bug in iOS if you change keyboardVisible
1369 //here it does not actually occur so next time
1370 //you click keyboard icon it doesnt work.
1371 UI
.hideKeyboardTimeout
= setTimeout(function() {
1372 UI
.keyboardVisible
= false;
1373 document
.getElementById('noVNC_keyboard_button')
1374 .classList
.remove("noVNC_selected");
1378 keepKeyboard: function() {
1379 clearTimeout(UI
.hideKeyboardTimeout
);
1380 if(UI
.keyboardVisible
=== true) {
1381 UI
.showVirtualKeyboard();
1382 } else if(UI
.keyboardVisible
=== false) {
1383 UI
.hideVirtualKeyboard();
1387 keyboardinputReset: function() {
1388 var kbi
= document
.getElementById('noVNC_keyboardinput');
1389 kbi
.value
= new Array(UI
.defaultKeyboardinputLen
).join("_");
1390 UI
.lastKeyboardinput
= kbi
.value
;
1393 // When normal keyboard events are left uncought, use the input events from
1394 // the keyboardinput element instead and generate the corresponding key events.
1395 // This code is required since some browsers on Android are inconsistent in
1396 // sending keyCodes in the normal keyboard events when using on screen keyboards.
1397 keyInput: function(event
) {
1399 if (!UI
.rfb
) return;
1401 var newValue
= event
.target
.value
;
1403 if (!UI
.lastKeyboardinput
) {
1404 UI
.keyboardinputReset();
1406 var oldValue
= UI
.lastKeyboardinput
;
1410 // Try to check caret position since whitespace at the end
1411 // will not be considered by value.length in some browsers
1412 newLen
= Math
.max(event
.target
.selectionStart
, newValue
.length
);
1414 // selectionStart is undefined in Google Chrome
1415 newLen
= newValue
.length
;
1417 var oldLen
= oldValue
.length
;
1420 var inputs
= newLen
- oldLen
;
1422 backspaces
= -inputs
;
1427 // Compare the old string with the new to account for
1428 // text-corrections or other input that modify existing text
1430 for (i
= 0; i
< Math
.min(oldLen
, newLen
); i
++) {
1431 if (newValue
.charAt(i
) != oldValue
.charAt(i
)) {
1432 inputs
= newLen
- i
;
1433 backspaces
= oldLen
- i
;
1438 // Send the key events
1439 for (i
= 0; i
< backspaces
; i
++) {
1440 UI
.rfb
.sendKey(KeyTable
.XK_BackSpace
);
1442 for (i
= newLen
- inputs
; i
< newLen
; i
++) {
1443 UI
.rfb
.sendKey(newValue
.charCodeAt(i
));
1446 // Control the text content length in the keyboardinput element
1447 if (newLen
> 2 * UI
.defaultKeyboardinputLen
) {
1448 UI
.keyboardinputReset();
1449 } else if (newLen
< 1) {
1450 // There always have to be some text in the keyboardinput
1451 // element with which backspace can interact.
1452 UI
.keyboardinputReset();
1453 // This sometimes causes the keyboard to disappear for a second
1454 // but it is required for the android keyboard to recognize that
1455 // text has been added to the field
1456 event
.target
.blur();
1457 // This has to be ran outside of the input handler in order to work
1458 setTimeout(UI
.keepKeyboard
, 0);
1460 UI
.lastKeyboardinput
= newValue
;
1470 openExtraKeys: function() {
1471 UI
.closeAllPanels();
1472 UI
.openControlbar();
1474 document
.getElementById('noVNC_modifiers')
1475 .classList
.add("noVNC_open");
1476 document
.getElementById('noVNC_toggle_extra_keys_button')
1477 .classList
.add("noVNC_selected");
1480 closeExtraKeys: function() {
1481 document
.getElementById('noVNC_modifiers')
1482 .classList
.remove("noVNC_open");
1483 document
.getElementById('noVNC_toggle_extra_keys_button')
1484 .classList
.remove("noVNC_selected");
1487 toggleExtraKeys: function() {
1489 if(document
.getElementById('noVNC_modifiers')
1490 .classList
.contains("noVNC_open")) {
1491 UI
.closeExtraKeys();
1497 sendEsc: function() {
1499 UI
.rfb
.sendKey(KeyTable
.XK_Escape
);
1502 sendTab: function() {
1504 UI
.rfb
.sendKey(KeyTable
.XK_Tab
);
1507 toggleCtrl: function() {
1509 var btn
= document
.getElementById('noVNC_toggle_ctrl_button');
1510 if (btn
.classList
.contains("noVNC_selected")) {
1511 UI
.rfb
.sendKey(KeyTable
.XK_Control_L
, false);
1512 btn
.classList
.remove("noVNC_selected");
1514 UI
.rfb
.sendKey(KeyTable
.XK_Control_L
, true);
1515 btn
.classList
.add("noVNC_selected");
1519 toggleAlt: function() {
1521 var btn
= document
.getElementById('noVNC_toggle_alt_button');
1522 if (btn
.classList
.contains("noVNC_selected")) {
1523 UI
.rfb
.sendKey(KeyTable
.XK_Alt_L
, false);
1524 btn
.classList
.remove("noVNC_selected");
1526 UI
.rfb
.sendKey(KeyTable
.XK_Alt_L
, true);
1527 btn
.classList
.add("noVNC_selected");
1531 sendCtrlAltDel: function() {
1533 UI
.rfb
.sendCtrlAltDel();
1542 setMouseButton: function(num
) {
1543 var view_only
= UI
.rfb
.get_view_only();
1544 if (UI
.rfb
&& !view_only
) {
1545 UI
.rfb
.get_mouse().set_touchButton(num
);
1548 var blist
= [0, 1,2,4];
1549 for (var b
= 0; b
< blist
.length
; b
++) {
1550 var button
= document
.getElementById('noVNC_mouse_button' +
1552 if (blist
[b
] === num
&& !view_only
) {
1553 button
.classList
.remove("noVNC_hidden");
1555 button
.classList
.add("noVNC_hidden");
1560 displayBlur: function() {
1561 if (UI
.rfb
&& !UI
.rfb
.get_view_only()) {
1562 UI
.rfb
.get_keyboard().set_focused(false);
1563 UI
.rfb
.get_mouse().set_focused(false);
1567 displayFocus: function() {
1568 if (UI
.rfb
&& !UI
.rfb
.get_view_only()) {
1569 UI
.rfb
.get_keyboard().set_focused(true);
1570 UI
.rfb
.get_mouse().set_focused(true);
1574 updateDesktopName: function(rfb
, name
) {
1575 UI
.desktopName
= name
;
1576 // Display the desktop name in the document title
1577 document
.title
= name
+ " - noVNC";
1580 bell: function(rfb
) {
1581 if (WebUtil
.getConfigVar('bell', 'on') === 'on') {
1582 document
.getElementById('noVNC_bell').play();
1586 //Helper to add options to dropdown.
1587 addOption: function(selectbox
, text
, value
) {
1588 var optn
= document
.createElement("OPTION");
1591 selectbox
.options
.add(optn
);
1600 /* [module] UI.load(); */
1603 /* [module] export default UI; */