Results 1 to 7 of 7

Thread: QprogressBar Style Sheets: double linear gradient

  1. #1
    Join Date
    Apr 2009
    Posts
    18
    Thanks
    3
    Thanked 2 Times in 1 Post
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Unix/X11

    Default QprogressBar Style Sheets: double linear gradient

    Hi all. I wuold like to obtain a ProgressBar like this.

    I think I have to apply a double linear gradient but I don't understand how I can.

    Could you help me?

    Thank you

    Beppe
    Attached Images Attached Images

  2. #2
    Join Date
    Jan 2006
    Location
    Germany
    Posts
    4,380
    Thanks
    19
    Thanked 1,005 Times in 913 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows Symbian S60
    Wiki edits
    5

    Default Re: QprogressBar Style Sheets: double linear gradient

    I guess for that you have to subclass QProgressBar and draw it yourself. I can't imagine that that is possible with style sheets.
    In your paint method just draw the blue gradient and then the "transparent white" one (also see QPainter::CompositionMode).

  3. #3
    Join Date
    Sep 2008
    Location
    Bangalore
    Posts
    659
    Thanks
    116
    Thanked 42 Times in 41 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: QprogressBar Style Sheets: double linear gradient

    is this one u want ....
    QProgressBar::chunk {background: qlineargradient(x1: 0, y1: 0.5, x2: 1, y2: 0.5, stop: 0 #C71585, stop: 1 white)

  4. #4
    Join Date
    Jan 2006
    Location
    Germany
    Posts
    4,380
    Thanks
    19
    Thanked 1,005 Times in 913 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows Symbian S60
    Wiki edits
    5

    Default Re: QprogressBar Style Sheets: double linear gradient

    Quote Originally Posted by wagmare View Post
    is this one u want ....
    QProgressBar::chunk {background: qlineargradient(x1: 0, y1: 0.5, x2: 1, y2: 0.5, stop: 0 #C71585, stop: 1 white)
    Well, that's only a flat gradient, not a "3d simulated" one.

  5. #5
    Join Date
    Sep 2008
    Location
    Bangalore
    Posts
    659
    Thanks
    116
    Thanked 42 Times in 41 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows

    Default Re: QprogressBar Style Sheets: double linear gradient

    oh .. means like a 3d progressbar in 2d view ..? ..

  6. #6
    Join Date
    Jan 2006
    Location
    Germany
    Posts
    4,380
    Thanks
    19
    Thanked 1,005 Times in 913 Posts
    Qt products
    Qt4
    Platforms
    Unix/X11 Windows Symbian S60
    Wiki edits
    5

    Default Re: QprogressBar Style Sheets: double linear gradient

    Quote Originally Posted by wagmare View Post
    oh .. means like a 3d progressbar in 2d view ..? ..
    With style sheet you only get that flat effect:


    But if you paint it yourself you could archeive a sort of 3d look, note the little shiny white on top and bottom in that kde 4 oxygen example

    This you can't do with style sheets.
    Attached Images Attached Images

  7. #7
    Join Date
    Apr 2009
    Posts
    18
    Thanks
    3
    Thanked 2 Times in 1 Post
    Qt products
    Qt4 Qt/Embedded
    Platforms
    Unix/X11

    Default Re: QprogressBar Style Sheets: double linear gradient

    Thank you guys.

    I implemented the paint event of my class

    this is the code

    Qt Code:
    1. void myProgressBar::paintEvent(QPaintEvent *pe)
    2. {
    3. Q_UNUSED(pe);
    4.  
    5. QRect pb_rect = this->geometry();
    6. QColor pb_color;
    7. QColor m_shadow;
    8. QColor gradcolorH1;
    9. QColor gradcolorH2;
    10. int value;
    11. int max;
    12.  
    13. int margin = 0;
    14.  
    15. int altezza_nor;
    16. max = this->maximum();
    17. value = this->value();
    18. altezza_nor = (value*pb_rect.height())/max;
    19.  
    20. QPainter painter(this);
    21.  
    22. painter.setRenderHint(QPainter::Antialiasing);
    23.  
    24. m_shadow = QColor(19, 79, 236);
    25. pb_color = QColor(139, 213, 252);
    26. gradcolorH1 = m_shadow;
    27. gradcolorH2 = pb_color;
    28.  
    29. //outline
    30. painter.setPen(QPen(QBrush(Qt::black), pb_rect.width()));
    31. QPainterPath outline;
    32. outline.addRoundRect(0, 0, pb_rect.width(), pb_rect.height(), 0, 0);
    33. painter.setOpacity(1);
    34. painter.drawPath(outline);
    35.  
    36.  
    37. // gradient
    38. QLinearGradient gradient(margin, pb_rect.height() - altezza_nor + margin, pb_rect.width() - margin, pb_rect.height() -margin);
    39. gradient.setColorAt(0.0, pb_color);
    40. gradient.setColorAt(1.0, m_shadow);
    41.  
    42. QBrush brush(gradient);
    43. painter.setBrush(brush);
    44. painter.setPen(QPen(QBrush(pb_color), 5.0));
    45.  
    46. painter.setOpacity(1);
    47. painter.drawRoundRect(margin, pb_rect.height() - altezza_nor + margin, pb_rect.width() - margin, pb_rect.height() -margin,0,0);//pb_rect.height() - 2, 0, 0);
    48.  
    49.  
    50. // gradient
    51. QLinearGradient gradientH(0, (pb_rect.height() - altezza_nor)/2, pb_rect.width(), (pb_rect.height() - altezza_nor)/2);
    52.  
    53. gradientH.setColorAt(0.0, gradcolorH1);
    54. gradientH.setColorAt(0.2, gradcolorH2);
    55. gradientH.setColorAt(0.8, gradcolorH2);
    56. gradientH.setColorAt(1.0, gradcolorH1);
    57. QBrush brushH(gradientH);
    58. painter.setBrush(brushH);
    59. painter.setOpacity(0.3);
    60. painter.drawRoundRect(margin, pb_rect.height() - altezza_nor, pb_rect.width() - margin, pb_rect.height() -margin,0,0);//pb_rect.height() - 2, 0, 0);
    61. }
    To copy to clipboard, switch view to plain text mode 

    I'm sure my code is not optimized. Any suggestion will be appreciated.

    Thank you


    Beppe

Similar Threads

  1. Replies: 6
    Last Post: 14th April 2009, 18:40

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.