include/ui.js

   1 /*
   2  * noVNC: HTML5 VNC client
   3  * Copyright (C) 2010 Joel Martin
   4  * Licensed under LGPL-3 (see LICENSE.txt)
   5  *
   6  * See README.md for usage and integration instructions.
   7  */
   8
   9 "use strict";
  10 /*jslint white: false, browser: true */
  11 /*global window, $D, Util, WebUtil, RFB, Canvas, Element, Fx */
  12
  13 var UI = {
  14
  15 settingsOpen : false,
  16
  17 // Render default UI and initialize settings menu
  18 load: function(target) {
  19     var html = '', i, sheet, sheets, llevels;
  20
  21     /* Populate the 'target' DOM element with default UI */
  22     if (!target) {
  23         target = $D('vnc');
  24     } else if (typeof target === 'string') {
  25         target = $D(target);
  26     }
  27
  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;
  40         return;
  41     }
  42
  43     html += '<div id="VNC_controls">';
  44     html += '  <ul>';
  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>';
  51     html += '  </ul>';
  52     html += '</div>';
  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();">';
  64     html += '          <ul>';
  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>';
  75     html += '            <hr>';
  76
  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>';
  84     }
  85     html += '              </select> Style</li>';
  86
  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>';
  92     }
  93     html += '              </select> Logging</li>';
  94
  95     html += '            <hr>';
  96     html += '            <li><input type="button" id="VNC_apply" value="Apply"';
  97     html += '                onclick="UI.settingsApply()"></li>';
  98     html += '          </ul>';
  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>';
 105     html += '  </div>';
 106     html += '  <canvas id="VNC_canvas" width="640px" height="20px">';
 107     html += '      Canvas not supported.';
 108     html += '  </canvas>';
 109     html += '</div>';
 110     html += '<br><br>';
 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();">';
 116     html += '  <br>';
 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>';
 121     html += '</div>';
 122     target.innerHTML = html;
 123
 124     // Settings with immediate effects
 125     UI.initSetting('logging', 'warn');
 126     WebUtil.init_logging(UI.getSetting('logging'));
 127     UI.initSetting('stylesheet', 'default');
 128
 129     WebUtil.selectStylesheet(null); // call twice to get around webkit bug
 130     WebUtil.selectStylesheet(UI.getSetting('stylesheet'));
 131
 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);
 141
 142     UI.rfb = RFB({'target': $D('VNC_canvas'),
 143                   'updateState': UI.updateState,
 144                   'clipboardReceive': UI.clipReceive});
 145
 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();
 151             }
 152         };
 153
 154 },
 155
 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}) {
 162             val = false;
 163         } else {
 164             val = true;
 165         }
 166     }
 167     return val;
 168 },
 169
 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);
 177     }
 178
 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;
 187                 break;
 188             }
 189         }
 190     } else {
 191         ctrl.value = value;
 192     }
 193 },
 194
 195 // Save control setting to cookie
 196 saveSetting: function(name) {
 197     var val, ctrl = $D('VNC_' + name);
 198     if (ctrl.type === 'checkbox') {
 199         val = ctrl.checked;
 200     } else if (typeof ctrl.options !== 'undefined') {
 201         val = ctrl.options[ctrl.selectedIndex].value;
 202     } else {
 203         val = ctrl.value;
 204     }
 205     WebUtil.createCookie(name, val);
 206     //Util.Debug("Setting saved '" + name + "=" + val + "'");
 207     return val;
 208 },
 209
 210 // Initial page load read/initialization of settings
 211 initSetting: function(name, defVal) {
 212     var val;
 213
 214     // Check Query string followed by cookie
 215     val = WebUtil.getQueryVar(name);
 216     if (val === null) {
 217         val = WebUtil.readCookie(name, defVal);
 218     }
 219     UI.updateSetting(name, val);
 220     //Util.Debug("Setting '" + name + "' initialized to '" + val + "'");
 221     return val;
 222 },
 223
 224
 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) {
 230         UI.settingsApply();
 231
 232         UI.closeSettingsMenu();
 233     } else {
 234         UI.updateSetting('encrypt');
 235         UI.updateSetting('true_color');
 236         if (UI.rfb.get_canvas().get_cursor_uri()) {
 237             UI.updateSetting('cursor');
 238         } else {
 239             UI.updateSetting('cursor', false);
 240             $D('VNC_cursor').disabled = true;
 241         }
 242         UI.updateSetting('shared');
 243         UI.updateSetting('connectTimeout');
 244         UI.updateSetting('stylesheet');
 245         UI.updateSetting('logging');
 246
 247         UI.openSettingsMenu();
 248     }
 249 },
 250
 251 // Open menu
 252 openSettingsMenu: function() {
 253     $D('VNC_settings_menu').style.display = "block";
 254     UI.settingsOpen = true;
 255 },
 256
 257 // Close menu (without applying settings)
 258 closeSettingsMenu: function() {
 259     $D('VNC_settings_menu').style.display = "none";
 260     UI.settingsOpen = false;
 261 },
 262
 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;
 270     } else {
 271         UI.updateSetting('cursor', false);
 272         $D('VNC_cursor').disabled = true;
 273     }
 274     $D('VNC_shared').disabled = disabled;
 275     $D('VNC_connectTimeout').disabled = disabled;
 276     //Util.Debug("<< settingsDisabled");
 277 },
 278
 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');
 286     }
 287     UI.saveSetting('shared');
 288     UI.saveSetting('connectTimeout');
 289     UI.saveSetting('stylesheet');
 290     UI.saveSetting('logging');
 291
 292     // Settings with immediate (non-connected related) effect
 293     WebUtil.selectStylesheet(UI.getSetting('stylesheet'));
 294     WebUtil.init_logging(UI.getSetting('logging'));
 295
 296     //Util.Debug("<< settingsApply");
 297 },
 298
 299
 300
 301 setPassword: function() {
 302     UI.rfb.sendPassword($D('VNC_password').value);
 303     return false;
 304 },
 305
 306 sendCtrlAltDel: function() {
 307     UI.rfb.sendCtrlAltDel();
 308 },
 309
 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');
 316     switch (state) {
 317         case 'failed':
 318         case 'fatal':
 319             c.disabled = true;
 320             cad.disabled = true;
 321             UI.settingsDisabled(true, rfb);
 322             klass = "VNC_status_error";
 323             break;
 324         case 'normal':
 325             c.value = "Disconnect";
 326             c.onclick = UI.disconnect;
 327             c.disabled = false;
 328             cad.disabled = false;
 329             UI.settingsDisabled(true, rfb);
 330             klass = "VNC_status_normal";
 331             break;
 332         case 'disconnected':
 333         case 'loaded':
 334             c.value = "Connect";
 335             c.onclick = UI.connect;
 336
 337             c.disabled = false;
 338             cad.disabled = true;
 339             UI.settingsDisabled(false, rfb);
 340             klass = "VNC_status_normal";
 341             break;
 342         case 'password':
 343             c.value = "Send Password";
 344             c.onclick = UI.setPassword;
 345
 346             c.disabled = false;
 347             cad.disabled = true;
 348             UI.settingsDisabled(true, rfb);
 349             klass = "VNC_status_warn";
 350             break;
 351         default:
 352             c.disabled = true;
 353             cad.disabled = true;
 354             UI.settingsDisabled(true, rfb);
 355             klass = "VNC_status_warn";
 356             break;
 357     }
 358
 359     if (typeof(msg) !== 'undefined') {
 360         s.setAttribute("class", klass);
 361         sb.setAttribute("class", klass);
 362         s.innerHTML = msg;
 363     }
 364
 365 },
 366
 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");
 371 },
 372
 373
 374 connect: function() {
 375     var host, port, password;
 376
 377     UI.closeSettingsMenu();
 378
 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");
 384     }
 385
 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'));
 391
 392     UI.rfb.connect(host, port, password);
 393 },
 394
 395 disconnect: function() {
 396     UI.closeSettingsMenu();
 397
 398     UI.rfb.disconnect();
 399 },
 400
 401 canvasBlur: function() {
 402     UI.rfb.get_keyboard().set_focused(false);
 403     UI.rfb.get_mouse().set_focused(false);
 404 },
 405
 406 canvasFocus: function() {
 407     UI.rfb.get_keyboard().set_focused(true);
 408     UI.rfb.get_mouse().set_focused(true);
 409 },
 410
 411 clipClear: function() {
 412     $D('VNC_clipboard_text').value = "";
 413     UI.rfb.clipboardPasteFrom("");
 414 },
 415
 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");
 421 }
 422
 423 };