Vtk View using RouterViewLayout

[wanqing0421]

Hi, I am trying to create a trame app where i have 2 subPages, each page show different vtk file. Why the model1 view is not show?

Here's and example:

with RouterViewLayout(server, "/"):
    with vuetify.VCard():
        vuetify.VCardTitle("Welcome to the VTK Trame Example")

with RouterViewLayout(server, "/model1") as layout:
        layout.root.classes="fill-height"
        view = vtk_widgets.VtkLocalView(renderWindow, ref="view")
        ctrl.view_update = view.update
        ctrl.view_reset_camera = view.reset_camera
  
with SinglePageWithDrawerLayout(server) as layout:
    with layout.content:
        with vuetify.VContainer():
            router.RouterView()

    with layout.drawer:
        with vuetify.VList(shaped=True, v_model=("selectedRoute", 0)):
            with vuetify.VListGroup(value=("true",), sub_group=True):
                with vuetify.Template(v_slot_activator=True):
                    vuetify.VListItemTitle("Title1")
                with vuetify.VListItemContent():
                    with vuetify.VListItem(to="/model1"):
                        with vuetify.VListItemIcon():
                            vuetify.VIcon("mdi-peanut-outline")
                        with vuetify.VListItemContent():
                            vuetify.VListItemTitle("SimuModel1")
                    with vuetify.VListItem(to="/model2"):
                        with vuetify.VListItemIcon():
                            vuetify.VIcon("mdi-peanut-outline")
                        with vuetify.VListItemContent():
                            vuetify.VListItemTitle("SimuModel2")

EDIT by alesgenova: fixed formatting

[alesgenova]

It looks like the router introduces an intermediate div in the html that doesn't span the full view, resulting in a vtk view with 0 width and 0 height.

Try replacing with the following lines:

with layout.content:
    router.RouterView(classes="v-container v-container--fluid pa-0 fill-height")

And here is a full example showing two vtk views working correctly with the router:

from trame.app import get_server
from trame.ui.router import RouterViewLayout
from trame.widgets import html, router

from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vtk as vtk_widgets
from trame.widgets import vuetify3 as vuetify

from vtkmodules.vtkFiltersSources import vtkConeSource, vtkSphereSource
from vtkmodules.vtkInteractionStyle import vtkInteractorStyleSwitch  # noqa
from vtkmodules.vtkRenderingCore import (
    vtkActor,
    vtkPolyDataMapper,
    vtkRenderer,
    vtkRenderWindow,
    vtkRenderWindowInteractor,
)

server = get_server()
server.client_type = "vue3"
state, ctrl = server.state, server.controller

renderer = vtkRenderer()
renderWindow = vtkRenderWindow()
renderWindow.AddRenderer(renderer)

renderWindowInteractor = vtkRenderWindowInteractor()
renderWindowInteractor.SetRenderWindow(renderWindow)
renderWindowInteractor.GetInteractorStyle().SetCurrentStyleToTrackballCamera()

cone_source = vtkConeSource()
mapper = vtkPolyDataMapper()
actor = vtkActor()
mapper.SetInputConnection(cone_source.GetOutputPort())
actor.SetMapper(mapper)
renderer.AddActor(actor)
renderer.ResetCamera()
renderWindow.Render()

renderer2 = vtkRenderer()
renderWindow2 = vtkRenderWindow()
renderWindow2.AddRenderer(renderer2)

renderWindowInteractor2 = vtkRenderWindowInteractor()
renderWindowInteractor2.SetRenderWindow(renderWindow2)
renderWindowInteractor2.GetInteractorStyle().SetCurrentStyleToTrackballCamera()

sphere_source = vtkSphereSource()
mapper2 = vtkPolyDataMapper()
actor2 = vtkActor()
mapper2.SetInputConnection(sphere_source.GetOutputPort())
actor2.SetMapper(mapper2)
renderer2.AddActor(actor2)
renderer2.ResetCamera()
renderWindow2.Render()

with RouterViewLayout(server, "/"):
    html.H1("Home")

with RouterViewLayout(server, "/vtk1"):
    vtk_widgets.VtkLocalView(renderWindow, ref="view")

with RouterViewLayout(server, "/vtk2"):
    vtk_widgets.VtkLocalView(renderWindow2, ref="view2")

with SinglePageLayout(server) as layout:
    with layout.toolbar:
        vuetify.VBtn("Home", to="/")
        vuetify.VBtn("VTK 1", to="/vtk1")
        vuetify.VBtn("VTK 2", to="/vtk2")

    with layout.content:
        router.RouterView(classes="v-container v-container--fluid pa-0 fill-height")

if __name__ == "__main__":
    server.start()

[wanqing0421]

Thanks a lot, it can works now.