Controlling UI elements in callback functions

[NimaGhorab]

Hello guys.
I have created a simple interface for a project to read a pvd file format and play its animation.
The problem that I'm facing is when the user clicks the play or backward button to play the animation, I want to disable both forward and backward play buttons until playing of the animation is finished.
Can anyone help me with this?
Thank you all.

from trame.app import get_server

server = get_server(client_type = "vue2")
state, ctrl = server.state, server.controller

import paraview_setup
import os
from dotenv import load_dotenv

load_dotenv()
view, surface, contours = paraview_setup.open_pvd_file(os.environ["PVD_FILE_PATH"])

from trame.widgets import vuetify, paraview
from trame.ui.vuetify import SinglePageWithDrawerLayout
import paraview.simple as pvs

server.state.timestep_text= str(pvs.GetAnimationScene().StartTime)

def play_backward():
    animation_scene = pvs.GetAnimationScene()
    animation_scene.UpdateAnimationUsingDataTimeSteps()
    if animation_scene.TimeKeeper.Time > animation_scene.StartTime:
        animation_scene.Reverse()
        server.state.timesteps = server.state.timestep_text = str(animation_scene.TimeKeeper.Time)
        server.controller.view_update()

def play_forward():
    animation_scene = pvs.GetAnimationScene()
    animation_scene.UpdateAnimationUsingDataTimeSteps()
    if animation_scene.TimeKeeper.Time < animation_scene.EndTime:
        animation_scene.Play()
        server.state.timesteps = server.state.timestep_text = str(animation_scene.TimeKeeper.Time)
        server.controller.view_update()

with SinglePageWithDrawerLayout(server) as layout:
    layout.icon.click = server.controller.view_reset_camera
    layout.title.set_text("OpenLB Visualizer")

    with layout.toolbar as tb:
        tb.dense = True
        tb.clipped_right = True

    with layout.drawer as drawer:
        drawer.width = 325
        drawer.right = True
        vuetify.VSpacer(style="height: 20px;")

        with vuetify.VBtn(icon=True, click=play_backward, style="transform: rotate(180deg);"):
            vuetify.VIcon("mdi-play")

        vuetify.VChip("{{ timestep_text }}")

        with vuetify.VBtn(icon=True, click=play_forward):
            vuetify.VIcon("mdi-play")

    with layout.content:
        html_view = paraview.VtkRemoteView(view, interactive_quality=100, style="width: 100%; height: 100%;")
        server.controller.view_update = html_view.update
        server.controller.view_reset_camera = html_view.reset_camera

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

[jourdain]

https://github.com/Kitware/trame/tree/master/examples/07_paraview/TimeAnimation

[jourdain]

yes use a var that that you toggle True/False and use that to drive a property on a widget

[NimaGhorab]

Thanks a lot for the response.
My problem is that I don't know how to access a widget to change its attributes in a callback function!
Could you please explain it a little bit more?

[jourdain]

https://kitware.github.io/trame/guide/intro/getting_started.html

[NimaGhorab]

Thank you so much, sir.
In my first example I change my button to this form:

with vuetify.VBtn(icon=True, disabled=("btn_disabled", False), click=play_forward):
    vuetify.VIcon("mdi-play")

Now I can use the variable btn_disabled to control the disabled attribute.
So I changed the play_forward function to:

def play_forward():
    server.state.btn_disabled = True
    animation_scene = pvs.GetAnimationScene()
    animation_scene.UpdateAnimationUsingDataTimeSteps()
    if animation_scene.TimeKeeper.Time < animation_scene.EndTime:
        animation_scene.Play()
        server.state.timesteps = server.state.timestep_text = str(animation_scene.TimeKeeper.Time)
        server.controller.view_update()

But the problem that I'm facing is that it becomes disabled after the animation play has been finished whereas I disabled the play button before playing of animation!
Do you have any suggestions?

[jourdain]

You can not use animation_scene.Play() that is why I provided a different example that use Python async to play the animation.
And if you do the server.state.btn_disabled = True in that async example, it will work.