Qt to write custom dashboard 44- Weather

I. Introduction

Weather dashboard controls are the only one using all the controls in the svg vector control, vector graphics used in all kinds of weather icons, color conversion using dynamically loaded svg content changes generated graphical fonts can actually do this svg times to be familiar with the controls in Qt under svg, only used to draw.
Weather generally represent more content, temperature + humidity + weather, which requires many elements of rational layout location more attractive to some reference here is some general online practices, such as the outermost ring is the temperature, humidity intermediate ring, and then attached to the upper left corner of weather icon inside the middle ring, and then rendering value, the dynamic changes of temperature and humidity.

Second, the realization of functions

• 1: you can set two values, such as temperature and humidity +
• 2: two kinds of values ​​can set the background color of the text color +
• 3: zero value left right can be provided in two colors
• 4: can be provided round starting and ending angles
• 5: You can set 10 kinds of weather, rain sunny + + + gale cloudy
• 6: a variety of other colors may be provided
• 7: Section enable or disable animations and animated displays the progress of steps

Third, renderings

Fourth, the header file code

#ifndef GAUGEWEATHER_H
#define GAUGEWEATHER_H

/**
 * 天气仪表盘控件 作者:东门吹雪(QQ:709102202) 整理:飞扬青云(QQ:517216493) 2019-4-23
 * 1:可设置两种值,比如温度+湿度
 * 2:可设置两种值的背景颜色+文字颜色
 * 3:可设置零度值左侧右侧两种颜色
 * 4:可设置圆的起始角度和结束角度
 * 5:可设置10种天气,晴天+雨天+阴天+大风等
 * 6:可设置各种其他颜色
 * 7:科设置是否启用动画显示进度以及动画步长
 */

#include <QWidget>
#include <QDomElement>

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

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

