Qt Writing Custom Control 51 - Input dashboard

I. Preface

This control is a recently customized control, or one of the more practical controls. Users mainly raised three points of demand. One point is that when the focus is switched, the control is magnified and highlighted. The other point is that it can directly input or edit values. The other point is that it supports up and down keys, page turning keys and mouse wheel to dynamically modify values, similar to qs. Pinbox control. To support direct input, the first thought is the qlineedit control. In the middle part of the original dashboard control, a qlineedit control is placed to input values. Regular expressions are used to restrict the number input. In order to make the qlinedit and the self-drawn dashboard fully integrated, qlineedit must be set up. The style is transparent. As for the position of the input box, a little trick is to set the input box to the size of the control directly, so that the focus of input is always in the middle of the control, completely mixed, and it can not be seen that an input box control is inserted there. As for the up and down keys, page turning keys and mouse rollers, install things directly. The filter can be identified and processed accordingly.

II. Functions of Realization

  • 1: Range values can be set to support negative values
  • 2: Start rotation angle/end rotation angle can be set
  • 3: Can set whether animation effect is enabled and the step size of animation effect moving each time.
  • 4: Circle Background/Circle Background/Progress Color/Spare Color/Text Color can be set
  • 5: Self-adaptive form stretching, text auto-zooming
  • 6: Support tab and mouse press to switch focus
  • 7: Support immediate application of direct input values
  • 8: Automatically enlarges the focus control
  • 9: Support keyboard up and down key step size 1 modified value
  • 10: Support up and down page turning key step size is 10 modified value
  • 11: Modified step size of mouse wheel is 1


Header file code


 * Input dashboard control author: feiyangqingyun(QQ:517216493) 2019-09-11
 * 1:Range values can be set to support negative values
 * 2:Start rotation angle/end rotation angle can be set
 * 3:Can set whether animation effect is enabled and the step size of animation effect each time it moves
 * 4:Can set the outer background / inner background / progress color / spare color / text color
 * 5:Self-adaptive form stretching, text auto-zooming
 * 6:Support tab and mouse press to switch focus
 * 7:Support immediate application of direct input values
 * 8:Getting focus controls automatically enlarges
 * 9:Support keyboard up and down key step size 1 modified value
 * 10:Support up and down page turning key step size of 10 modified values
 * 11:Modified mouse wheel step size to 1

#include <QWidget>

class QLineEdit;

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

class QDESIGNER_WIDGET_EXPORT GaugeEdit : public QWidget
class GaugeEdit : public QWidget

    Q_PROPERTY(double minValue READ getMinValue WRITE setMinValue)
    Q_PROPERTY(double maxValue READ getMaxValue WRITE setMaxValue)
    Q_PROPERTY(double value READ getValue WRITE setValue)
    Q_PROPERTY(QString unit READ getUnit WRITE setUnit)

    Q_PROPERTY(int startAngle READ getStartAngle WRITE setStartAngle)
    Q_PROPERTY(int endAngle READ getEndAngle WRITE setEndAngle)
    Q_PROPERTY(bool animation READ getAnimation WRITE setAnimation)
    Q_PROPERTY(double animationStep READ getAnimationStep WRITE setAnimationStep)

    Q_PROPERTY(QColor outerCircleColor READ getOuterCircleColor WRITE setOuterCircleColor)
    Q_PROPERTY(QColor innerCircleColor READ getInnerCircleColor WRITE setInnerCircleColor)
    Q_PROPERTY(QColor centerCircleColor READ getCenterCircleColor WRITE setCenterCircleColor)
    Q_PROPERTY(QColor usedColor READ getUsedColor WRITE setUsedColor)
    Q_PROPERTY(QColor freeColor READ getFreeColor WRITE setFreeColor)
    Q_PROPERTY(QColor textColor READ getTextColor WRITE setTextColor)

    explicit GaugeEdit(QWidget *parent = 0);

    bool eventFilter(QObject *watched, QEvent *event);
    void resizeEvent(QResizeEvent *);
    void paintEvent(QPaintEvent *);
    void drawOuterCircle(QPainter *painter);
    void drawInnerCircle(QPainter *painter);
    void drawProgress(QPainter *painter);
    void drawCenterCircle(QPainter *painter);
    void drawUnit(QPainter *painter);

