Qt to write custom controls 59- histogram dynamic map

I. Introduction

Histogram similar to FIG dynamic histogram display when playing music, a top horizontal line, when the column rises, similar to the form of the line rushed to the top hat, the top of the column corresponds to feel, giving a dynamic feeling while listening to music more pleasing, the principle is relatively simple, is to use two timers, a timer interval is relatively short, is responsible for the fast histogram value rushed from the bottom, while horizontal lines rushed to follow along, a timer responsible slowly drop to zero value, then decreased slowly horizontal lines, the lowering speed is slower than the speed of some of the histogram, generates a contrasting effect looks more like a feeling of falling.

Second, the realization of functions

• 1: you can set the maximum / minimum / current values
• 2: the height of the slider may be provided at the top
• 3: changes in each setting step
• 4: the interval may be provided between the item
• 5: gradient background color can be provided
• 6: a columnar bar color may be provided

Third, renderings

Fourth, the header file code

#ifndef WAVEBAR_H
#define WAVEBAR_H

/**
 * 直方动态图控件 作者:feiyangqingyun(QQ:517216493) 2016-11-6
 * 1:可设置最大值/最小值/当前值
 * 2:可设置顶部滑块高度
 * 3:可设置每次变动的步长
 * 4:可设置item之间的间隔
 * 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 WaveBar : public QWidget
#else
class WaveBar : public QWidget
#endif

{
    Q_OBJECT    
    Q_PROPERTY(int minValue READ getMinValue WRITE setMinValue)
    Q_PROPERTY(int maxValue READ getMaxValue WRITE setMaxValue)
    Q_PROPERTY(int value READ getValue WRITE setValue)

    Q_PROPERTY(double step READ getStep WRITE setStep)
    Q_PROPERTY(int space READ getSpace WRITE setSpace)
    Q_PROPERTY(int headHeight READ getHeadHeight WRITE setHeadHeight)

    Q_PROPERTY(QColor bgColorStart READ getBgColorStart WRITE setBgColorStart)
    Q_PROPERTY(QColor bgColorEnd READ getBgColorEnd WRITE setBgColorEnd)
    Q_PROPERTY(QColor barColor READ getBarColor WRITE setBarColor)

public:
    explicit WaveBar(QWidget *parent = 0);
    ~WaveBar();

protected:
    void resizeEvent(QResizeEvent *);
    void paintEvent(QPaintEvent *);
    void drawBg(QPainter *painter);
    void drawBar(QPainter *painter);
    void drawHead(QPainter *painter);

private:    
    int minValue;                   //最小值
    int maxValue;                   //最大值
    int value;                      //目标值

    double step;                    //步长
    int space;                      //间距
    int headHeight;                 //顶部条块高度

    QColor bgColorStart;            //背景渐变开始颜色
    QColor bgColorEnd;              //背景渐变结束颜色
    QColor barColor;                //柱状条颜色

    int currentValue;               //当前值
    double headY;                   //顶部条块Y轴坐标
    double barY;                    //柱状条块Y轴坐标
    QTimer *barTimer;               //柱状条块下降定时器
    QTimer *headTimer;              //顶部条块下坠定时器

private slots:
    void updateBar();
    void updateHead();

public:    
    int getMinValue()               const;
    int getMaxValue()               const;
    int getValue()                  const;

    double getStep()                const;
    int getSpace()                  const;
    int getHeadHeight()             const;

    QColor getBgColorStart()        const;
    QColor getBgColorEnd()          const;
    QColor getBarColor()            const;

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

public Q_SLOTS:
    //设置范围值
    void setRange(int minValue, int maxValue);

    //设置最大最小值
    void setMinValue(int minValue);
    void setMaxValue(int maxValue);

    //设置目标值
    void setValue(int value);

    //设置步长
    void setStep(double step);
    //设置间距
    void setSpace(int space);
    //设置顶部条块高度
    void setHeadHeight(int headHeight);

    //设置背景颜色
    void setBgColorStart(const QColor &bgColorStart);
    void setBgColorEnd(const QColor &bgColorEnd);

    //设置柱状条颜色
    void setBarColor(const QColor &barColor);
};

#endif // WAVEBAR_H

Fifth, the core code

void WaveBar::paintEvent(QPaintEvent *)
{
    //绘制准备工作,启用反锯齿
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

    //绘制渐变背景
    drawBg(&painter);
    //绘制柱状条块
    drawBar(&painter);
    //绘制顶部条块
    drawHead(&painter);
}

void WaveBar::drawBg(QPainter *painter)
{
    painter->save();
    painter->setPen(Qt::NoPen);
    QLinearGradient bgGradient(QPointF(0, 0), QPointF(0, height()));
    bgGradient.setColorAt(0.0, bgColorStart);
    bgGradient.setColorAt(1.0, bgColorEnd);
    painter->setBrush(bgGradient);
    painter->drawRect(rect());
    painter->restore();
}

void WaveBar::drawBar(QPainter *painter)
{
    painter->save();
    QRectF barRect(QPointF(space, barY), QPointF(width() - space, height() - space));
    painter->setPen(Qt::NoPen);
    painter->setBrush(barColor);
    painter->drawRect(barRect);
    painter->restore();
}

void WaveBar::drawHead(QPainter *painter)
{
    painter->save();
    QRectF headRect(QPointF(space, headY), QPointF(width() - space, headY - headHeight));
    painter->setPen(Qt::NoPen);
    painter->setBrush(barColor);
    painter->drawRect(headRect);
    painter->restore();
}

void WaveBar::updateBar()
{
    barY += step;

    //超过底部则停止
    int bottomY = height() - space - headHeight;

    if (barY >= bottomY) {
        if (barTimer->isActive()) {
            barTimer->stop();
        }

        barY = bottomY;
    }

    this->update();
}

void WaveBar::updateHead()
{
    headY += step;

    //超过底部则停止
    int bottomY = height() - space;

    if (headY >= bottomY) {
        if (headTimer->isActive()) {
            headTimer->stop();
        }

        headY = bottomY;
    }

    this->update();
}

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.13, 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 dynamic library files (dll or so, etc.) 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.
15. Custom plug-in open dynamic library (permanent free), and the back door without any restrictions, ease of use.
16. 26 now available version dll, which includes qt5.12.3 msvc2017 32 + 64 mingw 32 + 64 in.
17. From time to time to increase control and improve controls, regularly updated SDK, to welcome all suggestions, thank you!
18. Qt introductory books recommended Huo Yafei of "Qt Creator Quick Start" "Qt5 programming entry", Qt official Advanced book recommendations "C ++ GUI Qt4 programming."
19. Highly recommended programmer self-discipline and planning book series "lying programmer" "Programmer's growth course", "grief programmer", benefited from a lifetime!
20. SDK download link: https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ extraction code: 877p