Skip to content

Integration

Jump to bottom Edit New page
kanaka edited this page Sep 6, 2012 · 8 revisions

noVNC is designed to be easily integrated into existing web sites with the existing structure and styling. For details about the modules that make up noVNC and their Javascript API see the ModulesAPI page.

noVNC integration notes

  • All files necessary for integrating noVNC are in the include/ subdirectory of the project.

  • The file vnc.js will dynamically included all other files required for basic noVNC functionality. The global variable INCLUDE_URI is used by vnc.js as the URL prefix for the other noVNC files. The value of INCLUDE_URI defaults to include/.

  • The file ui.js has a load() routine UI that will generate a basic noVNC UI and provide default callback handlers.

  • The file plain.css provides some very simple styling that is compatible with the UI generated by ui.js. The file black.css provides an alternate styling.

  • The simplest way to create a noVNC page is with vnc.js, ui.js and plain.css and then calling UI.load(). For example:

      <head>
      <script src='include/vnc.js'></script>
      <script src="include/ui.js"></script>
      <link rel="stylesheet" href="include/plain.css">
  </head>
  <body>
      <div id='vnc'>Loading</div>
      <script>
          window.onload = function () {
              UI.load('vnc');
          };
      </script>
  </body>

  • See vnc.html for a fleshed out working example of the above.

  • The file vnc_auto.html is a working example that does not use ui.js. It statically defines the UI and provides callback functions all on one page. vnc_auto.html takes host, port and password settings from the URL query string and automatically connects as soon as the page loads.

Changing the screen logo

When noVNC is disconnected, the canvas area displays a logo. This logo is a Data URI scheme image encoded in the logo.js file.

To generate a new logo from an existing image file, run the following command replacing /path/to/IMAGE with the path to the image you wish to use (in PNG, JPEG, or GIF format):

./utils/img2js.py /path/to/IMAGE noVNC_logo > include/logo.js

The image should be at least 640 pixels wide to allow for space in the status bar above the canvas area for messages.

Add a custom footer
Add a custom sidebar
Clone this wiki locally