vnc_lite.html

   1 <!DOCTYPE html>
   2 <html>
   3 <head>
   4
   5     <!--
   6     noVNC example: lightweight example using minimal UI and features
   7     Copyright (C) 2012 Joel Martin
   8     Copyright (C) 2013 Samuel Mannehed for Cendio AB
   9     noVNC is licensed under the MPL 2.0 (see LICENSE.txt)
  10     This file is licensed under the 2-Clause BSD license (see LICENSE.txt).
  11
  12     Connect parameters are provided in query string:
  13         http://example.com/?host=HOST&port=PORT&encrypt=1
  14     or the fragment:
  15         http://example.com/#host=HOST&port=PORT&encrypt=1
  16     -->
  17     <title>noVNC</title>
  18
  19     <meta charset="utf-8">
  20
  21     <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
  22                 Remove this if you use the .htaccess -->
  23     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  24
  25     <!-- Icons (see Makefile for what the sizes are for) -->
  26     <link rel="icon" sizes="16x16" type="image/png" href="app/images/icons/novnc-16x16.png">
  27     <link rel="icon" sizes="24x24" type="image/png" href="app/images/icons/novnc-24x24.png">
  28     <link rel="icon" sizes="32x32" type="image/png" href="app/images/icons/novnc-32x32.png">
  29     <link rel="icon" sizes="48x48" type="image/png" href="app/images/icons/novnc-48x48.png">
  30     <link rel="icon" sizes="60x60" type="image/png" href="app/images/icons/novnc-60x60.png">
  31     <link rel="icon" sizes="64x64" type="image/png" href="app/images/icons/novnc-64x64.png">
  32     <link rel="icon" sizes="72x72" type="image/png" href="app/images/icons/novnc-72x72.png">
  33     <link rel="icon" sizes="76x76" type="image/png" href="app/images/icons/novnc-76x76.png">
  34     <link rel="icon" sizes="96x96" type="image/png" href="app/images/icons/novnc-96x96.png">
  35     <link rel="icon" sizes="120x120" type="image/png" href="app/images/icons/novnc-120x120.png">
  36     <link rel="icon" sizes="144x144" type="image/png" href="app/images/icons/novnc-144x144.png">
  37     <link rel="icon" sizes="152x152" type="image/png" href="app/images/icons/novnc-152x152.png">
  38     <link rel="icon" sizes="192x192" type="image/png" href="app/images/icons/novnc-192x192.png">
  39     <link rel="icon" sizes="any" type="image/svg+xml" href="app/images/icons/novnc-icon.svg">
  40     <!-- Repeated last so that legacy handling will pick this -->
  41     <link rel="icon" sizes="16x16" type="image/png" href="app/images/icons/novnc-16x16.png">
  42
  43     <!-- Apple iOS Safari settings -->
  44     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  45     <meta name="apple-mobile-web-app-capable" content="yes" />
  46     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  47     <!-- Home Screen Icons (favourites and bookmarks use the normal icons) -->
  48     <link rel="apple-touch-icon" sizes="60x60" type="image/png" href="app/images/icons/novnc-60x60.png">
  49     <link rel="apple-touch-icon" sizes="76x76" type="image/png" href="app/images/icons/novnc-76x76.png">
  50     <link rel="apple-touch-icon" sizes="120x120" type="image/png" href="app/images/icons/novnc-120x120.png">
  51     <link rel="apple-touch-icon" sizes="152x152" type="image/png" href="app/images/icons/novnc-152x152.png">
  52
  53     <!-- Stylesheets -->
  54     <link rel="stylesheet" href="app/styles/lite.css">
  55
  56      <!--
  57     <script type='text/javascript'
  58         src='http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js'></script>
  59     -->
  60
  61     <!-- promise polyfills promises for IE11 -->
  62     <script src="vendor/promise.js"></script>
  63     <script src="vendor/browser-es-module-loader/dist/browser-es-module-loader.js"></script>
  64     <script type="module">
  65         // Load supporting scripts
  66         import * as WebUtil from './app/webutil.js';
  67         import RFB from './core/rfb.js';
  68
  69         var rfb;
  70         var resizeTimeout;
  71         var desktopName;
  72
  73         function UIresize() {
  74             if (WebUtil.getConfigVar('resize', false)) {
  75                 var innerW = window.innerWidth;
  76                 var innerH = window.innerHeight;
  77                 var controlbarH = document.getElementById('noVNC_status_bar').offsetHeight;
  78                 if (innerW !== undefined && innerH !== undefined)
  79                     rfb.requestDesktopSize(innerW, innerH - controlbarH);
  80             }
  81         }
  82         function FBUComplete(rfb, fbu) {
  83             UIresize();
  84             rfb.set_onFBUComplete(function() { });
  85         }
  86         function updateDesktopName(rfb, name) {
  87             desktopName = name;
  88         }
  89         function passwordRequired(rfb, msg) {
  90             if (typeof msg === 'undefined') {
  91                 msg = 'Password Required: ';
  92             }
  93             var html;
  94
  95             var form = document.createElement('form');
  96             form.style = 'margin-bottom: 0px';
  97             form.innerHTML = '<label></label>'
  98             form.innerHTML += '<input type=password size=10 id="password_input" class="noVNC_status">';
  99             form.onsubmit = setPassword;
 100
 101             // bypass status() because it sets text content
 102             document.getElementById('noVNC_status_bar').setAttribute("class", "noVNC_status_warn");
 103             document.getElementById('noVNC_status').innerHTML = '';
 104             document.getElementById('noVNC_status').appendChild(form);
 105             document.getElementById('noVNC_status').querySelector('label').textContent = msg;
 106         }
 107         function setPassword() {
 108             rfb.sendPassword(document.getElementById('password_input').value);
 109             return false;
 110         }
 111         function sendCtrlAltDel() {
 112             rfb.sendCtrlAltDel();
 113             return false;
 114         }
 115         function xvpShutdown() {
 116             rfb.xvpShutdown();
 117             return false;
 118         }
 119         function xvpReboot() {
 120             rfb.xvpReboot();
 121             return false;
 122         }
 123         function xvpReset() {
 124             rfb.xvpReset();
 125             return false;
 126         }
 127         function status(text, level) {
 128             switch (level) {
 129                 case 'normal':
 130                 case 'warn':
 131                 case 'error':
 132                     break;
 133                 default:
 134                     level = "warn";
 135             }
 136             document.getElementById('noVNC_status_bar').setAttribute("class", "noVNC_status_" + level);
 137             document.getElementById('noVNC_status').textContent = text;
 138         }
 139         function updateState(rfb, state, oldstate) {
 140             var cad = document.getElementById('sendCtrlAltDelButton');
 141             switch (state) {
 142                 case 'connecting':
 143                     status("Connecting", "normal");
 144                     break;
 145                 case 'connected':
 146                     if (rfb && rfb.get_encrypt()) {
 147                         status("Connected (encrypted) to " +
 148                                desktopName, "normal");
 149                     } else {
 150                         status("Connected (unencrypted) to " +
 151                                desktopName, "normal");
 152                     }
 153                     break;
 154                 case 'disconnecting':
 155                     status("Disconnecting", "normal");
 156                     break;
 157                 case 'disconnected':
 158                     status("Disconnected", "normal");
 159                     break;
 160                 default:
 161                     status(state, "warn");
 162                     break;
 163             }
 164
 165             if (state === 'connected') {
 166                 cad.disabled = false;
 167             } else {
 168                 cad.disabled = true;
 169                 xvpInit(0);
 170             }
 171
 172         }
 173         function disconnected(rfb, reason) {
 174             if (typeof(reason) !== 'undefined') {
 175                 status(reason, "error");
 176             }
 177         }
 178         function notification(rfb, msg, level, options) {
 179             status(msg, level);
 180         }
 181
 182         window.onresize = function () {
 183             // When the window has been resized, wait until the size remains
 184             // the same for 0.5 seconds before sending the request for changing
 185             // the resolution of the session
 186             clearTimeout(resizeTimeout);
 187             resizeTimeout = setTimeout(function(){
 188                 UIresize();
 189             }, 500);
 190         };
 191
 192         function xvpInit(ver) {
 193             var xvpbuttons;
 194             xvpbuttons = document.getElementById('noVNC_xvp_buttons');
 195             if (ver >= 1) {
 196                 xvpbuttons.style.display = 'inline';
 197             } else {
 198                 xvpbuttons.style.display = 'none';
 199             }
 200         }
 201
 202         document.getElementById('sendCtrlAltDelButton').style.display = "inline";
 203         document.getElementById('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
 204         document.getElementById('xvpShutdownButton').onclick = xvpShutdown;
 205         document.getElementById('xvpRebootButton').onclick = xvpReboot;
 206         document.getElementById('xvpResetButton').onclick = xvpReset;
 207
 208         WebUtil.init_logging(WebUtil.getConfigVar('logging', 'warn'));
 209         document.title = WebUtil.getConfigVar('title', 'noVNC');
 210         // By default, use the host and port of server that served this file
 211         var host = WebUtil.getConfigVar('host', window.location.hostname);
 212         var port = WebUtil.getConfigVar('port', window.location.port);
 213
 214         // if port == 80 (or 443) then it won't be present and should be
 215         // set manually
 216         if (!port) {
 217             if (window.location.protocol.substring(0,5) == 'https') {
 218                 port = 443;
 219             }
 220             else if (window.location.protocol.substring(0,4) == 'http') {
 221                 port = 80;
 222             }
 223         }
 224
 225         var password = WebUtil.getConfigVar('password', '');
 226         var path = WebUtil.getConfigVar('path', 'websockify');
 227
 228         // If a token variable is passed in, set the parameter in a cookie.
 229         // This is used by nova-novncproxy.
 230         var token = WebUtil.getConfigVar('token', null);
 231         if (token) {
 232             // if token is already present in the path we should use it
 233             path = WebUtil.injectParamIfMissing(path, "token", token);
 234
 235             WebUtil.createCookie('token', token, 1)
 236         }
 237
 238         (function() {
 239
 240             if ((!host) || (!port)) {
 241                 status('Must specify host and port in URL', 'error');
 242             }
 243
 244             try {
 245                 rfb = new RFB({'target':       document.getElementById('noVNC_canvas'),
 246                                'encrypt':      WebUtil.getConfigVar('encrypt',
 247                                         (window.location.protocol === "https:")),
 248                                'repeaterID':   WebUtil.getConfigVar('repeaterID', ''),
 249                                'local_cursor': WebUtil.getConfigVar('cursor', true),
 250                                'shared':       WebUtil.getConfigVar('shared', true),
 251                                'view_only':    WebUtil.getConfigVar('view_only', false),
 252                                'onNotification':  notification,
 253                                'onUpdateState':  updateState,
 254                                'onDisconnected': disconnected,
 255                                'onXvpInit':    xvpInit,
 256                                'onPasswordRequired':  passwordRequired,
 257                                'onFBUComplete': FBUComplete,
 258                                'onDesktopName': updateDesktopName});
 259             } catch (exc) {
 260                 status('Unable to create RFB client -- ' + exc, 'error');
 261                 return; // don't continue trying to connect
 262             }
 263
 264             rfb.connect(host, port, password, path);
 265         })();
 266     </script>
 267 </head>
 268
 269 <body style="margin: 0px;">
 270     <div id="noVNC_container">
 271             <div id="noVNC_status_bar" class="noVNC_status_bar" style="margin-top: 0px;">
 272                 <table border=0 width="100%"><tr>
 273                     <td><div id="noVNC_status" style="position: relative; height: auto;">
 274                         Loading
 275                     </div></td>
 276                     <td width="1%"><div id="noVNC_buttons">
 277                         <input type=button value="Send CtrlAltDel"
 278                             id="sendCtrlAltDelButton">
 279                         <span id="noVNC_xvp_buttons">
 280                         <input type=button value="Shutdown"
 281                             id="xvpShutdownButton">
 282                         <input type=button value="Reboot"
 283                             id="xvpRebootButton">
 284                         <input type=button value="Reset"
 285                             id="xvpResetButton">
 286                         </span>
 287                             </div></td>
 288                 </tr></table>
 289             </div>
 290             <canvas id="noVNC_canvas" width="640px" height="20px">
 291                 Canvas not supported.
 292             </canvas>
 293         </div>
 294
 295     </body>
 296 </html>