GUI - Rhino - Radial Menu - Cross Platform

Hello,

I’m out on a journey to create a Radial Popup Menu for Rhino that has image buttons on it that can spawn additional dialog (likely Eto) on clicking one of the menu options.

I’ve come across various visual examples of this implementation on the forums here and of course Grasshopper has a similar radial menu built in but I haven’t found any code to this effect.

I wanted to pick the community brain on this kind of implementation from a cross platform perspective.

Is Eto.Forms.Drawable the way to go with this? Rhino.Display.Pipeline? I would like to do additional research on the topic but can’t seem to find any more posts about it. Perhaps I need to look to python or C# examples outside of Rhino and adapt code from there…

I think it’s going to be a lot of Display.Pipeline work:
https://developer.rhino3d.com/api/rhinocommon/rhino.display.displaypipeline

A few visual examples of the kind of thing I’m looking to implement:
CAD Mouse:


Rhino Artisan:

Shape Plugin:
image

Non-Rhino Examples:
Concept Idea: Radial Menu UI (animated) by Jared Katamani on Dribbble

image

Thanks for your response!

8 Likes

Oh, this is good! Please make the VEF selection and OSnap into radial menu.
There is a popular plugin called MeshMachine in Blender. The logic of selecting is in two steps.

  1. Tab to show the radial menu in screen
  2. Move the mouse to certain directions to select menu items.

If you move the mouse slowly, the radial menu will stay static, and you can choose one of them, but if you move fast, moving itself will do the clicking job, so, you are selecting by moving, not clicking. It is by far the most efficient way of implementing a radial menu in my personal opinion.

I can send you a copy of MeshMachine if you want to experiment.(It is legal by law and Blender’s terms of plugins)

2 Likes

@Quan_Li Exactly! My thought was having a user customizable “entry key” which for me would be middle mouse but not for others. And then selection would occur by sweeping in the direction of the menu choice and releasing the “entry key”.

If you have fixed locations of your preferred actions, it takes barely anytime to develop the muscle memory and you get a very snappy UX running commands quickly.

I have very specific macros I would want to run from this but ideally I would like to set this up to accept any toolbar icon/macro so that users could customize it to their liking.

One thing I don’t like about some Radial Menus is what im going to call “the donut effect” where you have to first get to the outer ring of UI buttons and then move within that “donut ring” to select options.

Visually the donut ring is fine but functionally it should begin highlighting the button in the direction/degrees from the widget instantiation as soon as you move from the “MouseDown CursorPosition” if that makes sense. That way you can be super snappy

1 Like

That will make the whole workflow super smooth! I really hate to stop to look for those little squares of OSnaps out of viewport! Let’s remove searching and thinking, only muscle memories.

1 Like

Right, could be quite handy to enable modifier keys as well like maybe there’s 3 “toolsets” you can have in the radial menu.

So you may choose Osnaps as one of yours and choose 8 osnap buttons from that toolbar to add to your menu.

But your default radial menu may have, idk, curve and point creation tools.

So you begin drawing a polyline and may realize oh i have the wrong osnaps on, hit the modifier key like Alt+Middle Mouse in this example, then your favorite osnaps show up and you toggle on/off whichever one you needed and then promptly release your modifier and reactivate your primary Radial Menu of curve and point creation tools and keep moving.

EDIT:
Right now I’m digging into Display Pipeline drawing code and trying to get a “template” radial menu working first and then I’ll see how far we can get with toolbar/macro integrations

EDIT 2:
Rhino is great and so powerful but I miss the speed of execution that’s possible with the right UI/UX implementations and wish to help improve some things in this area for anyone interested

4 Likes

Very juicy. Very very juicy :slight_smile:

The blender example makes me want to choose Pipeline. But I also really like making fancy stuff in the pipeline. The main reason is because there’s so many separate entities. If it was a single radius, I’d think ETO or a WebUI.

If you want it to look REALLY nice and have LOTS of fancy animations, I think you’d want to hook up a nice Web based UI.

You can make animations happen in the pipeline, but its starts getting complex to change. That being said, it is very zippy and requires a lot less dependencies. however you’re going to have to hook up your own click/drag capture.