private slots:
    void initStyle();
    void updateValue();
    void textChanged(const QString &value);

    double minValue;                //minimum value
    double maxValue;                //Maximum value
    double value;                   //target value
    QString unit;                   //Company

    int startAngle;                 //Start rotation angle
    int endAngle;                   //End rotation angle
    bool animation;                 //Whether animation display is enabled
    double animationStep;           //Time step of animation display

    QColor outerCircleColor;        //Circle Background Color
    QColor innerCircleColor;        //Inner circle background color
    QColor centerCircleColor;       //Central circle color
    QColor usedColor;               //Schedule color
    QColor freeColor;               //Free color
    QColor textColor;               //Text color

    bool reverse;                   //Whether to go back or not
    double currentValue;            //Current value
    QTimer *timer;                  //Timer Drawing Animation

    int offset;                     //Offset value
    QLineEdit *lineEdit;            //Edit box

    double getMinValue()            const;
    double getMaxValue()            const;
    double getValue()               const;
    QString getUnit()               const;

    int getStartAngle()             const;
    int getEndAngle()               const;
    bool getAnimation()             const;
    double getAnimationStep()       const;

    QColor getOuterCircleColor()    const;
    QColor getInnerCircleColor()    const;
    QColor getCenterCircleColor()   const;
    QColor getUsedColor()           const;
    QColor getFreeColor()           const;
    QColor getTextColor()           const;

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

public Q_SLOTS:
    //Set range values
    void setRange(double minValue, double maxValue);
    void setRange(int minValue, int maxValue);

    //Set maximum and minimum
    void setMinValue(double minValue);
    void setMaxValue(double maxValue);

    //Setting target values
    void setValue(double value);
    void setValue(int value);

    //Setup unit
    void setUnit(const QString &unit);

    //Set the start rotation angle
    void setStartAngle(int startAngle);
    //Set the end rotation angle
    void setEndAngle(int endAngle);

    //Set whether animation display is enabled
    void setAnimation(bool animation);
    //Set the step size for animation display
    void setAnimationStep(double animationStep);

    //Set the background color of the outer circle
    void setOuterCircleColor(const QColor &outerCircleColor);
    //Set the background color of the inner circle
    void setInnerCircleColor(const QColor &innerCircleColor);
    //Set the center circle color
    void setCenterCircleColor(const QColor &centerCircleColor);
    //Setting progress color
    void setUsedColor(const QColor &usedColor);
    //Set the spare color
    void setFreeColor(const QColor &freeColor);
    //Setting Text Colors
    void setTextColor(const QColor &textColor);

    void valueChanged(int value);

#endif // GAUGEEDIT_H

V. Core Code

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

    //Drawing preparation, enabling anti-aliasing, translating coordinate axis center, scaling in equal proportion
    QPainter painter(this);
    painter.setRenderHints(QPainter::Antialiasing | QPainter::TextAntialiasing);
    painter.translate(width / 2, height / 2);
    painter.scale(side / 200.0, side / 200.0);

    //Draw out circle
    //Drawing inner circle
    //Draw the current schedule
    //Drawing the central circle
    //Drawing unit

void GaugeEdit::drawOuterCircle(QPainter *painter)
    int radius = 91 + offset;
    painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);

void GaugeEdit::drawInnerCircle(QPainter *painter)
    int radius = 80 + offset;
    painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);

