Comments on: Cool QProgressBar Stylesheet

By: gedoes

gedoes — Tue, 16 Aug 2011 13:28:26 +0000

How can i make this in qt4.3?

By: Bibhu

Bibhu — Thu, 16 Jun 2011 04:39:16 +0000

Hi Dave,
Can you help me to create a style sheet so that the progress bar looks like a battery ?

thanks.

By: Dave

Dave — Mon, 11 Apr 2011 12:59:37 +0000

Joerg, it’s true. Because Qt refuses to render a rounded border for rectangles whose size is smaller than the border-radius.

By: Joerg

Joerg — Mon, 11 Apr 2011 10:33:18 +0000

Hi Dave,

congrats to this site and topic.

But, have you ever tried to set a value of less than 4?
The chunk isn’t rendered correctly anymore.

Any idea how to solve this problem?

Cheers, Joerg.

By: tom

tom — Fri, 09 Jul 2010 02:04:37 +0000

Hi Dave,

i realised i never got back to you,

yes the code wise changing of the colour-slider worked. just needed to calculate the right blend

it’s in pyqt, but should be easy to read:

note slider is horizontal with a min value of 0 and max = 20.

int inValue = getValueFromHeater();
self.heatProgressBar.setValue(inValue)

# make the slider show blue to red from left to right
if( inValue >= 0 ):
percentage = inValue * 0xFF / 20

#calculate the blend
redTo = str(hex(percentage))
redTo = redTo.replace(’0x’, ”)
if( len(redTo) <2 ):
redTo = "0" + redTo
blueTo = str(hex(0xFF-percentage))
blueTo = blueTo.replace('0x', '')
if( len(blueTo) <2 ):
blueTo = "0" + blueTo
if( inValue == 20):
astyle = "QProgressBar {background-image: url(:/IVD/images/transparent.png); border: 2px solid white; border-radius: 8px; } QProgressBar::chunk:horizontal { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; border: 1px ; background: qlineargradient(x1: 0, y1: 0.5, x2: 1, y2: 0.5, stop: 0 #0000FF, stop: 1 #%s00%s ); }" % (redTo, blueTo)
else:
astyle = "QProgressBar {background-image: url(:/IVD/images/transparent.png); border: 2px solid white; border-radius: 8px; } QProgressBar::chunk:horizontal { border-top-left-radius: 4px; border-bottom-left-radius: 4px; border: 1px ; background: qlineargradient(x1: 0, y1: 0.5, x2: 1, y2: 0.5, stop: 0 #0000FF, stop: 1 #%s00%s ); }" % (redTo, blueTo)
if( inValue == 1):
astyle = "QProgressBar {background-image: url(:/IVD/images/transparent.png); border: 2px solid white; border-radius: 8px; } QProgressBar::chunk:horizontal { border-top-left-radius: 3px; border-bottom-left-radius: 3px; border: 1px ; background: qlineargradient(x1: 0, y1: 0.5, x2: 1, y2: 0.5, stop: 0 #0000FF, stop: 1 #%s00%s ); }" % (redTo, blueTo)
self.heatProgressBar.setStyleSheet(QtGui.QApplication.translate("Form", astyle, None, QtGui.QApplication.UnicodeUTF8));

thanks for you suggestion !
cheers,
tom

By: BA

BA — Mon, 21 Dec 2009 22:08:51 +0000

nevermind, found the issue. it was a small typo in my CSS.

QProgressBar::chunk:disabled is correct

By: Dave

Dave — Sat, 19 Dec 2009 21:50:48 +0000

BA, have you tried QProgressBar:disabled::chunk?

By: BA

BA — Sat, 19 Dec 2009 00:09:46 +0000

Just wondering if you know how to set the style of a progress bar when it’s disabled? I’ve tried QProgressBar::chunk:disabled but that doesn’t seem to work

By: Joe D.

Joe D. — Mon, 30 Nov 2009 22:42:15 +0000

Hey Dave…I worked with you via correspondence at your previous gig and just wanted to wish you the best; I was just googling for any tricks to display greater than 100% in a QProgressBar (not looking very likely without subclassing) and noticed your blog came up near the top of the 2nd page of my results; congrats!

By: Dave

Dave — Fri, 13 Nov 2009 04:17:55 +0000

Tom,

I believe that is not possible. You could do it, but you’d have to do it in your C++ code and update your stylesheet after each progress update using setStyleSheet().

Let me know what you find out!

–Dave