Cell picking

[rodrigomologni]

I would like to reproduce the CellPicker example using trame. It is working in VTK, but not in trame. What am I doing wrong? 🤔

Expectation:

vtk_cell_picking.py

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

cone_source = vtkConeSource()

cone_mapper = vtkPolyDataMapper()
cone_mapper.SetInputConnection(cone_source.GetOutputPort())

cone_actor = vtkActor()
cone_actor.SetMapper(cone_mapper)
cone_actor.GetProperty().SetColor(0, 0, 1)

renderer = vtkRenderer()
renderer.AddActor(cone_actor)
renderer.SetBackground(82 / 255, 87 / 255, 110 / 255)

window = vtkRenderWindow()
window.AddRenderer(renderer)
window.SetSize(800, 600)

interactor = vtkRenderWindowInteractor()
interactor.SetRenderWindow(window)
interactor.GetInteractorStyle().SetCurrentStyleToTrackballCamera()

picker = vtkCellPicker()


def create_sphere(position, color):
    sphere_source = vtkSphereSource()
    sphere_source.SetCenter(position)
    sphere_source.SetRadius(.01)

    sphere_mapper = vtkPolyDataMapper()
    sphere_mapper.SetInputConnection(sphere_source.GetOutputPort())

    sphere_actor = vtkActor()
    sphere_actor.SetMapper(sphere_mapper)
    sphere_actor.GetProperty().SetColor(color)

    renderer.AddActor(sphere_actor)


def right_button_pressed(caller, event):
    x, y = interactor.GetEventPosition()
    picker.Pick(x, y, 0, renderer)
    color = (1, 0, 0) if picker.GetActors().GetNumberOfItems() == 0 else (0, 1, 0)
    create_sphere(picker.GetPickPosition(), color)


interactor.AddObserver("RightButtonPressEvent", right_button_pressed)
interactor.Start()

Reality:

trame_cell_picking.py

from trame.app import get_server
from trame.ui.vuetify import VAppLayout
from trame.widgets import vtk, vuetify

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

cone_source = vtkConeSource()

cone_mapper = vtkPolyDataMapper()
cone_mapper.SetInputConnection(cone_source.GetOutputPort())

cone_actor = vtkActor()
cone_actor.SetMapper(cone_mapper)
cone_actor.GetProperty().SetColor(0, 0, 1)

renderer = vtkRenderer()
renderer.AddActor(cone_actor)
renderer.SetBackground(82 / 255, 87 / 255, 110 / 255)
renderer.ResetCamera()

window = vtkRenderWindow()
window.AddRenderer(renderer)
window.SetSize(800, 600)

interactor = vtkRenderWindowInteractor()
interactor.SetRenderWindow(window)
interactor.GetInteractorStyle().SetCurrentStyleToTrackballCamera()

picker = vtkCellPicker()


def create_sphere(position, color):
    sphere_source = vtkSphereSource()
    sphere_source.SetCenter(position)
    sphere_source.SetRadius(.01)

    sphere_mapper = vtkPolyDataMapper()
    sphere_mapper.SetInputConnection(sphere_source.GetOutputPort())

    sphere_actor = vtkActor()
    sphere_actor.SetMapper(sphere_mapper)
    sphere_actor.GetProperty().SetColor(color)

    renderer.AddActor(sphere_actor)


def right_button_pressed(event):
    p = event["position"]
    x = p["x"]
    y = p["y"]
    picker.Pick(x, y, 0, renderer)
    color = (1, 0, 0) if picker.GetActors().GetNumberOfItems() == 0 else (0, 1, 0)
    create_sphere(picker.GetPickPosition(), color)
    ctrl.view_update()


server = get_server()

ctrl = server.controller
ctrl.on_server_ready.add(ctrl.view_update)
ctrl.on_server_ready.add(ctrl.view_reset_camera)

with VAppLayout(server) as layout:
    with layout.root:
        with vuetify.VContainer(
            fluid=True,
            classes="pa-0 fill-height"
        ):
            html_view = vtk.VtkLocalView(
                view=window,
                interactor_events=("event_types", ["RightButtonPress"]),
                RightButtonPress=(right_button_pressed, "[utils.vtk.event($event)]")
            )
            ctrl.view_update = html_view.update
            ctrl.view_reset_camera = html_view.reset_camera


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

[jourdain]

I bet you have a HiDPI screen so you may need to rescale the x/y based on your pixelRatio

[Conor-PhysicsX]

Found this example really useful but am also stuck on getting the spheres to appear in the correct location after interaction with the view. I was wondering if there was any solution found in the end? Or if you know of a similar working example that I could look at to get past this issue? Thanks!

[jourdain]

I just need to get the time to expend that example to add the camera sync so the picking can be effective.

[jourdain]

You can use the following example in the comment on how to enable camera sync

[kerim371]

@jourdain @Conor-PhysicsX hi,

I'm also interested in this example but can't understand how to fix the coordinates.
Do I have to use pixel_ratio somehow like in the provided link or I have to look deeper into the camera sync example above?

[jourdain]

Sorry but I don't have the time right now to flush that example fully. All the pieces are there though.