How to animate Qt speedguage



  • I am new to Qt. I am a hardware guy. I wanted to use Qt for displaying the benchmark results of a code (execution time) for a demo. I thought it would be more presentable if I displayed it in a visually appealing manner.

    I came across a example implementation of a Speed gauge in Qt at this link: https://github.com/Berrima/Qt-custom-gauge-widget/tree/master/examples/SpeedGauge

    I want to display a number (say 900) on the speed gauge and this can be done by setting a value of the needle. But I want the needle to gradually increase and stop at 900.
    After some research I think QAnimation has to be used. But I cant seem to understand how to use it.

    Can someone please give me some idea how to proceed on this as I am very new to this and I have limited time.

    Any help is greatly appreciated. Thanks in advance.


  • Moderators

    Hi @nidx, and welcome to the Qt Dev Net!

    For the gauge that you're using, the fastest way is to:

    1. Modify QcNeedleItem to make "currentValue" a QObject property (see http://doc.qt.io/qt-5/properties.html ), and then
    2. Use QPropertyAnimation to animate "currentValue" (see http://doc.qt.io/qt-5/animation-overview.html )


  • @JKSH Thank you very much. Will try it and let you know.



  • Hi @JKSH.
    I tried what you suggested I modified the QcNeedleItem to make "currentValue" as a QObject property as follows:

    class QCGAUGE_DECL QcNeedleItem : public QcScaleItem
    {
    Q_OBJECT
    Q_PROPERTY(float currentValue MEMBER mCurrentValue READ currentValue WRITE setCurrentValue)
    public:
    explicit QcNeedleItem(QObject parent = 0);
    void draw(QPainter
    );
    void setCurrentValue(float value);
    float currentValue();
    void setColor(const QColor & color);
    float mCurrentValue;
    QColor color();
    void setLabel(QcLabelItem*);
    QcLabelItem * label();

    enum NeedleType{DiamonNeedle,TriangleNeedle,FeatherNeedle,AttitudeMeterNeedle,CompassNeedle};//#
    
    void setNeedle(QcNeedleItem::NeedleType needleType);
    

    private:
    QPolygonF mNeedlePoly;
    QColor mColor;
    void createDiamonNeedle(float r);
    void createTriangleNeedle(float r);
    void createFeatherNeedle(float r);
    void createAttitudeNeedle(float r);
    void createCompassNeedle(float r);
    NeedleType mNeedleType;
    QcLabelItem *mLabel;
    };

    And Also in the mainwindow.cpp, I tried to animate the currentValue as follows:

    #include "mainwindow.h"
    #include "ui_mainwindow.h"
    #include "../../source/qcgaugewidget.h"
    #include <QPropertyAnimation>
    #include <QTimer>
    #include <sys/time.h>
    #include <unistd.h>

    MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
    {
    ui->setupUi(this);

    mSpeedGauge = new QcGaugeWidget;
    mSpeedGauge->addBackground(99);
    QcBackgroundItem *bkg1 = mSpeedGauge->addBackground(92);
    bkg1->clearrColors();
    bkg1->addColor(0.1,Qt::black);
    bkg1->addColor(1.0,Qt::white);
    
    QcBackgroundItem *bkg2 = mSpeedGauge->addBackground(88);
    bkg2->clearrColors();
    bkg2->addColor(0.1,Qt::gray);
    bkg2->addColor(1.0,Qt::darkGray);
    
    mSpeedGauge->addArc(55);
    mSpeedGauge->addDegrees(65)->setValueRange(0,100);
    mSpeedGauge->addColorBand(50);
    
    mSpeedGauge->addValues(80)->setValueRange(0,100);
    
    mSpeedGauge->addLabel(70)->setText("GFLOPS");
    QcLabelItem *lab = mSpeedGauge->addLabel(40);
    lab->setText("0");
    mSpeedNeedle = mSpeedGauge->addNeedle(60);
    mSpeedNeedle->setLabel(lab);
    mSpeedNeedle->setColor(Qt::white);
    mSpeedNeedle->setValueRange(0,80);
    mSpeedGauge->addBackground(7);
    mSpeedGauge->addGlass(88);
    ui->verticalLayout->addWidget(mSpeedGauge);
    
    QcNeedleItem *currentValue=new QcNeedleItem(this);
    currentValue->setCurrentValue(0);
    
    
    QPropertyAnimation animation(currentValue, "geometry");
    animation.setDuration(5000);
    animation.setStartValue(0);
    animation.setEndValue(50);
    
    animation.start();
    

    }

    MainWindow::~MainWindow()
    {
    delete ui;
    }

    void MainWindow::on_horizontalSlider_valueChanged(int value)
    {

    mSpeedNeedle->setCurrentValue(value);
    

    }

    But I get the following warning and the currentValue is not animated:
    QPropertyAnimation: you're trying to animate a non-existing property geometry of your QObject.

    Do you know what I might be doing wrong?


  • Moderators

    @nidx said:

    Do you know what I might be doing wrong?

    You called your property "currentValue", not "geometry". Which name do you want to use?



  • @nidx said:
    Constructor for QPropertyAnimation is:
    QPropertyAnimation::QPropertyAnimation(QObject * target, const QByteArray & propertyName, QObject * parent = 0)

    thus you have to write rather:
    QPropertyAnimation animation(currentValue, "currentValue");


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.