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) 2017 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     <!-- ES2015/ES6 modules polyfill -->
  64     <script type="module">
  65         window._noVNC_has_module_support = true;
  66     </script>
  67     <script>
  68         window.addEventListener("load", function() {
  69             if (window._noVNC_has_module_support) return;
  70             var loader = document.createElement("script");
  71             loader.src = "vendor/browser-es-module-loader/dist/browser-es-module-loader.js";
  72             document.head.appendChild(loader);
  73         });
  74     </script>
  75
  76     <!-- actual script modules -->
  77     <script type="module" crossorigin="anonymous">
  78         // Load supporting scripts
  79         import * as WebUtil from './app/webutil.js';
  80         import RFB from './core/rfb.js';
  81
  82         var rfb;
  83         var resizeTimeout;
  84         var desktopName;
  85
  86         function UIresize() {
  87             if (WebUtil.getConfigVar('resize', false)) {
  88                 var innerW = window.innerWidth;
  89                 var innerH = window.innerHeight;
  90                 var controlbarH = document.getElementById('noVNC_status_bar').offsetHeight;
  91                 if (innerW !== undefined && innerH !== undefined)
  92                     rfb.requestDesktopSize(innerW, innerH - controlbarH);
  93             }
  94         }
  95         function FBUComplete(rfb, fbu) {
  96             UIresize();
  97             rfb.set_onFBUComplete(function() { });
  98         }
  99         function updateDesktopName(rfb, name) {
 100             desktopName = name;
 101         }
 102         function passwordRequired(rfb, msg) {
 103             if (typeof msg === 'undefined') {
 104                 msg = 'Password Required: ';
 105             }
 106             var html;
 107
 108             var form = document.createElement('form');
 109             form.style = 'margin-bottom: 0px';
 110             form.innerHTML = '<label></label>'
 111             form.innerHTML += '<input type=password size=10 id="password_input">';
 112             form.onsubmit = setPassword;
 113
 114             // bypass status() because it sets text content
 115             document.getElementById('noVNC_status_bar').setAttribute("class", "noVNC_status_warn");
 116             document.getElementById('noVNC_status').innerHTML = '';
 117             document.getElementById('noVNC_status').appendChild(form);
 118             document.getElementById('noVNC_status').querySelector('label').textContent = msg;
 119         }
 120         function setPassword() {
 121             rfb.sendPassword(document.getElementById('password_input').value);
 122             return false;
 123         }
 124         function sendCtrlAltDel() {
 125             rfb.sendCtrlAltDel();
 126             return false;
 127         }
 128         function xvpShutdown() {
 129             rfb.xvpShutdown();
 130             return false;
 131         }
 132         function xvpReboot() {
 133             rfb.xvpReboot();
 134             return false;
 135         }
 136         function xvpReset() {
 137             rfb.xvpReset();
 138             return false;
 139         }
 140         function status(text, level) {
 141             switch (level) {
 142                 case 'normal':
 143                 case 'warn':
 144                 case 'error':
 145                     break;
 146                 default:
 147                     level = "warn";
 148             }
 149             document.getElementById('noVNC_status_bar').setAttribute("class", "noVNC_status_" + level);
 150             document.getElementById('noVNC_status').textContent = text;
 151         }
 152         function updateState(rfb, state, oldstate) {
 153             var cad = document.getElementById('sendCtrlAltDelButton');
 154             switch (state) {
 155                 case 'connecting':
 156                     status("Connecting", "normal");
 157                     break;
 158                 case 'connected':
 159                     if (rfb && rfb.get_encrypt()) {
 160                         status("Connected (encrypted) to " +
 161                                desktopName, "normal");
 162                     } else {
 163                         status("Connected (unencrypted) to " +
 164                                desktopName, "normal");
 165                     }
 166                     break;
 167                 case 'disconnecting':
 168                     status("Disconnecting", "normal");
 169                     break;
 170                 case 'disconnected':
 171                     status("Disconnected", "normal");
 172                     break;
 173                 default:
 174                     status(state, "warn");
 175                     break;
 176             }
 177
 178             if (state === 'connected') {
 179                 cad.disabled = false;
 180             } else {
 181                 cad.disabled = true;
 182                 xvpInit(0);
 183             }
 184
 185         }
 186         function disconnected(rfb, reason) {
 187             if (typeof(reason) !== 'undefined') {
 188                 status(reason, "error");
 189             }
 190         }
 191         function notification(rfb, msg, level, options) {
 192             status(msg, level);
 193         }
 194
 195         window.onresize = function () {
 196             // When the window has been resized, wait until the size remains
 197             // the same for 0.5 seconds before sending the request for changing
 198             // the resolution of the session
 199             clearTimeout(resizeTimeout);
 200             resizeTimeout = setTimeout(function(){
 201                 UIresize();
 202             }, 500);
 203         };
 204
 205         function xvpInit(ver) {
 206             var xvpbuttons;
 207             xvpbuttons = document.getElementById('noVNC_xvp_buttons');
 208             if (ver >= 1) {
 209                 xvpbuttons.style.display = 'inline';
 210             } else {
 211                 xvpbuttons.style.display = 'none';
 212             }
 213         }
 214
 215         document.getElementById('sendCtrlAltDelButton').style.display = "inline";
 216         document.getElementById('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
 217         document.getElementById('xvpShutdownButton').onclick = xvpShutdown;
 218         document.getElementById('xvpRebootButton').onclick = xvpReboot;
 219         document.getElementById('xvpResetButton').onclick = xvpReset;
 220
 221         WebUtil.init_logging(WebUtil.getConfigVar('logging', 'warn'));
 222         document.title = WebUtil.getConfigVar('title', 'noVNC');
 223         // By default, use the host and port of server that served this file
 224         var host = WebUtil.getConfigVar('host', window.location.hostname);
 225         var port = WebUtil.getConfigVar('port', window.location.port);
 226
 227         // if port == 80 (or 443) then it won't be present and should be
 228         // set manually
 229         if (!port) {
 230             if (window.location.protocol.substring(0,5) == 'https') {
 231                 port = 443;
 232             }
 233             else if (window.location.protocol.substring(0,4) == 'http') {
 234                 port = 80;
 235             }
 236         }
 237
 238         var password = WebUtil.getConfigVar('password', '');
 239         var path = WebUtil.getConfigVar('path', 'websockify');
 240
 241         // If a token variable is passed in, set the parameter in a cookie.
 242         // This is used by nova-novncproxy.
 243         var token = WebUtil.getConfigVar('token', null);
 244         if (token) {
 245             // if token is already present in the path we should use it
 246             path = WebUtil.injectParamIfMissing(path, "token", token);
 247
 248             WebUtil.createCookie('token', token, 1)
 249         }
 250
 251         (function() {
 252
 253             if ((!host) || (!port)) {
 254                 status('Must specify host and port in URL', 'error');
 255             }
 256
 257             try {
 258                 rfb = new RFB({'target':       document.getElementById('noVNC_canvas'),
 259                                'encrypt':      WebUtil.getConfigVar('encrypt',
 260                                         (window.location.protocol === "https:")),
 261                                'repeaterID':   WebUtil.getConfigVar('repeaterID', ''),
 262                                'local_cursor': WebUtil.getConfigVar('cursor', true),
 263                                'shared':       WebUtil.getConfigVar('shared', true),
 264                                'view_only':    WebUtil.getConfigVar('view_only', false),
 265                                'onNotification':  notification,
 266                                'onUpdateState':  updateState,
 267                                'onDisconnected': disconnected,
 268                                'onXvpInit':    xvpInit,
 269                                'onPasswordRequired':  passwordRequired,
 270                                'onFBUComplete': FBUComplete,
 271                                'onDesktopName': updateDesktopName});
 272             } catch (exc) {
 273                 status('Unable to create RFB client -- ' + exc, 'error');
 274                 return; // don't continue trying to connect
 275             }
 276
 277             rfb.connect(host, port, password, path);
 278         })();
 279     </script>
 280 </head>
 281
 282 <body>
 283   <div id="noVNC_status_bar" style="margin-top: 0px;">
 284     <table border=0 width="100%"><tr>
 285         <td><div id="noVNC_status" style="position: relative; height: auto;">
 286             Loading
 287         </div></td>
 288         <td width="1%"><div id="noVNC_buttons">
 289             <input type=button value="Send CtrlAltDel"
 290                    id="sendCtrlAltDelButton">
 291             <span id="noVNC_xvp_buttons">
 292               <input type=button value="Shutdown"
 293                      id="xvpShutdownButton">
 294               <input type=button value="Reboot"
 295                      id="xvpRebootButton">
 296               <input type=button value="Reset"
 297                      id="xvpResetButton">
 298             </span>
 299         </div></td>
 300     </tr></table>
 301   </div>
 302   <canvas id="noVNC_canvas" width="0" height="0">
 303     Canvas not supported.
 304   </canvas>
 305
 306 </body>
 307 </html>