Qt to write custom controls 32- to wait for progress bar control

I. Introduction

In a variety of mission interface, sometimes you need more time, need to give an intuitive waiting for the progress bar indicates the progress currently being executed, which is not ignorant force there, the user does not feel dead or program why the.
Waiting for the progress bar There are several ways, such as directly called art do gif map, with QLabel with QMovie to load gif images, this method is the simplest and most easy way, or make multiple pictures of the progress bar, using the timing maps to achieve, the easy way to go the easy way, is not flexible enough, to write the dead, such as the need to replace the color or sometimes in a different display formats, and artists need to re-do the map, and tortured to death. At that time in writing this waiting for the progress bar when there is consideration to choose to integrate into a variety of styles for users, such as arc-shaped style, round style rotation, triangular arc, line style, ring style, is equivalent to a control five or six controls, some of this was regressed, and the code is very complete and wonderful.

Second, the realization of functions

• 1: support a variety of styles to wait for the arc-shaped style style style triangle rotating circle arc line style ring style
• 2: the settable range and current values
• 3: foreground background color may be provided
• 4: counter clockwise rotation may be provided
• 5: Support any size scaling
• 6: support setting rotational speed interval

Third, renderings

Fourth, the header file code

#ifndef PROGRESSWAIT_H
#define PROGRESSWAIT_H

/**
 * 等待进度条控件 作者:feiyangqingyun(QQ:517216493) 2016-10-28
 * 1:支持多种等待样式风格 圆弧状风格 旋转圆风格 三角圆弧 线条风格 圆环风格
 * 2:可设置范围值和当前值
 * 3:可设置前景色背景色
 * 4:可设置顺时针逆时针旋转
 * 5:支持任意大小缩放
 * 6:支持设置旋转速度间隔
 */

#include <QWidget>

#ifdef quc
#if (QT_VERSION < QT_VERSION_CHECK(5,7,0))
#include <QtDesigner/QDesignerExportWidget>
#else
#include <QtUiPlugin/QDesignerExportWidget>
#endif

class QDESIGNER_WIDGET_EXPORT ProgressWait : public QWidget
#else
class ProgressWait : public QWidget
#endif

{
    Q_OBJECT
    Q_ENUMS(BarStyle)

    Q_PROPERTY(bool clockWise READ getClockWise WRITE setClockWise)
    Q_PROPERTY(bool showPercent READ getShowPercent WRITE setShowPercent)

    Q_PROPERTY(int currentValue READ getCurrentValue WRITE setCurrentValue)
    Q_PROPERTY(int maxValue READ getMaxValue WRITE setMaxValue)
    Q_PROPERTY(int interval READ getInterval WRITE setInterval)

    Q_PROPERTY(BarStyle barStyle READ getBarStyle WRITE setBarStyle)
    Q_PROPERTY(QColor background READ getBackground WRITE setBackground)
    Q_PROPERTY(QColor foreground READ getForeground WRITE setForeground)
    Q_PROPERTY(QColor textColor READ getTextColor WRITE setTextColor)

public:
    enum BarStyle {
        BarStyle_Arc = 0,           //圆弧状风格
        BarStyle_RoundCircle = 1,   //旋转圆风格
        BarStyle_Pie = 2,           //三角圆弧风格
        BarStyle_Line = 3,          //线条风格
        BarStyle_Ring = 4,          //圆环风格
        BarStyle_SingleCircle = 5,  //一个圆闪烁
        BarStyle_DoubleCircle = 6   //两个圆闪烁
    };

    ProgressWait(QWidget *parent = 0);
    ~ProgressWait();

protected:
    void resizeEvent(QResizeEvent *);
    void paintEvent(QPaintEvent *);
    void drawArc(QPainter *painter);
    void drawRoundCircle(QPainter *painter);
    void drawPie(QPainter *painter);
    void drawLine(QPainter *painter);
    void drawRing(QPainter *painter);
    void drawSingleCircle(QPainter *painter);
    void drawDoubleCircle(QPainter *painter);
    void drawValue(QPainter *painter);

private:
    bool clockWise;                 //顺时针逆时针
    bool showPercent;               //显示当前百分比
    int currentValue;               //当前值
    int maxValue;                   //最大值
    int interval;                   //旋转间隔

    int minRadius;                  //最小半径
    int maxRadius;                  //最大半径
    int offsetRadius;               //半径偏移量
    int leftRadius;                 //左边圆半径
    int rightRadius;                //右边圆半径
    bool leftIncrease;              //左边递增
    bool rightIncrease;             //右边递增

    BarStyle barStyle;              //样式
    QColor background;              //背景色
    QColor foreground;              //前景色
    QColor textColor;               //文字颜色

    QTimer *timer;                  //定时器绘制

private:
    double degreesToRadians(double value);

private slots:
    void updateValue();

public:
    bool getClockWise()             const;
    bool getShowPercent()           const;
    int getCurrentValue()           const;
    int getMaxValue()               const;
    int getInterval()               const;

    BarStyle getBarStyle()          const;
    QColor getBackground()          const;
    QColor getForeground()          const;
    QColor getTextColor()           const;

    QSize sizeHint()                const;
    QSize minimumSizeHint()         const;

public Q_SLOTS:
    //设置顺时针逆时针旋转
    void setClockWise(bool clockWise);
    //设置是否显示百分比
    void setShowPercent(bool showPercent);
    //设置当前值
    void setCurrentValue(int currentValue);
    //设置最大值
    void setMaxValue(int maxValue);
    //设置旋转速度间隔
    void setInterval(int interval);

    //设置样式
    void setBarStyle(const BarStyle &barStyle);
    //设置前景色
    void setBackground(const QColor &background);
    //设置前景色
    void setForeground(const QColor &foreground);
    //设置文字颜色
    void setTextColor(const QColor &textColor);
};

#endif // PROGRESSWAIT_H

Fifth, the core code

void ProgressWait::paintEvent(QPaintEvent *)
{
    int width = this->width();
    int height = this->height();
    int side = qMin(width, height);

    //绘制准备工作,启用反锯齿,平移坐标轴中心,等比例缩放
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
    painter.translate(width / 2, height / 2);
    painter.scale(side / 200.0, side / 200.0);

    if (barStyle == BarStyle_Arc) {
        drawArc(&painter);
    } else if (barStyle == BarStyle_RoundCircle) {
        drawRoundCircle(&painter);
    } else if (barStyle == BarStyle_Pie) {
        drawPie(&painter);
    } else if (barStyle == BarStyle_Line) {
        drawLine(&painter);
    } else if (barStyle == BarStyle_Ring) {
        drawRing(&painter);
    } else if (barStyle == BarStyle_SingleCircle) {
        drawSingleCircle(&painter);
    } else if (barStyle == BarStyle_DoubleCircle) {
        drawDoubleCircle(&painter);
    }

    drawValue(&painter);
}

void ProgressWait::drawArc(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);

    //计算中心点坐标
    int centerX = 0;
    int centerY = 0;
    int radius = 99;
    int radiusBig = radius / 2;
    int radiusSmall = radius / 6;
    double currentangle = currentValue * (360 / (maxValue + 1));

    if (clockWise) {
        currentangle = -currentangle;
    }

    //绘制八卦大圆1
    painter->setBrush(foreground);
    QPainterPath pathBig1(QPointF(centerX + radius * qCos(degreesToRadians(currentangle)),
                                  centerY - radius * qSin(degreesToRadians(currentangle))));
    pathBig1.arcTo(centerX - radius, centerY - radius, radius * 2, radius * 2, currentangle, 180);
    pathBig1.arcTo(centerX + radiusBig * qCos(degreesToRadians(currentangle + 180)) - radiusBig,
                   centerY - radiusBig * qSin(degreesToRadians(currentangle + 180)) - radiusBig,
                   radiusBig * 2, radiusBig * 2, currentangle + 180, 180);
    pathBig1.arcTo(centerX + radiusBig * qCos(degreesToRadians(currentangle)) - radiusBig,
                   centerY - radiusBig * qSin(degreesToRadians(currentangle)) - radiusBig,
                   radiusBig * 2, radiusBig * 2, currentangle + 180, -180
                  );
    painter->drawPath(pathBig1);

    //绘制八卦大圆2
    painter->setBrush(background);
    QPainterPath pathBig2(QPointF(centerX + radius * qCos(degreesToRadians(currentangle)),
                                  centerY - radius * qSin(degreesToRadians(currentangle))));
    pathBig2.arcTo(centerX - radius, centerY - radius, radius * 2, radius * 2, currentangle, -180);
    pathBig2.arcTo(centerX + radiusBig * qCos(degreesToRadians(currentangle + 180)) - radiusBig,
                   centerY - radiusBig * qSin(degreesToRadians(currentangle + 180)) - radiusBig,
                   radiusBig * 2, radiusBig * 2, currentangle + 180, 180);
    pathBig2.arcTo(centerX + radiusBig * qCos(degreesToRadians(currentangle)) - radiusBig,
                   centerY - radiusBig * qSin(degreesToRadians(currentangle)) - radiusBig,
                   radiusBig * 2, radiusBig * 2, currentangle + 180, -180
                  );
    painter->drawPath(pathBig2);

    //绘制八卦小圆1
    painter->setBrush(foreground);
    QPainterPath pathSmall1;
    pathSmall1.addEllipse(centerX + radiusBig * qCos(degreesToRadians(currentangle)) - radiusSmall,
                          centerY - radiusBig * qSin(degreesToRadians(currentangle)) - radiusSmall,
                          radiusSmall * 2, radiusSmall * 2);
    painter->drawPath(pathSmall1);

    //绘制八卦小圆2
    painter->setBrush(background);
    QPainterPath pathSmall2;
    pathSmall2.addEllipse(centerX + radiusBig * qCos(degreesToRadians(180 + currentangle)) - radiusSmall,
                          centerY - radiusBig * qSin(degreesToRadians(180 + currentangle)) - radiusSmall,
                          radiusSmall * 2, radiusSmall * 2);
    painter->drawPath(pathSmall2);

    painter->restore();
}

void ProgressWait::drawRoundCircle(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);

    int radius = 99;
    int minRadius = radius / 6;
    double angleStep = 360.0 / maxValue;
    double alpha = (double)1 / maxValue;

    if (!clockWise) {
        angleStep = -angleStep;
    }

    //计算中心点坐标
    int centerX = 0;
    int centerY = 0;
    double centerRadius = radius / 1.2;

    for (int i = 0; i < maxValue; i++) {
        double angle = (currentValue + i) * angleStep;
        double initX = centerRadius * qCos(degreesToRadians(angle)) + centerX;
        double initY = centerRadius * qSin(degreesToRadians(angle)) + centerY;

        int value = i * alpha * 255;
        value = value < 30 ? 30 : value;

        foreground.setAlpha(value);
        painter->setBrush(foreground);
        painter->drawEllipse(initX - minRadius, initY - minRadius, minRadius * 2, minRadius * 2);
    }

    painter->restore();
}

Sixth, the controls described

1. More than 149 exquisite control, covers a variety of dashboards, progress bar, the progress of the ball, compass, graphs, scales, thermometers, navigation bar, navigation bar, flatui, highlight the button, slide the selector, the lunar calendar and so on. Qwt far more than the number of controls integration.
2. Each class can be independently as a separate control, zero coupling each control file and a header file to achieve a code amount, independent of other files to facilitate individual control integrated into the project source code form, less. qwt interlocking control class, highly coupled, want to use one of the controls, must contain all the code.
3. Write all pure Qt, QWidget + QPainter to draw, to support any Qt version Qt4.6 Qt5.12, support for mingw, msvc, gcc compiler, etc., support any operating system such as windows + linux + mac + embedded linux, which does not garbled can be directly integrated into Qt Creator, a built-in controls and use the same, most of the effects can be as long as several properties are set, very convenient.
4. DEMO separate source containing the control corresponding to each control has a convenient reference. It also provides integrated use of all controls a DEMO.
5. Source code for each control has detailed Chinese annotation, are prepared in accordance with unified design specifications, easy to learn to write custom controls.
6. Each control default color and demo corresponding color is very beautiful.
7. More than 130 visible control, six invisible control.
8. Portion control provides a variety of styles style selection, multiple choice style indicator.
9. All controls changes adaptive stretched form.
10. Integrated design custom attribute that supports drag design, WYSIWYG support the import and export in xml format.
11. Activex control that comes with demo, all controls can be run directly in the browser ie.
12. Fontawesome integrated graphics font + Alibaba iconfont collection of hundreds of graphic fonts, font fun graphic brings.
13. All controls and finally generate a dll dynamic library files, can be integrated directly into qtcreator designed for use in drag.
14. Already qml version, the latter will consider a pyqt version, if the user is in great demand then.

Seven, SDK download

• SDK download link: https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ extraction code: 877p
• Download link is included in the various versions of the dynamic library files, header files of all the controls, the use of demo, custom controls + properties designer.
• Open plug-in custom dynamic library dll use (permanent free), and the back door without any restrictions, ease of use.
• 26 now available version dll, which includes qt5.12.3 msvc2017 32 + 64 mingw 32 + 64 in.
• From time to time to increase control and improve controls, regularly updated SDK, to welcome all suggestions, thank you!
• widget versions (QQ: 517216493) qml versions (QQ: 373955953) sambong camel (QQ: 278969898).
• Qt's advanced column know almost Taoge road https://zhuanlan.zhihu.com/TaoQt
• Welcome concern public micro-channel number] [efficient programmers, content C ++ / Python, learning, writing skills, popular technology, career development, a lot of dry goods, benefits a lot!