Customize QProgressBar for Batterylevel Indicator in Mobile



  • Hello Friends,
    I m working with QProgressBar and I want it to customize for battery level indication such that suppose the percentage is below 30 the chunk color should be red..if its above 30% it should be yellow and if its above 80% it should be green..I have gone through few articles..but didnt find any..
    So please help me out friends..

    Regards
    imrrk



  • 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



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



  • 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.



  • 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)



  • 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.



  • 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)



  • 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..



  • 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.



  • Thanks,volker,

    I will try it out...



  • 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)!



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



  • 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



  • 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.



  • Thanks gerolf..i will try it out


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.