[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