]>
git.proxmox.com Git - mirror_novnc.git/blob - include/ui.js
2 * noVNC: HTML5 VNC client
3 * Copyright (C) 2011 Joel Martin
4 * Licensed under LGPL-3 (see LICENSE.txt)
6 * See README.md for usage and integration instructions.
10 /*jslint white: false, browser: true */
11 /*global window, $D, Util, WebUtil, RFB, Canvas, Element, Fx */
17 // Render default UI and initialize settings menu
18 load: function(target
) {
19 var html
= '', i
, sheet
, sheets
, llevels
;
21 /* Populate the 'target' DOM element with default UI */
24 } else if (typeof target
=== 'string') {
28 if ((!document
.createElement('canvas').getContext
) &&
29 window
.ActiveXObject
) {
30 // Suggest Chrome frame for Internet Explorer users
31 html
+= '<center><div style="text-align: left; width: 400px">';
32 html
+= ' You are using a version of Internet Explorer ';
33 html
+= ' that does not have HTML5 Canvas support. ';
34 html
+= ' To use noVNC you must use a browser with HTML5 ';
35 html
+= ' Canvas support or install ';
36 html
+= ' <a href="http://google.com/chromeframe" target="cframe">';
37 html
+= ' Google Chrome Frame.</a>';
38 html
+= '</div></center>';
39 target
.innerHTML
= html
;
43 html
+= '<div id="VNC_controls">';
45 html
+= ' <li>Host: <input id="VNC_host"></li>';
46 html
+= ' <li>Port: <input id="VNC_port"></li>';
47 html
+= ' <li>Password: <input id="VNC_password"';
48 html
+= ' type="password"></li>';
49 html
+= ' <li><input id="VNC_connect_button" type="button"';
50 html
+= ' value="Loading" disabled></li>';
53 html
+= '<div id="VNC_screen">';
54 html
+= ' <div id="VNC_status_bar" class="VNC_status_bar" style="margin-top: 0px;">';
55 html
+= ' <table border=0 width=100%><tr>';
56 html
+= ' <td><div id="VNC_status">Loading</div></td>';
57 html
+= ' <td width=1%><div class="VNC_buttons_right">';
58 html
+= ' <input type=button class="VNC_status_button" value="Settings"';
59 html
+= ' id="menuButton"';
60 html
+= ' onclick="UI.clickSettingsMenu();">';
61 html
+= ' <span id="VNC_settings_menu"';
62 html
+= ' onmouseover="UI.canvasBlur();"';
63 html
+= ' onmouseout="UI.canvasFocus();">';
65 html
+= ' <li><input id="VNC_encrypt"';
66 html
+= ' type="checkbox"> Encrypt</li>';
67 html
+= ' <li><input id="VNC_true_color"';
68 html
+= ' type="checkbox" checked> True Color</li>';
69 html
+= ' <li><input id="VNC_cursor"';
70 html
+= ' type="checkbox"> Local Cursor</li>';
71 html
+= ' <li><input id="VNC_shared"';
72 html
+= ' type="checkbox"> Shared Mode</li>';
73 html
+= ' <li><input id="VNC_connectTimeout"';
74 html
+= ' type="input"> Connect Timeout (s)</li>';
77 // Stylesheet selection dropdown
78 html
+= ' <li><select id="VNC_stylesheet" name="vncStyle">';
79 html
+= ' <option value="default">default</option>';
80 sheet
= WebUtil
.selectStylesheet();
81 sheets
= WebUtil
.getStylesheets();
82 for (i
= 0; i
< sheets
.length
; i
+= 1) {
83 html
+= '<option value="' + sheets
[i
].title
+ '">' + sheets
[i
].title
+ '</option>';
85 html
+= ' </select> Style</li>';
87 // Logging selection dropdown
88 html
+= ' <li><select id="VNC_logging" name="vncLogging">';
89 llevels
= ['error', 'warn', 'info', 'debug'];
90 for (i
= 0; i
< llevels
.length
; i
+= 1) {
91 html
+= '<option value="' + llevels
[i
] + '">' + llevels
[i
] + '</option>';
93 html
+= ' </select> Logging</li>';
96 html
+= ' <li><input type="button" id="VNC_apply" value="Apply"';
97 html
+= ' onclick="UI.settingsApply()"></li>';
99 html
+= ' </span></div></td>';
100 html
+= ' <td width=1%><div class="VNC_buttons_right">';
101 html
+= ' <input type=button class="VNC_status_button" value="Send CtrlAltDel"';
102 html
+= ' id="sendCtrlAltDelButton"';
103 html
+= ' onclick="UI.sendCtrlAltDel();"></div></td>';
104 html
+= ' </tr></table>';
106 html
+= ' <canvas id="VNC_canvas" width="640px" height="20px">';
107 html
+= ' Canvas not supported.';
108 html
+= ' </canvas>';
111 html
+= '<div id="VNC_clipboard">';
112 html
+= ' VNC Clipboard:';
113 html
+= ' <input id="VNC_clipboard_clear_button"';
114 html
+= ' type="button" value="Clear"';
115 html
+= ' onclick="UI.clipClear();">';
117 html
+= ' <textarea id="VNC_clipboard_text" cols=80 rows=5';
118 html
+= ' onfocus="UI.canvasBlur();"';
119 html
+= ' onblur="UI.canvasFocus();"';
120 html
+= ' onchange="UI.clipSend();"></textarea>';
122 target
.innerHTML
= html
;
124 // Settings with immediate effects
125 UI
.initSetting('logging', 'warn');
126 WebUtil
.init_logging(UI
.getSetting('logging'));
127 UI
.initSetting('stylesheet', 'default');
129 WebUtil
.selectStylesheet(null); // call twice to get around webkit bug
130 WebUtil
.selectStylesheet(UI
.getSetting('stylesheet'));
132 /* Populate the controls if defaults are provided in the URL */
133 UI
.initSetting('host', '');
134 UI
.initSetting('port', '');
135 UI
.initSetting('password', '');
136 UI
.initSetting('encrypt', false);
137 UI
.initSetting('true_color', true);
138 UI
.initSetting('cursor', false);
139 UI
.initSetting('shared', true);
140 UI
.initSetting('connectTimeout', 2);
142 UI
.rfb
= RFB({'target': $D('VNC_canvas'),
143 'updateState': UI
.updateState
,
144 'clipboardReceive': UI
.clipReceive
});
146 // Unfocus clipboard when over the VNC area
147 $D('VNC_screen').onmousemove = function () {
148 var keyboard
= UI
.rfb
.get_keyboard();
149 if ((! keyboard
) || (! keyboard
.get_focused())) {
150 $D('VNC_clipboard_text').blur();
156 // Read form control compatible setting from cookie
157 getSetting: function(name
) {
158 var val
, ctrl
= $D('VNC_' + name
);
159 val
= WebUtil
.readCookie(name
);
160 if (ctrl
.type
=== 'checkbox') {
161 if (val
.toLowerCase() in {'0':1, 'no':1, 'false':1}) {
170 // Update cookie and form control setting. If value is not set, then
171 // updates from control to current cookie setting.
172 updateSetting: function(name
, value
) {
173 var i
, ctrl
= $D('VNC_' + name
);
174 // Save the cookie for this session
175 if (typeof value
!== 'undefined') {
176 WebUtil
.createCookie(name
, value
);
179 // Update the settings control
180 value
= UI
.getSetting(name
);
181 if (ctrl
.type
=== 'checkbox') {
182 ctrl
.checked
= value
;
183 } else if (typeof ctrl
.options
!== 'undefined') {
184 for (i
= 0; i
< ctrl
.options
.length
; i
+= 1) {
185 if (ctrl
.options
[i
].value
=== value
) {
186 ctrl
.selectedIndex
= i
;
195 // Save control setting to cookie
196 saveSetting: function(name
) {
197 var val
, ctrl
= $D('VNC_' + name
);
198 if (ctrl
.type
=== 'checkbox') {
200 } else if (typeof ctrl
.options
!== 'undefined') {
201 val
= ctrl
.options
[ctrl
.selectedIndex
].value
;
205 WebUtil
.createCookie(name
, val
);
206 //Util.Debug("Setting saved '" + name + "=" + val + "'");
210 // Initial page load read/initialization of settings
211 initSetting: function(name
, defVal
) {
214 // Check Query string followed by cookie
215 val
= WebUtil
.getQueryVar(name
);
217 val
= WebUtil
.readCookie(name
, defVal
);
219 UI
.updateSetting(name
, val
);
220 //Util.Debug("Setting '" + name + "' initialized to '" + val + "'");
225 // Toggle the settings menu:
226 // On open, settings are refreshed from saved cookies.
227 // On close, settings are applied
228 clickSettingsMenu: function() {
229 if (UI
.settingsOpen
) {
232 UI
.closeSettingsMenu();
234 UI
.updateSetting('encrypt');
235 UI
.updateSetting('true_color');
236 if (UI
.rfb
.get_canvas().get_cursor_uri()) {
237 UI
.updateSetting('cursor');
239 UI
.updateSetting('cursor', false);
240 $D('VNC_cursor').disabled
= true;
242 UI
.updateSetting('shared');
243 UI
.updateSetting('connectTimeout');
244 UI
.updateSetting('stylesheet');
245 UI
.updateSetting('logging');
247 UI
.openSettingsMenu();
252 openSettingsMenu: function() {
253 $D('VNC_settings_menu').style
.display
= "block";
254 UI
.settingsOpen
= true;
257 // Close menu (without applying settings)
258 closeSettingsMenu: function() {
259 $D('VNC_settings_menu').style
.display
= "none";
260 UI
.settingsOpen
= false;
263 // Disable/enable controls depending on connection state
264 settingsDisabled: function(disabled
, rfb
) {
265 //Util.Debug(">> settingsDisabled");
266 $D('VNC_encrypt').disabled
= disabled
;
267 $D('VNC_true_color').disabled
= disabled
;
268 if (rfb
&& rfb
.get_canvas() && rfb
.get_canvas().get_cursor_uri()) {
269 $D('VNC_cursor').disabled
= disabled
;
271 UI
.updateSetting('cursor', false);
272 $D('VNC_cursor').disabled
= true;
274 $D('VNC_shared').disabled
= disabled
;
275 $D('VNC_connectTimeout').disabled
= disabled
;
276 //Util.Debug("<< settingsDisabled");
279 // Save/apply settings when 'Apply' button is pressed
280 settingsApply: function() {
281 //Util.Debug(">> settingsApply");
282 UI
.saveSetting('encrypt');
283 UI
.saveSetting('true_color');
284 if (UI
.rfb
.get_canvas().get_cursor_uri()) {
285 UI
.saveSetting('cursor');
287 UI
.saveSetting('shared');
288 UI
.saveSetting('connectTimeout');
289 UI
.saveSetting('stylesheet');
290 UI
.saveSetting('logging');
292 // Settings with immediate (non-connected related) effect
293 WebUtil
.selectStylesheet(UI
.getSetting('stylesheet'));
294 WebUtil
.init_logging(UI
.getSetting('logging'));
296 //Util.Debug("<< settingsApply");
301 setPassword: function() {
302 UI
.rfb
.sendPassword($D('VNC_password').value
);
306 sendCtrlAltDel: function() {
307 UI
.rfb
.sendCtrlAltDel();
310 updateState: function(rfb
, state
, oldstate
, msg
) {
311 var s
, sb
, c
, cad
, klass
;
312 s
= $D('VNC_status');
313 sb
= $D('VNC_status_bar');
314 c
= $D('VNC_connect_button');
315 cad
= $D('sendCtrlAltDelButton');
321 UI
.settingsDisabled(true, rfb
);
322 klass
= "VNC_status_error";
325 c
.value
= "Disconnect";
326 c
.onclick
= UI
.disconnect
;
328 cad
.disabled
= false;
329 UI
.settingsDisabled(true, rfb
);
330 klass
= "VNC_status_normal";
335 c
.onclick
= UI
.connect
;
339 UI
.settingsDisabled(false, rfb
);
340 klass
= "VNC_status_normal";
343 c
.value
= "Send Password";
344 c
.onclick
= UI
.setPassword
;
348 UI
.settingsDisabled(true, rfb
);
349 klass
= "VNC_status_warn";
354 UI
.settingsDisabled(true, rfb
);
355 klass
= "VNC_status_warn";
359 if (typeof(msg
) !== 'undefined') {
360 s
.setAttribute("class", klass
);
361 sb
.setAttribute("class", klass
);
367 clipReceive: function(rfb
, text
) {
368 Util
.Debug(">> UI.clipReceive: " + text
.substr(0,40) + "...");
369 $D('VNC_clipboard_text').value
= text
;
370 Util
.Debug("<< UI.clipReceive");
374 connect: function() {
375 var host
, port
, password
;
377 UI
.closeSettingsMenu();
379 host
= $D('VNC_host').value
;
380 port
= $D('VNC_port').value
;
381 password
= $D('VNC_password').value
;
382 if ((!host
) || (!port
)) {
383 throw("Must set host and port");
386 UI
.rfb
.set_encrypt(UI
.getSetting('encrypt'));
387 UI
.rfb
.set_true_color(UI
.getSetting('true_color'));
388 UI
.rfb
.set_local_cursor(UI
.getSetting('cursor'));
389 UI
.rfb
.set_shared(UI
.getSetting('shared'));
390 UI
.rfb
.set_connectTimeout(UI
.getSetting('connectTimeout'));
392 UI
.rfb
.connect(host
, port
, password
);
395 disconnect: function() {
396 UI
.closeSettingsMenu();
401 canvasBlur: function() {
402 UI
.rfb
.get_keyboard().set_focused(false);
403 UI
.rfb
.get_mouse().set_focused(false);
406 canvasFocus: function() {
407 UI
.rfb
.get_keyboard().set_focused(true);
408 UI
.rfb
.get_mouse().set_focused(true);
411 clipClear: function() {
412 $D('VNC_clipboard_text').value
= "";
413 UI
.rfb
.clipboardPasteFrom("");
416 clipSend: function() {
417 var text
= $D('VNC_clipboard_text').value
;
418 Util
.Debug(">> UI.clipSend: " + text
.substr(0,40) + "...");
419 UI
.rfb
.clipboardPasteFrom(text
);
420 Util
.Debug("<< UI.clipSend");