[Paraview] ParaviewWeb : Adding interactive slice filter to pipeline

Sebastien Jourdain sebastien.jourdain at kitware.com
Tue May 3 17:26:19 EDT 2011


Hi Raj,

do you have a server instance where I can interactively interact with your
use case ?
If so, can you send me the url so I can give a try to set the color mapping
correctly.
(You can do it in private and I will post the solution on the mailing list).

Thanks,

Seb

On Tue, May 3, 2011 at 5:11 PM, Rajvikram Singh <rajvikrams at yahoo.com>wrote:

> 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<http://mc/compose?to=rajvikrams@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<http://mc/compose?to=sebastien.jourdain@kitware.com>
> >* wrote:
>
>
> From: Sebastien Jourdain <sebastien.jourdain at kitware.com<http://mc/compose?to=sebastien.jourdain@kitware.com>
> >
> Subject: Re: [Paraview] ParaviewWeb : Adding interactive slice filter to
> pipeline
> To: "Rajvikram Singh" <rajvikrams at yahoo.com<http://mc/compose?to=rajvikrams@yahoo.com>
> >
> Cc: paraview at paraview.org <http://mc/compose?to=paraview@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/Sources
> http://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<http://mc/compose?to=rajvikrams@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<http://mc/compose?to=sebastien.jourdain@kitware.com>
> >* wrote:
>
>
> From: Sebastien Jourdain <sebastien.jourdain at kitware.com<http://mc/compose?to=sebastien.jourdain@kitware.com>
> >
> Subject: Re: [Paraview] ParaviewWeb : Adding interactive slice filter to
> pipeline
> To: "Rajvikram Singh" <rajvikrams at yahoo.com<http://mc/compose?to=rajvikrams@yahoo.com>
> >
> Cc: paraview at paraview.org <http://mc/compose?to=paraview@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/ff9c0ede/attachment-0001.htm>


More information about the ParaView mailing list