Drawing a line is working correctly in vtk but not in trame

[amine0110]

Hello,

VTK Code:

import vtk


class DistanceMeasureApp:
    """
    Click–drag–release to place a distance line. When you release, the line is frozen
    and a new measurement tool is armed automatically. Press:
      - 'c' to clear all
      - 'u' to undo last
    """

    # Toggle this to use a 3D world-space representation instead of the 2D overlay
    USE_3D_REP = False

    # Toggle this to use a flat 2D image-style interaction (no 3D orbit)
    USE_IMAGE_INTERACTOR = False

    def __init__(self):
        # --- Renderer / window / interactor
        self.renderer = vtk.vtkRenderer()
        self.renderer.SetBackground(0.10, 0.12, 0.14)

        self.renwin = vtk.vtkRenderWindow()
        self.renwin.AddRenderer(self.renderer)
        self.renwin.SetSize(1000, 720)
        self.renwin.SetWindowName("VTK Distance Measurements (click-drag-release)")

        self.iren = vtk.vtkRenderWindowInteractor()
        self.iren.SetRenderWindow(self.renwin)

        if self.USE_IMAGE_INTERACTOR:
            self.iren.SetInteractorStyle(vtk.vtkInteractorStyleImage())
        else:
            self.iren.SetInteractorStyle(vtk.vtkInteractorStyleTrackballCamera())

        # Keep strong references so objects don't get GC'd
        self.widgets = []
        self._orientation_widget = None

        # Optional scene helpers
        self._add_reference_grid()
        self._add_orientation_marker()

        # Keyboard shortcuts
        self.iren.AddObserver("KeyPressEvent", self._on_key_press)

    # ------------------------------ Scene helpers ------------------------------

    def _add_reference_grid(self):
        """Faint wireframe plane so you see depth/scale immediately."""
        plane = vtk.vtkPlaneSource()
        plane.SetXResolution(20)
        plane.SetYResolution(20)
        plane.SetOrigin(-10, -10, 0)
        plane.SetPoint1(10, -10, 0)
        plane.SetPoint2(-10, 10, 0)

        mapper = vtk.vtkPolyDataMapper()
        mapper.SetInputConnection(plane.GetOutputPort())

        actor = vtk.vtkActor()
        actor.SetMapper(mapper)
        actor.GetProperty().SetRepresentationToWireframe()
        actor.GetProperty().SetColor(0.35, 0.38, 0.44)
        actor.GetProperty().SetOpacity(0.35)

        self.renderer.AddActor(actor)

    def _add_orientation_marker(self):
        axes = vtk.vtkAxesActor()
        axes.SetTotalLength(4, 4, 4)
        axes.SetShaftTypeToCylinder()
        axes.SetCylinderRadius(0.02)

        omw = vtk.vtkOrientationMarkerWidget()
        omw.SetOrientationMarker(axes)
        omw.SetInteractor(self.iren)
        omw.SetViewport(0.0, 0.0, 0.16, 0.22)
        omw.EnabledOn()
        omw.InteractiveOff()
        self._orientation_widget = omw

    # ------------------------------ Widget creation ----------------------------

    def _make_representation(self):
        """
        Create and style a distance representation. In 2D overlay mode we use
        vtkDistanceRepresentation2D (style via AxisProperty). In 3D we use
        vtkDistanceRepresentation3D (style via LineProperty).
        """
        if self.USE_3D_REP:
            rep = vtk.vtkDistanceRepresentation3D()
            # Style line (vtkProperty)
            rep.GetLineProperty().SetColor(1.0, 0.9, 0.2)
            rep.GetLineProperty().SetLineWidth(2.0)
        else:
            rep = vtk.vtkDistanceRepresentation2D()
            # Style axis/line (vtkProperty2D) — supported by the 2D rep
            if hasattr(rep, "GetAxisProperty"):
                axis_prop = rep.GetAxisProperty()
                axis_prop.SetColor(1.0, 0.9, 0.2)
                axis_prop.SetLineWidth(2.0)

        # Format numeric label; you can append units here if desired (e.g., " %.2f mm")
        rep.SetLabelFormat("%.2f")

        return rep

    def _new_distance_widget(self):
        """
        Create a new vtkDistanceWidget that supports click–drag–release to place a line.
        When the user finishes interaction, we freeze it and arm the next one immediately.
        """
        rep = self._make_representation()

        widget = vtk.vtkDistanceWidget()
        widget.SetInteractor(self.iren)
        widget.SetRepresentation(rep)

        # Ensure this widget actively handles mouse events until it's frozen
        widget.EnabledOn()
        widget.ProcessEventsOn()

        def on_end_interaction(caller, evt):
            # Freeze the finished measurement so it no longer captures the mouse
            caller.ProcessEventsOff()
            # Arm a fresh widget for the next line
            self._new_distance_widget()
            self.renwin.Render()

        widget.AddObserver(vtk.vtkCommand.EndInteractionEvent, on_end_interaction)

        self.widgets.append(widget)

    # ------------------------------ Keyboard handlers --------------------------

    def _on_key_press(self, obj, evt):
        key = obj.GetKeySym().lower()
        if key == "c":
            # Clear all measurements
            for w in self.widgets:
                try:
                    w.EnabledOff()
                except Exception:
                    pass
            self.widgets.clear()
            self._new_distance_widget()
            print("[info] Cleared all measurements.")
            self.renwin.Render()

        elif key == "u":
            # Undo last measurement (remove the most recently frozen or active widget)
            # Keep at least one active widget so user can continue measuring
            if self.widgets:
                last = self.widgets.pop()
                try:
                    last.EnabledOff()
                except Exception:
                    pass
                if not self.widgets:
                    self._new_distance_widget()
                print("[info] Undid last measurement.")
                self.renwin.Render()

    # ------------------------------ App lifecycle ------------------------------

    def start(self):
        # Camera setup
        self.renderer.ResetCamera()
        self.renderer.GetActiveCamera().Azimuth(30)
        self.renderer.GetActiveCamera().Elevation(20)
        self.renderer.ResetCameraClippingRange()

        # Start with one armed measurement tool
        self._new_distance_widget()

        self.renwin.Render()
        self.iren.Initialize()
        self.iren.Start()


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

