How to create a progress bar with customized look?

IneedAuserName

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:

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?
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!

Chris Kawa

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);
@

IamSumit

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

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

raven-worx

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

NicuPopescu

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

IneedAuserName

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, 3016, 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]

houmingc

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