How to create a progress bar with customized look?



  • Hi All,

    I'm currently researching on creating a good looking progress bar like this one.
    It seems that I cannot insert the picture, here's the link:
    "Circular progress bar":http://www.uiparade.com/portfolio/progress-pop-up/#------

    But I'm currently facing two challenges:

    1. How to create a progress bar with custom looks? Should I overwrite the paintEvent in my derived class(from QProgressBar) and treat this object as a QGraphicsItem?
    2. If the above assumption is correct, I wonder what's the right way to implement the end of the progress bar, which looks smooth. The way I would implement a circular progress bar is to draw two pies with the same centre, and adjust the outer pie's angle span. But this way the end of the arc would look like its cut off. I cannot really think of an elegant solution for this so some pointers would be very appreciated.

    Thanks!


  • Moderators

    What kind of component do you want? A widget, qml item or graphics item?

    If you use QPainter you can draw the progress bar (arc?) with a QPainterPath . The rounded cap can be set on the QPen.
    This would look something like this (didn't test it):
    @
    QPainterPath path;
    path.moveTo(start); //start is the point at the center-bottom of the rect
    path.arcTo(rect, -90, -angle); //-angle for the clockwise arc

    QPen pen;
    pen.setWidth(thickness); //something like 20 to make it thick
    pen.setCapStyle(Qt::RoundCap); //rounded cap at the end of the arc

    QPainter p(...);
    p.strokePath(path, pen);
    @



  • Hii,
    You can use CSS in your code ...

    http://qt-project.org/doc/qt-4.8/stylesheet-examples.html


  • Moderators

    [quote author="IamSumit" date="1387168805"]
    You can use CSS in your code ...
    [/quote]
    i doubt that you can use CSS (onyl) to get the desired result. The colors could be styled by CSS. But the drawing of this special appearance would definitely have to be done in a custom paint code.



  • here at the office I cannot access your image? could you send me on email?



  • Hi,

    Thanks for the suggestion. I used QPainter::drawArc to do the trick.

    If anyone needs the code, here it is:

    Header:
    @#ifndef CIRCULARPROGRESSBAR_H
    #define CIRCULARPROGRESSBAR_H

    #include <QProgressBar>
    #include <QWidget>
    #include <QtCore>

    class CCircularProgressBar : public QProgressBar
    {
    Q_OBJECT
    public:
    explicit CCircularProgressBar(QWidget* parent = 0);

    protected:
    void paintEvent(QPaintEvent *);
    signals:

    public slots:

    };

    #endif // CIRCULARPROGRESSBAR_H
    @

    CPP file:
    @#include "circularprogressbar.h"
    #include <QPainter>

    CCircularProgressBar::CCircularProgressBar(QWidget *parent) :
    QProgressBar(parent)
    {
    }

    void CCircularProgressBar::paintEvent(QPaintEvent*)
    {
    int progress = this->value();
    int progressInDegrees = (double)(progress360)/100;
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing, true);
    painter.setPen(QPen(Qt::black, 3, Qt::SolidLine,Qt::RoundCap));
    painter.drawArc(10, 10, this->width()-20, this->height()-20, 30
    16, progressInDegrees*16);
    }
    @

    [quote author="Chris Kawa" date="1387149179"]What kind of component do you want? A widget, qml item or graphics item?

    If you use QPainter you can draw the progress bar (arc?) with a QPainterPath . The rounded cap can be set on the QPen.
    This would look something like this (didn't test it):
    @
    QPainterPath path;
    path.moveTo(start); //start is the point at the center-bottom of the rect
    path.arcTo(rect, -90, -angle); //-angle for the clockwise arc

    QPen pen;
    pen.setWidth(thickness); //something like 20 to make it thick
    pen.setCapStyle(Qt::RoundCap); //rounded cap at the end of the arc

    QPainter p(...);
    p.strokePath(path, pen);
    @[/quote]



  • I am interested in creating circular progress bar too. I got straight bar working.
    http://programmingexamples.net/wiki/Qt/Widgets/ProgressBar

    With your sample code, I got two error:
    can you put your code in git or codebin.org
    1> progress360 was not declared in this scope.
    2> progressInDegree16 was not declared in this scope.

    Please help to resolve this problem


Log in to reply
 

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