[sugar] Pie menus with descriptive footers, and SimCity pie menu demo

Don Hopkins dhopkins at DonHopkins.com
Fri Mar 2 07:08:33 EST 2007


Cairo and Pango totally rock!

I've implemented markup text labels and graphical icons for pie menu 
items, and you can control how the icon is positioned relative to the 
text label (supporting all eight compass directions), so you can lay out 
labeled icons in different directions as appropriate, so pie menus with 
labeled icons look nicer.
Note that you can set the item's lolite_fill_color and 
lolite_stroke_color to None to eliminate the boxes around labels and 
icons when they're not selected, to make pie menus with lots of items 
look less cluttered.

And I've also added footers to pie menus to display help text. (Just 
like the header, but at the bottom, with its own set of parameters to 
control it, and a method to change it dynamically.)
The pie menu can be configured with a static "footer" markup text, which 
it will show at the bottom, and it has other parameters for controlling 
the footer color and font and layout.
By default I made the footer the same color as the selected item 
highlighting, to tie them together visually, but with a smallish font so 
you can display a lot of text. You can put newlines in the text and it's 
broken into separate lines, and Pango also supports common html markup 
styles.
Each menu item can have its own markup text "description" that is shown 
in the footer of the pie menu when it's selected.
The pie menu also has a "neutral_description" that is shown in the 
footer when nothing is selected, and a "footer_descriptions" flag that 
defaults to True, which dynamically shows the description of the 
currently selected item (or the pie menu's neutral_description if no 
item is selected) in the footer during tracking.
If you set footer_descriptions to false, then you can set a static 
footer in the menu, or manually control the footer during tracking.
There's a setFooter method that takes care of dynamically re-laying out 
and reshaping the window if necessary.

The footer enables you to write some descriptive help text for the whole 
menu and for each menu item, so then you can use icons without labels or 
very short labels, thus making the pie menus more compact. As an 
example, I've put some help text on the top level pie menu demo, and on 
all the SimCity menus and items.

To demonstrate how icons can work together with help text in the footer, 
I've made a set of example pie menus for selecting SimCity editing tools 
(based on the graphics and layout of the old X11/TCL/Tk SimCity 
interface), in simcity_piemenus.py.
Note: They do not actually do anything -- it's just a simulated simulation!
I've taken screen snapshots of the SimCity pie menus, and added them to 
the page of pie menu pictures:

http://www.DonHopkins.com/home/piemenu.html

For even more fun, the dynamic menu tracking handlers (which gets called 
every time the mouse moves, or every time the item changes) can give the 
user dynamic feedback by showing markup text in the footer, so you could 
implement a continuous dial by looking at the pie menu's "direction", or 
pie menu items with "pull-out" distance parameters by looking at the pie 
menu's "distance"  (you can pull out a continuous distance to control 
linear values like font size or brightness, or pull out several discrete 
options: quantize and clamp the distance, and use it to index into an 
array of text sub-option descriptions that you show in the footer).

Eventually, for an even more immersive "direct feedback" interface, pie 
menus could be translucent (or have shaped windows with the middle 
punched out) to show the application content underneath, and the 
feedback could be applied directly to the application objects you're 
controlling (like actually setting the text size in the document as you 
pull out, in real time).

Here is a tar file of the Python piemenu.py as well as a demo 
simcity_piemenus.py and an images directory full of icons it uses:

http://www.DonHopkins.com/home/piemenu.tgz

And here is just the Python source code:

http://www.DonHopkins.com/home/piemenu.py

And the SimCity pie menu demo source code that's illustrated in 
piemenu.html:

http://www.DonHopkins.com/home/simcity_piemenus.py

I'm looking forward to demonstrating this and more stuff on the XO, at 
the Game Developer's Conference and the Serious Games summit in San 
Francisco, next week.
Please let me know if you'll be there and you'd like to meet up!

    -Don



More information about the Sugar mailing list