Irregular shaped QPushButton

[JonnyJP]

Hi,
Is it possible to create a QPushButton but style it so it isn't rectangular / rectangular with curved edges? Our design has some signpost style buttons and at the moment we're using signpost shaped .pngs. It's not possible to change the colour of the buttons without changing the .png which is a problem as our UI needs to be fully customisable. For other buttons we just use the style sheets components like gradient effects etc.

An ideas how to do this if it is possible?

Cheers

[wysota]

You can implement any shape you want if you reimplement drawing and event handling. The only limitation is that the widget has to have a bounding rectangle.

[JonnyJP]

Thanks. So I need to subclass QPushButton to do this, I thought that might be the case.

In that case, would I still be able to apply a stylesheet to the button? We have a stylesheet that uses a gradient and outline and I'd like to use the same stylesheet except that it will be applied to a sign post shaped image.

Do you have an example of what the paint function should look like to allow this? I found an example here but it doesn't seem to reference anything from a stylesheet...

http://www.qtcentre.org/archive/index.php/t-42730.html?


Cheers

[wysota]

In that case, would I still be able to apply a stylesheet to the button?

No, stylesheets are not supported on custom widgets. I mean you could apply it but then what's the purpose of making a custom button in the first place.

We have a stylesheet that uses a gradient and outline and I'd like to use the same stylesheet except that it will be applied to a sign post shaped image.

No, that's not possible at all. You have to create the gradient manually while painting.

[JonnyJP]

Thanks for the reply.

The UI as it is designed has normal shaped buttons and sign post shaped buttons (for next / previous commands) and it must be easy to adjust the colour / gradient of both types since our UI will be skinnable. Our senior engineer suggested getting a graphics company to produce all of the buttons in different colours for us which is kind of pointless when the image is only a gradient with an outline, i.e. exactly what stylesheets are designed to do (and it would cost time and money to get these images).

I suppose it would be fairly straightfoward to read the styles from file and then make sure they're used in the paint function, I would have just preferred the skinning to be consistent with stylesheets like everything else.

I mean you could apply it

What do you mean? You said stylesheets aren't supported on custom widgets but then you said I could apply it?

On another note, how does the standard QPushButton's paint function get the information contained in the stylesheet? Is it constructed by the moc when the source and headers files are created from the .ui?

[wysota]

The UI as it is designed has normal shaped buttons and sign post shaped buttons (for next / previous commands) and it must be easy to adjust the colour / gradient of both types since our UI will be skinnable. Our senior engineer suggested getting a graphics company to produce all of the buttons in different colours for us which is kind of pointless when the image is only a gradient with an outline, i.e. exactly what stylesheets are designed to do (and it would cost time and money to get these images).

There is no way to apply stylesheets to custom shapes.

I suppose it would be fairly straightfoward to read the styles from file and then make sure they're used in the paint function, I would have just preferred the skinning to be consistent with stylesheets like everything else.

This is not so easy.

What do you mean? You said stylesheets aren't supported on custom widgets but then you said I could apply it?

I mean technically you can use stylesheets on custom widgets but only to an extent as you would use it on a plain QWidget (which is well... empty) or whatever the superclass of your widget is (where it is required that you draw the original shape of the widget). There is no way to control the way stylesheets are used with whatever you do in your paintEvent() except by drawing primitives offered by QStyle and handled by the stylesheet proxy behind it.

On another note, how does the standard QPushButton's paint function get the information contained in the stylesheet?

It calles QStyle API that performs the task. Since there is no API in QStyle for drawing triangular buttons you can't do the same for your custom widget. Of course you can parse stylesheets on your own (including all the inherited and conflicting definitions) but then you'll end up with effectively reimplementing the stylesheet mechanism.

In your case it might be much easier to have a grayscale template for your shape and colour it on the fly with a given colour, that's pretty straightforward. Another possible and practiced approach is to use SVG for your graphics.

[JonnyJP]

First off, thanks for your replies they've been helpful.

This is not so easy.

I was thinking of just subclassing QPushButton and parsing my own basic stylesheet file which would be fairly easy to do. I don't want to do that though as the styles would be inconsistent or else I'd need to do it for every control which seems overkill for something that can be resolved with a .png.

I also created a QGraphicsEffect that masked the button into a signpost shape. It worked quite well but there were issues with the outline, especially when the button was depressed.