How to await for a UI click (for a linear flow)?

[smojef]

Within an async function that inserts a button and a label, is it possible to await for a click from that button after the label is added? Here is partial code:

async def func():
    clicked = False
    def onclick():
        clicked = True
        
    with ui.column():
        ui.button('Click me', on_click=functools.partial(onclick))
        ui.label('Click the button')
        await # ??? TODO wait for button click or clicked == True
        ui.label('The button was clicked')

ui.timer(interval=1, callback=functools.partial(func), once=True)
ui.run()

I am trying to mimic the simple linear flow of short console scripts that prompts for input(). It would make it easy to port with a nice GUI.

And then how could we gracefully terminate the script and prevent the resulting HTML page from trying to reconnect?

[falkoschindler]

Looks like asyncio.Event is your friend: https://stackoverflow.com/a/44892240/3419103

Here is a minimum example:

async def flow():
    clicked = asyncio.Event()
    ui.button('Click me', on_click=clicked.set)
    await clicked.wait()
    ui.notify('You clicked me!')

ui.button('Start flow', on_click=flow)

---

Regarding the graceful shutdown: Could you, please, open a new discussion with a bit more detail about what you are trying to do? Then it is easier for others to find and we have dedicated space to discuss possible implementations.

[smojef]

For future reference, I rewrote my example with asyncio.Event:

import asyncio
from nicegui import ui, app

async def wait_for_click(element):
    continue_event = asyncio.Event()
    element.on('click', continue_event.set)
    await continue_event.wait()

async def flow():
    with ui.column():
        sli = ui.slider(min=1, max=10, value=1)
        ui.input('Delay (s)').bind_value(sli, 'value')
        btn = ui.button('Click')
        ui.label('Click the button')
        
        await wait_for_click(btn)
        
        ui.label(f'The button was clicked. Sleeping for {sli.value} seconds')
        
        await asyncio.sleep(sli.value)
        
        ui.label('End of flow')
        btn = ui.button('Shutdown')

        await wait_for_click(btn)

        app.shutdown()

#app.on_startup(flow)  # Is this supposed to work?
ui.timer(interval=1, callback=flow, once=True)  # I have to use the timer instead
ui.run(reload=False) 

Which gives nice one-line waiting statements. We can see that the slider events are processed while waiting.
From another post, I saw the use of app.on_startup(), but I don't know why it raises an exception here.

[falkoschindler]

Great, thanks for the update!

app.on_startup doesn't seem to support creating new UI elements at the moment. We'll need to investigate, why this is and what to do about it.

[falkoschindler]

I created #316 to deal with app.on_startup.