{
    Q_OBJECT
    Q_ENUMS(WeatherType)

    Q_PROPERTY(double outerValue READ getOuterValue WRITE setOuterValue)
    Q_PROPERTY(double outerMinValue READ getOuterMinValue WRITE setOuterMinValue)
    Q_PROPERTY(double outerMaxValue READ getOuterMaxValue WRITE setOuterMaxValue)

    Q_PROPERTY(int outerStartAngle READ getOuterStartAngle WRITE setOuterStartAngle)
    Q_PROPERTY(int outerEndAngle READ getOuterEndAngle WRITE setOuterEndAngle)

    Q_PROPERTY(QColor outerRingBgColor READ getOuterRingBgColor WRITE setOuterRingBgColor)
    Q_PROPERTY(QColor outerRingColor READ getOuterRingColor WRITE setOuterRingColor)

    Q_PROPERTY(double innerValue READ getInnerValue WRITE setInnerValue)
    Q_PROPERTY(double innerMinValue READ getInnerMinValue WRITE setInnerMinValue)
    Q_PROPERTY(double innerMaxValue READ getInnerMaxValue WRITE setInnerMaxValue)

    Q_PROPERTY(int innerStartAngle READ getInnerStartAngle WRITE setInnerStartAngle)
    Q_PROPERTY(int innerEndAngle READ getInnerEndAngle WRITE setInnerEndAngle)

    Q_PROPERTY(QColor innerRingBgColor READ getInnerRingBgColor WRITE setInnerRingBgColor)
    Q_PROPERTY(QColor innerRingNegativeColor READ getInnerNegativeColor WRITE setInnerNegativeColor)
    Q_PROPERTY(QColor innerRingPositiveColor READ getInnerPositiveColor WRITE setInnerPositiveColor)

    Q_PROPERTY(int innerScaleMajor READ getInnerScaleMajor WRITE setInnerScaleMajor)
    Q_PROPERTY(int innerScaleMinor READ getInnerScaleMinor WRITE setInnerScaleMinor)
    Q_PROPERTY(QColor innerScaleColor READ getInnerScaleColor WRITE setInnerScaleColor)
    Q_PROPERTY(QColor innerScaleNumColor READ getInnerScaleNumColor WRITE setInnerScaleNumColor)

    Q_PROPERTY(QColor centerPixMapNegativeColor READ getCenterPixMapNegativeColor WRITE setCenterPixMapNegativeColor)
    Q_PROPERTY(QColor centerPixMapPositiveColor READ getCenterPixMapPositiveColor WRITE setCenterPixMapPositiveColor)

    Q_PROPERTY(QColor outerValueTextColor READ getOuterValueTextColor WRITE setOuterValueTextColor)
    Q_PROPERTY(QColor innerNegativeValueTextColor READ getInnerNegativeValueTextColor WRITE setInnerNegativeValueTextColor)
    Q_PROPERTY(QColor innerPositiveValueTextColor READ getInnerPositiveValueTextColor WRITE setInnerPositiveValueTextColor)

    Q_PROPERTY(bool animation READ getAnimation WRITE setAnimation)
    Q_PROPERTY(double animationStep READ getAnimationStep WRITE setAnimationStep)
    Q_PROPERTY(WeatherType weatherType READ getWeatherType WRITE setWeatherType)

public:
    enum WeatherType {
        SUNNY = 0,          //晴天
        RAINY = 1,          //雨天
        SNOWY = 2,          //雪天
        CLOUDY = 3,         //多云
        WINDY = 4,          //风
        SNOWY_RAINY = 5,    //雪雨
        HAIL = 6,           //冰雹
        LIGHTNING = 7,      //闪电
        FOG = 8,            //雾
        PARTLYCLOUDY = 9    //局部多云
    };

    explicit GaugeWeather(QWidget *parent = 0);
    ~GaugeWeather();

protected:
    void paintEvent(QPaintEvent *);
    void drawOuterRingBg(QPainter *painter);
    void drawOuterRing(QPainter *painter);
    void drawInnerRingBg(QPainter *painter);
    void drawInnerRing(QPainter *painter);
    void drawInnerRingScale(QPainter *painter);
    void drawInnerRingScaleNum(QPainter *painter);
    void drawCenterPixMap(QPainter *painter);
    void drawValue(QPainter *painter);

private slots:
    void updateOuterValue();            //更新外圈数值
    void updateInnerValue();            //更新内圈数值

private:
    double outerMaxValue;               //外圈最大值
    double outerMinValue;               //外圈最小值
    double outerValue;                  //外圈值
    double outerCurrValue;              //外圈当前值

    int outerStartAngle;                //外环开始旋转角度
    int outerEndAngle;                  //外环结束旋转角度

    QColor outerRingBgColor;            //外圈背景色
    QColor outerRingColor;              //外圈当前色

    double innerMaxValue;               //内圈最大值
    double innerMinValue;               //内圈最小值
    double innerValue;                  //内圈值
    double innerCurrValue;              //内圈当前值

    int innerStartAngle;                //内环开始旋转角度
    int innerEndAngle;                  //内环结束旋转角度

    QColor innerRingBgColor;            //内圈背景色
    QColor innerRingNegativeColor;      //内圈负值当前色
    QColor innerRingPositiveColor;      //内圈正值当前色

    int innerScaleMajor;                //内环大刻度数量
    int innerScaleMinor;                //内环小刻度数量
    QColor innerScaleColor;             //内环刻度颜色
    QColor innerScaleNumColor;          //内环刻度值颜色
    int precision;                      //精确度,小数点后几位

    QColor centerPixMapNegativeColor;   //中心图片颜色
    QColor centerPixMapPositiveColor;   //中心图片颜色
    QString centerSvgPath;              //当前svg图片路径
    WeatherType weatherType;            //天气类型

    QColor outerValueTextColor;         //外环值文本颜色
    QColor innerNegativeValueTextColor; //内环正值文本颜色
    QColor innerPositiveValueTextColor; //内环负值文本颜色

    bool animation;                     //是否启用动画显示
    double animationStep;               //动画显示时步长

    bool outerReverse;                  //是否往回走
    bool innerReverse;                  //是否往回走
    bool clockWise;                     //顺时针

    QTimer *outerTimer;                 //外环定时器绘制动画
    QTimer *innerTimer;                 //内环定时器绘制动画

    //将svg文件中的xml数据颜色替换
    void setColor(QDomElement elem, QString strtagname, QString strattr, QString strattrval);
    QString rgb2HexStr(const QColor &color);

public:
    double getOuterMinValue()               const;
    double getOuterMaxValue()               const;
    double getOuterValue()                  const;
    int getOuterStartAngle()                const;
    int getOuterEndAngle()                  const;

    QColor getOuterRingBgColor()            const;
    QColor getOuterRingColor()              const;

    double getInnerMaxValue()               const;
    double getInnerMinValue()               const;
    double getInnerValue()                  const;
    int getInnerStartAngle()                const;
    int getInnerEndAngle()                  const;

    QColor getInnerRingBgColor()            const;
    QColor getInnerNegativeColor()          const;
    QColor getInnerPositiveColor()          const;

    int getInnerScaleMajor()                const;
    int getInnerScaleMinor()                const;
    QColor getInnerScaleColor()             const;
    QColor getInnerScaleNumColor()          const;

    bool getAnimation()                     const;
    double getAnimationStep()               const;

    WeatherType getWeatherType()            const;

    QColor getCenterPixMapNegativeColor()   const;
    QColor getCenterPixMapPositiveColor()   const;

    QColor getOuterValueTextColor()         const;
    QColor getInnerNegativeValueTextColor() const;
    QColor getInnerPositiveValueTextColor() const;

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

public Q_SLOTS:
    void setWeatherType(WeatherType &type);

    //设置范围值
    void setOuterRange(double minValue, double maxValue);
    //设置外环最大最小值
    void setOuterMinValue(double value);
    void setOuterMaxValue(double value);

    //设置外环值
    void setOuterValue(double value);
    //设置外环开始旋转角度
    void setOuterStartAngle(int startAngle);
    //设置外环结束旋转角度
    void setOuterEndAngle(int endAngle);
    //设置外环背景色
    void setOuterRingBgColor(const QColor &color);
    //设置外环进度色
    void setOuterRingColor(const QColor &color);

    //设置范围值
    void setInnerRange(double minValue, double maxValue);
    void setInnerMinValue(double value);
    void setInnerMaxValue(double value);
    void setInnerValue(double value);
    void setInnerStartAngle(int startAngle);
    void setInnerEndAngle(int endAngle);

    void setInnerRingBgColor(const QColor &color);
    void setInnerNegativeColor(const QColor &color);
    void setInnerPositiveColor(const QColor &color);

    void setInnerScaleMajor(int value);
    void setInnerScaleMinor(int value);
    void setInnerScaleColor(const QColor &color);
    void setInnerScaleNumColor(const QColor &color);

    //设置中心图标颜色
    void setCenterPixMapNegativeColor(const QColor &color);
    void setCenterPixMapPositiveColor(const QColor &color);

    void setOuterValueTextColor(const QColor &color);
    void setInnerNegativeValueTextColor(const QColor &color);
    void setInnerPositiveValueTextColor(const QColor &color);

    //设置是否启用动画显示
    void setAnimation(bool animation);
    //设置动画显示的步长
    void setAnimationStep(double animationStep);

Q_SIGNALS:
    void valueChanged(double value);
};

