Hover ToolButton GIF Not Moving



  • I have a toolbutton and when I hover over the toolbutton, the GIF is shown but the GIF is not moving (it is an animated GIF).

    @animatedButton->setStyleSheet("ToolButton:hover { background-image: url(../GIF/animated-picture.gif); }");@

    Can anyone please advise?


  • Moderators

    that's unfortunately not working that easy out of the box yet.
    You would need to set the GIF to a QMovie. And connect to it's frameChanged() signal and in the slot use QMoview::currentPixmap() and set it on your tool button each time.



  • That seems like a lot of work. I tried to do up the following but it is not working. I'm not sure if I have done it right.

    @QMovie *pixMap = new QMovie;
    pixMap->setFileName("../GIF/animated-picture.gif");
    animatedButton->setIcon(pixMap));
    connect(pixMap, SIGNAL(frameChanged()), pixMap, SLOT(QMovie::currentPixmap()));@


  • Moderators

    no you misunderstood me.
    I was talking about something like this:
    @
    QMovie *movie = new QMovie;
    movie->setFileName("../GIF/animated-picture.gif");
    animatedButton->setIcon(movie->currentPixmap());
    connect(movie, SIGNAL(frameChanged()), this, SLOT(onFrameChanged()));

    ...

    //SLOT
    void onFrameChanged()
    {
    animatedButton->setIcon( movie->currentPixmap() );
    }
    @



  • Thanks raven-worx. I tried your codes and there is no display on the tool button. May I know why do we need to declare twice of the following?

    @animatedButton->setIcon(movie->currentPixmap());@


  • Moderators

    sorry... i forgot to call start() on the QMovie.

    [quote author="wallacesoh" date="1381395886"]May I know why do we need to declare twice of the following?

    @animatedButton->setIcon(movie->currentPixmap());@[/quote]

    you actually don't need it, i just did it to have an initial icon set on the tool button. But once the QMovie emits frameChanged() signal a icon will be set anyway.

    [quote author="wallacesoh" date="1381395886"]I tried your codes and there is no display on the tool button.[/quote]

    Please make sure that the path to file is valid.
    e.g. use QFile::exists(...) for a quick check.



  • When I called start() on the QMovie, the GIF appears. However it's not moving. It's a working GIF.


  • Moderators

    hmm... what does QMovie::isValid() return?



  • It is valid. The slot, onFrameChanged() is probably not being called.


  • Moderators

    [quote author="wallacesoh" date="1381399626"]It is valid. The slot, onFrameChanged() is probably not being called. [/quote]

    -what does the connect statement return? If false whats the output in the console?-

    damn it ... signal signature was wrong:
    @
    connect(movie, SIGNAL(frameChanged(int)), this, SLOT(onFrameChanged()));
    @



  • Great! Thanks raven-worx. :) It worked! I guess the missing int is the reason why the SLOT is not being called.



  • Sorry. I would like to ask another question. If I were to hover the tool button and display this GIF. Would it be the same?

    My current codes are:
    @animatedButton->setStyleSheet("QToolButton:hover { background-image: url(../GIF/animated-picture.gif"); }");@

    But it won't animate. Is there a way to connect the signal and slot to setStyleSheet?



  • I have tried mouse events:

    @movie->setFileName("../GIF/animated-picture.gif");
    movie->start();
    animatedButton->setIcon(movie->currentPixmap());
    connect(movie, SIGNAL(frameChanged(int)), this, SLOT(onFrameChanged()));

    void ToolBarPalettes::enterEvent(QEvent *event)
    {
    animatedButton->setIcon(movie->currentPixmap());
    }

    void ToolBarPalettes::leaveEvent(QEvent *event)
    {
    animatedButton->setIcon(QPixmap("../IMG/still-picture.png"));
    }@

    I understand that onFrameChanged() is not called. Therefore, the animation doesn't works. Is it possible to change the connect statement to cater to mouse enter events?


  • Moderators

    define your custom ToolButton class like this:
    @
    class MyAnimatedToolButton : public QToolButton
    {
    Q_OBJECT
    Q_PROPERT(QString animatedIconPath READ animatedIconPath WRITE setAnimatedIconPath DESIGNABLE true )

    public:
    MyAnimatedToolButton(QWidget* parent = 0) : QToolButton(parent)
    {
    connect(&movie, SIGNAL(frameChanged()), this, SLOT(onFrameChanged()));
    }

     QString animatedIconPath() const
     {
          return movie.filePath();
     }
    
     void setAniamtedIconPath(const QString & path)
     {
           movie.setFilePath(path);
           if( path.isEmpty() )
                movie.stop();
           else
                 movie.start();
     }
    

    protected slots:
    void onFrameChanged()
    {
    this->setIcon( movie.currentPixmap() );
    }

    protected:
    QMovie movie;
    }
    @

    Then you can do this in your stylesheet:
    @
    MyAnimatedToolButton
    {
    qproperty-animatedIconPath: "../GIF/animated-picture.gif";
    }

    MyAnimatedToolButton:hover
    {
    qproperty-animatedIconPath: "";
    qproperty-icon: url(../IMG/stillpicture.png");
    }
    @

    This should give you an idea.

    Or go with the event handler approach like you tried. But then take care of stopping the QMovie at the appropriate point:
    @
    void ToolBarPalettes::enterEvent(QEvent *event)
    {
    movie->start();
    }

    void ToolBarPalettes::leaveEvent(QEvent *event)
    {
    movie->stop();
    animatedButton->setIcon(QPixmap("../IMG/still-picture.png"));
    }
    @



  • Thanks raven-worx! For now, I am trying out the event handler method which works perfectly. I did not include @movie->stop();@ which stops the animation upon start of the application.

    But I shall try your proposed stylesheet method as an alternative solution.

    Thanks alot! :)


Log in to reply
 

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