I have a vtk code that allows me to draw a line in 3D or 2D plan. It works good in the classical vtk viewer:

But when I try to integrate it in Trame, it doesn't behave as expected. I need always to click and release to draw the point and the line is not following the mouse in real time (while not clicked).

Even by clicking and dragging, then releasing to complete the line, it still requires anothe click to drop the second point.

Here is the trame code:

# app_vue2.py (Vue 2 + RemoteView, OFF-SCREEN, no native window)
import vtk

from trame.app import get_server
from trame.ui.vuetify import SinglePageLayout                # Vue 2 layout
from trame.widgets import vtk as vtk_widgets, vuetify as v, html


class DistanceMeasureTrameApp:
    """
    Trame (Vue 2) + VTK app: click–drag–release to place distance lines.
    Each finished line is frozen; a new one is armed automatically.
    Toolbar: Undo / Clear / 2D vs 3D rep / Reset camera.
    Keyboard: 'u' = undo last, 'c' = clear all.
    """

    def __init__(self, use_3d_rep: bool = False):
        # ------- VTK scene -------
        self.renderer = vtk.vtkRenderer()
        self.renderer.SetBackground(0.10, 0.12, 0.14)

        self.renwin = vtk.vtkRenderWindow()
        self.renwin.AddRenderer(self.renderer)

        # *** IMPORTANT: Off-screen rendering so no native window opens ***
        self.renwin.SetOffScreenRendering(True)

        # Use a standard interactor (no .Start(), no .Initialize() calls)
        self.iren = vtk.vtkRenderWindowInteractor()
        self.iren.SetRenderWindow(self.renwin)
        self.iren.SetInteractorStyle(vtk.vtkInteractorStyleTrackballCamera())

        # Keep references to active/frozen widgets
        self.widgets = []
        self._orientation_widget = None

        # Options
        self.USE_3D_REP = use_3d_rep

        # Scene helpers
        self._add_reference_grid()
        self._add_orientation_marker()

        # Keyboard shortcuts
        self.iren.AddObserver("KeyPressEvent", self._on_key_press)

    # ---------------------- Scene helpers ----------------------

    def _add_reference_grid(self):
        plane = vtk.vtkPlaneSource()
        plane.SetXResolution(20)
        plane.SetYResolution(20)
        plane.SetOrigin(-10, -10, 0)
        plane.SetPoint1(10, -10, 0)
        plane.SetPoint2(-10, 10, 0)

        mapper = vtk.vtkPolyDataMapper()
        mapper.SetInputConnection(plane.GetOutputPort())

        actor = vtk.vtkActor()
        actor.SetMapper(mapper)
        actor.GetProperty().SetRepresentationToWireframe()
        actor.GetProperty().SetColor(0.35, 0.38, 0.44)
        actor.GetProperty().SetOpacity(0.35)
        self.renderer.AddActor(actor)

    def _add_orientation_marker(self):
        axes = vtk.vtkAxesActor()
        axes.SetTotalLength(4, 4, 4)
        axes.SetShaftTypeToCylinder()
        axes.SetCylinderRadius(0.02)

        omw = vtk.vtkOrientationMarkerWidget()
        omw.SetOrientationMarker(axes)
        omw.SetInteractor(self.iren)
        omw.SetViewport(0.0, 0.0, 0.16, 0.22)
        omw.EnabledOn()
        omw.InteractiveOff()  # keep it passive
        self._orientation_widget = omw

    # ---------------------- Measurements ----------------------

    def _make_representation(self):
        """
        2D overlay (default) uses AxisProperty; 3D uses LineProperty.
        """
        if self.USE_3D_REP:
            rep = vtk.vtkDistanceRepresentation3D()
            rep.GetLineProperty().SetColor(1.0, 0.9, 0.2)
            rep.GetLineProperty().SetLineWidth(2.0)
        else:
            rep = vtk.vtkDistanceRepresentation2D()
            if hasattr(rep, "GetAxisProperty"):
                axis_prop = rep.GetAxisProperty()
                axis_prop.SetColor(1.0, 0.9, 0.2)
                axis_prop.SetLineWidth(2.0)

        # Append units if you like, e.g., "%.2f mm"
        rep.SetLabelFormat("%.2f")
        return rep

    def _new_distance_widget(self, auto_render=True):
        rep = self._make_representation()

        widget = vtk.vtkDistanceWidget()
        widget.SetInteractor(self.iren)
        widget.SetRepresentation(rep)

        widget.EnabledOn()
        widget.ProcessEventsOn()  # capture mouse until frozen

        def on_end_interaction(caller, evt):
            # Freeze finished measurement so it stops intercepting events
            caller.ProcessEventsOff()
            # Arm the next one
            self._new_distance_widget(auto_render=True)

        widget.AddObserver(vtk.vtkCommand.EndInteractionEvent, on_end_interaction)
        self.widgets.append(widget)

        if auto_render:
            self.renwin.Render()

    # ---------------------- Controls ----------------------

    def clear_all(self):
        for w in self.widgets:
            try:
                w.EnabledOff()
            except Exception:
                pass
        self.widgets.clear()
        self._new_distance_widget(auto_render=False)

    def undo_last(self):
        if self.widgets:
            last = self.widgets.pop()
            try:
                last.EnabledOff()
            except Exception:
                pass
            if not self.widgets:  # keep measuring flow
                self._new_distance_widget(auto_render=False)

    def reset_camera(self):
        self.renderer.ResetCamera()
        self.renderer.GetActiveCamera().Azimuth(30)
        self.renderer.GetActiveCamera().Elevation(20)
        self.renderer.ResetCameraClippingRange()

    # ---------------------- Events ----------------------

    def _on_key_press(self, obj, evt):
        key = obj.GetKeySym().lower()
        if key == "c":
            self.clear_all()
            self.renwin.Render()
        elif key == "u":
            self.undo_last()
            self.renwin.Render()

    # ---------------------- Lifecycle ----------------------

    def initialize_scene(self):
        self.reset_camera()
        self._new_distance_widget(auto_render=False)

    def get_render_window(self):
        return self.renwin