#endif // GAUGEWEATHER_H

Fifth, the core code

void GaugeWeather::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);

    //绘制外环背景
    drawOuterRingBg(&painter);
    //绘制外环进度
    drawOuterRing(&painter);
    //绘制内环背景
    drawInnerRingBg(&painter);
    //绘制内环进度
    drawInnerRing(&painter);
    //绘制内环刻度值
    drawInnerRingScaleNum(&painter);
    //绘制中心图片
    drawCenterPixMap(&painter);
    //绘制数值
    drawValue(&painter);
}

void GaugeWeather::drawOuterRingBg(QPainter *painter)
{
    int radius = 99;
    painter->save();
    painter->setBrush(Qt::NoBrush);

    //绘制圆弧方法绘制圆环
    int penWidth = 13;
    QRectF rect(-radius + penWidth / 2, -radius + penWidth / 2, radius * 2 - penWidth, radius * 2 - penWidth);
    //可以自行修改画笔的后三个参数,形成各种各样的效果,例如Qt::FlatCap改为Qt::RoundCap可以产生圆角效果
    QPen pen(outerRingBgColor, penWidth, Qt::SolidLine, Qt::FlatCap, Qt::MPenJoinStyle);

    //计算总范围角度
    double angleAll = 360.0 - outerStartAngle - outerEndAngle;

    //绘制总范围角度圆弧
    pen.setColor(outerRingBgColor);
    painter->setPen(pen);
    painter->drawArc(rect, (270 - outerStartAngle - angleAll) * 16, angleAll * 16);
    painter->restore();
}

