PDA

View Full Version : VistaGlassButton widget for Qt 4



JimDaniel
13th February 2008, 06:26
For a current project I subclassed a QPushButton and re-painted it to look like a Vista Aero glass button. You use it like a normal QPushButton, except there are two public methods - setColor(QColor color) and setShadow(QColor shadow). Color is the red area in the image below, Shadow is the black center. Anyway, I thought it might come in handy for people wanting a look like this or for anyone wondering how to go about redrawing a widget:

http://i209.photobucket.com/albums/bb277/bresson29/vistaglassbuttons.jpg

You can download the class here:

http://www.mediafire.com/?e2v82uujtin

Enjoy!


*I haven't tested this class extensively, but it works okay for normal-looking buttons. If you start doing crazy things with it, however, it might go wonky. Feel free to modify/improve to your heart's content...

evgenM
13th February 2008, 09:09
look great, but if u add border for button it will be awesome :)
waiting for new vista style widgets...

JimDaniel
13th February 2008, 17:12
Thanks, there is a slight border now but you can barely see it. I will make it a bit wider to match the style.

Yes, several things are not quite right that I intend to fix. For one thing you can't an icon to this button as of now, and also it does not use the buttons font info to generate the text. And I need to add a public method to set the transparency of the button. But I plan to upload any changes I make here, so feel free to make any other suggestions.

JimDaniel
14th February 2008, 05:27
I can't seem to stop fooling with this button class. :) Today I added most of the features I felt were missing and renamed it AeroButton. It now functions exactly like a QPushButton except you can't yet display both icon and text. It provides an extremely simple yet flexible API:

setColor(QColor color);
setHighlight(QColor highlight);
setShadow(QColor shadow);

*shadow is not the depressed state color, which is calculated automatically, but the center gradient, the black area in the image below.

setRoundess(int roundess);
setOpacity(qreal opacity);

http://i209.photobucket.com/albums/bb277/bresson29/aerobutton.jpg

I hope someone is able to use it. Let me know what you think and what I can do to improve...

Download:
1981

elcuco
14th February 2008, 14:37
License, copyright ...? GPL? LGPL? BSD? Who is the author?

JimDaniel
14th February 2008, 15:15
License, copyright ...? GPL? LGPL? BSD? Who is the author?

I'm the author. :) No license, no copyright, you can do with it whatever you like...

elcuco
14th February 2008, 17:08
Then put on the sources "Public domain". Otherwise, I am not authorized to use it.

THANKS!!!

JimDaniel
14th February 2008, 17:55
Public Domain Version:
1982

Using the code, I noticed the black outline does not look exactly right the more round you make the button. You have to tweak it to get it to look just right. Honestly, the formula for drawing the outline seems a bit clunky. If anyone uses the code and sees how drawing the outline can be improved, please let me know...

jpn
14th February 2008, 18:02
Psst! Feel free to put it on our wiki if you want to. There's a special custom widgets page which didn't yet reach the popularity I hoped. ;)

JimDaniel
14th February 2008, 19:03
Now on Qt Centre's wiki:

http://wiki.qtcentre.org/index.php?title=AeroButton

sunil.thaha
20th February 2008, 05:18
Looks awesome !!
And thank you for sharing the code with us :)

wysota
21st February 2008, 13:35
Isnt't the button look achievable using stylesheets without any subclassing? A simple border+border-radius+linear gradient as a background.

One way or the other I suggest you use the palette (QWidget::palette) instead of having methods for setting custom colours. This way your widget will become easily customizable and stylable out of the box.

JimDaniel
21st February 2008, 17:00
Yeah, as long as a style sheet can handle the opacity properties and the roundness of the button, I'm sure you could. There are a couple of layers involved, with different opacities. Can a style sheet handle this well? I'm not too familiar with css. But from a design perspective, doesn't it seem dirty to clutter the code with all those style sheet properties. Wouldn't it be much cleaner to just have a class to use when you want this style of button?

