VTK interactor not working properly in web application using Trame and Vuetify

[PNilwatcharaporn]

I'm trying to embed a VTK renderer into a Trame web application, and I want to enable interactivity using a custom interactor style. I have implemented a basic version of the app, which consists of a VTK cone actor and a Vuetify checkbox that triggers the setup of the interactor.
The code works fine, but when I activate the interactor by checking the checkbox, the web page freezes and the visualize toolkit comes instead.
However, MyInteractor works fine in the pop-up window but not in my web app. Can you help me diagnose the problem and suggest possible solutions?

import vtk
from trame.app import get_server
from trame.ui.vuetify import SinglePageWithDrawerLayout
from trame.widgets import vuetify, trame, vtk as vtk_widgets

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

class MyInteractorStyle(vtkInteractorStyleTrackballCamera):
    def __init__(self, parent=None):
        self.AddObserver('LeftButtonPressEvent', self.left_button_press_event)

    def left_button_press_event(self, obj, event):
        print('Left mouse press')
        self.OnLeftButtonDown()
        return
    
class MyApp:
    def __init__(self, server=None):
        if server is None:
            server = get_server()

        self.server = server
        self.state  = server.state
        self.ctrl   = server.controller

        self.renderer                   = vtkRenderer()
        self.renderWindow               = vtkRenderWindow()
        self.renderWindowInteractor     = vtkRenderWindowInteractor()

        self.mapper                = vtkPolyDataMapper()
        self.actor                 = vtkActor()

        self.Initialze()

        #Add listeners
        self.state.change("button_var")(self.SetUpInteractor)

    def Initialze(self):
        self.SetUpRender()
        self.BuildModel()
        
    def BuildModel(self):
        source = vtkConeSource()
        self.mapper.SetInputConnection(source.GetOutputPort())
        self.actor.SetMapper(self.mapper)
        self.renderer.AddActor(self.actor)
    
    def SetUpRender(self):
        self.renderWindow.AddRenderer(self.renderer)
        
    def SetUpInteractor(self, button_var, **kwargs):
        if button_var:
            style = MyInteractorStyle()
            self.renderWindowInteractor.SetRenderWindow(self.renderWindow)
            self.renderWindowInteractor.SetInteractorStyle(style)
            self.renderWindowInteractor.Initialize()
            self.renderWindowInteractor.Start()

# -----------------------------------------------------------------------------
# Setup
# -----------------------------------------------------------------------------
        
server = get_server()
app    = MyApp(server)

# -----------------------------------------------------------------------------
# GUIs
# -----------------------------------------------------------------------------
with SinglePageWithDrawerLayout(server) as layout:

    layout.title.set_text("Test on interactor")
    with layout.toolbar:
        # toolbar components
        vuetify.VSpacer()
        vuetify.VDivider(vertical=True, classes="mx-2")
        vuetify.VCheckbox(
            v_model=("button_var", False),
            on_icon="mdi-circle-outline",
            off_icon="mdi-circle-off-outline",
            classes="mx-1",
            hide_details=True,
            dense=True,
        )
    with layout.content:
        # content components
        with vuetify.VContainer(fluid=True, classes="pa-0 fill-height"):
            view = vtk_widgets.VtkLocalView(
                app.renderWindow, namespace="view", mode="local", interactive_ratio=1
            )
            app.ctrl.view_update = view.update
            app.ctrl.view_reset_camera = view.reset_camera
            app.ctrl.on_server_ready.add(view.update)

# -----------------------------------------------------------------------------
# START
# -----------------------------------------------------------------------------

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

[jourdain]

You should be replacing VtkLocalView by VtkRemoteView and not execute self.renderWindowInteractor.Start() otherwise you lock the server.

[PNilwatcharaporn]

Thank you so much. I change VtkLocalView to VtkRemoteView and delete self.renderWindowInteractor.Start()
And I also update this section. It works well, thanks again, Jourdain.

    with layout.content:
        # content components
        with vuetify.VContainer(fluid=True, classes="pa-0 fill-height"):
            # ------------ For Local View -------------
            # view = vtk_widgets.VtkLocalView(
            #     app.renderWindow, namespace="view", mode="local", interactive_ratio=1
            # )
            # ------------ Remote View ---------------
            view = vtk_widgets.VtkRemoteView(
                app.renderWindow, ref = "view",
            )
            # ----------------------------------------
            app.ctrl.view_update = view.update
            app.ctrl.view_reset_camera = view.reset_camera