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     <!-- 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 doneInitialResize;
  84         var resizeTimeout;
  85         var desktopName;
  86
  87         function UIresize() {
  88             if (WebUtil.getConfigVar('resize', false)) {
  89                 var innerW = window.innerWidth;
  90                 var innerH = window.innerHeight;
  91                 var controlbarH = document.getElementById('noVNC_status_bar').offsetHeight;
  92                 if (innerW !== undefined && innerH !== undefined)
  93                     rfb.requestDesktopSize(innerW, innerH - controlbarH);
  94             }
  95         }
  96         function initialResize() {
  97             if (doneInitialResize) return;
  98             UIresize();
  99             doneInitialResize = true;
 100         }
 101         function updateDesktopName(e) {
 102             desktopName = e.detail.name;
 103         }
 104         function credentials(e) {
 105             var html;
 106
 107             var form = document.createElement('form');
 108             form.style = 'margin-bottom: 0px';
 109             form.innerHTML = '<label></label>'
 110             form.innerHTML += '<input type=password size=10 id="password_input" class="noVNC_status">';
 111             form.onsubmit = setPassword;
 112
 113             // bypass status() because it sets text content
 114             document.getElementById('noVNC_status_bar').setAttribute("class", "noVNC_status_warn");
 115             document.getElementById('noVNC_status').innerHTML = '';
 116             document.getElementById('noVNC_status').appendChild(form);
 117             document.getElementById('noVNC_status').querySelector('label').textContent = 'Password Required: ';
 118         }
 119         function setPassword() {
 120             rfb.sendCredentials({ password: document.getElementById('password_input').value });
 121             return false;
 122         }
 123         function sendCtrlAltDel() {
 124             rfb.sendCtrlAltDel();
 125             return false;
 126         }
 127         function machineShutdown() {
 128             rfb.machineShutdown();
 129             return false;
 130         }
 131         function machineReboot() {
 132             rfb.machineReboot();
 133             return false;
 134         }
 135         function machineReset() {
 136             rfb.machineReset();
 137             return false;
 138         }
 139         function status(text, level) {
 140             switch (level) {
 141                 case 'normal':
 142                 case 'warn':
 143                 case 'error':
 144                     break;
 145                 default:
 146                     level = "warn";
 147             }
 148             document.getElementById('noVNC_status_bar').setAttribute("class", "noVNC_status_" + level);
 149             document.getElementById('noVNC_status').textContent = text;
 150         }
 151         function updateState(e) {
 152             var cad = document.getElementById('sendCtrlAltDelButton');
 153             switch (e.detail.state) {
 154                 case 'connecting':
 155                     status("Connecting", "normal");
 156                     break;
 157                 case 'connected':
 158                     doneInitialResize = false;
 159                     if (WebUtil.getConfigVar('encrypt',
 160                                              (window.location.protocol === "https:"))) {
 161                         status("Connected (encrypted) to " +
 162                                desktopName, "normal");
 163                     } else {
 164                         status("Connected (unencrypted) to " +
 165                                desktopName, "normal");
 166                     }
 167                     break;
 168                 case 'disconnecting':
 169                     status("Disconnecting", "normal");
 170                     break;
 171                 case 'disconnected':
 172                     status("Disconnected", "normal");
 173                     break;
 174                 default:
 175                     status(e.detail.state, "warn");
 176                     break;
 177             }
 178
 179             if (e.detail.state === 'connected') {
 180                 cad.disabled = false;
 181             } else {
 182                 cad.disabled = true;
 183                 updatePowerButtons();
 184             }
 185
 186         }
 187         function disconnect(e) {
 188             if (typeof(e.detail.reason) !== 'undefined') {
 189                 status(e.detail.reason, "error");
 190             }
 191         }
 192         function notification(e) {
 193             status(e.detail.message, e.detail.level);
 194         }
 195
 196         window.onresize = function () {
 197             // When the window has been resized, wait until the size remains
 198             // the same for 0.5 seconds before sending the request for changing
 199             // the resolution of the session
 200             clearTimeout(resizeTimeout);
 201             resizeTimeout = setTimeout(function(){
 202                 UIresize();
 203             }, 500);
 204         };
 205
 206         function updatePowerButtons() {
 207             var powerbuttons;
 208             powerbuttons = document.getElementById('noVNC_power_buttons');
 209             if (rfb.capabilities.power) {
 210                 powerbuttons.style.display = 'inline';
 211             } else {
 212                 powerbuttons.style.display = 'none';
 213             }
 214         }
 215
 216         document.getElementById('sendCtrlAltDelButton').style.display = "inline";
 217         document.getElementById('sendCtrlAltDelButton').onclick = sendCtrlAltDel;
 218         document.getElementById('machineShutdownButton').onclick = machineShutdown;
 219         document.getElementById('machineRebootButton').onclick = machineReboot;
 220         document.getElementById('machineResetButton').onclick = machineReset;
 221
 222         WebUtil.init_logging(WebUtil.getConfigVar('logging', 'warn'));
 223         document.title = WebUtil.getConfigVar('title', 'noVNC');
 224         // By default, use the host and port of server that served this file
 225         var host = WebUtil.getConfigVar('host', window.location.hostname);
 226         var port = WebUtil.getConfigVar('port', window.location.port);
 227
 228         // if port == 80 (or 443) then it won't be present and should be
 229         // set manually
 230         if (!port) {
 231             if (window.location.protocol.substring(0,5) == 'https') {
 232                 port = 443;
 233             }
 234             else if (window.location.protocol.substring(0,4) == 'http') {
 235                 port = 80;
 236             }
 237         }
 238
 239         var password = WebUtil.getConfigVar('password', '');
 240         var path = WebUtil.getConfigVar('path', 'websockify');
 241
 242         // If a token variable is passed in, set the parameter in a cookie.
 243         // This is used by nova-novncproxy.
 244         var token = WebUtil.getConfigVar('token', null);
 245         if (token) {
 246             // if token is already present in the path we should use it
 247             path = WebUtil.injectParamIfMissing(path, "token", token);
 248
 249             WebUtil.createCookie('token', token, 1)
 250         }
 251
 252         (function() {
 253
 254             if ((!host) || (!port)) {
 255                 status('Must specify host and port in URL', 'error');
 256             }
 257
 258             var url;
 259
 260             if (WebUtil.getConfigVar('encrypt',
 261                                      (window.location.protocol === "https:"))) {
 262                 url = 'wss';
 263             } else {
 264                 url = 'ws';
 265             }
 266
 267             url += '://' + host;
 268             if(port) {
 269                 url += ':' + port;
 270             }
 271             url += '/' + path;
 272
 273             rfb = new RFB(document.getElementById('noVNC_canvas'), url,
 274                           { repeaterID: WebUtil.getConfigVar('repeaterID', ''),
 275                             shared: WebUtil.getConfigVar('shared', true),
 276                             credentials: { password: password } });
 277             rfb.viewOnly =       WebUtil.getConfigVar('view_only', false);
 278             rfb.addEventListener("notification", notification);
 279             rfb.addEventListener("updatestate",  updateState);
 280             rfb.addEventListener("disconnect", disconnect);
 281             rfb.addEventListener("capabilities", function () { updatePowerButtons(); initialResize(); });
 282             rfb.addEventListener("credentialsrequired", credentials);
 283             rfb.addEventListener("desktopname", updateDesktopName);
 284         })();
 285     </script>
 286 </head>
 287
 288 <body style="margin: 0px;">
 289     <div id="noVNC_container">
 290             <div id="noVNC_status_bar" class="noVNC_status_bar" style="margin-top: 0px;">
 291                 <table border=0 width="100%"><tr>
 292                     <td><div id="noVNC_status" style="position: relative; height: auto;">
 293                         Loading
 294                     </div></td>
 295                     <td width="1%"><div id="noVNC_buttons">
 296                         <input type=button value="Send CtrlAltDel"
 297                             id="sendCtrlAltDelButton">
 298                         <span id="noVNC_power_buttons">
 299                         <input type=button value="Shutdown"
 300                             id="machineShutdownButton">
 301                         <input type=button value="Reboot"
 302                             id="machineRebootButton">
 303                         <input type=button value="Reset"
 304                             id="machineResetButton">
 305                         </span>
 306                             </div></td>
 307                 </tr></table>
 308             </div>
 309             <canvas id="noVNC_canvas" width="640px" height="20px">
 310                 Canvas not supported.
 311             </canvas>
 312         </div>
 313
 314     </body>
 315 </html>