Multipage VTK web app

[kzslibin]

Hi,

I'm a new user of trame and I'm trying to build a page to embed VTK graph. I'm trying to combine the SimpleCone example and Router example to a multipage web app. But something error to use same VContainer in Router.

In SimpleCone example, the VTK graph (children=[html_view]) works well:

with layout.content:
    vuetify.VContainer(
        style="height: 400px;",
        classes="red lighten-5 pa-0 fill-height",
        children=[html_view],
    )

But in Router example，nothing appared:

with layout.with_route("bar", "/bar/:id", vuetify.VCard()):
    vuetify.VCardTitle("This is bar with ID '{{ $route.params.id }}'")
    vuetify.VContainer(
            style="height: 400px;",
            classes="red lighten-5 pa-0 fill-height",
            children=[html_view],
    )

when the "children=[html_view]" is removed, both VContainer runs OK except the VTK graph is not embeded.

What's wrong with it? How can I do it?

Thanks in advance!

[jourdain]

I'm not sure, it is hard to say. Could you provide a full example that illustrate the issue? It might be easier to see why it might be failing.

In general, I would not recommend using a VContainer inside a VCard especially with fill-height and height: 400px.
One thing to remember is that a VTK view does not have any size and will just stretch to the size of its container. So if its container has no size, the VTK view will have no size has well...

[kzslibin]

SimpleCone example：

from trame import state
from trame.html import vuetify, vtk
from trame.layouts import SinglePage

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

# -----------------------------------------------------------------------------
# VTK pipeline
# -----------------------------------------------------------------------------

DEFAULT_RESOLUTION = 6

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()

# -----------------------------------------------------------------------------
# Callbacks
# -----------------------------------------------------------------------------


@state.change("resolution")
def update_cone(resolution=DEFAULT_RESOLUTION, **kwargs):
    cone_source.SetResolution(resolution)
    html_view.update()


def update_reset_resolution():
    state.resolution = DEFAULT_RESOLUTION


# -----------------------------------------------------------------------------
# GUI
# -----------------------------------------------------------------------------

html_view = vtk.VtkLocalView(renderWindow, ref="view")
html_polydata = vtk.VtkPolyData("cone", dataset=cone_source)

layout = SinglePage("VTK Remote View - Local Rendering", on_ready=update_cone)
# layout.logo.click = html_view.reset_camera
layout.title.set_text("Cone Application")

with layout.toolbar:
    vuetify.VSpacer()
    vuetify.VSlider(
        v_model=("resolution", DEFAULT_RESOLUTION),
        min=3,
        max=60,
        step=1,
        hide_details=True,
        dense=True,
        style="max-width: 300px",
    )
    vuetify.VDivider(vertical=True, classes="mx-2")
    with vuetify.VBtn(icon=True, click=update_reset_resolution):
        vuetify.VIcon("mdi-undo-variant")


with layout.content:
    vuetify.VContainer(
        style="height: 400px;",
        classes="red lighten-5 pa-0 fill-height",
        children=[html_view],
    )

# -----------------------------------------------------------------------------
# Main
# -----------------------------------------------------------------------------

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

Router example：

from trame.layouts import SinglePageWithDrawer
from trame.html import vtk, Template, vuetify, router

from vtkmodules.vtkFiltersSources import vtkConeSource
from vtkmodules.vtkRenderingCore import (
    vtkActor,
    vtkPolyDataMapper,
    vtkRenderer,
    vtkRenderWindow,
    vtkRenderWindowInteractor,
)
# Required for interactor initialization
from vtkmodules.vtkInteractionStyle import vtkInteractorStyleSwitch  # noqa

# Required for rendering initialization, not necessary for
# local rendering, but doesn't hurt to include it
import vtkmodules.vtkRenderingOpenGL2  # noqa

# -----------------------------------------------------------------------------
# VTK pipeline
# -----------------------------------------------------------------------------

renderer = vtkRenderer()
renderWindow = vtkRenderWindow()
renderWindow.AddRenderer(renderer)
# renderWindow.SetSize(300, 100)

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

cone_source = vtkConeSource()
mapper = vtkPolyDataMapper()
mapper.SetInputConnection(cone_source.GetOutputPort())
actor = vtkActor()
actor.SetMapper(mapper)

renderer.AddActor(actor)
renderer.ResetCamera()

html_view = vtk.VtkLocalView(renderWindow)

