VistaGlassButton widget for Qt 4

[JimDaniel]

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:



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]

look great, but if u add border for button it will be awesome
waiting for new vista style widgets...

[JimDaniel]

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]

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);



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

Download:
AeroButton.zip

[elcuco]

License, copyright ...? GPL? LGPL? BSD? Who is the author?

[JimDaniel]

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]

Then put on the sources "Public domain". Otherwise, I am not authorized to use it.

THANKS!!!

[JimDaniel]

Public Domain Version:
PD_AeroButton.zip

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]

Psst! Feel free to put it on our wiki if you want to. There's a special [WIKI]custom widgets[/WIKI] page which didn't yet reach the popularity I hoped.

[JimDaniel]

Now on Qt Centre's wiki:

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

[sunil.thaha]

Looks awesome !!
And thank you for sharing the code with us

[wysota]

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]

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]

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.

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);
}

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

QPushButton::mousePressEvent(e);
}

To copy to clipboard, switch view to plain text mode 

[JimDaniel]

Awesome, thanks fmc!

[wysota]

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]

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]

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]

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]

That looks awesome *drools*