Rotate circular widget on mouse drag while holding the mouse

Hi all! I hope you are doing fine. I have question that I spend many hours so far, but without success.

I have UI create in the widget. For explanation purposes something like this :

I want to be able to grab any place in the circle, and circular/radial rotate the circle like a wheel clockwise or CCW. I spent many hours with chat gpt, but its giving me non-sense. I also tested with radial slider, but radial slider is setting the value on click, and I don’t want that because I am controlling some stuff with the angle of the circle.

Thank you for any response.

  • only the edge? As in drag-rotate it about only by the circumference band?
  • are we mouse dragging left-right only or must follow the curvature - as in, rotating in the drag direction?
  • is this just an image?
  • is it the viewport directly or sitting in another container?

More details needed.

1 Like

Sorry for incomplete question posted.

only the edge? As in drag-rotate it about only by the circumference band?

On the edge will be perfect. I have UI on top of that, so user will know where to grab.

are we mouse dragging left-right only or must follow the curvature - as in, rotating in the drag direction?

My whole problem is curvature. Left and right will be done with Mouse X and Mouse Y , but the user should follow curvature similar like using radial slider ( without setting the value on click, but after dragged/release mouse )

is this just an image?

its a combined UI elements, like a compass, but its a circular, so thats why I placed that simple circle.

is it the viewport directly or sitting in another container?

maybe I had to start with that in my post.
Is a world space spawned widget. So its a part of blueprint, spawned around object in the world. Thats why I am using Angle of the UI to rotate the image.
image

but of course, I am open for suggestions.

Thanks again.

I found some solution, it could be useful to someone. I am using RadialSlider and the difference between “Previous” set value, that is set on click, and “current” value that is set on drag/change value on the slider

Basically, on click we are setting previous value, and then on RadialSlider Value Changed, we are getting the fiference between current value and previous value, and that value I am adding to the render transform angle of the image, and finally setting previous value to be current value.

example:

on click we have value on the radial slider, that is previous value : example: 20
we are moving in the positive, and setting "Current value "so the value will be 21, then 22, then 23 …

On every change of the value, Current value - Previous value ( that will give 1 or -1 depend if user click in positive or in negative area ), and adding to the transform angle. Then the Current value is previous value.

I am not sure if I am able to give print screen because of the project NDA, but I am happy to help if anyone need this kind of “hack” solution.
Other way will be heavy math calculation of the angle, circle curvature, Atan2, etc.