[Solved] Changing progress indicator in QProgressBar

McLion

Hi

I am trying to have all of the indicator of the QProgressBar changing it's color depending on the value or have the color of the indicator base on linear gradient I created - going from red (0) over yellow to green (1).

Any hints how at least one of these can be achieved?
Thanks
McL

Hamed

Hi
Something like this?

QString value1 = "QProgressBar::chunk {background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #F10350,stop: 0.4999 #FF3320,stop: 0.5 #FF0019,stop: 1 #FF0000 );}";
QString value2= "QProgressBar::chunk {background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #F8d,stop: 0.4999 #60a,stop: 0.5 #45a,stop: 1 #238 );}";
if(ui->progressBar->value()<80)
ui->progressBar->setStyleSheet(value1);
else
ui->progressBar->setStyleSheet(value2);

McLion

Thanks a lot. Finally I can customize the chunk.

It comes close to what I am looking for. I use the ProgressBar as indicator.
The gradient now moves with the chunk. Is it possible to have it like fixed to the full range?
0 is always red, full scale (100) is always green and somewhere in the middle is yellow for instance.
If it shows a value of 20, then the chunks are mostly red.
It it shows 50, the chunks visible start from red going to yellow in the middle.
If it shows 100, the chunks start from red going over yellow to green.

I have no clue if something like this is possible with a stylesheet and without having to calculate and changing the chunk like every 10 increments.

Hamed

Sorry, my english language isn't really well!
what you mean by using as indicator?
and what you mean by fixed to the full range?
yo can defines more values with more colors and make it the way that you need but if you mean something else maybe some image will help me to understand.

McLion

ProgressBar Indicator

Hamed

try this :

    ui->progressBar->setValue(ui->lineEdit->text().toInt());
    QString value1 = "QProgressBar::chunk {background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #F10350,stop: 0.4999 #FF3320,stop: 0.5 #FF0019,stop: 1 #FF0000 );}";
    QString value2 = "QProgressBar::chunk {background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #F10350,stop: 0.4999 #FF3320,stop: 0.5 #FF0019,stop: 1 #F0F150 );}";
    QString value3 = "QProgressBar::chunk {background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #F10350,stop: 0.4999 #FF3320,stop: 0.5 #FF0019,stop: 1 #05F150 );}";
    if(ui->progressBar->value()<50)
        ui->progressBar->setStyleSheet(value1);
    if(ui->progressBar->value()>50 && ui->progressBar->value()<80)
        ui->progressBar->setStyleSheet(value2);
    if(ui->progressBar->value()>=80)
        ui->progressBar->setStyleSheet(value3);

McLion

I know I can make it this way.
I can change the color of the chunk with c code like for every step - if I am willing to write a separate style sheet for every step.

What I was looking for is a style sheet that does either:

Changing the color of the chunk depending on the value, or
Applying the LinearGradient to full scale and not scaling the Lineargradient with the chunk

.. without coding all this in c, which of course is possible.

It might well be that a style sheet does not have the power of doing this. I then will have to write the code for this manually, like in your sample.

In addition, I have 5 of these Indicators and the iteration can not be done in a style sheet so I have to do the same for every indicator separately ... I mean partly separately.

Thanks a lot anyway! You helped a lot!

Hamed

Oh! sorry I got it now!
I don't know how that's possible, but I hope that you can figure it out!

McLion

Any idea how I can use color in Hsv in the stylesheet instead of RGB as below?
In practice, I will change it to a single color chunk instead of the gradient.

setStyleSheet("QProgressBar::chunk {background: QLinearGradient( x1: 0, y1: 0, x2: 1, y2: 0,stop: 0 #FF0000,stop: 0.7 #FFFF00,stop: 1 #00B400 );}");

I could then calculate the color angle between Green (120) and Red (0) and paste it in with .arg which could reduce my code to a few simple lines instead of a huge iteration to change the color of the chunk based on the current value.

McLion

I got it working for the simple chunk color with hsv - not for the gradient:

 setStyleSheet("QProgressBar::chunk {background: hsva(0, 255, 255, 60%);}");

What I could not do so far is to replace h by .arg:

setStyleSheet("QProgressBar::chunk {background: hsva(%1, 255, 255, 60%);}".arg((QString)(data.section(' ', 2, 2).toInt(&ok, 10) / 100 * 120)));

What am I doing wrong?

Hamed

Hi again.
I don't know if I got you right but, this is worked for me :

    quint8 v = 100;
    QString value1 = "QProgressBar::chunk {background: hsva(" + QString::number(v) + ", 255, 255, 60%);}";
    ui->progressBar->setStyleSheet(value1);

you can set for v any calculated value instead of '100'.

McLion

I have it working:

QString style = "QProgressBar::chunk {background: hsva(%1, 255, 255, 70%);}";
ui->progressBar->setStyleSheet(style.arg(data.section(' ', 2, 2).toInt(&ok, 10)));

Thanks