layout = SinglePageWithDrawer("MyPage", on_ready=html_view.update)
layout.title.set_text("Multi-Page demo")

# There are two ways to register a route
home_template = vuetify.VCard()
with home_template:
    vuetify.VCardTitle("This is home")

foo_template = vuetify.VCard()
with foo_template:
    vuetify.VCardTitle("This is foo")
    with vuetify.VCardText():
        vuetify.VBtn("Take me back", click="$router.back()")
    vuetify.VSpacer()

# You can add a route with add_route
layout.add_route("home", "/", home_template)
layout.add_route("foo", "/foo", foo_template)

# or use the contextmanager 'with_route'
with layout.with_route("bar", "/bar/:id", vuetify.VCard()):
    vuetify.VCardTitle("This is bar with ID '{{ $route.params.id }}'")
    vuetify.VContainer(
            style="height: 400px;",
            classes="red lighten-5 pa-0 fill-height",
            children=[html_view],
    )

# add <router-view />
with layout.content:
    with vuetify.VContainer():
        router.RouterView()

# add router buttons to the drawer
with layout.drawer:
    with vuetify.VList(shaped=True, v_model=("selectedRoute", 0)):
        vuetify.VSubheader("Routes")

        with vuetify.VListItem(to="/"):
            with vuetify.VListItemIcon():
                vuetify.VIcon("mdi-home")
            with vuetify.VListItemContent():
                vuetify.VListItemTitle("Home")

        with vuetify.VListItem(to="/foo"):
            with vuetify.VListItemIcon():
                vuetify.VIcon("mdi-food")
            with vuetify.VListItemContent():
                vuetify.VListItemTitle("Foo")

        with vuetify.VListGroup(value=("true",), sub_group=True):
            with Template(v_slot_activator=True):
                vuetify.VListItemTitle("Bars")
            with vuetify.VListItemContent():
                with vuetify.VListItem(v_for="id in [1,2,3]", to=("'/bar/' + id",)):
                    with vuetify.VListItemIcon():
                        vuetify.VIcon("mdi-peanut-outline")
                    with vuetify.VListItemContent():
                        vuetify.VListItemTitle("Bar")
                        vuetify.VListItemSubtitle("ID '{{id}}'")

# -----------------------------------------------------------------------------
# Main
# -----------------------------------------------------------------------------

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

The last one doesn't work correctly.
But if the line of "children=[html_view]" is removed, VContainer runs OK--it's appeared.

[jourdain]

That is interesting and I now understand the issue. Let me try to explain it then I'll see if I can do something to fix it for the VTK views...

So the <router-view /> is hiding the shared state + global objects that some trame components expect. In our case the VtkRemote view expect a wsClient prop which can not be resolved when the router-view display that component.

A possible solution is to use inject within that VtkRemote to resolve the client when not provided by the props...

HTH.

[jourdain]

It is not going to be easy to solve that issue in trame 1.x but I'm already working on trame 2.x which will provide a solution for this kind of setup. And hopefully such release should happen within the next month.

[jourdain]

With the latest change I made in pywebvue and trame the following code base is working. But anything requiring a dynamic state variable within a <router-view /> is going to be out of luck until trame v2 is out...

from trame.layouts import SinglePageWithDrawer
from trame.html import vtk, Template, vuetify, router
from trame import state, controller as ctrl

from vtkmodules.vtkFiltersSources import vtkConeSource
from vtkmodules.vtkRenderingCore import (
    vtkActor,
    vtkPolyDataMapper,
    vtkRenderer,
    vtkRenderWindow,
    vtkRenderWindowInteractor,
)
# Required for interactor initialization
from vtkmodules.vtkInteractionStyle import vtkInteractorStyleSwitch  # noqa

# Required for rendering initialization, not necessary for
# local rendering, but doesn't hurt to include it
import vtkmodules.vtkRenderingOpenGL2  # noqa

# -----------------------------------------------------------------------------
# VTK pipeline
# -----------------------------------------------------------------------------

renderer = vtkRenderer()
renderWindow = vtkRenderWindow()
renderWindow.AddRenderer(renderer)
# renderWindow.SetSize(300, 100)

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

cone_source = vtkConeSource()
mapper = vtkPolyDataMapper()
mapper.SetInputConnection(cone_source.GetOutputPort())
actor = vtkActor()
actor.SetMapper(mapper)

