Skip to content

Instantly share code, notes, and snippets.

@clavicule
Last active September 15, 2021 07:07
Show Gist options
  • Save clavicule/7b8b3963ceb17302cff725f8dc36bc57 to your computer and use it in GitHub Desktop.
Save clavicule/7b8b3963ceb17302cff725f8dc36bc57 to your computer and use it in GitHub Desktop.
ParaviewWeb server setup for Visualizer webapp

These instructions are gathered from the different documents available on Paraview and Visualizer websites.

Server setup

The following instructions are for Apache on Ubuntu, similar setup could be done with other servers.

  • Install Apache packages
sudo apt-get install apache2-dev apache2 libapr1-dev apache2-utils
  • enable the required apache modules
sudo a2enmod vhost_alias
sudo a2enmod proxy
sudo a2enmod proxy_http
sudo a2enmod proxy_wstunnel
sudo a2enmod rewrite
  • create a new site config file (e.g. mysite.conf) in /etc/apache2/site-available

  • configure it with your custom path (where you see /path/to/), here is an example:

<VirtualHost *:80>
  ServerName   localhost
  ServerAdmin  admin@mycompany.com
  DocumentRoot /path/to/data
  ErrorLog /var/log/apache2/error.log
  CustomLog /var/log/apache2/access.log combined
  <Directory "/path/to/data">
      Options Indexes FollowSymLinks
      Order allow,deny
      Allow from all
      AllowOverride None
      Require all granted
  </Directory>

  # Handle launcher forwarding
  # port and endpoint should match launcher.config
  ProxyPass /paraview http://localhost:8080/paraview

  # Handle WebSocket forwarding
  RewriteEngine On

  # This is the path the mapping file Jetty creates
  # path to proxy should match launcher.config
  RewriteMap session-to-port txt:/path/to/proxy.txt

  # This is the rewrite condition. Look for anything with a sessionId= in the query part of the URL and capture the value to use below.
  RewriteCond %{QUERY_STRING} ^sessionId=(.*)&path=(.*)$ [NC]

  # This does the rewrite using the mapping file and the sessionId
  RewriteRule ^/proxy.*$  ws://${session-to-port:%1}/%2  [P]
</VirtualHost>
  • make a symlink in site-enabled
cd /etc/apache2/site-enabled
ln -s ../site-available/mysite.conf mysite.conf
  • enable the virtual host and restart Apache
sudo a2ensite mysite.conf
sudo service apache2 restart

# Check the Apache log just to make sure
# If you get issue with Apache not properly listening,
# disable the default host
sudo a2dissite 000-default.conf

Launcher setup

In a nutshell, the server will receive requests from the client and act on it. In case of our launcher, we get a POST request that will trigger a new instance of Visualizer to be launched. To get the full detail on how the API works, visit ParaViewWeb documentation.

  • Download the Paraview binaries and extract them under your path of choice.

  • create a new file launcher.config, same as before, replace occurences of /path/to/ with your custom path. In our case, the client will be sending an extra key data which will point to the filename of a data file to be loaded by default. This extra key is treated on the launcher side by the keyword ${data}:

{
  "configuration": {
    "host" : "localhost",
    "port" : 8080,
    "endpoint": "paraview",
    "content": "/path/to/static/www",
    "proxy_file" : "/path/to/proxy.txt",
    "sessionURL" : "ws://${host}:${port}/ws",
    "timeout" : 300,
    "log_dir" : "/path/to/logs",
    "upload_dir" : "/optional/path/to/upload/dir",
    "fields" : ["file", "host", "port", "updir"]
  },
  "resources" : [ { "host" : "localhost", "port_range" : [9001, 9003] } ],
  "properties" : {
    "python_exec" : "/path/to/paraview/home/bin/pvpython",
  },
  "apps": {
    "visualizer": {
        "cmd": [
            "${python_exec}", "-dr", "/path/to/visualizer/server/pvw-visualizer.py",
            "--port", "${port}", "-f", "--authKey", "${secret}",
            "--data", "/path/to/data", "--load-file", "${data}"
        ],
        "ready_line" : "Starting factory"
    }
  }
}

