Displaying content from .vtk file in cookiecutter template projec

[NachoPonisio]

Hi!

I'm using the cookiecutter template to generate a POC. My goal is to render the contents of a mesh in a .vtk file that I read from a temp directory after converting it from a .msh file. The code looks like this:

from trame.app import get_server
from trame.decorators import TrameApp, change, controller
from trame.ui.vuetify3 import SinglePageLayout
from trame.widgets import vuetify3, vtk
from vtkmodules.vtkRenderingCore import (
    vtkActor,
    vtkRenderer,
    vtkPolyDataMapper,
    vtkRenderWindow,
    vtkRenderWindowInteractor
)
from vtkmodules.vtkIOLegacy import vtkUnstructuredGridReader


from vrfb_suite.model.generator import MeshGenerator
import tempfile
import meshio

@TrameApp()
class MyTrameApp:
    def __init__(self, server=None):
        self.server = get_server(server, client_type="vue3")
        if self.server.hot_reload:
            self.server.controller.on_server_reload.add(self._build_ui())
        self.ui = self._build_ui()

        # Set state variable
        self.state.trame__title = "vrfb-suite"
        self.state.resolution = 6

    @property
    def state(self):
        return self.server.state

    @property
    def ctrl(self):
        return self.server.controller

    @controller.set("reset_resolution")
    def reset_resolution(self):
        self.state.resolution = 6

    @change("resolution")
    def on_resolution_change(self, resolution, **kwargs):
        print(f">>> ENGINE(a): Slider updating resolution to {resolution}")


    def _data_pipeline(self):
        renderer: vtkRenderer = vtkRenderer()
        renderWindow: vtkRenderWindow = vtkRenderWindow()
        renderWindow.AddRenderer(renderer)
        renderWindowInteractor: vtkRenderWindowInteractor = vtkRenderWindowInteractor()
        renderWindowInteractor.SetRenderWindow(renderWindow)

        mapper = vtkPolyDataMapper()
        generator = MeshGenerator()

        mesh = generator.generate()
        tmp_filename: str = None
        with tempfile.NamedTemporaryFile(delete=False, suffix=".vtk") as tmp:
            tmp_filename = tmp.name
            meshio.write(tmp_filename, mesh = mesh)        

        reader = vtkUnstructuredGridReader()
        reader.SetFileName(tmp_filename)

        mapper.SetInputConnection(reader.GetOutputPort())
        actor = vtkActor()
        actor.SetMapper(mapper)
        actor.ForceTranslucentOn()


        renderer.AddActor(actor)
        renderer.ResetCamera()

        return renderer


    def _build_ui(self, *args, **kwargs):
        with SinglePageLayout(self.server) as layout:
            # Toolbar
            layout.title.set_text("Trame / vtk.js")
            with layout.toolbar:
                vuetify3.VSpacer()
                vuetify3.VSlider(                    # Add slider
                    v_model=("resolution", 6),      # bind variable with an initial value of 6
                    min=3, max=60, step=1,          # slider range
                    dense=True, hide_details=True,  # presentation setup
                )
                with vuetify3.VBtn(icon=True, click=self.ctrl.reset_camera):
                    vuetify3.VIcon("mdi-crop-free")
                with vuetify3.VBtn(icon=True, click=self.reset_resolution):
                    vuetify3.VIcon("mdi-undo")

            # Main content
            with layout.content:
                with vuetify3.VContainer(fluid=True, classes="pa-0 fill-height"):
                    view = vtk.VtkLocalView(self._data_pipeline())
                    self.server.controller.on_server_ready.add(view.update)

            # Footer
            # layout.footer.hide()

            return layout

where

def _data_pipeline(self):
        renderer: vtkRenderer = vtkRenderer()
        renderWindow: vtkRenderWindow = vtkRenderWindow()
        renderWindow.AddRenderer(renderer)
        renderWindowInteractor: vtkRenderWindowInteractor = vtkRenderWindowInteractor()
        renderWindowInteractor.SetRenderWindow(renderWindow)

        mapper = vtkPolyDataMapper()
        generator = MeshGenerator()

        mesh = generator.generate()
        tmp_filename: str = None
        with tempfile.NamedTemporaryFile(delete=False, suffix=".vtk") as tmp:
            tmp_filename = tmp.name
            meshio.write(tmp_filename, mesh = mesh)        

        reader = vtkUnstructuredGridReader()
        reader.SetFileName(tmp_filename)

        mapper.SetInputConnection(reader.GetOutputPort())
        actor = vtkActor()
        actor.SetMapper(mapper)
        actor.ForceTranslucentOn()


        renderer.AddActor(actor)
        renderer.ResetCamera()

        return renderer

which follows the style from the Trame tutorial. However, I cannot make the server render the contents.

The template originally uses this construct to pass in the geometry to the view, but I cannot fathom how to interact with the class model for the use case at hand.

 # Main content
            with layout.content:
                with vuetify3.VContainer(fluid=True, classes="pa-0 fill-height"):
                    with vtk.VtkView() as vtk_view:                # vtk.js view for local rendering
                        self.ctrl.reset_camera = vtk_view.reset_camera  # Bind method to controller
                        with vtk.VtkGeometryRepresentation():      # Add representation to vtk.js view
                            vtk.VtkAlgorithm(                      # Add ConeSource to representation
                                vtk_class="vtkConeSource",          # Set attribute value with no JS eval
                                state=("{ resolution }",)          # Set attribute value with JS eval
                            )

Any hints would be greatly appreciated! Thank you in advance.

[jourdain]

Need to replace

with vtk.VtkView() as vtk_view:                # vtk.js view for local rendering
                        self.ctrl.reset_camera = vtk_view.reset_camera  # Bind method to controller
                        with vtk.VtkGeometryRepresentation():      # Add representation to vtk.js view
                            vtk.VtkAlgorithm(                      # Add ConeSource to representation
                                vtk_class="vtkConeSource",          # Set attribute value with no JS eval
                                state=("{ resolution }",)          # Set attribute value with JS eval
                            )

by

with vtk.VtkRemoteView(renderWindow) as vtk_view:
    self.ctrl.update = vtk_view.update
    self.ctrl.reset_camera = vtk_view.reset_camera

Look at that example for reference.

[NachoPonisio]

That was embarrassingly simple 😬 Thank you for your help!