Change the color of a QProgressBar - c++

I am running ubuntu 11.04. This is what my progress bars look like:
I am showing the progress bars in a batch processing window (one per batch item) and would like to use them as a status indicator (green while all is going well, red in case of errors, ...).
I have tried several suggestions, including the ones made to this almost identical question. Unfortunately, I couldn't make it work and the documentation on customizing QProgressBars doesn't help me either, so I would be very grateful for any suggestions as to what I'm doing wrong.
I have subclassed the QProgressBar as suggested and have tried using stylesheets as well as the palette (not at the same time but as alternatives). With stylesheets, I can't make it look anything like the regular progress bars. Changing the color is really all I want to do, so I figured it should be much easier to do that by use of a palette instead of a stylesheet, but with the palette nothing happens at all.
Here is one of the versions I've tried for the palette:
#include "myprogressbar.h"
#include <QtGui/QPalette>
MyProgressBar::MyProgressBar(QWidget *parent) :
QProgressBar(parent)
{}
void MyProgressBar::onProgress(int value, int maximum, QString phase)
{
setMaximum(maximum);
setValue(value);
setFormat(phase);
QPalette p = this->palette();
p.setColor(QPalette::Highlight, QColor(Qt::green));
this->setPalette(p);
}
...
I also tried the version suggested here, but that didn't help either.

It tried this :
QProgressBar {
border: 2px solid grey;
border-radius: 5px;
background-color: #FF0000;
}
QProgressBar::chunk {
background-color: #05B8CC;
width: 20px;
}
as styleSheet for the progressBar and I got this
so it is easy to change the background of the bar to the color you want and you can display a text by yourself with setFormat(). Is it working for you?

Using the "Highlight" color role does the trick in my case (using Plastique style).
QPalette p = palette();
p.setColor(QPalette::Highlight, Qt::green);
setPalette(p);

I had this problem too, but I find a way, with the help of this site:
http://thesmithfam.org/blog/2009/10/13/cool-qprogressbar-stylesheet/
but I just wanted to change the color and not the progressbar itself. so I got rid of the first line, and change the second one a little bit.
Finally I got what I wanted.
First do this:
QString danger = "QProgressBar::chunk {background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #FF0350,stop: 0.4999 #FF0020,stop: 0.5 #FF0019,stop: 1 #FF0000 );border-bottom-right-radius: 5px;border-bottom-left-radius: 5px;border: .px solid black;}";
QString safe= "QProgressBar::chunk {background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #78d,stop: 0.4999 #46a,stop: 0.5 #45a,stop: 1 #238 );border-bottom-right-radius: 7px;border-bottom-left-radius: 7px;border: 1px solid black;}";
Now all you have to do is:
if(ui->progressbar->value()<80)
ui->progressbar->setStyleSheet(danger);
else
ui->progressbar->setStyleSheet(safe);

Related

How to set QProgressBar stylesheet dynamically?