Note: JSON file do not accept comments line, remove them if you added any first.

It is important that the port, host and /path/to/proxy.txt match between the server config and the launcher. Feel free to add extra-options, make sure they are sent by the web client from dist/index.html when connecting to the server:

	// grab the parameter from the URL
	function getUrlParameter(name) {
        name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
        var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
        var results = regex.exec(location.search);
        return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
    };
	
	Visualizer.connect({
	    application: 'visualizer',
	    data: getUrlParameter('data') + '.vti',
	    extra_param_1: 'extra_value_1',
	    [...]
	});

Running

  • Finally start the server
export PV_HOME=/path/to/paraview
$PV_HOME/bin/pvpython $PV_HOME/lib/python2.7/site-packages/vtk/web/launcher.py /path/to/launcher.config
  • Navigate with your web browser to host:port, it should start a new instance of Visualizer. To load data at startup, simply pass it as parameter in your query, e.g.:
http://localhost:8080/?data=my_data
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1">
<link rel="icon" type="image/png" href="favicon-32x32.png">
<title>Web Viewer</title>
</head>
<body>
<div class='content'></div>
<script src="Visualizer.js"></script>
<script>
function getUrlParameter(name) {
name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
var results = regex.exec(location.search);
return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
};
Visualizer.connect({
application: 'visualizer',
data: getUrlParameter('data') + '.vti'
});
Visualizer.autoStopServer(10);
</script>
</body>
</html>
{
"configuration": {
"host" : "localhost",
"port" : 8080,
"endpoint": "paraview",
"content": "/path/to/static/www",
"proxy_file" : "/path/to/proxy.txt",
"sessionURL" : "ws://${host}:${port}/ws",
"timeout" : 300,
"log_dir" : "/path/to/logs",
"upload_dir" : "/optional/path/to/upload/dir",
"fields" : ["file", "host", "port", "updir"]
},
"resources" : [ { "host" : "localhost", "port_range" : [9001, 9003] } ],
"properties" : {
"python_exec" : "/path/to/paraview/home/bin/pvpython",
},
"apps": {
"visualizer": {
"cmd": [
"${python_exec}", "-dr", "/path/to/visualizer/server/pvw-visualizer.py",
"--port", "${port}", "-f", "--authKey", "${secret}",
"--data", "/path/to/data", "--load-file", "${data}"
],
"ready_line" : "Starting factory"
}
}
}
# example file
# to be copied under the apache site-available
# and symlinked in apache site-enabled
<VirtualHost *:80>
ServerName localhost
ServerAdmin admin@mycompany.com
DocumentRoot /path/to/data
ErrorLog /var/log/apache2/error.log
CustomLog /var/log/apache2/access.log combined
<Directory "/path/to/data">
Options Indexes FollowSymLinks
Order allow,deny
Allow from all
AllowOverride None
Require all granted
</Directory>
# Handle launcher forwarding
# port and endpoint should match launcher.config
ProxyPass /paraview http://localhost:8080/paraview
# Handle WebSocket forwarding
RewriteEngine On
# This is the path the mapping file Jetty creates
# path to proxy should match launcher.config
RewriteMap session-to-port txt:/path/to/proxy.txt
# This is the rewrite condition. Look for anything with a sessionId= in the query part of the URL and capture the value to use below.
RewriteCond %{QUERY_STRING} ^sessionId=(.*)&path=(.*)$ [NC]
# This does the rewrite using the mapping file and the sessionId
RewriteRule ^/proxy.*$ ws://${session-to-port:%1}/%2 [P]
</VirtualHost>
@debopamg
Copy link

Hi Claude,

