Visualizing Layouts with Skulpture

Most complaints about the Oxygen widget style are about the large “whitespace” it has. To improve the situation, some deeper knowledge of Qt layouts is required. But before diving into the world of Qt layouts, let me start with a short list of Skulpture related news:

  • Skulpture on Ubuntu: Starting with Ubuntu 9.04, Skulpture will be part of the official Ubuntu repositories, so you can now file bug reports using the LaunchPad.
  • Skulpture on KDE 4.3: If you are using KDE from trunk, you should use the 0.2.2.5 snapshot version, as this fixes some minor issues with ToolButtons and document mode TabBars.
  • Skulpture on Windows: User “SABROG” posted on forum CrossPlatform.RU that he has successfully compiled Skulpture 0.2.2 on Windows XP, as a pure Qt style (without KDE dependency) using the MinGW development environment.

Qt Layouts

The layouting classes in Qt are responsible for computing the position of widgets, taking into account their sizes. Empty space between widgets, the “spacing” property, is required to visually group widgets, as well as to make the user interface visually pleasing. A second property of layouts, the “margin” value, affects the empty space around widget groups and dialogs. Now there is an ongoing discussion about how much space is adequate, and how much is excessive.

In the end, the user should decide. On a device with limited screen estate, it might be reasonable to trade some elegancy in order to get more information displayed. One of my goals is to make KDE ready for customizable layouts. The application developer or designer must not set fixed spacing values in the user interface for this to work.

With Qt 4.3 the layouting capabilities of Qt improved significantly. A style can provide metric hints to the application using the layoutSpacing() and pixelMetric() functions; setting the layout spacing and margin values within the application is usually not neccessary. Unfortunately, old code or user interface description files might still set fixed values, either directly or indirectly.

Layout Visualization

The first (and most important) step is to make developers aware of this issue. Using Skulpture it is possible to change the layouting properties, but it is hard to see if the application really respects these style hints. With the latest Skulpture snapshot it is now possible to visualize fixed spacing values in layouts. To try this, add the following to the file .config/SkulptureStyle.ini:

    [Layout]
    VisualizeLayouts=true

Now if you run a Qt or KDE application with this style, the layouts will be colored. If you only see green lines around your widgets, everything is perfect; problematic layouts are indicated by differently colored backgrounds. I will write about the meaning of the colors and the possible solutions in a future announcement.

Visualizing a Perfect Layout (Qt Designer Settings):

Visualizing a Perfect Layout (Designer)

Visualizing a Problematic Layout (Session Management Settings):

Visualizing a Problematic Layout (kcmsmserver)

About these ads

4 Comments »

  1. It was about time to get rid of all that KDialog::marginHint and KDialog::spacingHint usage in K3b. Thanks for the hint.

  2. The “bad layout detector” sounds like a pretty damn handy idea – I’ll make sure to check that out soonish :)

    Cheers, Mark.

  3. Anon said

    great! I’m looking forward to read post about meaning of the colors and the possible solutions for this

  4. […] This may be a problem when customizable widget fonts are supported in the future. With the Skulpture layout visualizer, you can easily spot those widgets; they are rendered with an annoying red […]

RSS feed for comments on this post · TrackBack URI

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s

Follow

Get every new post delivered to your Inbox.

Join 137 other followers

%d bloggers like this: