|
|
| (57 intermediate revisions by 6 users not shown) |
| Line 1: |
Line 1: |
| == Documentation ==
| | The ParaViewWeb documentation related to the latest ParaView version (5+) can be found [https://kitware.github.io/paraviewweb/ here] |
| {| border="0" align="center" width="98%" valign="top" cellspacing="7" cellpadding="2"
| |
| |-
| |
| ! width="33%"|
| |
| ! |
| |
| ! width="33%"|
| |
| ! |
| |
| ! width="33%"|
| |
| |-
| |
| |valign="top"|
| |
|
| |
|
| ===Compile/Install===
| | On top of that additional informations on the applications are available here: |
| ----
| |
| * [[ParaViewWeb requisite]]
| |
| : bbbb | |
|
| |
|
| ===Server Setup===
| | - [https://kitware.github.io/visualizer/ Visualizer] |
| ---- | | - [https://kitware.github.io/light-viz/ LightViz] |
| * aaaa
| | - [https://kitware.github.io/arctic-viewer/ ArcticViewer] |
| : bbbb
| |
|
| |
|
| ===Plugins===
| | Old documentation is still available [http://www.paraview.org/Wiki/index.php?title=ParaViewWeb&oldid=57949 here] |
| ----
| |
| * aaaa
| |
| : bbbb
| |
| | |
| |bgcolor="#CCCCCC"|
| |
| |valign="top"|
| |
| | |
| ===JavaScript===
| |
| ----
| |
| * [[ParaViewWeb-scenari] Code samples]
| |
| : This section provides some JavaScript scenari which could be used as some tutorial steps on how to use the JavaScript API
| |
| | |
| |bgcolor="#CCCCCC"|
| |
| |valign="top"|
| |
| | |
| ===Design & Implementation===
| |
| ----
| |
| * aaaa
| |
| : bbbb
| |
| | |
| | |
| ===Miscellaneous===
| |
| ----
| |
| * aaaa
| |
| : bbbb
| |
| |}
| |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| == Introduction ==
| |
| | |
| ParaView web visualization aims to provide a collaborative remote web
| |
| interface for 3D visualization with ParaView as a server.
| |
| Moreover, this also provide a JavaScript API based on the ParaView scripting
| |
| features and capabilities. Some of the web samples are fully operational
| |
| clients that allow you to create remote web visualization as well as joining
| |
| previously created ones with fully interactive user interface for building
| |
| complex data processing and visualization.
| |
| | |
| == Requirements ==
| |
| | |
| In order to build this software, you will need several external components
| |
| depending on the components that you want to generate. Moreover, you might
| |
| want generate them on a computer and deploy them on another one. Therefore,
| |
| the dependencies are given in the building or in the runtime context.
| |
| In this section we will list all the dependency with its context.
| |
| The management of those dependency will be explained in the build section.
| |
| | |
| === For Building the application ===
| |
| | |
| * Caution:
| |
| ** Do not use OpenJDK be sure to use the Sun JDK in your CMake
| |
| ** For Mac OS X user, the JDK is already installed for you by Apple, and you do not need to download or install any other JDK.
| |
| * MANDATORY - [WebServer/PWService]
| |
| ** Java JDK 1.5+ (http://java.sun.com/javase/downloads/widget/jdk6.jsp)
| |
| ** Flex SDK 3+ (http://opensource.adobe.com/wiki/display/flexsdk/Downloads)
| |
| * OPTIONAL - [WebServer/PWApp]
| |
| ** Ant 1.5+ (http://apache.siamwebhosting.com/ant/binaries/apache-ant-1.8.0-bin.zip)
| |
| ** GWT SDK 2.x (http://google-web-toolkit.googlecode.com/files/gwt-2.0.3.zip)
| |
| * OPTIONAL - [WebServer/Samples/SimpleJavaScript]
| |
| ** Nothing more than the PWService
| |
| * OPTIONAL - [WebServer/Samples/InteractiveConsole]
| |
| ** Nothing more than the PWService
| |
| * OPTIONAL - [WebServer/Samples/Sandbox]
| |
| ** Qooxdoo SDK (http://qooxdoo.org/download)
| |
| | |
| === For both and need local compilation ===
| |
| * [ParaviewAdapter] ParaView with the Python wrapping (http://paraview.org/paraview/resources/software.html)
| |
| * [ParaviewAdapter] ActiveMQ-CPP (http://activemq.apache.org/cms/download.html)
| |
| | |
| === For the runtime ===
| |
| * ActiveMQ 3.x, the JMS brocker (http://activemq.apache.org/)
| |
| * Tomcat 6.x, the Web server (http://www.proxytracker.com/apache/tomcat/tomcat-6/v6.0.26/bin/apache-tomcat-6.0.26.zip)
| |
| * [ParaviewAdapter] executable (PWServer)
| |
| * [PWService] war file with its configuration file. (PWService.war + pw-config.properties)
| |
| * [*] Any sample war file that you want to deploy.
| |
| | |
| == Building the Application ==
| |
| | |
| The project is hosted at kitware at the following URL
| |
| > http://paraview.org/ParaViewWeb.git
| |
| | |
| You will need to create a clone of this repository before proceeding with the
| |
| next instructions. To do so you can either of the following command line.
| |
| > git clone git://paraview.org/ParaViewWeb.git
| |
| > git clone http://paraview.org/ParaViewWeb.git
| |
| > git clone git@paraview.org:ParaViewWeb.git
| |
| | |
| The application is split into several components.
| |
| * ParaviewAdapter (PWServer)
| |
| ** This is C++ component that can be thought of as the ParaView server process that does the actual visualization. This is indeed an application that links against the ParaView application libraries.
| |
| * WebServer/PWService (PWService)
| |
| ** This is a web service that processes access to the scheduling/managing/monitoring ParaviewAdapter jobs as well as communicating with the Paraview Web client for creating visualizations etc. This component includes client-side javscript/java/flash components for developing web-applications using ParaView.
| |
| * WebServer/PWLauncher (PWLauncher)
| |
| ** This is a web component that allow the user to execute script on the server side with login and password informations. This application can be used to start remote pvserver on any cluster. This service has been inserted in the web page of the PWApp application.
| |
| | |
| Besides these two framework components, we have a collection of sample
| |
| applications that demonstrate the use of these components. We have
| |
| deliberately written these samples using different client-side application
| |
| technologies.
| |
| | |
| * WebServer/PWApp (PWApp)
| |
| ** a Google Web Toolkit (GWT) based visualization application that allow the user to load and process data dynamically with a nice and advanced interactive user interface.
| |
| * WebServer/Samples (PW)
| |
| ** It provides an index page of all the sample available.
| |
| * WebServer/Samples/SimpleJavaScript (PWSimple)
| |
| ** A static web page containing a standalone javascript starting two concurrent visualization session with six renderer based on several technology such as Java, JavaScript, Flash. This application can be used to validate how each renderer is behaving on your machine/browser.
| |
| * WebServer/Samples/Interactive console (PWConsole)
| |
| ** a simple jQuery-based scripting application enabling user to write javascript code to control ParaView inside a JavaScript console.
| |
| * WebServer/Samples/Sandbox (PWSandbox)
| |
| ** a Qooxdoox based sandbox application enabling user to try out the ParaView Javascript scripting capabilities to script visualization pipelines using javascript (similar to PWConsole) application.
| |
| | |
| === ParaviewAdapter (PWServer) ===
| |
| | |
| ==== Introduction ====
| |
| | |
| The ParaView adapter is a native application which rely on ParaView. Its
| |
| executable start a ParaView server and wait user interaction by listening
| |
| on a Messaging Service based on ActiveMQ. The automatic launch of this
| |
| executable is done by the WebServer/CoreService application. Therefore,
| |
| the end-user should not care about this application.
| |
| | |
| In order to configure the running process several option are given when
| |
| the application is launched. Those option are given here so sys/admin
| |
| could understand the processes that are running on their servers.
| |
| | |
| PWServer options:
| |
| | |
| --client-identifier : Option used to id the visualization session.
| |
| --base-log-dir : Deprecated (NOT USED ANYMORE)
| |
| --log-level : Logging level that you want in your log files
| |
| [DEBUG, INFO, WARNING, ERROR, CRITICAL]
| |
| --batch-file : Python script that should be executed inside
| |
| the pwhelper.py context
| |
| | |
| ==== Prerequisites ====
| |
| | |
| ===== ActiveMQ-CPP =====
| |
| | |
| ActiveMQ-CPP is needed for the compilation and the execution of the
| |
| application. Therefore, you will need to download the source files at
| |
| the following url http://activemq.apache.org/cms/download.html.
| |
| Then you will need to build that library. The command line given below
| |
| are for Unix systems.
| |
| | |
| > ./configure
| |
| > make
| |
| > sudo make install
| |
| | |
| Make sure that you have all the dependency needed to build this library.
| |
| Here are the required package for Debian/Ubuntu:
| |
| | |
| apt-get install build-essential libaprutil1-dev libapreq2-dev apache2-utils python-dev cmake-curses-gui uuid-dev libapr1 libapreq2-dev
| |
| | |
| ===== ParaView =====
| |
| | |
| ParaView is needed for the compilation and the execution of the
| |
| application. Therefore, you will need to download the source files at
| |
| the following url http://paraview.org/paraview/resources/software.html.
| |
| You should use the latest CVS ParaView version for now.
| |
| Then you will need to build it with the Python wrapping.
| |
| Qt is not mandatory to compile this ParaView. The command line given
| |
| below are for Unix systems.
| |
| | |
| > mkdir build-paraview
| |
| > cd build-paraview
| |
| > ccmake ../Paraview3 <---- Fix ParaView source path
| |
| | |
| BUILD_SHARED_LIBS ON
| |
| PARAVIEW_ENABLE_PYTHON ON
| |
| PARAVIEW_BUILD_QT_GUI OFF <---- Optional
| |
| CMAKE_BUILD_TYPE Debug <---- Up to you
| |
| CMAKE_INSTALL_PREFIX ../somewhere/...
| |
| | |
| > make
| |
| > make install <---- Optional: We are going to use the build directory
| |
| | |
| ==== Configuration and building ====
| |
| | |
| The ParaView adapter will used the compiled version of ParaView with the
| |
| python capability as well as the ActiveMQ-CPP library. The command line
| |
| given below are for Unix systems and paths are given as example.
| |
| | |
| > mkdir build-pw install-pw
| |
| > cd build-pw
| |
| > ccmake ../SOURCE_DIR
| |
| | |
| ACTIVEMQ_CPP /usr/local/lib/libactivemq-cpp.so
| |
| ACTIVEMQ_INCLUDE_DIR /usr/local/include/activemq-cpp-3.1.0/
| |
| BUILD_PW_SERVER ON
| |
| BUILD_TESTING ON
| |
| BUILD_WEB_SERVICE OFF <---- We are focusing on PWServer
| |
| CMAKE_BUILD_TYPE Debug
| |
| CMAKE_INSTALL_PREFIX ../install-pw
| |
| ParaView_DIR ../build-paraview
| |
| | |
| > make
| |
| > make test
| |
| > make install
| |
| | |
| === Paraview WebService (PWService) ===
| |
| | |
| ==== Introduction ====
| |
| | |
| The goal of this component is to provide an access point for remote
| |
| visualisation such as Web visualisation. Moreover, some administration
| |
| web pages are given to monitor and administrate the running processes.
| |
| The administration pages are protected by a login and a password. This
| |
| authentication login/password can be changed in the configuration file
| |
| of the application. The default values are :
| |
| | |
| login : admin
| |
| password : admin
| |
| | |
| Moreover, the PWService is a Web application that can run on any
| |
| computer without rebuilding it. Therefore, a binary package can be used
| |
| for the distribution regardless the targeted platform.
| |
| | |
| ==== Prerequisites ====
| |
| | |
| ===== Flex SDK 3 or above =====
| |
| | |
| Flex is a web framework developped by Adobe that is used in our
| |
| application for the component that is responsible to show the rendering
| |
| window. In order to compile our component, you will need to download
| |
| the SDK here http://opensource.adobe.com/wiki/display/flexsdk/Downloads.
| |
| | |
| ===== Java 1.6 =====
| |
| | |
| Java will be used as a compiler and a runtime. In order to use it you
| |
| will need to download it at the following url
| |
| http://java.sun.com/javase/downloads/widget/jdk6.jsp
| |
| | |
| ===== Tomcat 6 for the runtime =====
| |
| | |
| Tomcat is a web server used to run Java web application, therefore it
| |
| will only be needed for the deployment and the runtime. You can download
| |
| the application at the following url http://www.proxytracker.com/apache/tomcat/tomcat-6/v6.0.26/bin/apache-tomcat-6.0.26.zip
| |
| | |
| ==== Configuration and building ====
| |
| | |
| The PWService do not require any sample to work, therefore we will
| |
| focusing on building only the core service with all the settings that
| |
| are mandatory. The command line given below are for Unix systems and
| |
| paths are given as example.
| |
| | |
| > mkdir build-pw install-pw <---- Optional if you've done
| |
| > cd build-pw <---- it for ParaviewAdapter
| |
| > ccmake ../pw
| |
| | |
| BUILD_WEB_SERVICE ON
| |
| BUILD_WEB_APPLICATION OFF
| |
| BUILD_WEB_SAMPLES OFF
| |
| JAVA_ARCHIVE /opt/jdk1.6.0_18/bin/jar
| |
| JAVA_RUNTIME /opt/jdk1.6.0_18/bin/java
| |
| JAVA_COMPILE /opt/jdk1.6.0_18/bin/javac
| |
| CORE_CTX_ROOT PWService
| |
| CORE_SERVICE_URL http://localhost:8080/PWService <---- Use the deployment address otherwise the sample wont work
| |
| FLEX_HOME /opt/flex-sdk/
| |
| LOGGING_LEVEL ERROR
| |
| LOG_PARAVIEW OFF
| |
| LOG_PARAWEB ON
| |
| PV_ADAPTER_EXEC ../install-pw/bin/PWServer
| |
| WEB_DEPLOY OFF
| |
| WORKING_DIR ../PW-work/
| |
| | |
| > make
| |
| > make install
| |
| | |
| ==== Deployment ====
| |
| | |
| The PWService as a Java Web application requires a framework to run,
| |
| you will need to deploy the compiled application into that framework.
| |
| To do so, you can do it automatically with CMake or with the following
| |
| procedure. The CMake procedure can only work if the deployement is done
| |
| on the same computer. More details are given after the general case.
| |
| | |
| General case procedure:
| |
| | |
| * Install tomcat by unzipping it in a directory.
| |
| * Copy the file install-pw/Web-apps/PWService.war into the TOMCAT_ROOT/webapps directory.
| |
| * Copy the file install-pw/Web-apps/pw-config.properties into the TOMCAT_ROOT/lib directory.
| |
| * Eventually edit the TOMCAT_ROOT/lib/pw-config.properties to fix path and settings.
| |
| * You are done ! The application is ready to work and the URL will be http://localhost:8080/PWService
| |
| | |
| To start tomcat:
| |
| > cd TOMCAT_ROOT/bin
| |
| > ./catalina.sh start
| |
| | |
| To stop tomcat:
| |
| > cd TOMCAT_ROOT/bin
| |
| > ./catalina.sh stop
| |
| | |
| CMake automatic deploy:
| |
| | |
| For automatic deployment with CMake, you will have to set the
| |
| following properties in order to use the "make deploy" command.
| |
| | |
| WEB_DEPLOY ON
| |
| TOMCAT_HOME /opt/apache-tomcat-6.0.24
| |
| | |
| Once is done you can simply do:
| |
| > make deploy
| |
| | |
| === Interactive Console Sample (PWConsole) ===
| |
| | |
| ==== Introduction ====
| |
| | |
| The goal of this component is to provide a web sample code using
| |
| javascript to build complex remote visualization.
| |
| This application provides to the user two render windows with a command
| |
| line console that can be used to make JavaScript calls. A sample scenario
| |
| and command lines are given on the root web pages.
| |
| | |
| ==== Prerequisites ====
| |
| | |
| This application needs the PWService with all its dependency.
| |
| | |
| ==== Configuration and building ====
| |
| | |
| The command line given below are for Unix systems and paths are given as examples.
| |
| | |
| > mkdir build-pw install-pw <---- Optional if you've done
| |
| > cd build-pw <---- it previously
| |
| > ccmake ../SOURCE_DIR
| |
| | |
| BUILD_WEB_SAMPLES ON
| |
| BUILD_CONSOLE_SAMPLE ON
| |
| | |
| > make
| |
| > make install
| |
| | |
| ==== Deployment ====
| |
| | |
| Read the 3.2.4 deployment part.
| |
| With the CMake deploy target everything will be done automatically,
| |
| otherwise you have to copy the file PWConsole.war into the
| |
| TOMCAT_ROOT/webapps directory.
| |
| | |
| === Paraview Web Application (PWApp) ===
| |
| | |
| ==== Introduction ====
| |
| | |
| The goal of this component is to provide a web application code using
| |
| javascript to build complex remote visualization.
| |
| This application provides to the user several opportunities:
| |
| * Create a new visualization session and do some processing on the loaded data in a graphical manner an interactivity.
| |
| * Join a previously created session and watch the result dynamically.
| |
| | |
| ==== Prerequisites ====
| |
| | |
| This application needs the PWService with all its dependency as well
| |
| as the GWT SDK. To install the GWT sdk, you will need to download it
| |
| here http://google-web-toolkit.googlecode.com/files/gwt-2.0.3.zip
| |
| and unzip it.
| |
| Moreover, as GWT generate a ant based project, ant will be needed as
| |
| well. To install apache-ant just download it here
| |
| http://apache.siamwebhosting.com/ant/binaries/apache-ant-1.8.0-bin.zip
| |
| and unzip it.
| |
| | |
| ==== Configuration and building ====
| |
| | |
| The command line given below are for Unix systems and paths are given as examples.
| |
| | |
| > mkdir build-pw install-pw <---- Optional if you've done
| |
| > cd build-pw <---- it previously
| |
| > ccmake ../SOURCE_DIR
| |
| | |
| BUILD_WEB_APPLICATION ON
| |
| ANT_EXECUTABLE /opt/apache-ant-1.8.0/bin/ant
| |
| GWT_SDK_HOME /opt/gwt-2.0.3/
| |
| | |
| > make
| |
| > make install
| |
| | |
| ==== Deployment ====
| |
| | |
| Read the 3.2.4 deployment part.
| |
| With the CMake deploy target everything will be done automatically,
| |
| otherwise you have to copy the file PWApp.war into the
| |
| TOMCAT_ROOT/webapps directory.
| |
| | |
| === Sandbox Sample (PWSandbox) ===
| |
| | |
| ==== Introduction ====
| |
| | |
| PWSandbox is sandbox for trying out the JavaScript API for
| |
| scripting visualization pipelines for ParaView. The applications
| |
| includes a bunch of sample scripts for creating filters/ sources,
| |
| changing parameters on them, getting information about the data etc.
| |
| The user can try these examples out or create his own scripts in the
| |
| Editor provided.
| |
| | |
| ==== Prerequisites ====
| |
| | |
| This applications needs the PWService with all its dependency as well
| |
| as Qooxdoo (http://qooxdoo.org/). To install Qooxdoo, simply download
| |
| the zip file for version 1.0.1 (or greater) and unzip the archive.
| |
| | |
| ==== Configuration and building ====
| |
| | |
| The following CMake variables must be set for this application to be built:
| |
| | |
| BUILD_WEB_SAMPLES ON
| |
| BUILD_SANDBOX_SAMPLE ON
| |
| QOOXDOO_SDK_PATH /opt/qooxdoo-1.0.1-sdk
| |
| | |
| ==== Deployment ====
| |
| | |
| Read the 3.2.4 deployment part.
| |
| With the CMake deploy target everything will be done automatically,
| |
| otherwise you have to copy the file PWSandbox.war into the
| |
| TOMCAT_ROOT/webapps directory.
| |
| | |
| ==== Usage ====
| |
|
| |
| To use the sandbox, browse to the following URL:
| |
| http://<hostname>/PWSandbox
| |
| | |
| Select one of the sample scripts from the "Samples" drop-down and the
| |
| click "Run", this will try to run the sample script.
| |
| | |
| You can edit the script in the "Source Code" widget. After making any
| |
| changes, or changing the Sample script, you need to click "Run" for the
| |
| changes to be applied.
| |
| | |
| == Deployment ==
| |
| | |
| === Prerequisites ===
| |
| | |
| The following software or files should be available on the computer that
| |
| will execute the application
| |
| | |
| * Applications:
| |
| ** Java : JDK 1.6 from sun and NOT the OpenJDK
| |
| ** ActiveMQ : Binary package
| |
| ** Tomcat 6 : Binary package
| |
| | |
| * Builded components:
| |
| ** PWServer : Builded executable with its dependency library. (ParaView, ActiveMQ-CPP, Python)
| |
| ** PWService.war : Web Service for remote visualization
| |
| ** pw-config.properties : Configuration file for the PWService
| |
| | |
| * Optional builded components:
| |
| ** PWApp.war : Complex Web application
| |
| ** PWConsole.war : Javascript command line console sample
| |
| ** PWSandbox.war : Sandbox sample application
| |
| ** PWSimple.war : Simple static Javascript code starting 2 concurrent visualization session with 6 renderer.
| |
| ** Sample Data : Some sample data are provided and used in the PWApp application. To allow the application to find them, you will need to copy the data directory from the source to the WORKING_DIR in order to get a file path like the following one. Beaware of the case ! > WORKING_DIR/data/cow.vtp
| |
| | |
| Tomcat need to be pre-configured in order to run the web components
| |
| properly. To do so, just copy the war file that you want to run into the
| |
| webapps directory of your tomcat.
| |
| Add a configured version of the pw-config.properties into the "lib"
| |
| directory of your tomcat.
| |
| | |
| === Starting the application ===
| |
| | |
| * If an OpenJDK is installed on the computer, you will need to set the JAVA_HOME system property before launching tomcat and the JMS brocker.
| |
| The following command line illustrate how to do it on linux:
| |
| > export JAVA_HOME=/opt/jdk1.6.0_18
| |
| | |
| * Start the JMS brocker
| |
| > cd apache-activemq-5.3.0/bin/
| |
| > ./activemq
| |
| * Start tomcat
| |
| > cd apache-tomcat-6.0.24/bin
| |
| > ./startup.sh
| |
| | |
| To quit the applications
| |
| > CTR-C in the terminal that start the activemq message broker
| |
| > cd apache-tomcat-6.0.24/bin
| |
| > ./shutdown.sh
| |
| | |
| === How to try it ! ===
| |
| | |
| * Make sure that ActiveMQ and Tomcat are running.
| |
| * Go with your browser to the PWService home page.
| |
| ** http://localhost:8080/PWService
| |
| * Try to login (admin/admin)
| |
| * Go to a sample web page
| |
| ** http://localhost:8080/PW
| |
| ** or http://localhost:8080/PWApp
| |
| ** or http://localhost:8080/PWConsole
| |
| ** or http://localhost:8080/PWSandbox
| |
| ** or http://localhost:8080/PWSimple
| |
| | |
| | |
| == URLs ==
| |
| | |
| Home page that show all available samples
| |
| * [WebServer/Samples] : http://localhost:8080/PW
| |
| | |
| All web applications and services
| |
| * [WebServer/PWService] : http://localhost:8080/PWService (Authentication: admin/admin)
| |
| * [WebServer/PWApp] : http://localhost:8080/PWApp
| |
| * [WebServer/Samples/InteractiveConsole]: http://localhost:8080/PWConsole
| |
| * [WebServer/Samples/Sandbox] : http://localhost:8080/PWSandbox
| |
| * [WebServer/Samples/SimpleJavaScript] : http://localhost:8080/PWSimple
| |
| | |
| == Developer manual ==
| |
| | |
| === 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/json2.js"></script>
| |
| <script type="text/javascript" src="http://localhost:8080/PWService/js/jsonrpc/jsonrpc.min.js"></script>
| |
| <script type="text/javascript" src="http://localhost:8080/PWService/js/paraview.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">
| |
| <div id='renderer-container-id'>
| |
| <!-- The renderer will be inserted here -->
| |
| </div>
| |
| </source>
| |
| Or inserting the renderer inside a table like in the following html.
| |
| <source lang="html4strict">
| |
| <table width='100%'>
| |
| <tr>
| |
| <td>Viewport title</td>
| |
| </tr>
| |
| <tr>
| |
| <td id='renderer-container-id'>
| |
| <!-- The renderer will be inserted here -->
| |
| </td>
| |
| </tr>
| |
| </table>
| |
| </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>
| |
| | |
| === Set of JavaScript scenari ===
| |
| | |
| ==== Creating a pipeline ====
| |
| <source lang="javascript">
| |
| /* Let’s start by creating a Cone object: */
| |
| var cone = paraview.Cone();
| |
| | |
| /* To get a full list of properties. just call the ListProperties method on the object */
| |
| alert("Properties list: " + cone.ListProperties());
| |
| | |
| /* Let's show the resolution property */
| |
| alert("Cone resolution: " + cone.getResolution());
| |
| | |
| /* You can increase the resolution as shown below. */
| |
| cone.setResolution(32);
| |
| | |
| /* Alternatively, we could have specified a value for resolution when creating the object. */
| |
| var cone2 = paraview.Cone( { Resolution:64 });
| |
| alert("Cone2 resolution: " + cone2.getResolution());
| |
| | |
| /* You can assign values to any number of properties during construction using keyword arguments. Let’s also change the center. */
| |
| alert("Cone center: " + cone.getCenter());
| |
| | |
| /* To asign an array value you can either do that */
| |
| cone.setCenter([1, 2, 3]);
| |
| /* or do that */
| |
| cone2.setCenter(4, 5, 6);
| |
| | |
| /* Next, let’s apply a shrink filter to the cone: */
| |
| var shrinkFilter = paraview.Shrink( {Input:cone} );
| |
| | |
| /* At this point, if you are interested in getting some information about the output of the shrink filter, you can force it to update (which will also cause the execution
| |
| of the cone source). For details about VTK's demand-driven pipeline model used by ParaView, see one of the VTK books. */
| |
| var dataInformation = paraview.GetDataInformation({proxy:shrinkFilter});
| |
| alert("Number of cells: " + dataInformation.NbCells);
| |
| alert("Number of points: " + dataInformation.NbPoints);
| |
| alert("Bounds: " + dataInformation.Bounds);
| |
| alert("Extent: " + dataInformation.Extent);
| |
| alert("Memory: " + dataInformation.Memory);
| |
| alert("Type: " + dataInformation.Type);
| |
| | |
| /* We can pre-create a view with nice settings */
| |
| /* var activeView = paraview.CreateIfNeededRenderView(); */
| |
| | |
| /* Let's do the rendering */
| |
| paraview.Show( {proxy:shrinkFilter} );
| |
| | |
| /* in order to center object and rotation around this object */
| |
| paraview.ResetCamera();
| |
| var activeView = paraview.CreateIfNeededRenderView();
| |
| activeView.setCenterOfRotation(activeView.getCameraFocalPoint());
| |
| </source>
| |
| | |
| ==== Representations and Views ====
| |
| <source lang="javascript">
| |
| /* Create a simple pipeline */
| |
| var sph = paraview.Sphere();
| |
| var elev = paraview.Elevation( {Input:sph} );
| |
| | |
| paraview.Show({proxy:elev});
| |
| paraview.Render();
| |
| | |
| /* Set the representation type of elev */
| |
| var activeView = paraview.CreateIfNeededRenderView();
| |
| | |
| /* Outline : 3
| |
| Wireframe : 1
| |
| Surface : 2
| |
| Surface with edge: 5
| |
| Points : 0
| |
| */
| |
| paraview.SetDisplayProperties( {
| |
| proxy : elev ,
| |
| view : activeView,
| |
| Representation : 1
| |
| } );
| |
| | |
| /* Let’s get some information about the output of the elevation filter. We want to color the representation by one of it’s
| |
| arrays. Second array = Elevation. Interesting. Let’s use this one.*/
| |
| var ai = paraview.GetDataInformation({proxy:elev}).PointData.Arrays[1];
| |
| alert("Data array name: " + ai.Name);
| |
| | |
| /* What is its range? */
| |
| alert("Data array range: " + ai.Ranges);
| |
| | |
| /* To color the representation by an array, we just need to do */
| |
| var activeView = paraview.CreateIfNeededRenderView();
| |
| paraview.ColorBy({proxy:elev, view:activeView, arrayName:'Elevation', attribute:'Point'});
| |
| paraview.Render();
| |
| </source>
| |
| | |
| ==== Loading file and time management ====
| |
| | |
| <source lang="javascript">
| |
| /* DO NOT FORGET to update the file path. It is a VTK sample data file */
| |
| var reader = paraview.OpenDataFile({filename:".../can.ex2"});
| |
| var activeView = paraview.CreateIfNeededRenderView();
| |
| paraview.Show();
| |
| | |
| var timeValues = reader.getTimestepValues();
| |
| alert("Time values: " + timeValues[0] + " ... " + timeValues[timeValues.length-1] + " (size: "+ timeValues.length + ")" );
| |
| | |
| /* Let’s be fancy and use a time annotation filter. This will show the
| |
| current time value of the reader as text in the corner of the view.*/
| |
| var annTime = paraview.AnnotateTimeFilter({Input:reader});
| |
| paraview.Show({proxy:annTime});
| |
| | |
| activeView.setViewTime(timeValues[timeValues.length - 1]);
| |
| time = activeView.getViewTime();
| |
| alert("New view time: " + time);
| |
| | |
| paraview.ResetCamera();
| |
| var activeView = paraview.CreateIfNeededRenderView();
| |
| activeView.setCenterOfRotation(activeView.getCameraFocalPoint());
| |
| </source>
| |
| | |
| === 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", paraview);
| |
| // To show text informations in the renderer window
| |
| renderer.showInfo(true);
| |
| // or to hide those text informations
| |
| renderer.showInfo(false);
| |
| </source>
| |