I followed the instructions over here with some modifications since I was having problems. Finally, I was able to configure the Apache front end with the ParaView Web launcher, and now I can view the index page of the visualizer. However, when I choose any of the sample files, they are not being rendered in the visualizer pane. The changes I made are as follows:

  1. index.html: I am using the original file which shows the Visualizer console and allows the user to select a file. The javascript functions are:
<script>
      Visualizer.connect({application: 'visualizer'});
      Visualizer.autoStopServer(10);
</script>
  1. launcher.config: Since I am using Windows, I had to make certain changes to the path. The file is as follows:
{
  "configuration": {
    "host" : "localhost",
    "port" : 9000,
    "endpoint": "paraview",
	"content": "C:/paraview/ParaView5.2.0/share/paraview-5.2/web/visualizer/www",
    "proxy_file" : "C:/paraview/ParaView5.2.0/proxy.txt",
    "sessionURL" : "ws://paraview:80/proxy?sessionId=${id}&path=ws",
    "timeout" : 300,
    "log_dir" : "C:/paraview/ParaView5.2.0/log/",
    "fields" : ["host", "port"]
  },
  "resources" : [ { 
	"host" : "localhost", 
	"port_range" : [9001, 9999] 
  } ],
  "properties" : {
    "python_exec" : "C:/paraview/ParaView5.2.0/bin/pvpython.exe",
	"visualizer": "C:/paraview/ParaView5.2.0/share/paraview-5.2/web/visualizer/server/pvw-visualizer.py",
	"data_dir": "C:/paraview/ParaView5.2.0/data"
  },
  "apps": {
    "visualizer": {
        "cmd": [
            "${python_exec}", "-dr", "${visualizer}", "--port", "${port}", "--data", "${data_dir}", "--authKey", "${secret}"
        ],
        "ready_line" : "Starting factory"
    }
  }
}

Note:

  • I had to make the session url as above, to make it work. Otherwise I was getting a when I used "sessionURL" : "ws://${host}:${port}/ws"
  • I removed the -f before the --authKey. Was not sure why the -f was there
  1. httpd-vhosts.conf: In Apache 2.4 for Windows, this is the file for configuring the virtual hosts. The contents of the file is given below:
# Virtual Hosts
#
# Required modules: mod_log_config

# If you want to maintain multiple domains/hostnames on your
# machine you can setup VirtualHost containers for them. Most configurations
# use only name-based virtual hosts so the server doesn't need to worry about
# IP addresses. This is indicated by the asterisks in the directives below.
#
# Please see the documentation at 
# <URL:http://httpd.apache.org/docs/2.4/vhosts/>
# for further details before you try to setup virtual hosts.
#
# You may use the command line option '-S' to verify your virtual host
# configuration.

<Directory C:/paraview/ParaView5.2.0>
  Require all granted
</Directory>

#
# VirtualHost example:
# Almost any Apache directive may go into a VirtualHost container.
# The first VirtualHost section is used for all requests that do not
# match a ServerName or ServerAlias in any <VirtualHost> block.
#
<VirtualHost *:80>
  DocumentRoot C:/Apache24/htdocs
  ServerName localhost
</VirtualHost>

<VirtualHost *:80>
  ServerName   paraview
  ServerAdmin  admin@paraview.com
  DocumentRoot C:/paraview/ParaView5.2.0/share/paraview-5.2/web/visualizer/www
  ErrorLog C:/paraview/ParaView5.2.0/error.log
  CustomLog  C:/paraview/ParaView5.2.0/log/apache2/access.log combined
  <Directory "C:/paraview/ParaView5.2.0">
      Options Indexes FollowSymLinks
      Order allow,deny
      Allow from all
      AllowOverride None
      Require all granted
  </Directory>

  # Handle launcher forwarding
  # port and endpoint should match launcher.config
  ProxyPass /paraview http://localhost:9000/paraview

  # Handle WebSocket forwarding
  RewriteEngine On

  # This is the path the mapping file Jetty creates
  # path to proxy should match launcher.config
  RewriteMap session-to-port txt:C:/paraview/ParaView5.2.0/proxy.txt

  # This is the rewrite condition. Look for anything with a sessionId= in the query part of the URL and capture the value to use below.
  RewriteCond %{QUERY_STRING} ^sessionId=(.*)&path=(.*)$ [NC]

  # This does the rewrite using the mapping file and the sessionId
  RewriteRule ^/proxy.*$  ws://${session-to-port:%1}/%2  [P]
