Results 1 to 7 of 7

Thread: Irregular shaped QPushButton

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Join Date
    Feb 2010
    Posts
    18
    Thanks
    2
    Qt products
    Qt4
    Platforms
    MacOS X Windows

    Default Irregular shaped QPushButton

    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

  2. #2
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,368
    Thanks
    3
    Thanked 5,018 Times in 4,794 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: Irregular shaped QPushButton

    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.
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  3. #3
    Join Date
    Feb 2010
    Posts
    18
    Thanks
    2
    Qt products
    Qt4
    Platforms
    MacOS X Windows

    Default Re: Irregular shaped QPushButton

    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

  4. #4
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,368
    Thanks
    3
    Thanked 5,018 Times in 4,794 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: Irregular shaped QPushButton

    Quote Originally Posted by JonnyJP View Post
    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.
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  5. #5
    Join Date
    Feb 2010
    Posts
    18
    Thanks
    2
    Qt products
    Qt4
    Platforms
    MacOS X Windows

    Default Re: Irregular shaped QPushButton

    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.

    Quote Originally Posted by wysota View Post
    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?

  6. #6
    Join Date
    Jan 2006
    Location
    Warsaw, Poland
    Posts
    33,368
    Thanks
    3
    Thanked 5,018 Times in 4,794 Posts
    Qt products
    Qt3 Qt4 Qt5 Qt/Embedded
    Platforms
    Unix/X11 Windows Android Maemo/MeeGo
    Wiki edits
    10

    Default Re: Irregular shaped QPushButton

    Quote Originally Posted by JonnyJP View Post
    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.
    Last edited by wysota; 6th February 2012 at 15:01.
    Your biological and technological distinctiveness will be added to our own. Resistance is futile.

    Please ask Qt related questions on the forum and not using private messages or visitor messages.


  7. #7
    Join Date
    Feb 2010
    Posts
    18
    Thanks
    2
    Qt products
    Qt4
    Platforms
    MacOS X Windows

    Default Re: Irregular shaped QPushButton

    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.

Similar Threads

  1. Custom Shaped QPushButton
    By frknml in forum Qt Programming
    Replies: 1
    Last Post: 6th December 2010, 14:28
  2. Round Icon shaped QPushButton Click event
    By kcsomisetty in forum Qt for Embedded and Mobile
    Replies: 1
    Last Post: 16th June 2010, 06:52
  3. QML button from irregular svg image - hover state
    By thomasfreedy in forum Qt Programming
    Replies: 0
    Last Post: 5th May 2010, 03:13
  4. Irregular data and QwtPlotSpectrogram
    By seveninches in forum Qwt
    Replies: 1
    Last Post: 27th January 2008, 10:52
  5. Irregular window shapes
    By Salazaar in forum Newbie
    Replies: 2
    Last Post: 21st June 2007, 14:52

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Qt is a trademark of The Qt Company.