About the real-time rendering of images on trame.app

[BruceLvSwag]

When I run the trame application, I want to control the addition and deletion of vtk.vtkTextActor actors on imageViewer.GetRenderer through a button, and I have implemented this function, but there is a problem, that is, after clicking the button, I need to click again Click the view to complete the addition or deletion, otherwise the view will not change. In fact, after testing, as long as any mouse event occurs against the view, including left-click, middle-click, right-click, and middle-click scrolling, the text will be added or deleted, and the view will be refreshed. But my original intention is that after clicking the button, the text will be successfully added or deleted on the view without triggering any mouse events on the view. Please tell me how to solve this problem.

The following is part of my code.

from vtk import (
    vtkLookupTable,
)
import vtk
import SimpleITK
import numpy
import pyvista as pv
from component import create_drawer, create_right_drawer, create_toolbar
from control import WindowMode2D, WindowMode3D
from global_variable import MODE_2D, MODE_3D, server, ct_reader

# Trame imports
from trame.ui.vuetify import SinglePageWithDrawerLayout
from trame.widgets import vuetify, vtk as vtk_widgets

# VTK imports

from vtkmodules.vtkCommonCore import vtkLookupTable

# from vtk.util.misc import vtkGetDataRoot
# -----------------------------------------------------------------------------
# Data file information
# -----------------------------------------------------------------------------
from trame.widgets import vuetify

from vtkmodules.vtkCommonCore import vtkLookupTable

# Required for interactor initialization
################ $$$$$$$$$$$$$$$$$$$####################
from global_variable import *
from myVtkInteractorStyleImages import MyVtkInteractorStyleImage, MyVtkInteractorStyleReader


CTRL = server.controller
STATE = server.state
imageViewer.SetInputData(imageBlend.GetOutput())
imageViewer.SetSliceOrientationToXY()
imageViewer.Render()
imageViewer.GetRenderWindow().SetWindowName("DisplayImageExample1")
imageViewer.SetupInteractor(renderWindowInteractor1)


@STATE.change("resolution")
async def start_play(resolution, **kwargs):
    if view2d_state.get() == WindowMode2D.informationOn:
      text_actor1.SetInput(
          "Ser:203\nimg:{}{}\n{}\nLoc:None\nThickness:None".format(
              str(Slice1),
              "(" + str(Slice1) + "/" + str(maxSlice1) + ")",
              str(imgSize1),
          )
      )
      text_actor1.GetTextProperty().SetColor(1, 1, 1)
      text_actor1.GetTextProperty().SetFontSize(16)
      text_actor1.SetPosition(20, 10)

      imageViewer1.GetRenderer().AddActor2D(text_actor1)
      imageViewer1.Render()
      actor_dictText1["act"] = text_actor1
      

with SinglePageWithDrawerLayout(server) as layout:
    layout.title.set_text("FDMI")
    layout.icon.click = CTRL.view_reset_camera

    with layout.toolbar as tb:
        tb.dense = True
        tb.height = 70
        create_toolbar()
        vuetify.VSlider(
            v_model=("resolution", DEFAULT_RESOLUTION),
            min=3,
            max=2000000000,
            step=1,
            hide_details=True,
            dense=True,
            style="max-width: 10px;display: none",
        )
        vuetify.VDivider(vertical=True, classes="mx-2",
                         style="max-width: 10px;display: none",)
        with vuetify.VBtn(icon=True, click=update_reset_resolution, style="max-width: 10px;display: none",):
            vuetify.VIcon("mdi-undo-variant",
                          style="max-width: 10px;display: none",)
    
    
    with layout.drawer as drawer:
        drawer.width = 80
        drawer.classes = "left-nav"
        vuetify.VDivider(classes="mb-2", style="")
        create_drawer()
        
    with layout.content:
        with vuetify.VContainer(fluid=True, classes="fill-height pa-0 ma-0"):
            with vuetify.VRow(
                dense=True,
                style=("{ height: viewLayout !== 'singleView' ? '50%' : '0%' }",),
                v_show="viewLayout !== 'doubleView'",
            ):
                with vuetify.VCol(
                    classes="pa-0",
                    style="border-right: 1px solid #ccc; position: relative;",
                ):
                    view = vtk_widgets.VtkRemoteView(
                        # view = vtk_widgets.VtkLocalView(
                        imageViewer1.GetRenderWindow(),
                        box_selection=("vtk_selection",),
                        # interactive_ratio=1,
                        # box_selection_change=(on_box_selection_change, "[$event]"),
                        # For VtkRemoteView
                        **VTK_VIEW_SETTINGS,
                        # For VtkLocalView
                        interactor_settings=(
                            "interactorSettings", VIEW_SELECT),
                    )
                    CTRL.view_update = view.update
                    CTRL.view_reset_camera = view.reset_camera
                    vuetify.VCheckbox(
                        small=True,
                        on_icon="mdi-selection-drag",
                        off_icon="mdi-rotate-3d",
                        v_model=("vtk_selection", False),
                        style="position: absolute; top: 0; right: 0; z-index: 1;",
                        dense=True,
                        hide_details=True,
                    )
                    
if __name__ == "__main__":
    server.hot_reload = True
    print(server.root_server._www)
    server.start()

[jourdain]

You need to replace imageViewer1.Render() by CTRL.view_update()

[ShiroDoMain]

Hi! I think I encountered the same problem. I displayed images in multiple different directions on the page, and then used a button to control the application of a mask over the images. However, after clicking the button, only one image has the mask applied, and the other images do not get mask.

Now I must click on the image again to update the correct image.

I have investigated many issues and still don't have a good lead. Currently, the solution I am using is to force repeated refreshes by using

@state.change("show_mask")
for _ in range(4): 
    ctrl.view_update1()
    ctrl.view_update2()

This was able to solve some problems at first, but I found that this issue still exists on high-resolution screens (2K or 4K). Then I noticed that when clicking the button on high-resolution screens, it does not retrieve the updated image. Only by clicking the button again or triggering an interactive event, it will then fetch the updated image or the image from the last update, but it still results in this scenario of updating a single view. The reason for this question arises because when I resize the webpage window to 720P or smaller, this issue does not occur, and the update speed is very fast. So, I wonder if this has to do with network transmission. But could a local Docker cause such a significant performance difference?


I use Docker to manage multiple users.

My environment:
Docker on Ubuntu 20.04
nvidia rtx 4090
vtk-egl

[jourdain]

Ok, I think I know why and it has to do with the logic we have on the server side to capture those images. And more specifically due to its origin with VTK/ParaView Web that tends to only have one 3D view. Now with trame, we have more freedom which start highlighting some of the flows. It would be nice to refresh that design but that would require some funds if we want to do it right.
But as a cheaper path, we should be able to find some reasonable workaround. Is there a way for you to start an animation loop on all the views and stop it almost right away?