dual render

[kmilo9999]

Hi,

Following the RemoteRenderer example, I am rendering two instances in the same webpage. I doing this in the client side:

`const config = { sessionURL: 'ws://localhost:1234/ws' }; const smartConnect = SmartConnect.newInstance({ config }); smartConnect.onConnectionReady((connection) => { const pvwClient = ParaViewWebClient.createClient(connection, [ 'MouseHandler', 'ViewPort', 'ViewPortImageDelivery', ]); const renderer = new RemoteRenderer(pvwClient); renderer.setContainer(divRenderer1); renderer.onImageReady(() => { console.log('We are good'); });

window.renderer = renderer; SizeHelper.onSizeChange(() => { renderer.resize(); }); SizeHelper.startListening(); }); smartConnect.connect();

const smartConnect2 = SmartConnect.newInstance({ config }); smartConnect.onConnectionReady((connection) => { const pvwClient = ParaViewWebClient.createClient(connection, [ 'MouseHandler', 'ViewPort', 'ViewPortImageDelivery', ]);

const renderer2 = new RemoteRenderer(pvwClient); renderer2.setContainer(divRenderer2); renderer2.onImageReady(() => { console.log('We are good 2'); });

window.renderer = renderer2; SizeHelper.onSizeChange(() => { renderer.resize(); }); SizeHelper.startListening(); }); smartConnect2.connect();`

And this is my result:

The problem is the mouse interaction between the two renders. If I rotate the one above, the one below wont update the model. However, if you interact with the one below it will update form the current position of the above render, plus its new transformation.

Is it possible to synchronize both renders ?

Thank you.

[jourdain]

Yes it is possible but the way you are doing it may not be what you want since you are starting 2 process for 1 client.

Here is an example of what you may try to do https://github.com/Kitware/paraviewweb-examples

[jourdain]

2 views aims to be independant content and camera wise, but you can create a link between your views.

But maybe I don't understand what you are trying to do. Is it for collaboration?

[jourdain]

Which version of ParaView are you using since we had to fix something to handle multiple view correctly. You need ParaView/master as the changes don't fully get into PV5.5.

[kmilo9999]

No, I want to apply the same transformations on both views, independently on the content they render. Still possible?

[jourdain]

In ParaView, you just need to create a camera link between the views... That's it.

[kmilo9999]

Can I find how to do that in the multi view example ?

[kmilo9999]

when you said "In paraview", you mean the pv server?

[jourdain]

I mean pvpython

[jourdain]

If you do it via the GUI in Paraview with the Trace enabled, you will get the python code to do to create that link.

[kmilo9999]

Hi, I did the suggested step of tracking link cameras in paraview and move the resulting code to the pv server file in the multi view example:

`
view1 = simple.CreateView('RenderView'); view1.EnableRenderOnInteraction = 0; view1.Background = [0,0,0]; simple.Show(simple.Cone(), view1);

    view1.GetGlobalIDAsString()

    view2 = simple.CreateView('RenderView')
    view2.EnableRenderOnInteraction = 0
    view2.Background = [0,0,0]

    simple.Show(simple.Cone(), view2)

    #view.GetGlobalIDAsString()

    self.registerVtkWebProtocol(UserProtocol([view1.GetGlobalIDAsString(), view2.GetGlobalIDAsString()]));
    SetActiveView(view1)
    SetActiveView(view2)`

However, I still dont get the expected result. Am I missing something?

Thank you very much for your help.

[kmilo9999]

Nvm, I solved it.

This is the code that links two views.

AddCameraLink(view1, view2, 'mycameraLink')

However, there is a 'lag' between the two views, and the one that is not the "active view" is hard to manipulate with the mouse events.

Any ideas how to approach this issue.

[jourdain]

It is hard to tell without seeing the issue and truly focusing on the possible solutions. I can already think of several but it won't be possible to explain them on an issue tracker without me spending some time reproducing the issue and trying various approach to solve it. Therefore If you want to pursue with our help, you will need a support contract.

[kmilo9999]

I see. Can you point to an example where I can intersect the mouse events into my own protocols? WHat I can see the second dual window is not active. I would like to activate it when the user right click on it.

That will be extremely helpful.

Thanks.

[jourdain]

Just add a right click listener on JavaScript and then call your own protocol to activate the view you provide as argument. Don't have any specific example on how to add a mouse listener in JavaScript but you should find that on the web.

[kmilo9999]

Thanks for the hint. It was easy to do. However, when I move the geometry in the active view I got this exception:

Traceback (most recent call last): File "Paraview-5.5/lib/python2.7/site-packages/paraview/web/protocols.py", line 605, in startCallback = lambda *args, kwargs: self.startViewAnimation() File "Paraview-5.5/lib/python2.7/site-packages/paraview/web/protocols.py", line 514, in startViewAnimation sView = self.getView(viewId) File "Paraview-5.5/lib/python2.7/site-packages/paraview/web/protocols.py", line 97, in getView raise Exception("no view provided: " + str(vid)) Exception: no view provided: -1 Traceback (most recent call last): File "Paraview-5.5/lib/python2.7/site-packages/paraview/web/protocols.py", line 605, in startCallback = lambda *args, *kwargs: self.startViewAnimation() File "Paraview-5.5/lib/python2.7/site-packages/paraview/web/protocols.py", line 514, in startViewAnimation sView = self.getView(viewId) File "Paraview-5.5/lib/python2.7/site-packages/paraview/web/protocols.py", line 97, in getView raise Exception("no view provided: " + str(vid)) Exception: no view provided: -1 Traceback (most recent call last): File "Paraview-5.5/lib/python2.7/site-packages/paraview/web/protocols.py", line 606, in stopCallback = lambda args, kwargs: self.stopViewAnimation() File "Paraview-5.5/lib/python2.7/site-packages/paraview/web/protocols.py", line 524, in stopViewAnimation sView = self.getView(viewId) File "Paraview-5.5/lib/python2.7/site-packages/paraview/web/protocols.py", line 97, in getView raise Exception("no view provided: " + str(vid)) Exception: no view provided: -1 Traceback (most recent call last): File "Paraview-5.5/lib/python2.7/site-packages/paraview/web/protocols.py", line 606, in stopCallback = lambda *args, **kwargs: self.stopViewAnimation() File "Paraview-5.5/lib/python2.7/site-packages/paraview/web/protocols.py", line 524, in stopViewAnimation sView = self.getView(viewId) File "Paraview-5.5/lib/python2.7/site-packages/paraview/web/protocols.py", line 97, in getView raise Exception("no view provided: " + str(vid))

I guess I will have to live with it in the mean time.

[jourdain]

See my previous comment...

Which version of ParaView are you using since we had to fix something to handle multiple view correctly. You need ParaView/master as the changes don't fully get into PV5.5.

[kmilo9999]

Thanks! I will deploy with the suggested version

[kmilo9999]

Deploying using paraview master helps to remove the exception. Also, the frame rate between linked cameras improved substantially. Thanks!! One more thing, if I link camera A to B for 0.25 seconds and then remove the link, both views will synchronize momentarily ( camera in view B gets the state from camera A ). But If I create a link in the opposite direction (B -> A), the changes on camera B are never reflected in camera A. Would that be another 'contract support' issue?

[jourdain]

Most likely since I will have to spend some time to investigate.

[kmilo9999]

I was expecting that answer. Thanks!!

[kmilo9999]

Hi,

How can I increase the height of the vtk render view? In the multi view example is to short.

Thanks a lot !

[jourdain]

Just put the renderer in a div/container that has the expected size... You should be able to google on how to do that with CSS.

[kmilo9999]

I am rendering the view on a table with the following css properties:

 <td key={'view'+index} id={id}  **style**={{width:'50%',height: '80vh', resize: 'both', overflow: 'hidden',}} onClick={this.handleClick} > 
 <VtkRenderer
                  key={id}
                  connection={network.getConnection()}
                  client={network.getClient()}
                  viewId={id}

                  stillQuality={100}
                  interactiveQuality={60}
                  stillRatio={1}
                  interactiveRatio={1}
                 />
   </td>

But it only increased the size of the cell. Does it only applies on div tags?

[jourdain]

no it will use the size of its container.

[kmilo9999]

This didnt work :(

  <td key={'view'+index} id={id} style={{width:'50%',}} onClick={this.handleClick} >
              <div   style={{position: 'relative',
                     height: '80vh',
                     resize: 'both',
                     overflow: 'hidden',
                     zIndex: '10',
                    }} >
                <VtkRenderer
                  key={id}
                  connection={network.getConnection()}
                  client={network.getClient()}
                  viewId={id}

                  stillQuality={100}
                  interactiveQuality={60}
                  stillRatio={1}
                  interactiveRatio={1}
                 />
              </div>
          </td>

I'll see if it works without the table

[jourdain]

does it properly rescale when resizing your browser window?

[kmilo9999]

Yes, it does resize. I saw another example where they can adjust the render view to the size of the container in the following way:

  <div id="renderContainerOne"
             style={{position: 'relative',
                     height: '80vh',
                     resize: 'both',
                     overflow: 'hidden',
                     zIndex: '10',
                    }}
  />
  myVtkRender = VtkRenderer.newInstance({
              client: this.model.pvwClient,
              viewId: result, 
  myVtkRender.setContainer(
              document.getElementById(renderContainerOne));

Is it possible to set the container in the VtkRender tag in the react component?

[jourdain]

Still looking in the wrong direction... The react component is just fine but you need to set the className to a style that is going to either fix its size or use the parent one...