</VirtualHost>

The ParaView Web server can be accessed through the url: http://paraview

With the above setup, I am able to open the visualizer page, but not able to open a file (eg: can.ex2) and render it in the Visualizer pane.

Screenshot:
screen shot 2017-01-13 at 4 29 42 pm

However, I am able to move the orientation axes. Also, there are not errors being shown the the browsers developer's console.

@clavicule
Copy link
Author

hi Debopam,

--data points to the data directory but you still need --load-file to specify which file to load.

  • If you want to always load the same file, then you can directly specify it in the command line:
 "${python_exec}", "-dr", "${visualizer}", "--port", "${port}", "--data", "${data_dir}", "--authKey", "${secret}", "--load-file", "my_file.vti"
  • If you want to specify which file to load, then it will have to be a key sent from the webbrowser:
 "${python_exec}", "-dr", "${visualizer}", "--port", "${port}", "--data", "${data_dir}", "--authKey", "${secret}", "--load-file", "{data}"

the index.html file grabs the data in the query from the URL and send it as a key:

Visualizer.connect({
        application: 'visualizer',
        data: getUrlParameter('data') + '.vti'
});

which means your have to type in your web-browser localhost:9000/?data=my_data. If you just type the URL without parameter in the query, there is no way to guess which file to actually load :)

hope it helps!

@debopamg
Copy link

Hi Claude,

I tried using the filename hard coded in the config json as well as the index.html. But I am not able to view the file in the Visualizer.
It is only showing the blank window/pane with no figure. I can move the orientation axes, but nothing is being rendered. Even when I choose a file from the Files tab, nothing is being displayed.
Please refer to this screenshot:screen shot 2017-01-16 at 3 05 42 pm

My launcher config has:

"properties" : {
    "python_exec" : "C:/paraview/ParaView5.2.0/bin/pvpython.exe",
	"visualizer": "C:/paraview/ParaView5.2.0/share/paraview-5.2/web/visualizer/server/pvw-visualizer.py",
	"data_dir": "C:/paraview/ParaView5.2.0/data"
  },
  "apps": {
    "visualizer": {
        "cmd": [
            "${python_exec}", "-dr", "${visualizer}", "--port", "${port}", "--data", "${data_dir}", "--authKey", "${secret}", "--load-file", "${data_dir}/can.ex2"
        ],
        "ready_line" : "Starting factory"
    }
  }

(You can see that the file name is hard coded)

The launcher.bat script has:

set PV_HOME=C:\paraview\ParaView5.2.0
%PV_HOME%\bin\pvpython.exe %PV_HOME%\bin\Lib\site-packages\vtk\web\launcher.py %PV_HOME%\launcher.config

However, when I launch the pvpython script directly using:

.\bin\pvpython.exe "C:\paraview\ParaView5.2.0\share\paraview-5.2\web\visualizer\server\pvw-visualizer.py" --content "C:\paraview\ParaView5.2.0\share\paraview-5.2\web\visualizer\www" --data "C:\paraview\ParaView5.2.0\data" --port 8080

I am able to view the file. Please see this screenshot:
screen shot 2017-01-16 at 3 12 20 pm

So, I am guessing I may have mixed up some configuration items because of which the display is not coming in the first case. Surprisingly, there are no error messages in the log files. Could you please suggest something.

@clavicule
Copy link
Author

Hi Debopam,

glad you were able to fix all the issues (relative path to data dir, use of backward slash \ for Windows, etc.). I am giving the link to your gist as it will certainly be useful to other people.
Link to Depobam gist

thanks!
cheers

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment