Custom Circle Progress Bar

moutasdimitris

Hi guys, I want to develop the progress bar from the image down below using C++. Any idea?

J.Hilk

@moutasdimitris
sure, google gave me this
https://stackoverflow.com/a/42794690/15422846

moutasdimitris

@J-Hilk I have seen this post again but for me, it's hard to develop on Qt using C++. So I asked here!

mrjj

@moutasdimitris

Hi
But it has a class to reuse ?

The most important part is the paintEvent.
So you could start looking at that and ask if anything is hard to understand.

moutasdimitris

@mrjj Partially I managed to draw this but for different window sizes the dashed parts are 3 or more but I want 10 arcs and 10 spaces.

mpergand

@moutasdimitris
Not so easy ;)

void Widget::paintEvent(QPaintEvent* ev)
{
    QPainter painter(this);
    painter.setRenderHint(QPainter::Antialiasing,true);
    QRect rec=rect();

    int minWidth=qMin(rec.width(),rec.height())/2;
    int thickness=minWidth/6;
    rec.adjust(thickness,thickness,-thickness,-thickness);
    minWidth=qMin(rec.width(),rec.height())/2;

    QConicalGradient gradient(rec.center(),90);
    gradient.setColorAt(0,Qt::transparent);
    gradient.setColorAt(.5,QColor(25,180,255));
    
    QPainterPath path;
    path.addEllipse(rec.center(),minWidth,minWidth);
    QPainterPath clipPath;
    clipPath.addEllipse(rec.center(),minWidth-thickness,minWidth-thickness);
    path=path.subtracted(clipPath);
    
    int segNum=8;   // number of segments
    int radius=minWidth+1;
    int t=thickness/4;  // inter segment width
    int cx=rec.center().x();
    int cy=rec.center().y();
    
    for(int i=0; i<segNum; i++)
        {
        // calculate inter segment pos
        float angle=180.0/segNum*i+90;
        float cos1=qCos(qDegreesToRadians(angle));
        float sin1=qSin(qDegreesToRadians(angle));
        float cos2=qCos(qDegreesToRadians(angle+180));
        float sin2=qSin(qDegreesToRadians(angle+180));
        float x1=cx+radius*cos1;
        float y1=cy-radius*sin1;
        float x2=cx+radius*cos2;
        float y2=cy-radius*sin2;
        
        QPainterPath line;
        line.moveTo(x1-sin1*t,y1-cos1*t);
        line.lineTo(x1+sin1*t,y1+cos1*t);
        line.lineTo(cx,cy);
        line.lineTo(x2-sin2*t,y2-cos2*t);
        line.lineTo(x2+sin2*t,y2+cos2*t);
        path=path.subtracted(line); // subtract inter segment
        //painter.fillPath(line,Qt::white);
        }
    
    painter.fillPath(path,gradient);
    
}