Minimal image view in NiceGUI

view.py

from nicegui import events, ui


def mouse_handler(e: events.MouseEventArguments):
    color = "SkyBlue" if e.type == "mousedown" else "SteelBlue"
    ii.content += f'<circle cx="{e.image_x}" cy="{e.image_y}" r="15" fill="none" stroke="{color}" stroke-width="4" />'
    ui.notify(f"{e.type} at ({e.image_x:.1f}, {e.image_y:.1f})")


src = "https://picsum.photos/id/565/640/360"
with ui.row().classes("w-full border"):
    ui.label("Left")
    ui.space()
    ui.label("Right")
with ui.row().classes("w-full border"):
    ui.space()
    ii = (
        ui.interactive_image(
            src,
            on_mouse=mouse_handler,
            events=["mousedown", "mouseup"],
            cross=True,
        )
    )
    ui.space()

ui.run(reload=False)