GitHub/noVNC
1
0
Fork 0
mirror of https://github.com/novnc/noVNC.git synced 2026-06-08 21:34:38 +00:00
Code Issues Packages Projects Releases Wiki Activity

Integration.md: details of different components.

Joel Martin
2011-02-03 11:11:46 -06:00
parent 649c03335c
commit e2a392f1bf
1 changed files with 41 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
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:
<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>
@@ -14,14 +32,29 @@ UI.load(). For example:
<script>
window.onload = function () {
UI.load('vnc');
}
};
</script>
</body>
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.