existing html element, setContainer work well for paraview, no sucess for vtk.js as client.

Web
1

  • I have a html element, <div #imageDiv id=“imageDiv”>

  • I obtained the native element, and want to pass it as container for remote view in client side

@ViewChild(‘imageDiv’) imageDiv!: ElementRef;
let div = this.imageDiv.nativeElement;

  • Using paraview, it works perfect, the image render at correct location and expected size:

      smartConnect.onConnectionReady((connection) => {
    const session = connection.getSession();
    const pvwClient = ParaViewWebClient.createClient(connection, [
      'MouseHandler',
      'ViewPort',
      'ViewPortImageDelivery',
    ]);
    
    const renderer = new RemoteRenderer(pvwClient);
    renderer.setContainer(div);
    this.session = session
    this.renderer = renderer




    renderer.onImageReady(() => {
      console.log('We are good');
    });

  • but when using vtk.js as client for remote rendering, I pass same element as container, the rendered image take the entire screen not the size defined for the

    element. ( how ever, if I create the element using document.createElement(‘div’), the rendered image follow the size )

    clientToConnect
.connect(config)
.then((validClient) => {
  const viewStream = clientToConnect.getImageStream().createViewStream('-1');

  const view = vtkRemoteView.newInstance({
    rpcWheelEvent: 'viewport.mouse.zoom.wheel',
    viewStream,
  });
  const session = validClient.getConnection().getSession();
  this.session = session;


  
  view.setSession(session);
  view.setContainer(div);
  view.setInteractiveRatio(0.7); // the scaled image compared to the clients view resolution
  view.setInteractiveQuality(50); // jpeg quality
  view.resize()

  window.addEventListener('resize', view.resize);
})
.catch((error) => {
  console.error(error);
});

Any help will be appreciated.

2

For vtk client, if I try view.getContainer, The container was passed sucessfully with and heigh = 450, that I defined.

image
image1564×1064 77.3 KB

But after rendered, it occupied entire screen:

image
image2515×1236 139 KB

3

Let me do some update, if I create new element, and append to existing element, then the render window honor the size I give, don’t know why, but it serve my purpose.

  const divRenderer = document.createElement('div');
  this.div.appendChild(divRenderer);
  divRenderer.style.position = 'relative';
   divRenderer.style.width = '450px';
  divRenderer.style.height = '450px';
  divRenderer.style.overflow = 'hidden';

Don’t understand why directly set containter use existing element doesn’t honor the size. Is that designed behavior.

4

The injected <img> element is designed to fill its containing block (with position: absolute). You should add the CSS position: relative to #imageDiv for it to honor the size, just like you did with your child element solution.

5

thanks, a lot. That worked.