ui.switch: prevent animation on click

[jeffective]

Would adding an on_click handler to ui.switch be a good idea? It would be specific to user clicks, not any change as on_change current is.

My use case is a machine control application.

I would like to use ui.switch as both the status readout of the current state of a valve, and the means for the user to change the state of the valve:

switch = ui.switch(on_change=on_change).props("size=xs unchecked-icon='block' checked-icon='circle'").classes("font-mono text-xs")
switch.bind_text_from(switch, "value", backward=lambda x: "OPEN" if x else "CLOSED")
backend.add_subscriber_to_current_arena(valve.status)
switch.bind_value_from(backend.cvt, valve.status).tooltip(f"{valve.status}\n\n{valve.cmd}")

My desired behavior is:

1. when user clicks switch, I call a callback that issues a network request against a PLC to change the state of the valve.
2. when a background thread reads the state of the PLC, the ui.switch changes state to reflect the new status of the valve

The network request and background thread are fast enough where the ui.switch can update quickly enough.

Unfortunately, there is no way for me to register a callback only for user clicks. The callback is also triggered by my background task updating the bound data. So I sometimes get multiple events emitted for a single click due to the network request racing the background task.

I am also open to alternatives. So far I have also implemented this as two buttons whose disabled status indicates the current state of the valve, which is effective but less compact and less intuitive to the user.

[jeffective]

I can use switch.on("click", on_click), but honestly its a but confusing what switch.value should be when I the click callback executes. I don't get the same ValueChangeEventArguments that make this more clear.

[evnchn]

My solution:

app.storage.general['switch_enabled'] = True
app.storage.general['motor'] = False

async def toggle_motor():
    if not app.storage.general['switch_enabled']:
        return
    print('Toggling motor...')
    app.storage.general['switch_enabled'] = False
    await asyncio.sleep(1)  # takes some time
    app.storage.general['motor'] = not app.storage.general.get('motor', False)
    app.storage.general['switch_enabled'] = True

@ui.page('/')
def main_page():
    ui.switch('Motor On-Off').bind_enabled_from(app.storage.general, 'switch_enabled').bind_value_from(
        app.storage.general, 'motor').on('click', toggle_motor)

• Switch always respect the server state. Client can click it but until server state toggles, it stays.
• On user clicks, trigger toggle_motor which is all the logic which attempts to toggle server state.

I haven't found a way (e.stopPropagation nor e.preventDefault) for the switch to be dummy, i.e. do not toggle visually on click. I guess if we want to have a new feature, that's the direction.

[jeffective]

Yeah i tried something similar with ui.checkbox as well, but I cant figure out a way to remove the flicker on the click (stop propagation).

(shown here with similar artificial 1s sleep inserted)
Screencast from 2026-01-15 12-53-01.webm

[unigrated-solutions]

Here's an example using Events. Might be useful if you have multiple pages monitoring the same state of the value. Events are defined globally as well as the switch click event subscription. Do whatever you need to do in the separate thread and emit the results back to the switch element (Or anywhere else needed).

switch_event = Event()
valve_event = Event[bool]()

app.storage.general.setdefault('valve_open', False)
app.storage.general.setdefault('pending', False)

@switch_event.subscribe
async def toggle_value():
    app.storage.general['pending'] = not app.storage.general['pending']
    success = False
    try:
        await asyncio.sleep(2)

        success = random.choice([True, False]) # For failed valve changes
        if success:
            app.storage.general['valve_open'] = not app.storage.general['valve_open']

    except Exception:
        success = False

    finally:
        valve_event.emit(success)
        app.storage.general['pending'] = not app.storage.general['pending'] 

@ui.page('/')
def main_page():
    default_value = app.storage.general.get('valve_open')
    
    @valve_event.subscribe
    async def set_valve_switch(success: bool):
        if not success:
            ui.notify('Failed')
            return
        valve_switch.set_value(app.storage.general.get('valve_open'))
        
    async def switch_toggled(e: ClickEventArguments):
        e.sender.set_value(app.storage.general.get('valve_open'))
        switch_event.emit()

    with ui.row().classes('items-center gap-2'):
        ui.label('Valve Status: ')
        valve_switch = ui.switch(value=default_value).on("click", switch_toggled) \
            .bind_text_from(app.storage.general, 'valve_open', lambda v: 'Open' if v else 'Closed')
        ui.spinner().bind_visibility_from(app.storage.general, 'pending')

