Radial Menu / Pie Menu implementation

I need a pie menu (aka radial menu)

Is there anywhere an implementation I can adapt or at least have a look at.
Since I’m not yet familiar with nifty, this would be a great help.

https://github.com/void256/nifty-gui/wiki there is no such thing in standard controls, so if your haven’t already found some custom controls containing what you need, you probably are going to have to implement it your self.

I made one of these a while back. It looks like this.

What I did was set up a new control in Nifty.

    <controlDefinition style="sb-quick-commands" name="sb-quick-commands">
        <panel style="#container">
            <panel id="#topleft" style="#topleft" childLayout="center">
                <text style="sb-font-default" text="Action 1" />
                <panel style="#holderleft" childLayout="center">
                    <text style="sb-font-default" text="1" color="#000f" />
                </panel>
            </panel>
            <panel id="#middleleft" style="#middleleft" childLayout="center">
                <text style="sb-font-default" text="Action 3" />
                <panel style="#holdermiddleleft" childLayout="center">
                    <text style="sb-font-default" text="3" color="#000f" />
                </panel>
            </panel>
            <panel id="#bottomleft" style="#bottomleft" childLayout="center">
                <text style="sb-font-default" text="Action 5" />
                <panel style="#holderleft" childLayout="center">
                    <text style="sb-font-default" text="5" color="#000f" />
                </panel>
            </panel>
            <panel id="#center" style="#center" childLayout="center">
                <text style="sb-font-default" text="Quick Menu" />
            </panel>
            <panel id="#topright" style="#topright" childLayout="center">
                <text style="sb-font-default" text="Action 2" />
                <panel style="#holderright" childLayout="center">
                    <text style="sb-font-default" text="2" color="#000f" />
                </panel>
            </panel>
            <panel id="#middleright" style="#middleright" childLayout="center">
                <text style="sb-font-default" text="Action 4" />
                <panel style="#holdermiddleright" childLayout="center">
                    <text style="sb-font-default" text="4" color="#000f" />
                </panel>
            </panel>
            <panel id="#bottomright" style="#bottomright" childLayout="center">
                <text style="sb-font-default" text="Action 6" />
                <panel style="#holderright" childLayout="center">
                    <text style="sb-font-default" text="6" color="#000f" />
                </panel>
            </panel>
        </panel>
    </controlDefinition>

Then I added some styles, for now everything is absolute positioned, this was for a proof of concept but I’d probably want to redo that at some point.

You will notice in the styles there is an effects definition, I use that for when displaying the menu. It makes it feel like it’s popping out at you.

    <style id="sb-quick-commands">
        <effect>
            <onShow name="imageSize" length="100" startSize="0.0" endSize="1.0" />
            <onShow name="fade" length="100" startColor="#0000" endColor="#000f" />
            <onHide name="imageSize" length="100" startSize="1.0" endSize="0.0" />
            <onHide name="fade" length="70" startColor="#000f" endColor="#0000" />
        </effect>
    </style>

    <style id="sb-quick-commands#container">
        <attributes childLayout="absolute" width="780px" height="200px" />
    </style>

    <style id="sb-quick-commands#topleft">
        <attributes width="329px" height="60px" x="16px" y="0px" backgroundImage="interface/textures/quickcommands/top_left_holder.png" />
    </style>

    <style id="sb-quick-commands#holderleft">
        <attributes width="35px" height="35px" align="right" valign="center" marginTop="3px" marginRight="50px" backgroundImage="interface/textures/quickcommands/holder_shortcut.png" />
    </style>

    <style id="sb-quick-commands#holdermiddleleft">
        <attributes width="35px" height="35px" align="right" valign="center" marginTop="3px" marginRight="10px" backgroundImage="interface/textures/quickcommands/holder_shortcut.png" />
    </style>

    <style id="sb-quick-commands#holderright">
        <attributes width="35px" height="35px" align="left" valign="center" marginTop="3px" marginLeft="50px" backgroundImage="interface/textures/quickcommands/holder_shortcut.png" />
    </style>

    <style id="sb-quick-commands#holdermiddleright">
        <attributes width="35px" height="35px" align="left" valign="center" marginTop="3px" marginLeft="10px" backgroundImage="interface/textures/quickcommands/holder_shortcut.png" />
    </style>

    <style id="sb-quick-commands#middleleft">
        <attributes width="296px" height="60px" x="0px" y="70px" backgroundImage="interface/textures/quickcommands/mid_left_holder.png" />
    </style>

    <style id="sb-quick-commands#bottomleft">
        <attributes width="330px" height="60px" x="15px" y="140px" backgroundImage="interface/textures/quickcommands/bot_left_holder.png" />
    </style>

    <style id="sb-quick-commands#center">
        <attributes width="175px" height="148px" x="303px" y="26px" backgroundImage="interface/textures/quickcommands/cm_center.png" />
    </style>

    <style id="sb-quick-commands#topright">
        <attributes width="329px" height="60px" x="435px" y="0px" backgroundImage="interface/textures/quickcommands/top_right_holder.png" />
    </style>

    <style id="sb-quick-commands#middleright">
        <attributes width="296px" height="60px" x="484px" y="70px" backgroundImage="interface/textures/quickcommands/mid_right_holder.png" />
    </style>

    <style id="sb-quick-commands#bottomright">
        <attributes width="330px" height="60px" x="435px" y="140px" backgroundImage="interface/textures/quickcommands/bot_right_holder.png" />
    </style>

Then in my main xml I define a new layer in my “game” screen. I fetch the “quick-commands” element in Java code and call element.show() on it.

<layer id="quick-commands" childLayout="center" visible="false">
    <control id="quick-commands-popup" name="sb-quick-commands" />
</layer>

Enjoy :smiley:

6 Likes

Thank you for your reply.

I moved away from nifty.

In case, somebody else is in need of a simple PieMenu, my (not quite perfect yet finished) implementation might be a starting point:

2 Likes

Looks cool. :slight_smile: Welcome to Lemur. :smiley: