[Feature Request] Radial Menu with multiple rings

[Tsudico]

I didn't see radial menu as an option in the Windows version as of yet. When it is implemented could a person define multiple zones? I could see this working multiple ways, one more complex than the other. I will define the complex solution first and then provide a simpler version.

Complex Version:
A person would indicate total number of zones and then include maximum number of populated areas for all but the last. The GUI would have a panel labeled with Zones that allows you to add + and remove - a zone. Inside the panel each zone would have an option for Segments which could just be a number input that allows a minimum of 0 (for the central zone) or the previous zone's maximum with the maximum limit being the next zone's minimum up to a sane maximum if there isn't an outer zone.

Since the number of zones and segments can be so varied, it may make sense to display what the final radial will look like. In the GUI this could be shown with concentric set of segmented rings.
Here is an example of 3 zones with 4, 8, and 16 segments respectively that I found with an image search which could be displayed in the GUI:

The profile file might look like this for the above image:

{
  "action": "radialmenu"
  "radialmenu": {
    "menu": "Example",
    "zones": [4, 8, 16]
  }
}

Simpler Version:
A simpler version is to limit the number of zones to 3. A center with only one position, an inner ring with a sane maximum (that can be defined to be less), and a final outer ring with the remaining. In this case the GUI would need a checkbox for whether there is a center menu item and for the inner ring an input for a number that has minimum and maximum constraints but wouldn't require any sort of image displaying zones and segments. The profile file could be something like what follows:

{
  "action": "radialmenu"
  "radialmenu": {
    "menu": "Example",
    "center": true, // Default is false
    "inner": 3, // Default is 0 so there is no inner ring of options, perhaps with a upper max of 8-12
  }
}

Populating the Menu:
To make things simpler for populating the menu (and not require further changes to the menu format) the menu items defined in the menu are filled in from central zone outward in a clockwise direction. This means that for the simple example the center would get the first menu item, the inner ring would get the next 3 menu items, and the rest would populate the outer ring. In the complex example the first 4 menu items would be in the center zone, the next 8 in the middle zone, and up to 16 in the outer zone.

The actual on screen display would have the segments of each zone displayed with either an icon (if defined) or inset segment (so each segment is visible compared to the background). Any text for the menu item would appear either above or below the radial like the Steam Input radial menu does:

[kozec]

I like this idea very much, with three exceptions:

• I don't think that drawing circle around every icon will look good with icons that are rectangular or already have a border. Drawing piece of piechart similarly as in your 1st picture would work better.
• It should be possible to use existing menu format and simply switch to next orbit on every separator, at least temporarily. I'd like to rework format for v0.5 anyway, because currently type of menu is separated from menu items and that causes some issues.
• If one sets menu to "confirm by releasing" and there is no empty space in center, there is no way to dismiss it without selecting some item. But I'm not sure if that's bug or feature.

Anyway, I'm porting radial menu right now, so I'll try to get as much of this as possible :)

[Tsudico]

Regarding your exceptions:

1. I didn't consider highlighting for hovering, just the displaying to begin with so you make a good point.
2. I like the idea of using separators, even if only temporary, to set up the rings. If it makes it quicker to implement, so much the better.
3. If the radial has multiple rings perhaps you can check to see if there is only a single item before the first separator? If there is then the person is purposely having a central element, so they are using it as a feature. For multiple elements perhaps a small central area could work. I'm not sure how small the center could be and still be selectable.

[kozec]

If the radial has multiple rings perhaps you can check to see if there is only a single item before the first separator?

Yes, that's exactly what I did :)

I've just added pre-release with radial menu support, but I'd like to leave this open as I'd like to do that design you have on your picture as well, but while I can draw it without any problem, I currently don't have any idea how to create window with such "complex" shape on Windows.

[Tsudico]

I'd like to do that design you have on your picture as well, but while I can draw it without any problem, I currently don't have any idea how to create window with such "complex" shape on Windows.

Are you talking about the picture showing a radial menu in Steam Input overlay? If so, can you create a boarderless window with a transparent background? That should allow you to draw whatever shapes you want and make it appear curved even if the window is rectangular. If the current API you use doesn't support that, you might need to use DirectX or OpenGL which may not be worth it. I did find this stackoverflow page with possibly how to do it with those:
https://stackoverflow.com/questions/3266346/how-to-overlay-graphics-on-windows-games