[Solved] QAnimations: what's the best way to print flippable cards?

Pippin

Well, since I get no reply, I suppose that there is no obvious answer.

I think I'll try to use QSequentialAnimationGroups whenever I need to flip a card: a first animation that scales the (face-up) card from 1 to 0, and a second animation that scales the (face-down) card from 0 to 1. The QPixmap of the first animation would be different than the QPixmap of the second one. Hopefully that will work and look natural.

SGaist

Hi,

Please, practice some patience, allow 24 to 48 hours before bumping your own thread. This forum is community driven and not all people active here live in the same timezone as you.

From the thread I linked, you have the base to do the flip itself. From there you can create a new QGraphicsObject derived class and add a custom property that you will use with the animation framework to animate the flip.

Pippin

@SGaist Thank you for your reply and sorry for the impatience.

Would you mind dropping a very small code sample that would do the stuff you described? I'm not yet familiar with animations and properties, you'll be sparing me a lot - a lot - of time.
About Qt itself. If I want to draw, say, 150 cards that each have a unique image while face-up, but all have the same image while face-down, and if all of them are face-down at a given time, Qt would be storing/drawing 150 identical QGraphicsPixmapItems whereas it would have been possible (with SFML for example) to store only 1 image and draw it 150 times. That looks very sub-optimal, but since Qt handles everything itself, I don't have much of a choice here, right?

SGaist

I wouldn't mind but I don't have it at hand, however the Animated Tile Example shows how to animate the position. You can adapt that for your needs.
QPixmap is one of the implicitly shared classes of Qt so you would indeed get 150 items but they will use all the same pixmap. Not that you can create your own item that contains both pixmap and set the right one when you flip it.

Pippin

@SGaist Thanks for your reply.

I've already read that example, but it doesn't tackle my problem. I have no idea how to adapt it to flip tiles. I apologize if that's obvious :S

mrjj

@Pippin
Hi this one is having flip code
https://blog.qt.io/blog/2009/06/09/flippin-widgets-medium-rare-please/
with animation. maybe you can reuse some of it.

SGaist

@mrjj good one ! Indeed, the code easily be re-used since it's already using the graphics view framework.

Pippin

@mrjj Thanks a lot, that is very helpful. A bit old though (2009), I see a method rootState() that doesn't exist anymore.

mrjj

@Pippin
indeed at bit old.
They talk about it here. (rootState())
http://stackoverflow.com/questions/7051146/qt-animation-member-doesnt-exist

QState *state1 = new QState(machine);
seems to be same as rootState

Pippin

@mrjj Thank you again. I've been willing to use your link but I would have questions.

How can I link a QState to a QGraphics(Pixmap)Item ? QState::assignProperty takes QObjects as first argument, but QGraphics(Pixmap)Item are not QObjects.

mrjj

hi
i think you need to make you own QGraphicsObject
that controls the image drawing.
Then add a new property for switching the image to next one and
use that for QState::assignProperty

Pippin

@mrjj said:

hi
i think you need to make you own QGraphicsObject
that controls the image drawing.
Then add a new property for switching the image to next one and
use that for QState::assignProperty

I'm really not familiar enough with Qt for that sadly... It's a real shame there is no simple way to do that. I'm a bit surprised that the beginner that I am finds right away something easy that is not easily done on Qt.

mrjj

@Pippin
well the c++ of Qt does take some practice and knowledge of Class and subclasses and other
c++ related topic. Once mastering common c++ methods, its not that hard as it else would seem.

Did you have a look at QML ? its another qt way that is more easy in regards to more dynamic
user interfaces.
For example it can just flip
http://doc.qt.io/qt-4.8/qml-flipable.html#details
and tons of other easy to use features.

Pippin

@mrjj I don't know how to use QML, the tutorial shows code but I failed to understand where to put it / how to link it with the rest of the project. I'm doing everything through qmake, make and ./run in the terminal. I'm also not sure if QML can do anything I could do with C++ methods :S

mrjj

@Pippin
its not like c++
there is a viewer program and you can also embed in c++
http://www.ics.com/blog/whole-shebang-running-qml-files-directly
Google is your friend
You can mix with c++ so you can do most.
But depends on what you really need for project.

Pippin

@mrjj said:

@Pippin
its not like c++
there is a viewer program and you can also embed in c++
http://www.ics.com/blog/whole-shebang-running-qml-files-directly
Google is your friend
You can mix with c++ so you can do most.
But depends on what you really need for project.

The thing is, the QGraphicsView/Scene is only part of a window, which is part of my global project. How exactly do I insert QML inside a Qt project?

mrjj

hi
you can use createWindowContainer
http://www.ics.com/blog/combining-qt-widgets-and-qml-qwidgetcreatewindowcontainer
or like this
http://doc.qt.io/qt-4.8/qml-integration.html
(check if works for 5.5)

But if most of is c++ , it might be overkill to use QML just to draw some cards.
Even if easy animation wise. You can try it out and see how much a hassle it is.

Pippin

Would it work if I created a class that inherits both from QObject and QGraphicsPixmapItem? Would that make the assignProperty thing work or is it more complicated than that?

mrjj

@Pippin
That should work. Remember Q_OBJECT in class.
Not much more needed
adding a property for advancing image
http://doc.qt.io/qt-5.5/properties.html
then use the CurrentFrame (or what you call it) with animation system to
load next image .
If I understand correctly that you have sequence of images that is the card flipping.

Pippin

Thank you for your help so far @mrjj

So I've created the class QSpecialGraphicsPixmapItem, which basically inherits from QObject and QGraphicsPixmapItem.

	QPixmap *pix = new QPixmap("Images/A.png");
	QSpecialGraphicsPixmapItem* item = new QSpecialGraphicsPixmapItem(*pix);
	item->setPos(100, 100);
	WindowScene.addItem(item);
	
	QStateMachine *machine = new QStateMachine();
	
	QState *state1 = new QState();
	state1->assignProperty(item, "rotation", 90);
	
	QState *state2 = new QState();
	state2->assignProperty(item, "rotation", 0);
	
	state1->addTransition(&Button1, SIGNAL(clicked()), state2);
	state2->addTransition(&Button1, SIGNAL(clicked()), state1);
	
	machine->addState(state1);
	machine->addState(state2);
	machine->setInitialState(state1);
	machine->start();

But when I compile & execute it, the pixmap is not rotated by 90 as it should be (since state1 is the initial state). What am I missing? Edit: nvm, got it. I just had to add

Q_PROPERTY(qreal rotation READ rotation WRITE setRotation)

in the definition of the class QSpecialGraphicsPixmapItem. I'm starting to get it.