Results 1 to 14 of 14

Thread: Three pushButtons in a shape of one

  1. #1
    Join Date
    May 2009
    Location
    Poland
    Posts
    7
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Three pushButtons in a shape of one

    Hi all,

    It finally happened - I have a problem.
    I want to make a custom QPushButton with three separated areas doing different actions. See the attachment for mock-up.
    I managed to draw it (as you can see) and even implement the actions I want, but I'm stuck with the look, I have no idea how to change the state of just one part of the button.
    So, the question is: How to create such button with the ability to change the state of each part, without actually splitting it into three (because it will look..weird)?
    Attached Images Attached Images

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

    Default Re: Three pushButtons in a shape of one

    It depends what you want to do. You can easily shift the text when the appropriate part is pressed, that's for sure. It's really all about drawing. And you can always go the easy way and do this:
    Attached Images Attached Images
    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
    May 2009
    Location
    Poland
    Posts
    7
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Three pushButtons in a shape of one

    Of course I know I can do it that way, but my way looks better and that's the only thing I really want to achieve.
    As for the text shifting, I know it too, but I don't want this button to behave different than others.

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

    Default Re: Three pushButtons in a shape of one

    So what do you want it to do?
    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
    May 2009
    Location
    Poland
    Posts
    7
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Three pushButtons in a shape of one

    A graphical mock-up is always best right? Now I'm at home, so I managed do make one. The first one is hovered state and the second is pressed state.
    Attached Images Attached Images

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

    Default Re: Three pushButtons in a shape of one

    And what is the problem?
    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
    May 2009
    Location
    Poland
    Posts
    7
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Three pushButtons in a shape of one

    The problem is...I can't get it to work . Those above were just images made in GIMP.

  8. #8
    Join Date
    Sep 2008
    Posts
    18
    Thanks
    2
    Thanked 3 Times in 3 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11

    Default Re: Three pushButtons in a shape of one

    There's no reason why three separate buttons would look weird. Simply put them in layouts with layoutSpacing set to 0 and there won't be a space between them.

    If you're still not happy with how this looks, you'd have to subclass QPushButton and reimplement the paintEvent and do all the drawing yourself, but without a lot of work it would probably look even more weird than this.
    Attached Images Attached Images

  9. #9
    Join Date
    May 2009
    Location
    Poland
    Posts
    7
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Three pushButtons in a shape of one

    Yes, I know I'll have to subclass QPushButton and I already started, but I'm stuck with those states. I have to change the look of just one part of the button and I don't know how to do this.
    Maybe I'll have to take the gradient (or how it's called?) from the style and draw it above the actual button? I really don't know .

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

    Default Re: Three pushButtons in a shape of one

    Quote Originally Posted by Kenji_Takahashi View Post
    The problem is...I can't get it to work . Those above were just images made in GIMP.
    I still don't get what the problem is. Use QPainter to draw the things you want drawn.
    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.


  11. #11
    Join Date
    Sep 2008
    Posts
    18
    Thanks
    2
    Thanked 3 Times in 3 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11

    Default Re: Three pushButtons in a shape of one

    I don't understand where you're stuck -- is drawing the problem, or knowing which part was pressed?

    I guess you should reimplement QMouseEvent and handle mouse clicks/releases within the button, find out which part is being pressed (you know the cursor position) and in paintEvent respond by drawing the button accordingly.

    How you draw the buttons is entirely up to you, you could draw the whole button and then paint over the pushed part like you suggested or draw them separately and do different drawing for the one that is pushed. There shouldn't be a problem here, it's just a matter of how you want it to look.

  12. #12
    Join Date
    May 2009
    Location
    Poland
    Posts
    7
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Three pushButtons in a shape of one

    I already reimplemented the mouse events (actions are working, as I wrote in first post).
    I want it to have the look of current system style. It's actually one button and when I hover/press the "1/1" button it has to take "upper" part of the style and the "Submit" one has to take the "lower" part . Without changing the rest of the button, ofc.
    I'll play with it again later, when I'll be back home.

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

    Default Re: Three pushButtons in a shape of one

    But what is the problem? You don't know how to follow the look of the style? Use QStyle::draw*() methods.
    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.


  14. #14
    Join Date
    May 2009
    Location
    Poland
    Posts
    7
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: Three pushButtons in a shape of one

    Uh, alright, you were assuring me so much that it should be easy, so after a long night and strange code flying around , I think I managed to do it the way I meant.

    Anyway, thanks for your time and hope I won't have such strange problems anymore .

Similar Threads

  1. Saving the widget class as a QPixmap
    By zgulser in forum Newbie
    Replies: 11
    Last Post: 2nd February 2009, 09:48
  2. how to change backgroup color, button color and shape?
    By lzha022 in forum Qt Programming
    Replies: 10
    Last Post: 16th June 2008, 22:25
  3. shape of a pushbutton
    By sabeesh in forum Qt Programming
    Replies: 3
    Last Post: 16th August 2007, 08:58
  4. Shape changing under other tab using slider/spinbox
    By kramed in forum Qt Programming
    Replies: 2
    Last Post: 7th August 2007, 19:59
  5. Custom Shape Widget (resize)
    By PiXeL16 in forum Qt Programming
    Replies: 7
    Last Post: 12th February 2007, 07:00

Tags for this Thread

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
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.