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)

Advertisements

Minimalistic Window Decoration

There are already a few alternatives to the Oxygen window decoration available for KDE 4: Some ship with KWin, some are available on kde-look.org. Common to all these decorations is that they have some rendering code, either using painting calls, or by combining PNG picture tiles in deKorator.

For Skulpture, I tried something different. As Qt supports MDI windows, the Skulpture window decoration client simply uses the Qt style to paint the window title bar decoration. This has the advantage that the code is shared between the two window types.

Using the Skulpture window decoration, you can make the borders as small as 0 pixels. You can also change the size of the title bar, because the glyphs for the buttons and the icon are scalable. See this image for an extreme example.

Now if you do not like the look of Skulpture, but prefer a different style, you might be interested in the experimental “QtStyle” option of the window decoration. This option can be used to select a different Qt style in Skulpture. To try it, edit the file .kde/share/config/kwinskulpturerc and add the following:

[General]
QtStyle=Oxygen

In theory, it should work with any Qt style. For example, this feature can also be used to get a Float style window decoration. If you like this feature, please tell me, so that I can improve it.

Skulpture window decoration using the Qt style Oxygen

Do not try this on KDE 4.0, though, as you hit the famous “green window title bar bug” 🙂

Global Strut Feature

With todays variety of devices KDE runs on, it is getting harder to support them equally well in applications. With display resolutions getting higher, touchscreen interfaces demand bigger controls to keep them accessible. You can often get these by just increasing the font size. Some widgets, however, do not scale well (such as scroll bars), and this is where Qt’s “global strut” feature comes in.

To try this, run the “qtconfig” application, and change the minimum width/height values on the “Interface” page. Now applications should respect these sizes for clickable controls.

qtconfig Global Strut

For Skulpture 0.2 the layouting code has been much improved. Not only does it support configuring the size of (and spacing between) elements, but also fully supports the global strut feature. As a special bonus, Skulpture makes sure even spin up/down controls stay accessible in spin boxes by placing them next to instead of above each other. You might also appreciate this feature, if you are just a mouse or pen user.

Skulpture with 20x20 pixels global strut