September 15, 2007

[status update] Menu System

Filed under: Uncategorized — alsuren @ 1:29 am

= The Good =
+ entries are sorted by title (A=black, Z=white, and layed out in a
predictable position.)
+ It works as an application launcher, or as a web-based links page
+ You can try it yourself:
$ sudo aptitude install git-core pyqt4-dev-tools libqt4-dev qt4-designer python-xdg xdg-utils python-sqlite kdebase-bin
$ git clone
$ python

= The Bad =
– Currently, it just picks the first menu entry it finds for each program, and
doesn't prefer working/svg icons over broken/pixelated ones
– It needs a name! Post ideas here:

= The Future =
+ I reckon my menu system could be adapted to work with file menus as well
(create a DataEngine that understands KDE's XMLGUI crap). That would be
hardcore (and *better* than MS Office's ribbon, with less manual work).
+ Add an info panel at the bottom, for more verbose info on entries.
+ Make a data engine with a[n incremental] search function that modifies the
+ Add sub-folders to the menu, which cause the entries within to stand out.
+ Experiment with regions that contain other regions
+ Experiment with highlighting to show newly available/last used entries.
+ Make the data engine thread-safe, and event-driven.
+ Port to Plasma for KDE4

= The Inner workings =
There are 3 components:
* Data Engine
* Layout Engine
* Rendering Engine

The Data Engine is responsible for collecting and ordering data, and assigning
scores. It is also responsible for compiling the data into a 1-D list of
The Layout Engine takes the 1-D list of entries, and maps each entry into a
region (of one or more squares on a 2-D space). It passes this data to the
rendering engine by calling draw_square() repeatedly. It also calculates the
center of the region, using a bit of GCSE maths.
The Rendering Engine deals with the user interface crap. It draws the squares,
and deals with clicks by sending them to the data engine.

The layout algorithm is a case of "cut parent square into 4 children, and
repeat until there is only 1 entry in each child square, then paint."
The sub-dividing and checking for entries is done in 1-D rather than 2-D, so
it's pretty fast.
The slow bit is the rendering, which is done using C libraries anyway :D.

= "But how do you make it look so pretty?" =
I fudge it. I leave a gap with no information in it. That way, "there is only
1 entry in the child square" happens after only a few sub-divisions. This is
something that I stumbled upon by accident, when I fed it some bad input

To give you an idea of how nasty it *could* look, this is a picture drawn with
the gaps as normal:
< >
and this is the picture with
< >
brown=fudge (I decided on fudge_factor rather than blur, as that's what it is)
lines are drawn in the brown by sub-dividing, to create the simplest possible
regions (ie ones with the largest/fewest squares).



  1. *thinks it has a way to go before beating MS Office’s ribbon, but encourages you nonetheless*. nah really, it seems to be coming along nicely – maybe if you get a beta release for the desktop out at some time you might force me to boot up linux…

    Comment by Alex — September 18, 2007 @ 8:00 pm

  2. The section you entitled “The Inner Workings” should by rights have been “The Ugly”, and should have come before “The Future”. :p You could even have put a bit of the content that’s under “The Future” before “The Good”, and then had “Back to the Future” after “The Ugly”.

    I’ll get my coat?

    Comment by Stuart — September 18, 2007 @ 9:26 pm

  3. @stu: *laughs* I like it. I tend to avoid modifying past posts though

    @alex: The install is only a few commands. You can get it from git already.

    I really need to turn it into a desktop applet though.

    Comment by alsuren — September 19, 2007 @ 5:39 pm

RSS feed for comments on this post. TrackBack URI

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

Create a free website or blog at

%d bloggers like this: