Circular progress indication

Question

Im searching for an circular progress indication Widget for Qt5 like this: http://anthonyterrien.com/knob/

Is there something similar or is it possible to do this in Qt?

I want to set the percentage manually, it shouldn't be a spinning circle or something like that

Answer 1

It is very easy to write. You need just special paintEvent() and slot to setProgress(). Of course if you want to add more beauty, then you need spend some time, but here is example:

Header:

#ifndef WIDGET_H
#define WIDGET_H

#include <QWidget>
#include <QPaintEvent>

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

signals:

public slots:
    void setProgress(int val);

protected:
    void paintEvent(QPaintEvent *);

private:
    double progress;

};

#endif // WIDGET_H

cpp:

void Widget::setProgress(int val)
{
    progress = (double)val/100;
    //yes, it is not very good, the best approach is to
    //create something similar to QProgressBar
    this->update();
}


void Widget::paintEvent(QPaintEvent *)
{
    QPainter p(this);

    QPen pen;
    pen.setWidth(7);
    pen.setColor(Qt::red);
    p.setPen(pen);

    p.setRenderHint(QPainter::Antialiasing);

    QRectF rectangle(10.0, 20.0, 80.0, 80.0);
    //to understand these magic numbers, look drawArc method in Qt doc
    int startAngle = -90 * 16;
    int spanAngle = progress * 360 * 16;

    p.drawArc(rectangle, startAngle, spanAngle);

    p.drawText(rectangle,Qt::AlignCenter,QString::number(progress*100)+" %");
}

Usage:

Widget wd; 
wd.show();
QSlider sl;
sl.show();

QObject::connect(&sl,SIGNAL(valueChanged(int)),&wd,SLOT(setProgress(int)));

Result:

I showed here main idea, but I think that my code can be improved, for example add methods setMinimum/Maximum and setValue, as in QProgressBar, but I hope you will add additional functionality manually if you need this.

Answer 2

In addition to the above: who needs a simple implementation of what Chernobyl has posted there is a ready class that demonstrates a circular loading.