Device Orientation

Web vtk.js
1

Hi everyone,

I’m working on a function to show a window in landscape mode in a portrait container, it’s like this(device oritention is still portrait):

orientation
orientation631×914 31.4 KB

I rotated the container by 90deg to achieve this, but the getBoundingClientRect() method of the container get the rotated size and the canvas created looked like the red rect above, so I set the size of the openGLRenderWindow manually to fit its actual size, and problems come, the position of the event captured by the interactor and the manipulators considered the left-bottom cornor as the origin point and I have to mapping the points got in the events to another to make the interaction correct.

This is finished by now but I want to know if this could be done easier, e.g. if there is any method in vtk.js that cound manually change the oritention so the mapping for the size and event will not be needed because the mapping causes some other problems for calculating.

2

Just change the view up on the camera but don’t rotate the canvas.

3

Hi @Sebastien_Jourdain,

Sorry I didn’t get it clearly, there are other components such as interact ui and other components contained in the container so it has to be rotated, do you mean to separate the canvas from the container and just leave it full screen, then change the viewup of the camera?

Regards

4

Yes, I will let the render window fill up the space but don’t apply any css transform to it. Just adjust the viewUp assuming the interactor style you are using will be fine regardless of the orientation. If not, then tune them so they work with the other axis.

1 Like
5

Thanks Sebastien, I get it, my windows are contained inside some ui components so I probably will still choose the current way.