As far as using the widget's palette, I'm not sure what you mean. I'm still quite the beginner with Qt. I just did it the best way I knew how. So if you can elaborate a bit more, I would be grateful.

Also, while we're discussing what's wrong with my class, one thing that troubles me is that the correct signals for a push button are no longer emitted. I call click() myself in the mousePressEvent() override. Is there an easy way to let the default signals be emitted?

fullmetalcoder
21st February 2008, 17:47
As far as using the widget's palette, I'm not sure what you mean. I'm still quite the beginner with Qt. I just did it the best way I knew how. So if you can elaborate a bit more, I would be grateful.
Have a look at QPalette (http://doc.trolltech.com/latest/qpalette.html).


Also, while we're discussing what's wrong with my class, one thing that troubles me is that the correct signals for a push button are no longer emitted. I call click() myself in the mousePressEvent() override. Is there an easy way to let the default signals be emitted?
You just have to "forward" the events, e.g. :


void AeroButton::mousPressEvent(QMouseEVent *e)
{
// your code here...

QPushButton::mousePressEvent(e);
}

JimDaniel
21st February 2008, 18:26
Awesome, thanks fmc!

wysota
22nd February 2008, 08:18
BTW. "click()" should be emitted in the release event, not press event.

As for a separate class - what exactly the button is meant for? Is it a regular Vista push button? If so, you should get the looks out of the box when using an appropriate widget style.

fullmetalcoder
22nd February 2008, 09:57
As for a separate class - what exactly the button is meant for? Is it a regular Vista push button? If so, you should get the looks out of the box when using an appropriate widget style.
Wild guess : hard-coded styling of the application, just like the window decorations related thread we had some time ago... Or could also be an attempt to bring Vista look'n'feel to other platforms (but this ought to be done through a QStyle subclass).

JimDaniel
22nd February 2008, 17:17
No, I call it a Vista glass button, but really the glassy look is just a popular visual style nowadays, it just happens to be popularly used in Vista so I called it that.

Our project needed a button like this and I was experimenting with the paintEvent(). That's all really.

You gurus might have forgotten, but when you first start using Qt, how things work is not always as self-explainatory as it seems. I would have loved to have examples like this when I first started. Maybe there are better ways to do what I did, but this method seems perfectly valid for our intentions.

wysota
22nd February 2008, 20:03
No, I call it a Vista glass button, but really the glassy look is just a popular visual style nowadays, it just happens to be popularly used in Vista so I called it that.
If you use that style then yourr application buttons should automatically take the same look without any custom classes or stylesheets. Of course on Vista only, but that's quite natural.


You gurus might have forgotten, but when you first start using Qt, how things work is not always as self-explainatory as it seems. I would have loved to have examples like this when I first started. Maybe there are better ways to do what I did, but this method seems perfectly valid for our intentions.

Don't worry, we didn't say you have done something bad. I merely asked for the purpose of having the class. If it is a regular button on Vista then I suggest not using it and instead make your application adopt the look and feel from the operating system itself. That's a "Qt way" of doing things. If you are unable to have the buttons you need using regular methods, then feel free to use any custom classes you want - just beware your application might look strange or even stop working if someone runs it on a different system configuration.

ComaWhite
15th March 2008, 18:28
That looks awesome *drools*

maverick_pol
10th April 2008, 01:29
Hi,

I just wanted to thank for the code.

Kacper

nhs_0702
14th May 2010, 05:11
You can download the class here:

http://www.mediafire.com/?e2v82uujtin

Enjoy!


*I haven't tested this class extensively, but it works okay for normal-looking buttons. If you start doing crazy things with it, however, it might go wonky. Feel free to modify/improve to your heart's content...

link died,hihi,thank you if you reupload

Lykurg
14th May 2010, 09:59
link died,hihi,thank you if you reupload
Ehm, read the thread and you will find a working the link to our wiki...

steve.bush
14th March 2011, 20:34
Looks cool!!