ParaViewWeb JavaScript API

ParaViewWeb

---

Paraview and Renderer API

Paraview and renderers objects are provided to the end user for managing the paraview framework and be able to build their own application on top of paraview. Moreover, a set of renderers are provided on top of several technologies but we try to provide as much as possible the same features and API to each of them. The list below explain how to achieve the following actions:

• Rotation
  • The rotation of the 3D scene can be achieve by the left mouse button on the renderer.
• Zoom
  • The zoom in and zoom out of the 3D scene can be achieve by the left mouse button while holding the Ctrl key down. And depending on the renderer by using the right button of the mouse.
• Pan
  • The pan of the 3D scene can be achieve by the left mouse button while holding the Shift key down. And depending on the renderer by using the middle button of the mouse.

Paraview API and fields

• Fields
  • paraview.sessionId  : String that hold the current session id.
  • paraview.coreServiceURL: Core service url that should looks like http://localhost:8080/PWService
  • paraview.jsonRpcClient : JSONRpcClient client
  • paraview.plugins  : Object that holds all loaded plugins

• Methods
  • createSession(name, comment,pluginGroupName) : Create a new visualization
  • connectToSession(sessionId)  : Join an existing visualization
  • disconnect()  : Stop the running visualization
  • sendEvent(command,content)  : Send event such as mouse event
  • loadFile(fileName)  : Load file based on server local working data directory
  • loadPlugins()  : Load all the plugins proxy inside the paraview.plugins field.
  • getPlugin(pluginName)  : Build a specific plugin proxy and return it.
  • CreateIfNeededRenderView()  : Remote method used to get the active render view or automatically create it with nice settings.

Renderer API (JavaScriptRenderer, HttpAppletRenderer, JMSAppletRenderer)

• Fields
  • renderer.view.id  : Keep the rendererName
  • renderer.view.width  : Own the string that represent the width of the renderer. Could be used as Read and Write.
  • renderer.view.height : Own the string that represent the height of the renderer. Could be used as Read and Write.

• Methods
  • this(rendererName, serviceUrl) : Create a renderer object.
  • init(sessionId, viewId)  : Set the connection information
  • bindToElementId(containerId)  : Add HTML code that represent the renderer inside the HTML element that own containerId as id attribute.
  • bindToElement(domElement)  : Same as bindToElementId() but works directly on a DOM element.
  • start()  : Start the renderer thread or loop if needed.
  • unbindToElementId(containerId) : Remove HTML code that represent the renderer inside the HTML element that own containerId as id attribute.
  • unbindToElement(domElement)  : Same as unbindToElementId() but works directly on a DOM element.
  • setSize(width, height)  : Update the size of the local renderer.

Sample code usage: <source lang="javascript">

  var renderer = new JMSAppletRenderer('jmsRenderer','http://localhost:8080/PWService')
  renderer.init(sessionId, viewId);
  renderer.bindToElementId('containerID'); // => Add image html tag into the web page in order to show the picture inside a div tag id 'containerID'
  renderer.start();
  renderer.init(otherSessionId, otherViewId); // May required an unbind/bind
  renderer.view.width = '100%';
  renderer.view.height = '400';
  renderer.setSize('100%', '400');
  renderer.unbindToElementId('containerID');

</source>

FlashRenderer API

The Flash renderer API is similar to the other renderer API but add the following method.

  showInfo(show): Method used to show or hide textual info in the renderer

Sample usage code: <source lang="javascript">

  var renderer = new FlashRenderer("rendererName", 'http://localhost:8080/PWService');
  // To show text informations in the renderer window
  renderer.showInfo(true);
  // or to hide those text informations
  renderer.showInfo(false);

</source>

JavaScriptRenderer API

The JavaScript renderer API is similar to the other renderer API but add the following field.

  renderer.interactiveRatio: Field used to reduce image size while interacting. The default value is 2.

Sample usage code: <source lang="javascript">

  var renderer = new JavaScriptRenderer("rendererName", 'http://localhost:8080/PWService');
  // To prevent image reduction while interacting
  renderer.interactiveRatio = 1;
  // or to divide by 2 the image dimension.
  renderer.interactiveRatio = 2;

</source>

HttpAppletRenderer API

The HttpApplet renderer API is similar to the other renderer API but add the following method.

  renderer.useBrowserConnection(true/false): Method used to tell the applet to use the JavaScript json-rpc client to send mouse interaction or used its internal single upstream http connection for the whole set of mouse event.

Sample usage code: <source lang="javascript">

  var renderer = new HttpAppletRenderer("rendererName", 'http://localhost:8080/PWService');
  // Use browser JavaScript Json-rpc client
  renderer.useBrowserConnection(true);
  // or use internal upstream socket
  renderer.useBrowserConnection(false);

</source>

WebGLRender API

The WebGL renderer API is similar to the JavaScript API but add the following method.

 renderer.setForceSquareSize(true/false): If true, the aspect ratio of the canvas size will not affect the rendered objects.

Sample usage code: <source lang="javascript">

  var renderer = new WebGLRenderer("rendererName", 'http://localhost:8080/PWService');
  renderer.setSize(640, 480);
  renderer.bindToElementId('containerID');   // => Add canvas html tag into the web page in order to use WebGL
  renderer.init(otherSessionId, otherViewId);

</source>