[jeffective]

I disabled pointer events on a checkbox and added click events to an enclosing element. This prevented animation on click
Screencast from 2026-01-15 14-30-32.webm

def draw_valve_control(backend: ArenaZenohBackend, valve: Valve, rect: Rectangle, draw_refdes: bool = False):
    if draw_refdes:
        ui.label(valve.refdes).style(
            f"""
        position: absolute;
        left: {rect.x_percent}%;
        top: {rect.y_percent}%;
        transform: translateY(-100%);
        """
        ).classes("text-[8pt] pl-1 font-mono")

    with (
        ui.grid(columns="auto")
        .classes("justify-center cursor-pointer select-none")
        .style(
            f"""
        position: absolute;
        left: {rect.x_percent}%;
        top: {rect.y_percent}%;
        width: {rect.width_percent}%;
        height: {rect.height_percent}%;
        """
        )
    ) as grid:
        checkbox = ui.checkbox("no data", value=None).props("dense checked-icon='circle' unchecked-icon='block' v-ripple=true").classes("font-mono text-xs pointer-events-none")
        async def on_click(e):
            current_state = backend.cvt.get(valve.status)
            assert type(current_state) is None or type(current_state) is bool
            if current_state is None:
                new_state = True
            else:
                new_state = not current_state
            assert type(new_state) is bool
            backend.put(bool, valve.cmd, new_state)

        grid.on("click", lambda e: on_click(e))

        def translate_state_str(cvt_value: bool | None) -> str:
            if cvt_value is None:
                return "???"
            match valve.default_state:
                case Normally.open:
                    return "CLOSED" if cvt_value else "OPEN"
                case Normally.closed:
                    return "OPEN" if cvt_value else "CLOSED"
                case _:
                    assert_never(valve.default_state)

        checkbox.bind_text_from(backend.cvt, valve.status, backward=lambda x: translate_state_str(x))
        backend.add_subscriber_to_current_arena(valve.status)

        def translate_state_bool(cvt_value: bool | None) -> bool | None:
            if cvt_value is None:
                return None
            match valve.default_state:
                case Normally.open:
                    return not cvt_value
                case Normally.closed:
                    return cvt_value
                case _:
                    assert_never(valve.default_state)

        checkbox.bind_value_from(backend.cvt, valve.status, backward=lambda x: translate_state_bool(x))
        with grid:
            with ui.tooltip().props("anchor='center right' self='center left' transition-duration=0"):
                ui.html(f"{valve.status}<br>{valve.cmd}", sanitize=False)

[unigrated-solutions]

is valve.status a BindableProperty?

[jeffective]

It's just a string. My backend object maintains a dictionary of string channel name to channel value in a separate thread (cvt is current value table and is dict[str, str | bool | int | float]). The GUI just binds various elements to channels in the cvt. Add subscriber is registering an additional subscriber to the pub sub network called Zenoh.

[jeffective]

Rectangle is the result of finding a position in an SVG and I overlay the elements on top using interactive image.

backend.put is a publish to the PLC

[evnchn]

Thanks to @jeffective for discovering pointer-events-none, the simplified example becomes:

app.storage.general['switch_enabled'] = True
app.storage.general['motor'] = False

async def toggle_motor():
    if not app.storage.general['switch_enabled']:
        return
    print('Toggling motor...')
    app.storage.general['switch_enabled'] = False
    await asyncio.sleep(1)  # takes some time
    app.storage.general['motor'] = not app.storage.general.get('motor', False)
    app.storage.general['switch_enabled'] = True

@ui.page('/')
def main_page():
    with ui.row().on('click', toggle_motor):
        ui.switch('Motor On-Off').bind_enabled_from(app.storage.general, 'switch_enabled').bind_value_from(
            app.storage.general, 'motor').classes('pointer-events-none')