Implementing Horizontal drag for a custom png image

Omniverse Omniverse Extensions Sample Extensions
1

I want to implement a custom draggable asset that can be only dragged horizontally.
Can someone please help me the relevant function that are available within omni.ui or other such libraries?
The inspiration for this feature is the seuqencer tool’s playhead icon on the timeline that is draggable.
It would be very helpful if someone could point to the right documentation, or to a relevant snippet that solves this .

Thanks

2

Is this for a draggable asset within the RTX viewport, or just in the UI in general ?

3

HI @Richard3D , the draggable asset is part of the UI extension, much like the playhead icon on the timeline of the Sequencer Tool. I am attaching the image as a refernce.
The icon that you see in green color is the one I am talking about. Need to move it/drag it in horizontal direction along the custom timeline.
Screenshot from 2025-03-26 12-12-00

Thanks

4

I see. So you need to lock the UI slider to just horizontal dragging. Makes sense. Let me find some code for you.

5

HI @Richard3D . Can you share with me any relevant code or snippets?, Or can you point me to the right direction were I can refer to?.
Thanks

6

I would start with this page from our Omniverse Docs page. This is on the Omni.UI page, and specifically talks about sliders

AbstractSlider — Omniverse Kit

7

We also have something similar here for your specific needs. In general look through our OmniDocs at the Omni.Ui extension.

UIntSlider — Omniverse Kit

8

Hi @Richard3D . Thanks for sharing the documentation. Is it possible to share some snippets of implementation as well?

Thanks

9

I can ask.

10

We would recommend you to use ui.Placer. Slider is more complicated in terms of the customized draggable assets.
You can do something like this

with ui.ZStack():
    TimelineWidget() # customized timeline
    # placer contains the draggable assets of the icon and a label shows the timeline value
    placer = ui.Placer(draggable=True, drag_axis=ui.Axis.X, offset_x=400, offset_y=120)
    with placer:   
        with ui.VStack():
            ui.Image(...) # the icon
            timeline_label = ui.Label("0", style={"color": cl.white})
    
    def set_text(widget, text):
        widget.text = text

    placer.set_offset_x_changed_fn(lambda o: set_text(timeline_label, str(o))
11

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.