jcarr
/
noVNC
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
VNC client web application
444 Commits 4 Branches 22 Tags 18 MiB
JavaScript 92.7%
CSS 3.8%
HTML 2.2%
Shell 1.1%
Makefile 0.2%
Go to file
Joel Martin 54e7cbdf8f Viewport handling in include/display.js 
Part of mobile device support:
https://github.com/kanaka/noVNC/issues/48

The Display object is redefined as a larger display region with
an equal or smaller visible viewport. The size of the full display
region is set/changed using resize(). The viewport is set/changed
using viewportChange().

All exposed routines that draw on the display now take coordinates
that are absolute (relative to the full display region). For example,
the result of fillRect(100, 100, 10, 10, [255,0,0]) will appear in the
canvas at (0,0) if the viewport is set to (100,100).

Details:

- Move the generic part of the viewport code from tests/viewport.html
  into include/display.

- Add two new routines to the Display interface:

    - viewportChange(deltaX, deltaY, width, height)
        - This adjusts the position of the visible viewport and/or the
          size of the viewport.

        - deltaX and deltaY specify how the position of the viewport
          should be shifted. The position of the viewport is clamped
          to the full region size (i.e. cannot outside the display
          region).

        - The clean and dirty regions of the display are updated based
          on calls to this routine. For example, if the viewport width
          is increased, then there is now a dirty box on the right
          side of the viewport. Another example, if the viewport is
          shifted down and to the left over the display region, there
          are now two dirty boxes: one on the left side and one
          on the bottom of the viewport.

    - getCleanDirtyReset()
        - This returns an object with the clean box and a list of
          dirty boxes (that need to be redrawn).

            {'cleanBox':
                {'x': x, 'y': y, 'w': w, 'h': h},
             'dirtyBoxes':
                [{'x': x, 'y': y, 'w': w, 'h': h}, ...]
             }

        - The coordinates in the clean and dirty boxes are absolute
          coordinates (relative to the full display region) but they
          are clipped to the visible viewport.

        - Calling this function also resets the clean rectangle to be
          the whole viewport (i.e. nothing visible needs to be redrawn
          dirty) so the caller of this routine is responsible for
          redrawing any
 		2011-09-13 09:54:44 -05:00
debian Version 0.1, debian packaging, license text. 2011-07-14 15:57:01 -05:00
docs Version 0.1, debian packaging, license text. 2011-07-14 15:57:01 -05:00
images Add logo, favicon. 2011-02-03 11:04:32 -06:00
include Viewport handling in include/display.js 2011-09-13 09:54:44 -05:00
tests Viewport handling in include/display.js 2011-09-13 09:54:44 -05:00
utils Pull websockify: python3 numpy buffer/string fix. 2011-09-10 16:03:39 -05:00
.gitignore Ignore utils/rebind.so 2011-03-23 21:23:08 -05:00
LICENSE.txt Version 0.1, debian packaging, license text. 2011-07-14 15:57:01 -05:00
README.md README: Zentyal (Ebox) and SlapOS to projects list. 2011-08-04 10:50:16 -05:00
favicon.ico Add logo, favicon. 2011-02-03 11:04:32 -06:00
vnc.html Fix copyright year to 2011. 2011-04-05 14:44:47 -05:00
vnc_auto.html add ability to set title from url 2011-06-26 13:21:45 -05:00

README.md

noVNC: HTML5 VNC Client

Description

noVNC is a VNC client implemented using HTML5 technologies, specifically Canvas and WebSockets (supports 'wss://' encryption). noVNC is licensed under the LGPLv3.

Special thanks to Sentry Data Systems for sponsoring ongoing development of this project (and for employing me).

There are many companies/projects that have integrated noVNC into their products including: Sentry Data Systems, Ganeti Web Manager, Archipel, openQRM, OpenNode, OpenStack, Broadway (HTML5 GDK/GTK+ backend), OpenNebula, CloudSigma, Zentyal (formerly eBox), and SlapOS. See this wiki page for more info and links.

Notable commits, announcements and news are posted to @noVNC

Screenshots

Running in Chrome before and after connecting:

 

See more screenshots here.

Browser Requirements

  • HTML5 Canvas: Except for Internet Explorer, most browsers have had Canvas support for quite some time. Internet Explorer 9 will have Canvas support (finally).

  • HTML5 WebSockets: For browsers that do not have builtin WebSockets support, the project includes web-socket-js, a WebSockets emulator using Adobe Flash.

  • Fast Javascript Engine: noVNC avoids using new Javascript functionality so it will run on older browsers, but decode and rendering happen in Javascript, so a slow Javascript engine will mean noVNC is painfully slow.

  • I maintain a more detailed list of browser compatibility here.

Server Requirements

Unless you are using a VNC server with support for WebSockets connections (only my fork of libvncserver currently), you need to use a WebSockets to TCP socket proxy. There is a python proxy included ('websockify'). One advantage of using the proxy is that it has builtin support for SSL/TLS encryption (i.e. "wss://").

There a few reasons why a proxy is required:

  1. WebSockets is not a pure socket protocol. There is an initial HTTP like handshake to allow easy hand-off by web servers and allow some origin policy exchange. Also, each WebSockets frame begins with 0 ('\x00') and ends with 255 ('\xff').

  2. Javascript itself does not have the ability to handle pure byte arrays. The python proxy encodes the data as base64 so that the Javascript client can decode the data as an integer array.

Quick Start

  • Use the launch script to start a mini-webserver and the WebSockets proxy (websockify). The --vnc option is used to specify the location of a running VNC server:

    ./utils/launch.sh --vnc localhost:5901

  • Point your browser to the cut-and-paste URL that is output by the launch script. Enter a password if the VNC server has one configured. Hit the Connect button and enjoy!

Other Pages