A New Face for QDial

Published Tuesday March 31st, 2009
26 Comments on A New Face for QDial
Posted in Qt, Styles, Uncategorized

There are a few widgets in Qt that have been treated a bit like a stepchild to other widgets. One of these widgets is the QDial. To a certain extent this has been intentional. A normal flat slider is almost always a better choice usability wise and most platforms do not have a native equivalent so it has been left looking a bit out of place everywhere. In fact the only face lift it has received since Qt 3 days is a bit of anti-aliasing. In case you haven’t seen it, here it is in all it’s glory:

old dial

However lately there has been an increased interest in touch screen devices where QDial seems to make a bit more sense usability wise. Combined with the fact that it has always been an eye-sore in our styles example I decided to finally do something about it for 4.6. So here is the new and improved QDial:

new dial 2

As you see it’s a bit more shiny. It replaces the ugly focus rect with a subtle glow and it’s designed to look more like something more out of this century. Old styles like motif and windows classic will still get the old looks because that’s what they are… old, but on all our modern styles we will use the new one. I hope you like the change.

styles example
Edit: Added a new screenshot in a few different styles also showing the increased contrast.

Do you like this? Share it
Share on LinkedInGoogle+Share on FacebookTweet about this on Twitter

Posted in Qt, Styles, Uncategorized


Paulo Cesar says:

Wow, as people say, better late then never πŸ™‚

Gordon says:

R.I.P. πŸ™‚

cartman says:

Nice one. Now fix QLCDNumber widget too so we can happy πŸ™‚

ddevienne says:

“A normal flat slider is almost always a better choice usability wise”

Hmmm, not so for azimuth and angle inputs (like the slope of a geological horizon or fault), where the slider reinforces how the physical instruments uses to measure these look like. BTW, couldn’t the center picture be arbitrary and rotated automatically? Thanks, –DD

IAnjo says:

Very nice, and I agree with cartman, it would be great if QLCDNumber could also get a makeover πŸ™‚

stephenju says:

Nice. Makes me want to use it in my app for no good reason. πŸ™‚

It looks really great but I think it could use some more contrast to make it easier to see where the thing in pointing.

Enrico Ros says:

Looks really nice. I vote for a bit more contrast too (on the handle), looks a bit harder to see the pointer than the previous version. (or just adding a small arrow on the crown?).
And, of course: *performance* is good, isn’t it ?? πŸ˜‰

Jens says:

cartman, ianjo: I already toyed a bit with the idea of polishing QLCDNumber as well but I’m not sure if we can change it radically. Personally I’m not sure if it should be a Qt widget at all. You do know that even digital watches stopped being cool in the 70’s right? πŸ™‚
ddevienne: Note I did say “almost”. The picture idea seems a bit odd. In this case you probably just want to subclass it. Adding style sheet support for QDial might be a possibility though.
matt: Perhaps that would be a good idea. There is a difficult balance between aesthetics and function here but a bit more contrast probably doesn’t hurt.

Jens says:

@enrico: The background is cached as a pixmap so it only has to render it once and it is rendered through straight QPainter code so no SVG parsing is involved. In other words it should be plenty fast enough. Of course it cannot compete directly with the original but then again you should use motif style if performance is your _only_ priority… πŸ˜‰

Oh and I bumped up the contrast a bit. I’ll see if I can update the screenshot tomorrow.

Rahul Batra says:

Way to go! Hoping this will adapt well to each visual style..

Reed says:

One good thing about the old style was that its very easy to perceive the orientation of the dial at a glance. Actually orientation of a line in space is something our eyes are very good at picking up on. For example just step back from the screen a few meters and look at the screenshots above… you can tell the directions that the old style dials are pointing in. It would be nice if the new style had something like this. Perhaps a line from the center to the “thumb depression” or something like that?


Micke Prag says:

I like the new look on it, but is there any way to revert it for my application?
We are using the QDial to represent a hardware-switch and the new design doesn’t look like it anymore πŸ˜‰

Andreas says:

Micke: Have you tried assigning QMotifStyle to the dial? Otherwise you can use a proxy style.

Remi says:

Very nice indeed. It would be great to if we could add some labels on tickmarks (and also on QSlider).

David Johnson says:

It seems far too shiny for Plastique and Cleanlooks. Wouldn’t it be better to have each style have their own QDial look?

Wysota says:

I agree with David. Drawing should be done through QStyle API and implemented per style. The glowy focus thing will not fit plastique or cleanlooks. It looks too much “oxygen-ish”.

Jens says:

david, johnson: We already do that and as I said I will not add any gradients to flat themes (windows/motif) but I did make an effort to make it look good in the themes you mention. I posted a screenshot from a few different styles to show how it will would blend into them and I think you will agree they do not look terribly out of place compared with the original version. But again, as I said please do not start using this dial in your apps for no good reason. This is why I’m afraid to touch the LCD widget…

Thiago Macieira says:

The LCD widget has one purpose only: to be used in the Tetrix example πŸ™‚

(why do you think it was added to Qt in the first place?)

Alehuya! πŸ™‚ Nice to see some love to that widget. It is a kind of widget whose usability has been subject to a lot of discussion in linux audio community which lead to ‘phat’ toolkit based on GTK (gg:thorwil not-knobs). Some points to highlight there:
* As pointed out above, using a directed line as handle instead of a circular hole gives more .
* This effect can be reforced by adding a color circular bar around
* Setting the value on clicking is harmfull to applications that need soft control (audio!)
* Also jumps when circling from one side to another are harmfull, the physical metaphor of having found a knob clamp.

We have CLAM knobs (gg:clam qt knob) in qt but they are not based on styles and still far for efficient, but you can get some feelings of those usability ideas.

adr says:

” It replaces the ugly focus rect with a subtle glow and it’s designed to look more like something more out of this century.”

A little /too/ subtle IMO; I have a hard time seeing if it is focused or not.

Chris says:

Great Jens, love the new style! I’ve never used it because of the ugly style, but the new one is gorgeous!

Matthias says:

I just don’t understand, why it is not possible to change the knob image via stylesheet.

Consider the following:

Someone wants to make a nice looking SciFi style software synthesizer with nice spacey chrome polished knobs.
Unfortunately he can’t because he must use the standard design of the widget. It is just possible with some heavy

But anyway, I must admit, that the new knob looks much better. πŸ˜‰

Matthias says:

Forgot to mention : The same for the sliders, the image for the slider itself should be changeable via stylesheet.

Commenting closed.

Get started today with Qt Download now