[Paraview] ParaviewWeb : Adding interactive slice filter to pipeline

Tue May 3 17:11:59 EDT 2011

Hi Sebastien
   So I did make progress and am able to correctly show 
an interactive slice filter on a volume using all the advice you gave. 
Thank you for that. I'm attaching a screenshot and the only thing that's
 missing is the coloring by a lookup table. As you can see currently the
 lookup table has no effect. When I try to set the DisplayProperties of 
the slice proxy to specify the 'ColorArrayName', the browser complains 
:  "Error: uncaught exception: Could not locate array ImageFile in the 
input.". I'm not sure why it cannot find the array. The look up table is
 correct since I'm using it for doing volume rendering of the same 
dataset in a different piece of code.

So I commented the 'ColorArrayName' option out in the code for now.  The code looks is as shown below :

// Set the web service base URL

 var serverUrl = 
"<%=request.getScheme()%>://<%=request.getServerName()%>:<%=request.getServerPort()%>/PWService";
    //
    // Create a paraview proxy
    //
    var pv = new Paraview(serverUrl);
    pv.createSession("Test ParaviewWeb", "Just testing", "default");

    // Create pipeline
    var f = 'test.vtk';
    var reader1 = pv.OpenDataFile({filename : f});

    var dataInfo = pv.GetDataInformation({proxy : reader1});

    var view1 = pv.CreateIfNeededRenderView();

    pv.Show({proxy : reader1});

    // set origin in the middle of dataset
    pv.ResetCamera();
    //var activeView =
 pv.CreateIfNeededRenderView();
    view1.setCenterOfRotation(view1.getCameraFocalPoint());

    // instantiate a slice filter object
    var slice = pv.Slice({Input : reader1, SliceType : 'Plane'});
    var sliceType = slice.getSliceType();

    var sliceWidget = pv.CreateBindedWidget({proxy : sliceType, view : view1});
    sliceWidget.setPlaceWidget(dataInfo.Bounds);
    sliceWidget.setEnabled(1);
    sliceWidget.setVisibility(1);
    sliceWidget.setNormal(0,0,1);
    sliceWidget.setOrigin(view1.getCenterOfRotation());

 var lut1 = pv.GetLookupTableForArray({arrayname : 'ImageFile', 
num_components : 1, HSVWrap : 0, NanColor : [0.0, 0.66666666666666663, 
0.0], RGBPoints : [1.0, 0.0, 0.0, 0.0, 16564.27904630101, 1.0, 
0.035950255588616767, 0.0,
 19924.923666800998, 1.0, 0.035950255588616767, 0.0, 39728.909301543368,
 0.0, 0.66666666666666663, 0.0, 65294.000000000007, 0.0, 0.0, 0.0], 
ColorSpace : 'HSV'});

    // Set display properties for the slice proxy
    pv.SetDisplayProperties( {
        proxy : slice,
        view  : view1,
        Representation : 'Surface',
//        ColorArrayName : 'ImageFile',
        LookupTable : lut1
    } );

    pv.Hide({proxy : reader1});
    var dataRep1 = pv.Show({proxy : slice});
    pv.Render();

    // Create and bind renderer
    var renderer = new JavaScriptRenderer("rendererName", serverUrl);

 renderer.init(pv.sessionId, view1.__selfid__);
    renderer.setSize('720','480');
    renderer.bindToElementId("renderer-container-id");
    renderer.start();

--- On Tue, 3/5/11, Sebastien Jourdain <sebastien.jourdain at kitware.com> wrote:

From: Sebastien Jourdain <sebastien.jourdain at kitware.com>
Subject: Re: [Paraview] ParaviewWeb : Adding interactive slice filter to pipeline
To: "Rajvikram Singh" <rajvikrams at yahoo.com>
Cc: paraview at paraview.org
Date: Tuesday, 3 May, 2011, 6:42 PM

Hi Raj,
Normally there shouldn't be any difference except maybe for the representation part that should be 'Surface' and not 'Volume'. But the best thing to do is probably post your code here so I can see it so I can figure out what might be wrong.

Seb

On Mon, May 2, 2011 at 7:52 PM, Rajvikram Singh <rajvikrams at yahoo.com> wrote:

Thanks Sebastien. I must have been very close because that's practically what I tried too. I just copy pasted your code into a file and it works great. I just had to change the normal to (1,0,0) but I can see the interactive slice widget and that makes me very happy :)

But then I tried to replace the source with a test volume file read by OpenDataFile() and though I can see the outline of the data, the Slice widget does not show any more. 

Do I need to do something different for volume data ?

--- On Tue, 3/5/11, Sebastien Jourdain <sebastien.jourdain at kitware.com> wrote:

From: Sebastien Jourdain <sebastien.jourdain at kitware.com>
Subject: Re: [Paraview] ParaviewWeb : Adding interactive slice
 filter to pipeline
To: "Rajvikram Singh" <rajvikrams at yahoo.com>
Cc: paraview at paraview.org

Date: Tuesday, 3 May, 2011, 4:02 AM

Hi Raj,
Python trace provide mostly a state of your action which already give you some hints on the properties involved and the values that you need.
Although, I agree that it doesn't do the whole work for you, but it's definitely a good start. If you are really expecting to have an API for the proxies you can give a look at the following pages that list all the filters available with their properties. But once again, you should write your code in an interactive manner inside the JavaScript console in order to validate each peace of it.

http://www.paraview.org/Wiki/ParaView/Users_Guide/Sourceshttp://www.paraview.org/Wiki/ParaView/Users_Guide/List_of_filters

After that I agree that developing your own application on top of ParaView do require some skills on the ParaView framework itself.
Regarding the PlaceWidget() question, this is based on VTK (as ParaView rely on VTK). It allow the widget to stick to a given location based on bounds that are used to draw the bounding box with the plane inside it.

Seb
PS: I've paste a simple code that do what you want I believe.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>    <head>        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="/PWService/js/ParaViewWeb.js" type="text/javascript"></script>

        <title>Load state and show all views</title>    </head>    <body onUnload="pv.disconnect();">        <div id="page">

        </div>
        <script type="text/javascript">            // Set the web service base URL            var serverUrl = "/PWService";

            // Create a paraview proxy            var pv = new Paraview(serverUrl);            pv.createSession("PropertyBind-widget", "testing-webapp");

	    log = pv.getPlugin("log");
	    // Create pipeline
	    var wavelet = pv.Wavelet();	    var dataInfo = pv.GetDataInformation({proxy:wavelet});
	    var view1 = pv.CreateIfNeededRenderView();	    pv.Render();

	    var sliceFilter = pv.Slice({Input : wavelet});	    var plan = sliceFilter.getSliceType();
            plan.setNormal(0,0,1);	    plan.setOrigin(0,0,0);
	    var sr = pv.CreateBindedWidget({proxy : plan, view : view1});

	    sr.setPlaceWidget(dataInfo.Bounds);
	    sr.setEnabled(1);
	    sr.setVisibility(1);	    	    var dataRep1 = pv.Show({proxy : sliceFilter});

	    	    // ---- For JavaScript ----            var rendererJs1 = new JavaScriptRenderer("jsRenderer-1", serverUrl);

            rendererJs1.init(pv.sessionId, view1.__selfid__);            rendererJs1.setSize('500','500');            rendererJs1.bindToElementId("page");            rendererJs1.start();

	    pv.ResetCamera();

        </script>    </body></html>

On Mon, May 2, 2011 at 6:16 PM, Rajvikram Singh <rajvikrams at yahoo.com> wrote:

Hi Sebastien
   Thanks once again for the prompt response. I realize I should not make assumptions about properties but the whole Javascript model makes it difficult to debug. This is my first Javascript experience and I'm guessing that is my biggest problem :)

Also there is an inherent problem with the Python trace in Paraview. In theory it sounds wonderful but when I use it from the UI, it seems to miss some important information which makes it feel
 like it cannot be trusted.  As a simple example, if I create a cone source and apply the slice filter to it and click the "Show Widget" check box on and off, the python trace I get is as follows  : 

try: paraview.simple
except: from paraview.simple import *
paraview.simple._DisableFirstRenderCameraReset()

Cone2 = Cone()

RenderView1 = GetRenderView()
DataRepresentation5 = Show()
DataRepresentation5.EdgeColor = [0.0, 0.0, 0.50000762951094835]

Slice3 = Slice( SliceType="Plane" )

RenderView1.CameraPosition = [-0.86626337943852127, -2.9008214092444833, 1.047837071997098]

RenderView1.CameraClippingRange = [1.7197276063743807, 5.0792474812948285]

Slice3.SliceOffsetValues = [0.0]
Slice3.SliceType = "Plane"

DataRepresentation6 = Show()
DataRepresentation6.EdgeColor = [0.0, 0.0, 0.50000762951094835]

RenderView1.CameraViewUp = [-0.05160914336948845, 0.35123709085212862, 0.93486309282718028]

RenderView1.CameraPosition = [0.96899222199550616, -2.8404682287153862, 1.1206845835066597]
RenderView1.CameraClippingRange = [1.3773762963261489, 5.5101972459535187]

DataRepresentation5.Visibility = 0

RenderView1.CameraClippingRange = [1.3258836594339682, 5.702986199114493]

Slice3.SliceType.Origin = [-0.36490894792831258, 0.0, 0.0]

Render()

Notice there is no record of the 'Show Widget' or 'Hide Widget' property being set.

Also translating this to Javascript shows a slice of a cone .. but there is no interaction plane to adjust the slicing .. like in Paraview. I guess this is where we are supposed to look at the source code to figure out what's missing .. which takes a lot of trial and error without documentation. I some cases I can't tell what the property is supposed to actually do.

I've been looking at the ParaviewWeb.js file for a while and it provides useful hints but no definite answers. For e.g I noticed from the file that I need to set the PlaceWidget property for the slice filter but I don't really know what it's supposed to do. When I set it, on one of my data sets I saw the interactive widget .. and then on another it disappeared. Very confusing.

Raj

--- On Tue, 3/5/11, Sebastien Jourdain
 <sebastien.jourdain at kitware.com> wrote:

From: Sebastien Jourdain <sebastien.jourdain at kitware.com>
Subject: Re: [Paraview] ParaviewWeb : Adding interactive slice filter to pipeline

To: "Rajvikram Singh" <rajvikrams at yahoo.com>
Cc: paraview at paraview.org

Date: Tuesday, 3 May, 2011, 1:29 AM

Hi Raj,
Another thing. You should do that to set origin and normal.
var plan = sliceFilter.getSliceType();plan.setOrigin(0,0,0);
plan.setNormal(1,0,0);

in fact the methods SetSliceOrigin/Normal are helper methods on python objects and not properties. You can notice it because of the capital S in the set. This must come from the python trace. If it was a property in python it would have been written:

sliceFilter.SliceNormal = [1,0,0];
Hope this help you to understand how it is working underneath and how to easily convert Python generated code into similar JavaScript one.

Seb

On Mon, May 2, 2011 at 8:59 AM, Sebastien Jourdain <sebastien.jourdain at kitware.com> wrote:

Hi Raj,
You are not getting the propers bounds when you directly access them like that:

> reader.Bounds

In fact, if you validate each line that you wrote inside the JavaScript console of your browser, you could have seen that Bounds was not part of the reader proxy. Moreover, it goes against the idea that Proxy do not have methods/fields but only properties that can be set/get based on their name. So eventually, it could have been reader.getBounds(). Although, bounds is not a property of the reader.

In order to get the right informations, you do need to do call a method on ParaView:
> var dataInfo = pv.GetDataInformation({proxy:reader});
The returned value is not a proxy, it's just a data structure with all the data informations of the given proxy. (Fields name, Time, scalar range, bounds, memory consumption on the server...)

Then you can do :> sr.setPlaceWidget(dataInfo.Bounds);
I do believe that you  look at the file ParaWebFunctions.js inside the PWApp to get that close. If not, it could provide you some help on how to handle some common actions.

Thanks,
Seb
On Fri, Apr 29, 2011 at 7:25 PM, Rajvikram Singh <rajvikrams at yahoo.com> wrote:

Hi
   I am trying to add a simple slice filter to a ParaviewWeb client that users could use interact with a volume. The bundled PWApp application does this already and so I tried to go through the code and looked at some Python examples. I was able to get an interactive widget to render but it shows a blank slice. Also the bounds are not correct since the volume is 'flat' and what I see is a cube. 

Here's the code I'm using :

var reader = pv.OpenDataFile({filename : "test.vtk"});    
    var view1 = pv.CreateIfNeededRenderView();
    pv.Render();

    var sliceFilter = pv.Slice({Input : reader});
    sliceFilter.SetSliceNormal = [0,0,1]; // sliec along Z

 sliceFilter.SetSliceOrigin = [0,0,0];
    sliceFilter.SetSliceType = 'Plane';
//    sliceFilter.SetInputBounds = pv.GetDataInformation.Bounds;

    var sr = pv.CreateBindedWidget({proxy : sliceFilter.getSliceType(), view : view1});

    sr.setPlaceWidget(reader.Bounds);
    sr.setEnabled(1);
    sr.setVisibility(1);

    var dataRep1 = pv.Show({proxy : sliceFilter});

    pv.SetDisplayProperties( {
    proxy : sliceFilter,

    view  : view1,
    Representation : 'Surface',
    } );

I'm attaching a screenshot of what's rendered in my browser. I'm obviously not setting some property correctly .. I just can't tell which one.

Thanks in advance
Raj

_______________________________________________

Powered by www.kitware.com

Visit other Kitware open-source projects at http://www.kitware.com/opensource/opensource.html

Please keep messages on-topic and check the ParaView Wiki at: http://paraview.org/Wiki/ParaView

Follow this link to subscribe/unsubscribe:

http://www.paraview.org/mailman/listinfo/paraview

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://www.paraview.org/pipermail/paraview/attachments/20110503/c399e74b/attachment-0001.htm>
-------------- next part --------------
A non-text attachment was scrubbed...
Name: Screenshot-1.png
Type: image/png
Size: 42850 bytes
Desc: not available
URL: <http://www.paraview.org/pipermail/paraview/attachments/20110503/c399e74b/attachment-0001.png>