Customize QDial

[Jayes]

Hi,

I would like to change the look of QDial. More precisely: I would like to change the color of the position indicator or replace the bitmap that is used to draw it (if so).

Subclassing is the way to go, no doubt, but where do I go from there? paintEvent does not get me anywhere.

Any ideas on this?

Thanks, JS

[high_flyer]

Subclassing is the way to go

I am not sure about that (all though it definitely is a way).
Try using a style sheet with the ::groove or ::handle sub control.
It just one line of code, so its easy and quick to test.

[Jayes]

I can't change the default graphics is any way, but using paintEvent I can superimpose a little pixmap on the dial. And that is what I did. It just takes a little math to figure out how to translate the linear values of the dial into circular coordinates. Works like a charm.

[high_flyer]

I can't change the default graphics is any way, but using paintEvent I can superimpose a little pixmap on the dial.

Well, I am not sure what you mean, since overloading paintEvent() IS changing the default painting.
With style sheets you actually are not touching the original painting code, and don't need to subclass/override, and you have a grater level of customization with out the need to recompile the code if you load the style sheet from a file at runtime.
But, if you have solution that works for you, that is fine!

[Jayes]

The truth be told: I could not figure out how to change the handle using styles. If I had a QDial named my_dial and an image loaded in a QPixmap named my_hanle ... how would I proceed?

I searched the net and came up with something like

QDial::handle:horizontal { height:6px; width:6px; image:my_handle; } ;

but just adding that line does not work (and I'd be surprised if it did).

Could you give me a complete example for this situation please?

thanks,

JS

[high_flyer]

No worries, this forum is for asking questions,just be prepared to read and think if you really want to get to answers.
So, as starters, here is the full Qt Sylesheets doc:
http://doc.trolltech.com/4.7/stylesheet.html

Could you give me a complete example for this situation please?

pMyDial->setStyleSheet("#pMyDial::handle { color: red }");

This is what I meant that its just one line of code, and should be easy to test if QDial indeed allows styling with stylesheets. (The documentation only specifies its parent classes)
You can also use 'background' with an image, or a color.

Note1: I didn't run this in a compiler, so if it doesn't compile, try to figure it out or ask again.
Note2: This is only one way of doing this. If you read the docs you will see other ways as well.

[Jayes]

Thanks!

I tried various options (in the subclass, since it was there anyway). For example:

this->setStyleSheet("#QDial::handle:horizontal { height:6px; width:6px; image:img_handle;}");

I replaced QDial with 'this' and also tested your 'color' example.

None had any effect. I was afraid of that because QDial does not even change when I choose a different desktop style, as opposed to QSlider and other widgets.

Back to the other method...

cheers,

--
JS

[high_flyer]

this->setStyleSheet("#QDial::handle:horizontal { height:6px; width:6px; image:img_handle;}");

I would call this from outside the object it self, since there you can specify the specific obejct as I have in my style sheet.
You probably don't need horizontal, since it makes no sense in the QDial.
I would not go for image for starters, since the chance you have problems with the path resolution is high (as you are totally new to this)
The '#" selctor selcts object no classes, see my example code.

However:

I was afraid of that because QDial does not even change when I choose a different desktop style, as opposed to QSlider and other widgets.

I share that concern, which is why I offered the one line test option.
If may very well be the QDial has a spacial rendering which does not adjust to styles.
In that case, you will really have to override paintEvent().

[Jayes]

I now used QDial as provided (no subclassing).

dial_volume = new QDial();

next

dial_volume->setStyleSheet("QDial::handle { color: red }");

or

dial_volume->setStyleSheet("#dial_volume::handle { color: red }");

has no effect.

That settles it I suppose. QDial has a mind of its own

Thanks for your help.

JS

[dpatel]

I also had similar requirement to customize QDial. All I could do using stylesheet is change the background color. I ended up subclassing QDial and handling paintEvent().

[kachofool]

I can't change the default graphics is any way, but using paintEvent I can superimpose a little pixmap on the dial. And that is what I did. It just takes a little math to figure out how to translate the linear values of the dial into circular coordinates. Works like a charm.

Could someone please elaborate on how to overload paintEvent() for QDial or show an example? How do I figure out which parts of the widget I need to draw, etc?