Detailed Description

This JavaScript API enables development of HTML5 client applications for RemoteViz.

It requires a web browser compatible with HTML5, such as the latest version of the Edge, Internet Explorer (>=10), Google Chrome, Firefox or Safari browsers.

RemoteVizRenderArea is NOT actually a C++ (or C# or Java) class. We are just using the same documentation system for your convenience.

JavaScript

The JavaScript file has to be included in your application's web page to provide the RemoteViz API features to an HTML container.
Add the RemoteViz client component into your webpage with the following JavaScript code:

<script type="text/javascript" src="RemoteVizClient.js"></script>

The JavaScript file RemoteVizClient.js contains the "Universal Module Definition" pattern. The UMD pattern attempts to offer compatibility with the most popular script loaders of the day (e.g RequireJS amongst others).

TypeScript

TypeScript is an open-source programming language developed and maintained by Microsoft. It is a strict syntactical superset of JavaScript, and adds optional static typing to the language. A TypeScript declaration file is provided in order to use the RemoteViz client API in a TypeScript application (see remotevizHTML5/RemoteVizClient.d.ts).

Add the RemoteViz client component into your TypeScript application with the following code:

HTTP Content-Security-Policy

The HTTP Content-Security-Policy response header allows web site administrators to control resources the user agent is allowed to load for a given page. This helps guard against cross-site scripting attacks (XSS).
In order to use this feature with RemoteViz, the RemoteViz WebSocket's server address has to be explicitly set as a property on the 'connect-src' directive (for example: "connect-src ws://serverip:serverport" or "connect-src ws://example.com"). In case of using image streaming mode, the source 'data:' has to be explicitly set as a property on the directive 'img-src'.

Microsoft Edge

Running the RemoteViz examples on localhost using Microsoft Edge can fail because of the network isolation. This happens because Edge runs as a Windows modern app different from IE and thus it is has network isolation by default for security reasons. You can either change the network interface used by the RemoteViz examples or enable loopback in the net isolation settings:

EXAMPLE

<html>
<head>
<title>RemoteViz Example</title>
<link rel="stylesheet" type="text/css" href="loader.css"> <!-- include the loader css -->
<script type="text/javascript" src="RemoteVizClient.js"></script> <!-- include the RemoteViz javascript client -->
<script type="text/javascript">
var theRenderArea = null;
function init() // This function is called immediately after the page is loaded.
{
// Initialize the renderArea on the server.// "TheDiv" is the id of the image container, which must be a <div>.// "640" and "480" are the requested width and height of the renderArea managed by the service.
theRenderArea = newRemoteVizRenderArea("TheDiv", 640, 480);
// Listen for start and stop bandwidth calibration events to display or hide the loader.
theRenderArea.addServiceListener(service);
// Connect to the service.// The IP address and the port refer to those of the service (see main.cpp).// "TheDemo" specifies the name of the requested renderArea.
theRenderArea.connectTo("ws://127.0.0.1:8080/TheDemo");
}
function service(event) // This function is called when a message is received from the service.
{
var message = event[0];
switch(message) {
case"startNetworkCalibration":
case"pendingNetworkCalibration":
document.getElementById("loaderGroup").style.display = "inline";
break;
case"finishedNetworkCalibration":
document.getElementById("loaderGroup").style.display = "none";
break;
}
}
</script>
</head>
<body onload="init()" bgcolor="silver">
<div id="loaderGroup" style="display:none;"><div id="loader"></div>
<div id="loaderText">Bandwidth calibration</div></div> <!-- loader notifying the network bandwidth calibration -->
<div id="TheDiv"> <!-- element displaying the renderArea -->
</div>
</body>
</html>

Constructor & Destructor Documentation

RemoteVizRenderArea::RemoteVizRenderArea

(

String|HTMLElement

container,

Number

containerWidth,

Number

containerHeight,

String

displayMode

)

This constructor associates a RemoteViz renderArea on the server with an HTML container.

The container will be resized to containerWidth/containerHeight.

Parameters:

container

: container id in the HTML page or container HTML object (must be a DIV element).

containerWidth

: width of the container in pixels

containerHeight

: height of the container in pixels

displayMode

: This setting allows you to specify how to map the renderArea image (server-side) into the container (client-side).
The advantage of the first two modes is that the renderArea image is not distorted.

FIT: This mode resizes the image to fit the container but keeps the same aspect ratio as the renderArea.
If the container aspect ratio does not match the renderArea aspect ratio portions of the container will be blank. This is the default value.

CROP: In crop mode, the image is cropped (if necessary) to keep the same scale as the renderArea.
If the aspect ratios do not match, portions of the image will not be displayed.

STRETCH: This mode stretches the image to fill the container.
If the aspect raios do not match, the image will be distorted.

This event occurs when the pointer is moving while it is over the container (DIV element).
This event occurs when the pointer is moving while it is over the container.
A handler is assigned from a script using the syntax

[renderArea].addMouseMoveListener([function]);

where [renderArea] is the renderArea object and [function] is the name of the function that occurs when the event takes place.

Opens a new connection between the HTML webpage and the RemoteViz service.

After being connected, the server-side onPendingCreateRenderArea event will be triggered if the renderArea does not exist otherwise the server-side onPendingShareRenderArea event will be triggered.

During the connection establishment, the containerWidth and containerHeight passed as parameters in the RemoteVizRenderArea constructor will be sent to the service as the RenderArea requested size. This behavior can be overriden by including the RequestedHeight and the RequestedWidth in the service URL. If the connection is accepted, a server-side onRequestedSize event will be triggered.

Parameters:

serviceUrl

: the direct link (URL) to the RemoteViz service.
The query string can be composed of a series of field-value pairs. Within each pair, the field name and value are separated by an equals sign, '='. The series of pairs is separated by the ampersand, '&'.
Example :