Hover ToolButton GIF Not Moving

wallacesoh

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?

raven-worx

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.

wallacesoh

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

raven-worx

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() );
}
@

wallacesoh

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

raven-worx

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.

wallacesoh

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

raven-worx

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

wallacesoh

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

raven-worx

[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()));
@

wallacesoh

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

wallacesoh

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?

wallacesoh

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?

raven-worx

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

wallacesoh

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! :)