vnc_lite.html 13 KB

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