split screen to two fullscreen render window

Web
#1

I’m splitting screen to two parts each for a fullscreenrenderwindow like this:

fullScreenRenderer.getContainer().style.height = "50%"
fullScreenRenderer.resize()
fullScreenRenderer2.getContainer().style.height = "50%"
fullScreenRenderer2.getContainer().style.top = "50%"
fullScreenRenderer2.resize()

but, then addController:

fullScreenRenderer.addController(controlPanel);
fullScreenRenderer2.addController(controlPanel2);

works by just showing the second controller on the first fullscreenrenderer.

any thoughts? thanks

#2

addController attaches controller HTML elements to the FullscreenRenderWindow’s rootContainer, which in the default case is <body>. As a result, the controllers get stacked on top of each other, so your first controller is actually underneath the second one. You can work around this by creating two div elements and styling them to be split-screen, and then set the rootContainer for each fullscreen render window like so:

fullscreen1 = new vtkFullscreenRenderWindow({ rootContainer: topDivElement });
fullscreen2 = new vtkFullscreenRenderWindow({ rootContainer: bottomDivElement });
1 Like
#3

Thank you @Forrest, actually I tried to do that in the way you mentioned, seems like the constructor should be called like vtkFullScreenRenderWindow.newInstance(), but then putting { rootContainer: topDivElement } is not working.
This is what I tried:

div1 = document.createElement("div");
document.body.appendChild(div1);
fullScreenRenderer = vtkFullScreenRenderWindow.newInstance({rootContainer: div1});

console.log(fullScreenRenderer.rootContainer)

this prints out undefined.

#4

fullScreenRenderer was meant to simplify code in the examples so the main code is about the example purpose not the rendering setup. If you want to have full control, you should setup the rendering part yourself like done in that example.

2 Likes
#5

Thanks, helpful to know.
then how can I add the controller? when I follow like the code in the link you mentioned, and call addController on any of the renderWindow, rendere, or openGLRenderWindow, I get Uncaught TypeError: addController is not a function

#6

The add controller part is just adding a div in your DOM with some css. You just implement it yourself using the JS core features. vtk.js aims to enable visualization not control the dom like vue, react, angular…

1 Like
#7

Thanks, @Sebastien_Jourdain