void GaugeEdit::drawProgress(QPainter *painter)
    int radius = 75 + offset;

    QRectF rect(-radius, -radius, radius * 2, radius * 2);

    //Calculate total range angle, current range angle, residual range angle
    double angleAll = 360.0 - startAngle - endAngle;
    double angleCurrent = angleAll * ((currentValue - minValue) / (maxValue - minValue));
    double angleOther = angleAll - angleCurrent;

    //Draw the current value pie circle
    painter->drawPie(rect, (270 - startAngle - angleCurrent) * 16, angleCurrent * 16);

    //Drawing Residual Value Pie Circle
    painter->drawPie(rect, (270 - startAngle - angleCurrent - angleOther) * 16, angleOther * 16);


void GaugeEdit::drawCenterCircle(QPainter *painter)
    int radius = 60 + offset;
    painter->drawEllipse(-radius, -radius, radius * 2, radius * 2);

void GaugeEdit::drawUnit(QPainter *painter)
    int radius = 100;

    QFont font;

    int offsetY = 110;
    QRectF unitRect(-radius, -radius + offsetY, radius * 2, radius * 2 - offsetY);
    painter->drawText(unitRect, Qt::AlignCenter, unit);


Introduction of Control

  1. More than 150 exquisite controls, covering a variety of dashboards, progress bars, progress balls, compasses, curves, rulers, thermometers, navigation bars, navigation bars, flatui, highlighted buttons, sliding selectors, lunar calendar, etc. Far more controls than qwt integrates.
  2. Each class can be separated into a separate control, zero-coupling, each control has a header file and an implementation file, independent of other files, to facilitate the integration of a single control in the form of source code into the project, less code. The control classes of qwt are interlinked and highly coupled. If you want to use one of the controls, you must include all the code.
  3. All pure Qt writing, QWidget+QPainter drawing, support any Qt version from Qt4.6 to Qt5.12, support mingw, msvc, gcc and other compilers, support any operating system such as windows+linux+mac + embedded linux, no scrambling, can be directly integrated into Qt Creator, as with its own controls, most of the effects as long as set up. Several attributes can be used, which is very convenient.
  4. Each control has a corresponding separate DEMO containing the source code of the control, which is convenient for reference. It also provides an integrated DEMO for all controls.
  5. The source code of each control has detailed Chinese annotations, which are compiled in accordance with the unified design specifications. It is convenient to learn how to compile custom controls.
  6. Each control's default color matching and demo's corresponding color matching are very beautiful.
  7. More than 130 visible controls and 6 invisible controls.
  8. Some controls provide a variety of style choices, a variety of indicator style choices.
  9. All controls adapt to form stretching changes.
  10. Integrate custom control property designer, support drag design, WYSIWYG, support import and export xml format.
  11. With activex control demo, all controls can run directly in ie browser.
  12. Integrate fontawesome graphic fonts + hundreds of graphic fonts collected by Alibaba iconfont to enjoy the fun of graphic fonts.
  13. All controls eventually generate a dynamic library file (dll or so, etc.) that can be directly integrated into the qtcreator to drag the design to use.
  14. At present, there is a version of qml, pyqt version will be considered later, if the user demand is large.
  15. Custom Control Plug-in Open Dynamic Library (permanently free), without any backdoor and restrictions, please feel free to use.
  16. At present, 26 versions of dll have been provided, including qt5.12.3 MSVC 2017 32 + 64 MinGW 32 + 64.
  17. Increase control and improve control from time to time, update SDK from time to time. Welcome to make suggestions. Thank you!
  18. Qt introductory books recommend Hoyafei's Quick Start to Qt Creator, Qt5 Programming Introduction, and Qt advanced books recommend the official C++ GUI Qt4 Programming.
  19. I strongly recommend programmers'self-cultivation and planning series "Talking about Programmers", "Programmers' Growth Course" and "Solution Programmers". They benefit a lot and benefit a lifetime!
  20. SDK Download Link: https://pan.baidu.com/s/1A5Gd77kExm8Co5ckT51vvQ Extraction code: 877p

Tags: Mobile Qt Qt5 Linux SDK

Posted on Mon, 16 Sep 2019 01:50:18 -0400 by herando