void GaugeWeather::drawOuterRing(QPainter *painter)
{
    int radius = 99;
    painter->save();
    painter->setBrush(Qt::NoBrush);

    //绘制圆弧方法绘制圆环
    int penWidth = 13;
    QRectF rect(-radius + penWidth / 2, -radius + penWidth / 2, radius * 2 - penWidth, radius * 2 - penWidth);
    //可以自行修改画笔的后三个参数,形成各种各样的效果,例如Qt::FlatCap改为Qt::RoundCap可以产生圆角效果
    QPen pen(outerRingColor, penWidth, Qt::SolidLine, Qt::FlatCap, Qt::MPenJoinStyle);

    //计算总范围角度,当前值范围角度,剩余值范围角度
    double angleAll = 360.0 - outerStartAngle - outerEndAngle;
    double angleCurrent = angleAll * ((outerCurrValue - outerMinValue) / (outerMaxValue - outerMinValue));

    //绘制当前值饼圆
    painter->setPen(pen);
    painter->drawArc(rect, (270 - outerStartAngle - angleCurrent) * 16, angleCurrent * 16);
    painter->restore();
}

void GaugeWeather::drawInnerRingBg(QPainter *painter)
{
    int radius = 77;
    painter->save();
    painter->setBrush(Qt::NoBrush);

    double penWidth = 13;
    QPen pen(innerRingBgColor, penWidth, Qt::SolidLine, Qt::FlatCap, Qt::MPenJoinStyle);
    painter->setPen(pen);

    double angleAll = 360.0 - innerStartAngle - innerEndAngle;
    QRectF rect = QRectF(-radius, -radius, radius * 2, radius * 2);

    //零值以上背景
    painter->drawArc(rect, (270 - innerStartAngle -  angleAll) * 16 , angleAll * 16);
    //零值以下背景
    //painter->drawArc(rect,(270 -innerStartAngle -  null2MinAngle) * 16 ,null2MinAngle * 16);

    painter->restore();
}

void GaugeWeather::drawInnerRing(QPainter *painter)
{
    int radius = 77;
    painter->save();
    painter->setBrush(Qt::NoBrush);

    int penWidth = 13.5;
    QPen pen(innerRingPositiveColor, penWidth, Qt::SolidLine, Qt::FlatCap, Qt::MPenJoinStyle);

    double angleAll = 360.0 - innerStartAngle - innerEndAngle;
    double null2MinAngle = angleAll * (( 0 - innerMinValue) / (innerMaxValue - innerMinValue));  //零点所占的角度
    double nullUpAllAngle = angleAll - null2MinAngle;   //正基本角度
    double currAngle;
    if(innerCurrValue >= 0) {
        //正角度
        pen.setColor(innerRingNegativeColor);
        currAngle = nullUpAllAngle * (innerCurrValue / innerMaxValue)  * -1;
    } else {
        //负角度
        pen.setColor(innerRingPositiveColor);
        currAngle = null2MinAngle * (innerCurrValue / innerMinValue);
    }

    painter->setPen(pen);

    QRectF rect = QRectF(-radius, -radius, radius * 2, radius * 2);
    painter->drawArc(rect, (270 - innerStartAngle -  null2MinAngle) * 16 , currAngle * 16);

    painter->restore();

}

void GaugeWeather::drawInnerRingScale(QPainter *painter)
{
    int radius = 76;
    painter->save();
    painter->setPen(innerScaleColor);

    painter->rotate(innerStartAngle);
    int steps = (innerScaleMajor * innerScaleMinor);
    double angleStep = (360.0 - innerStartAngle - innerEndAngle) / steps;
    QPen pen = painter->pen();
    pen.setCapStyle(Qt::RoundCap);

    for (int i = 0; i <= steps; i++) {
        if (i % innerScaleMinor == 0) {
            pen.setWidthF(1.5);
            painter->setPen(pen);
            painter->drawLine(0, radius - 12, 0, radius);
        } else {
            pen.setWidthF(1.0);
            painter->setPen(pen);
            painter->drawLine(0, radius - 5, 0, radius);
        }

        painter->rotate(angleStep);
    }

    painter->restore();
}

Sixth, the controls described

1. More than 150 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!
• Qt introductory books recommended Huo Yafei of "Qt Creator Quick Start" "Qt5 programming entry", Qt official Advanced book recommendations "C ++ GUI Qt4 programming."
• Highly recommended programmer self-discipline and planning book series "lying programmer" "Programmer's growth course", "grief programmer"!