ParaViewWeb Envision

Introduction

EnVision is a tool to remotely visualize dataset through a web browser. It allows you to transparently user remote visualization resources through a thin web based client from anywhere in the world.

Some more information can be found here: http://www.vizworld.com/2010/05/envision-scientific-visualization-web-browser/

How EnVision works

EnVision is a customizable web application developed in PHP which rely on a custom VTK engine which provides a simple but efficient API. The idea behind EnVision is to simplify post-processing data analysis by providing a Web portal that offer the required features for data analysis.

EnVision components

The rendering

   3D based on VNC Applet 
  
 <== VNC_TCP_connection ==>  
 
         X Server

The Interaction

       JavaScript   
  
   <== HTTP_request ==> 
 
       PHP server 
 
 <== XML_on_TCP_socket ==> 
 
       VTK Engine

Available RPC commands

Those command are server side and managed in PHP. It's with ad-hoc HTTP request that command are propagated from the browser to the visualization engine.

• getEngine()
  • Return the name of the remote engine, from which available algorithms and features will depend on.
• getDatasetInfo()
  • Return the dataset information such as the list of Scalar data or Vector data, bounds...
• getAlgorithmDescriptions()
  • Return the engine state with all the algorithms values in an XML format. This output is used to extract algorithm parameter value and generate the HTML form to configure any algorithm.
• setVisibility($index, $value)
  • Show or Hide the Algorithm that is stored at the given index in the engine model array.
• deleteAlgorithm($index)
  • Remove from engine the Algorithm that is stored at the given index in the engine model array.
• setInteracting($index, $value)
  • Show or Hide the Widget of a given Algoritm.
• changeBGColor($r, $g, $b)
  • Update the background color
• loadDataset($filename)
  • Load a given dataset based on a server file path

Dynamic Form generation for Algorithm settings

The server return the state of all algorithms as an XML form. The PHP server process this response and extract only the settings for the current selected algorithm and generate an HTML form based on custom field type.

 List of available field types:

   choice, dimensionList, dimensionValue, 
   fixedRangeStep, fixedRangeValue, 
   numericString, transfer2d, 
   variableListAll, variableListScalars, variableListVectors
   variableRange, variableValue

How ParaViewWeb integration could be done

As ParaViewWeb is mostly client side (JavaScript), its integration will consist as moving the Sever/PHP code into JavaScript. Basically, creating an EnVision.js file which provides all the API that the current RPC client provides. And wrap the desire ParaView algorithm into JavaScript with a common API which could look like that.

Also, server plugins could simplify the algorithms definitions and states setting...

EnVision
 loadData(filePath)
 getDataInformation()    => Some data structure object
 
 addAlgorithm(name)      => Algorithm
 getNumberOfAlgorithms() => Number
 getAlgorithm(index)     => Algorithm
 deleteAlgorithm(index)  
 
 getAvailableAlgorithmNames() => ['iso', 'clip', ...]
 showConfigurationForm(state)
 setBgColor(red, green, blue)

Algorithm
  getProxy()
  getName()
  setVisible(show)
  isVisible();
  hasWidget()          => Boolean
  enableWidget(enable)
  isWidgetEnabled();
  getState()           => Some data structure object
  updateState(state)

Sample code for IsoContourAlgorithm JavaScript object

 function IsoContourAlgorithm(paraview, inputDS) {
    this.paraview = paraview;
    this.proxy = paraview.Contour({Input: inputDS});
    this.visible = true;
    this.state = {};
    
    // Fill state based on the proxy
    this.state.contourBy = getDataInformation().getFirstScalarArrayName();
    this.state.colorBy   = state.contourBy;
    this.state.isovalue  = (getDataInformation().getFirstScalarRange()[0] + getDataInformation().getFirstScalarRange()[1])/2; 
    this.state.opacity   = 1;
    
    this.updateState(this.state);
 }
 
 IsoContourAlgorithm.prototype.getName = function() {
    return 'IsoContourAlgorithm';
 }
 
 IsoContourAlgorithm.prototype.getProxy = function() {
    return this.proxy;
 }
 
 IsoContourAlgorithm.prototype.setVisible = function(show) {
    this.visible = show;
    if(this.visible) {
      paraview.Show({proxy: this.proxy});
    } else {
      paraview.Hide({proxy: this.proxy});
    }
 }
 
 IsoContourAlgorithm.prototype.isVisible = function() {
    return this.visible;
 }
  
 IsoContourAlgorithm.prototype.enableWidget = function(enable) {
 }
 
 IsoContourAlgorithm.prototype.hasWidget = function(show) {
    return false;
 }
 
 IsoContourAlgorithm.prototype.getState = function() {
    return this.state;
 }
 
 IsoContourAlgorithm.prototype.updateState = function(state) {
    this.state = state;
    // Update filter
    proxy.setContourBy(state.contourBy);
    proxy.setValue(state.isoValue);
    // ...
 }

Additional References: Apache-to-Tomcat Tunnel