From e2a392f1bf65133181ded34756f33f40cd1626a5 Mon Sep 17 00:00:00 2001 From: Joel Martin Date: Thu, 3 Feb 2011 11:11:46 -0600 Subject: [PATCH] Integration.md: details of different components. --- Integration.md | 49 +++++++++++++++++++++++++++++++++++++++++-------- 1 file changed, 41 insertions(+), 8 deletions(-) diff --git a/Integration.md b/Integration.md index d3bbd86..5a96cf9 100644 --- a/Integration.md +++ b/Integration.md @@ -1,12 +1,30 @@ noVNC is designed to be easily integrated into existing web sites with the existing structure and styling. -At a minimum you must include the `vnc.js` and `ui.js` scripts and then call -UI.load(). For example: +### 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: +
Loading
@@ -14,14 +32,29 @@ UI.load(). For example: -See `vnc.html` and `vnc_auto.html` for examples. The file -`include/plain.css` has a list of stylable elements. +* See `vnc.html` for a fleshed out working example of the above. -The `vnc.js` also includes other scripts within the `include` -sub-directory. The `VNC_uri_prefix` variable can be use override the -URL path to the `include` sub-directory. +* 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.