Customize QProgressBar for Batterylevel Indicator in Mobile

giesbert

You can set a style sheet for the progress bar and set a new style sheet if the values crosses such a boundary. For using style sheets with QProgressBar, see "here":http://doc.qt.nokia.com/latest/stylesheet-examples.html#customizing-qprogressbar

imrrk

hi gerolf..thanks for the link...but i am not understanding about the color w.r.t to percentage..so please help me out

goetz

You must code the color change yourself. Catch the battery status change events, adjust the stylesheet according to the values and set the new stylesheet on the progress bar.

imrrk

hi volker,
i have pasted my code..
just please check out
@
void Dialog::Battery()
{
//deviceInfo=new QSystemDeviceInfo();

deviceInfo=new QSystemDeviceInfo(this);
ui->progressBar->setValue(deviceInfo->batteryLevel());
connect(deviceInfo,SIGNAL(batteryLevelChanged(int)),ui->progressBar,SLOT(setValue(int)));

ui->progressBar->setStyleSheet("QProgressBar::format{{border: 1px solid grey; border-radius: 8px;padding: 1px }");
}
@

EDIT: added code highlight tags (Gerolf)

giesbert

That's what I meant. Connect your parent or whatever class you have that implements slots to valueChanged() slot and there change the style sheet if a border (30%, 80%) is crossed, or at the moment you set the value to the progress bar.

giesbert

You can do it the following way:

@
void Dialog::Battery()
{
//deviceInfo=new QSystemDeviceInfo();

deviceInfo=new QSystemDeviceInfo(this);
connect(deviceInfo,SIGNAL(batteryLevelChanged(int)),this,SLOT(batteryLevelChanged(int)));
batteryLevelChanged(deviceInfo->batteryLevel());

}

void Dialog::batteryLevelChanged(int nValue)
{
ui->progressBar->setValue(nValue);
QString myStyleSheet = " QProgressBar::chunk {"
" background-color: ";

if(30 >= nValue)
{
    myStyleSheet.append("red;");
}
else if(80 >= nValue)
{
    myStyleSheet.append("yellow;");
}
else
{
    myStyleSheet.append("green;");
}
myStyleSheet.append("     width: 10px;"\
                    "     margin: 0.5px;"\
                    " }");
ui->progressBar->setStyleSheet(myStyleSheet);

}
@

I'm not sure, what you tried to change with your code, but it was not related to the given example...

EDIT: the code is just created from Docs, not tested in real life... (Gerolf)

imrrk

hi gerolf,,,thanks for the code..I tried it in simulator..i tried with different values for battery.but its not working...so i tried debugging with breakpoints ..the control is passing..but i am not seeing any color change..

goetz

This kind-of works for me:

@
void MainWindow::battStatusChanged(int percent)
{
QString c = "green";
if(percent < 30)
c = "yellow";
else if(percent < 10)
c = "red";

QString myStyleSheet = QString(" QProgressBar::chunk { background: %1; }").arg(c);
qDebug() << "Battery=" &lt;&lt; percent &lt;&lt; " --&gt; " << myStyleSheet;
ui->progressBar->setStyleSheet(myStyleSheet);
ui->progressBar->setValue(percent);

}
@

The overall styling needs some love, though it demonstrates how it works.

imrrk

Thanks,volker,

I will try it out...

giesbert

Hi imrrk,

I tried my code, and it works, here is the complete code and the screen shots:

@
Widget::Widget(QWidget parent)
: QWidget(parent)
{
QVBoxLayout pLayout = new QVBoxLayout(this);
setLayout(pLayout);

QSlider* pSlider = new QSlider(Qt::Horizontal, this);
pLayout->addWidget(pSlider);
pProgressBar = new QProgressBar(this);
pLayout->addWidget(pProgressBar);
pProgressBar->setRange(0, 100);
pSlider->setRange(0, 100);
pSlider->setValue(70);
batteryLevelChanged(70);
pProgressBar->setTextVisible(false);

connect(pSlider, SIGNAL(valueChanged(int)), this, SLOT(batteryLevelChanged(int)));

}

void Widget::batteryLevelChanged(int nValue)
{
pProgressBar->setValue(nValue);
QString myStyleSheet = " QProgressBar::chunk {"
" background-color: ";

if(30 >= nValue)
{
    myStyleSheet.append("red;");
}
else if(80 >= nValue)
{
    myStyleSheet.append("yellow;");
}
else
{
    myStyleSheet.append("green;");
}
myStyleSheet.append("     width: 10px;"\
                    "     margin: 0.5px;"\
                    " }");
pProgressBar->setStyleSheet(myStyleSheet);

}
@

!http://lh3.ggpht.com/_m1PNLlZctqY/TTneWaB0CYI/AAAAAAAAAEQ/rReFfTGJ3Vw/s800/QProgress_90.jpg(green progress bar)!
!http://lh4.ggpht.com/_m1PNLlZctqY/TTneWGESbmI/AAAAAAAAAEM/xbCcmhKlDoo/s800/QProgress_50.jpg(yellow progress bar)!
!http://lh3.ggpht.com/_m1PNLlZctqY/TTneWJI905I/AAAAAAAAAEI/YDF0FMp2vCw/s800/QProgress_10.jpg(red progress bar)!

imrrk

hi volker..have u tested in simulator...

imrrk

hi ,Gerolf..thanks for ur code..but I want the color to be changed at runtime..when i charge the battery full in device..the color should be green..when the battery is less charged its must be yellow and finally red for very low battery...but in your example..its changing with respect to slider..

Regards
imrrk

giesbert

hi imrrk,

where is the difference if the slot batteryLevelChanged(int) is called because the slider is moved or you get a signal from somewhere else? It is changed at runtime, signal/slot IS runtime. It's just a different source for the signal.

to use your code example, you could do:

@
connect(deviceInfo,SIGNAL(batteryLevelChanged(int)),this,SLOT(batteryLevelChanged(int)));
@

and then set the progress bar from you slot as I did.

imrrk

Thanks gerolf..i will try it out