renderer.AddActor(actor)
renderer.ResetCamera()

layout = SinglePageWithDrawer("MyPage", on_ready=ctrl.view_update)
layout.title.set_text("Multi-Page demo")

# There are two ways to register a route
home_template = vuetify.VCard()
with home_template:
    vuetify.VCardTitle("This is home")

foo_template = vuetify.VCard()
with foo_template:
    vuetify.VCardTitle("This is foo")
    with vuetify.VCardText():
        vuetify.VBtn("Take me back", click="$router.back()")
    vuetify.VSpacer()

# You can add a route with add_route
layout.add_route("home", "/", home_template)
layout.add_route("foo", "/foo", foo_template)

# or use the contextmanager 'with_route'
with layout.with_route("bar", "/bar/:id", vuetify.VCard()):
    vuetify.VCardTitle("This is bar with ID '{{ $route.params.id }}'")
    with vuetify.VContainer(style="height: 400px;", classes="red lighten-5 pa-0 fill-height") as c:
        view = vtk.VtkRemoteView(renderWindow)
        ctrl.view_update = view.update
        c.clear()
        c.add_child(f'<vtk-remote-view ref="view" viewId="{state.viewId}" />')


# add <router-view />
with layout.content:
    with vuetify.VContainer():
        router.RouterView()

# add router buttons to the drawer
with layout.drawer:
    with vuetify.VList(shaped=True, v_model=("selectedRoute", 0)):
        vuetify.VSubheader("Routes")

        with vuetify.VListItem(to="/"):
            with vuetify.VListItemIcon():
                vuetify.VIcon("mdi-home")
            with vuetify.VListItemContent():
                vuetify.VListItemTitle("Home")

        with vuetify.VListItem(to="/foo"):
            with vuetify.VListItemIcon():
                vuetify.VIcon("mdi-food")
            with vuetify.VListItemContent():
                vuetify.VListItemTitle("Foo")

        with vuetify.VListGroup(value=("true",), sub_group=True):
            with Template(v_slot_activator=True):
                vuetify.VListItemTitle("Bars")
            with vuetify.VListItemContent():
                with vuetify.VListItem(v_for="id in [1,2,3]", to=("'/bar/' + id",)):
                    with vuetify.VListItemIcon():
                        vuetify.VIcon("mdi-peanut-outline")
                    with vuetify.VListItemContent():
                        vuetify.VListItemTitle("Bar")
                        vuetify.VListItemSubtitle("ID '{{id}}'")

# -----------------------------------------------------------------------------
# Main
# -----------------------------------------------------------------------------

if __name__ == "__main__":
    # print(layout.html)
    layout.start()

[kzslibin]

Your code seems not working----the VTK graph is not available:

But I'm waiting for trame v2

[jourdain]

Probably because you missed pip install -U pywebvue trame

[kzslibin]

WARNING: Ignoring invalid distribution -ip (g:\mytrame.venv\lib\site-packages)
Successfully installed pywebvue-2.11.4 trame-1.19.4
WARNING: Ignoring invalid distribution -ip (g:\mytrame.venv\lib\site-packages)
WARNING: Ignoring invalid distribution -ip (g:\mytrame.venv\lib\site-packages)

[kzslibin]

App running at:

• Local: http://localhost:8080/
• Network: http://***/

Note that for multi-users you need to use and configure a launcher.
And to prevent your browser from opening, add '--server' to your command line.

JS error | Error: VtkRemoteView can not be created without a wsClient
JS error | TypeError: Cannot read properties of undefined (reading 'setContainer')

[jourdain]

Just clear your browser cache.

[kzslibin]

A new problom:
When I changed VtkRemoteView to VtkLocalView, there is a error:
KeyError: 'viewId'
I think maybe this line is not correct:
c.add_child(f'')
How can I modify it?

[kzslibin]

c.add_child(f'')

[jourdain]

The VtkLocalView will not work within a <router-view /> due to the fact it required a variable that contains the scene description which will have to change dynamically. The trick I did previously was to resolve the viewId variable as that one was technically static and therefore I could change it to a static string.

If you are curious to see how any UI element get transformed to HTML, you can just do print(view.html)

[pazars]

@jourdain Is this still the case in Trame 2.x? VTK views cannot be rendered in RouterView?

[jourdain]

Trame v2 should work just fine. You can see its usage in that example