def main():
    # ----- Vue 2 client -----
    server = get_server(client_type="vue2")
    state, ctrl = server.state, server.controller

    app = DistanceMeasureTrameApp(use_3d_rep=False)
    state.use_3d_rep = False

    @state.change("use_3d_rep")
    def _toggle_rep(use_3d_rep, **_):
        app.USE_3D_REP = bool(use_3d_rep)

    with SinglePageLayout(server) as layout:
        layout.title.set_text("Distance measurements | trame (Vue 2) + VTK")

        # Toolbar
        with layout.toolbar:
            v.VBtn("Undo (U)", click=lambda: (app.undo_last(), view.update()), depressed=True)
            v.VBtn("Clear (C)", click=lambda: (app.clear_all(), view.update()), depressed=True)
            v.VSwitch(v_model=("use_3d_rep", False), label="3D representation")
            v.VSpacer()
            v.VBtn("Reset camera", click=lambda: (app.reset_camera(), view.update()))

        # Content
        with layout.content:
            with v.VContainer(fluid=True, classes="fill-height pa-0"):
                with v.VRow(classes="fill-height pa-0 ma-0"):
                    with v.VCol(classes="fill-height pa-0 ma-0"):
                        # Remote server-side rendering view
                        global view
                        view = vtk_widgets.VtkRemoteView(app.get_render_window())
                        view.update()

                        v.VDivider(classes="my-2")
                        html.Div(
                            "Left-drag to draw a line; release to freeze. A new line tool "
                            "arms automatically. Use Undo/Clear or keys U/C.",
                            classes="text-body-2",
                        )

    @ctrl.add("on_server_ready")
    def _on_ready(**_):
        app.initialize_scene()
        view.update()

    server.start()


if __name__ == "__main__":
    main()

Can anyone help me with this please!
Thanks in advance.

[jourdain]

You need to send mouse interaction on move too, not just on drag. I think we have a flag/property to enable it.

If not available with trame-vtk, it might be good to upgrade to trame-rca.

[jourdain]

You will also need to start animation to enable image streaming while moving your mouse and properly release the animation.