trame.ClientTriggers can't work in multi-user

[Theodliu]

Hello, my docker vtk example ran successfully. But I want to know the clients' operating system, so I add the following code:
`
client_triggers = trame.ClientTriggers(
ref="ref_name",
created=(getDevicePixelRatio, "[window.devicePixelRatio]"),
methodPreventDefault="document.oncontextmenu = function(){return false;}",

)

def getDevicePixelRatio(devicePixelRatio):
with state:
state.devicePixelRatio = devicePixelRatio
server.js_call("ref_name", "emit", "methodPreventDefault", "parameters")
`
which can check the clients operating system in my computer(without docker).
But when I add these code to the docker example, it will stuck at trrame's loading page and I can't find any errors in log.
Do you know how to deal with it?

Thanks a lot.

[jourdain]

It should work the same in docker or locally.
I bet the issue is that "document..." is not understood due to scoping in the vue template.

Try

trame.ClientTriggers(
   created="""
       devicePixelRatio = window.devicePixelRatio;
       window.document.oncontextmenu = () => false;
   """
)

[Theodliu]

I've been working with a Dockerfile from the examples\deploy\docker\SingleFile directory to build my web application images. The build process completes successfully without any modifications to the settings. My objective is to detect the devicePixelRatio of clients' devices. To achieve this, I added the trame-components package to my setup.

The specific additions to my app.py are as follows:

The code I added in app.py is as following:

from trame.widgets import vuetify, vtk as vtk_widgets, trame

trame.ClientTriggers(
      created="""
            devicePixelRatio = window.devicePixelRatio;
            window.document.oncontextmenu = () => false;
      """
)

However, after these changes, I'm encountering an issue. When I restart the Docker container, the application hangs on the trame loading page. Upon inspecting the web console, I noticed a 404 Not Found error for the resource: http://localhost:32773/__trame_components/trame-components.umd.js.

Could you guide me on how to resolve this issue and ensure the trame-components are loaded correctly, allowing the application to move past the loading page?"

Here's my code:

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

# -----------------------------------------------------------------------------
# Trame setup
# -----------------------------------------------------------------------------

server = get_server()
server.client_type = "vue2"
state, ctrl = server.state, server.controller
state.devicePixelRatio = 1
# -----------------------------------------------------------------------------
# Web App setup
# -----------------------------------------------------------------------------

state.trame__title = "VTK Rendering"

with SinglePageLayout(server) as layout:

    trame.ClientTriggers(
      created="""
          devicePixelRatio = window.devicePixelRatio;
          window.document.oncontextmenu = () => false;
      """
    )

    with layout.content:
        with vuetify.VContainer(fluid=True, classes="pa-0 fill-height"):
            with vtk_widgets.VtkView(ref="view"):
                with vtk_widgets.VtkGeometryRepresentation():
                    vtk_widgets.VtkAlgorithm(
                        vtk_class="vtkConeSource", state=("{ resolution }",)
                    )

    with layout.toolbar:
        vuetify.VSpacer()
        vuetify.VSlider(
            hide_details=True,
            v_model=("resolution", 6),
            max=60,
            min=3,
            step=1,
            style="max-width: 300px;",
        )
        vuetify.VSwitch(
            hide_details=True,
            v_model=("$vuetify.theme.dark",),
        )
        with vuetify.VBtn(icon=True, click="$refs.view.resetCamera()"):
            vuetify.VIcon("mdi-crop-free")

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

[jourdain]

When running locally (without docker), do you know if the code works?

What is the docker setup that you have? Without that information, we can not tell you what is wrong. The Python code for the application and the docker setup are two independent things.

[jourdain]

My guess is that you forgot to update ./setup/requirements.txt to include trame-components.