Building a segmented, half-circle gauge widget

[RaHaN]

Hello Everyone,

I need to build a unusual widget for my UI - and I wonder if nGUI can be used to accomplish this (I have no idea where to start :p)

The concept is a half-circle gauge, with two handles sliding on its circonference to create three pie-shaped sections. Each section represents, through its area/angle/circle part circonference, a value.


(open this image in a new tab to see the animation)

The basic behavior is basically akin to a min max slider, only presented differently.


In that comparison, the minValue and maxValue respectively are the left most point and right most point on the half-circle, while the interactive handles represent the minLimit and maxLimit (as defined here).

Would that be doable within nGUI, and if yes, how would you approach it?

Thanks for any input you may provide!

[ArenMook]

Yes, you can do it with just built-in components. You need a half-circle sprite to start with. Set it to be a 180 degree Filled sprite. This gives you the ability to fill it from 0 to 100, giving you W1. Now duplicate that sprite and flip it to fill from the opposite direction, giving yourself A1. All that's left is D1: again duplicate the sprite, but now you have to rotate it by Pi * W1's fill amount. W1, D1 and A1 fill amounts should add up to 1.0.

[RaHaN]

Hi ArenMook, thanks for the quick answer !

I think though that you meant to set the rotation of the middle sprite to leftSprite.fillamount * (-180) ? (at least in terms of z euler angle)

However, I think that my post may not have been clear : it's not so much the pie shapes that I'm troubled with, but the dynamics of the widget.

First of, all three fill amounts are linked to two controls. Moving the left-most one should proportionally increase one pie shape while reducing the other, and same thing for the second control only with the right-most pie shape and the middle one (if you open the gif animation, I believe it will make immediate sense).

The second thing is how to actually have the handles be movable by any input (mouse or stick axis), *along* the half circle.
The regular sliders prefabs are.. well, sliders, meaning their control slides along along a straight line - in this case I'd have to get this behavior but on the semi-circle, for two handles returning in one swift move the proportional incrementation and decrementation of the pie shapes they control.

Is that clearer ? :/

[ArenMook]

Two approaches for the "inner" part. Either have a circular widget overlay them, or if you want true transparency -- create a custom widget type. At this point you will need to feed your own custom geometry rather than relying on trying to hack it with existing sprites. Just derive a custom class from a UIWidget and create its OnFill function where you will be feeding the geometry similar to how UISprite.OnFill does.

For handles, that will be all your own custom code. NGUI has the drag functionality built in (OnDrag notifications), but what you do with them will be your code.