ParaViewWeb JavaScript Introduction
JavaScript
Introduction
JavaScript is a programmation langage that is widely used in web browser to improve the interactivity of web pages while you are browsing the Web. Paraview Web Visualisation provides new JavaScript objects that allow the user to perform complex remote visualization and see the result localy in it's web browser. This chapter present those objects and how to use them.
Paraview on the client browser side
First of all in order to import the new JavaScript objects, you will need to import a set of JavaScript files that are provided by the PWService which allow web browser to talk to Paraview. Therefore, you will need to add in your web page inside the head section the following lines with the proper host and URL. <source lang="html4strict">
<html>
<head>
<script type="text/javascript" src="http://localhost:8080/PWService/js/ParaViewWeb.js"></script>
</head>
<body>
...
</body>
</html>
</source>
Once the import of the JavaScript files is done, you are able to create and manipulate the Paraview Web Visualisation objects like in the following script.
<source lang="html4strict">
<script type="text/javascript">
// Set the web service base URL
var serverUrl = "http://localhost:8080/PWService";
//
// Create a paraview proxy
//
var paraview = new Paraview(serverUrl);
paraview.createSession("Session name", "Session comment", "default");
//
// Execute Paraview scripting
//
var sphere = paraview.Sphere();
//
// Read and show sphere properties
//
alert("Sphere radius: " + sphere.getRadius());
alert("Sphere center: " + sphere.getCenter());
//
// Update sphere properties
//
sphere.setRadius(2);
sphere.setCenter(1,2,3); // Both way are working
sphere.setCenter([1,2,3]); // Both way are working
</script>
</source>
Adding rendering on the client side
Scripting Paraview from a web browser can be very powerfull, but using paraview without any rendering has some limitation. Therefore, Paraview Web Visualisation provides several renderer for your browser using several technologies such as JavaScript, Java Applet and Flash. Each renderer rely on several resources that are provided by the PWService.
To use a renderer, you will need to tag an element in your HTML where the renderer should be inserted. For example, you can use the following html tag. <source lang="html4strict">
</source> Or inserting the renderer inside a table like in the following html. <source lang="html4strict">
| Viewport title |
</source> Once your HTML is ready to receive your renderer, you can execute the following code. The class name "XxxxxRenderer" should be replaced by one of the following class name:
- JavaScriptRenderer
- HttpAppletRenderer
- JMSAppletRenderer
- FlashRenderer
<source lang="html4strict">
<script type="text/javascript">
// Set the web service base URL
var serverUrl = "http://localhost:8080/PWService";
...
// Create and bind renderer
var renderer = new XxxxxRenderer("rendererName", serverUrl);
renderer.init(paraview.sessionId, paraview.activeViewId);
renderer.setSize('200','200');
renderer.bindToElementId("renderer-container-id");
renderer.start();
</script>
</source>