It looks juicy though. I’ve been wanting to make a library specifically for making UIs in the pipelines.

– cs

1 Like

I’m using 3Dconnexion radial menus in different software and at least for Rhino I have multiple radial menus to choose from. My problem is the number of commands and 8 is not enough I thought of asking the 3Dconnexion developers to add a second circle so the maximum number of commands would be 16.

That would be amazing for users such as myself that are trying to learn.

The more I looked into it I’m thinking it needs to be Display Pipeline which also will ensure cross platform compatibility correct? Meaning a rounded rectangle would look the same on Mac or Windows because it’s a graphic element where as Eto graphics may very slightly?

I agree, I think perhaps there could be two “layers”, where the primary radial button could be a commonly used action like “Boolean difference” and if the user stops there that’s what they get but if they “continue past that” 4 additional circles appear in an arc at that radial location outside so you can then choose one of those like “Boolean union” “Boolean intersection” etc.

The user ideally could set the “primary action” button that is in the 1st ring and the extra buttons grouped in the 2nd layer fly out.

I’ll show a visual mockup in a second and edit this post.

EDIT:

Maaaaybe something like this @martinsiegrist @csykes where additional buttons show up if you continue moving past the initial/primary action:

Initial Radial Menu Popup:

Moving Right (even a small mouse movement in any direction will highlight/select the action in that vector direction, no need to get the cursor all the way to the button itself):

Moving Right Past Primary Action Button (additional menu items appear, perhaps, secondary action, tertiary action, etc.):

5 Likes

Additional buttons when moving past a first button requires a hierarchy.

I think two independent circles with 8 buttons each would be better.

1 Like

Nice, @michaelvollrath !

Imitating analogic sticks of videogames, one could consider after selecting one of the 8 element of the wheel, another wheel can spawn with sub-options…


Are you working with System elements or ETO library?

1 Like

Very nice,
To manage it, the best way will be to have an xml file to manage hierarchy of functions (parents and child ) and embed base 64 icons for each function
Then perform a read of xml or excel and populate the ring depending of this level of hierarchy.
@michaelvollrath i think you worked with C# because it will be easier to manage the mouse event than python, because you will need to pack this radial menu as a plugin ?

1 Like

Sweet! Looking forward to trying this
I wish you success :slight_smile:

What’s that “Shape plugin” btw?

1 Like

Certainly would be easier to implement that and I see the value in that.

I thought about an option similar to this where the “smaller icons to the right” would instead have 1 icon to the left and 1 icon to the right of the primary icon and if you used “mouse scroll wheel” it would scroll left or right through however many tools you added there. So if you had the primary action be “boolean union” and then also had "boolean intersection, difference, and idk mesh trim lets say you could scroll through those options and as each option was “brought into focus” it would become the primary button/size of the primary button. So in that kind of interaction, the smaller icons wouldn’t be directly selectable but rather a “preview” of the next tool in that particular option set.

I’m attempting to mostly handle it with Drawables but this is my first foray into that so it’s slow going getting started.

I’m certainly interested in learning more about this if you have an example you could share or more information I can read up on? Thank you!

Thanks! Here’s the link to that plugin development:

1 Like


I want to show my work.
Smart circular menu. The menu defines the type of object and whether it is one or many. it can also be easily customized by the user. the user simply sets the png icon to the desired folder, and the name of the picture is the command to apply. :sunglasses:

13 Likes

:heart_eyes:

Looks great! Is this something you would be willing to share? @taraskydon or share any bits & pieces to learn from?

1 Like

@taraskydon what user interface technology did you use? It does look great

C# EtoUI.

7 Likes

If you’re willing to share this, I believe you’d make a LOT of ppl happy, myself iincluded, I like that it’s easily customized

2 Likes

@michaelvollrath, thanks for starting this topic!

@Wiley and I are reworking our radial menu for Shape right now. We’re moving away from the Display.Pipeline and build everything in Eto.Forms. Performance being the primary reason for it. In short, to draw anything in the pipeline, one needs to redraw the entire viewport. With heavier scenes things get laggy.

We could maybe join forces on this one and share it with the community if you were interested.

7 Likes

I too have found this when it comes to performance and I have to agree

1 Like