Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. General and Desktop
  4. How to animate Qt speedguage
Qt 6.11 is out! See what's new in the release blog

How to animate Qt speedguage

Scheduled Pinned Locked Moved General and Desktop
6 Posts 3 Posters 3.9k Views 3 Watching
  • Oldest to Newest
  • Newest to Oldest
  • Most Votes
Reply
  • Reply as topic
Log in to reply
This topic has been deleted. Only users with topic management privileges can see it.
  • ? Offline
    ? Offline
    A Former User
    wrote on last edited by
    #1

    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.

    1 Reply Last reply
    0
    • JKSHJ Offline
      JKSHJ Offline
      JKSH
      Moderators
      wrote on last edited by
      #2

      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 )

      Qt Doc Search for browsers: forum.qt.io/topic/35616/web-browser-extension-for-improved-doc-searches

      ? 1 Reply Last reply
      0
      • JKSHJ JKSH

        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 )
        ? Offline
        ? Offline
        A Former User
        wrote on last edited by
        #3

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

        1 Reply Last reply
        0
        • ? Offline
          ? Offline
          A Former User
          wrote on last edited by A Former User
          #4

          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?

          JKSHJ yeckelY 2 Replies Last reply
          0
          • ? A Former User

            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?

            JKSHJ Offline
            JKSHJ Offline
            JKSH
            Moderators
            wrote on last edited by
            #5

            @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?

            Qt Doc Search for browsers: forum.qt.io/topic/35616/web-browser-extension-for-improved-doc-searches

            1 Reply Last reply
            0
            • ? A Former User

              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?

              yeckelY Offline
              yeckelY Offline
              yeckel
              wrote on last edited by
              #6

              @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");

              1 Reply Last reply
              0

              • Login

              • Login or register to search.
              • First post
                Last post
              0
              • Categories
              • Recent
              • Tags
              • Popular
              • Users
              • Groups
              • Search
              • Get Qt Extensions
              • Unsolved