1. Download and install node.js (nodejs.org)
2. Install the ws package (https://github.com/websockets/ws)
3. In a terminal, run "node rsserver"
4. In a browser, go to http://127.0.0.1:1729/
5. In GAP create a TCP client in localhost, port 1728. 
For example, execute the following commands:
LoadPackage("scscp");
cs:=InputOutputTCPStream("localhost", 1728);
In the terminal where rsserver runs you should now read "tcp client connected".

If you want to run a browser part on a remote computer, launch node with the IP address of
the server as the second argument, for example:
node rsserver 192.168.178.33
GAP and node should always run in the same computer, so the first argument in 
InputOutputTCPStream should always be "localhost".
You can use other ports for the HTTP and TCP servers by specifying them 
as the third and the fourth argument respectively:
node rsserver 192.168.178.33 8080 1337


CANVAS UI

Click and drag to rotate the sphere.

To specify a Moebius transformation, double-click somewhere on the
sphere surface to add a reference point (In the current design the
reference point for Moebius transformations looks like a green
diamond). Double-click a reference point to remove it. Drag a
reference point to apply the transformation moving this point to the
new place, leaving the other reference points unchanged. It's also
possible to use only two points for a Moebius transformation: if you
move one of the points, the second point and its antipode will be
unchanged. The button "Reset transformation" resets the transformation
applied to the sphere's surface to the identity. The button "Clear
reference points" removes all reference points, but leaves the
transformation unchanged.

Press the Ctrl key, then right-press and drag the mouse around to draw
a line on the sphere's surface. Press Ctrl and left-click to delete
the last drawn line. If there are new lines on the sphere, the message
to the server is sent when the Ctrl key is released.

Shift-double-click to create a point on the sphere. (In the current
design a point looks like a pink ball with a flag with number on it)
The point is dragable. Shift-double-click on a point to remove it.

GRID AND LABELS ON THE SPHERE

There are two types of grid on the sphere: constant absolute value
lines (red in the current design) and constant real and imaginary part
lines (green). Both grids have the lines that are always visible (0.1,
0.5, 1, 2, 10 absolute values, these labels are light red, -1, 0 and 1
for real and imaginary parts, green) and lines depending on the
transformation applied ("dynamic grid"). All type of grid lines can
have labels. Besides that there labels that are always present: 0, 1,
i, -1, -i and infinity, they are also green. To show and hide grids
and labels use the "Grid and labels" control set.  One can show or
hide grids and labels through user interface (a set of checkboxes
"Grid and labels") or sending <config> through the server. For
example, <config key="showGrid" value="false"/> hides all constant Re
and Im part lines.

When the Fatou and Julia sets of a rational function are drawn on the
sphere's surface, the formula of this function is shown below the
canvas and controls.  Meanings of the colors are described in a
legend. The numbers to show are read from the <cycle> entries of the
<function>. Use "legendMarkerSize", "legendPosition" and
"legendTextColor" config values to change legend's appearance and
"showLegend" to switch it on and off. "legendMarkerSize" is size of a
colored square in pixels, "legendPosition" controls in which corner of
the canvas legend is shown ("lt" for left-top, "rt", "lb" or "rb" for
others).

CLIENT-SERVER COMMUNICATION

The information transfered between web-client, nodejs server and
tcp-client is presented in xml format, described in
rsserver/data/rsscp.dtd Web-client sends to tcp-client (through the
server) an <updata> element, the tcp-client should send
<downdata>. Both <updata> and <downdata> must have a "session"
attribute. Every time a new web-client is connected to the server new
session is created. Id for a new session (the value of a "session"
attribute) is generated automatically unless the "session" variable is
present in a query string of the URL. For example the URL
http://127.0.0.1:1729/?session=s1 will open the session with ID
"s1". The URL http://127.0.0.1:1729/ will open the session with a new
ID.

Every session can have one or more browser windows, each window has a
unique (within one session) ID.  Every window has one <head> and any
quantity of <canvas>, <text> and <button> elements. Each of those
elements has a unique (within the session) ID. A canvas object has one
<rotation> and one <transform> elements, can have one <function>
element and any quantity of <arc>, <line> and <point> elements. Each
<arc>, <line> and <point> has a unique (within the session) ID.

<downdata> element must have an "action" attribute (the value is
"request" by default). Set it to "create" to add new elements to
window or canvas, "populate" to add elements to canvas, to set its
rotation or transformation, or change configuration, and change a text
on a button, "remove" to remove object from window or canvas,
"request" to receive information about the given object.

<updata> element has a "status" attribute. It can take an "info"
value, when nothing is changed in web view, "updated" when something
is changed in a given object, "created" or "removed" when object is
created or removed, "button-click" when user clicks a button.

<downdata> and <updata> must have an "object" attribute. (Except the
"action" attribute of <downdata> value is "request". In this case the
server sends an information about all windows of a given session. If
"session" attribute is not present, the information about all open
sessions is sent to tcp-server). The "object" attribute contains an ID
of the given object (exsept if <downdata atcion="create"> and <updata
status="created">, in this case "object" is the ID of the parent
object).

To set a layout for the objects on the page use <template> tag. It
should be sent as a child of <downdata> whith action="create"
attribute and contain valid html. Html tag that should contain
functional elemenst (canvases, buttons or texts, created via the
server) should have attributes class="wrapper" and content-id="[id of
the contained object]". The content elements will be added to those
tags and resulting html will be inserted to the page. A <template> tag
may have "replace" attribute. If set to "true" the content of the
<template> will replace existing content of the page, exsept page
title, "show data" block and elements which do not have "wrappers" in
the template (they will be placed after the template content, use
<downdata action="remove"...> if you want to delete them), otherwise
it will be added to the end of the existing content (befor "show data"
block).

If an html-template is applied to a window, in reply to "request"
action the objects of the window are not integrated in html, they are
sent as a list, applied templates are sent among them (see example).

FILLING SURFACE OF RIEMANN SPHERE OR COMPLEX PLANE

To fill surface of Riemann sphere (or complex plane) use <downdata>
with "populate" as "action" attribute value and canvas id as "object".
There two ways to fill a surface: send a rational function data to
obtain it's Julia and Fatou sets or send a bitmap.

To send a bitmap use a <bitmap> tag with <data> and <transform> as
childnodes. <data> should contain dataURL for the image. For spherical
geometry the image should represent colors corresponding to infinity
at the top, to zero in the bottom, to negative imaginary numbers in
the sides. For plane geometry the right top corner corresponds to 1+i,
left bottom to -1-i. <transform> tag should be present if the image
depicts complex plane of sphere with a Moebius transformation
applied. If there are no <transform> tag the image is interpreted as
not transformed, if a Moebius transformation is applied to the sphere
or plane, the image would be stretched.

If the sphere was populated by rational function, its legend and
equation lines are generated automatically. Bitmap filling by default
gives no legend and equation line. Use <legend> and <equation> tags to
set them manully.  <downdata> with "populate" as action, canvas id as
object and <equation> as child will set the content of <equation> tag
to a text line under the canvas. <legend> tag should contain
<legendline> tags as children. Each legend line should contain "color"
attribute (representing color of a small square) and text or <cn> as
content. Text content or string representation of a complex number
will be placed next to the colored square. If no "color" attribute is
present and the content of the <legendline> is <cn>, the square will
be colored to the color, used in shader to represent corresponding
complex number.

<legend> and <bitmap> tags can contain a "name" attribute. By default
populating a canvas with bitmap will remove a legend, but if the
legend has the same name as the bitmap, it remains.