Qt Writing Custom Control 57-Histogram Waveform

Posted by sri2002 on Sun, 22 Sep 2019 03:52:40 +0200

1. Preface

Histogram control is not an original control. There are about 20-30 controls in the control range which are not original by themselves, but refer to the open source code on the Internet and tidy up and perfect themselves. The code of the plug-in has been added so that it can be integrated directly into QtDesigner or QtCreator.The main purpose of a histogram is to draw a gradient transition from the external incoming coordinate set data, which produces a dynamic transition effect by re-calculating the set of coordinates + 1 to a new set of coordinates, so that the drawing does not seem dead, but rather a slow transition.

2. Functions realized

  • 1:Maximum settable
  • 2:The step size for each transition can be set
  • 3:Interval between item s can be set
  • 4:Gradient background color can be set
  • 5:Line color can be set

3. Effect Charts

4. Header File Code

#ifndef WAVELINE_H
#define WAVELINE_H

 * Author of Histogram Control: feiyangqingyun(QQ:517216493) 2016-11-6
 * 1:Maximum Settable
 * 2:You can set the step size for each transition
 * 3:The interval between item s can be set
 * 4:Gradient background color can be set
 * 5:Settable Line Color

#include <QWidget>

#ifdef quc
#include <QtDesigner/QDesignerExportWidget>
#include <QtUiPlugin/QDesignerExportWidget>

class QDESIGNER_WIDGET_EXPORT WaveLine : public QWidget
class WaveLine : public QWidget

    Q_PROPERTY(int maxValue READ getMaxValue WRITE setMaxValue)
    Q_PROPERTY(int step READ getStep WRITE setStep)
    Q_PROPERTY(int space READ getSpace WRITE setSpace)

    Q_PROPERTY(QColor bgColorStart READ getBgColorStart WRITE setBgColorStart)
    Q_PROPERTY(QColor bgColorEnd READ getBgColorEnd WRITE setBgColorEnd)
    Q_PROPERTY(QColor lineColor READ getLineColor WRITE setLineColor)

    explicit WaveLine(QWidget *parent = 0);

    void paintEvent(QPaintEvent *);
    void drawBg(QPainter *painter);
    void drawLine(QPainter *painter);

    int maxValue;                   //Maximum
    int step;                       //step
    int space;                      //spacing

    QColor bgColorStart;            //Background Gradient Start Color
    QColor bgColorEnd;              //Background Gradient End Color
    QColor lineColor;               //line color

    QTimer *timer;                  //Draw Timer
    QVector<int> currentDataVec;    //Current Data Collection
    QVector<int> dataVec;           //Target Data Collection

private slots:
    void updateData();

    int getMaxValue()               const;
    int getStep()                   const;
    int getSpace()                  const;

    QColor getBgColorStart()        const;
    QColor getBgColorEnd()          const;
    QColor getLineColor()           const;

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

public Q_SLOTS:
    //Set up data
    void setData(const QVector<int> &dataVec);

    //Set Maximum
    void setMaxValue(int maxValue);
    //Set Step
    void setStep(int step);
    //Set Spacing
    void setSpace(int space);

    //Set background color
    void setBgColorStart(const QColor &bgColorStart);
    void setBgColorEnd(const QColor &bgColorEnd);

    //Set Line Color
    void setLineColor(const QColor &lineColor);

#endif // WAVELINE_H

5. Core Code

void WaveLine::paintEvent(QPaintEvent *)
    //Drawing preparation, anti-aliasing enabled
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);

    //Draw Background
    //Draw lines

void WaveLine::drawBg(QPainter *painter)
    QLinearGradient bgGradient(QPoint(0, 0), QPoint(0, height()));
    bgGradient.setColorAt(0.0, bgColorStart);
    bgGradient.setColorAt(1.0, bgColorEnd);

void WaveLine::drawLine(QPainter *painter)
    painter->setPen(QPen(lineColor, 2));

    int count = dataVec.count();
    double increment = (double)width() / count;
    double initX = 0;
    QVector<QPointF> pointVec;

    for (int i = 0; i < count - 1; i++) {
        double currentValue = currentDataVec.at(i);
        double y1 = height() - (double)height() / maxValue * currentValue;
        double nextValue = currentDataVec.at(i + 1);
        double y2 = height() - (double)height() / maxValue * nextValue;

        QPointF point1(initX, y1);
        QPointF point2(initX + increment, y2);
        initX += increment;



6. Introduction to Controls

  1. Over 150 beautiful controls, including dashboards, progress bars, progress balls, compasses, curves, rulers, thermometers, navigation bars, navigation bars, flatui, highlight buttons, slide selectors, lunar calendar, etc.Far more than qwt integrated controls.
  2. Each class can be separated into a single control, with zero coupling, a header file and an implementation file for each control, independent of other files, so that a single control can be integrated into the project as a source code with less code.qwt's control classes are linked and highly coupled. To use one of these controls, you must include all the code.
  3. All pure Qt writing, QWidget+QPainter drawing, support any Qt version from Qt4.6 to Qt5.13, support compilers such as mingw, msvc, gcc, support any operating system such as windows+linux+mac+embedded linux, no scrambling, can be directly integrated into Qt Creator, like its own controls, most effects as long as setA few attributes are very convenient.
  4. Each control has a corresponding separate DEMO containing its source code for easy reference.It also provides an integrated DEMO used by all controls.
  5. Each control's source code has detailed Chinese comments, which are written in accordance with the uniform design specifications to facilitate learning how to write custom controls.
  6. The default and demo colors for each control are beautiful.
  7. More than 130 visible controls and 6 invisible controls.
  8. Some controls offer a variety of style choices and indicator style choices.
  9. All controls adapt to form stretch changes.
  10. Integrates custom control property designer, supports drag design, what you see is what you get, and supports import and export xml formats.
  11. With its own activex control demo, all controls can run directly in the ie browser.
  12. Integrate fontawesome graphics fonts + several hundred graphics fonts from Alibaba iconfont collection to enjoy graphics fonts.
  13. All controls end up with a dynamic library file (dll or so, etc.) that can be integrated directly into the qtcreator and dragged for design use.
  14. There is already a qml version, and the pyqt version will be considered later if there is a large user demand.
  15. Custom Control Plugins open dynamic library for use (permanently free) without any backdoors or restrictions, please use with confidence.
  16. There are currently 26 versions of dll available, including qt5.12.3 msvc2017 32+64 mingw 32+64.
  17. Add controls and improve controls at irregular intervals, update SDK at irregular intervals, welcome to make suggestions, thank you!
  18. Qt introductory books recommend Hoyafei's Quick Start Qt Creator, Getting Started with Qt5 Programming, and Qt advanced books recommend the official C++ GUI Qt4 Programming.
  19. It is highly recommended that programmers self-cultivate and plan series "Talking Programmers", "Programmers'Growth Class" and "Relieving Programmers", which benefits a lot and benefits for a lifetime!
  20. SDK Download Link: https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ Extraction code: 877p

Topics: Mobile Qt Qt5 Linux SDK