I'm trying to make a progress bar that can dynamically change part of it's color depending on a slider's value. The closest I can get to that right now is by using:
bar->setStyleSheet(QString("QProgressBar::chunk:vertical {background: qlineargradient(x1:0, y1:0, x2: 0, y2: 1, stop:0 red, stop:0.5 green); border-radius: 9px;}")
+QString("QProgressBar::vertical {border: 1px solid #b4adad; border-radius: 9px; background: #2f2828; padding: 0px; text-align: left; margin-right: 4ex;}"));
I have tried setting the second stop point to slider->value() which takes away the whole style sheet leaving me with a blank progress bar.
I have tried just using CSS code which also takes away the style sheet:
{background: linear-gradient(to bottom, white 0%, blue 25%, blue 100%); border-radius: 9px;}"
I'm confused because I can use CSS to set the background but I can't get it to work unless I use qlineargradient, why is this? What needs to be done in order to implement CSS in a Qt stylesheet without restriction?
Is it possible to set the value of a stop point to the changing value of a slider?
I also attempted using the setStyleSheet function within an if statement so that the stylesheet itself will change depending on the value of the progress bar:
if (bar->value()<slider->value()) {
however this doesn't dynamically change the stylesheet. It seems as though it runs the if statement one time prior to opening the app. Does QT run a while loop that runs through the code continuously while the app is open or am I mistaken?
From https://doc.qt.io/qt-5/qprogressbar.html#valueChanged, there is a signal void QProgressBar::valueChanged(int value) that you can connect to a slot and make the change you want for the QProgressBar sylesheet, for example :
void MainWindow::on_progressBar_valueChanged(int value)
{
if (value >= 0 && value < 50)
ui->progressBar->setStyleSheet("border: 2px solid grey; border-radius: 5px; text-align: center;");
else if (value >= 50 && value < 75)
ui->progressBar->setStyleSheet("background-color: #05B8CC; width: 20px;");
// and so on ...
}

How to set the QTreeWidget's header color and hide the dividing line?

I want to change the background color of the header when I use the QWidget. I tried the following methods but they didn't work:
QTreeWidgetItem * header = ui->treeWidget->headerItem();
header->setBackground(0, QBrush(QColor(185,192,201)));
header->setBackgroundColor(0, QColor(185,192,201));
setStyleSheet("QHeaderView::section { background-color:red }");
I also want to know how to hide the header's dividing line?
I've found a method to change the header's style,but I don't know why my previous method did not work.
QHeaderView::section {
color: black;
padding: 2px;
height:20px;
border: 0px solid #567dbc;
border-left:0px;
border-right:0px;
background: #f9f9f9;
}
Why don't you use only the stylesheet?
YourQTreeWidget QHeaderView::section {
background-color: red; // for the bakcground
border-right: none; // right-border of each section
border-left: none; // left border of each section
}
As you can read here (and as you see in your example) setBackgroundColor does not work for header item (I suspect that this is due to difference between header and row items).
You should to reimplement QHeaderView or to try option described above.

Change QGroupBox's content background

I want to change the background of a QGroupBox, however I would like to only change the inside background (the darker shade of gray below each QGroupBox's title) as shown here:
What I currently have is
QGroupBox {
background-color: red;
border: 3px dashed black;
}
which changes the background of the entire QGroupBox like this:
Is there a way in Qt to only change the "interior box" background rather than the whole container? Thank you in advance.
I guess there are 2 QGroupBox'es involved here, since that is not really clear from your post. Or is there a group box and some other inner container widget?
In either case you should be able to use stylesheets like following:
QGroupBox {
background-color: red;
margin-top:1em;
}
QGroupBox QGroupBox {
background-color: green;
}
QGroupBox::title {
subcontrol-origin: padding;
subcontrol-position: left top;
background: transparent;
margin-top: -2.5em;
}
This will give you following result:
You can of course replace the inner group box by an arbitrary widget.
You can do it using "setStyleSheet" function of widgets.
Get the inner group box object. And set the background color using "setStyleSheet" function.
Pseudo Code:
QGroupBox *innerGBox = new QGroupBox();
innerGBox->setStyleSheet("background-color: red");
To know more about setting styles programmatic , refer below link.
http://doc.qt.io/qt-4.8/stylesheet-examples.html
You need to tell Qt a little more about the kind of style you want, specifically the margins. Playing around a little with this code should give you the desired results:
QGroupBox {
background-color: red;
border: 3px dashed black;
margin-top: 1ex; /* leave space at the top for the title */
}
QGroupBox::title {
subcontrol-origin: margin;
padding: 0 3px;
}
Take a look at the Stylesheet examples

border and text qss settings at QTableView

Here's I am trying to do that:
but I set that stylesheet in my QTableView:
QTableView {
gridline-color: black;
background-color: transparent;
}
QHeaderView {background-color: transparent;
}
QHeaderView::section{
border-style: none;
border-bottom: 1px solid rgb(0,0,0);
background-color: transparent;
margin-bottom:5px;
margin-top:5px;
}
QTableView QTableCornerButton::section {
bottom-style:none;
border-bottom: 1px solid rgb(0,0,0);
}
Result is this:
I can handle with size problem for future but there is two main problem over here:
1.Column text between border there isnt any space, I did margin-top:5px; and margin-bottom:5px; but it changed for all QHeaderView not only QHeaderView's Text. (Solution is use padding instead of margin)
2.Every row has a right ,left even top border. I dont want that.
I tried this:
QTableView QTableCornerButton::section {
border-style:none;
border-bottom: 1px solid rgb(0,0,0);
}
Unfortunately there is a problem at QTableCornerButton:section it doesn't work...
Thank you for any helping
Note : I haven't verified, these are just suggestions to try, please upload the output if needed
1 - What do you mean by "it changed for all QHeaderView not only QHeaderView's Text"?
Maybe you expected to set margin only to the headerview's content (text) : in that case use the padding not margin.
QHeaderView::section{
/* your style */
padding-bottom:5px;
padding-top:5px;
}
2 - Every row has a right ,left even top border. I dont want that.
QTableView {
/* sone additional style */
gridline-color: cyan
background-color: cyan
}
QTableView::item
{
border-style: none;
border-bottom: 1px solid rgb(0,0,0);
}
I would try to use the border-style (set to none) as you did in QHeaderView's style.
Edit : You certainly must disable the showgrid's option of your QTableView by code to make it a working solution
tableView.setShowGrid(false);

How to change the color of the text of a QProgressBar with its value?

I don't know how to change the color of the text partially in the progress bar when its value becomes nearly 50%. This effect comes automatically in the fusion style progress bar (picture below). Does anyone know how this is done ?
Too lazy to write working example code, much less making a screenshot. Not even for 50 reps. :-)
However, the question was somewhat interesting. I had no idea how such a two colored text could be done. So I checked:
http://qt.gitorious.org/qt/qtbase/blobs/stable/src/widgets/styles/qfusionstyle.cpp
Line 1450ff (http://qt.gitorious.org/qt/qtbase/blobs/stable/src/widgets/styles/qfusionstyle.cpp#line1450).
QRegion rightRect = rect;
rightRect = rightRect.subtracted(leftRect);
painter->setClipRegion(rightRect);
painter->setPen(flip ? alternateTextColor : textColor);
painter->drawText(rect,
bar->text,
QTextOption(Qt::AlignAbsolute|
Qt::AlignHCenter|
Qt::AlignVCenter));
if (!leftRect.isNull())
{
painter->setPen(flip ? textColor : alternateTextColor);
painter->setClipRect(leftRect);
painter->drawText(rect,
bar->text,
QTextOption(Qt::AlignAbsolute|
Qt::AlignHCenter|
Qt::AlignVCenter));
}
Basically the text is drawn two times into the same rectangle. Each time with an appropriate clipping. Easy if you know how. :-)
From my point of view the best, and probably the easiest, way to do this is to change the pallet for the QProgressBar widget:
QPalette palette = progressBar->palette()
palette.setColor(QPalette::Text, textColor)
palette.setColor(QPalette::HighlightedText, textColor)
progressBar->setPalette(palette)
"The setBackgroundRole method let you use a color role for the background, which means one of the predefined color of the style applied to the widget. So your are basically limited to the style and its colors."
Background solution:
value = 65
self.progressBar.setProperty("value", value)
if value < 50:
self.progressBar.setStyleSheet("QProgressBar::chunk { background-color: black; }")
else:
self.progressBar.setStyleSheet("QProgressBar::chunk { background-color: black; } QProgressBar { color: white; }")
You can use stylesheet on the Container Widget :
myMainWidget.setStyleSheet(QString("QProgressBar {color: red}"));